As a web developer, Chrome DevTools is definitely an indispensable and powerful debugging tool. Our common debugging methods include some console … ChromeDevTools is actually a very powerful debugging tool for the web developer.
Ok, let’s share 8 debug tips that you may not know when using Chrome DevTools.
1. Scroll Into View scrolls as in view
In the Elements tab, when viewing a page element, if the current element is not in the view, you can use this method to quickly scroll the element into the view.
- Select an element that is not in the view in the Elements tab.
- Right-click and select Scrollintoview
2. Copy As Fetch Copy as Fetch
All requests under the Network tab can be copied as a complete Fetch request code.
- In the Network tab, select a request
- Right-click and select Copy –> Copyasfetch
3. Add a click event listener to the element
In the case of debugging, it is sometimes necessary to print out the click event object in the element’s click event listener function. A more convenient way is to add event listeners to page elements directly on the Elements tab.
- Select a page element in the Elements tab. After selection, the element can be obtained by the $0 variable by default.
- In the Console tab, call the function monitorEvents and enter two parameters, the first one is the current element ( $0 ) and the second is the event name ( click )
- After pressing Enter, when the selected element triggers the click event, the Console tab will print the click event object.
4. Blocking request
Under the Network tab, select a request, right-click the request, and select Block request domain or Block request URL block all requests and requests under the domain where the request is located.
5. Drag page elements
In the Elements tab, you can drag any HTML element and change its position on the page.
6. Screen capture
In the new version of Chrome, a screenshot API. You can take a screenshot of the entire page or capture part of the page element, and the size of the captured image is the same as the size of the content to be intercepted in the current view of the browser. The screenshot output is a png format image that is automatically downloaded to the default directory via a browser.
Three ways to intercept: intercept the entire page, some elements or the current view
Intercepting part of a page:
- CMD + SHIFT + P (Windows + CTRL + SHIFT + P ) Open the command menu
- On the Elements tab, select the page element you want to intercept.
- Select Capture node screenshot
Intercept the full page operation
- CMD + SHIFT + P ( CTRL + SHIFT + P windows) open the command menu
- Select Capture full-size screenshot (no need to select page elements)
Intercept the page within the current view
- CMD + SHIFT + P (CTRL + SHIFT + P in windows) Open the command menu
- Select Capture screenshot (no need to select page elements)
6. DOM breakpoint debugging
ChromeDevTools provides three kinds of breakpoint debugging for DOM elements: When the child element changes when the property changes and when the property changes when the element is removed.
- In the Elements tab, select an element
- Right-click and select Breakon –> subtree modifications (or attribute modifications or node removal )
7. Overrides rewrite
- Open the Sources tab of ChromeDevTools
- Select the Overrides subtab
- Select +Selectfolderforoverrides to set a directory for Overrides save the rewrite properties.
8. Cache the result of the previous step
ChromeDevTools are a lot of debugging tips in ChromeDevTools if there are at least dozens of them. This article is limited to the length of the article, just listed some tips that are not easy to find, and are still relatively easy to use, I hope it is with help to you.
Google Chrome is a popular and powerful browser that combines a minimal design with sophisticated technology to make the Web faster, safer, and easier. Google Chrome smarts for everything you want to do.
Free Download Google Chrome
System requirements: Windows 7 / Windows 8 / Windows 10
Author / Product:Google / Google Chrome