Knowledge of front-end debugging

The BUG and the Debug

The first BUG was created

The first BUG dates back to September 1945, September 9, 1945, 3:00 p.m. Lieutenant Harper is leading her team to build a computer called the Mark II. It wasn’t really an electronic computer yet, it used a lot of relays, electromechanical devices. World War II is not over yet. Harper’s team worked around the clock. The engine room is an old building from the First World War. It was a hot summer day. The room had no air conditioning and all the Windows were open for heat dissipation.

Suddenly, the Mark II crashed. The technician tried a lot of methods, and finally failed to locate relay 70. Harper looked at the errant relay and found a moth lying in the middle, killed by the relay. She carefully picked the moth out with a mouthpiece, taped it to the “event book” and noted “first instance of insect discovery.”

From then on, computer errors are called bugs, and correspondingly, the process of finding and correcting a Bug is called “Debug”, which means “catching bugs” or “killing bugs”.

Bugs are inevitable

Features of front-end Debug

1. Multiple platforms

2. The environment more

3. More tools

4. Many skills

chrome DevTools

Dynamically modify elements and styles

ElmentsThe palette is used to debug elements and styles

Labels and styles can be modified in real time

On Computed, you can see the final style in effect, along with the corresponding CSS file source

  • Click. CLS to enable dynamic modification of the element’s class

  • An input string can dynamically add a class name to an element

  • Select/deselect the class name to dynamically view the effect of the class name

  • Click on specific style values (size, color, width, height, etc.) to edit them and preview the browser content area in real time

  • For Computed, click the arrow in styles to jump to the CSS rules in the Style panel

    You can force pseudo-classes to be activated in one of two ways

    • Select the element with the pseudo-class and click:hov
    • DOM tree right-click menu, selectForce State

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 the properties and values of an object

    let juejin = document.getElementById('juejin');
undefined
console.dir(juejin);
Copy the code

  • A placeholder

    Add a style to the log to highlight important information %s: character placeholders; %o: object placeholder; %c: style placeholder; %d; Numeric placeholders

    For example,

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

Source Tab

Break Pointwith Watch

Page corresponds to the directory resources of the website, and each page has a corresponding code

In the middle is the code associated with the selected file

On the right is the debugging interface

Add debugger in js file corresponding location, program execution to the corresponding location to enter debugging

You can also add a breakpoint by clicking the line number directly in the middle code area

Debug interface

Watch can listen on a variable

Breakpoints View the corresponding Breakpoints

ScopewithCall Stack

The Scope Scope

Call Stack Call Stack

How do I debug the compressed code

The front-end code is inherently “open source” for security reasons. JavaScript code is often compressed to a single line, with variables replaced by a,b, etc., making the whole code unreadable.

So how do you debug your compressed code?

source map

The source map file is generated when packaging, but is not uploaded online.

Performance

Performance-related panels

Area 1: Control panel

Area 2: Overview panel

  • FPS: Frames per second
  • CPU: The time taken to process each task
  • NET: time spent on each request

Area 3: Thread panel

  • FramesFrame: thread
  • Main: main thread, responsible for executionJavaScript, parsingHTML/CSSTo complete the drawing
  • Raster:RasterThread that is responsible for completing alayerOr some block drawing.

Area 4: Statistics panel

network

Web site network requests

Application

This panel mainly records all resource information loaded by the website, including Storage data (Local Storage, Session Storage, IndexedDB, Web SQL, Cookies), cache data, fonts, pictures, scripts, style sheets, etc

Use the debugging tool to quickly cut the long diagram

Mobile TERMINAL H5 debugging

Real machine commissioning

Connect the device directly with the data line

Debug using the agent tool

Commonly used tools

Charles

Progress

Whistle