Chrome DevTool 系列阅读

[baixiaoji]

这是什么东西？（明白该想project的定义）

为什么要做这个东西？（想想做这个东西的动机）

如何做这个东西？（拆解细节）

回顾（项目过程中的执行、以及心态的变化）

21

• [x] chrome Devtool 中级的知识点
• [x] 结合chrome DevTool 如何性能分析

[baixiaoji]

快捷键

Element panel

开启方式： press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).

Console panel

开启方式： Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS)

Open the last panel you had open

开启方式: Press Command+Option+I (Mac) or Control+Shift+I.

all shortcut for chrome devtool

[baixiaoji]

Element

• coverage 查看页面CSS & JS 的使用率
• cmd + F find Element quickly and scroll to view
• DOM element Debugger

[baixiaoji]

Console

• different console type
  • 不同的console api 地址
    • group/groupEnd & time/timeEnd
• some Utilities API
  • copy debug keys/values
  • inspect 定位元素
    • monitorEvents 一些debug功能
• filters
  • regular expression pattern 文档和记录的不一致
  • url: -url:
• Clear the Console clear() ctrl+L

[baixiaoji]

Network

• Initiator 查看那资源引用关系 shift
  • DevTools colors initiators green, and dependencies red.
• Timing 每个颜色代表什么
  • 对应的颜色english zh
  • 【性能优化】记录
• Search network headers and responses
• Filter
  • regular expression pattern
  • 有一些特殊字段 domain status 记录
• Block requests/Replay XHR request
  • 使用场景，目的，防止一些干扰

[baixiaoji]

Command Menu

Press Control+Shift+P or Command+Shift+P (Mac)

• > 和 ? 进行交互

[baixiaoji]

JavaScript

• DOM break pointer的解释
• XHR/Fetch breakpoints 输入匹配的url
• Exception breakpoints 超赞，一般使用效果极佳
• debugger 中如何 time travel link
• issue 提问好帮手 Copy stack trace
• blackbox 减少干扰 顺利排除问题
• snippets 帮助节省一些重复操作
• disable javascript 看看页面依赖js到什么程度

[baixiaoji]

Performance

steps：

0. 在一个干净的环境进行测试，减少插件不必要的干扰

   For example, if you have a lot of extensions installed, those extensions might create noise in your performance measurements.

stepsN: link

如何优化站点，第一步aduit自己的网站，得到一些建议，然后进行修改

The audit establishes a baseline, and gives you tips on how to improve.

一些常见的点，告诉自己如何优化 link

[baixiaoji]

Performance

View activities in a table

• When you want to view the root activities that cause the most work, use the Call Tree tab.
• When you want to view the activities where the most time was directly spent, use the Bottom-Up tab.
• When you want to view the activities in the order in which they occurred during the recording, use the Event Log tab.

network of performance（对应的请求颜色）

Requests are color-coded as follows:

• HTML: Blue
• CSS: Purple
• JS: Yellow
• Images: Green

tips： View the duration of a portion of a recording(查看选中时长是多长时间)

Hold Shift, click and hold, and drag left or right to select a portion of the recording. At the bottom of your selection, DevTools shows how long that portion took.

[baixiaoji]

speed up JavaScript execution

使用 devtool CPU profile 查看整个页面中哪些函数占用的cpu较大，可以说这边做了一个细分，可以具体到函数的那个回调当中，而不是performance中的调用栈只是一个call stack的展示，当然那边也会存在一些性能说明。

问题： 两个概念说明不是很具体，中文和英文的理解出现歧义

• Aggregated self time
• Aggregated total time

[baixiaoji]

Accessibility Reference

主要目的为了页面的能否被 screen reader 阅读，但是主要devtool只能帮你确认对于screen reader 言，页面元素是否正确标记。aXe extension 帮助你定位一些 Accessibility 出现问题的元素。

[baixiaoji]

memory

查看CPU占有量，分不同维度

• 占用额的时间线
• function 占用额

产生疑问：

如果某个节点已从 DOM 树移除，但某些 JavaScript 仍然引用它，我们称此节点为“已分离”

什么叫做一已分离？ 因为下面据的动态生成节点的例子和描述有些不符人意。地址

[baixiaoji]

性能：

1. https://umaar.com/dev-tips/83-console-time/
2. https://umaar.com/dev-tips/84-console-timestamp-timeline/
3. https://umaar.com/dev-tips/144-user-timing-performance/