标签：右击 Chrome command 使用 DevTools 窗格 断点 页面
DevTools
公共区域与通用操作
[1]：可用来在页面中使用鼠标选择元素
[2]：在移动端和 pc 端效果间切换，切换至移动端后还可在页面上方调整窗口尺寸
[3]：进入 DevTool 的设置界面
[4]：姑且叫做“更多”，其中内容下文会陆续提到
使用Commend + [、Commend + ]直接进行标签间的切换
调整布局
右击条目名称可在上下两部分间移动
Run command
快捷键： shift + command + p
截屏
输入 capture full 即可看到 capture full size screenshot 执行它，你就可以得到一张当前页面的截图
暗黑主题
将 DevTool切换至暗黑色：switch to dark theme
Element
左侧为DOM结构，节点上右击可进行操作，这里着重列出较重要或不明显的功能，下文列表同
- 选定节点上按
h可隐藏 - 右击 => Break on，可针对 DOM 设置断点
- Capture node screenshot 获得节点截图
右侧为选中节点的详细属性。
- Style 显示应用其上的所有 css，右上方 :hov 和 .cls 可展开，分别为控制伪类效果和 class 应用
- Computed 可按 css 属性名查看生效属性
- DOM Breakpoints DOM 断点列表
Console
Live expression
上方 Filter 左侧可以看到一个眼睛图标（Live expression），可实时显示键入表达式的值，适合需要持续查看的变量。
console.table
以一个更优雅的方式来打印数组或对象，大概率你会喜欢上它
进一步，你不妨在需要同时打印多个原始类型变量时使用 console.table，例如 console.table({a, e, b}) 而不是 console.log(a, b, e)
Console.dir
以对象形式打印 DOM 节点的所有信息
Sources
对于这部分内容我不认为我可以讲得比这篇文章更好：使用断点暂停代码，推荐直接参考这篇文章，而下面则是我认为在这文章基础上再值得一提的内容
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
watch
位于 JavaScript Debugging 中，具有和上文提到的 Live expression 同样的功能
snippets
可以存储一段 js 代码，在任何任何时候执行，这项功能一个应用场景是你需要在一个共同开发项目中，每次进行一些每个人个性化的操作，你便可以将这段代码保存在 snippets 中，在以后快速执行
在上文提到的 File Navigator 区域选择 snippets，选择 New snippets 创建一份代码片段并命名
以后你就可以在任何时候先使用 command + p 唤出 command menu，再键入一个 ! 即可看到所有代码片段，选则或键入代码片段名称执行即可
在 command menu 中键入
>即是 Run command 状态，你可以在 command menu 中键入?查看所有功能
XHR/fetch Breakpoints
在 JavaScript Debugging 内，通过添加的关键字匹配，当请求 URL 中包含关键字时，断点生效
Conditional breakpoints
条件断点：在对应行号右击 => add conditional breakpoints，再输入一个表达式。当表达式为真，断点会是生效状态，反之断点不生效
使用 Webstorm 调试 React/Vue 项目
Run => Edit Configurations，新建一个 Javascript Debug 配置项
针对当前项目配置调试地址和调试用浏览器，保存
在代码中设置断点
接着先按原方式 start 起来，再 Run => Debug 'xxxx（配置项名称）'
这时 Webstorm 会启动一个运行在新进程上的 Chrome，当程序运行至断点代码处时，就可开始正常调试了
Network
隐藏时间轴
点击右侧小齿轮 Show overview 可以决定时间轴的显示和隐藏，如果你不需要它，大可以隐藏掉它
自定义显示属性
在列表头部右击可以选择显示属性
显示调用栈
将鼠标悬停于请求的 Initiator 属性上，即可显示请求的调用栈，以此定位请求发起位置
Filter
使用类似 method:POST 或 -method:POST 命令进行正反过滤
filter 右侧可选择类别进行筛选
模拟慢网络
filter 上方可进行不同网络状态的模拟
Performance
用来详细记录页面活动，分析性能
首先附一个 Performance 的简述：Chrome Devtool — Performance
Overview
以 overview 中 FPS 项为例说明图像：FPS 对应的绿色曲线，高度越高，代表帧率越高。在帧率持续低部分，有可能出现红色条块，红色条块长度与卡顿程度正相关。
火焰图
下方火焰图部分，我们以 Main 为例。Main 表示的是页面的主线程，以一个倒置的火焰图呈现，每一个 Task 的宽度，对应其运行时间，纵向为其调用树。对于占时较长的 Task，右上角会有一红三角标识，代表 Long task
Memory
Heap snapshot
创建堆快照
选中 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
Application
Storage
常用存储的查看和操作
Frames
顶级 top 下展开就是当前页面的字体、图片等资源，同样包括 iframe 内容
参考
Chrome 开发者工具 | Chrome DevTools | Google Developers【推荐一读】
你不知道的 Chrome 调试技巧 - dendoink - 掘金小册
以及上文中已出现的所有链接
标签：右击,Chrome,command,使用,DevTools,窗格,断点,页面 来源： https://www.cnblogs.com/voniu/p/14407884.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。