1.3.2 Chrome开发者工具

在谷歌浏览器 Chrome 中使用功能键［F12］可以打开开发者工具，它是为前端开发者提供的用来调试和分析前端应用的工具。开发者工具的功能模块包括元素（Elements）检视器、移动终端模拟、控制台（Console）、资源查看器、网络、源代码（Sources）、性能分析、内存使用情况分析、前端应用、安全、审计。

Chrome开发者工具最常用的4个功能模块是元素检视器、控制台、源代码、网络。

（1）元素检视器：用户查看或修改HTML元素的属性、CSS属性、监听事件、断点等。CSS可以即时修改、即时显示，方便开发者调试页面。如图1-14所示，单击开发者工具中左上角的箭头图标（或按快捷键【Ctrl】+【Shift】+【C】）进入选择元素模式，然后从页面中选择需要查看的元素，可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。定位到元素的源代码之后，可以从源代码中读出该元素的属性。

（2）控制台：一般用于执行一次性代码，查看JavaScript对象、调试日志信息或异常信息，如图1-15所示；它还可以当作JavaScript APl使用，例如要查看Console有哪些方法和属性，可以直接在Console中输入“console”并执行。

（3）源代码：用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，如图1-16所示。此外，最重要的是，它还可以调试JavaScript源代码、为JavaScript代码添加断点。

（4）网络：该模块主要用于查看Headers等与网络连接相关的信息，如图1-17所示。

其中，位于面板左上角的3个按钮较常用，它们的功能如下。

① 记录按钮：该按钮处于打开状态时会在此面板进行网络连接的信息记录，该按钮处于关闭状态则不会记录。

② 清除按钮：清除当前的网络连接记录信息。

③ 过滤器：能够自定义筛选条件，找到想要的资源信息，如图1-18所示。