In this series of articles, we’ll explore a range of features you may or may not have considered. Chrome’s DevTools are described in most cases but alternative options are shown for Firefox where available.
Using a menu to launch DevTools wastes valuable seconds! Try one of these options instead:
ctrl + shift + i
cmd + option + j
- or right-click any element on the page and choose Inspect or Inspect Element.
Chrome provides useful keyboard shortcut assistance. From DevTools, press
F1 or select Settings from the three-dot menu at the top-right. Then choose Shortcuts from the menu:
The DevTools pane can be docked to the left, right or bottom of the browser window. If you require more room, undock it to a separate window. Docking options are found in the main three-dot menu in Chrome:
DevTool settings can be accessed from the same menu or by pressing
F1. This allows you to set options such as the tools shown, theme, tab sizes, color units and more.
When working on a web application, it may be practical to create a dedicated desktop shortcut to launch your browser, open the URL and launch DevTools in a single step. For Chrome, create a desktop icon with the following Chrome command-line options:
chrome --auto-open-devtools-for-tabs http://localhost:8000/
http://localhost:8000/ is your development URL.
Similarly for Firefox:
firefox -devtools -url http://localhost:8000/
(The executable name may differ across systems.)
Go Incognito During Development
Incognito/private mode does not retain data such as cookies and localStorage after the browser is closed. The mode is ideal for testing Progressive Web Apps (PWAs) and log-in systems.
You can start browsers in incognito mode manually or by adding
--incognito to Chrome or
-private to Firefox’s command line.
Chrome DevTools offers an editor-like command palette. Press
ctrl + shift + p:
It provides quick access to most functions and source files (hit backspace to remove the
Escape to the Console
The console is useful regardless of which DevTool panel you’re using. Hit
Esc to show and hide a console window in the bottom pane.
Find Page Colors
Most browsers show a color picker when you click any CSS color property. Chrome also shows the colors used in the page at the bottom of the panel:
The panel can be clicked to show further colors.
Color Contrast Accessibility
The color picker also shows the contrast ratio which indicates the visual difference between the foreground text and background color. Click the ratio to view how this rates against AA and AAA accessibility standards which ensure text can be read by most people:
Any color below the line on the color swash will pass AA contrast recommendations.
From Chrome’s command palette (
ctrl + shift + p), type ‘screenshot’ then choose an option to capture the current viewport, the whole page, or the currently-active element. The file will be saved to the download folder. (Chrome 74+ also permits area capture.)
Firefox provides the Take a screenshot system which is available from most menus. In addition, you can right-click any element in the DOM view and select Screenshot Node.
Chrome’s new Coverage panel allows you to quickly locate unused code. Select Coverage from the DevTools More tools sub-menu then hit the record button and browse around your application. Then click any file to open its source:
Unused code is highlighted in red in the line number gutter.
Note that Chrome does not appear to remember used/unused code when you navigate to a new page, but I expect this will be provided in a future release.
Disable the Network Cache
Check Disable cache in the Network panel to load all files from the network. This provides a better assessment of first-time page loads.
Throttle Network Speed
Similarly, there’s little point testing your system a 1gbps connection when most users access over 3G. The Network panel provides an Online drop-down in Chrome and a Throttling drop-down in Firefox which allows you to emulate specific network speeds.
Chrome also provides a facility to add your own throttling profiles.
Reorder Network Responses
By default, the Network panel shows a table of requests and responses in download order. However, any table heading can be clicked to re-order by name, status, type, size, response time, etc.
Filter Incomplete Requests
To discover any incomplete or unresponsive HTTP requests, access the Network panel and enter
is:running in the Filter box.
Filter by Response Size
From the Network panel, enter
larger-than:S in the Filter box, where
S is a size in bytes (
1000000), kilobytes (
1000k), or megabytes (
1M). Responses greater than the chosen size are shown.
To find responses which are smaller, use
Filter Third-Party Content
From the Network panel, enter
-domain:*.yourdomain in the Filter box, where
yourdomain is your primary URL, e.g.
sitepoint.com. The remaining responses show third-party requests to CDNs, trackers, social media buttons, etc. The number of requests and payload sizes is shown in the status bar below the table.
Block Network Requests
It is possible to block trackers, analytics, social media widgets, or any other requests during testing.
Right-click any HTTP request in Chrome’s Network panel and choose Block request URL to block that URL or Block request domain to block any request to that domain. The Request blocking panel will open where you can add or remove further URLs or domains:
Recreate Ajax Requests
Ajax XMLHttpRequest operations can be examined by right-clicking their entry on the Network table, then selecting a copy option such as cURL, fetch, or PowerShell. This creates a command with identical headers, user agent, cookies, and referrers which can be pasted into an editor or terminal.
Enable Offline File Overrides
Chrome allows any file to be saved to your system so the browser will fetch it from the device rather than the network. This could permit offline development if, for example, you wanted to load or edit assets normally accessed from a CDN.
Open the Overrides panel within Sources, click + Select folder for overrides, and select an appropriate folder.
Now right-click any resource in the Network panel and select Save for overrides. Any subsequent page reload will access the file from your local system rather than the web. The saved file can also be modified.
The Application panel in Chrome and the Storage panel in Firefox allow you to examine, modify and delete values held in cookies, cache storage, localStorage, sessionStorage, IndexedDB, and Web SQL (where supported).
Chrome’s Clear storage panel can also wipe all values for a domain which can be useful when developing a Progressive Web App.
Chrome’s Audits panel was originally designed to assess Progressive Web App functionality but the tool has evolved into a general purpose tool to analyse performance, accessibility, best practices, and SEO in both mobile and desktop view.
It won’t catch every problem and you may disagree with some points, but it’s a useful way to make a quick assessment of potential issues.
I hope you discovered something new. More DevTool secrets are coming soon…
Source link https://www.sitepoint.com/browser-devtools-secrets-start-up-network-and-performance/