I. Bug and Debug

Bugs in our system programs are called bugs. The world’s first bug, is 1946 Hope discovered the first computer bug, turned out to be a moth “bedbug”. The process of solving these problems is called bug catching, debugging, or debugging.

The characteristics of the Debug

  1. Multiple platforms: browser, NodeJS, Hybrid, applets, desktop applications……
  2. Multiple environments: local development environment, online environment
  3. Multiple tools: Chrome Devtool, Charles, Spy-Debugger, Whistle, vConsole……
  4. Multiple tips: Console, BreakPoint, sourceMap, agent……

Second, the Chrome Devtool

Modify elements and styles — Element panel

The Element panel of Chrome developer Tools is used to modify elements and debug styles.

  • Click.cls to enable dynamically modifying the element’s class
  • The input string dynamically adds the class name to the element
  • Select or deselect the class name to dynamically view the effect of the class name
  • Click on the specific style value (size, color, width and height, etc.) to edit, browser content area real-time preview
  • Click the arrow in Computed to jump to the CSS rule in the Styles panel

The Console panel

To output logs, you need to use the Console panel. The following are common uses of Console:

  • Console. log: outputs information
  • Console. warn: Outputs warning information
  • Console. error: displays error information
  • Console. debug: indicates debugging information
  • Console. info: specifies the alias name of console.log
  • Console. table: Converts complex data (JSON, array) to table display
  • Placeholders: Add styles to the log to highlight important information

%s: string placeholder; %o: object placeholder; %c: style placeholder; %d: digit placeholder.

Source Tab

Source panel, mainly can view the Source code, and breakpoint debugging, as follows:

  • Area 1: page resource file directory tree
  • Area 2: Code preview area
  • Area 3:Debug toolbar from left to right
    • Pause (to continue)
    • Single step over
    • Enter the function
    • Jump out of the function
    • Single step
    • Activate (close) all breakpoints
    • Automatic breakpoint at code execution exception
  • Zone 4: Breakpoint debugger

Break Point and Watch

Break Point is a list of all debugging breakpoints, and Watch is to observe changes in variable values, as shown in the figure:

  • Breakpoints can be set using the keyword debugger or the line number of the code preview area
  • Code pauses when execution reaches a breakpoint
  • You can expand Breakpoints list to view Breakpoints list, and select/disable Breakpoints to enable/disable Breakpoints
  • Hover allows you to view the value of the hover variable while paused
  • Click + on the right side of the debugger Watch to add monitoring of the variable and see its value

The Scope and the Call Stack

  • Expand Scope to see the list of scopes (including closures)
  • Expand the Call Stack to see the Call Stack of the current javaScript code

Perfomance

Perfomance panel, used to detect performance issues. It should be rarely used in development, but it is a good tool to help us quickly identify the cause of performance problems when we encounter bottlenecks in improving page performance. Let’s take a look at the main functions of several areas of the panel:

  • Area 1: Control panel: recording page loading/operation, clearing, snapshot/memory capture, etc
  • Area 2: Overview panel
    • FPS: Frame rate, the number of frames per second
    • CPU: The time spent processing each task
    • NET: Each request takes time
    • HEAP: memory consumption records, including js variables that have not been destroyed in memory, the amount of documents, DOM nodes, event listeners, GPU memory, etc
  • Area 3: Thread panel
    • Network: the point in time at which each request occurs
    • Frames: Frames thread
    • Main: the Main thread, which is responsible for loading and executing JavaScript, parsing HTML and CSS, generating the render tree, and completing the painting (helps us understand the principles of browser page rendering).
    • Raster: Raster thread, which is responsible for drawing a layer or block
  • Area 5: Statistics panel

Network

Network Network panel is often used in development and debugging. You can view the resources requested and loaded by XHR/FETCH interface (JS/CSS /img/media/font…). . Here are the main areas of the panel:

  • Area 1: Control panel
  • Area 2: Filter panel
  • Area 3: Overview area
  • Area 4: Request Table panel
  • Area 5: Summary panel
  • Area 6: Request details panel

We often use the Request Table panel to view interface requests. Click on a Request to view interface details. It contains request header, response header, request status code, etc. For example, if the interface status code is 4XX, it belongs to the client side error, we need to check our front-end code problems; If the status code is 5XX, it belongs to the server side error, we can quarrel with the back end and assist them to troubleshoot and solve.

Application

The Application panel is mainly used to view local cache data, such as Storage, cookies, offline cache, local database, etc., as shown in the following figure:

Security

The Security panel is used to view HTTPS certificate-related status of the page, such as Security source information and HTTPS CA certificate (issuer, validity period, signature algorithm, and public key……). And so on.

Iii. Mobile debugging -H5

Real machine commissioning

IOS

  1. Connect your iPhone to your Mac using Lightning cable

  2. Enable Web Inspector on iPhone (Settings -> Safari -> Advanced -> Enable Web Inspector)

  3. The iPhone uses Safari to open the page to be debugged

  4. Mac Open Safari to debug (Menu bar -> Develop -> iPhone Device Name -> Select Debug Page)

  5. Debug in Safari Developer Tools that pops up

No iPhone device can install Xcode on the Mac App Store to use its built-in iOS emulator

iPhone

  1. Connect your phone to your computer using a USB cable

  2. Enter developer mode, check USB Debug, and allow debugging

  3. Open Chrome on your computer, type: Chrome ://inspect/# Devices in the address bar and check the Discover USB Devices option

  4. The phone allows remote debugging and access to the debug page

  5. The computer clicks the inspect button

  6. Go to the Debugging screen.

Direct use of mobile phone scan code view, better experience

Use proxy tools for debugging

For mobile TERMINAL H5 development, if you need to capture packets for interface debugging, you can choose the proxy tool. Take Charles as an example:

  1. Installation, Charles

  2. Check computer IP and port

  3. Enter the IP address and port number in the mobile HTTP proxy

  4. Charles allows authorization (Charles cannot grab HTTPS requests by default, certificates need to be installed)

  5. Use the SwitchHosts! The software configures Hosts for the Mac

  6. Mobile phone access the development environment page

How the proxy tool works:

  • The computer acts as a proxy server
  • The phone connects to the computer via an HTTP proxy
  • The requests on the phone go through the proxy server, and the computer grabs the requests on the phone

Commonly used tools

Charles

Charles: Suitable for viewing and controlling network requests and analyzing data.

Fiddler

Fiddler: Similar to Charles, for Windows.

spy-debugger

Spy-debugger: Remotely debug mobile phone pages and capture packets.

Whistle

Whistle: A cross-platform Web debugging agent based on Node implementation.

Four, common debugging skills

Live Modification online

We usually modify the debugging code online in the Source panel, and the effect will be updated in real time. However, all the modifications before the browser is refreshed will be restored to the original state. In this way, the debugging efficiency of the code is very low. In order to solve this problem, we can use Overrides to save the modified file online, and clearly see the changes, and finally modify the code is convenient.The steps of Overrides are as follows:

  1. Open Overrides under the Sources panel.

  2. Click Select Folders for Overrides. Select a local empty folder directory.

  3. Allow the authorized

  4. Modify the code in page and save command + S after modification.

  5. Open devTools and click on the three little dots in the upper right -> More Tools -> Changes to see all the Changes.

Enable the local Source map

The code of the online environment is packaged and compressed, and there is no source map file, so it is not convenient to troubleshoot and locate problems. In this case, you can use Charles to configure map Local, proxy the online environment to the Local, run the Local file, and locate problems quickly if there is source Map locally.

Small yellow duck debugging method

When none of the above debugging techniques is helpful, we can use the ultimate debugging method – the yellow duck debugging method.

Legend has it that a programmer would carry around a little yellow duck, place the duck on his desk while debugging code, explain each line of code to the duck in detail, and quickly locate the problem and fix it.

Source: The Way of Programmer Training

Five, the summary

We develop and write code, and although we pursue high-quality coding, bugs are inevitable. When it comes to finding and locating bugs, we will use debugging techniques. Here are some of my summary:

  • Style troubleshooting: useElementpanel
  • Troubleshooting interface problems: Good useNetworkNetwork panel,ConsoleThe log panel
  • Online environment troubleshooting: EnableOverrides,CharlesconfigurationMap Local
  • Mobile terminal troubleshooting: Use the proxy packet capture tool (Charles,Fiddler…).
  • Deep bug hunt: Yellow Duck debugging method (read code line by line, tease out code logic)

In order to improve the efficiency of troubleshooting and quickly solve online problems, we need to use the front-end debugging tools and skills introduced above.