Chrome Practical Debugging Tips

Today, Chrome is undoubtedly the most popular tool for the front end, with the exception of a simple interface, a large number of application plug-ins, good code support, a powerful V8 interpreter, and a lot of convenient features from the chrome developer tools to facilitate our front-end debug code. We are increasingly inseparable from the daily development of chrome, whether skilled in chrome debugging skills may also become a benchmark for the front-end technology.

Introduction of chrome debugging skills of many articles, this article combined with my own development experience, I hope from the actual use of the point of view for everyone to talk about these functions, but also hope that everyone has helped and inspired.

Common shortcut keys

Locate the file in the CTRL+P project and locate the Vuejs library file below:

Locate the member function in the Ctrl+shif+o file, and navigate to the Nexttick interface of the Vuejs:

Snippets write code at any time

Chrome has a snippets column on the souces page where we can write the JS code at any time, and the results will print to the console. The code is saved globally, and we can view or run the code on any page, including the New tab page.

We no longer need to create a new HTML page to run a small piece of JS code. Snippets's convenience is that you only need to open chrome to write a copy of any page can be run JS code, and used snippets know, snippets editor can be compared with sublime text.

In a project, I need to import more than 100 pages of Word documents into the page. Consider the following style writing, the HTML structure of the page is as follows:

2. <div class="help-page_row">
4. class="help-page_title">title
6. <p class="help-page_desc">paragraph</p>
8. <p class="help-page_desc">paragraph</p>
10. </div>

Manually combining more than 100 pages of content into the HTML structure above is too time-consuming and impractical, so I decided to use JS to parse the title and paragraph of the document content and HTML wrapper.

Since there is no need for view support, writing this code in snippets is the best choice, after several debugging changes, the final result is as follows:

Finally, copy the Word document contents to snippets, perform the parse function, and the final parsed HTML results are printed to the console:

The copy interface of the console can be used in the snippets, which makes it easier to copy the results directly to the Clipboard.

When using snippets to do this kind of lightweight work, it is not necessary to pursue the readability and maintainability of the code, and it is sufficient that our code only needs to function properly in most scenarios.

But in order to satisfy most scenarios, the code also needs to be debugged and modified repeatedly. Snippets the most practical place is precisely, at any time to write, at any time debugging, modify at any time!

Copy formatted copy

In project development, we may need to copy background data locally to debug as local data.

If there is no formatted JSON data returned in the background, we will inevitably encounter manual modification of the data in local debugging, the format of the JSON data can be very difficult to modify.

When it comes to JSON formatting, the first thing we think about is the json.stringify formatting feature, such as the indentation of four spaces:

1. JSON.stringify({name: ‘lxjwlt‘}, null, 4);

It's too cumbersome to write this code every time we format the JSON data, and we can use the Chrome console's copy interface to solve the problem:

1. Select Copy response copy response content from the right-click menu of the request item
2. Using the Copy interface on the command line to process data
3. Get the formatted JSON data

Not only the object, copy interface can copy any data, this is the use of copy in the copy array or object process, the data to beautify the function

IFRAME Debugging

If we use the Webpack Server tool webpack-dev-server to access the project's development page, we will find that the development page is embedded in the IFRAME for rendering.

Due to the default context of the Chrome console window.top , the console cannot be directly embedded in the development page of the IFRAME. If you want to perform DOM operations on a page in an IFRAME or execute a class library API, we will use Contentwindow to get to the context of the IFRAME and then debug with the WITH statement:

2. // html
4. <iframe id="iframe"></iframe>
8. // 控制台
10. with (document.getElementById(‘iframe‘).contentWindow) {
12. inspect(document.body);
16. new Vue({ /* ... */ });
20. // do something...
22. }

The above methods can be used on any browser, but if we are using chrome, the context switching feature of the chrome console will be more convenient:

We switch the context to the IFRAME, and the console code executes based on the context of the IFRAME. If you use Webpack-dev-server for debugging, you will appreciate this feature.

Debug is useless?

The chrome console provides a debug interface that can pass in a function that is automatically debugged by the debugger at the next execution of the function.

We can set breakpoints in the code to debug, why use Debug to set up, is to give up the mouse with the command pack force just?

In my opinion, the Debug function also provides the positioning function, which allows us to quickly find the specified function. The following shows how to debug Vuejs data-driven, how to find Vuejs data-driven code entry.

As we all know, VUEJS data-driven is the DefineProperty method of data getter and setter encapsulation, in this package to achieve data changes to drive the view synchronization modification function. If we want to study vuejs data-driven, we first need to find the place to encapsulate getter and setter, we can use the debug interface to locate. Here are examples of getter methods.

First we know that the data in the Vuejs instance is the _data value in the mapping attribute:

2. var vm = new Vue({
4. data: {
6. name: ‘lxjwlt‘
8. }
10. });
14. vm.name === vm._data.name; // true

So the data we're looking for is actually in the properties of the Vuejs instance _data . Next we get the getter function of the data via Getownpropertydescriptor:

1. Object.getOwnPropertyDescriptor(vm._data, "name").get;

With the Getter function found, we can debug the breakpoint using the Debug interface:

2. debug(Object.getOwnPropertyDescriptor(vm._data, "name").get)

Thus, when we get the vm.name data, we naturally trigger the getter function of the data, triggering the breakpoint debugging and automatically locating where the function is located:

To debug or locate a public API in the future, try Chrome's debug interface feature!

Condition Breakpoint

In Chrome, we can set an expression on a breakpoint, and when the expression is true, the breakpoint debugging takes effect, which is the conditional breakpoint.

With conditional breakpoints, we are able to more precisely control the timing of code breakpoints when debugging code, especially when a piece of code is repeatedly running, and conditional breakpoints can skip most situations and focus only on the scenario we want. In addition to this, conditional breakpoint debugging has another use.

In breakpoint debugging, we tend to check the execution state of the current code, if the operation is cumbersome, then we can use conditional breakpoints to add automation, help us reduce some of the workload.

For example, we want to see the DOM element after the breakpoint has occurred, so the breakpoint condition can be written like this:

1. // 当DOM元素满足某个条件进行断点，同时查看这个元素
2. elem.hasAttribute(‘class‘) && inspect(elem);

If you do not know the return value of the operation, we can force the operation to return true so that it does not affect the condition judgment of the breakpoint:

1. elem.hasAttribute(‘class‘) && (inspect(elem) || true);

Or branch to write:

1. if (elem.hasAttribute(‘class‘)) {inspect(elem); true;}

For example, in Vuejs debugging, we often need to know the current state of the Vuejs instance, so each time we trigger a breakpoint debug, we can first clear the console history output with the clear interface, and then print the current state of the Vuejs instance:

1. vm.sum > 4 && (clear() || vm.$log() || true);

If you define a variable in a conditional breakpoint, the variable is defined on the global scope, that is, on the Window object

Async Debug

The async mode of the Chrome debugger is a feature designed for debugging asynchronous functions.

Promise is widely used today, we all know that the promise callback is executed asynchronously, before the async mode is opened, the transfer stack is only recorded to the callback function itself, we can not find the order of code execution, which gives us debugging a great deal of difficulty. Async mode solves this problem:

When async mode is turned on, the call stack before the async function is recorded and the Code execution state in the call stack is preserved.

Read more

• Chrome Console Reference
• Chrome Command Line Reference
• Debugging asynchronous JavaScript with Chrome DevTools
• Chrome DevTools Code Snippets

Original: https://www.zybuluo.com/lxjwlt/note/434612

Chrome Practical Debugging Tips