Chrome Dev Tools instructions

1. Start Dev Tools

  • Menu > More Tools > Developer Tools

  • shortcuts

    • F12
    • option+command+i(MAC) is selected when openedElements
    • option+command+j(MAC) is selected when openedConsole

2. Command menu

  • Open shortcut keys

    • ctrl+shift+p
    • command+shift+p(MAC)

  • Change the Dev Tools theme color

    • command+shift+p

    • Enter the theme

  • Quick screenshots

    • Enter screenshot from the command menu

  • Move window position

    • Type Dock in the command menu

3. The Elements Tab bar

Part 3-1 the DOM

  • To check the Dom element, right-click on the Dom element and select Check

  • Query the Dom

    • shortcuts

      • ctrl+f
      • command+f(MAC)

    • A query

      • Text query

        Enter the tag name or class name: div, anony-nav

      • CSS selectors

        Enter CSS selectors:. Container, #list

      • Xpath

        Enter the xpath expression: //div/ul

      • Inspect(Element) — console function

        Type this function in console: inspect(document.body)

3-2 style section

The 3-2-1Stylespanel

The style panel is the style of the current stylesheet

  • Add style with element.style

  • Make the state permanent

    • For example, let the :hover style stay

    • Adds or removes a class name

    • Copying the style

    • The style that

The 3-2-2Computedpanel

This panel lists all current usage Styles, not separate by element or class name like Styles

The 3-2-3Layoutpanel

This panel lists all flex layouts and Grid layouts for the page

  • Flex layout

  • The grid layout

Similar to Flex, there are some graphical properties in Styles that can be set by clicking on them, which are not listed here

The 3-2-3Event Listenerspanel

This panel lists all bound events on the page

The 3-2-4DOM Breakpointspanel

Displays all breakpoints, as described later in the JS section

The 3-2-5Propertiespanel

This panel displays the properties of the selected DOM node

The 3-2-6Accessibilitypanel

This panel can be used to help us build accessible pages. I won’t introduce it here

4. The Console Tab bar

4-1 statement execution as wellThe $_

$_ returns the result of the last statement

4-2 $0, $1...

On the console, $0 returns the last selected DOM element, and likewise, 1 returns the previous one, 1 returns the previous one, 1 returns the previous one, 2 returns…. , will also be prompted when a node is selected in Elements


4-3 consoleSome methods of

Console methods, such as log, error, WARN, TABLE, group, time, trace, and clear


4-4 Log level filtering

4-5 Variable tracking

Click on the little eye, you can add variables, and then change them in the console, and the values above will be updated in real time

5.SourcesThe Tab bar

When using the Vue/React framework, breakpoint debugging will jump to the framework code, as long as theCall StackSet the frame to do not retrieve

This is what happens when you add it

5-1. Write in JS codedebuggerTrigger debugging

5 – (2) inSourcesTab, click the row number

5-3. Dom node changes trigger breakpoint (pause execution)

5-4. ThroughEvent ListenerTrigger breakpoints

6. NetworkThe Tab bar

6-1. Panel Description

6-2. Added network speed limit

Chrome comes with Fast 3G; Slow 3G can also add speed limits of its own

6-3. More network Settings (UA, transmission mode)

6-4. Import and export request files

Click on it and you’ll find a JSON file that contains all the request information. Suppose that when the client has a request problem and the development environment can’t reproduce it, you can tell the client to go to the HAR file and then import the HAR file in the development environment to see the problem.