Chrome Practical Debugging Tips

1. Shortcuts

Tip: All shortcut keys must be placed in the debug window to work (as shown in the figure below), otherwise it will be another effect

ctrl+p: locate files in the project

Note: The mouse focus should be placed in the debug window (as long as it is in the debug window, whether it is under Elements or under the windows of Console, Sources, etc.), as shown below

ctrl+shift+o: locate member function

Steps: First find the js file you want to locate, click to select it, and then use the shortcut key ctrl+shift+o to pop up the search box to search for the function you want to locate

eg: To locate the www() method in the test.js file

Steps: First find the test.js file, then make her selected, then use the shortcut key ctrl+shift+o to pop up the search box, enter the www() method name, and press Enter.

Figure 1: Locating js files

Figure 2: The shortcut key pops up the search box

Figure 3: Enter the function name and press Enter to locate

2.Snippets: Write js code at any time, the running result will be printed to the console, the code is saved globally, and can be run on any page

Directory where Snippets are located:

eg: Create a Snippets file under the page where jquery.html is located. When we switch to the audio.html page, we will find that the Snippets file created before exists and can run normally

Figure 1: Snippets file created under jquery.html file

Figure 2: It can also be executed normally under the audio.html file

3.copy command: formatted copy,

eg: For the data returned from the background, in order to have a good structure, the data needs to be formatted into json format, so that the hierarchical relationship is very clear, and it is more convenient to find

step:

1. "Right click" on the request item and select "Copy Response" to copy the response content

2. Enter the copy() command in the console and copy the response content to the command

3. Press Enter to get the formatted data, and then copy the ctrl+v command to the corresponding document

Screenshot below:

Figure 1: The location of the response content

Figure 2: Copy the response content

Figure 3: Enter the copy command and copy the response content to the command

Figure 4: Formatting data

Figure 5: Response data (data before formatting), the purpose is to compare with the formatted data

 

 

 

 

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325382880&siteId=291194637