Devtools入门

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

 

1.打开

打开 Chrome （浏览器）开发者工具，如下图。

方法1：右上角 Chrome菜单 >  更多工具 > 开发者工具

方法2：在页面元素上右键点击，选择 “检查”

方法3：F12 键

可以看到一共分为10个面板，其中主要有比较常用、基础的四个面板：

Elements（元素面板）、Console （控制台面板）、Sources（源代码面板）、Network（网络面板）

Performance（性能面板）、 Memory（内存面板）、 Application（应用面板）、 Security（安全面板） 等。

 

---

 为了更加直观入门 Devtools工具，新建一个txt文件，写入如下代码，并修改文件后缀为 .html

       

 

打开html，并按下F12键（调试出开发者工具Devtools），菜单面板，调整下布局

 

（1） Element（元素面板）：

• 检查和调整页面
• 编辑样式
• 编辑DOM

即检查和实时编辑页面的 HTML 与 CSS。当然默认情况下，修改的样式在重新加载页面时更改会丢失。

 （2）Console （控制台面板）：

• 使用控制台面板
• 命令行交互

记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。

 （3）Sources（源代码面板）：

• 断点调试
• 调试混淆的代码
• 使用开发者工具的Workspaces（工作区）进行持久化保存

设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

 （4）Network（网络面板）：

• 网络面板基础
• 了解资源时间轴
• 网络带宽限制

          使用网络面板了解请求和下载的资源文件并优化网页加载性能。

以上，就是常用的Devtools入门简介，重要的是自己动手试试吧。 

详细教程在哪？？不用去啥博客、知乎、贴吧等渠道了解，很简单。