Chrome Developer Tools is one of the three debuggers Jerry uses for his daily work. Although the tool name is preceded by “developer “, it is still useful to non-developers. Don’t believe it?

Use Chrome to open up some of our favorite websites, press F12, and see this information in the Console TAB. These are old tricks.

If you want to listen to songs on netease Cloud Music and save them locally, you do not need to install a client. Instead, you can directly find the real link of MP3 in Chrome Developer tool and save it.

The same can be done for online videos to find the real address and save it locally.

Some time ago I saw a news, the topic is “a liar deception again high, meet the programmer also count”, introduced a programmer after receiving the fraud SMS, not only through the fraudster, witty reply all the way, trapped and under cover, step by step, introduce each other their own rhythm, finally directly control the fraudster computer and camera.

I used the colleagues a method is: in the Chrome developer tools the Console panel. The document type instructions in the body. The contentEditable = “true”, which makes the whole page in the editable state. You can then change the content of the page as you like, for example by daydreaming like this:

When you use Chrome’s remember password feature, you forget what your password is for a long time. While these passwords can also be found in Chrome Settings, a faster way is to print them directly in Chrome Developer Tools.

In Chrome Developer Tools, click on the Elements TAB, then click on the password element on the web page, and the HTML code that implements that element is displayed in the TAB. Here we can see that the id of the element is password.

Go back to the Console TAB and type $(“#password”).value to display the password.

There used to be a famous joke on the Internet. A programmer opens Zhenai looking for a date. After browsing the web for a few minutes, he clicked F12 to open Chrome Developer Tools, found a few error messages printed on the Console TAB, and started debugging as usual.

And then, there was no and…

Here are a few tips and tricks I use in my daily work with Chrome Developer Tools, which I hope will help you improve your development and debugging efficiency.

1. Element property breakpoint

Select an HTML tag on the Element TAB and set Attributes Modifications Breakpoints in the right-click menu. A breakpoint is automatically triggered when the title tag attributes change.

I once dealt with one incident where a user complained that after doing something in the Fiori app, the title of the page was changed to an incorrect value. Using the property breakpoint feature, I quickly found the line of code where the title was changed. 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 the browser’s native methods

This is not accurate, as there is no way to 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 want to stop these browser native methods when they are called with some special input parameters.

For example, when I was exploring the Angular framework, I drew a list with ng-repeat, as shown below. I noticed that for each list record, the resulting native HTML code had a comment element, highlighted in red in the figure below.

I wonder what line of code the Angular framework generates these three comment elements. It follows that these comments must have been created using the native method createComment, but I couldn’t set a breakpoint in this method. If you search the Source createComment directly within the Angular framework, and then set breakpoints on all search results — theoretically possible, but inefficient, because createComment is invoked in nearly 100 search results.

How to do?

(1) Set a breakpoint at the beginning of the angular.js file, open the application, and the breakpoint is triggered:

(2) Save the browser-native method implementation in the variable oldFn and override createComment. In the rewritten version, I add my own judgment logic: I expect the breakpoint to fire only if the comment text I create contains ngRepeat. The implementation is shown below. Complete the override of the original createComment implementation by executing the following code in Console.

Then I continue executing in the debugger, and finally the breakpoint fires at the desired location:

This is where I’m looking for the Angular framework to create code that contains ngRepeat annotations:

3. Hidden commands in Chrome Developer Tools

You can do a variety of things with a series of commands beginning with Chrome :// in the Chrome address bar. But the one I use most in my daily work is Chrome ://net-internals.

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

Here are three blog posts on how to explore JavaScript source code maps with Chrome :// net-Internals:

(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 contents of JavaScript variables to local files

I often need this feature when WORKING with Incident in A Fiori application at SAP: for example, debugging the front and back interactions of a Fiori application, where I want to save the JSON response returned by the background as a local file. Of course I can manually select the response from the Chrome Developer Tools’ Network TAB, Ctrl C, and create a new local file, Ctrl V. I found another quick way to do this on this blog.

Execute this code directly from the console:

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

5. Analyze the JavaScript garbage collection mechanism

This type of analysis is done through the Profiles TAB. An example of using Chrome Development Tool to analyze JavaScript garbage Collector

6. Teach yourself some native browser implementations

Want to know exactly how toString is implemented?

You’ll have to open 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 technique a lot when I’m dealing with very difficult and complex problems.

I once worked with an incident where the list displayed on the UI read 20 records from the background at a time, and the GUID of one record did not match its actual content. I need to find out which one of the 20 records is wrong. If I debug, the function that I set the breakpoint is called in the loop and the breakpoint is triggered over and over again. Impatient, I used console.log to print the GUID and details of each record. When I look at these printouts, I see that they are buried in a lot of logs of the UI5 framework. Since I view my own printed logs, I also need to analyze them in context with UI5 printed logs, so I can’t use the filter function in the Console TAB so that only my own printed logs are displayed.

Is there any way I can print my own logs without drowning in the massive amount of logs in the UI5 framework? The solution is to make it “a little green among flowers.”

Using the following custom function myLog, the log output in the console will look like this:

It can be a little more fancy:

8. Use regular expressions to filter network requests

9. Console command in the style of jQuery selector

For example, I want to quickly know how many button elements there are in the CURRENT UI and see the details of certain elements. Use jquery-like selector syntax $(‘ button ‘) to return all button elements.

There are many other tips, as well as some of my most common shortcut combinations, which I won’t go into too much space, but you can find all my tips for using Chrome Developer Tools in this blog post.

Chrome Development Tool tips used in my daily work

Hopefully this article has given you some insight into Chrome developer tools, thanks for reading.

For more of Jerry’s original technical articles, please follow the public account “Wang Zixi” or scan the following QR code: