I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

1 introduction

Thanks to the humorous teacher bald Cape man who led us through a lively and interesting front-end debugging course

For the author, it was a great harvest

Improve BUG handling efficiency by at least 50%

Let’s cut the crap and get to work

2 use the console

Console.log (XXX) is the most common front-end code method for newbies like me

Print first, print not more

This is very intuitive, but it’s also the least efficient

2.1 Various Console modes

There are many ways to print on console:

  • log
  • warn
  • error
  • debug
  • info

Refer to the MDN documentation for all methods

Different methods manifest themselves differently on the console:

Wish to use small partners pay attention to the following points:

  • Log is not much different from INFO
  • Debug is not supported in the Chrome kernel browser
  • Determine which method to use based on the actual situation. For example, log is used for normal logs and error information is used for error information

Make the console more colorful

Table 2.2 method

Console. table(XXX) in my opinion is worth mentioning separately, first paste its usage:

A table can output a one-dimensional array or a layer of objects as a table, with the first column being the index and the second column being the value

This is much more intuitive and efficient than logging and then clicking to expand

Note that tables do not display recursively and nesting is not appropriate

3 Performance Analysis

Press F12 to bring up the console and enter the performance page, where we can analyze the entire page loading process

Performance analysis is not the focus of debugging, but may be used for optimization of later projects, such as tree structures with large data volumes

Simple texture and explain how to use:

4 Online Debugging

When faced with a BUG in an online project, many of you have a headache: how do you identify the location of the offending code

Here I would like to emphasize one point:

The purpose of debugging is to find bugs, not to fix them. Don’t use “I think/I guess/will be/might be” logic

The program won’t cheat you, know how to debug first, look for the BUG step by step, and then use your extensive experience to overcome it

On MAC, the teacher showed us in detail how to use the tool to complete the local agent and realize the remote debugging of online projects

4.1 the Source Map

There are very good tools in the MAC environment, for the author in recent years to develop the Microsoft blow, natural to try to try under Win10

How to use Fiddler in Win10 to achieve online project debugging, there is a need for brothers can go to see my article

4.2 Temporarily save your changes

Now that you’ve implemented online debugging, it’s time to fix the bugs

The wySIWYG feel of programming on the front end is the most fascinating, and we can easily modify the code in the browser to see the elegant results of BUG fixes

But when you move your changes to native code, it’s inevitable that you’ll miss something

This is where the source-overlay panel is used for temporary saving

The first step is to go to the source panel and open the code app.vue that needs to be modified:

Next, we switch to the Overlay panel and click the button to select the folder for temporary saving:

For example, I chose D:\Temp\Debug, then simply modify the code of app. vue, CTRL + S save

At this point, in the left tree, the contents of the project file should be replaced:

We can then see the contents of our modified files in a local folder on our computer or in the browser debug panel

Mom won’t have to worry about me whipping myself after the blue screen

5 concludes

Browsers have a lot of power, but many of them we don’t know or use

If there’s a better technique or fun content, what’s wrong with sharing more

Thanks again to Mr. Bald Cape Man!