In our front-end development process, there will be a variety of bugs, resulting in the normal implementation of the function. Bugs must be eliminated in order to function properly. Every programmer must master the ways and means of debugging. Improve work efficiency and leave work early!

I. Features of front-end debug

  1. Multiple platforms

    Browsers, NodeJS, applets, desktop applications, etc

  2. Many environmental

    Local development environment, online environment

  3. Many tools

    Chrome, devTools, Charles, Spy-Debugger, vConsole, etc

  4. More skills

    Console, BreakPoint, sourceMap, proxy

2. DevTools, the main tool for front-end debug

Every browser will have devTools, which you can right-click on the page, > Check tools, or just F12 to display it

You can select the area displayed by devTools in the upper right corner, with left, bottom, right, and a separate page

So what are all those panels on the right doing?

Element toolbar

The first is the Element panel, where you can choose to view page elements, including the HTML structure of the page, CSS styles, and so on

Click the arrow in the upper left corner and swipe across the left page to see the elements of the page

Select the page element you want, and change the style in the CSS style on the right, including changing the width and height of the element, the layout and so on. If you are not sure of pixels when writing a page, you can change the style in devTools first and then change the code to avoid repeated changes.

Console log toolbar

The Console log toolbar is the one we use most when we write JS code, and we can insert it in js code

Console. log(" Variables you want to observe ")Copy the code

The input log can be viewed in devTools, and the insertion of different consoles at different stages of the function can help us observe changes in variables at different stages of the function and help us identify problems.

The console can print logs and other information. When our code volume is very large, if the control bar is full of the same log, it is not conducive to us to find the desired print quickly. At this time, we can cooperate with other prints to display different styles and colors for easy differentiation

  • Console. log() Log printing grey Is a string of blue numbers

  • Warn Output warning information (yellow)

  • Error Displays error information (red).

  • debug

  • Dir Displays the properties of a node

    Using dir shows the information contained in an HTML node, including its attributes, methods, and so on

  • info

  • Table visualizes JSON and array data,

  • Placeholder %S string placeholder %O object placeholder %C style placeholder adds a style before the string to highlight the subject information

  • Generate log text files, in the real business, we may use the framework of the third party payment, so when we use own cannot solve the problem, or is the issue of framework, tend to have specialized technical personnel for us to solve the bug, because it is at this time online contact, each other can’t see you complete information on the output of the control bar, You can generate a log file, send the log file to the other party, the other party can see your completion error message, help you solve the problem

The source toolbar

The Source panel displays the Source file information on the page to help us view specific error messages

  • Left file structure

  • File source code

  • The right tool bar

    • A BreakPoint is a debugger that is added to HTML code. In browser parsing, the debugger enters a BreakPoint state when the cursor moves over a variable and the value of the current variable is displayed

    • You can also add a breakpoint by clicking on the line number in the middle source code

- Watch Input the variable you want to listen to in Watch. When the program runs to the breakpoint, the value of the current listening variable can be visually seen in Watch. - Scope Scope list can be viewed, including closureCopy the code
  • When we compress the code using WebPack, our code is compressed into a single line, but we develop the code before compression. When one of the files we developed went wrong, it was difficult to troubleshoot the compressed code. The Source Map decompresses and transforms the compressed code to find the mapping before the compression. For example, if js1 file is wrong, js1 will be displayed so that we don’t all check for errors in js1, 2, 3, etc

The Performance panel

When we have high performance requirements, we can view every frame in the Performance panel. What was done in each millisecond and how much time did it take to load a particular module

  • FPS Frames per second
  • The amount of time the CPU takes to process each task
  • Net each request takes time
  • Frames frame thread
  • The main thread is responsible for executing JavaScript to parse the HTML/CSS to complete the drawing
  • Raster The Raster thread is responsible for drawing a layer or tiles
  • Statistical panel

The NetWork panel

Network request resource related

  • Resource request JS CSS IMG etc

  • Network request get POST

    • Header allows you to view Header information related to each interface, and pass parameters

- View the returned information in previewCopy the code

  • When we need to simulate slow network, you can set up web network system, set up 3G network and so on

Application

You can view locally stored user information, including localstorage, cookies, and so on