Use of Console, and Debug tips

directory

1. Background

2. Knowledge analysis

3. Frequently Asked Questions

4. Solutions

5. Coding

6. Expand your thinking

7. References

8. More discussion

What is Console?

Console in Chrome is a separate window for displaying JS and DOM object information. And inject a console object into JS, which can output information to

In the Console window. On debug browsers, the window object registers a member variable named console, which refers to the console in the debug tool. Console has many methods, such as the most commonly used log().Copy the code

Knowledge analysis of common console methods

  1. Console.log () is a normal output method that can take any object.

Constant console.log(” constant “);

The console variables. The log (name); The expression console.log(" name: "+ name); Methods the console. The log (document. GetElementsByTagName (" code "));Copy the code
  1. console.table()

You can output the incoming object or array as a table. This output scheme is better for objects or arrays with neatly arranged elements than traditional tree output, otherwise there may be a lot of undefined.

var obj = {

fun: {

name: ‘foo’,

age: ’18’

},

bar: {

name: ‘bar’,

age: ’19’

}

};

var arr = [

[‘fun’, ’18’],

[‘bar’, ’19’]

];

console.log(obj);

console.table(obj);

console.log(arr);

console.table(arr);

3.console.count([label])

Output the number of times executed to this line. For example:

(function() {

for (var i = 0; i < 5; i++) {

console.count(‘count’);

}

}) ();

// count: 1

// count: 2

// count: 3

// count: 4

// count: 5

4.console.time(name)

A timer that prints to the console the running time of pairs of code between console.time() and console.timeend (), with the name parameter as the label name.

Console. time(‘ timer ‘);

for (var i = 0; i < 1000; i++) {

for (var j = 0; j < 1000; j++) {}

}

Console. timeEnd(‘ timer ‘);

5.console.profile([profileLabel])

It’s a nice thing to use for performance analysis. In JS

In development, we often evaluate the performance of a piece of code or a function. Printing the time manually in a function is fine, but it is inflexible and error-prone. The console and console.profile() methods make it easy to monitor performance.Copy the code

For example, the following code:

function parent() {

for (var i = 0; i < 10000; i++) {

childA()

}

}

function childA(j) {

for (var i = 0; i < j; i++) {}

}

Console. profile(‘ Performance analysis ‘);

parent();

console.profileEnd();

We can then see the elapsed time during the above code run under the Profiles panel.

Optimizing the performance of the page loading process is an important part of front-end development. Using the Profiles panel of the console, you can monitor the performance of all JS. Using it like a video recorder, the console will record the running process. As shown, there are record and stop buttons on the toolbar.

  1. Other methods

. Clear console clear()

. List objects and child elements in the directory tree console.dir()

Condition print (assert) console.assert()

3. Common Debugging methods 4. Solution

  1. Breakpoint debugging

Breakpoint debugging is the most basic debugging method, in the process of debugging to see variables and functions of the changing state, which makes the invisible program running process become visible.

Breakpoint debugging is all done in the Source TAB, so it is discussed together below.Copy the code
  1. Sources TAB

a.

Breakpoints are also displayed in the Breakpoint option. You can check off breakpoints in the Breakpoint TAB, so that you don't have to get lost in the code.Copy the code

b.

The first two of these small ICONS are the same as the two buttons on the debugging page, which are pause/start and single step. The two up and down arrows to the right mean into the function and out of the function; The last one is to ignore all breakpoints. This avoids the embarrassment of adding breakpoints one by one after clicking all breakpoints.Copy the code

C. Watch window:

Click "+" to add a variable you want to monitor. During the debugging process, this variable will always be displayed here, so you don't have to search between functions, and then "hover" to display its value, which is very suitable for monitoring global variables.Copy the code

Why not use Alert for debugging?

On the one hand, the traditional alert debugging method has gradually failed to meet the various scenarios of front-end development. And alert debugging mode pop-up debugging information, that window is really not beautiful, and will block part of the page content, really some not too friendly.

On the other hand, the debug information for Alert interrupts the code and prevents the page from continuing to render. This means that developers have to manually clean up the debug code after debugging, which is a bit of a hassle.

In addition, if you use alert in the loop, just closing the popup window is tiring enough, ha ha!

Reference 1: Do you really know console

Reference 2: An incomplete guide to Chrome Developer Tools

Reference 3:

href="https://developers.google.com/web/tools/chrome-devtools/console/?utm_source=dcc&utm_medium=redirect&utm_campaign=2 Q3 016 "> Google Developers websiteCopy the code

Reference 3: CSDN Chinese IT network

8. More discussion We have a good way to share in the debugging program?

Thank you for watching

Today’s share is over here, welcome everyone to like, forward, leave a message, pat brick ~

Skill tree.IT Monastery

“We believe that everyone can become an engineer. From now on, find a senior to guide you to the entrance, control the pace of your own learning, and no longer feel confused on the way to learning.”

Here is the skill tree.IT Shuzhen Institute, where thousands of brothers find their own learning route, learning transparent, growth visible, brothers 1 to 1 free guidance.

Come with me learn ~ http://www.jnshu.com/login/1/21109035