共计 1317 个字符，预计需要花费 4 分钟才能阅读完成。
1. 查看元素伪类 css 款式
例如我想查看元素触发 hover 时的 css 款式。先选中该元素，而后按下图操作：
2. 长期增删元素 class
3. document.body.contentEditable="true"
在控制台输出 document.body.contentEditable="true"，就能够对页面间接进行编辑。
4. 查看 placeholder 款式
当初能够查看元素的 placeholder 款式了：
5. 测试页面性能和 SEO
上面是测试报告：
参考资料：
- 应用 Lighthouse 审查网络应用
6. Network 显示资源的其余信息
个别 Network 会显示加载资源的详细信息，但它默认只显示局部信息。如果我想查问网页资源是通过 HTTP1.1 还是 HTTP2 加载的，要怎么做呢？
从 GIF 中能够看出，除了 HTTP 协定版本外，还能够查看其余信息，例如 HTTP 申请的办法、域名等等。
7. 查看元素绑定事件
鼠标移到 handler 上，可查看具体的函数代码。
8. 全局搜寻代码
关上开发者工具，点击 Console 标签，按 ESC 弹出：
点击右边竖形排列的三个小点，抉择 Search：
点击搜寻后果，会跳到具体的源码文件。它会搜寻该网页下所有引入的文件。
9. 利用 Performance 查看运行时性能
关上开发者工具，点击 Performance 标签：
点击左上角的 Record 按钮开始记录，而后你模仿失常用户应用网页。测试结束后，点击 Stop。
能够看到右上角别离有 FPS、CPU、NET、HEAP：
- FPS 对应的是帧率，红色代表帧率低，可能会升高用户体验；绿色代表帧率失常，绿色条越高，FPS 越高。
- CPU 局部上有黄色、紫色等色块，它们的释义请看图的左下角。谁的占比高，阐明 CPU 次要的工夫花在哪里。
- HEAP 就是堆内存占用。
NET 最好点击上面的 Network 查看，能够看到具体的加载资源等。
个别依据这些信息就能判断出网页性能问题出在哪。
如果想理解更多，请查看上面的参考资料，须要翻 qiang。或者用搜索引擎搜寻 chrome performance，也有很多解说应用办法的文章。
参考资料
- Get Started With Analyzing Runtime Performance
10. Rendering 实时检测网页变动
关上开发者工具，点击 Console 标签，按 ESC 弹出：
点击右边竖形排列的三个小点，抉择 Rendering：
上面是比拟实用的性能：
- Paint flashing，实时高亮重绘区域（绿色）。
- Layout Shift Regions，实时高亮重排（从新布局）区域（蓝色）。
- Layer borders，将合成层用边框标出来（橙色、橄榄色、青色）。
- Frame Rendering Stats，显示 GPU 的信息，旧版本还有实时 FPS 显示，但新版本不晓得为何没有（chrome 86）。
11. Application 查看利用信息
从图中看到，在 Application 标签下能够查到本页面很多信息。拿 localStorage 举例，当初我执行代码 localStorage.setItem('token', '123')，而后关上 Application：
不出意外，能看到新增的 localStorage 信息。
