Chrome DevTools is a front-end developer’s survival tool, daily breakpoint debugging, capture HTTP data are just basic operations. So, do you know any more advanced uses? Developers inevitably need to maintain the code others have written, when you face a big projects hundreds of thousands of lines of code, code the sea ah, ah, go with the flow, collapse collapse collapse, how to quickly want to find the code, as a professional the front end of the commissioning engineers, small filling holes, today I will begin from code reverse analysis, Let’s talk about some advanced uses of Chrome debugging.

1. Code reverse analysis

Static lookup code

Global search

CTRL + Shift +F to open the global search. The search keyword is usually the ID,class,name of the DOM element, or the unique Chinese character that appears in the page, and then directly locate the code.

Find bound DOM events

Suitable for native code and jquery development projects, take Baidu as an example, there is a Settings button at the top, mouse move, will pop up the menu, so how to find the pop-up menu code section?

  1. Right-click on the Settings link to review elements and find event Listeners on the third TAB on the right side of the Chrome Elements panel
  2. The line number of the element binding event is listed in the mouseover or MouseEnter event
  3. Click on the code to navigate directly to the corresponding code, and then add breakpoints to debug.

Since the code on the line is compressed and confused, you need to hit Pretty Print to format the code.

Dynamic lookup code

Call Stack

A stack is a data structure. Each function call stores the function pointer and parameter values on the stack. Last in, first out, the last function to be called is first off the stack.

Stack is important for debugging. I don’t know where you came from, but I know where you’re going. Just set a breakpoint on the path you’re going to follow.

To take a look at the use of the stack, write the following test code:

function multiply(x, y) {
	debugger;
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);
Copy the code

The entire code execution flow is as follows:

  1. The call to printSquare stores the function pointer to printSquare and arguments value 5 at the top of the call stack
  2. The multiply function is called to compute the multiplication, and the multiply function pointer, along with two arguments 5,5, are stored at the top of the call stack.
  3. The multiply function is removed from the top of the stack and console.log is called
  4. Because console is a built-in object, there is no way to step into the internal code. In fact, there is a stack. Console. log is executed and then out of the stack, and now only the original dream printSquare is left alone
  5. PrintSquare is out of the stack, so the stack is clean.

    In the Call Stack panel you can see the ins and outs of function calls, quickly switching to each function in the execution Stack

Automatic breakpoint when Dom is modified

Let’s take the todomVC website code as an example: todomvc.com/examples/vu… Add a todo record, for example, to see how vue DOM diff works when an element is deleted. We know that when we click delete, the line li is deleted, but which line of code actually works. Let’s add a DOM breakpoint to try this

Remove this todo and the code automatically breaks in the removeChild line of the Vue virtual DOM. This is not cool, but the stack height is a total of 28 floors

Take the elevator to the first floor, where you see the code for vUE binding DOM events, where it all started, and look up to the fourth floor to see the specific business code

Ajax request automatic breakpoint

Ajax breakpoints can come in handy when you can’t find the code for the event binding, or when some function is called without any interaction with the HTTP request. In this case, ajax breakpoints can be added to XHR/Fetch Breakpoints in the Source panel to capture all URLS. Keyword capture can also be specified.

As soon as I added the XHR breakpoint, I stuck an image in the editor, chrome broke automatically, and accidentally saw the front-end source code for uploading and pasting images in the Markdown editor. It seems that the webpack function name confusion is not complete

Automatic breakpoint when exception occurs

Normal exceptions are displayed on the console and can be located on the console. You can manually add a breakpoint after locating the exception. However, for code that does not have a throw after a catch, it is not visible on the console, but the automatic breakpoint function can still catch the exception.

2. Online debugging and local proxy

How can you develop locally and see the changes without having to upload them to the test server or production server? If we develop with VUE, vue-CLI has a local proxy function that can reverse proxy the server’s interface to the local HTTP service, then what other method is there? Let’s take a look at some of the ways you can develop code locally without having to upload it to the server.

  1. Vue-cli local proxy function. Configure the reverse proxy in the configuration file devserver. proxy to proxy the background interface to the local localhost.
  2. Set up the nginx reverse proxy by yourself, the effect is the same as the first.
  3. The local server does not need any HTTP service, and can directly Access HTML files on the hard disk. Cors is used to Access the remote server across domains. The remote server on the server side sets the access-Control-allow-Origin response header to ‘*’.
  4. Redirect the remote server directly to a local directory using the Fiddler AutoResponder feature (requires writing a regular expression)
  5. Using the Overrides feature of Chrome DevTools, you can map files from the server to the local server. You can modify files in the Sources panel directly and automatically complete with syntactical intellisense, which is easier than writing code in the Console.

The above five methods have their own advantages and disadvantages, so I will not expand them in detail. If readers are interested, I will write another article to introduce them. This article focuses on the fifth method

Click Select Folder for Overrides in the secondary TAB of the Source panel, select a local mapping directory, and then a confirmation message will pop up at the top that you must select Allow.

For example, open Baidu, click HTML on the main page in the Source panel, add “Alert”, then CTRL + S to save, the file icon will turn purple, refresh the page, alert will pop up, so as to achieve the same effect as tamperMonkey plugin. It doesn’t matter if a site doesn’t work, or if the ads are an eyesore, just write a line of code to change it.

Of course, the most important is to develop thief convenient, who uses who knows, especially those who do not have the function of the test environment, can only be debugged in the production line of the scene. If there is no local proxy mapping, you have to find the operations update code to see what happens.

3. Performance optimization analysis

Find functions that cause performance bottlenecks

The Call Tree in the Performance panel can view the execution time of each function, which is very convenient to find Performance bottlenecks. Let’s write a piece of code with Performance problems to test it.

setInterval(function slowFunc(){
var arr=[];
for(var i=0; i<1000; i++){ arr.push(i); arr.sort(); }}, 50)Copy the code

SlowFunc slowFunc slowFunc slowFunc slowFunc slowFunc slowFunc slowFunc slowFunc Click on the function name to jump to the corresponding code.

Code coverage detection

As the project goes on for a long time, there will be a lot of redundant code that will never be executed, or it needs to be optimized for first-screen loading. If you want to extract JS and CSS code that is not used on the first screen for asynchronous loading, you can easily see which code has been executed by using Chrome’s own Coverage detection tool. Red indicates the code that has not been executed. The first screen optimization can be extracted for asynchronous loading. If you run out of use cases and the line of code is still red, you can remove the red code at your ease.

The Code Coverage panel is not displayed by default and needs to be opened in the More Tools menu

4. Debug the real phone on the mobile terminal

Mobile development often encounters some problems that run on the real phone, but cannot be reproduced by the PC browser. This requires debugging on the real phone. If you are using iPhone, you can use THE USB to connect the Safari browser on the MAC to debug directly. In fact, android phone debugging is much more powerful than Apple, after all, Safari debugging is very weak compared to Chrome, let those who like to use apple’s front-end development students envy.

But many students configuration is not good USB real machine debugging, because do a good job of this is more difficult than building a Webpack environment from scratch, the steps are as follows, indispensable

  1. Adb Interface Driver must be installed on android phones. Even if you can copy files with usb, it does not mean that the driver is installed. Some mobile assistants will come with the driver
  2. In developer options in your phone Settings, turn on USB debugging
  3. Connect mobile phone with USB line, every time connect USB debugging will pop a confirmation box to confirm.
  4. Use Chrome to open the site you want to debug on your phone. For example, on Github.com, make sure you use a separate Chrome browser (installed in every major app market). Some phones may have browsers that turn off WebKit remote debugging and you’ll never be able to do it.
  5. Enter Chrome ://inspect/ in the address bar. If the previous steps are correct, a list of debuggable pages will appear. Click inspect to open the debug page.
  6. The most important step is to climb over the wall once. You can use the blue light, because the first debugging will connect to the official website of Google, and the debugging will be interrupted if it cannot be accessed in China. There is no need to climb the wall again as long as the browser is not reinstalled.
  7. Inspect will bring up the debug panel, and you can debug like a normal PC page.

summary

Chrome DevTools allows you to quickly find object code in a variety of ways, and provides performance analysis, network analysis and other powerful capabilities, using the absolutely can get twice the result with half the effort, say no to 996.

Finally, I would like to recommend my open source project:

Webcontext — a powerful Node.js Web framework that lets you write minimal code:

Github.com/windyfancy/…