Open the Chrome Developer tools

  1. From the Chrome menu, choose more Tools > Developer Tools.

2. Right-click on the page element and choose “Check”

  1. Use the shortcut Ctrl + Shift + I (Windows) or Cmd + Opt + I (Mac)

  2. F12

General skills

The following tips are only available in the Chrome Console:

copy(value) { [Command Line API]

On the Console, type:

At this point, the value of the variable demo will be copied to the stickboard so that you can easily use it to do other things.

getEventListeners(node) { [Command Line API] }

View all events bound to an element

store as global

As you can see from the figure below, it is saved as global variable “temp5”, and it is ready to use.

copy html

We can copy the node, and we can copy the HTML element, as in:

monitor(function) { [Command Line API] }

Monitor can be used to monitor whether a function is being executed. For example, the global function defined in the following figure can be used to monitor its calls

Note: This method is only available in debugging tools and cannot be used for coding implementations

monitorEvents(object, [types]) { [Command Line API] }

Sometimes we need to monitor whether certain elements are triggered by certain events, so we can use this method for debugging

Note: This method is only available in debugging tools and cannot be used for coding implementations

Command Menu Six basic functions

panel

Device Mode

Mobile device simulator

  1. Similar to mobile devices

  1. Responsive window mode

Elements

The elements palette allows you to manipulate the DOM and CSS freely to iterate the layout and design the page. Main functions:

  • Review and adjust the page
  • Edit the style
  • Edit the DOM

skills

  1. Quickly show/hide the element, select the element, presshYou can make elements show/hide
  2. Drag elements, select them, and directly drag them to the specified location to see the effect, or use “Ctrl + tracks/Ctrl + 缟”
  3. Edit/copy elements
  4. Modify styles in real time
  5. Viewing the Value that takes effect (computed)

6. Shadow Editor7. Cubic Bezier editorClick “+” to add a new style

  1. Color picker

10. DOM breakpoint, which is triggered when a DOM node is being edited or modified

Console

During development, you can use the console panel to record diagnostic information or use it as a shell to interact with JavaScript on a page.

  • Using the console Panel
  • Command line interaction
    • console.log
    • console.warn
    • console.error
    • console.assert
    • console.table
    • Console. dir => The real JS object associated with the output variable

  • Console. time, start a timer
  • Console. timeEnd, ends the timing and places the result inconsolePrint out

Sources

Set breakpoints in the source panel to debug JavaScript, or connect to local files through Workspaces to use the developer tools real-time editor

  • Breakpoint debugging
    • Error breakpoint
  • Debug confusing code
  • Use the Workspaces of the developer tool for persistence

Snippets of code

With Snippets, you can debug JS code based on the browser environment

WorkSpace

Modifying our project files in Chrome, and debuggings (such as styles) in the Element panel are automatically synchronized and saved to a local file.

Network

Use the Network panel to learn about requested and downloaded resource files and optimize web page loading performance.

  1. Preserve log
  2. Disable cache
  3. Filter, request filtering
  4. Speed limit
  5. export HAR & import HAR
  6. request initiator
  7. Customize the details to be displayed in the Network panel (right click on the “Name” bar and select the information you want to display)
  8. Replay XHR

Performance

Use the timeline panel to improve the runtime performance of your pages by logging and viewing the various events that occur during the life of your site. Portal :# A Chrome runtime performance bottleneck analysis case

Memory

If you need more information than the timeline panel, you can use the Configuration panel, such as tracking memory leaks.

  • JavaScript CPU Analyzer
  • Memory heap analyzer

Application

Use the Resource panel to check all the resources loaded, including IndexedDB with Web SQL databases, local and session stores, cookies, application caches, images, fonts, and style sheets.

  • Manage data, such as commonly used: Cookie, Storage, etc

Security

Use the security panel to debug mixed content issues, certificate issues, and so on.

  • security

Portal: Understand Security Issues (Security Panel)

Lighthouse

Is an open source automation tool for improving the quality of web applications. You can run it as a Chrome extension or from the command line. You give Lighthouse a url that you want to review, it runs a series of tests against that page, and then generates a report on the page’s performance.

portal

  • Chrome devtools
  • Chrome Developer Tools
  • Lighthouse
  • Portal :# A Chrome runtime performance bottleneck analysis case
  • Device Mode
  • Command Menu Six basic functions