Shulou(Shulou.com)06/01 Report--

This article is about how to use Chrome developer tools more professionally. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

As the name implies, the Chrome development tool is a tool that allows Web developers to intervene and manipulate Web pages through browser applications, as well as to debug and test Web pages or Web applications. With this tool, you can do many interesting things:

Problems with ◆ debugging interface

◆ uses breakpoints to debug JavaScript code

◆ optimizes your code

To open developer tools, you just need to right-click anywhere on the page, select check elements or select tools > more tools > developer tools from the menu in the upper right corner.

The following examples are all demonstrated under Google Chrome's Canary browser.

1. Quickly edit HTML elements

Have a try:

◆ selects the "Elements" panel

◆ selects a DOM element in the Elements panel

◆ double-click the DOM element tag you need to open, and you can edit it

The tags will be updated and closed automatically when you are finished

two。 To the specified number of rows

You can use the ": number of rows: number of columns" function in the specified file in the "Sources" panel. Try the shortcut key CMD + O.

3. Expand all child nodes

Have a try:

◆ selects the "Elements" panel

◆ can expand all child nodes by selecting the DOM element and holding down Alt + clicking the left mouse button where there is a haircut.

4. Change the location of developer tools

Try the shortcut key: CMD + Shift + D. There are three options for setting up developer tools:

◆ does not display developer tools in the window

◆ displays developer tools on the right side of the window

◆ displays developer tools at the bottom of the window

5. Search for DOM elements through the CSS selector

Try the shortcut key: CMD + F / CTRL + F and enter the class name or ID name you need to search for the corresponding selector.

6.Material and custom color palettes

You can click the small icon in front of the color code, and you can choose:

◆ page colors: this panel is automatically generated from your Web site (in your CSS)

◆ Material Design: this panel automatically generates colors from the Material Design panel

7. Multiple cursors

Move the cursor by holding down CMD + clicking to add multiple cursors, or you can use CMD + U to undo the cursor of your choice.

8. Copy the Data URI of the picture

◆ selects the "Network" panel

◆ selects your picture in the "Resources" panel

◆ right-click on the picture and select the "Copy Image as Data URI" option

9. Trigger pseudo class

◆ right-click the left panel element and select "Force Element State"

◆ also selects the icon to toggle pseudo-class status in the panel on the right.

10. Select multiple columns by dragging

◆ selects the "Sources" panel

◆ selects the file you want in the Sources panel editor

◆ Alt + drag the mouse

11. Use $0 to get the current element

◆ selects the "Elements" panel

◆ selects the DOM element in the Element panel

◆ clicks "Console" and enters $0 to get the current element

twelve。 Display in element

Select a DOM node:

◆ right-click in the Console panel

◆ selects "Reveal in Elements Panel"

13. View event listeners

◆ Select "Elements" panel "

◆ selects an event from the Event Listeners menu

◆ right-click and select "Show Function Definition", you can view the corresponding source code

14. Preview Easing

◆ can preview easing by clicking on the easing icon (purple icon)

◆ you can select another easing or custom easing by browsing

15. Media inquiry

◆ clicks the mobile phone icon in the upper left corner to select the device mode

◆ Click breakpoints ("blue", "green", "orange") toolbar to select breakpoints

If you can click a toolbar, you can find its corresponding location in the source code.

16.Network Filmstrip

"Film Strip" displays a screenshot of the page rendered from start to finish. You can click the screenshot and view the view in timeline-style.

◆ selects the "Network" panel

◆ clicks the "record" icon

◆ reloads the page

17.Copy Response

You can copy the "Response/Request" header in network resources.

◆ Select "Network" panel "

◆ selects the file you want in the Sources panel editor. "

◆ right-click and select "Copy Response"

18. Run a predefined code snippet

◆, select: Sources > Snippets in the left sidebar

◆ right-click to select Select New

◆ enter the file name and the code snippet in the panel on the right

Right-click on the ◆ snippet file name and select Run

19.Device Emulation Sensors

You can simulate mobile device sensors:

◆ touch screen

◆ geolocation coordinates

◆ accelerometer

You can do this:

◆ selects the "Elements" panel

◆ choose "Emulation > Sensors" and click "Esc" to cancel

20.Workspaces

◆ selects 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

Thank you for reading! This is the end of this article on "how to use Chrome developer tools more professionally". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.