## 1. Chrome DevTools功能简介 Chrome DevTools 由以下九部分组成：● Element 元素面板：检查和调整页面，调式 DOM，调试 CSS● Network 网络面板：调试请求，了解页面静态资

1. 选择和检查 DOM 元素在 Chrome DevTools 的 Console 面板中，可以输入一些带 $ 的命令来选择和检查 DOM 元素。 $0 - $4 命令可以用来显示在 Elements 面板中检查的最后五个 DOM

1. 保留日志当我们刷新完页面之后，通常控制台的 Console 面板就会被清空。如果想保留控制台的日志，就可以在设置中勾选 Preserve log 选项以保留控制台中的日志。 2. 代码覆盖率我们可以打开设置，在 Experi

Chrome DevTools 是前端开发人员最常用的工具之一，今天我们就来看 5 个 Chrome DevTools 中实用的实验性功能，开启这些隐藏功能，让你的 Chrome 更加强大！本文中使用的 Chrome 浏览器版本：99.

前言前端开发中我们最常需要调试的部分是 JS ，在调试 JS 的过程中，我们最常使用的方法便是 debug 调试。何为 debug 调试？ debug 调试又名断点调试，它指的是在程序指定位置设置断点，当程序运行到这个断点时会暂停执行

前言如果统计一番前端最常用的方法，那么 console.log 一定位列其中。无论你写的是原生 JS 亦或者是 JQuery、Vue 等等，调试之时，都离不开 console.log 方法。但是，console 对象中的方法不仅仅只有

前端性能优化一直是前端工作中必不可少的一部分，但是我们如何知道哪些部分的性能有优化的空间呢？此时，Chrome 性能监测就派上用场了。 正所谓：知己知彼，百战百胜，只有确定了性能瓶颈，才能有条不紊地进行前端性能优化工作。 Perfor

前言在前端开发过程中，我们通过浏览器的页面来查看我们代码编写的成果。然而浏览器的功能非常强大，它不只是能展示我们编写的页面，还能够帮助我们定位开发过程中遇到的问题，提升我们的开发效率。有些时候我们甚至还可以通过浏览器的调试工具来查看一