Chrome Browser A tool for Web development, with easy to crash, fast, security and many other advantages of the vast number of users have been praised, once the launch of the market quickly, as a web developer we should understand its powerful features. Here are some common tips to help you improve your efficiency:
1. Open Control Panel (by right-click Review Element or F12 shortcut key)
2. Editing HTML elementsChoose Baidu as an example:
In the element editor under Elements, select a DOM element to double-click the selected DOM element, then edit it, and enter the confirmation page with the corresponding change PS:Find in elements use Ctrl + F to enter keywords
3. Expand All NodesSame as in elements, select the element of a child node, press ALT + mouse click on the element, will automatically expand all child nodes
4. Quick Find and locateQuick Find: Enter CTRL + O to quickly query the JS file you want to open, and then enter the confirmation, as I entered A.js, the console will help me find the relevant
Quick positioning: Open a JS file, Ctrl +o after input: line number (such as: 19), will be accurate to locate the specific row
5. Location of the transformation development toolClick the icon in the top right corner of the mouse or use the shortcut key ctrl+shift+d to toggle the location of the developer display (floating, right, bottom), such as:
6. Triggering pseudo-classSelect an element, right-->force element state or click the upper-right icon (Toggle element state icon)
7. Get the selected element using the $Enter $ + On the Console tab to get the currently selected element
Select a row of elements in the output, right-select the reveal in Elements Panel, and navigate to the relevant element position
8. Viewing event listenersSelect the Elements Panel right panel select event Listeners navigation and select an event pair event right-click on show function definition to navigate to event
9. Copy the request contentSelect the Network panel, select a file, right-click on the copy request header, copy response headers,copy response, etc.
From for notes (Wiz)
Introduction to the Chrome Developer tools: Basic article
