I. Bug and Debug

Features of front-end Debug

  1. Multiple platforms
  2. Many environmental
  3. Many tools
  4. More skills

Second, the Chrome DevTools

2.1 the Elements panel

  • When debugging a web page, you can modify HTML and CSS directly in the Elements panel. Real-time preview facilitates debugging. By clicking the small arrow button in the upper left corner (Ctrl+ Shift +C), you can see the style information of the element below.

Click the specific style value (font size, color, width and height, etc.), you can edit and modify the style, and the browser content area can see the debugging effect in real time

  • You can change the class name directly on the element or you can click.cls to enable dynamic changes to 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

  • For Computed you can click on the arrow in styles to go to the CSS rule in the Styles panel. For Computed you have all the styles on the page, so you can search for them, click on the arrow, and you can see which one works and you can go to the CSS rule and change it

  • Two methods force activation of pseudo-classes

    • Select the element with the pseudo class and click: HOV
    • DOM tree right-click menu, select Force State, select the corresponding pseudo-class style, it is forced to activate, you can modify the corresponding pseudo-class style

2.2 the Console panel

This panel has a number of practical methods:

  • Different printing methods show different colors;
  • Different methods correspond to different log levels, which can be flexibly used and switched to find the information we need
  • Depending on the type printed, the corresponding color is different: blue represents a number and gray represents a string

    • Console. log –> Outputs logs

    • console.warn

    • console.error

    • console.debug

    • console.info

    • Console. dir –> displays each specific property of the object and its corresponding value

    • Console. table –> Visualize JSON and array data to show the content clearly

    • Placeholders -> Add styles to the log to highlight important information. For example, if we print a value that contains many different types of data, we can use placeholders to preload the different types of data and display them later

      • %s: string placeholder
      • %0: object placeholder
      • %c: style placeholder
      • %d: digit placeholder

2.3 Sources panel

1. Break Point and Watch

2. Scope and Call Stack

  • Expand Scope to view a list of scopes (including closures) : closures can be found at developer.mozilla.org/en-US/docs/…
  • Expand the Call Stack to see the Call Stack of the current javaScript code: Call Stack: developer.mozilla.org/en-US/docs/…

3. How to debug the compressed code

2.4 the Performance panel

2.5 the NetWork panel

2.6 the Application panel

This panel displays information related to local storage

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie

Other small operations: Truncate the graph

Iii. Mobile TERMINAL H5 debugging

3.1 Real machine debugging

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

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

3. It can be scanned and viewed by mobile phone directly, which is convenient and quick

3.2 Commissioning using the Proxy Tool

Principle: 1.

  • The computer acts as a proxy server
  • The phone connects to the computer via an HTTP proxy
  • Requests on the phone go through a proxy server

2. Take Charles for example:

  • Installation, Charles
  • Check computer IP and port
  • Enter the IP address and port number in the mobile HTTP proxy
  • Charles permit authorization
  • Use the SwitchHosts! The software configures Hosts for the Mac
  • Mobile phone access the development environment page
  • By default, Charles cannot fetch HTTPS requests and will need to install a certificate.

3.3 Common Tools

  1. Charles: Suitable for viewing and controlling network requests and analyzing data
  2. Fiddler: Similar to Charles, for Windows
  3. Spy-debugger: Remotely debug mobile phone pages and capture packets
  4. Whisle: a cross-platform Web debugging agent based on Node implementation

Four, common debugging skills

4.1 Online immediate Modification of Overrides

And then in the editor to modify once and then refresh

4.2 Enabling the Local Source Map

4.3 Small yellow duck debugging method

When there is a bug, explain each line of code in detail to the yellow duck, and slowly discover the problem

When studying at ordinary times, you can also explain knowledge points to the little yellow duck to see whether you really understand the knowledge points