The premise

The default reader already has a basic knowledge of Chrome DevTools, which is the basic usage of every panel in the Chrome Developer Tools.

If you don’t already know, please help yourself to the basic introduction written by a colleague.

Of course, you can choose to read on.

shortcuts

Common shortcuts for several panels are as follows:

  1. Elements Panel Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).

  2. Console Panel

    Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS)

  3. Open the panel where you last stayed

    Command+Option+I (Mac) or Control+Shift+I(Windows, Linux, Chrome OS)

  4. Call the command menu bar

    Command+Shift+P(Mac) or Control+Shift+P(Windows, Linux, Chrome OS)

Check out all of the remaining DevTools shortcuts for yourself.

Elements Panel

  1. How do I quickly locate an element and make it appear in a window?

    You can search Command+F in the panel, the main panel of elements will evoke a search bar, you can enter CSS selector in the search bar to filter, after finding the corresponding element, right click Scroll to View, you can view the element in the window.

  2. How do I locate events bound to elements?

    After locating the target element, switch to Event Listeners in the Elements panel. Click on the Event to view Function configuration, select Handler, and right-click Show Function Definition. DevTools automatically redirects the Source panel to where the function is declared.

  3. How do I listen for a DOM node change that is controlled by which part of the JavaScript script?

    Select the target element node in the Elements Panel and right-click to see Break on to see the different listening methods

    • Subtree modifications

      Changes to the children of the selected node (addition, removal, content change) are triggered, but changes to the attributes of the children and any changes to the selected node are not.

    • Atrribute modifications

      Attribute changes (add, remove, attribute value changes) of selected nodes are triggered.

    • node removal

      Triggered when the selected node is removed.

  4. How about page accessibility? In terms of whether the element is properly labeled.

Click the Accessibility Tab on the right side of the Elements Panel. You can view the entire page Accessibility Tree, which is a subset of the DOM Tree. The corresponding node is the display content relevant and useful to screen readers.

You can view the ARIA Attributes for each node, which ensure how screen readers display the page content in an appropriate manner from the Accessibility Tree.

Why improve page accessibility?

Web Accessibility is a way to make everyone including the disabled to have access to the web and internet in whole.

Web accessibility means that people with disabilities can use the Web

from Why Web Accessibility Is Important and How You Can Accomplish It

So that everyone can get access to the website.

How to check your website accessibility?

  1. You can install Axe to take a look at it, and it will give you a solution and help you quickly locate the problem Elements in the Elements Panel

  2. Use the Audits Panel to just check the Accessibility options, then audit them, the reports are given and then use experience to fix them.

  3. How do I view CSS and JavaScript usage on a page?

    Explain “usage”, ideally every line of CSS and JavaScript used in a page is used by the page, but what if we forgot to weed out useless code along the way?

    To view the Coverage panel, use the commands in the shortcut keys to call the command menu bar and type “Show Coverage”. Click the refresh button in the panel to get the CSS and JavaScript usage on the page. Note: The usage represented here is page loading usage. For a more complete view of usage, click the Recording button.

    Double-clicking on any CSS or JavaScript script will automatically adjust to the Sources Panel, which is automatically formatted, and a red and green mark will appear on the left side of the Panel, the former indicating that the line is not used in the page, and the latter indicating that the line is used in the page.

  4. How do I expand all element nodes?

    If you select the parent node and right-click on “Expand Recurshrink”, Elements Panel will Expand all child nodes for easy navigation. Of course, the corresponding shortcut is Option + Click (Mac) or Control + Alt + Click (Windows, Linux, Chrome OS).

Console Panel

First of all, the console panel is where most of the work is to see more of the code in the diary. Console has a lot of nice apis that can help you view logs in different ways.

For those interested, check out the article Getting Creative with the Console API! Chinese translation

But I love time/ Timelog /timeEnd apis for quick and crude performance testing of your code.

  1. How do I filter logs with custom conditions from different types of logs?

    Projects with legacy issues will see logs left everywhere (in code/browser) in the Console panel. To Filter out the logs you want to see, you can use the Filter in the Console Panel.

    Filter will have some intelligent prompt keywords:

    • Url: View the log of the corresponding script or in a different url or plug-in.
    • Source: Can be filtered based on the source from which the log is generated.
    • Context: Can vary depending on the context, because if inline<iframe>“Generates a new context.

    Filter also supports regular expression filtering. If you want to support multiple criteria, separate them with Spaces.

    Of course, if you’re just looking at a specific log, you can also use search, and the shortcuts are exactly what you’d expect.

  2. How do I listen for element events in a Console Panel?

    We can use $0-$4 to represent the last four Elements we previously selected in the Elements Panel. When we then want to listen for events for the corresponding element, we can use the tools API provided by the console — monitorEvents(

    ,

    ). The console then prints the corresponding Event object when the listener triggers the corresponding Event.

  3. How to call up another Console Panel in another Panel?

    In Chrome DevTool, there is a drawer for Tips, and a Console Panel that can be activated by pressing ESC while the developer tool is open.

  4. How do I copy variables to a stickboard?

    The Console API also provides a copy(anything), because every variable we right-click will have a “Store as global variable” function stored in the Console Panel. You can then use this method to copy the corresponding variable into the paste board. Because many times the same interface returns different data in different scenarios, we first need a copy of the original data, then use this method to generate a mock data, and then debug it. Of course, sometimes we just want to get all the keys or values, we can use keys(object) or values(object).

  5. How do I use Console to associate DOM nodes or corresponding functions in an Element Panel?

    The Console tool API also provides a inspect(

    /function). Enter the corresponding type and DevTool will automatically navigate you to the corresponding position in the corresponding panel.

    If you want to locate a DOM node, use $or? Use, which are both document. QuerySelector () and document querySelectorAll ().

    If they are location functions, getEventListeners(

    ) can be used to obtain the corresponding functions and then find the corresponding function locations.

    Of course, if you accidentally hit return and don’t want to enter a variable name as long as “Store as global variable”, you can use $_ in the utility API instead.

    Of course, you can also locate the corresponding function in this way.

How you would like to view more of the tools API provided by the console, please check it out.

Network Panel

In fact, this is the most commonly used Panel in work. We often look at various data here.

  1. How do I view dependencies between requests?

    The answer is already right in front of us, but we rarely pay attention to it. There is a column named Initiator in the Network, and the information displayed in this column is the interdependent relationship between requests.

    Of course, you can also hold down shfit and hover over the Name column of each request. You can see that some requests are highlighted in green and some in red. Green is the initiator of the request, and red is the subsequent request attached to the request.

  2. How do you filter out requests that meet your preconceived expectations?

    In fact, we all know that every Panel has a Filter output box for this interaction, but we can only write regular match matches, but often do not try to some developer tools according to all requests to categorize a lot of special fields for us to use.

    For example, in the recent optimization of the system, there is a system in the uncompressed resources.

    Of course, we can choose to look at the Size column of all requests one by one. The Size shown above after compression is shown in gray, and the Size before compression is shown below. If the two numbers are consistent, the positive resource is not compressed.

    We know that if a resource is compressed, there will be a Content-Encoding field in the response header to the request. Can we then search based on the response header of each request? The answer is obvious. We can Filter the response headers containing content-encoding according to the criteria such as has-response-header: content-encoding in Filter, and then invert it to satisfy the requirement.

    If you know more about the filters Chrome has sorted out for us, check out our website.

  3. How do I shield temporarily useless requests?

    In a one-to-many situation during development, but going live at the same time, it’s easy for the front end to see a lot of interference requests during development, such as 404’s.

    At this point you can select the corresponding request, right-click “Block Request URL”, and refresh the page to continue development in the current environment.

    However, please remember to enable the previously shielded interface when switching the environment. Use the shortcut to invoke the command line menu bar and type “Show Request Blocking” to access the current panel.

  4. How to evaluate the interface performance?

    In general, the front-end evaluation of the performance of an interface is more judged by the return time of the interface, and the problem is how to check the corresponding time of the interface?

    In the “Waterfall” column of the Network Panel, you can view when each interface starts requests, finishes requests, and the information on the way down, as shown below:

    We can see that the browser divides the entire interface from request to response into several stages. Understanding what each interface means will help us better evaluate the performance of the interface.

    • Queueing

      The browser stores all requests in the send request queue, and the request occurs as follows:

      • The request sent by the former has a higher priority
      • Six TCP links have been established for the current origin, limiting subsequent requests (only for HTTP/1.0 and HTTP/1.1)
      • The browser allocates space from the disk cache

    • Stalled

      The request may be shelved for any of the reasons described in Queueing

    • DNS Lookup

      The browser is parsing the requested IP address

    • Proxy negotitation

      The browser is negotiating the request with the proxy server

    • Request sent

      Sending a request

    • ServiceWorker Preparation

      The browser is starting the service worker

    • Request to ServiceWorker

      Requests are being sent to the service worker

    • Waiting (TTFB)

      The browser is waiting for the first byte of the response

      TTFB stands for Time To First Byte

      This timing includes 1 round trip of latency and the time the server took to prepare the response.

      This time includes the delay of 1 round trip and the time it takes the server to prepare the response

    • Content Download

      The browser is receiving the response

    • Receiving Push

      The browser receives the data in this response, which is pushed from the HTTP/2 server

    • Reading Push

      The browser is reading previously received local data

    Timing Timing Timing Timing Timing Timing Timing Timing Timing Timing Timing Timing Timing Timing Timing Timing Timing

    Of course you want to look at some examples and analyze the performance of the request you can look at, and the corresponding phase of the problem solving ideas, please look at.

Sources Panel

Testing engineer debug ability.

  1. How to breakpoint arbitrary requests?

    In the image above, we can see an “XHR/ Fetch Breakpoints” feature bar. This is where we can add requests that we want to interrupt, and filter requests based on whether or not the request URL contains a specific string.

  2. How to breakpoint arbitrary code arbitrary environment error?

    Because the main technology stack of our company is Vue, and some components in the project we maintain are mainly written as Vue. Extend, which leads to subsequent exceptions, but the console will not output, so part of the difficulty of locating problems is added.

    The Chrome DevTool provides a useful “Pause on Exceptions” feature, as long as this feature is enabled. Any error occurs in the code, it will pause to the corresponding error, and will display the reason of the error in the corresponding output column, to help us reason.

    A function for learning other Debug tricks.

  3. How to do TimeTravel in debugger?

    During breakpoints, we go through the code segment at the corresponding location stage by stage. Occasionally, when we enter the code section of the next stage, we suddenly realize that there are some problems in the code section of the last stage. At this time, we often go through the whole process silently, feeling that DevTool does not provide a good function for TimeTravel.

    Until I found the Call Stack feature bar, which displays the code snippet execution context. DevTool provides a way to go back to the previous function, which is called “Restart Frame.”

  4. How to be a good question maker?

    I have always been curious about the neat and complete Call Stack when others fill in the issue. Is it possible to print console.trace() in the underlying function? It’s so annoying to think about it, printing it every time.

    Imagine that Call Stack should also provide this functionality, right click, and sure enough you see “Copy Stack Trace”, click Copy to paste board immediately.

  5. How to reduce the interference of the underlying dependency library?

    There is no break point, hit the bottom of the dependency on the dependency library. It’s very unlikely that the problem will occur in the underlying dependency library, and we want to block the subsequent breakpoints in the underlying dependency library today, right?

    We can find the corresponding underlying dependency Script file, and right click in the content area to bring up a “Blackbox Script” function, and from this breakpoint will not enter the underlying dependency Script. Something like this:

  6. How do you determine how much a page depends on JavaScript?

    If your page does not have JavaScript, you can call the command line and type “Disable JavaScript” to close the page, execute the JavaScript, and refresh the page to see. To restore, simply type Enable JavaScript.