About Chrome Devtools

The Chrome development tool (also known as Devtools) is a set of Web authoring and debugging tools embedded within Chrome. Devtools provides Web developers with deep access to browser internal and Web applications. Devtools can effectively track layout problems , set JavaScript breakpoints , and optimize JavaScript code .

Open Devtools

To open Devtools in a Web page or Web application, you can use the following two ways:

1. In the upper-right corner of the Chrome browser window, select

   
   Menu

   , then select Tools > Development Tools .

2. Right-click any page element > select Review Element .

The Devtools tool will open at the point of your browser. There are also several shortcuts for opening devtools:

1. Use Ctrl + Shift + I (+ + on Cmd Opt I Mac) to open devtools.

2. Use Ctrl + Shift + J ( Cmd + + on Opt J Mac) to open the Devtools and move the focus to the console.

3. Use Ctrl + Shift + C ( Cmd + + on Shift C Mac) to open devtools and move focus to check element shift mode, or control check element mode switch if Devtools is already turned on.

More shortcuts

Devtools window

Devtools are organized into toolbars at the top of the window with a variety of tasks. Each toolbar item and corresponding Panel has a specific type of page or application information, including Elements , Source and Resources so on.

Color picker for Devtools

Color Picker in Devtools

In general, there are 8 tool panels in Devtools:

• Elements
• Resources
• Network
• Sources
• Timeline
• Profiles
• Audits
• Console

You can use Ctrl the shortcut + [ and Ctrl + ] to switch.

View DOM structure and styles

ElementsThe panel lets you see a DOM tree and allows you to perform DOM elemental validation and dynamic editing. If you need to confirm some of the page HTML fragments, you will often access the Elements panel.

View an H tag

View an H tag

More about viewing DOM structures and styles

Working with the console

The JavaScript console provides two main features for developers to test Web pages and applications. In this place you can:

• Print diagnostic information during the development process.
• shellinteract with tools Documents Devtools .

You can use the console API to provide a diagnostic information API for the consoles log. such as Console.log () or Console.profile ().

You can run the expression directly in the console using the method provided by the Command line Api. Includes the $ () command to select an element or profile () for CPU analysis.

Running commands in the console

More about consoles

debugging JavaScript

As the complexity of JavaScript applications increases, developers need powerful debugging tools to help quickly identify the cause of the problem and fix it effectively. There are some useful tools in Chrome devtools that help us to debug JavaScript less painfully.

Break point

More about debugging JavaScript

Optimized for network loading

NetworkThe panel provides real-time resource requests and network downloads. Identifying and resolving these over-expected request times is an important step in page optimization.

Network

More aboutNetwork

Audits

AuditsThe panel can start analyzing a page when it loads from a page. It then provides optimization recommendations that reduce page load times and increase page responsiveness.
See more Pagespeed Insights.

Optimize page Rendering

TimelineThe panel gives you a complete information about the time spent loading and using a Web application or page. All events, from parsing JavaScript loading, to calculating styles and re-rendering are plotted on the Timeline panel.

Timeline

More about optimizing rendering

JavaScript && CSS Optimization

ProfilesPanel to see the execution time and memory usage of your Web app or page. This helps to understand where resources are being used and helps optimize the code. The analyzers provided are:

• CPU Profiler Displays the JavaScript execution time of the function of the page.
• The Heap Profiler Displays the JavaScript object and DOM node memory allocations for the page.
• JavaScript Profiler Displays the execution time of the page script.

Profiler

More on how to optimize JavaScript && CSS Performance

View Storage

ResourcesPanel to view the resources loaded on the page. You can also interact with,,, and HTML5 Database Local Storage so on Cookies AppCache .

Resource Panel

Long press QR Code recognition concern, your support is our greatest power.

Public Number: Testing DreamWorks

QQ Group: 300897805

　　

About Chrome Devtools