羞与为伍，共生共存
一个开发的起步，便于bug同行了，即使技术再怎么厉害，能力再怎么出众也不例外，有人的地方便有了江湖，同样有程序员的地方变有了bug，程序员造就了bug，但同样bug也成就程序员。
借力打力，挥刀断情
既然bug不可能消失，只能尽可能的减少，在测试阶段无法发现的隐藏bug出现时，我们能快速的定位bug、确认bug、修复bug也算是亡羊补牢，为时未晚.....
chrome开发者工具基础
chrome开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。
-
元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面
-
控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行~
-
源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
-
网络（Network）：网络页面主要用于查看header等与网络连接相关的信息
模拟传感器（地理位置，手机朝向）
点击更多工具中的Sensors（传感器）
元素事件侦听器
如果勾选了Ancestors（祖先），那么会展示祖先节点的事件，通常不需要勾选这个。
点击事件右侧的链接可以跳转到附加事件的代码。
通常一些js框架或库（比如jQeury）会将原生DOM事件进行封装，而这会导致我们通过元素事件侦听器跳转到的代码是这些库文件的封装代码。
不过如果我们勾选了Framework listeners（框架侦听器），那么就会跳转到我们使用库文件事件API的地方，而不是库文件里。
Framework listeners对于jQuery这样对事件进行简单封装的特别好用，但是对于React这种的话作用有限。
如何快速定位到问题相关的代码
但是很多情况，接口业务错误会以 http status 200 的状态码返回，如果此时请求了大量的接口（举个例子：进入页面调用了大量的接口，其中有一个接口返回了错误信息），那么除了逐个翻阅 network 这种低效的方式，chrome devTools 还提供了 network search 面板这种更便捷的方式，可以搜索接口详细信息（包括详细的返回信息），返回匹配结果。
如何打开 network search 面板？
在 network 面板中，按快捷键 ⌘ + F（Mac）、 CTRL + F（Windows）可呼出 network search 面板。
global search ，全局搜素关键字，再定位到关键的代码
chrome devTools 的 global search 是一个非常实用的一个功能，
当你不知道需要调试的代码在哪个文件时，当你是一个非常大的系统，引用了很多的资源文件，你可以使用 global search 进行搜索关键字，这个操作会搜索所有加载进来的资源，点击搜索结果，就可以使用 source 面板打开对应的资源文件，然后格式化代码，再然后在当前的文件内 再次搜索关键字，打断点。
打开 global search 快捷键：
⌘ + ⌥ + F （Mac），CTRL + SHIFT + F （Windows）
看下图例子，我们随便找个页面根据提示搜索代码：
如何在生产环境使用本地 sourceMap 调试
第一步：打开混淆代码
第二步：右键 -> 选择【Add source map】
第三步：输入本地 sourceMap 的地址（此处需要启用一个静态资源服务，可以使用 http-server (www.npmjs.com/package/htt… sourceMap 配置，编译产生出构建后的代码，此时构建后的结果会包含 sourceMap 文件。
关联上 sourceMap 后，我们就可以看到 sources -> page 面板上的变化了
使用本地文件调试生产环境网站代码
们调试生产环境的BUG，经常需要修改样式或者js，但是页面一刷新这些东西就又还原了。
所以这里有个神技，可以将生产环境的引用文件进行本地化，然后修改本地化后的文件进行调试。
首先我们需要打开在Source面板下左侧的Overrides选项卡，选择一个本地文件夹作为覆盖文件夹。
首先，打开 sources 下的 overrides 面板；
然后，点击【select folder overrides】选择修改后的文件存储地址；
再然后，点击顶部的授权，确认同意；
最后，我们就可以打开文件修改，修改完成后保存，重新刷新页面后，修改后的代码就被执行到了。
⚠️注意，原js文件直接 format 是无法修改的；在代码 format 之前先添加无效代码进行代码变更进行保存，然后再 format 就可以修改
Rendering选项卡（高亮重排重绘合成层，fps和gpu占用，滚动优化，媒体查询模拟如打印）
Rendering选项卡，顾名思义是做一些渲染相关的事。
通过下图方式打开Rendering选项卡：
-
Paint flashing 高亮页面重绘区域。
-
Layout Shift Regions 高亮布局变动区域（重排）。
-
Layer borders 高亮合成层边框，对于减少合成层还是挺好用的。
以上三点，如果不太清楚，可以看看这篇好文：浏览器渲染详细过程：重绘、重排和 composite 只是冰山一角。
简略一点来说，渲染过程就是DOM树+样式树，合成渲染树，渲染树加上层叠遮罩之类的再演变为Layer树，Layer树再合成为为Graphics Layers即Composite Layer，再丢给GPU进行处理。
-
Scrolling Performance Issues 用于优化滚动性能问题。
这个是用来高亮可能会影响滚动性能的元素，这些元素主要指绑定了scroll事件和touch事件的元素。
scroll大家可能会比较理解，touch的话其实也可以影响滚动性能，最直观的就是只要我们禁止了某元素上touch的事件中禁止浏览器默认行为，那么就不会再触发scroll事件。
而touch的影响还不止如此，比如将touch-action改为manipulation可以减少移动端浏览器在用户点击事件的延迟，但是这个东西会影响到滚动时的性能。
当您开Scrolling Performance Issues发现页面上一堆高亮的touch事件时，可以考虑touch-action:auto来去除。
具体的优化可能得根据实际情况去处理，哪里有问题优化哪里，取得一个平衡即可。
-
Highlight ad frames 高亮用于广告的iframe（试了下，谷歌的推广广告识别没问题，百度的没测）。
-
Hit-test borders 展示点击测试的区域。（鸡肋，请忘记）。
-
Emulate CSS media type 模拟媒体查询是打印还是终端屏幕。
-
Emulate CSS media feature prefers-color-scheme 模拟媒体查询的系统主题，具体参考prefers-color-scheme。
-
Emulate CSS media feature prefers-reduced-momition 模拟媒体查询的开启动画减弱功能，具体参考prefers-reduced-motion。
网络面板关于网络请求的一些优化
同域名请求数量限制（HTTP/1.0或HTTP/1.1）
如果网络请求出现排队的情况，那么说明是在单个域上提出了太多请求。
在HTTP/1.0或HTTP/1.1连接上，Chrome每个主机最多允许六个同步TCP连接。
想要优化这一点，可以将关键请求提前，不关键请求延后。
如果都是关键请求，那么可以尝试使用HTTP 2。（在Network面板可以展示Protocol显示）
如果条件有限，可以将这些请求放在不同的域名上，然后用nginx指向同一个源头，这样同样可以解决这个问题
请求第一个字节的时间过长 Time To First Byte (TTFB)
可以看见每个请求后面都有一个绿色的区域，这个绿色区域表示每个请求的Time To First Byte (TTFB)，即请求第一个字节的时间。
点开一个具体的请求，看一下
通常原因是浏览器与服务端的请求连接速度很慢，或者服务端的请求响应过慢。
简单来说，就是网络连接慢，或者是服务端代码写得太辣鸡。
如果是网络连接慢，可以用CDN，或者换个近一些的服务器。
如果是服务端响应慢，那么可以考虑缓存，或者优化接口，那就是服务端的事情了。
内容下载慢
一般表现于请求的下载时间过长，也就是请求后面跟着的蓝条。
原因基本上就是js或者其它的一些资源文件太大了，导致下载过慢。
因为用的是100M的网，所以我比较难找这样的例子，不过用浏览器的模拟3G网的话，其实博客园很多那种二次元风格，自带一张二次元大背景的博客都会出现这种现象。
这种建议将图片尺寸压缩一下。
这里列出Timing选项卡可以看到的各个时间阶段：
- Queueing（排队）：浏览器在以下情况下将请求排队:
- 有更高优先级的请求。
- 已为该来源打开了六个TCP连接。仅适用于HTTP/1.0和HTTP/1.1。
- 浏览器正在磁盘缓存中短暂分配空间
- Stalled：出于Queueing中描述的任何原因，该请求都可能被暂停
- DNS Lookup：浏览器正在解析请求的IP地址
- Proxy negotiation：浏览器正在与代理服务器协商请求
- Request sent：请求发送时间
- ServiceWorker Preparation：浏览器正在启动service worker
- Request to ServiceWorker：请求发送到service worker的时间
- Waiting (TTFB): 浏览器等待第一个字节响应的时间
- Content Download：响应内容下载时间
- Receiving Push：浏览器正在通过HTTP/2服务器推送接收此响应的数据
- Reading Push： 浏览器正在读取先前接收的本地数据。
