As the name implies, the Chrome development tool is a tool that allows web developers to intervene and manipulate Web pages through browser applications, or to debug and test Web pages or Web applications through this tool. With this tool, you can do a lot of interesting things:
To open the developer tools, just right click anywhere on the page, select Check elements or choose Tools > More Tools > Developer tools from the top right menu.
The following example shows a demo under Google Chrome's Canary browser.
Quickly edit HTML elements
Give it a try:
Select the Elements panel
Select a DOM element in the Elements panel
Double-click the DOM element tag you want to open and you can edit it
Automatically update and close labels when you're done
To the specified number of rows
You can select the ": Number of rows: Number of columns" feature in the specified file in the Sources panel. Try fast key cmd + O.
Expand All child nodes
Give it a try:
Change developer Tool Location
Try the shortcut key: CMD + Shift + D. There are three options for setting up developer tools:
Do not show developer tools in Windows
Show developer tools on the right side of the window
Show developer tools at the bottom of the window
Search DOM elements with CSS selectors
Try the shortcut: CMD + F/ctrl + F and enter the class name or ID name you need to search for the appropriate selector.
Material and custom color palettes
You can click on the small icon in front of the color code, you can choose:
Multiple cursors
Move the cursor hold CMD + click to add multiple cursors, you can also use CMD + u to undo the last cursor you selected.
Copy the data URI of the picture
Triggering pseudo-class
Select multiple columns by dragging
Get the current element using $
Select the Elements panel
Select a DOM element in the element panel
Click "Console" and enter $ to get the current element
Show in Element
Select a DOM node:
Viewing event listeners
Select the Elements panel
Select an event in the event Listeners menu
Right click and select "Show Function Definition", you can view the corresponding source code
Preview easing
Media Enquiry
Click on the phone icon in the top left corner to select device mode
Click the breakpoint ("Blue", "green", "orange") toolbar to select a breakpoint
If you can click on a toolbar, you can find its corresponding location in the source code.
Network filmstrip
"Film Strip" shows the rendered page from start to finish. You can click and view the view in Timeline-style.
Copy Response
You can copy the "Response/request" header in the network resource.
Run a predefined code snippet
In the left sidebar, select: Sources > Snippets
Right-click to choose Select New
Enter a file name and enter a code snippet in the right panel
Right-click on the code snippet file name to select Run
Device Emulation Sensors
You can simulate mobile device sensors:
Touch screen
Geographical coordinates
Acceleration meter
You can do this:
Workspaces
Select the Sources panel
Right-click in the Sources panel and select "Add Folder to Workspaces"
Select your file and right-click and select Map to Network Resources
Modify your file code and view
Extended Reading
From: W3cplus.
Link: http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html (click the end to read the original)
English Source: https://medium.com/jotform-form-builder/how-to-use-chrome-devtools-like-a-pro-b9bd414870e3
Translator: Nickname "Desert", W3cplus, Sass China founder, currently working in the hands of Amoy. One of the core members of the Drupal community in China. HTML5, CSS3 and sass, such as the front-end scripting language has a very deep understanding and rich practical experience, especially focus on CSS3 research, is the earliest research and use of CSS3 technology of a group of people. CSS3, Sass and Drupal Chinese evangelists. 2014 published " graphic CSS3: Core technology and practical case ".
Chrome Web Development tools