chrome devtools

The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. We can use the DevTools to iterate, debug, and profile the site.

Open DevTools

Right-click a page element and select Inspect, or click F12 (windows).

We can choose the proper dock size (highlighted) to decide where the panel is attached to the page to be inspected.

Discover DevTools

Elements panel

View and change the CSS rules applied to any selected element in the Styles pane. To edit a name or value, click on it, make your changes, and press Tab or Enter to save the change.
View and edit a selected element's box model in the Computed pane.

View any changes made to your page locally in the Sources panel.

Example:

Before	After

When increasing the value of padding-top and padding-bottom, data density becomes larger.

In Styles panel, click the file you have modified, which will take you to the Source panel. Right click on Local modifications, you can see the when and where you modified the file. Clicking revert will undo all the changes to the file.

Other tips

Styles associated with a selector that matches the element.
User agent stylesheets are clearly labelled, and are often overridden by the CSS on your web page.
Rules that have been overridden by cascading rules are shown with strikethrough text.
Inherited styles are displayed as a group under the "Inherited from <NODE>" header. Click the DOM node in the header to navigate to its position in the DOM tree view.
Grey colored entries are rules that are not defined but instead computed at runtime.

Console panel

Log diagnostic information during development or interact with the JavaScript on the page.

Sources panel

Debug your JavaScript using breakpoints or connect your local files via Workspaces to use DevTools as a code editor.

Example to debug JS in Chrome Devtools:

Click on "Add Number1 and Number2", we find it returns incorrect result
In Sources→ Event Listener Breakpoints→ Check "click" under "mouse". When check the click checkbox, you set up an event-based breakpoint on all click events. When any node is clicked, and that node has a click handler, DevTools automatically pauses on the first line of that node's click handler.
Like in other programming IDE, click Step into next function call to step through the execution of the onClick() function, one line at a time. Click Step over next function call . DevTools executes function without stepping into it.
Set another breakpoint. As the below shows, click on the beginning at line 32, which sets an breakpoint (highlighted in blue). Click resume script execution , the script continues executing until it reaches the line of code you placed the breakpoint on.
Look at the lines of code in updateLabel() that have already executed. DevTools prints out the values of addend1, addend2, and sum.
Use "Watch" to check the variable values. Click Add Expression and enter what you want to check. For example, type "sum", "typeof sum" and press enter.
Now we know that the cause of the bug is data type. To verify it, in the Console, type parseInt(addend1) + parseInt(addend2). Press Enter. DevTools evaluates the statement and prints out 6, which is the expected result.
We can edit JavaScript code directly within the DevTools UI to fix this issue. Change the code and save. This time we get correct result.

Keep in mind that this workflow only applies a fix to the code that is running in your browser. It won't fix the code for all users that run your page. To do that, you need to fix the code that's running on the servers that serve your page.

Network panel

Example: learn how to use the Chrome DevTools Network panel to understand why a page loads slowly.

In DevTools, click the Network tab.
Enable Capture Screenshots , which turns blue when enabled. DevTools captures screenshots during the page load.

Check the Disable Cache checkbox. When this checkbox is enabled, DevTools doesn't serve any resources from the cache. This more accurately emulates what first-time users experience when they view your page.

From the dropdown menu that currently says No Throttling, select Regular 2G. DevTools throttles the network connection to simulate a regular 2G experience. This is how mobile users experience your site in places with poor connections. This is a worst-case setup. If you can get your page loading fast on this setup, it'll be fast for all your users!
Screenshots show that the page takes more than 10 seconds to load completely. Note the value for DOMContentLoaded, on the bottom of the Network panel. You should see a value of at least 4 seconds.
Click main.js to investigate that request further. DevTools shows a set of new tabs that provide more information about this request.
Click the Preview tab to view the request's source code. You can see that the script just hangs for 4000ms.

Solution: By marking this script with the async attribute and moving it to the bottom of the document's <body>, the page can load without waiting for the script.

Code change:

Before

After
Double-click on the top-left screenshot. The time below the screenshot indicates when the screenshot was taken. The screenshot takes multiple seconds to load. That means it's probably too large of a file.
Hover over the Waterfall for the logo-1024px.png request. The request spends most of its time downloading the image. This confirms that the image is too large. Convert format of the logo will reduce its size.
The Requests table (highlighted in blue in above pic) displays the following columns by default:
- Name. The filename of, or an identifier for, the resource.
- Status. The HTTP status code.
- Type. The MIME type of the requested resource.
- Initiator. The following objects or processes can initiate requests:
  - Parser. Chrome's HTML parser.
  - Redirect. An HTTP redirect.
  - Script. A JavaScript function.
  - Other. Some other process or action, such as navigating to a page via a link or entering a URL in the address bar.
- Size. The combined size of the response headers plus the response body, as delivered by the server.
- Time. The total duration, from the start of the request to the receipt of the final byte in the response.
- Waterfall. A visual breakdown of each request's activity.

Other tips

By default, DevTools shows the Overview pane. Click Hide overview to hide it.
By default, DevTools uses small rows in the Requests pane. Click Use large request rows to use large rows, instead.
By default, DevTools shows the Filters pane. Click Filter to hide it.
Save a request as HAR with content:
1. Right-click the row containing the request in the Requests table.
2. Select Save as HAR with Content.
Copy requests to the clipboard. Under the Name column of the Requests table, right-click a request, hover over Copy, and select one of the options you want to copy.
Add or remove request columns: right-click the header of the Requests table and select an option to hide or show it. Currently displayed options have checkmarks next to them.

Performance panel

Improve the runtime performance of your page by recording and exploring the various events that happen during the lifecycle of a site.

Runtime performance is how your page performs when it is running, as opposed to loading. Next teaches how to use the Chrome DevTools Performance panel to analyze runtime performance. In terms of the RAIL model, the skills are useful for analyzing the Response, Animation, and Idle phases of your page.

In DevTools, click Record . DevTools captures performance metrics as the page runs.
Wait a few seconds.
Click Stop. DevTools stops recording, processes the data, then displays the results on the Performance panel.
Recording of the page's performance:
Look at the FPS chart.
Whenever you see a red bar above FPS (Frames Per Second, the main metric for measuring the performance of any animation, Users are happy when animations run at 60 FPS), it means that the framerate dropped so low that it's probably harming the user experience. In general, the higher the green bar, the higher the FPS.
Below the FPS chart you see the CPU chart.
The colors in the CPU chart correspond to the colors in the Summary tab, at the bottom of the Performance panel. The fact that the CPU chart is full of color means that the CPU was maxed out during the recording. Whenever you see the CPU maxed out for long periods, it's a cue to find ways to do less work.
Hover your mouse over the FPS, CPU, or NET charts. DevTools shows a screenshot of the page at that point in time. Move your mouse left and right to replay the recording. This is called scrubbing, and it's useful for manually analyzing the progression of animations.
In the Frames section, hover your mouse over one of the green squares. DevTools shows you the FPS for that particular frame. Each frame is probably well below the target of 60 FPS.
Another handy tool is the FPS meter, which provides real-time estimates for FPS as the page runs.
- Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu.
- Start typing Rendering in the Command Menu and select Show Rendering.
- In the Rendering tab, enable FPS Meter. A new overlay appears in the viewport.
Note the summary tab. When no events are selected, this tab shows you a breakdown of activity. The page spent most of its time rendering. Since performance is the art of doing less work, your goal is to reduce the amount of time spent doing rendering work.
Expand the Main section. DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time. Each bar represents an event. A wider bar means that event took longer.
Zoom in on a single Animation Frame Fired event by clicking, holding, and dragging your mouse over the Overview, which is the section that includes the FPS, CPU, and NET charts. The Main section and Summary tab only display information for the selected portion of the recording.
Note the red triangle in the top-right of the Animation Frame Fired event. A red triangle is a warning that there may be an issue related to this event.
Click the Animation Frame Fired event. The Summary tab now shows you information about that event. Note the reveal link. Clicking that causes DevTools to highlight the event that initiated the Animation Frame Fired event. Also note the app.js:94 link. Clicking that jumps you to the relevant line in the source code.
Under the app.update event, there's a bunch of purple events. If they were wider, it looks as though each one might have a red triangle on it. Click one of the purple Layout events now. DevTools provides more information about the event in the Summary tab. Indeed, there's a warning about forced reflows (layout).
In the Summary tab, click the app.js:70 link under Layout Forced. DevTools takes you to the line of code that forced the layout.
qa

Memory panel

Learn how to use Chrome and DevTools to find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.

memory leaks

In object-oriented programming, a memory leak may happen when an object is stored in memory but cannot be accessed by the running code.

Memory leak occurs when programmers create a memory in heap and forget to delete it.

Memory issues are important because they are often perceivable by users. Users can perceive memory issues in the following ways:

A page's performance gets progressively worse over time. This is possibly a symptom of a memory leak. A memory leak is when a bug in the page causes the page to progressively use more and more memory over time.
A page's performance is consistently bad. This is possibly a symptom of memory bloat. Memory bloat is when a page uses more memory than is necessary for optimal page speed.
A page's performance is delayed or appears to pause frequently. This is possibly a symptom of frequent garbage collections. Garbage collection is when the browser reclaims memory. The browser decides when this happens. During collections, all script execution is paused. So if the browser is garbage collecting a lot, script execution is going to get paused a lot.

Monitor memory use in realtime with the Chrome Task Manager:

Press Shift+Esc or go to the Chrome main menu and select More tools > Task manager to open the Task Manager.
Right-click on the table header of the Task Manager and enable JavaScript memory.
- The Memory column represents native memory. DOM nodes are stored in native memory. If this value is increasing, DOM nodes are getting created.
- The JavaScript Memory column represents the JS heap. This column contains two values. The value you're interested in is the live number (the number in parentheses). The live number represents how much memory the reachable objects on your page are using. If this number is increasing, either new objects are being created, or the existing objects are growing.

REF

https://developers.google.com/web/tools/chrome-devtools/

收起

Open Chrome DevTools

Ctrl + Shift + I => 唤醒控制台

DevTools for Beginners

Elements => Styles => + New Style Rule (添加新的临时注入样式表)

Elements => Styles => :hov (激活元素伪类状态) => :active, :hover, :focus, :visited, :focus-within

CSS

CSS Reference

Ctrl + Shift + C => select an element in the page to inspect it (选择元素检查)

Elements => Computed => Show all => (显示所有 css 继承属性)

Command Menu (命令菜单) => Ctrl + Shift + P (在唤醒控制台的前提下)

JavaScript

Sources => Event Listener Breakpoints => (特定事件发生时调试)

Sources => Ctrl + Shift + O (查找函数定义) + Ctrl + O (查找文件)

Search => Ctrl + Shift + F (查找面板)

Sources => Watch => (监听变量/表达式的值)

Pause Your Code With Breakpoints

Breakpoint Type	Use This When You Want to Pause...
Line-of-code	On an exact region of code.
Conditional line-of-code	On an exact region of code, but only when some other condition is true.
DOM	On the code that changes or removes a specific DOM node, or its children.
XHR	When an XHR URL contains a string pattern.
Event listener	On the code that runs after an event, such as click, is fired.
Exception	On the line of code that is throwing a caught or uncaught exception.
Function	Whenever a specific function is called.

DOM change breakpoints => Elements => Right-click the element (选中元素鼠标右键点击) => Break on => Subtree modifications (内容变化) , Attribute modifications (属性变化) , Node removal (节点移除)

Exception breakpoints => Sources => Pause on exceptions (八角形暂停按钮)

Function breakpoints => debug(fn) => is equivalent to setting a line-of-code breakpoint on the first line of the function.

JavaScript Debugging Reference

Right-click the line of code that you're interested in, and select Continue to here. DevTools runs all of the code up to that point, and then pauses on that line. (调试时右键选择执行代码到当前行)

While paused on a line of code, right-click anywhere in the Call Stack pane and select Restart Frame to pause on the first line of the top function in your call stack. The top function is the last function that was called. (重新执行调用栈里面的最顶层函数)

Blackbox a script when you want to ignore that script while debugging. When blackboxed, a script is obscured in the Call Stack pane, and you never step into the script's functions when you step through your code.

Blackbox a script from Settings => Settings => Blackboxing => Add pattern

Run snippets of debug code from any page => Sources => Snippets => + New snippet

UI References and Overviews

Keyboard Shortcuts

快捷键
Ctrl + F	搜索当前文件
Ctrl + Shift + F	搜索所有文件
Ctrl + O / Ctrl + P	按文件名搜索
Ctrl + D	选择光标处变量
Ctrl + M	转到匹配的括号处
Ctrl + `	聚焦到控制台
Ctrl + L	清空控制台输出
Ctrl + Shift + C	检查元素
Shift + 左键点击拖动	模拟双指手势放大缩小

Accessibility

Audits => Accessibility

Elements => (选择元素) => Accessibility

You may prefer to use the aXe extension (Accessibility testing in Chrome Developer Tools) rather than the Audits panel. They generally provide the same information, since aXe is the underlying engine that powers the Audits panel.

ARIA attributes ensure that screen readers have all of the information that they need in order to properly represent a page's contents.

Track Which Element has Focus => Console => Create Live Expression (眼睛) => document.activeElement => Right-click => Reveal in Elements panel / Store as global variable

More Tools => Sensors (传感器) => Geolocation / Orientation

override the user agent string => Ctrl + Shift + P => Command Menu => Show Network conditions => User agent

Remote Debug Android Devices

Android 设备 => Settings => Developer Options => Enable USB Debugging

PC 电脑 => Main Menu => More tools => Remote devices => Discover USB devices

chrome://inspect => 访问已启用调试的 webview 列表

Console

console.clear() => 清除控制台历史记录

Console => console settings => Preserve log => 保留控制台输出历史记录

Network => Preserve log => 保留网络请求历史记录

Settings => Preferences => Console

$() => document.querySelector() $$() => document.querySelectorAll() keys() values() debug(fn) => sets a breakpoint on the first line of that function

// 将控制台消息组织在一起 =>
// 自动折叠组, 不默认展开全部
console.groupCollapsed()

    // 允许嵌套
    console.group()
    console.groupEnd()

console.log()
console.warn()
...

console.groupEnd()
复制代码

// assert 在第一个参数判读为 false 时显示第二个错误参数
console.assert(list.childNodes.length < 500, "Node count is > 500");
复制代码

占位符
%s	string
%i / %d	int
%f	float
%o	DOM
%O	Object
%c	css style

console.count(label) => 标签计数 console.dir() => 以 JavaScript 形式表示的指定对象 console.dirxml(object) => 输出 XML 表示形式

// 性能分析
function processPixels() {
  console.profile("processPixels()");
  // later, after processing pixels
  console.profileEnd();
}
复制代码

// 计时器
console.time("Array initialize");
var array = new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
}
console.timeEnd("Array initialize");
复制代码

console.timeStamp(label) => 在录制会话期间向 Timeline 添加一个事件

console.trace() => 从调用位置输出一个堆叠追踪

console.table() => 直观查看数组/对象

// inspect() 函数选取一个 DOM 元素或 JavaScript 引用作为一个参数
// 如果提供 DOM 元素, 进入 Elements 面板并显示该元素.
// 如果提供 JavaScript 引用, 则进入 Profile 面板
$('[data-target="inspecting-dom-elements-example"]');
inspect($_);
复制代码

Monitor Events

使用 monitorEvents() 侦听特定类型的事件
使用 unmonitorEvents() 停止侦听
使用 getEventListeners() 获取 DOM 元素的侦听器
使用 Event Listeners Inspector 面板获取有关事件侦听器的信息

monitorEvents(document.body, "click");
unmonitorEvents(document.body);
getEventListeners(document);
复制代码

$_ 返回最近评估的表达式的值
$0 - $4 Elements 选择的最后五个 DOM 元素或 Profiles 选择的最后五个 JavaScript 堆对象的历史记录
$(selector) => document.querySelector()
$$(selector) => document.querySelectorAll()
$x(path) => 与 XPath 表达式匹配的 DOM 元素数组
clear()
copy(object)
debug(fn) => undebug(fn)
dir(object) => console.dir()
dirxml(object) => console.dirxml()
inspect(object/fn) => ( DOM => Elements / JavaScript Object => Profiles )
keys(object)
values(object)
monitor(fn) => 指明函数名称及调用时所需参数 => unmonitor(fn)
monitorEvents(object, events) => 监听指定对象指定事件 => unmonitorEvents(object[, events])
profile(name) => 启动 JavaScript CPU 分析会话 => profileEnd()
table(data[, columns])

Performance

RAIL => Response (响应) , Animation (动画) , Idle (空闲) , Load (加载)

以用户为中心
立即响应用户 => <= 100ms
设置动画或滚动时, 在 10ms 内生成帧 => 人们特别擅长跟踪运动, 如果动画不流畅, 他们就会对运动心生反感. 用户可以感知每秒渲染 60 帧的平滑动画转场. 也就是每帧 16 毫秒(包括浏览器将新帧绘制到屏幕上所需的时间), 留给应用大约 10 毫秒的时间来生成一帧. => { JavaScript => Style => Layout => Paint => Composite }
最大程度增加主线程的空闲时间 => 利用空闲时间完成推迟的工作, 推迟的工作应分成每个耗时约 50ms 的多个块. 如果用户开始交互, 优先级最高的事项是响应用户. 要实现小于 100 毫秒的响应, 应用必须在每 50 毫秒内将控制返回给主线程, 这样应用就可以执行其像素管道, 对用户输入作出反应等等. 以 50 毫秒块工作既可以完成任务, 又能确保即时的响应.
持续吸引用户 => <= 1000ms 呈现交互内容

The main metric for measuring the performance of any animation is frames per second (FPS). Users are happy when animations run at 60 FPS.

在 FPS 图下面是CPU图. CPU 图表中的颜色与性能面板底部的Summary选项卡中的颜色相对应. CPU 图表充满颜色这一事实意味着在记录期间 CPU 已经达到了最大值. 每当您看到 CPU 长时间耗尽时, 就提示您要想办法减少工作量.

In the Frames section, hover your mouse over one of the green squares. DevTools shows you the FPS for that particular frame. Each frame is probably well below the target of 60 FPS.

Ctrl + Shift + P => Command Menu => Show Rendering => FPS Meter

Expand the Main section. DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time. Each bar represents an event. A wider bar means that event took longer. The y-axis represents the call stack. When you see events stacked on top of each other, it means the upper events caused the lower events.

Optimize Website Speed

Audits

Each Size cell shows two values. The top value is the size of the downloaded resource. The bottom value is the size of the uncompressed resource.

Ctrl + Shift + P => Command Menu => Show Coverage => Coverage => js 文件代码使用情况

When you're working with your own code, the Coverage tab can help you analyze your code, line-by-line, and only ship the code that's needed for page load.

Ctrl + Shift + P => Command Menu => Show Request Blocking => Request Blocking => 请求拦截

Performance => Main => Bottom-Up

Network

TTFB => Time To First Byte => waiting to receive the first byte from the server

If the connection is slow, consider hosting your content on a CDN or changing hosting providers. If the server is slow, consider optimizing database queries, implementing a cache, or modifying your server configuration.

Timing breakdown phases explained

Queueing => 排队时间 Stalled => 被停止 DNS Lookup => 解析IP Proxy negotiation => 浏览器正在与代理服务器协商请求 Request sent => 请求发送 Request to ServiceWorker => 请求发送到sw Waiting(TTFB) => 浏览器正在等待响应的第一个字节. 这个时间包括1次延迟往返和服务器准备响应所花费的时间. Content Download => 浏览器正在接收响应 Receiving Push => 接收HTTP2服务器推送 Reading Push => 读取以前接收到的本地数据

To view the initiators and dependencies of a request, hold Shift and hover over the request in the Requests table. DevTools colors initiators green, and dependencies red. 若要查看请求的发起者和依赖项, 请按住Shift并将鼠标悬停在请求表中的请求上. DevTools将启动器设置为绿色, 而依赖项设置为红色.

View the stack trace that caused a request When a JavaScript statement causes a resource to be requested, hover over the Initiator column to view the stack trace leading up to the request. 当JavaScript语句导致请求资源时, 将鼠标悬停在Initiator列上, 以查看导致请求的堆栈跟踪.