current position:Home>[youth training camp] - front end development and commissioning

[youth training camp] - front end development and commissioning

2022-01-27 03:47:14 By to a long

Front end debugging knowledge

BUG And Debug

first BUG The birth of

first BUG Go back to 1945 Year of 9 month 1945 year 9 month 9 Japan , At three o 'clock in the afternoon . Lieutenant Harper is leading her team to build a team called “ Mark type 2 ” The computer . This is not yet a real electronic computer , It uses a lot of relays , An electronic mechanical device . The second world war is not over yet . Harper's team worked day and night . The computer room is an old building built in the first World War . It was a hot summer , There is no air conditioning in the room , All Windows are open to dissipate heat .

All of a sudden , Mark two crashed . The technicians tried a lot , Finally, we'll go to the third 70 Relay no. 1 error . Harper looks at this faulty relay , Found a moth lying in the middle , Has been killed by the relay . She carefully clipped the moth out with the camera , Put transparent tape on “ Event book ” in , And let us know “ The first example of finding bugs ”.

From then on , People call computer errors Bug, Corresponding to it , People will find Bug And the process of correcting it is called “Debug”, meaning “ Catching insects ” or “ Insect killing ”.

BUG It's inevitable

front end Debug Characteristics

1. Multi platform

2. Multiple environments

3. Multi Tool

4. Multi skill

chrome DevTools

Dynamically modify elements and styles

Elments The panel is used to debug elements and styles

You can modify labels and styles in real time


stay Computed You can see the final effective style , And the corresponding CSS Source of documents


  • Click on .cls Turn on the of dynamically modifying elements class

  • The input string can dynamically add a class name to the element

  • Check / Canceling the class name can dynamically view the effectiveness of the class name

  • Click the specific style value ( Font size , Color , Width, height, etc ) It can be edited , Live preview of browser content area

  • Computed Click the arrow in the style below to jump to style In the panel css The rules

    You can force activation of pseudo classes in two ways

    • Select the element with pseudo class , Click on :hov
    • DOM Tree right-click menu , choice Force State



Console Log panel

  • console.log
  • console.warn
  • console.error
  • console.debug

On the left side, you can select the grade , View logs by category


  • console.table

Show concretely JSON And array data

  • console.dir You can display the attributes and corresponding values in the object

    let juejin = document.getElementById('juejin');
     Copy code 


  • Place holder

    Add style to the log , Can highlight important information %s: Character placeholder ;%o: Object placeholder ;%c: Style placeholder ;%d; Digital placeholders

    give an example

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


Source Tab

Break Point And Watch

page Corresponding to the directory resources of the website , Each page has a corresponding code

In the middle is the relevant code of the selected file

On the right is the debugging interface

stay js Add... To the corresponding position of the file debugger, When the program is executed to the corresponding position, it will enter debugging

You can also directly click the line number in the intermediate code area to add a breakpoint

Debugging interface

watch You can listen to a variable

Breakpoints View the corresponding breakpoint

Scope And Call Stack

Scope Scope

Call Stack The call stack

How to debug the compressed code

Front end code is inherently " Open source " attribute , On safety grounds ,JavaScript Code is usually compressed , The compressed code has only one line , Variable usage a,b Equal replacement , The whole becomes unreadable .

So how to debug the compressed code ?

source map

Build on packaging source map file , But it won't be uploaded online ,


Performance related panels

Area 1: Control panel

Area 2: Overview panel

  • FPS: Frames per second
  • CPU: Time spent processing tasks
  • NET: Time spent on each request

Area 3: Thread panel

  • Frames: Frame thread
  • Main: The main thread , Responsible for the execution of JavaScript, analysis HTML/CSS, Finish drawing
  • Raster:Raster Threads , Be responsible for completing a layer Or the drawing of some blocks .

Area 4: Statistics panel


Website network requests



This panel is mainly used to record all resource information loaded by the website , Including storing data (Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、 Cache data 、 typeface 、 picture 、 Script 、 Style sheets, etc

Use the debugging tool to quickly cut the length diagram


Mobile H5 debugging

Real machine debugging

Connect equipment directly with data cable

Debugging with agent tools

Commonly used tools




copyright notice
author[By to a long],Please bring the original link to reprint, thank you.

Random recommended