This is the 21st day of my participation in the August Text Challenge.More challenges in August

Chrome is one of the most commonly used tools for front-end developers. In this issue, we introduce some useful Chrome debugging methods that can help and improve development efficiency from performance, logic, layout, interaction and more.

The following shortcut keys are used in the MacBook hardware environment. Please correct some shortcut keys in Windows

More articles in my Github and personal public account [full zhandao road], welcome to watch [an unknown football dog’s front knowledge point], if there are benefits, do not pay, little hands point a Star.

How to open Chrome Devtool

  • Choose More Tools > Developer Tools from the Chrome menu
  • Right click on the page element and select ‘Check’
  • Use shortcut keysCtrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

Do you really know the Chrome Devtool toolbar

Chrome DevTool contains a wealth of features, including the following categories on the toolbar

  • Equipment model
    • Test responsive and device-specific viewports
    • Analog mobile device
    • Simulation sensors: geolocation and accelerometer
  • Elements– Page DOM element panel
    • Check and adjust the page
    • Edit the style
    • Edit the DOM
  • Console– Console panel
  • Sources– Source code Panel
    • Breakpoint debugging
    • Debugging obfuscated code
  • Network– Network Panel
    • Resource timeline
    • Network bandwidth
  • Performance– Load the device performance analysis panel
  • Memory– Memory panel
  • Application– Application information panel, PWA/Storage/Cache/Frames
  • Security– Security analysis panel
  • Audits– Automated test tools

The use of good Chrome Devtools

Call out shortcut panel:cmd + shift + p

  • inDevtoolsOpen the case, typecmd + shift + pActivate it, and then start typing the command or input you want to find in the field?Number to view all available commands
    • .: Open file
    • :: Go to file
    • @: to the identifier (function, class name, etc.)
    • !: Runs the script file
    • >: Enables a menu function

Built-in screen capture:> screen

  • Includes area capture, whole screen capture, node capture, screen capture functions

Performance Monitor:> performance monitor

Check for useless CSS/JS

  • This feature allows you to check the percentage of CSS/JS on your page that is not being used, using red and using green.
  • Opening method: Toolbarmore tools => CoverageTAB, and then click the Record button to refresh the page. After the page is loaded, click Stop to display the code percentage of the page.

Fancy the console

  • Congsole.log (), console.error(), console.warn(), console.info()Routinely print data information

  • console.table()Print complex data structures in tabular form
  • The console. Group (), the console. GroupEnd ()Packet Printing information
  • console.assert()Conditions for printing
  • console.dir()Recursively prints all properties of the object
  • console.trace()Trace the call path of a function
  • Print with style

Pseudo-class pseudo-element debugging

View DOM node binding events

Make use of network filters

Simulate disconnection for error handling

  • Simulate the display of the page at different network speeds

Checking for Memory leaks

  • As long as there is a reference there is no GC collection. Some DOM nodes do not append to the DOM, but there is a reference to it, which is a node of a separate DOM. This is when a DOM memory leak occurs. Take a snapshot of the memory heap, and Chrome will help us highlight the separate DOM nodes in yellow.
  • Opening mode:Memory => profiles

Check memory consumption

  • To view memory consumption for an operation, use Record Allocation.
  • Opening mode:Memory => profiles => ALLOCATION TIMELINES, click Start record, click Stop after the operation is complete, and the usage analysis will appear.

Scroll Into View to the DOM

DOM breakpoint testing

Resend the XHR request

The number of concurrent browser requests is incorrect

  • Due to the number of ports and the overhead of thread switching, it is not possible for a browser to have an unlimited number of concurrent requests
  • The problem of the number of concurrent browser requests is not always better. In order to protect the performance of the browser and the server, the major browser manufacturers have developed their own standards for the number of concurrent requests.
  • Of course, the number of concurrent requests is not immutable, thunderbolt, storm video can modify the computer’s maximum number of connections, so as to achieve the highest efficiency of download or request.
  • Some browsers can also override the browser defaults, such as Internet Explorer
  • Maximum number of concurrent concurrent concurrent requests for the browser
Browser Max
Internet explorer 8, 9 6
Firefox 6
Chrome 6
  • For the maximum number of concurrent requests, nowExisting solutions, roughly divided into the following categories, here is not special explanation, there are students who want to know can click the link to view.
    • Solution categories: Domain hash, Cookie Free, CSS sprites, JS/CSS combine, Max Expires Time, Loading images on demand

Write in the last

If you find this article beneficial to you, please like it and share it with more people who need it!

Welcome to pay attention to “Quanzhandao road” and wechat official account “Quanzhandao Road”, get more good articles and free books!
If you need [Baidu] & [Bytedance] & [JINGdong] & [Ape Tutoring], please leave a message, you will enjoy VIP speed push service ~

Past oliver

Create a personalized Github profile

Implementation of wechat JS API payment

The interviewer asks you<img>What would you say about the element

Special JS floating-point number storage and calculation

Long [word] baidu and good interview after containing the answer | the nuggets technology essay in the future

Front end practical regular expression & tips, all throw you 🏆 nuggets all technical essay | double festival special articles

A detailed explanation of the unpopular HTML tabIndex

A few lines of code teach you to solve the wechat generated posters and two-dimensional code

Principle of Vue3.0 Responsive data: ES6 Proxy

Make the interviewer fall in love with you

How to draw a fine line gracefully

[3 minutes] Front-end performance optimization -HTML, CSS, JS parts

Front-end performance Optimization – Page loading speed optimization

Front-end Performance Optimization – Network transport layer optimization