12 kinds of console-related methods to help you quickly improve debugging efficiency! (Recommended collection)

Author: Craig Buckler
Translator: Frontend Xiaozhi
Source: .openreplay

If you have dreams and dry goods, search on [Daily Move to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

When I debug code, I basically use console.log() debugging method. Although it is low-level, it is easy to use. Of course, other tools will be used for complicated points, but console.log() basically enough in daily development.

The prefixes are almost ready, today we will take a look at what other console.log() in 0613fed12e7d3e.

1. Use ES6 to deconstruct and assign the output variable name

If you print multiple values, we usually print them together with the variable name in order to distinguish:

const variableX = 42;
console.log('variableX:', variableX);
// 或者
console.log(`variableX: ${ variableX }`);

In fact, there is a very concise way to use deconstruction:

const variableX = 42;
console.log({ variableX }); // { variableX: 42 }

2. Use the appropriate print type

console.log() generally used like this:

console.log('no-frills log message');

But it is not the only type. Messages can be classified as information (the processing method is the same as console.log()

console.info('this is an information message');

warning:

console.warn('I warned you this could happen!');

error:

console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');

Or less important debugging information:

console.debug('nothing to see here - please move along');

console.table() can output the value of the object in a more friendly format.

const obj = {
    propA: 1,
    propB: 2,
    propC: 3
  };
console.table( obj );

Or an array of objects:

const arr2 = [
    { a: 1, b: 2, c: 3 },
    { a: 4, b: 5, c: 6 },
    { a: 7, b: 8, c: 9 }
  ];

console.table( arr2 );

Other options include:

• console.dir( obj ) displays an interactive property list of a JS object
• console.dirxml( element ) displays the interactive tree of the child elements of the specified HTML or XML node.
• console.clear() clears all information before the console.

3. Filter log messages

The browser displays log information in appropriate colors, but it can also be filtered to display specific types. Click the icon at the top left of the console pane to open the sidebar of Chrome.

Note that the console.debug() information will only be displayed when viewing the verbose

4. Use printf-type information

All log types can use the C language style printf message format, which defines a template, which contains a % indicator with a variable being replaced. E.g

console.log(
  'The answer to %s is %d.',
  'life, the universe and everything',
  42
);
// The answer to life, the universe and everything is 42.

Style with style

console.log(
  '%cOK, things are really bad now!',
  `
  font-size: 2em;
  padding: 0.5em 2em;
  margin: 1em 0;
  color: yellow;
  background-color: red;
  border-radius: 50%;
  `
);

The result in the console:

6. Assertions using similar tests

console.assert() command similar to the test can be used to output a message when the condition fails. A condition and one or more objects can be used to define an assertion, and output when the condition fails, for example

console.assert(
  life === 42,
  'life is expected to be',
  42,
  'but is set to',
  life
);

In addition, a message and replacement value can also be used.

console.assert(
  life === 42,
  'life is expected to be %s but is set to %s',
  42,
  life
);

When the condition fails, both options will display an assertion error.

7. Run the stack trace

You can use console.trace() output a log of all function calls that constitute the current execution point.

function callMeTwo() {
  console.trace();
  return true;
}
function callMeOne() {
  return callMeTwo();
}
const r = callMeOne();

The trace shows which line each call is, and can be collapsed or expanded in the console pane:

8. Group log messages

When printing the log, you can use console.group( label ) end to console.groupEnd() the log messages into named groups. Message groups can be nested and collapsed or expanded ( console.groupCollapsed( label ) initially shows the group in collapsed state):

// start log group
console.group('iloop');

for (let i = 3; i > 0; i--) {

  console.log(i);

  // start collapsed log group
  console.groupCollapsed('jloop');

  for (let j = 97; j < 100; j++) {
    console.log(j);
  }

  // end log group (jloop)
  console.groupEnd();

}

// end log group (iloop)
console.groupEnd();

9. Use the timer

console.time and console.timeEnd can be used to allow web developers to measure the time consumed by the execution of a javascript script. As WEB applications become more and more important, the execution performance of JavaScript is getting more and more attention. WEB developers know that some performance testing machines are necessary.

console.time method is to start calculating the time, and the console.timeEnd is to stop the timing and output the time when the script is executed.

// 启动计时器
console.time('testForEach');

// (写一些测试用代码)

// 停止计时，输出时间
console.timeEnd('testForEach');

// 4522.303ms

In both methods, a parameter can be passed as the name of the timer. Its function is to distinguish each timer when the code runs in parallel. The call to console.timeEnd will immediately output the total execution time, in milliseconds.

10. Debug and monitor functions by name

DevTools Sources panel (or Firefox ) allows you to open a file and set a breakpoint by clicking the line number. Chrome-based browsers also allow you debug(functionName) in the console, for example:

debug( doSomething );

The function must be available in the global namespace, and the browser will start the debugger as soon as it is called. You can use undebug(functionName) or reload the page to cancel debugging.

monitor(function) , it receives a function name as a parameter, such as function a , every time a is executed, it will output a message on the console, which contains the name of the function a and the parameters passed in during execution.

And unmonitor(function) is used to stop this monitoring.

11. Find and fix event listeners

The Firefox DevTools Inspector panel will display a event icon next to any DOM element with a handler attached. Click the icon to view the function name, and then click the arrow icon on the left to expand the code. Alternatively, the "Open in Debugger" icon will locate the handler in the "Debugger" pane so that breakpoints can be set

Chrome's implementation is not so good, but you can getEventListeners() function to view all event listeners. For example, getEventListeners($0) shows the listener applied to the highlighted DOM node in the current Elements panel

12. Copy attributes to clipboard

The copy() command on the console can copy any value to the clipboard. It can be a primitive value, array, object or DOM node.

When passing a DOM node, copy() the HTML of the element and all its child elements on the clipboard. This is the same as right-clicking on a node and selecting Copy, and then selecting Copy Outer HTML.

Command copy( document.documentElement ) copy the entire HTML document. This can be pasted into a text editor and beautified to enhance readability.

~End, there are many ways to use it, I’m Xiaozhi, I’m going to do the dishes, see you in the next issue~

---

code is deployed, the possible bugs cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://blog.openreplay.com/12-ways-to-improve-your-devtools-console-logging

comminicate

If you have dreams and dry goods, search on [Daily Move to the World] Follow this brushing wisdom who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.