Share & half translation, some content has been modified.

15 DevTool Secrets for JavaScript Developers

1. Stealth mode

When accessing the traceless window, it will be treated as a new user by the browser, which does not include cookie, localStorage, website cache and other data, so it is very suitable for testing system login, home screen time and so on.

Incognito mode does not mean true “traceless” Internet access, as IP addresses and “fingerprints” based on hardware information remain the same as usual.

2. Automatically start DevTools

In a local development environment, you often need to start Chrome, type localhost, and then open DevTools, which can be done with a single command.

Better to add a shortcut to your desktop, double-click on it:

  • --incognitoOpen stealth window
  • --auto-open-devtools-for-tabsOpen the DevTools
  • The url to open is placed last, for example:http://localhost:8000
$ # Consolidate into one command
$ chrome --incognito --auto-open-devtools-for-tabs http://localhost:8000
Copy the code

Some of Chrome’s other common startup options:

  • --disable-web-securityDisable the same-origin policy for cross-domain applications
  • --disable-extentionsdisable
  • --user-data-dirSpecify a directory for storing user data

3. On the command panel, you can quickly perform a function

Similar to VS Code’s command panel, all open with the shortcut Ctrl + Shift + P. Type show to open panel; Type disable to disable javascript and so on.

The palette [ˈ p æ goes t l]. The word “palette” translates to “color palette”

4. Code usage

Chrome’s Coverage panel can locate which JS and CSS are being used and which are not. Open the command palette and type the coverage shorthand to quickly open it, or in More Tools, then click the Reload icon under the palette to start counting.

Click any line of the JS file to go to the Sources panel to see the source code (source Map is recommended).

But it only shows the currently executed code, and most of the code that needs to be triggered by the user’s click (unused) is also counted, especially for SPA single-page apps… However, it is a great way to analyze third-party libraries. You can clearly see which libraries are large and low usage. It works perfectly with unpacking and BundleAnalyzer!

5. Give DOM elements break points

Right-click an element in the Elements panel and click Break On.

Several conditions that trigger breakpoints:

  • Subtree Modifications when the structure of a subtree node changes
  • attribute modificationsWhen the property changes, for exampleclass,id
  • Node removal when removed

The downside is that it only works with direct MANIPULATION of the DOM, not libraries that manipulate the DOM based on Virtual DOM differences, such as React/Vue.

6. Filter network requests

Previously only known to directly enter part of the URL and “fool” click option screening, now found wide to enter the command query:

  • is:from-cacheThe cache
  • larger-than:The size of the
  • domain:The domain name

7. Debug the “Little Black Room”

Kind of like skipFiles in VS Code debug configuration.

When debugging code, clicking next will often result in execution to a library, such as React/Vue, or some third-party script, such as an embedded SDK, where you only need to debug your own code.

Chrome DevTools supports Ignore List. Enter Ignore in the command panel to quickly jump to this setting screen:

You can also right-click the code in a file in the Sources panel and select Add Script to Ignore List. You can also right-click the line number and select Never Pause Here.

8. Logpoint

Basically what console.log does, but without the manual code!

Right-click the code line number under the Sources panel and select Add LogPoint…

9. Duplicate Ajax requests

If you need to copy the entire request data, you can only manually compile 😡 after console.log, now you know there is this function!

10. File overlays and code snippets

The Sources panel has several sub-tabs: Overrides, Snippets.

File overwriting allows you to save the modified file locally, which is then automatically replaced with a local file by DevTools on the next request:

  1. OverridesSelect a local folder. Suggest casually find a temporary, do not use is working folder!!
  2. Right clickPageUnder file selectionSave for overrides
  3. Next modify, save can

[bug Mc-10868] – Testing is not useful for compressed obfuscated projects…

Code snippets are like a small text editor that allows you to see some API or test it on a website without having to type code in Console

Ctrl + Enter to run.

11. The client cache CacheStorage

Note that 🗨 is an experimental feature!

Unlike cookies, localStorage, and sessionStorage, it is a cache applied to the ServiceWorker’s life cycle. Example:

this.addEventListener('install'.function(event) {
    event.waitUntil('v1').then(function(cache) {
            return cache.addAll([
                '/sw-test/'.'/sw-test/index.html'.'/sw-test/style.css'.'/sw-test/app.js'.'/sw-test/star-wars-logo.jpg',]); }); ; });Copy the code

For details, see MDN CacheStorage.

12. Analog sensor

Input sensor in the command panel to simulate some hardware information related data, such as:

  • Location Location.navigator.geolocation
  • Orientation Mobile screen Orientation.window.screen.orientation

The original link station drainage (blog) :…