“This is the second day of my participation in the August More Text Challenge.

1. Introduction to Chrome DevTools

Chrome DevTools consists of nine parts:

  • Element panel: check and adjust pages, tune DOM, debug CSS
  • Network Network panel: debug requests to learn about page static resource distribution and page performance detection
  • Console Panel: Debug JavaScript. View Console logs, interactive code debugging
  • Sources source resource panel: Debug JavaScript page source code, breakpoint debugging code
  • Application Application panel: View and debug client storage, such as cookies, LocalStorage, and SessionStorage
  • Performance panel: View the details of the web page and optimize the Performance of the fine grained web page loading
  • Memory Panel: JavaScript CPU analyzer, Memory heap analyzer
  • Security Security panel: View web page Security and certificate issues
  • LightHouse Panel: Performs performance analysis and provides optimization suggestions

Open Chrome Developer Toolsshortcuts:

2. Debug the DOM using Elements

2.1 View and Edit HTML and DOM

You can select THE DOM in the page and reverse locate the page in the DOM to edit the HTML and DOM:

  • Edit content
  • Edit properties
  • Modifying element types
  • Adjust the DOM node order
  • Edit HTML code
  • Delete, hide, add, and copy nodes

2.2 Accessing a Node on the Console

We can also access the node on the console:

(1) Usedocument.querySelectorAll()access

Enter the Element module and press ESC. This method returns oneNodeListArray, and the array is all the selected tags

(2) Use $0 to quickly access the selected element

When we select an element, the following prompt is displayed:That is to say, we can use$0To access the element, the selected element is displayed:

(3) Copy JS Path for access

Right click on the selected element, click Copy, and select Copy JS path to Copy the path of the element. Paste in the Console and the corresponding element is displayed.

2.3 Debug DOM breakpoints

Breakpoint debugging can be done in the following situations:

(1) Interruption point during attribute modification

We modify the href value of the selected a tag:

Right click on the element => Break on => Attribute modifications to make a breakpoint to the element, copy the ELEMENT’s JS PATH, modify its value, and then perform the breakpoint:

After the execution:

(2) Interruption point during node deletion

To remove a node, use the removeChild attribute of its parent element and set the breakpoint to Break on=> node removal:

After executing (removing the “map” TAB in the upper left corner) :

(3) Interruption point during subtree modification

To change the parent element, we need to interrupt the parent element, this time to remove the “Peg Bar” TAB in the upper left corner, and set the breakpoint to Break on=> subtree modifications:

After the execution:

3. Debug styles and CSS

3.1 Viewing and Editing the CSS

Take a look at the baidu input box:

In these styles, priority is reduced from top to bottom. Because some styles have lower priority and are overwritten by higher-priority styles, they are crossed out. We can modify the properties or property values of these styles, or we can hide the styles by crossing them out.

You can use Filter to Filter desired attributes, which are highlighted:

You can also view the box model of the element in real time:

3.2 Dynamically adding classes and pseudo-classes to elements

You can add classes and pseudo classes dynamically by clicking hov and.cla in the upper right corner, or view existing pseudo classes:

Dynamically add classes:

To add a pseudo class, select the pseudo class type before adding the pseudo class.

3.3 Quickly debug CSS values, colors, graphics, animations, etc

There are three dots in the upper right corner to the right of element.style, and you can see the following four buttons if you move the mouse over them:

The four buttons are:

  • text-shadow: Text shadow
  • box-shadow: Box shadow
  • color: Text color
  • background-color: Background color

You can visually adjust the style of the elements by using the four buttons.

(1) Take text-shadow as an example, you can adjust the offset position and blur degree of the shadow by adjusting the value:

(2) box-shadow:

(3) color:

(4) the background color

Animations can be debugged by opening Animations:

We added a hover effect to baidu’s input search box. This tool will record the start and exit of the animation and display it below:

Click on any of them to debug the animation’s property values:

4. Debug JavaScript using Console and Sources

4.1 Introduction to the Console Panel and interactive commands

You can use the Console panel to do the following:

  • Run JavaScript code, interactively program
  • View the logs printed in the program

(1) Enter some JavaScript code, expressions, algorithms, etc. in the Console to debug:

(2) Check the Log printed in the program:

In a normal project, you might use console to print the request response data coming from the back end to see the data format. You’ll also look at the results of some code and so on.

Console provides a number of methods for printing:

There are four main debugging methods, of which the Error and WARN methods have specific ICONS and colors:

  • console.log(): Prints common information
  • console.info(): Displays suggestive information
  • console.error(): Displays error information
  • console.warn(): Prints warning information

4.2 Debugging the basic process of JavaScript and breakpoint debugging

There are two main ways to debug JavaScript:

  • The traditionalconsole.logOr is italert()Print runtime information for debugging
  • JavaScript breakpoint debugging

(1) Use debugger to debug breakpoints

Breakpoint debugging, setting a debugger where the breakpoint is needed:

There is a toolbar below the code for single-step debugging:

They represent:

  • Resume script execution: Resume script execution
  • Step over next function call: Skip the next function
  • Step into next function call: Enter the execution of the next function
  • Step out of current function
  • Step (shortcut key F9) : Step execution

(2) Use event listener for breakpoint debugging

In addition to using the Debugger, breakpoints can be set directly:

The bottom one is the event listening event, we only need to select the corresponding event, and then execute the response event in the page, you can debug breakpoints.

(3) Set breakpoints on the line of code

We usually set breakpoints on the lines in question, and then debug breakpoints (multiple breakpoints can be set simultaneously) :

You can view the values of related variables in Scope.

4.3 Introduction to Sources Source Panel

The Sources panel contains static resources for the site:

We can use the shortcut Ctrl+P to search for the related static resource files to view, or Ctrl+ Shift+P to call up the command line, which has the shortcut keys for all commands:

Open the file you want to debug, you can edit and debug on the right side.

4.4 Use Snippets to assist Debugging

We can click on New Snippet to add a snippet to assist debugging. For example, we can introduce JQuery for assignment debugging:

Once you’ve imported the fragment, right click on the imported file and hit Run to debug the original styles, events, and so on using JQuery.

It is important to note that newly introduced snippets have no effect on the original code.

4.5 Using DevTools as a code editor

In Sources there is a Filesystem to which local files can be added for editing operations, which is equivalent to an editor (this method is for editing local source code) :

5. Debug the network

5. 1 Network Panel Overview

We can use the Network panel to do the following:

  • View web resource request preview to view resource distribution
  • View Request/Response or elapsed time for a single Request
  • Analyze page performance optimization, use tools to proxy page request data, etc

We can see all the network request data after performing an operation:

5.2 Viewing Web Pages Using Network View the site Network

Select filter, you can filter the network request data, you can search the data name, you can also filter by type:

All is All data that is requested back, XHR is All data that is asynchronously requested. Click on one of the request data in XHR to view its details:

The filter button is followed by search, which can only filter request data. Search can not only search request data, but also search the request header and request body of data, and can also conduct regular matching:

The Preserve log can be used to log a request for a previous web page, and the Disable cache can be disabled:

For a single request, Headers is the data related to the request header, Preview is the data related to the request, Response is the data related to the request, Timing is used for performance optimization:

Timing:

At the bottom of the request, there are statistics for all requests:

5.3 Use Network Waterfall to analyze page load performance

For request data, the request time is displayed on the right:

Projects can be optimized according to the length of request time. For example, some JS, CSS files can be merged, compressed and other operations, for pictures can be lazy loading.

You can look at the specific request time of a request to determine where the time is high:

6. The client stores the Application panel

6.1 Viewing and Debugging cookies

Cookies can be viewed in the Application panel:

Cookie =’ Cookie name = Cookie value ‘to add a new Cookie:

6.2 Viewing and Debugging LocalStorage and SessionStorage

We can also directly click add, delete, modify LocalStorage and SessionStorage property values:

LocalStorage API can be used to add, delete, change, check operations (sessionStorage also has a similar operation) :

LocalStorage will be permanently stored in the LocalStorage of the site. The LocalStorage of SessionStorage will be deleted after a session, logout, or closing the browser.

7. Debug mobile devices, H5 pages and remote debugging

7.1 H5 Page Debugging on the Mobile Terminal

Click the button as shown in the picture to switch to mobile display. You can switch the display device and zoom size in the toolbar above:

7.2 Developing the H5 Page using Chrome DevTools

When developing for mobile devices, there are operations such as getting location, Angle, size, orientation, and so on. We use the shortcut Ctrl+ Shift + P to bring up the menu and then search for sensors.

The three options are:

  • Location: Indicates the Location information
  • Orientation: Indicates the Orientation of the device
  • Touch: Touch information

These options allow you to change geolocation information, change the orientation of the analog device, and change touch-related properties. You can also use the shortcut Ctrl+ Shift + P to bring up the menu, then search for Network Conditions and click “Meet” to bring up a menu:

The first option is to disable caching, the second option is to simulate network conditions, and the third option is to simulate the user’s User-agent. There are many options to choose from:

8. Performance Panel

8.1 Overview of the Performance Panel

The Performance panel detects and analyzes the runtime Performance of web applications, including the page frames per second (FPS), CPU usage, time spent on various requests, and execution of network tasks.

The Performance panel can be opened in Chrome Development tools. It is recommended to use this tool in traceless mode because the page is not affected by caching or other plug-ins:

It can be seen that the middle of the Performance panel in the figure above shows how to start using this panel. Click the black circle at the far left of the upper left corner to start a new monitoring record, click the refresh button to record the monitoring record during the whole refresh process, and click the right button to delete the monitoring record.

Click the refresh button, and the performance results of the homepage are as follows. The information contained in the homepage can be divided into four categories: control panel, Overview panel, thread panel and statistics panel:

8.2 Control Panel

There are five options and two drop-down boxes in the control panel, which have the following meanings:

  • Screenshots: Indicates whether to take Screenshots of each frame. This option is enabled by default, and Screenshots over time are displayed in the overview panel. If deselected, this option will not be used.
  • Memory: indicates whether to record Memory consumption. This parameter is not selected by default. If this parameter is selected, the Memory consumption curves of various types of resources are displayed between the online layer panel and the statistics panel.
  • Web Vitals: A set of metrics proposed by Google for Web page loading speed and experience. This set of metrics is used to test Web page loading speed and user experience.
  • Disable javaScript samples: it needs to be checked if the running environment of the mobile terminal needs to be simulated, which means that the javaScript samples are closed and the overhead of running on the mobile terminal is reduced.
  • Enable Advanced paint instructing mentation (SLOW) : Indicates whether to Enable the accelerated rendering tool to record details related to rendering events. This feature is performance-intensive and can result in slower re-generation of detection reports.
  • Network: in performance detection, it is used to switch the simulated Network environment, which can simulate some performance of the website under the condition of weak Network (2G / 3G), and then carry out relevant optimization according to the specific performance of weak Network. ;
  • CPU: Limits the processing speed of the CPU, mainly used to simulate the performance of low-grade CPUS.

8.3 Overview Panel

In the Overview panel, you can select a start point and then drag the left mouse button to slide the selection panel’s China area for a narrower view of performance. The performance information in this section includes the following three indicators:

  • FPS: An important indicator of how smooth an animation is. If the FPS frame rate is low, there will be a red bar, indicating that the frame rate is low and the user experience will be affected. There is no red in the figure here, indicating that the overall experience of the web page is very smooth. It’s important to note that the higher the frame rate, the better the experience, whether it’s a game or a web page.
  • CPU: displays the CPU usage. This indicator corresponds to the Sumarry indicator below, and their colors represent the same meaning, with each color representing the time spent in each process. As can be seen from the figure, in the whole loading process, the white part (LDLE) has the largest proportion, which represents idle performance, while the orange part has the second largest proportion, which corresponds to the script loading time, so you can try to optimize in terms of speeding up the script loading speed to get faster.
  • NET: Show the specific time spent by each request. It is not clear here. You can directly go to the Network panel to observe the specific time spent by each request, and then analyze the specific time for each request.

8.4 Thread Panel

The thread panel is a fire map of the main thread as it parses HTML and CSS, draws pages, and executes JavaScript, reflecting each event stack and elapsed time. Each bar represents an event, and when you hover the mouse over it, you can view the execution time and event name of the corresponding time.

At the bottom of the panel, you can see a very important indicator: Main, which represents the Main thread, as shown below:

Different colors represent different event types. The horizontal axis represents time and the vertical axis represents the specific call stack. The call stack is like the interpreter in the browser, and you can use it to trace the execution flow of functions. When multiple functions are called in the browser, this mechanism allows you to track which function is executing and which function is called in the function body.

Common event types are:

  • HTML parsing.
  • JavaScript event;
  • Page layout changes;
  • Element style recalculation;
  • Page coating drawing.

8.5 Statistics Panel

The statistics panel will draw a visual icon of the execution time of different types of tasks based on the time area selected in the Concept panel. Click a rectangle in the Threads panel here, as shown below:

Click to see some specific information corresponding to this event. You can also click the link on the right side of Range. After clicking, it will directly jump to the corresponding code position in the Sources panel, which is convenient for locating the code:

The statistics panel contains four tabs with the following meanings:

  • Summary: display the loop diagram of time consuming of various task events;
  • Bottom-up: Displays the sorted time list of each event. The list contains two dimensions: the time of the event itself after removing the sub-events and the total time from the start to the end of the sub-events.
  • Call Tree: View the Call stack of all or specified events in the fire chart;
  • Event Log: View detailed logs about each Event.

9. The LightHouse panel

9.1 Overview of the LightHouse Panel

Lighthouse is an open source automated detection tool designed to improve the quality of web applications. Once you provide Lighthouse with a site to review, it will run a series of tests against that page and generate a report on the performance of the page, including performance checks, accessibility checks, SEO checks, PWA compliance checks, and other best practice compliance checks. The test report not only analyzes the status of the above areas, but also provides some optimization guidelines for developers to quickly identify potential performance bottlenecks and implement optimization improvements.

Features of LightHouse:

  • The scoring report is comprehensive and authoritative.
  • Provide solutions;
  • Major performance issues found.

LightHouse’s downsides:

  • The testing environment is relatively single, and the environment of user groups is different.
  • There are fluctuations, and there are differences in visitor groups at different moments. Data can only reflect the effect of the current moment.

Lighthouse can be used in three ways: the Chrome extension, the Chrome Developer Tools Panel, and the Node.js command line.

This section focuses on its use in the Chrome control panel. In the new version of Chrome, LightHouse is integrated into the developer tools, open the console, and switch to the LightHouse panel, as shown below:

9.2 Test Score

Click the Generate Report button in the middle to start the automatic analysis. LightHouse automatically generates performance optimization reports for us, as shown below:

You can see that the report details the scores for each situation, From left to right, they are Performance, Accessibility, Best Practise, SEO and Progressive Web apps. Click on each of these items to see the specific optimization suggestions given.

9.3 Page Performance

For this test result, there are six performance metrics, as shown in the figure:

Performance evaluation mainly includes six indicators:

  1. First Contentful Paint (FCP, First Contentful Paint) : Used to record the time when a page First draws text, images, non-blank Canvas, or SVG.
  2. Maximum Contentful Paint (LCP, Largest Contentful Paint) : This is used to record the maximum drawing time of a window element. This time will change with the page rendering, as the maximum element on the page may change during the rendering process, and it will stop recording after the user’s first interaction.
  1. Speed Index: refers to how fast a web page displays content, the standard time is 4s.
  2. Total Blocking Time (TBT) : A user experience metric that represents when a page is actually available. After all, it’s not enough to render content fast enough to respond quickly to user interactions.
  1. TTI (Time to Interactive) : This indicator does not refer to the earliest Interactive Time, but the fluent interaction Time. The specific value is the Time after FMP, 5 seconds after no long task (task more than 50ms)
  2. Cumulative Layout Shift (CLS) : The Cumulative Layout Shift records the unexpected fluctuation of the displacement on the page.

As a result of the evaluation, LightHouse provides some recommendations for optimization, as shown below:

As you can see, there are four optimization recommendations: remove unused JS files, remove resources that block rendering, remove unused CSS files, and pre-connect to the requested source. Click on each suggestion to see detailed instructions.

9.4 Accessibility

This part of the website accessibility audit items, in the website optimization can refer to improve, but not necessarily comply with, as shown below:

In the above results, there are some accessibility issues that we can make changes to, such as:

  • Without an accessible name for the button, users who rely on screen readers cannot use it;
  • The Alt attribute is not used in the image. If the image resource request fails, the Alt attribute can let the user know the information about the image.

9.5 Best Practices

The review of this part of the content belongs to the best practices of website development, and developers are advised to follow them as much as possible. The review items of the best practices are shown below:

From the figure above, you can see suggestions for best practices:

  • Cross-domain links are not secure. Add rel=”noopener” or REL =” Noreferrer “to external links to improve performance and prevent security vulnerabilities.
  • Image aspect ratio is not correct image, it tells us that the image display size should conform to the natural aspect ratio;

9.6 Search Engine Optimization

For this part of the content, if it meets the requirements of the audit item, it will greatly improve the probability of the site being searched by the search engine. Optimization suggestions are shown in the figure below:

From the figure above, we can see two problems:

  • If the search engine does not have the permission to crawl the web on the page, you cannot include your page in the search results, anti-crawl is set here;
  • Image tag does not set Alt attribute, hope to add, increase the probability of the image is indexed.

Based on the evaluation results and optimization suggestions given in each section, the developer can optimize the site page accordingly.

10. Integrate Vue and React in DevTools

You can add the React and Vue plugins to the extension. Once installed, the ICONS will appear in the upper right corner of the browser. If the site is developed using Vue, the Vue icon will light up, as will React.

When we open the Vue official website, we can see that the Vue icon is lit up, indicating that the website is developed using Vue:

Once added, you can see options for Vue in DevTools, where you can view components, data, Vuex, and more:

Finally:

Chrome DevTools developer tools are essential for front-end development. Of course, learning these theoretical basis is far from enough, we also need to use different tools to debug according to the actual development needs, use more natural know how to use.

“To do a good job, you must sharpen your tools.”