This is the 4th day of my participation in the August More Text Challenge

preface

As a front-end developer, writing bugs is a daily habit, but it doesn’t work. You have to find them, so you have to debug your code. There are two ways to debug code: debugger (breakpoint debugging) and console.log (log debugging).

As a beginner, one of the first things you learn is log debugging, but do you really know how to use console.log?

This article focuses on other methods of console objects, the color output of console.log, and the display bug of console.log printing reference types in Google Chrome.

consoleFamily members

The Console object itself is not a W3C standard, so each browser has its own implementation, and we’ll focus on the Google Browser Console object.

Open the browser console and type console

It can be seen that in addition to the usual log methods, there are also info, DEBUG, WARN, error, count, time and other methods. Because there are many methods, only a few special methods will be selected. If you want to know more about how to use the method, you can refer to the MDN documentation.

logSimilar methods

Similar to the log methods are info, DEBUG, WARN, and ERROR, whose main purpose is to output debugging information.

As you can see, the difference between the different methods is reflected in the color and background, which is easy for developers to distinguish.

Because the error method is a bold color, during our development, we can use the error method if we want to find output information in multiple logs

Time Code performance check

In our development or learning process, we often look at the time it takes for a certain string of code to run. We may commonly use the time stamp before and after the operation, but this is not easy enough.

Console. time and console.timeEnd solve this problem

console.time(1)
var knum = 0;
for (var i = 0; i < 10000; i++)
{
	knum /= i;
}
console.timeEnd(1)   / / 1:7.7138671875 ms
Copy the code

Not only must console.time and console.timeEnd be paired, but matching console.time and console.timeEnd must pass the same parameters

Dir prints the actual structure of the object
let appHtml=document.getElementById("app")
console.log(appHtml)
Copy the code

When we debug the output Dom element, the console displays the HTML structure, but usually we need the Dom object property list. Console. dir, like the console dir method, gets the Dom object property list

The trace output function executes the stack

We can use trace to view the function call stack when we do not know in which function the currently executing function is executing, or if we are not sure of the hierarchical order in which the function is executing

function a() {
    console.log('a function')
    console.trace()
}
function b() {
    console.log('b')
    a()
}
b()
Copy the code

toconsole.logAdding color

When we browse some websites, we will find its console printed out some brightly colored text, such as Taobao

In our usual log output is not seen, so how is it to achieve nan?

// 1. Put the CSS style content into the array
const styles = [
    'color: red'.'font-size: 46px'.'text-shadow: 2px 2px 2px black'.'padding: 10px',      
].join('; ');
// 2. Use the join method to join items into a string with semicolons
// 3. Pass the styles variable
console.log('%c Security Warning ', styles);
Copy the code

%c is a format placeholder, which occupies a position in the string and is supplemented by subsequent arguments, similar to the FORMAT placeholder in C.

It also includes %s, %f, %d, and so on.

console.log("Foo %.2f".1.1)    //%.2f represents the current position where the data is inserted as a floating point with two decimal digits reserved, and the output is Foo 1.10
console.log("%s".'Foo')         //%s represents the current position to insert data as a string, output: Foo
console.log("Foo %d".1.1)      //%d indicates that the current position of the insert data is an integer, output: 1
Copy the code

console.logThe output reference type is abnormal

The phenomenon of
let obj={
	age:11
}
console.log(obj)   / / change before
obj.age=999
console.log(obj)   / / after the change
Copy the code

You can see the output before and after the change. In the outermost snapshot, the output is different, but when you click to see details, the output is the same, which leads to a Bug in Google Chrome.

For reference types, the browser first displays a snapshot of the outermost layer and saves a reference to the object that is accessed when clicked. This results in the same result twice when the object is clicked, because the object references the type, and the address is unchanged both before and after the access, so the same heap information data is accessed.

The solution

  1. Deep copy

    Let obj={age:11} console.log(json.parse (json.stringify (obj)) Console. log(json.parse (json.stringify (obj))) // after changeCopy the code

  2. Convert to string

    let obj={
     age:11
}
console.log(JSON.stringify(obj,null.2))   / / change before
obj.age=999
console.log(JSON.stringify(obj,null.2))  / / after the change
Copy the code

  3. Debugger mode debugs code

Out of memory

Because the address of the reference type is saved in console.log output, this reference type is not cleared by garbage collection. The result is an overflow of memory, as shown in the following code

function Test() {
    this.a = new Array(10000).fill('isboyjc')
    console.log(this)}for (let i = 0; i < 100; i++) {
    new Test();
}
Copy the code

Console. log output will save the pointer to the output reference type, causing garbage collection mechanism not to collect. Therefore, memory is always occupied. During daily development process, Be sure to delete unwanted logs.