Google Chrome is now the most popular web browser used by web developers. With a six-week release cycle and ever-expanding powerful development features, Chrome has become a must-master tool. Most front-end developers are probably familiar with many of Chrome's features, such as using the console and debugger to edit CSS online. In this article, we’ll share 15 cool tips that will allow you to improve your workflow. After reading these techniques, you will be surprised and excited to find out how much they look like Sublime Text.

1 Description

This article conducts research and analysis on common functions of Chrome DevTools. Describes the functions, application scenarios and detailed operations that each function point can implement.

2 Elements

2.1 Function

Check and update the HTML and CSS# of the page in real time

• Inspect and live edit any element in the DOM tree in the Elements panel.

• View and change the CSS rules applied to any selected element in the Styles pane.

• View and modify the box model of the selected element in the Computed pane.

2.2 Application scenarios

• Editing DOM nodes during development

• DebuggingStyle of DOM nodes

• Check and edit box model parameters during debugging

2.3 Operation

• EditDOM node

• ##　

  Open control Desk, select the DOM node that needs to be modified, double-click the selected element, and then modify it.

• Edit style

• Open the console and select For the DOM node that needs to be modified, edit the style attribute name and value in real time in the Styles pane. All styles can be modified except the gray ones (same as the User Agent stylesheet).

To edit a name or value, click it, make the changes, and press Tab or Enter to save the changes. By default, your CSS modifications are not permanent and will be lost when the page is reloaded.

• Inspect and edit box model parameters

• Use the Computed pane to inspect and edit the box of the current element model parameters. All values ​​in the box model can be modified by clicking on them.

3 Console

3.1 Function

• Print log

• Execute test code

• Measurement and statistics execution

• Exception and error handling

3.2 Application scenario

• In the output page code Logs that need to be output

• You can test the code in the browser console

• Check the execution efficiency of the code

• Exception and error information in the output code

##3.3 Operation

3.3.1 Common API:

console.log() Output information
console.info() Output information
console.warn() Output warning information
console.error() Output error information
console.group() Output a group of information, It needs to be used with console.groupEnd() to use
console.groupEnd() to output a set of information, and it needs to be used with console.gruop() to use
console.time()
• To output the time of code execution, it needs to be matched with

  console.timeEnd() Use

console.timeEnd() To output the time of code execution, it needs to be matched with console.time() use

4 Network

4.1 Function

Test network performance
Analyze network requests

4.2 Application scenario

4.3 Operation

4.3.1 Record network request

By default, as long as Chrome DevTools is turned on, DevTools will record all network requests, and the records will be displayed in the Network panel.

4.3.2 Stop recording network requests

• ClickStop recording network log red icon, when it turns gray, it means DevTools is no longer logging requests

• Shortcut keys: Under the Network panel, Command+E (Mac) or Ctrl +E(Windows,Linux)

##4.3.3 Clear network request

4.3.4 When loading across pages, keep network request records

• When the page is reloaded or the page jumps, the default situation Next, the network request record table under the Network panel is also refreshed. If you want to retain the network request data of the previous page, you can check Preserve log.

• A common application scenario: the login/registration API will be called when logging in/registering. The developer wants to check the situation returned by this interface, but the login/registration is successful. After that, it usually jumps to a new page, causing the request record of the Network panel to be refreshed and the return of the login/registration interface cannot be seen. At this time, if Preserve log is checked, no matter which page you jump to, you can view the status returned by the previous interface in the Network request record table.

4.3.5 Capture screenshot when page loads

• Capture screen Screenshots can analyze what the user sees on the web page at different times during the page loading process.

• Click the Capture screenshots icon to turn on the capture function. When the icon turns blue, it means it is turned on. Reload the page to see screenshots at different times.

After capturing the screenshot, you can do the following:

• Hover the mouse When a picture is displayed, a yellow border will appear around the picture. At the same time, there will also be a yellow vertical line in the Overview and Waterfall windows respectively. This yellow vertical line indicates the capture time of this picture.

Click on a picture to filter out all requests that occurred after this picture was captured
Double-click the picture to enlarge the picture

4.3.6 Disable browser cache

During the

http request process, some resources will be cached in the browser after the page is loaded for the first time, that is, those resources with status code 304. In order to simulate as accurately as possible the situation when a user loads our webpage for the first time, the browser cache needs to be disabled. In this way, each request is transmitted from the server, which more accurately reflects the actual situation of the initial loading of the webpage

4.3.7 Simulate network speed conditions

You can select different network conditions in the

Network Throttling drop-down box Carry out simulation, such as 2G, 3G, 4G, WiFi, etc.

In addition to selecting existing network options, you can also customize network speed-related conditions: open the

Network Throttling menu and select Custom > Add.

Another simulation situation is more special, that is, there is no network. Using

service workers, PWA (Progressive Web Apps) can still be used without a network. To simulate this kind of network-free environment, just check Offline.

Tips: Developers will see a warning icon on the left side of Network. This icon reminds developers that they are currently under simulated network conditions.

4.3.8 Manually clear browser cache and cookies

Right-click in the network request record table and selectClear Browser Cache or Clear Browser Cookies.

4.3.9 Filter by attributes

• Click the funnel icon to change its color to blue, and then you can filter the items in the network request table The data is further filtered.

• You can enter some strings, fields, sizes, status codes, media types, etc. in the input box.

4.3.10 Filter by type

Multiple selections are possible here: hold down the Command (Mac) key or Ctrl (Windows, Linux) key, and then click on different types. For example, click on JS and Img to filter out js files and images. Obviously, All does not coexist with other types. When selecting All, you cannot select a specific type.

4.3.11 View request record

• Name: the name of the file or the identifier of the resource

• Status: HTTP status code

• Type: MIME type of the requested resource

• Initiator: The following The object or handler can initiate a request

• Parse: Chrome's HTML parser

• Redirect: HTTP redirection

• Script: js function

• Other: Some other processing or operations, such as navigating to a page through a link, or entering an address in the browser's address bar and then Enter

• Size: response header size + response body size

• Time: total duration, from initiating the request to completing the resource download

• Waterfall: Visual display of different stages of each request activity

4.3.12 Headers: View Request headers, response headers and request parameters

Under the column Name, click on the URL of a request to view the details of the request and response.

• By default, request and response headers are displayed in alphabetical order http header names. If you want to display them in the order actually received, click on View source in the picture, otherwise click view parsed in the picture above.

• You can also view the requested parameters in the Headers tab, as shown in the orange box in the figure below. There are also view source and view parsed, as well as parameter encoding format (view URL encoded) and decoding format (view decoded).

Preview: View the preview of the response body

Response: View the response body

Cookies: View cookies

4.3.13 Timing: View the time corresponding to each stage of the request

• Queueing: The browser will queue the request under the following circumstances:

• There are higher priority requests

• There are already 6 TCP connections under this domain , reaching Chrome's maximum limit. This rule only applies to HTTP/1.0 and HTTP/1.1

##Stalled: Any factor in Queueing will cause the request to be delayed
Proxy negotiation: The time it takes for the browser to negotiate with the proxy server
DNS Lookup: The time it takes for the browser to perform a DNS lookup on the requested IP address Time
Initial conncection: The time consumed to initiate the connection
Request sent: The time consumed to send the request
Waiting (TTFB): The time the browser waits for a response, TTFB represents Time To First Byte
Content Download: The time it takes to download resources

4.3.14 View the initiating object and dependent object of the request

Press and hold

Shift key, and then hover the mouse over a request. The initiating object of the request is marked in green, and the dependent object of the request is marked in red.

4.3.15 View loading events

DevTools displays the corresponding time when DOMContentLoaded and load events occur in multiple places. The DOMContentLoaded event corresponds to the purple line, and the load event corresponds to the red line

4.3.16 View the total number and total size of requests

The data here represents the data corresponding to the requests recorded after DevTools is opened. If some requests have occurred before DevTools is opened, the data of these requests are not counted here.

5 Sources

5.1 Function

• Page resource search

• Implement code editing synchronization to local function

• Debuggingjavascript

5.2 Application Scenario

• Find the list of resources requested by the page

• Development Or during the debugging process, you can automatically synchronize the modified code on the browser to the local file

• During the development process, you can use console.log() to find it Or correct errors in the code, but using "breakpoints" can greatly improve the speed and is more effective.

5.3 Operation

• Real-time editing code function

This function can be modified and saved to a local file. Right-click "Add folder to workspace" in the sources workgroup to add the local folder to the workgroup, and open the folder you want in the added folder. The file you want to edit, or right-click on the file "Map to File System Resource...", or "Ctrl+o" to open the search panel and then open the file. After editing, press Ctrl+s to save, and it will also be modified in the local file.

• Debuggingjavascript (breakpoint)

Breakpoints allow you to pause executing code and examine the values ​​of all variables at the moment of pause.

Check and click Event Listener Breakpoints to expand this section. When the click check box is selected, an event-based breakpoint is set on all click events. When any DOM node is clicked, and that node has a click handler, Devtools automatically pauses on the first line of that node's click handler.

Note: This is just one of the many breakpoint types provided by DevTools. The type of breakpoint you should use depends on the type of problem you are trying to debug.

You can debug the code step by step by clicking

.

Single-step debugging code

Skip debugging code

The script continues execution until it reaches the line of code where you set a breakpoint.

6 Application

6.1 Function

Record all resource information loaded by the website , including stored data (Local Storage, Session Storage, IndexedDB, Web SQL, Cookies), cached data, fonts, pictures, scripts, style sheets, etc.

6.2 Application Scenario

• View the local Storage of the page.

• View the page's Session Storage

• ##View and delete the page's cookie

• View the resources of the page

• Clear all storage, database, cache and service worker threads.

6.3 Operation

6.3.1 View the local Storage of the page.

• Double-click a key or value to modify the corresponding value.

• Double-click a blank cell to add a new entry.

• Click the corresponding entry , and then press the Delete button to delete the entry. Wipe all local storage data from the Clear storage pane with just a click of a button.

• If you interact with the page in a way that allows you to create, delete, or modify entries, you won't see those changes update in real time. Click the refresh button to view your changes.

6.3.2 View the Session Storage of the page.

The Session Storage pane works the same as the Local Storage pane. See the Local Storage section above

6.3.3 Viewing and deleting cookies on a page

• View related to Cookies Details such as name, value, domain, size, etc.

• Delete a single cookie, cookies for selected domains, or all cookies for all domains.

• Use the Cookies pane to view and delete cookies. You cannot modify cookie values.
  

The following fields are provided for each Cookie:

Cookies can be deleted in several ways:

• Select the Cookie and press the Delete button to delete the corresponding cookie.

• Press the Clear button to delete all cookies in the specified group.

6.3.4 View the resources of the page

Use the Frames pane of the Application panel to organize the page by frame resource.

6.3.5 Clear all storage, database, cache and service worker threads.

Sometimes you just need to erase all data from a given source. The Clear Storage pane on the Application panel allows you to selectively log out service workers, storage, and caches. To clear data, simply enable the checkbox next to the component you want to erase and click Clear site data. This operation will clear all data from the sources listed under the Clear storage tag.

7 Security

7.1 Function

Debugging Page security issues, ensure that it has been properly implemented on the websiteHTTPS

7.2 Application scenarios

• #Usage

  Security Overview allows you to instantly see whether the current page is safe.

Check each origin to see connection and certificate details (secure origins) or to find out specifically which requests were unprotected (non-secure origins).

7.3 Operation

7.3.1 Use Security Overview to immediately check whether the current page is safe.

The secure page will pass the message

This page is secure (valid HTTPS).

Click

View certificate to view the server certificate of the main source .

Non-secure pages will pass the message

This page is not secure.The Security panel can distinguish between two types of non-secure pages. If the requested page is served over HTTP, the primary origin is marked as unsafe. As shown below

If the requested page is retrieved via HTTPS, but the page continues to use HTTP to retrieve content from another source, then the page will still be marked as unsafe. This is called a mixed content page. Mixed content pages are only partially protected because HTTP content can be picked up by sniffers and is vulnerable to man-in-the-middle attacks. As shown below

7.3.2 Check the source

Use the left panel to check each secure or non-secure source.

Click a secure source to view the connection and certificate details of the source.

If you click on a non-secure source, the Security panel provides a link to the Network panel's filtered view.

##8 Audits

8.1 Function

Diagnose the network utilization and web page performance of the current web page, and give some optimization suggestions. For example, list all unused

CSS files, etc.

8.2 Application Scenario

Optimize the web page according to the diagnosis recommendations

8.3 Operation

Select

Network Utilization, Web Page Performance, click the Run button, the network utilization and page performance optimization of the current page will be diagnosed, and corresponding optimization suggestions will be given.

The above is the detailed content of Example tutorials for common functions of Chrome DevTools. For more information, please follow other related articles on the PHP Chinese website!