Chrome Tools Portal Chrome Tools Fancy Gameplay (a) byte push, join us, do something challenging
This episode is mainly about two guests “, respectively Source group and Network brothers. Let’s see 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 codeAn 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 codeOverrides
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:
-
shortcuts
-
Click the little arrow
- 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
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
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…
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)
-
Click Add breakpoint
-
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)
-
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:
-
Right-click to set the breakpoint element
-
Hover the mouse pointer over Break on
-
Select Subtree Modifications, Attribute Modifications, or Node removal
-
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)
-
Attributes Modifications: Trigger breakpoints when properties are added or removed from the currently selected node, or when the property value changes
-
Node Removal: Triggered when a currently selected Node is removed
-
Global Breakpoints
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
Elements are found by string, selector, and XPath
CSS style search
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
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
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
1. Functional button area
Red circle 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
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 |
-
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…
5. Summary of all requests
Network conditions
