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.
console
Family 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.
log
Similar 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.log
Adding 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.log
The 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
-
Deep copy
Let obj={age:11} console.log(json.parse (json.stringify (obj)) Console. log(json.parse (json.stringify (obj))) // after changeCopy the code
-
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
-
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.