Shulou(Shulou.com)06/03 Report--

JavaScript developers need to know what DevTools skills, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can learn something.

1. Use stealth mode

Stealth mode or private mode uses separate user profiles and does not retain data such as Cookie,localStorage or cache files after the browser is restarted. Each session starts in a clean state, so it is ideal for testing login features, first-time rendering performance, and PWA programs.

two。 Start DevTools automatically

When developing, we usually need to launch the browser, open DevTools, and open the URL we developed. We can add some configuration to the browser launch command, and the whole process can be automated in a single click.

It is best to create a new shortcut or script to launch in development mode, and then add the following configuration for Chrome:

-- incognito starts in stealth mode

-- auto-open-devtools-for-tabs starts DevTools

And put the test URL at the end, such as http://localhost:8000/

If it is a Windows system, the configuration might be as follows:

"C:\ Program Files\ Google\ Chrome\ Application\ chrome.exe"-incognito-auto-open-devtools-for-tabs http://localhost:8000

There are other useful configurations:

-- allow-insecure-localhost ignores SSL errors on the localhost domain

-- disable-extentions disables Chrome extensions that affect rendering, such as ad blocker

-- window-size=, sets the initial window size

-window-position=, sets the initial window position

-- user-data-dir= "" sets the user profile directory.

3. Use the command panel

Chrome's DevTools provides an editor-like command panel. In any DevTools panel, press Ctrl | Cmd + Shift + P, and then search for options by name:

4. Find unused JavaScript

Chrome's Coverage panel allows you to quickly find out if JavaScript is in use. First, open Coverage from the More tools submenu in the DevTools menu. Reload the page, and the panel shows the percentage of unused code in a bar chart:

Click on any JavaScript file and unused code will be highlighted with a red bar.

5. Find DOM to change the code

When an event is triggered, it is difficult to determine which function is responsible for updating a particular HTML DOM element. To find a process, right-click any HTML element in the Elements panel and select an option from the Break on submenu:

Select:

Subtree modifications listens for changes to elements or child elements

When the properties of an attribute modifications listening element (such as class) change

When node removal snooping elements are removed from DOM

When such an event occurs, the breakpoint is automatically triggered in the Sources panel.

6. Network speed and throttling

Testing your site with high-performance devices on a fast, reliable network may not represent actual usage. Your users may be in a slow network environment.

The Network tab provides a restriction option that artificially slows down HTTP upload speed, download speed, and latency. This can help you determine the cause of the performance bottleneck:

7. Filter network requests

DevTools's Network panel provides several filters, including a JS button that displays only JavaScript requests. You can enter the requested URL for fuzzy search, and it can also accept some special filters, including:

Filter cached requests: is:cached

Filter incomplete requests: is:running

Identify large requests: larger-than:

Identify third-party resources: domain:

8. Black box script

Sometimes you don't need to know exactly when or where JavaScript errors occur. Debugging problems in third-party libraries (React, Vue.js, jQuery, etc.) or third-party scripts is usually useless, and you can't change them.

DevTools allows scripts to be blackboxed, so even if you choose to enter a function in the debugger, they will not open in the debugger.

In the Chrome DevTools Sources panel, open a file, right-click a location in the code, and select add script to ignore the list.

Alternatively, click Settings and switch to the Ignore List tab. Check Add content scripts to ignore list and enter any number of file name patterns using regular expressions, such as jquery.*\ .js:

9. Use logpoints

Console.log () freely inserts debug statements throughout the file is very useful, but logpoints provides a way to get the same information without writing any code.

To add a logpoints, open a script in the Sources panel, right-click any line number, and select Add logpoint. Enter an expression, such as

"The value of x is", x

Whenever this line of code is executed, the message appears in the DevTools console. Logpoints usually stays the same between page refreshes.

10. Use conditional breakpoints

Clicking the line number of an open file in the Sources panel adds a breakpoint. It pauses the script when it reaches this line, so you can step through the code to check variables, call stacks, and so on.

Breakpoints are sometimes not useful, for example, if an error is reported in the last loop that runs 1000 times. At this point you can add a conditional breakpoint to trigger it only when certain conditions are met, such as I > 999. You can right-click the line number, select Add conditional breakpoint, and enter the conditional expression.

11. Stop the infinite loop

Triggering an infinite loop is a common bug in programs, which can cause browsers to crash. To stop an infinite loop in Chrome DevTools, open the Sources panel and click the debug pause icon to stop the script. Press and hold the same icon and then select the square stop icon to stop the script execution.

twelve。 Rerun the Ajax request

Browser JavaScript Ajax calls usually use Fetch or XMLHttpRequest API to send requests. These requests are displayed in the DevTools Network panel and can be filtered using the XHR button.

DevTools displays a lot of information, but sometimes you need to rerun the Ajax call. You can right-click any request and select an option from the Copy submenu:

Options include command replication of Windows Powershell,cURL and JavaScript Fetch syntax.

13. Enable local file overrides

Chrome allows any HTTP request to use a local file on your device instead of getting it over the network. This allows you to:

Edit scripts or styles in real time without the need for a build tool

Offline development of a website that usually requires third-party domains to provide basic files

Temporarily replace unnecessary scripts, such as analytics.

Create a directory on the local PC where alternate files, such as localfiles, will be stored, and then open the DevTools Sources panel of Chrome. Open the Overrides tab in the left window, click + Select folder for overrides, and then select the directory you created. You will be prompted to allow the file to be saved locally, and the directory will appear:

Now open the Page tab and find any source files. There are two ways to add it as a local override:

Right-click the file and select Save for overrides, or

Open the file, edit it, and then use Ctrl | Cmd + S.

The file icon is displayed as an overlay indicator with purple:

It will also be displayed in the Overrides tab and in the localfiles directory. You can edit the file in Chrome or using any code editor, and the updated version is used each time the page is reloaded.

14. Manage client storage

Web pages can use a variety of techniques to store data on the client. The Application panel in Chrome DevTools allows you to add, check, modify and delete values saved in cookie,cache storage, localStorage, sessionStorage, IndexedDB and Web SQL.

The Storage tag in Chrome shows how much data is stored locally and provides a quick Clear site data option.

15. Analog mobile hardware

Smartphones and tablets usually include hardware such as Global Positioning system (GPS), gyroscopes and accelerometers. These are usually not available on computers, which makes it very difficult to develop using API such as geolocation.

Chrome can simulate device hardware in DevTools-choose Sensors from the More tools menu:

There are several options:

Select a major city or enter a custom latitude and longitude. You can also set this location to unavailable to simulate scenarios where the GPS signal is weak.

Use preset or custom metrics to set the device orientation. You can click and drag the smartphone to any axis around X, or press and hold Shift to rotate the z axis around.

Force touch instead of mouse or other native device events.

Set the idle state to check how your application responds to the lock screen.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.