current position:Home>Front end browser debugging tips

Front end browser debugging tips

2022-04-29 06:46:38Jimmy

Form writing habits together ! This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 26 God , Click to see the event details

As a front-end Developer , We deal with browsers all the time , In the process of development , We need to constantly view the written results in the browser , Make rational use of the console function of the browser , It will help us develop , Save time to get Work Life Balance Experience . Now let's mention some debugging skills .

Shortcut keys for tips , Based on mac Google browser on , The systems of other platforms are similar

Screenshot feedback

Working with design students , Product students , Test students , When developing students and so on , Sometimes you need to send a screenshot of the product , Are you still using the screenshot function of a micro , Or download special screenshot software to capture it ?

We can abandon tools , Directly use the functions customized by the browser .

Open console , Then press Select command + shift + p, You can see the input panel , Input command keyword , You can see the following way to take a screenshot .


Debug interface data

During the joint debugging with the back-end students , Are you still using console.log and return To view the data transmitted by your interface ? We can verify through the network interface .

Open console , Choose Network The panel , Check the network as offline state , Then you can make a request , Don't worry about triggering interface changes . Here I use give the thumbs-up Interface, for example :


Reservation interface request

When switching pages , The data of the next page depends on the data of the interface of the previous page , This is the time , We need to check the interface of the previous page , The browser is removed by default , We can turn it on Preserve log Pattern .


postman Demo interface

When debugging the interface , We have logged into the system , Then you find the wrong interface content , However, your coordinator no longer works in the same area , You need to show him . So what would you do ? Record operation video , Explain and show ? Or a lot of screenshots , With the text description ?

We don't have to be like that . We can copy link requests , Let's right-click , Do the following , Copied the like interface :


Information copied to , Send to the collaborator , He was in postman Just paste and debug . The copied link has brought your relevant credentials , He can experience the problem from your perspective . I like this little skill very much ,yyds~

Don't tell me , The backend developer did not install postman Tools

I believe you are quite familiar with other debugging techniques , I'm not going to expand on that , such as filter The filter ,HTML Element positioning modification ,cache Clear, add, etc .

【 End 】

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

Random recommended