打开 Chrome （浏览器）开发者工具，如下图。
方法1：在右上角 Chrome（浏览器） 菜单 >
更多工具>开发者工具方法2：F12 键
可以看到一共分为10个面板，其中主要有比较常用、基础的四个面板：
Elements（元素面板）、Console （控制台面板）、Sources（源代码面板）、Network（网络面板）
其他面板，如：
Performance（性能面板）、 Memory（内存面板）、 Application（应用面板）、 Security（安全面板） 等。
为了更加直观入门 Devtools工具，新建一个txt文件，写入如下代码，并修改文件后缀为 .html
打开html，并按下F12键（调试出开发者工具Devtools），菜单面板，调整下布局
.txt 文件转换为 .html 的结果 Elements（元素面板），如下图所示
（1）可以看到 Element面板主要用来：检查和调试页面、样式；编辑 DOM。即针对当前页面的html和css。
（2）Console （控制台面板）主要输出 JavaScript 控制的信息；命令行交互。
（3）Sources（源代码面板）可以 设置断点来调试 JavaScript。
（4）Network（网络面板）可以看到请求和下载的资源文件；加载资源时间轴 等等
以上，就是常用的Devtools入门简介，重要的是自己动手试试吧。
来源：CSDN
作者：JonesZon
链接：https://blog.csdn.net/sinat_41838539/article/details/104796632