Chrome debugging tips

Chrome Debugging skills

demand ： Any web page , Click anywhere , Find the exact location of the network request code in the source code .
Maybe the web page is constantly refreshing data , And soon , And browser plug-ins 、 Advertising, etc .

1. format js Code

2. Turn on BlackBoxing

reason ： Screen out the pages that you don't care about js File access network , Such as advertising Library , The third party js Kuo et al
practice ： To be opened BlackBoxing function
operation ： F12 => F1 => Blackboxing , Select the check box , Here's the picture ：

It's not over yet. , Need to add rules . You can write regular expressions , But there are simple ways , That is to say Sources Open in js file , format js file , Then right-click the line number , choice Stop blackboxing, Here's the picture ：

, Then you can see the change

3. Powerful Source panel

DOM The breakpoint for node change monitoring

Network request data view 、 Breakpoint addition

4. format Json data

console in , Input copy( To format json data ), Then press enter , In this case, the formatted Json data Has been copied to the clipboard , Try pasting it , Another copy was printed out .

5. Network, Find out my click requests

6. Shortcut key

Ctrl + Shift + F ： Choose Sources -> Page The top folder in the , Press the shortcut key , You can search the source file for the file to which the string of the specified rule belongs
Ctrl + Shift： With the previous shortcut key , You can search for useful information in the specified file
Ctrl + P： Quick location of files
Ctrl + Shift + O： Quick positioning function
Ctrl + G： Quickly navigate to a line in the file

7. Snippets （JS Editor ,Sources Next ）

8. debugger

Add... To the source file debugger The debugging operation stops here

9. Debug button

• Go to the next breakpoint or stop
• next step （ Don't go into functions ）
• next step （ If there is a function, enter ）
• Jump out of function
• a step
• Breakpoint switch , Grey is the breakpoint , Blue indicates that the breakpoint is unavailable
• Whether to interrupt the switch when encountering an exception code