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

In this issue, the editor will bring you about how to understand Chrome developer tools. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

The Chrome developer tool is one of the three debuggers used by Jerry on a daily basis. Although the tool name is preceded by a "developer", it is still useful for non-developers. You don't believe me?

Use Chrome to open our commonly used website, press F12, in the Console tab to see this information, these are very old.

To listen to music on NetEase Yun, if you want to save it locally, you don't need to install the client. Just find the real link to mp3 in the Chrome developer tool and save it.

For online video, you can find the real address in the same way and save it locally.

Some time ago, I saw a piece of news entitled "No matter how high the fraud is, you will bend over when you meet a programmer." after receiving a fraudulent text message, a programmer not only saw through the tricks of the fraudsters, but also responded tactfully and set up traps. Step by step, he introduced the other party into his own rhythm, and finally directly controlled the fraudster's computer and camera.

One of the methods used by my colleague is to type the command document.body.contentEditable='true', in the Console panel of the Chrome developer tool above to make the entire page editable. Then you can modify the content on the page as much as you like, such as daydreaming like this:

Using Chrome's function of remembering passwords, you can forget what the password is for a long time. Although these passwords can also be found in the Chrome settings, a faster way is to print them directly in the Chrome developer tool.

Click the Elements tab in the Chrome developer tool, then click the password element on the web page, and the html code for the implementation of that element is displayed on the tab. Here we can see that the id of this element is password.

Go back to the Console tag and enter $("# password") .value to display the password.

There used to be a famous joke on the Internet. A programmer opened Zhenai to find a date. After browsing the web for a few minutes, he habitually pressed F12 to open the Chrome developer tool, found that the Console tag printed several error messages, and then habitually started debugging.

Then, there is no such thing as then.

Here are some tips and tips on using Chrome developer tools in my daily work, which I hope will help you improve the efficiency of development and debugging.

1. Element attribute breakpoint

Select a html tag in the Element tab and set the Attributes modifications breakpoint in the right-click menu. The following figure means that once the attribute of the title tag changes, the breakpoint automatically triggers.

I once dealt with an incident where users complained that the title of the page was changed to an incorrect value after doing something in the Fiori application. With the help of this property breakpoint feature, I quickly found the line of code where title was modified. For more details on this incident, please refer to my blog:

A quick way to find which code has changed the UI5 application page title by debugging

two。 Set breakpoints in the native methods of the browser

This statement is not accurate, because we can't see the implementation code of the browser's native methods in Chrome, let alone set breakpoints.

In fact, my requirement is to stop when debugging when these browser native methods are called with some special input parameters.

For example, when I was studying the Angular framework, I drew a list with ng-repeat, as shown in the following figure. I found that for each list record, the resulting native html code has a comment element, which is highlighted in red in the following figure.

I wonder in which line of code the Angular framework generates these three comment elements. By reasoning, these annotations must have been created through the native method createComment, but I can't set breakpoints in this method. If you createComment the source code directly in the Angular framework, and then set breakpoints at all search results-this approach works in theory, but it is too inefficient because createComment is called in nearly 100 search results.

What shall I do?

(1) set a breakpoint at the beginning of the angular.js file, open the application, and trigger the breakpoint:

(2) save the native method implementation of the browser in the variable oldFn, and then rewrite createComment. In the rewritten version, add my own judgment logic: I expect breakpoints to be triggered only if the created comment text contains ngRepeat. The implementation is shown in the following figure. Execute the following code in console to complete the overwriting of the original implementation of createComment.

Then continue execution in the debugger, and the final breakpoint is triggered where I'm looking:

This is where I am looking for the Angular framework to create code that contains ngRepeat comments:

3. Some hidden commands in Chrome developer tools

Enter a series of commands at the beginning of chrome:// in the Chrome address bar to achieve a variety of functions. But chrome://net-internals is the one I use most in my daily work.

With the help of Wang Cong, the SAP Chengdu Revenue Cloud development team, I used this feature to solve the mystery about JavaScript source code map that has been bothering me for some time.

I wrote about how to study JavaScript source code map through chrome://net-internals in these three blogs:

(1) A debugging issue caused by source code mapping

(2) detailed introduction of UI5 Source code map mechanism

(3) Useful Chrome Tool chrome://net-internals to monitor http request detail

4. Save the contents of the JavaScript variable to the cost file

I often need this feature when dealing with the incident of Fiori applications in SAP: for example, debugging the front and background interaction of Fiori applications, I want to save the JSON response returned by the background as a local file. Of course, I can manually select the response content in the network tab of the Chrome developer tool, then Ctrl C, and then create a new file locally, Ctrl V. I find this step troublesome and found another quick way on this blog.

Execute this code directly in console:

This code injects a new method save into the console object, and then you can use console.save (,) to save any variable to the cost file, which is very convenient.

5. Analyze the garbage collection mechanism of JavaScript

This type of analysis is done through the Profiles tab. For more information, refer to my blog:

An example of using Chrome Development Tool to analyze JavaScript garbage collector

6. Self-study the implementation of some native browser methods

Want to know exactly how this toString method is implemented?

You have to open the option Show native functions in JS profile in the Chrome developer tool and check out my blog:

Use Chrome development tool to do self-study on some JavaScript function native implementation

7. Color printing of console.log

I often use this color printing technique when dealing with some very thorny and complex problems.

I once processed a list displayed on incident,UI that read 20 records from the background at a time, one of which had a guid that did not match its actual content. I need to find out which of the 20 records is wrong. If I debug, the function that I set the breakpoint is called in the loop, and the breakpoint will be triggered constantly. I felt very impatient, so I used the console.log method to print the guid and details of each record. When I looked at these printouts, I found that they were submerged in a large number of log in the UI5 framework. Because when I look at my printed log, I also need to analyze the log printed by UI5 as a context, so I can't use filtering in the Console tab so that only my own printed log is displayed.

Is there any way to ensure that my own printed log will not be submerged in the massive log of the UI5 framework? The way is to make it "a little green among thousands of flowers".

The log output using the following custom function myLog will show the following effect in console:

It can be a little more gaudy:

8. Use regular expressions to filter network requests

9. JQuery selector-style Console commands

For example, I want to quickly know how many button elements there are in the current UI and look at the details of some elements. Using the syntax of the jQuery-like selector $('button') returns all button elements.

There are many other tips, as well as my most commonly used shortcut key combinations, and because of space constraints, you can find all my tips for using Chrome developer tools in this blog.

This is how the Chrome developer tools shared by the editor are understood. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.