Chrome Developer Tools is one of the top three debuggers that Jerry uses on a daily basis. Although the tool name has "developer" in front of it, it is still useful for non-developers. Do not believe?
Open our commonly used websites with Chrome, press F12, and see this information in the Console tab. These are very old stalks.
Listening to songs on NetEase Cloud Music, if you want to save it locally, you don't need to install the client, you can directly find the real link of the mp3 in the Chrome developer tool to save it.
For online videos, the real address can be found in the same way and saved locally.
Some time ago, I saw a news article titled "No matter how high a liar's deception is, the programmer will also bow down". It introduced that after a programmer received a fraudulent text message, he not only saw through the fraudster's routine, but also responded wisely throughout the whole process. Fall into the trap, introduce the other party into his own rhythm step by step, and finally directly control the fraudster's computer and camera.
One method used by my colleague is to type the instruction document.body.contentEditable='true' in the Console panel of the Chrome developer tool in the picture above, which makes the entire web page editable. Then you can modify the content on the web page as you like, for example, you can daydream like the following image:
Use Chrome's Remember Password feature to forget what your password is over time. Although these passwords can also be found in Chrome settings, a quicker way is to print them directly in the Chrome Developer Tools.
Click the Elements tab in the Chrome developer tools, then click the password element on the web page, and the html code of the implementation of the element will be displayed in the tab page. Here we can see that the id of the element is password.
Go back to the Console tab and enter $("#password").value to display the password.
There used to be a famous joke on the Internet. A programmer opens Zhenai.com to find an object. After browsing the web for a few minutes, he habitually pressed F12 to open the Chrome developer tools, found that the Console tab printed several error messages, and then habitually started debugging.
Then, there is no then. . .
Below are some of my experiences and tips on using Chrome developer tools in my daily work, I hope they can help you improve the efficiency of development and debugging.
1. Element property breakpoint
Select an html tag in the Element tab and set the Attributes modifications breakpoint in the right-click menu. The figure below means that once the attribute of the title tag changes, the breakpoint is automatically triggered.
I once dealt with an incident where a user complained that after doing something in the Fiori app, the title of the page was changed to a wrong value. With this property breakpoint function, I quickly found the line of code where the 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
2. Set breakpoints in native browser methods
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 that when debugging, I can stop when these browser native methods are called with some special input parameters.
For example, when I was researching the Angular framework, I used ng-repeat to draw a list as shown below. I found that for each list record, the final generated native html code has a comment element, as shown in the red highlighted area in the figure below.
I'm curious on which line of code the Angular framework generates these three comment elements. By reasoning, these comments must be created by the native method createComment, however I cannot set breakpoints in this method. If you search directly in the Angular framework based on the source code createComment, and then set breakpoints at all search results - this method is theoretically feasible, but it is too inefficient, because nearly 100 search results call createComment.
How to do?
(1) Set a breakpoint at the very beginning of the angular.js file, open the application, and trigger the breakpoint:
(2) Save the browser's native method implementation in the variable oldFn, and then rewrite createComment. In the rewritten version, adding my own judgment logic: I expect the breakpoint to fire only when the created comment text contains ngRepeat. The implementation is shown in the figure below. Execute the following code in the console to complete the coverage of the original implementation of createComment.
Then continue execution in the debugger, and finally the breakpoint hits where I want to find:
This is where I'm looking for the Angular framework to create the code that includes the ngRepeat annotation:
3. Some hidden commands in Chrome developer tools
Entering a series of commands starting with chrome:// in the Chrome address bar can achieve various functions. But I use chrome://net-internals the most in my daily work.
With the help of Wang Cong, the development team of SAP Chengdu Revenue Cloud, I used this feature to solve the mystery about JavaScript source code map that has been bothering me for a while.
I wrote about how to study the JavaScript source code map via chrome://net-internals in these three blogs:
(1) A debugging issue caused by source code mapping
(2) Details of UI5 Source code map mechanism
(3) Useful Chrome Tool chrome://net-internals to monitor http request detail
4. Save the content of the JavaScript variable to a local file
I often need this function when dealing with incidents of Fiori applications in SAP: for example, when debugging the front-end and back-end interactions 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 Chrome developer tools, then Ctrl C, and then create a new file locally, Ctrl V. I thought this step was cumbersome and found another quick method on this blog .
Execute this code directly in the console:
This code will inject a new method save to the console object, and then you can use console.save(
5. Analyze the garbage collection mechanism of JavaScript
This type of analysis is done through the Profiles tab. Refer to my blog for detailed instructions:
An example of using Chrome Development Tool to analyze JavaScript garbage collector
6. Teach yourself the implementation of some browser native methods
Want to know how this toString method is implemented?
You have to turn on the option Show native functions in JS profile in Chrome developer tools 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 use this color printing trick a lot when I'm working on some really tricky complex problems.
I once dealt with an incident where the list displayed on the UI read 20 records from the background at a time, and one of the records had a guid that didn't match its actual content. I need to find out which of the 20 records is wrong. If I use the debugging method, the function where I set the breakpoint is called in the loop, and the breakpoint will be triggered continuously. I felt very impatient, so I used the console.log method to print the guid and detailed content of each record. When I looked at these printouts, they were buried in the UI5 framework's massive log. Because I also need to analyze the log printed by UI5 as a context while viewing the log printed by myself, I cannot use the filtering function in the Console tab to make only the log printed by myself displayed.
Is there any way to make my own printed log not drown in the massive log of UI5 framework? The solution is to make it "a little green in a thousand flowers".
The log output by the following custom function myLog is displayed in the console as follows:
It can be displayed a little more fancy:
8. Filter network requests using regular expressions
9. jQuery selector style Console command
For example, I want to quickly know how many button elements there are in the current UI, and view the details of certain elements. Using the jQuery-like selector syntax $('button') returns all button elements.
There are many other tips, as well as my most commonly used shortcut key combinations, because of space constraints, you can find all my tips for using Chrome Developer Tools in this blog of mine.
Chrome Development Tool tips used in my daily work
Hope this article gave you some more insight into Chrome Developer Tools, thanks for reading.
To get more original technical articles from Jerry, please follow the public account "Wang Zixi" or scan the QR code below:
