标签：apt conf 实时 storage ann wing 代码 master 进一步
[1]：可用来在页面中使用鼠标选择元素
[2]：在移动端和 pc 端效果间切换，切换至移动端后还可在页面上方调整窗口尺寸
[3]：进入 DevTool 的设置界面
[4]：姑且叫做“更多”，其中内容下文会陆续提到
使用Commend + [、Commend + ]直接进行标签间的切换
右击条目名称可在上下两部分间移动
快捷键： shift + command + p
输入 capture full 即可看到 capture full size screenshot 执行它，你就可以得到一张当前页面的截图
将 DevTool切换至暗黑色：switch to dark theme
左侧为DOM结构，节点上右击可进行操作，这里着重列出较重要或不明显的功能，下文列表同
h可隐藏右侧为选中节点的详细属性。
上方 Filter 左侧可以看到一个眼睛图标（Live expression），可实时显示键入表达式的值，适合需要持续查看的变量。
以一个更优雅的方式来打印数组或对象，大概率你会喜欢上它
进一步，你不妨在需要同时打印多个原始类型变量时使用 console.table，例如 console.table({a, e, b}) 而不是 console.log(a, b, e)
以对象形式打印 DOM 节点的所有信息
对于这部分内容我不认为我可以讲得比这篇文章更好：使用断点暂停代码，推荐直接参考这篇文章，而下面则是我认为在这文章基础上再值得一提的内容
Sources 面板界面的 3 个部分
- File Navigator 窗格。 此处列出页面请求的每个文件。
- Code Editor 窗格。 在 File Navigator 窗格中选择文件后，此处会显示该文件的内容。
- JavaScript Debugging 窗格。 检查页面 JavaScript 的各种工具。 如果 DevTools 窗口布局较宽，此窗格会显示在 Code Editor 窗格右侧。
https://developers.google.cn/web/tools/chrome-devtools/javascript?hl=zh-cn
位于 JavaScript Debugging 中，具有和上文提到的 Live expression 同样的功能
可以存储一段 js 代码，在任何任何时候执行，这项功能一个应用场景是你需要在一个共同开发项目中，每次进行一些每个人个性化的操作，你便可以将这段代码保存在 snippets 中，在以后快速执行
在上文提到的 File Navigator 区域选择 snippets，选择 New snippets 创建一份代码片段并命名
以后你就可以在任何时候先使用 command + p 唤出 command menu，再键入一个 ! 即可看到所有代码片段，选则或键入代码片段名称执行即可
在 command menu 中键入
>即是 Run command 状态，你可以在 command menu 中键入?查看所有功能
在 JavaScript Debugging 内，通过添加的关键字匹配，当请求 URL 中包含关键字时，断点生效
条件断点：在对应行号右击 => add conditional breakpoints，再输入一个表达式。当表达式为真，断点会是生效状态，反之断点不生效
Run => Edit Configurations，新建一个 Javascript Debug 配置项
针对当前项目配置调试地址和调试用浏览器，保存
在代码中设置断点
接着先按原方式 start 起来，再 Run => Debug ‘xxxx（配置项名称）‘
这时 Webstorm 会启动一个运行在新进程上的 Chrome，当程序运行至断点代码处时，就可开始正常调试了
点击右侧小齿轮 Show overview 可以决定时间轴的显示和隐藏，如果你不需要它，大可以隐藏掉它
在列表头部右击可以选择显示属性
将鼠标悬停于请求的 Initiator 属性上，即可显示请求的调用栈，以此定位请求发起位置
使用类似 method:POST 或 -method:POST 命令进行正反过滤
filter 右侧可选择类别进行筛选
filter 上方可进行不同网络状态的模拟
用来详细记录页面活动，分析性能
首先附一个 Performance 的简述：Chrome Devtool — Performance
以 overview 中 FPS 项为例说明图像：FPS 对应的绿色曲线，高度越高，代表帧率越高。在帧率持续低部分，有可能出现红色条块，红色条块长度与卡顿程度正相关。
下方火焰图部分，我们以 Main 为例。Main 表示的是页面的主线程，以一个倒置的火焰图呈现，每一个 Task 的宽度，对应其运行时间，纵向为其调用树。对于占时较长的 Task，右上角会有一红三角标识，代表 Long task
选中 heap snapshot 状态下点击 Take snapshot 创建一份内存快照。
Shallow Size：浅层大小，就是对象本身的大小（不包括它内部引用的对象），这个我们通常不太关注
Retained Size：保留大小，就是如果GC回收这个对象后，可以释放多少内存，这个我们非常关注
Distance 为对象到 GC root 的距离
我们可以从下面的堆分析器记录中看到一些引人注目的参数，例如距离：距离是指与 GC 根之间的距离。如果相同类型的几乎所有对象的距离都相同，只有少数对象的距离偏大，则有必要进行调查。
https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101
常用存储的查看和操作
顶级 top 下展开就是当前页面的字体、图片等资源，同样包括 iframe 内容
Chrome 开发者工具 | Chrome DevTools | Google Developers【推荐一读】
你不知道的 Chrome 调试技巧 - dendoink - 掘金小册
以及上文中已出现的所有链接
标签：apt conf 实时 storage ann wing 代码 master 进一步
原文地址：https://www.cnblogs.com/voniu/p/14407884.html
