Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

At the same time, I participated in the Digitalstar project to win the creative gift package and challenge the creative incentive money

The Bug and the 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 generation of Bug

Features of front-end Debug

Multiple platforms

  • Browser, Hybrid, NodeJs, applets, desktop applications…..

Many environmental

  • Local development environment, online environment

Many tools

  • Chrome devTools, Charles, Spy-Debugger, Whistle, vConsole…

More skills

Console, BreakPoint, SourceMap, agent…..

Chrome DevTools

Dynamically modify elements and styles

在ComputedYou can see the final effect of the style, and the corresponding CSS file source

  • 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

You can force pseudo classes to be activated in two ways

  • Select the element with the pseudo class and click: HOV
  • DOM tree right-click menu and select Force State

Console

Console Log Panel

  • Console.log

  • Console.warn

  • Console.error

  • Console.debug

  • Console.info

You can select a level on the left to view logs by category

  • Console.table

Visualize JSON and array data

  • Console.dir displays properties and their corresponding values in an object
let juejin = document.getElementById('juejin');
undefined
console.dir(juejin);
Copy the code

  • A placeholder

Add styles to your logs to highlight important information

%s: character placeholder; %o: object placeholder; %c: style placeholder; %d; Numeric placeholders

For example,

The console. The log (' % s % o, c % % s', 'hello, {name:' Joe ', age: 20}, 'the font - size: 24 px; color: red', 'hello world! ')Copy the code

Sorce Tab

Break Point and Watch

The Break Point is the list of all debugging breakpoints, and the Watch is the variable 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

How does the compressed code tune?

Front-end code is inherently “open source”. For security reasons, JavaScript code is often compressed to a single line, with variables replaced with ‘A’, ‘b’, etc., making the whole unreadable. So how do you debug compressed code?

Source Map

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:

NetWork

In the Network panel, you can view all Network request information, perform packet capture operations, prohibit loading resources from cache, limit bandwidth to simulate weak Network environment, and so on. Select a network request to view the details of the request, such as the request line, request header, response line, response header, response body, and so on. Visually see the original content of the packet, so as to rule out whether their web page rendering out the bug.

Application

Application The Application panel is used to view local cache data, such as Storage, cookies, offline cache, and local database.

Debug H5 on the mobile terminal

Real machine commissioning

iOS

  • Connect your iPhone to your Mac using Lightning cable

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

  • The iPhone uses Safari to open the page to be debugged

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

  • 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

Android

  • Connect your phone to your computer using a USB cable

  • Enter developer mode, check USB Debug, and allow debugging

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

  • The phone allows remote debugging and access to the debug page

  • The computer clicks the inspect button

  • Go to the Debugging screen.

Direct use of mobile phone scan code view, better experience

Use proxy tools for debugging

The principle of

  • The computer acts as a proxy server

  • The phone connects to the computer via a HITP proxy

  • Requests on the phone go through a proxy server

Charles, for example

  • Installation, Charles

  • Check computer IP and port

  • Enter the IP address and port number in the mobile HTTP proxy

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

  • Use the SwitchHosts! The software configures Hosts for the Mac

  • Mobile phone access the development environment page

Commonly used tools

Common Debugging Tips

Modify Overrides online immediately

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:

  • Open Overrides under the Sources panel.

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

  • Allow the authorized

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

  • 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.

If no Source Map exists online, you can use the Map Local network mapping function to access the Local Source Map file.

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

conclusion

  • If there is any mistake above, please point out in the comment section, thank you!

After reading it, give it a thumbs-up and then walk away