Browser DevTools Secrets: Start-up, Network and Performance

Over the past decade, browser developer tools (DevTools) have evolved from a basic JavaScript console to a fully integrated development and debugging environment. Any aspect of a web application can now be modified and examined, but few people will delve into its advanced features. This article will explore a range of features that you may or have not considered yet. Most of the time, we will cover Chrome's DevTools, but where applicable, Firefox's alternatives will also be shown.

Key Points

• Browser Developer Tools (DevTools) have evolved into a fully integrated development and debugging environment that allows users to modify and inspect any aspect of a web application. Keyboard shortcuts, docking options, settings and auto-start features can improve developers' efficiency.
• DevTools provides many useful web development features including color contrast accessibility checking, screen capture, finding unused CSS and JavaScript, disable network caching, limit network speed, filter network responses, block network requests, recreate Ajax requests, enable offline file overlay, check storage, and more.
• Chrome's DevTools provides performance monitors and audit panels for real-time analysis of CPU usage, JavaScript heap size, DOM nodes, event listeners, style recalculation, and more. The audit panel also analyzes performance, accessibility, best practices, and SEO in mobile and desktop views.

Keyboard shortcuts

Using the menu to start DevTools will waste valuable time! Please try one of the following options:

• F12
• ctrl shift i
• cmd option j
• or right-click any element on the page and select Check or Check Elements.

Chrome provides useful keyboard shortcut help. In DevTools, press F1 or select Settings from the three dot menus in the upper right corner. Then select "Shortcut Key" from the menu:

Dolocation

The DevTools panel can be docked on the left, right, or bottom of the browser window. If you need more space, you can undock it to a separate window. Docking options are available in the main three dot menu in Chrome:

Dooring options in Firefox:

Settings

The DevTool settings can be accessed through the same menu or by pressing F1. This allows you to set the display options for tools, themes, tab sizes, color units, and more.

Automatically start DevTools

When working on web applications, it may be more practical to create a dedicated desktop shortcut to start the browser, open the URL, and start DevTools in one step. For Chrome, use the following Chrome command line options to create a desktop icon:

<code>chrome --auto-open-devtools-for-tabs https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

where https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5 is your development URL. Similar operations for Firefox:

<code>firefox -devtools -url https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

(The executable file name may vary from system to system.)

Invisible mode is used during development

Invisible/Private mode does not retain data such as cookies and localStorage after closing the browser. This mode is ideal for testing progressive web applications (PWAs) and login systems. You can manually start the browser and enter incognito mode, or you can do it by adding --incognito to Chrome's command line or -private to Firefox's command line.

Command Panel

Chrome DevTools provides an editor-like command panel. Press ctrl shift p:

It provides quick access to most features and source files (press backspace to delete >).

Go to console

The console is very useful no matter which DevTool panel you use. Press Esc to display and hide the console window in the bottom panel.

Find page color

When you click on any CSS color attribute, most browsers display a color selector. Chrome also displays the colors used in the page at the bottom of the panel:

This panel can be clicked to display more colors.

Color contrast assist function

The color selector also displays a contrast ratio that indicates the visual difference between the foreground text and the background color. Click the ratio to see how it rated with AA and AAA Accessibility Standards that ensure most people can read the text:

Any color on the color bar that is below this line will be recommended by AA contrast.

Capture screenshot

From Chrome's command panel (ctrl shift p), type "screenshot" and select an option to capture the current viewport, the entire page, or the currently active element. The file will be saved to the download folder. (Chrome 74 also allows area capture.) Firefox provides a Screenshot system that is accessible from most menus. Additionally, you can right-click any element in the DOM view and select Screenshot Node.

Find unused CSS and JavaScript

Chrome's new coverage panel allows you to quickly find unused code. Select "Coverage" from the DevTools More Tools submenu, then click the Record button and browse in the application. Then click any file to open its source code:

Unused code is highlighted in red in line number slot. Note that Chrome doesn't seem to remember the used/unused code when you navigate to a new page, but I expect this to be available in a future release.

Disable network cache

Select Disable cache in the Network panel to load all files from the network. This provides a better evaluation of first page loading.

Limit network speed

Similarly, it makes little sense to test a 1gbps connected system when most users access it over 3G. The Network panel provides an Online drop-down menu in Chrome and a Limit drop-down menu in Firefox, allowing you to simulate specific network speeds.

Chrome also provides a feature to add your own restriction profile.

Reorder network responses

By default, the Network panel displays tables for requests and responses in order of download. However, you can click on any table title to reorder by name, status, type, size, response time, etc.

Filter incomplete requests

To find any incomplete or unresponsive HTTP requests, visit the Network panel and enter is:running in the Filter box.

Filter by response size

In the Network panel, enter larger-than:S in the Filter box, where S is in bytes (1000000), kilobytes (1000k), or megabytes (1M). size. Responses greater than the selected size will be displayed. To find a smaller response, use -larger-than:S.

Filter third-party content

In the Network panel, enter -domain:*.yourdomain in the Filter box, where yourdomain is your primary URL, such as sitepoint.com. The remaining responses show third-party requests for CDNs, trackers, social media buttons, and more. The number of requests and payload sizes are displayed in the status bar below the table.

Block network requests

During testing, trackers, analytics, social media widgets, or any other requests can be blocked. Right-click any HTTP request in Chrome's Network panel and select Block Request URL to block the URL, or select Block Request Domain to block any requests to the domain. The Request Blocking panel opens where you can add or delete additional URLs or domains:

Recreate Ajax request

The Ajax XMLHttpRequest operation can be checked by right-clicking an entry on the Network table and selecting a copy option such as cURL, fetch, or PowerShell. This creates a command with the same header, user agent, cookies, and referrer sources that can be pasted into the editor or terminal.

Enable offline file overwrite

Chrome allows saving any file to your system so that the browser can get the file from the device rather than the network. For example, if you want to load or edit assets that are typically accessed from a CDN, this can allow offline development. Open the Overlay panel in Source, click Select Overlay Folder, and select a suitable folder.

Now, right-click any resource in the Network panel and select Save for overwriting. Any subsequent page reload will access the file from the local system instead of the web. The saved files can also be modified.

Check the storage

The Applications panel in Chrome and the Storage panel in Firefox allow you to check, modify, and delete values ​​saved in cookies, cache storage, localStorage, sessionStorage, IndexedDB, and Web SQL (if supported). Chrome's Clear Storage panel also clears all values ​​of the domain, which is useful when developing progressive web applications.

Performance Monitor

Chrome's new performance monitor is accessible from the DevTools More Tools menu and provides analysis of CPU usage, JavaScript heap size, DOM nodes, event listeners, style recalculation, and more. Unlike the main performance panel, the charts are updated in real time - no need to record the configuration file first.

Audit

Chrome’s audit panel was originally designed to evaluate the capabilities of progressive web applications, but the tool has evolved into a common tool for analyzing performance, accessibility, best practices, and SEO in mobile and desktop views.

It won't find all the problems, you may not agree with some points, but it is a useful way to quickly assess potential problems. Hopefully you have discovered something new. More DevTool secrets are coming soon...

(The FAQ part in the original text should be included here. Due to the length of the article, it will be omitted here. The FAQ part can be regenerated as needed)

The above is the detailed content of Browser DevTools Secrets: Start-up, Network and Performance. For more information, please follow other related articles on the PHP Chinese website!