大体笔记：这里只罗列出了之前没有特别熟练的知识点和对平时开发有帮助的点。具体的可以查看网站：
https://www.html.cn/doc/chrome-devtools/console/expressions/
第一部分：一些基础用法补充
一、概述了面板内容
1、快捷键打开控制台：使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)
2、面板包括 元素面板、控制台、网络、时间轴、资源、安全面板
二、配置和自定义devtools
1、按Cmd + Shift + P（Mac）或Ctrl + Shift + P（Windows，Linux）打开命令菜单
2、右上角三个点，点开，进入setting>preference>appearance，theme改为dark则换成深色主体
3、点击右上三个点图标，选择more tools,可添加很多工具到面板中，如animations，sensors传感器等
三、application：调试 Progressive Web Apps
四、security
1、显示是否安全
2、切换页面，点击不安全的源，面板会显示一个到network的链接。
五、键盘快捷键和UI快捷键参考
键盘快捷方式：
| 快捷键 |
在Windows |
在Mac |
| 打开开发者工具 |
F12，Ctrl+Shift+I |
Cmd+Opt+I |
| 打开 / 切换检查元素模式和浏览器窗口 |
Ctrl+Shift+C |
Cmd+Shift+C |
| 打开开发者工具并把焦点放在控制台上 |
Ctrl+Shift+J |
Cmd+Opt+J |
| 下一个面板 |
Ctrl+] |
Cmd+] |
| 上一个面板 |
Ctrl+[ |
Cmd+[ |
| 切换控制台/关闭设置对话框（如果打开） |
Esc |
Esc |
| 打开设备模式 |
Ctrl+Shift+M |
Cmd+Shift+M |
| 后退面板历史 |
Ctrl+Alt+[ |
Cmd+Opt+[ |
| 刷新页面 |
F5,Ctrl+R |
Cmd+R |
| 刷新页面并清除缓存 |
Ctrl+F5,Ctrl+Shift+R |
Cmd+Shift+R |
| 在当前文件或面板中搜索文本 |
Ctrl+F |
Cmd+F |
| 在所有来源中搜索文本 |
Ctrl+Shift+F |
Cmd+Opt+F |
鼠标操作快捷方式及功能：
1、elements面板中，右键点击元素，选择edit as html,可以对整个元素及内部元素进行编辑
2、element面板右上角 的：hov， 可以模拟元素的伪类状态， +> 可以添加新的样式选择器
面板快捷方式：（只保留了一些常用的）
| Elements 面板 |
Windows |
Mac |
| 撤销修改 |
Ctrl+Z |
Cmd+Z |
| 导航 |
Up,Down |
Up,Down |
| 展开 / 折叠节点 |
Right,Left |
Right,Left |
| 展开 / 折叠节点及其所有子节点 |
Ctrl+Alt+点击剪头图标 |
Opt+点击剪头图标 |
| 编辑属性 |
Enter,属性上双击 |
Enter,属性上双击 |
| 隐藏元素 |
H |
H |
| 切换编辑HTML |
F2 |
|
| Styles(样式)窗格 |
Windows |
Mac |
| 跳转到 Sources 面板中样式规则属性声明的那一行 |
Ctrl+点击属性名 |
Cmd+点击属性名 |
| 跳转到 Sources 面板中属性值声明的那一行 |
Ctrl+点击属性值 |
Cmd+点击属性值 |
| 切换颜色值表示法 |
Shift+点击颜色选择器小方块 |
Shift+点击颜色选择器小方块 |
| 编辑 下一个/ 上一个 属性 |
Tab,Shift+Tab |
Tab,Shift+Tab |
| Sources 面板 |
Windows |
Mac |
| 暂停/恢复脚本执行 |
F8,Ctrl+\ |
F8,Cmd+\ |
| 保存所有更改 |
Ctrl+Alt+S |
Cmd+Opt+S |
| 跳转到行 |
Ctrl+G |
Ctrl+G |
| 以文件名搜索 |
Ctrl+O |
Cmd+O |
| Timeline (时间轴)面板 |
Windows |
Mac |
| 启动/停止记录 |
Ctrl+E |
Cmd+E |
| 保存时间线数据 |
Ctrl+S |
Cmd+S |
| 载入时间线数据 |
Ctrl+O |
Cmd+O |
| Console的快捷方式 |
Windows |
Mac |
| 清空控制台 |
Ctrl+L |
Cmd+K,Opt+L |
| 多行输入 |
Shift+Enter |
Ctrl+Return |
| 执行 |
Enter |
Return |
| 更多的Chrome快捷方式 |
Windows |
Mac |
| 查找下一个 |
Ctrl+G |
Cmd+G |
| 查找上一个 |
Ctrl+Shift+G |
Cmd+Shift+G |
| 在隐身模式打开新窗口 |
Ctrl+Shift+N |
Cmd+Shift+N |
| 切换和关闭书签栏 |
Ctrl+Shift+B |
Cmd+Shift+B |
| 查看历史页 |
Ctrl+H |
Cmd+Y |
| 查看下载页面 |
Ctrl+J |
Cmd+Shift+J |
| 查看任务管理器 |
Shift+ESC |
&am |
六、Aplication
1、clear storage 》 clear site data,会清除掉特定来源的所有数据
2、每个 cookie 提供了以下字段:
| Cookie 字段 |
描述 |
| Name |
Cookie 的名称。 |
| Value |
Cookie 的值。 |
| Domain |
Cookie 的域。 |
| Path |
Cookie 的路径。 |
| Expires / Maximum Age |
Cookie 的过期时间或最长周期。对于会话 cookie，这一领域始终是`Session`(会话)。 |
| Size |
Cookie 的大小，以字节为单位。 |
| HTTP |
如果存在，则指示应仅通过 HTTP 使用 cookie，并且不允许 JavaScript 修改. |
| Secure |
如果存在，则此 cookie 的通信必须在加密传输。 |
七、模拟移动设备
1、除常用的方法外，移动设备模式，还可以点击小手机旋转按钮模拟屏幕旋转。
八、调试安卓设备
https://www.html.cn/doc/chrome-devtools/remote-debugging/
九、检查和调试Js
1、{}美化代码拆成多行，代码行点击行号打断点
2、添加条件断点，当满足所设置的条件之后，才触发断点：
右键点击行号，选择add conditional breadpoint,设置判断条件，条件断点是黄色的。
3、运行代码片段：source左上角 》 符号，选择snippets
4、监视变量：右键添加到watch，在watch面板，可以对变量增删改
十、console控制台
1、使用console.table可以比较输出的数组对象
2、console.time 加上console.timeEnd()组合，可以计算执行时间
3、$0匹配制定的第一个dom元素，$(selector)返回匹配指定CSS选择器的第一个DOM元素的引用。这个函数是document.querySelector()函数的别名。
第二部分 性能查看与分析
一、如何查看性能---时间轴
1、有的版本是有timeline时间轴编办，有的是显示performance面板。
第一个圆圈点击开始记录，第二个是刷新然后自动记录，第三个停止
2、面板窗格介绍
Controls： 开始录制，停止录制，并配置在录制过程中捕获的信息。
Overview： 页面性能的高级摘要。 更多关于这一点见文章下面。
Flame Chart： CPU 栈跟踪的可视化。
Details： 选择事件时，此窗格显示有关该事件的更多信息。 当未选择任何事件时，此窗格显示有关所选时间范围的信息。
如上图所示：
其中
1、勾选后，下面面板中展示对应的记录。
scereemshots 屏幕截图
memory 内存记录
2、 overview窗格里，对应一些资源参数：
FPS： 每秒帧数。绿色条越高，FPS越高。FPS曲线图上方的红色块表示长帧，这可能是jank的候选。
CPU： CPU资源。此区域图表指示哪些类型的事件消耗CPU资源。
NET：每个彩色条代表一个资源。条越长，表示检索该资源所花费的时间越长。每个条的较亮部分表示等待时间（从请求资源到下载第一个字节之间的时间）。较暗的部分表示加载时间（下载第一个到最后一个字节之间的时间）
可以鼠标缩放展示范围，查看具体的变化。
3、加载展示面板，从上倒下依次是
(1)、network网络：展开后可以查看该页面的网络请求触发和结束时间，耗时。
（2）、frames截图：每一帧的截图，可查看对应时间的页面展示内容
（3）、interactions交互：包括了动画animation
(4)、timings时间点：包括了几个关键的时间点和彩线
绿线表示第一次绘制的时间。 （从白屏到有数据的时间：dom开始渲染，因为dom是边加载边渲染的，绿线开始就是开始有页面内容了）
蓝线代表DOMContentLoaded事件。 （dom渲染完成时间）
红线代表load事件。（资源加载完成的时间）
黑线代表首次有效加载时间。
（5）、mian主要内容：可以查看每个阶段具体的加载内容
4、memory面板，可以查看内存情况
鼠标移入之后，会显示当前时间点js\dom等数量。
5、饼图汇总
从左到右依次是
（1）summary总结：
4中彩色条代表的含义如下：
- HTML文件是 blue (蓝色) 的。
- 脚本是 yellow (黄色) 的。
- 样式表是 purple (紫色) 的。
- 媒体文件是 green (绿色) 的。
- 其他杂项资源是 grey (灰色) 的。
蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间
（2）后面是几个耗时的不同排序：自底层而上各类别耗时、顺序耗时、根据事件勾选不同的选项
二、分析运行时性能
https://www.html.cn/doc/chrome-devtools/rendering-tools/
可参考链接https://blog.csdn.net/zhenzigis/article/details/50556440，以及https://www.cnblogs.com/ranyonsue/p/9342839.html专门对这一块儿的分析
三、评估网络性能---network
除基本平时的应用外：
1、查看各个资源请求的耗时、内容等等，timing
2、Network Conditioning(网络调节)设置不同的数据传输速率以供调研
四、修复内存问题
1、在performance页面的记录中，勾选memory，重新记录，可以录制可视化内存泄漏
简单来看：内存占用 处在平稳，则说明没有内存泄漏；如果内存占用 一直处于上升趋势 则说明内存泄漏了
更具体的内存泄露分析，可见：https://blog.csdn.net/c11073138/article/details/84700482
2、更复杂的内存分配可进入memerry页面
五、devtools扩展
1、devtools是可以扩展的，如果它缺少什么功能，可以找到一个现有的插件，或者自己写一个扩展程序
有两种基本方式使用 DevTools 建立一个自定义的解决方案：
- DevTools Extension（开发者工具扩展程序）。一个 Chrome 插件，可插入 DevTools 来添加他的功能并扩展其 UI。
- 调试协议客户端。一个第三方应用，使用 Chrome 的远程调试协议来插入到低版本调试支持的 Chrome 中.
有了以上基础，就可以对一个页面做简单的性能分析了。如果发现某一项可以优化，则可以更深入的研究，性能优化的方式很多，需要有针对性的处理，这里暂不做描述。
