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

[youth training camp] - front end development and commissioning notes

2022-01-27 03:47:04 Yiyu

This is my participation 8 The fourth of the yuegengwen challenge 1 God , Check out the activity details :8 Yuegengwen challenge


When we develop and debug , To find out Bug, eliminate Bug.

Bug The word comes from an American scientist , When she was debugging the equipment, she found that a bug caught the relay and caused the machine to go wrong , So she named the machine failure Bug( Bedbug ), And still in use today .

Chrome devtools

Right click on the web page - Check , perhaps F12 Can open Chrome devtools, There are multiple debugging panels inside .

Elements panel

Use Elements The panel can view the website's HTML Information , We can click the small button in the upper left corner ( Shortcut key Ctrl+shift+C), Select and view the style information of the element . When debugging web pages , Can be directly in Elements Modify in panel HTML and CSS, Real time preview is convenient for us to debug .

For some pseudo class styles , You can also select the pseudo class for forced activation in the panel .


Sometimes there are too many styles , We can do it in computed Search the tag directly for the style name we are looking for , Click directly to the corresponding style section .

Console panel

What I use most in daily debugging is console.log, actually Console There are many practical ways to use panels . Different printing methods show different colors , When debugging, you can see the information more intuitively . Common are :

 Copy code 

At the same time, different data types display different colors in the panel , It helps us to distinguish whether the output is a number or a string . Placeholders can also be used in panels , Where the style placeholder %c You can add a fancy effect to the log , Very interesting .


Sources panel

In debugging , We can go through Sources Panel to see the source code of the web page , You can view the monitor in the toolbar on the right 、 The breakpoint 、 Scope 、 Call stack and other information . When entering a breakpoint , Move the mouse over the variable to view the value , It's kind of like the back end IDE The feeling of debugging code . In addition, we can click the new breakpoint in front of the line number , You can also write... Directly in the program debugger.

stay sources You can also add a small script written by yourself , It's called running code snippets on any page . Generally, the scripts and plug-ins installed on the browser can be seen in the directory bar .

because Sources The panel can directly see the source code , Then it leads to the problem of security , Generally, what we see when we open the website is processed . Some are compressed and confused , The variable name is replaced and compressed into one line , This can be clicked {} Button to format , And some are directly invisible .

During debugging, in order to maintain the readability and debuggability of the client code , have access to Source Maps( Source mapping ) Map source code to compiled code . Generated when packaging Source map file , Upload the file to the error monitoring platform of your intranet before going online , When an error occurs, you can see the corresponding mapping .

About this part , Deep excavation has many details , About Source Maps Relevant standards and articles , You can refer to this link .

Performance panel

performance The panel can be viewed web Various events in the life cycle , You can see each time point FPS、CPU、NET Information about , There are also web thread panel and statistics panel , By analyzing this information , We can find the key points that affect page performance , And make corresponding optimization .

Network panel

Network All network request information can be seen in the panel , Grab the bag , Prohibition from cache Loading resources in , Limit bandwidth, simulate weak network environment, etc . Select a network request message , You can view the details of the request , For example, the request line 、 Request header 、 Response line 、 Response header and response body, etc . Visually see the original content in the packet , So as to rule out whether your own web page rendered bug.


stay Application The panel can be checked and modified Storage( Storage )、Databases( database ) and Caches( cache ). stay storage You can click clear site data Clear the data of this website .

Mobile H5 debugging

Generally speaking, we can pass DevTools The buttons in the upper left corner simulate various mobile devices .

Real machine debugging

Real machine debugging , If you use a wired connection, it's very inconvenient , It is recommended to scan the code directly . have access to Fehelper plug-in unit ( recommend ) Generate QR code for the website , In the LAN, you can scan the code directly with your mobile phone to view the website .

Debugging with agent tools

Charles Mobile phone grab 、progress Bag grabbing tools, etc , among https Relevant websites need to install certificates .


In fact, there is another ultimate debugging method : Yellow duck

The way is to patiently explain your code to a little yellow duck , Find the problem step by step , Of course, you can also find colleagues or girlfriends .

Time is limited , Exploration goes beyond , Knowing more about front-end debugging can save a lot of time , Improve efficiency . With the development of front-end technology , There will be more and more debugging methods ,Chrome Browsers have also added lighthouse Wait for the panel to help us debug . There are many interesting functions about browser debugging tools waiting for us to study . Put it here Chrome Official about DevTools Links to detailed documentation for # Chrome DevTools

This class is taught by the bald cloak teacher , I can only say that the bald teacher speaks really well

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

Random recommended