preface

Blog address :Damonare’s personal blog

Chrome is one of the tools that I think every front-end ER must use, partly because it’s fast, small, supports more new features than other browsers, and partly because its console is so powerful that it’s easy to say it’s a miracle. But many developers don’t get the best out of the console and just use a simple console.log(); There’s more to the console than that.

console.clear

console.clear(); Clear the console. This is probably as well known as console.log.

The console. The family of the log

A quick introduction to the Chrome console. Open chrome browser and press F12 to easily open the console

If you’re a developer, console.log is used a lot. Let’s take a look at some of console.log’s Cousins:

Log (' general info ') 2. Console. info (' warning info ') 3. Console. error (' error info ') 4. Console. warn (' Warning info ')Copy the code

Everyone uses logs, but few people do a good job of sorting information output to the console using console.error, console.warn, etc. There is little difference between them, but the point is to categorize, or make more semantic, the information output to the console.

With console.group and console.groupEnd, you can take this idea of categorization to the extreme. This is suitable for developing a large and complex Web APP with many modules to group log information into groups named in their respective namespaces.

console.group("app.bundle"); Console. warn(" Warning 1 from the Bundle module "); Console. warn(" Warning message 2 from the Bundle module "); console.groupEnd(); console.group("app.bundle"); Console. log(" Message 1 from the bundle module "); Console. log(" Information from the bundle module 2"); console.groupEnd();Copy the code

This makes the console information look obvious, so you don’t have to go through the source code again to find out which line of output this belongs to.

In addition, the console.log family provides an API: the first argument can take some formatting instructions, such as %c,\n; Check out the cool effect below:

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), Color-stop (0.15, #f2f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), #2f2, Color-stop (0.9, #ff2), color-stop(1, #f22)); color:transparent; -webkit-background-clip: text; font-size:5em; ');Copy the code

Of course, pictures can also be, readers can try, modify the above code.

In addition, console.log() takes undefined arguments separated by commas, and the output will eventually concatenate them with whitespace characters.

console.table

Looking at this kind of “black magic” is not a kind of pit divided feeling, in fact, more than oh! Console. table allows us to print a table, for example:

Var data = {code: 200, the content: [{' name ':' du les', 'number: 4}, {' name' : 'okamoto', 'number: 3}]}. console.table(data.content);Copy the code

Console. table can be used to display data in a tabular format.

console.assert

var isDebug=false; Console. assert(isDebug,' Developing log information... ');Copy the code

Cosole.assert is a good tool to use when you want to output to the console if your code meets certain conditions. It asserts the expression that is passed in and only outputs to the console if the expression is false.

console.count

In addition to the conditional output scenario, another common scenario is counting. You don’t have to write your own logic when you want to count how many times a piece of code has been executed. The built-in console.count is perfect for this task.

console.dir

The console outputs the DOM node as a JavaScript object. Console. log directly outputs the DOM node as a DOM tree, the same structure you saw when reviewing elements. Different forms of presentation, the same elegance, a variety of positions to choose is convenient and considerate anyway.

console.dir(document.body);
console.log(document.body);Copy the code

console.time & console.timeEnd

Printing some debugging information is the console’s most common function, but of course it does much more than that. This is also a handy place to do some performance testing. For example, you can use console.time and console.timeEnd to measure how long a piece of code takes to execute.

The console. The time (" Array time-consuming "); var array= new Array(10000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; The console. TimeEnd (" Array time-consuming ");Copy the code

When you want to view CPU usage information, you can use console.profile with console.profileEnd to do this. This can be done through the UI, and Chrome Developer Tools has a TAB called a Profile. Use the same method as console.time. In fact, the time developer tool also has a TAB called timeline. The console. Prefile blogger won’t go into any more detail. Readers who want to learn more can see it here.

$

Let’s face it, American programmers really love money (and who doesn’t?). Just look at PHP. In Chrome’s console, $is also pretty handy.

2+2// press enter, then $_+1// press enter to get 5Copy the code

$_ above needs to be understood to work properly, while $0 to $4 represent the last five DOM nodes you have selected. What does that mean? Review right click on the select element in the page, and then pop up the DOM node tree just click on the above, these are some of the node will be recorded, while $0 is returned last click the DOM node, and so on, $1 returns the last click on DOM node, saved a maximum of 5, 5, if not it returns undefined.

Additionally, the Chrome console supports a jquery-like selector, which means you can use $plus the familiar CSS selector to select DOM nodes.

$('body');
$('div');Copy the code

$(selector) returns the first DOM element that satisfies the selection criteria. Strip away the hypocrisy, and $(selector) is a wrapper around native JavaScript document.querySelector(). And another command? The selector () returns all meet the selection criteria of the elements of a collection, is to document querySelectorAll () encapsulation.

$x(path)

Returns the matched node in an array

$x("//p");
$x("//p[a]");Copy the code

$x(“//p[a]”); $x(“//p[a]”) Matches all p nodes whose children contain a

copy

copy(document.body)Copy the code

Then you can Ctrl+ V.

Note: it is not attached to any global variables such as window, so there is no access to the copy method in JS code, so there is no way to call the copy function from the code level. Hopefully one day browsers will provide javascript implementations so we can copy javascript code without having to rely on Flash plugins.

keys & values

These are two gay friends. The former returns the data of all the property names of the passed object, while the latter returns an array of all the property values. See the following examples:

var tfboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tfboy);
values(tfboy);Copy the code

monitor & unmonitor

Monitor (function), which takes a function name as an argument, such as function a. Each time a is executed, a message is printed to the console containing the name of the function a and the parameters passed during execution. Unmonitor (function) is used to stop this listening.

function sayHello(name){
    alert('hello,'+name);
}
monitor(sayHello);
sayHello('damonare');
sayHello('tjz');
unmonitor(sayHello);Copy the code

debug & undebug

Debug also receives a function name as an argument. When the function is executed, it automatically breaks for debugging, similar to making a breakpoint at the entrance of the function. This can be done by the debugger, or manually breaking the point by finding the source code in Chrome Developer Tools. Undebug removes the breakpoint. There are a number of other commands that don’t make you want to say them, because many of them can be accessed through the Chrome Developer Tools UI and are easier to use than typing on the console.

Basis of this blog postThe Console API documentationandCommond APIWriting.