Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the debugging skills of Chrome browser". In the daily operation, I believe many people have doubts about the debugging skills of Chrome browser. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what are the debugging skills of Chrome browser?" Next, please follow the editor to study!

Alert

Needless to say, it speaks for itself.

Console

Basic output

Presumably everyone is using console.log to output something in the console. In fact, console has other methods:

Console.log ("print string"); / / print the custom string console.error ("I am an error") on the console; / / print the custom error message console.info ("I am a message") on the console; / / print the custom message console.warn ("I am a warning") on the console / / print the custom warning message console.debug ("I am a debugger") in the console; / / print the custom debug information cosole.clear () in the console; / / clear the console (not in the screenshot below)

Note that the error output above is different from the error output from throw. The former only outputs error messages, cannot be captured, does not bubble, and does not stop the program from running.

Formatted output

In addition, console supports custom styles and printf forms similar to the c language

Console.log ("% s year", 2016); /% s represents the string console.log ("% d year% d month", 2016, 11); / /% d represents integer console.log ("% f", 3.1415926); / /% f decimal console.log ("% o", console); / /% o represents object console.log ("% c custom style", "font-size:30px") Color:#00f "); console.log (" c I am c custom style "," font-size:20px;color:green "," font-size:10px;color:red ")

DOM output

Here are a few simple ones, without giving examples, let's talk about it briefly:

Var ul = document.getElementsByTagName ("ul"); console.dirxml (ul); / / Tree output table node, that is, and its innerHTML, because document.getElementsByTagName is dynamic, the result must be dynamic

Object output

Var o = {name: "Lily", age: 18}; console.dir (obj); / / display object's own properties and methods

For a collection of multiple objects, you can do this to make the output clearer:

Var stu = [{name: "Bob", age:13,hobby: "playing"}, {name: "Lucy", age:14,hobby: "reading"}, {name: "Jane", age:11,hobby: "shopping"}]; console.log (stu); console.table (stu)

Group output

/ / create a parameter group console.group ("start"); / / set the group name in quotation marks, console.log ("sub1"); console.groupEnd ("end")

Function counting and tracking

Function fib (n) {/ / output the first n Fibonacci series values if (n = = 0) return; console.count ("number of calls"); / / put in the function, the number of times the function executes each time the code is run and output; / / display the function call trajectory (access the call stack) var a = arguments [1] | | 1; var b = arguments [2] | 1; console.log ("fib=" + a) [a, b] = [b, a + b]; fib (--n, a, b);} fib (6)

Note: the Sources tab in the Chrome developer tool also displays the call stack under the Watch expression.

Timing

Console.time () / / timing starts fib (100); / / calculate 100Fibonacci numbers using the above function console.timeEnd () / / timing ends and output time

Assertion statement is also often used in C++ debugging. In js, nothing happens when an expression or parameter is true, but terminates the program and reports an error when it is false.

Console.assert (true, "I was wrong"); console.assert (false, "I was really wrong")

Performance analysis.

Function F () {var I = 0; function f () {while (ionization + = = 1000);} function g () {while (ionization + = = 100000);} f (); g ();} console.profile (); F (); console.profileEnd ()

Note: performance analysis can also be performed on the Audits tab in the Chrome developer tool.

Debugger

This heavyweight is the most commonly used by bloggers, probably from C++, with a heartfelt love of stepping into debugging. Step debugging is to click, execute a program, and view all variables and values visible in the current scope. Debugger tells the program where to stop for single-step debugging, commonly known as breakpoints.

The button on the right is as follows:

Pause/Resume script execution: pauses / resumes script execution (program execution stops at the next breakpoint).

Step over next function call: execute the function call to the next step (skip to the next line).

Step into next function call: enter the current function.

Step out of current function: jump out of the currently executed function.

Deactive/Active all breakpoints: all breakpoints are off / on (will not be canceled).

Pause on exceptions: automatic breakpoint setting for abnormal situations.

In fact, there are many powerful functions on the right side:

Watch:Watch expression

Call Stack: a call to a variable in the stack, in this case a recursive call, which must be called in the memory stack part.

Scope: current scope variable observation.

BreakPoints: current breakpoint variable observation.

XHR BreakPoints: a breakpoint debugging feature designed for asynchronous debugging for Ajax.

DOM BreakPoints: mainly includes the following DOM breakpoints. The registration method is shown in the following figure:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Breakpoint (Break on attributes modifications) when node attributes change

Breakpoint (Break on subtree modifications) when the child nodes within the node change

Breakpoint (Break on node removal) when the node is removed

Global Listeners: global event listener

Event Listener Breakpoints: event listener breakpoint, listing all page and script events, including: mouse, keyboard, animation, timer, XHR, and so on.

Debugging skills in chrome

1. Console bookmarks for DOM elements: both Chrome developer tools and Firebug provide bookmarks to display the last DOM element you clicked in the element tab (Chrome) or HTML tab (Firebug). If you select element A, element B, and element C in turn,\ $0 represents element C,\ $1 represents element B, and\ $2 represents element A (this is similar to the\ $symbol of a regular expression, but in a different order).

2. If you want to debug the f function, you can increase this breakpoint with the debug (f) statement.

3. There is a Snippet sub-tab on the left panel of the Sources tab, which can be used to save the code snippet and help you debug the code.

4. You can use the format button (Pretty Print Button) in the Sources tab of the Chrome developer tool to format the compressed code.

5. In the Network panel, select a resource file and right-click Copy Response to quickly copy the response content.

6, the use of media query, this is mainly in the Device Mode to adjust different resolution display.

7. Select Elements and press Esc > Emulation > Sensors to simulate the sensor.

8. Click the progressive effect style icon (purple icon) to preview the animation effect and adjust the animation effect to the corresponding Bezier curve (cubic-bezier).

9. Hold down the alt key and drag the mouse in Source to make multi-column content selection.

10. Right-click the Elements panel to execute the DOM element node, select Force Element State or click the right Toggle Element State icon to start the pseudo class.

11. Select a picture in the Network panel and right-click copy it as a Data URI on the right picture to get the Data URL (base64 encoding) of the picture.

12. By holding down the Ctrl key, you can add multiple editing cursors and edit multiple places at the same time. Press Ctrl + U to undo the edit.

13. In the Style editor on the right side of the Elements panel, click on the small color block before the color hexadecimal coding, and a color palette will pop up.

Pressing the Alt key and double-clicking the mouse to select the arrow in front of the DOM element expands all word node elements under the DOM element.

15. Shortcut keys:

Quick positioning to row: shortcut key Ctrl+O (Mac: CMD+O), enter: line number: column number to locate

Element search: shortcut key Ctrl+F (Mac: CMD+F). Try typing ID selector or class selector in the search bar to locate the element.

Points for attention during debugging

1. Avoid record reference types

When recording objects or arrays, always remember what you are recording. Watch expressions with breakpoints are used when recording the original type. If it is asynchronous code, avoid recording reference types.

Var arr = [{num: 0}]; setInterval (function () {console.log (arr); arr [0] .num + = 1;}, 1000)

Here, the value referenced by the object in the first property is unreliable. When you display this property in the developer tool for the first time, the value of num is determined. Then no matter how many times you reopen the same reference, it won't change.

2. Use source map whenever possible. Sometimes production code cannot use source map, but in any case, you should not debug production code directly.

At this point, the study of "what are the debugging skills of Chrome browser" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.