- Chrome Devtools Tips & Tricks
- The Nuggets translation Project
- Translator: chemzqm
- Proofread by: RobertWang, EthanWu, Zhangdroid
- Status: Translation completed
I’ve been spending a lot of time using my Chrome developer tools recently. In the process, I discovered some cool features that I missed out on (or didn’t feel the need to dig into at the time, such as the black box feature and asynchronous stack tracing). So I want to briefly address some of my favorite developer tool features.
- The little magnifying glass icon tells you in which file to define a particular style for the current CSS class/selector. For example, right-click on any DOM element to open the menu, click the “Inspect” option, select the “Computed” subpanel in the lower-right pane, find the property you’re interested in, and click the magnifying glass icon to navigate directly to the file that defines the style. (This is very useful if you are working directly on a large Web project)
The magnifying glass icon is no longer available in Chrome. The CSS file and the number of lines defining the style are displayed next to the style
- To see XHR requests sent by an active application, open the Settings panel and select the “Log XMLHttpRequests” option. The requests can then be seen in the “Console” panel. Before I knew it, I needed to create a proxy to observe HTTP requests, such as a tool like Brup suite, and pass HTTP requests through the proxy. If you just want to get a glimpse of the relevant requests, it would be easier to use “Console”. Of course, using a man-in-the-middle agent allows you to modify the request and response data while the request is being sent, which can be useful for some security tests. Another alternative option is to locate the “XHR Breakpoints” option in the right panel under “Sources” and activate the “Any XHR” option. (New Chrome supports regular url matching filtering)
- Now, suppose your application is sending XHR requests at a certain frequency (for example, to make sure the current page state is up to date), and you want to know where these timers are defined (probably by
setTimeout()orsetInterval()Methods). To find them, first open the “Sources” panel and check the “Async” confirmation box on the right. This will make your programsetTimeout()The rest of the call stack will not be affected, even if that asynchronous method has passed through many layers of calls. therequestAnimationFrame()As well asaddEventListener()Asynchronous methods provided by browsers such as. You can find this confirmation box here:
- If you want to quickly locate the code triggered by a particular button or link click, just before you actually click the button, Activate an “Event Listener Breakpoint” and select the Click confirmation box below mouse in the right pane (another killer feature for debugging large applications).
- When you use Event Listener breakpoint :: Mouse :: When you debug events with Click, there is a good chance that the code is broken in a third party library (such as jquery), and if you want to find the call for your project you will need to Click the next step in the debugger several times before you can see it. A great way to do this is to put these third-party scripts in a black box. The debugger never stops inside the black box script. It runs backwards until the line of code that runs is in a file outside the black box. You can right-click the file name of the third-party Script in the call stack panel, then left-click “Blackbox Script” in the drop-down menu.
- You can use
ctrl-p(You can follow:Quickly jump to a reference file (just like in the Atom editor)
These shortcuts are provided by Chrome Developer ToolsctrlIn the Mac system, is⌘.
- You can use
ctrl-shift-pJump to a specific function (currently open file only)
:ctrl-shift-pOn a Mac, the default operation is In/out of full screen.
- You can use
ctrl-shift-fTo search all the files
- Select a word with your mouse and press down
ctrl-dAt any time you can select multiple words with the same name and edit them simultaneously (again, just like in Atom) with the synchronized mouse pointer. It’s a great way to rename variables.
- If you have a local file for the current site, there is a way for you to modify the file in developer tools and save it directly to your local hard drive. Select the Sources panel, right-click any file in the list of files on the left, left-click “Add Folder to Workspace”, and select your local Folder. Then, right-click the file in your local file list and left-click “Map to Network Resource…” , and finally select the corresponding network file.
A few extra tips:
- In the console
$0Points to the element you highlight in the Elements panel - You can use the code on the console
$x("//p")To get XPath expressions for elements (this is useful when writing Selenium test sets, especially when CSS selectors are not easy to write)
Two Chrome extension tools are recommended:
-
JSONView helps you format and indent JSON code (and even collapse/expand code blocks). It allows you to jump directly from a URL contained in JSON, which helps you debug jSON-based apis directly in your browser. Such as: You can try to open the link before, during, and after plugin installation is complete, http://omahaproxy.appspot.com/all.json, Or https://api.github.com/ (a clickable URL that makes it easier to explore these apis directly in your browser)
-
JS Error Notifier (unmonitored version) it will pop up a dialog box after errors are displayed in the console. Unfortunately, major versions of it send some user data to third-party services (see issue #28 for more discussion). Anyway, it helped me notice and fix a few bugs. (That version has been removed)
In the end, I really think the Chrome Developer Tool is great, but one thing that bothers me a little is that it doesn’t support user defined shortcuts:
- Supports user – defined shortcut keys
The V8 engine used by Chrome does not always correctly identify various types of error stack informationsourcemapIf you use it in your projectsourcemapTechnically, here’s a toolStack-source-mapI might be able to help you