Chrome Web Development tools

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:

• Debugging the interface problem

• debugging JavaScript code with breakpoints

• Optimize your code

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:

• Select the Elements panel

• Select the DOM element and press ALT + click on the left mouse button at the location with the cutting head to expand all child nodes

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:

• Page color: This panel is automatically generated from your Web site (in your CSS)

• Material Design: This panel can automatically generate colors from the Material design panel

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

• Select the Network panel

• Select your picture in the Resources panel

• Right-click on the picture and select the "Copy Image as Data URI" option

Triggering pseudo-class

• Right-click on the panel element on the left and select "Force Element State"

• Also select the toggle pseudo-class status icon in the right panel

Select multiple columns by dragging

• Select the Sources panel

• Select the file you want in the "Sources" Panel editor

• Hold down ALT and drag the mouse

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:

• In the Console panel, right-click

• Select "Reveal in Elements Panel"

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

• Click on the easing icon (purple icon) to preview the easing

• You can browse to select a different easing or custom 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.

• Select the Network panel

• Click on the "Record" icon

• Reload page

Copy Response

You can copy the "Response/request" header in the network resource.

• Select the Network panel

• Select the file you want in the Sources panel editor

• Right-click and select "Copy Response"

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:

• Select the Elements panel

• Select "Emulation > Sensors" and click "Esc" to cancel

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

• Chrome DevTools

• Dev Tips

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