Main Contents:

For those familiar with Console, skip to Part 3.

Log (), console.log({}), and console.table().

2. Advanced Usage of Console This section describes the useful usage of console, which is rarely used. This includes console.trace(), console.time() and console.timeend (), console.log(‘%c’), etc.

This section describes how to use Chrome Dev Tools to better use console during development, including adding time stamps, monitoring console output in real time, and adding console directly to Source.

Simple use of Console

Log (), console.log({}), console.table().

A simple example:

Advanced use of Console

Describes useful uses of console that are seldom used. This includes console.trace(), console.time() and console.timeend (), console.log(‘%c’), etc.

console.trace( )

Can be used for function call tracing.

function fn3(a) {
  console.log('fn3')
  console.trace();
  return;
}
function fn1(a) {
  console.log('fn1');
  fn2();
}
function fn2(a) {
	console.log('fn2')
	fn3();
}
fn1();
Copy the code

The following output is displayed:

The stack information printed here can also be right-clicked to Save as into a document that can be used for inter-team communication.

The console. Time () and the console. TimeEnd ()

Used in pairs, both accept the same parameters and are used to identify different time groups. Can be used to output the time of code execution within the two contain, generally can be used to judge the performance of code execution.

console.log(‘%c’)

Can be used to add output styles, see the following example:

Console.warn () and console.error()

Output ungraded data

console.assert( )

Can be used for assertion judgments, and when argument 1 is false, argument 2 is printed.

console.clear()

Clear the console output in the panel

Chrome-based Dev Tools console use

Describes how to use Chrome’s Dev Tools to make better use of console during development, including adding timestamps, monitoring console output in real time, and adding console directly to Source.

Add a timestamp

To see the time relationship between the console Menus, add a timestamp to the front of the console, Ctrl + Shift + P, open Command Menus, and check the corresponding Command. Here’s an example:

Use the Live Expression gadget

In Chrome’s Dev Tools console panel, an “eye” -like symbol appears in the second column. This is the Live Expression widget, where you can define real-time expression monitoring, and you can define more than one at a time. Here are two examples:

(1) Simple expressions:

(2) Monitor mouse click coordinates (script has been used to hang coordinates in window.pos) :

Application scenario: Data that needs to be output in real time, such as the coordinates of the mouse and changes of an element.

Add console in Sources

Borrow a breakpoint to use console.

(1) Use LogPoint

You can right-click where you added the breakpointAdd logpoint Add console in the following format:

(2) Use conditional breakpoints

Conditional breakpoints are evaluated each time the line is executed. If the added condition returns true, the code is paused. Full true and false are not required, so the addition of console-related code does not pause the execution of the code. Instead, you can add the relevant console code to print the result. You can Add the console code in Add Conditional Breakpoint by right-clicking where you added the breakpoint as shown in the following example:

Adding console to Sources in Dev Tools has the benefit of not contaminating the working code, and it is also convenient to remove all defined breakpoints with one click in the Breakpoint section.

If you are in webpack engineering development, you can usually see the corresponding Webpack folder in Sources (if not, check to see if devtool:’source-map’ is configured in webpack), which contains the complete source code. Breakpoints can also be used here. In addition, you can add the corresponding project file to the Sources Filesystem, which will be synchronized to the file and can be developed with the local service. This is similar to the code development in Chrome, but requires the corresponding Webpack sourceMap. Non-engineered projects can be updated in real time.