Reprint please retain this part of the content, indicate the source. In addition, the front end team of Toutiao is looking forward to your joining us

Chrome Tools Fancy Gameplay (Part 1)

This episode is mainly about two groups of “guests”, respectively Source group and Network brothers. Let’s take a look at what they can bring to us respectively.

Source Displays site resources

Source is also a very common panel for source code viewing, breakpoint debugging, and so on during development

Left pane area

Page

Use the Page pane to view all the resources loaded on the Page, as shown below:

In the Page pane, you can see: Top is located at the top, indicating the main document frame. For example, window.top can be used in the project to obtain the next layer of the top window in the top-level window object hierarchy, as shown in the figure www.baidu.com, indicating the origin of resources. Further down are directories and resources loaded from the Origin. The result above, for example, resources. PNG is www.baidu.com/img/flexible/logo/pc/result.png click the pane of the full path to the file, can be in the editor pane view of content, can be a CSS, js, HTML code, It could be an image.

Filesystem

Can load the local workspace, now have a convenient quick IDEA scenarios, not very useful. Filesystem’s API, currently in draft form, can be looked at briefly: the asynchronous function opens the save file selector, which returns a FileSystemFileHandle once the file is selected. . Then use the FileSystemFileHandle createWritable () method to create a writable stream. The user-defined Blob is then written to the subsequently closed stream.

async function saveFile() {

  const newHandle = await window.showSaveFilePicker();

  const writableStream = await newHandle.createWritable();

  await writableStream.write('[console.info](http://console.info/)("test")');

  await writableStream.close();
}
Copy the code

An example of the write() method that can be passed in:

// Pass data directly
writableStream.write(data)

// Write data to the stream from the specified location
writableStream.write({ type: "write".position: position, data: data })

// Updates the current file cursor offset to the specified location
writableStream.write({ type: "seek".position: position })

// Adjust the size of file bytes
writableStream.write({ type: "truncate".size: size })
Copy the code

Overrides

The local file overwrites the online file, and needs to keep the same structure as the online folder. Sometimes the online compressed code is not viewable when used locally, and the refresh still works. The operation is similar to filesystem in that you select to add to a workspace folder. Later, the browser will read files locally first, but in mainstream development, this kind of debugging is rarely used.

Content scripts

Content Scripts is used to view the Scripts for Google extension tools, but here you can see that many of the JS are compressed, if you develop your own extension tools, you can use it to debug.

Snippets

We often type some code in the console to run directly, but the disadvantage is that it is easy to get lost, such as when refreshing the page, and newlines and other operations are not easy to write. So you can use snippet loggers, which is a nice little helper tool. With the New Snippet, create a snippet first

Then edit your own code snippet in the editor on the right

There are three ways to run it:

  1. shortcuts

  2. Click the little arrow

  1. Right-click the snippet run

Save as… You can also save it and copy it into it when you need to use it next time (no import operation yet).

Edit area to add breakpoints

Line breakpoint, add a breakpoint by clicking the line number to the left of the file

Or use conditional code line breakpoints by adding debugger commands to your code

g)

Blackbox Script bypasses files that do not require debugging

When debugging code, you will encounter code debuggers into third-party library files, bringing a lot of unnecessary debugging. Blackbox provides this convenience. When you add code to Blackbox that doesn’t need to be debugged, it automatically bypasses those files when debugging. Add the file to the Blackbox by right-clicking and selecting Blackbox script

After joining, there will be this prompt

You can view and configure more rules in Configure

Debug button details

  • pause script execution

Resume/pause script execution

  • step over next function call

Step by step. When a function is encountered, it does not enter the function, but executes the next step directly. That is, the function is executed as a statement without expanding inward.

  • step into next function call

Step into the execution context when a function is encountered.

  • step out of current function

Jump out of the current function and return the parent function

  • step

Single step

  • Deactive/Active breakpoints

Disable breakpoints/enable breakpoints

  • Pause on exceptions

Automatic breakpoint setting for exceptions

Tracking & Monitoring

Watch

With Watch, we don’t have to print objects repeatedly to the console. Click the + sign icon, fill in the name of the variable to be observed, and press Enter to add it to the list. To remove the variable, you only need to click the close button on the right side of the variable.

Call stack

When code is paused at a breakpoint, the call stack shows the code’s execution path to that breakpoint in reverse order. This helps you understand not only where the current execution is, but also where the code is going, which is an important factor in debugging. Developers.google.com/web/tools/c…

Anonymous functions make the call stack difficult to read, and they are named to improve readability. The following figure shows the difference between a call stack containing anonymous functions and a call stack containing named functions

The third-party code is set to Blackbox Scripts, which is also easy for users to view, as shown below

Scope

When the breakpoint is entered, we can view the properties by scope chain, and the pane displays all the properties defined at this point.

The level of a property can be defined in three ways: local Current local variable object Closure Closure in the current scope chain Global global scope object

Attribute color has dark color, dark can count, light can not count

Right-click properties to copy property paths, add them to watch, or save values globally for easy viewing

Breakpoints

Breakpoints can disable or remove line-of-code Breakpoints from a single location. Check the check box for each item to disable breakpoints. Right-click on the item to remove breakpoints. Right-click on any location to deactivate all breakpoints, disable all breakpoints, or remove all breakpoints.

XHR/fetch Breakpoints

If you want to break XHR/fetch when the request URL contains the specified string, you can use an XHR breakpoint (DevTools pauses at the XHR send() line)

  1. Click Add breakpoint

  2. Enter the string on which you want to set a breakpoint (Any if no value is entered, that is, breakpoints are applied on all requests)

  3. Press Enter to confirm

DOM Breakpoints

If you want to pause code that changes a DOM node or its children, you can use DOM change breakpoints to set a DOM change breakpoint:

  1. Right-click to set the breakpoint element

  2. Hover the mouse pointer over Break on

  3. Select Subtree Modifications, Attribute Modifications, or Node removal

    1. Subtree Modifications: Trigger when you remove or add a child of a currently selected node, or change the content of a child node (it does not trigger when a child node property changes or any changes are made to the currently selected node)

    2. Attributes Modifications: Trigger breakpoints when properties are added or removed from the currently selected node, or when the property value changes

    3. Node Removal: Triggered when a currently selected Node is removed

Global Breakpoints

You can see global event listening at this breakpoint. For example, let’s do an experiment like this:

Event Listener Breakpoints

The breakpoint of the event listener will list a series of events such as animation, Canvas, etc. If checked, the breakpoint can be triggered at the corresponding event

Quick source

Use Quick Source to quickly locate the mapping between style pane CSS (Sass) and source file CSS. It looks a bit like the lightweight Source panel, with fewer feature points, which can be easily seen in a GIF.

Search

When you see the TAB search, as the name implies, it is used to search, search scope is the source contains all text content, can use case locking, regular matching two ways. In the search list, the number on the right represents the number of matches in the file. Click one of them to expand and view details. But while we’re talking about search, let’s just list the other places we can search.

Elements are found by string, selector, and XPath

String: matches a string with a selector. It is written in the same way that we would normally use a selector, for example,.s_tab, input[name=”ie”] XPath: It’s complicated to write, and I don’t think that simple scenes can come as fast as selector, and complex scenes don’t usually look at 😅 like this, so let’s take a quick look at it for example: / / input [@ name = ‘ie’], / / div [@ class = ‘s_tab’] / div [1] / node () [last ()], / / div [@ class = ‘s_tab’] / div [1], a [position () < 4]

CSS style search

: HOV, Toggle Element State Makes it easy to debug an element’s special state.

CLS, Element classes, allows you to view the classes currently owned by an Element and add new classes, making it easy to debug during development

+, New Style Rule Adds a New Style Rule to the selected CSS file

Computed allows you to see the values of various style attributes for the current element, including the default style section Group. You can see that Chrome officially classifies styles into the following categories

Rendered Fonts, indicating the current element’s font, whether it is local, and the number of glyphs

Console output content search

It is mainly used to search for input/output

Source Edit area for single file search

Text replacement is supported, but here it is mainly used for searching

In.css, you can also use CMD + Shift + O to quickly locate a method in class.js.

Search for resources in Network

Search in Network has a large search range and also supports the two standard configurations of case restriction and re. As shown in the figure, it can locate each item in the headers request and search for the content in Response and return the line number.

Network

The Network panel is roughly divided into five areas, one by one according to the marks in the picture:

1. Functional button area

Red dot Recoding network log, enabled by default, Clear Clear log Filter Enable some filtering functions in area 2. Search Enable the Search bar Preserve log does not Clear logs when refreshing or switching to the page. Disable Cache Does not cache data Throttling network speed limit, you can select the desired network status, convenient debugging weak network conditions. It supports user customization

Import/export HAR file, can use the performance of the page to recommend a HAR HAR file analysis on-line analysis tools, are interested can go to play: toolbox.googleapps.com/apps/har_an… You are advised to enable Show Overview and Capture Screenshots

2. Filter resource types

The search box is relatively simple and supports fuzzy search based on the name of the request. Data URLs are small files embedded in the document, starting with data: in the request table, such as the more common SVG files. This group of file-filtering buttons is familiar, but won’t go into too much detail. Blocked cookies show only requests that are prohibited from carrying cookies

3. Screen shots and an overview timeline

The snapshot picture can be enlarged by double clicking, mouse hover up, you can see a yellow line, that is, the snapshot picture when the position. With this ability, you can tailor your optimizations to find out what causes your page to load slowly.

4. Network request record list

By default, the table is sorted chronologically, with the earliest resource at the top, and clicking on the resource’s name shows more information. Table introduction:

Name The file name Path Request path Url Full URL path
Method Request way Status Status code Protocol Request protocol
Scheme Request scheme (similar to Protocol) Domain The domain name Remote Address Remote ADDRESS (IP :port)
Type Types (XHR, script, text/ HTML……) Initiator Requester Cookies The number of fields that carry Cookies in the request
Set Cookies Number of cookie fields to set Size Requested data size Time The request time
Priority Request priority Connection ID Connection identifier

Resource details are introduced respectively:

Headers: HTTP Headers related to resources Preview: Preview JSON, images, and text resources Response: HTTP Response data Initiator: View the request method call stack and Initiator link Timing: details on the resource request life cycle

  • Queued Indicates the queue time

  • Started start time

  • There are three reasons for Queuing Queuing

    • Request with higher priority

    • Six TCP connections have been opened for this source, reaching the browser limit for HTTP / 1.0 and HTTP / 1.1 only

    • The browser is in the disk cache staging space

  • Duration of Stalled demand that may be halted for any reason in queue

  • DNS Lookup The browser is resolving the IP address of the request

  • The browser is establishing an initial connection, including TCP handshake/retry and negotiated SSL

  • Proxy Negotiation browser is negotiating requests with the Proxy server

  • Request sent Sends a Request

  • Waiting for the first byte to download (TTFB)

  • Content Download The browser receives response and downloads the Content

  • ServiceWorker Preparation The service worker is being started in the browser

  • Request to ServiceWorker The Request is being sent to the service worker

  • Receiving Push The browser is Receiving response data pushed through the HTTP / 2 server

  • The Reading Push browser is Reading previously received local data

  • Server Timing provides developers with detailed information about how to load specific page resources web.dev/custom-metr…

Cookies: Cookies carried by the current request

5. Summary of all requests

12, Processed/total number of Requests Transferred/processed/total download size Resources completed DOMContentLoaded The DOMContentLoaded event is fired after the initial HTML document has been fully loaded and parsed, without waiting for the stylesheet, image, and iframe to be fully loaded. It marks Load with a blue bar in the Overview window: the Load event is triggered only after all the resources on the page (images, audio, video, etc.) have been loaded. They are marked by red bars in the window

Network conditions

Caching, network throttling, and Network have the same functions. Therefore, this topic does not need to be introduced again. If the select automatically is disabled by the User Agent, a variety of devices can be simulated. Add some custom information artificially, can also be used to mark the current environment, such as the client webview, small program h5 page and so on.