这是我参与「第四届青训营」笔记创作活动的的第 8 天
Chrome Dev Tools
在页面上右键并点击检查或者按 F12 可以打开 Chrome Dev Tools。
Element
在 Element 选项可以看到当前页面的 DOM 结构，可以在这里手动修改 DOM 以及元素的内容、样式、属性等。
Console
在这里可以看到当前页面的 JavaScript 执行输出信息，还可以在此处手动输入 JavaScript 代码来执行。
在 JavaScript 代码中，打印调试信息的方式有很多种。
console.log打印标准信息。console.warn打印警告信息。console.error打印错误信息。console.debug打印调试信息。console.info与console.log相同。
console.log 还可以为打印的文字添加样式，可以通过 %c%s 来打印信息，%c 表示样式占位符，%s 表示字符串占位符。
栗子：console.log('%c%s', 'color: red;', 'helloworld') 打印一个红色的 helloworld。
此外，还有 console.dir 用于输出树形结构的对象，console.table 用于将对象属性作为表格输出。
Source
Source Tab 中会展示项目的所有资源。
在这里可以对资源进行 override，当浏览器再次加载这个资源的时候就会使用本地 override 的资源。
- 页面资源文件目录树。
- 代码预览区域
- debug 工具。
- 断点调试器。
添加断点
添加断点有两种方式，可以 override 代码并添加 debugger;，当 JavaScript 执行到这里的时候就会被中断；另一种方式是在需要添加断点的代码行左边点击即可添加断点，再次点击取消断点。
还可以在右边 debug 工具中临时停用一个断点。
观测变量
在右边 debug 工具中的 watch 一栏，添加要观测的变量，将会实时展示当前变量的值。
Network
Network Tab 可以看到站点在加载的过程中所发出的请求。可以查看请求的详细信息，以及请求的瀑布图等。
还可以在该 Tab 中模拟弱网络环境下的页面请求。
Application
Application Tab 展示了站点中与存储相关的信息。也可以在这里修改、清除网站中存储的数据。
Performance
可以监控各个事件的时间消耗，分析网站的性能，并针对优化。
Lighthouse
有点类似于 Performance，但只会展示一些关键的前端性能指标，以及性能评分。
