Log print

The most common function of the console is probably the log print view, but we all know several log print methods, the following one said.

console.assert(expression, object)

You can pretty much guess what it does by looking at the name Assert.

console.assert(expression, object)
Copy the code

Console. assert takes two arguments, the first an expression and the second an object.

When the expression has a value of false, an error is printed, which is the second argument.

// Copy this code to the console for execution
const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});
Copy the code

You’ll see reason printed out.

I tried it out here, and the second argument could be any other kind of data.

console.clear()

This method is used to clear the console. Type console.clear() and press Enter to see that the information has been cleared.

There are, of course, several other ways of emptying

  • performclear(), the effect andconsole.clear()It’s the same.
  • Press at the consolecontrol + lThe keys
  • Press at the consolecommand + shift + pAnd then typeclear

The first one is Clear Console, just hit Enter.

  • You can actually push buttons on a Maccommand + kTo clear the console.

console.count([label])

This method is used to print the number of times count is called, and can be passed as an identifier.

console.count('coffee'); // Copy to the console and execute once
Copy the code

We’ll see that the console prints: coffee: 1, and we continue twice.

As you can see, coffee prints three times. If no parameter is passed, it’s default, so you can try it out for yourself.

console.countReset([label])

This corresponds to console.count and is used to reset the count.

console.debug(object [, object, ...] )

This function is the same as console.log, but the log level is different. Console. log is the Info level and console.debug is the Verbose level.

console.dir(object)

This method is used to print the JSON form of the specified object.

This is the JSON content of the Document object.

console.dirxml(object)

This method is used to print the XML form of the Node node.

console.error(object [, object, ...] )

This method is used to print an error message and contains the stack trace (that is, the trace of the path where the error occurred).

console.group(label)

This method prints the information together in groups until console.groupEnd is called.

// Copy this code to the console for execution
const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);
Copy the code

You can see that the information printed between console.group and console.groupEnd appears in a group that can be collapsed and expanded.

console.groupEnd(label)

Console. group corresponds to console.group.

console.groupCollapsed(label)

The function of this method is the same as console.group, except that logs printed by this method are collapsed by default.

Collapsed from console.group to console.group collapsed.

You can see that the information is collapsed by default.

console.info(object [, object, ...] )

This method is the same as console.log.

console.log(object [, object, ...] )

Print a message on the console. This should be very familiar, use is also the most, not to say.

console.table(array)

Print the information as a table, such as an array

Objects can also

console.time([label])

To start a new timer, call console.timeEnd and print out the elapsed time.

// Copy to the console for execution
console.time();
for (var i = 0; i < 100000; i++) {
  let square = i ** 2;
}
console.timeEnd();
Copy the code

Console. time and cnsole.timeEnd can both pass a single parameter, similar to console.count.

console.timeEnd([label])

Stop the timer. It said that.

console.trace()

Prints stack trace information.

// Copy to the console for execution
const first = () = > { second(); };
const second = () = > { third(); };
const third = () = > { fourth(); };
const fourth = () = > { console.trace(); };
first();
Copy the code

You can see that console.trace prints out the function call information.

console.warn(object [, object, ...] )

Print a warning message.

There are many ways to print, but the information is graded, with errors, warnings and so on. Here’s a summary.

methods The level of logging
console.count Info
console.dir Info
console.dirxml Info
console.info Info
console.log Info
console.table Info
console.timeEnd Info
console.trace Info
console.warn Warning
console.assert Error
console.error Error
console.debug Verbose

On the console, if you want to filter information by log level, you can do so through the area marked in the image above.

methods

The $_

$_ returns the value of the most recent expression.

$0 – $4

$0 – $4 returns a historical reference to the five most recently selected DOM Elements in the Elements panel or the five most recently selected Javascript heap objects in the Profiles panel. $0 is the closest reference, $1 is the second closest reference, and so on.

$(selector, [startNode])

The $usage is somewhat similar to the Jquery selector, but it actually uses the document.querySelector() method.

The method also receives a second parameter, startNode, which is a Node Node, indicating that the search begins from here.

$$(selector, [startNode])

$$is similar to the above $selector, just use the document. The querySelectorAll () method.

The $$method also supports the second parameter startNode, which defaults to document if not passed.

$x(path, [startNode])

$x(path) returns an array of elements matching the given XPath expression.

This returns an array containing all the SPAN elements of the current page. This method also supports a second parameter, startNode.

clear()

Clear console history, similar to console.clear().

copy(object)

Copies the string form of the specified object to the clipboard.

debug(function)

The method takes one argument and is a method. When this method is called, debug is entered.

You can call the undebug(fn) method to stop debugging.

dir(object)

The dir() method, like the console.dir() method, returns the JSON form of the object passed in.

dirxml(object)

Dirxml (), like the console.dirxml() method, returns the XML form of the object passed in.

inspect(object/function)

Inspect () opens and selects the specified element or object in the appropriate panel: the Elements panel for the DOM element or the Profiles panel for the JavaScript heap object.

getEventListeners(object)

This method returns an event listener registered on the specified object, and the return value is an object containing an array of each registered event type (for example, click or press a key). Array members are listener objects for the event.

keys(object)

This method returns an array containing the names of the attributes (keys) of the passed object. You can use the values() method to get an array of object property values.

monitor(function)

When the specified function is called, the console logs a message indicating the function name and the parameters passed to the function when the function is called.

monitorEvents(object[, events])

This method takes two arguments, the first an object and the second an event object, which is printed out when the passed time is fired on the specified object.

The second argument can be passed not just a single event, but an array of events. You can even pass in the specified event type.

monitorEvents(window["resize"."scroll"]); // Pass in an array
monitorEvents($0."key"); // Pass in an event type
Copy the code

The event types are as follows:

profile([name]) 和 profileEnd([name])

Profile () starts a Javascript Cpu profile that can be passed in as a parameter (string). ProfileEnd () is used to complete a Profile and displays the results in the Profile panel.

queryObjects(Constroctor)

This method returns an array of objects created by the specified constructor. Such as:

  • QueryObjects (Promise) returns all Promise methods.

  • QueryObjects (HTMLElement) returns all HTML.

  • QueryObjects (foo) returns all objects created by new foo().

The scope of queryObjects() is the execution context currently selected in the console.

table(data[, columns]))

The table() method is similar to console.table().

undebug(function)

Undebug (fn) Stops the debugging of the specified function.

unmonitor(function)

Unmonitor (function) is used to stop monitoring the specified function. Corresponds to the Monotor () method.

unmonitorEvents(object[, events])

UnmonitorEvents () is used to stop monitoring incoming objects. Corresponds to the monitorEvents() method.

values(object)

This method, as described above, returns an array containing the values of the specified object.

Console log printing and all kinds of shortcuts here, there are errors and additions welcome to put forward corrections, very thank you!!

Reference:Developers.google.com/web/tools/c…