Chrome Developer Tools (DevTools for short) is a set of web authoring and debugging tools that are embedded in The Google Chrome browser. DevTools gives developers a deeper look inside the browser and the applications they write. Using DevTools, you can more efficiently locate page layout issues, set JavaScript breakpoints, and better understand code optimization.

Visit DevTools

  • To access DevTools, start by opening a Web page or application in Chrome, or by:

    • Select the Chrome menu in the top right of your browser window, then choose Tools (More Tools) > Developer Tools.
    • Right-click on any element on the page and select Review Element (Examine).

  • Common shortcuts to quickly open DevTools:

    • useCtrl + Shift + I(on the MacCmd+Opt+I) Open DevTools.
    • useCtrl + Shift + J(on the MacCmd+Opt+JOpen the console in DevTools
    • useCtrl + Shift + C(on the MacCmd+Shift+COpen DevTools’ review element mode.

DevTools window

DevTools currently consists of the following nine main feature groups:

  • Elements panel: Check and adjust the page, debug DOM and CSS, view node binding events, animations
  • Console Panel: Debug JavaScript, view logs, interactive code debugging
  • Network Network panel: monitors interface and page resource requests and debugs Network activities
  • Application Panel: View and debug client storage, such as cookies, LocalStorage, SessionStorage, images, fonts, and styles
  • Sources source source panel: Debug JavaScript page source code, breakpoint debugging
  • Performance panel: View page Performance details and optimize page loading Performance in fine granularity
  • Security Security panel: View Security and certificate issues on the page
  • Memory Panel: JavaScript CPU analyzer, Memory heap analyzer
  • Audis used Google Lighthouse to assist performance analysis and give optimization suggestions

You can switch between panels using the Ctrl+[and Ctrl+] shortcuts.

DevTools now supports built-in color pickers.

Under Elements > Styles > Color/Background, with a color preview box, click to open the color picker

Switch the DevTools location

Click more, switch Dock Side, change DevTools display position (memorized)

You can also use the shortcut command+ Shift + D to do this quickly

Element selector

Click on theHover over the content of the page to view DOM node information (style – size, font, spacing, node attributes), while Elements automatically highlights the corresponding DOM node

Or use the shortcut command+ Shift + C

Quick command

Open the console and press it simultaneouslyCtrl+Shift+PThe command line opens

portal

Find files

Open the console and press it simultaneouslyCtrl+PThe file resource lookup is opened

Device Mode Emulates mobile devices

Click a button to switch, or use a shortcut keycommand+shift+mSwitch to device mode

Responsive mode

Drag and drop to make your view any size you want,

You can also directly enter to set the specific size

Media queries

Click the breakpoint to change the width of the view to trigger the media query to take effect

Device type

Emulates mobile or desktop devices

The main difference is that the mouse is circle/normal and the trigger event is Touch/Click

If this drop-down option is not available, select Add Device Type/Remove Device Type from the menu to add the device

Mobile device view mode

The browser provides the size of a specific mobile device. You can select the device as required to automatically change the view size

Click on the”rotating “Rotate the viewport to landscape.

Please note if yourDevice ToolbarIs very narrow,rotatingThe button will disappear

Show Device frame /hide Device frame

Add a custom mobile device

Enter user-defined device information and select the check box to display the device list on the page

View scale

A ruler appears on the left and top of the view

Zoom view

View size scaling

Limit network and CPU

To limit the network and CPU, use theThrottleSelect from the listMid-tier mobileorLow-end mobile

Only limited CPU

To limit only CPUS and not networks, go toperformancePanel, clickCapture Settings And then fromCPUSelect from the list4 x speedor6 x reduction

Restricted network only

To limit only network and not CPU, go toNetworkPanel and fromThrottleSelect from the listFast 3GOr missile 3 g * * * *

You can also download thePerformance”Panel sets network limits. Click on theCapture Settings And then fromnetworkSelect from the listFast 3 gOr slow 3G **

Overlay geographic location (custom device geographic location)

To open the UI that covers geographic locations, clickCustomize and control DevTools And then selectMore tools>The sensor

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, or Chrome OS) to open the Command menu and enterSensorsAnd then selectShow Sensors

Show Sensors

You can select a preset from the list, or selectOther Other..Custom input your own coordinates, or selectLocation unavailable The Location is unavailableTo test how your page behaves when the location is in the wrong state, Manage the default coordinate list or add custom coordinates to the default list.

Direction of equipment

Open more tools > Sensors (same as Overlay Location)

Select a direction from the preset list or you can customize the direction (enter apha, beta, gamma)

Reference 1 Reference 2