如何使用Web浏览器开发者工具

面向Web设计人员，开发人员和测试人员的集成工具集

除了大多数浏览器制造商专注于寻找网上冲浪的日常用户之外，他们还迎合了Web开发人员，设计师和质量保证专业人员，他们通过将强大的工具直接集成到浏览器中帮助构建这些用户正在访问的应用程序和网站他们自己。

在浏览器中发现的唯一编程和测试工具允许您查看页面的源代码的日子已经一去不复返了。 通过执行和调试JavaScript片段，检查和编辑DOM元素，在您的应用或页面加载时监控实时网络流量以识别瓶颈，分析CSS性能，确保您的代码是现在的浏览器不利用太多的内存或太多的CPU周期等等。 从测试的角度来看，您可以通过响应式设计和内置模拟器的魔力，重现应用程序或网页在不同浏览器以及不同设备和平台上的呈现方式。 最好的部分是，你可以做所有这些，而不必离开你的浏览器！

以下教程将引导您了解如何在多个常用Web浏览器中访问这些开发人员工具。

谷歌浏览器

Chrome的开发人员工具允许您编辑和调试代码，审核各个组件以显示性能问题，模拟不同的设备屏幕，包括运行Android或iOS的设备屏幕，以及执行其他一些有用的功能。

1. 点击Chrome的主菜单按钮，标记为三条水平线，位于浏览器的右上角。
2. 出现下拉菜单时，将鼠标光标悬停在“ 更多工具”选项上。
3. 现在应该出现一个子菜单。 选择标记为开发者工具的选项。 您还可以使用以下键盘快捷键代替此菜单项：Chrome OS / Windows（ CTRL + SHIFT + I ），Mac OS X（ ALT（OPTION）+ COMMAND + I ）
4. 现在应该显示Chrome Developer Tools界面，如此示例屏幕截图所示。 根据您使用的Chrome版本，您看到的初始布局可能与此处显示的布局略有不同。 开发人员工具的主要集线器通常位于屏幕的底部或右侧，包含以下选项卡。
   元素：提供检查CSS和HTML代码的功能，以及即时编辑CSS，实时查看更改的效果。
   控制台： Chrome的JavaScript控制台允许直接命令输入以及诊断调试。
   来源：让您通过强大的图形界面调试JavaScript代码。
   网络：分类并显示活动应用程序或页面上每个相关操作的详细信息，包括完整的请求和响应标题以及高级时序指标。
   时间轴：一旦启动页面或应用程序加载请求，就可以深入分析浏览器内发生的所有活动。
5. 除了这些部分之外，您还可以通过位于时间轴选项卡右侧的>>图标访问以下工具。
   配置文件：分解成CPU分析器和堆分析器部分，提供活动应用程序或页面的全面内存使用情况和总体执行时间。
   安全性：突出显示活动页面或应用程序中的证书问题和其他安全相关问题。
   资源：这是您可以检查当前网页或应用程序使用的Cookie，本地存储，应用程序缓存和其他本地数据源的位置。
   审计：提供优化页面或应用程序的加载时间和一般性能的方法。
6. Device Mode（设备模式）允许您在模拟器中查看活动页面，使其与在十几种设备上出现的模拟器几乎完全相同，其中包括多款知名的Android和iOS模型，如iPad，iPhone和Samsung Galaxy。 您还可以模拟自定义屏幕分辨率以适应您特定的开发或测试需求。 要打开和关闭设备模式 ，请选择位于元素选项卡左侧的手机图标。
7. 您还可以自定义开发人员工具的外观，方法是首先单击由三个垂直放置的点表示并位于上述选项卡最右侧的菜单按钮。 在此下拉菜单中，您可以重新定位底座，显示或隐藏不同的工具以及启动更高级的项目，例如设备检查器。 您会发现，通过本节中的设置，开发工具界面本身是高度可定制的。

火狐浏览器

Firefox的Web开发人员部分包括设计人员，开发人员和测试人员的工具，如风格编辑器和以像素为目标的吸管。

推荐阅读： 前25名Greasemonkey和Tampermonkey用户脚本

1. 点击Firefox的主菜单按钮，由三条水平线表示，位于浏览器窗口的右上角。
2. 出现下拉菜单时，选择标有Developer的图标。 现在应该显示Web Developer菜单，其中包含以下选项。 您会注意到大多数菜单项都有与其关联的键盘快捷键。
   切换工具：显示或隐藏开发人员工具界面，通常位于浏览器窗口的底部。 键盘快捷键：Mac OS X（ ALT（OPTION）+ COMMAND + I ），Windows（ CTRL + SHIFT + I ）
   Inspector：允许您通过远程调试来检查和/或调整活动页面以及便携式设备上的CSS和HTML代码。 键盘快捷键：Mac OS X（ ALT（OPTION）+ COMMAND + C ），Windows（ CTRL + SHIFT + C ）
   Web控制台：允许您在活动页面内执行JavaScript表达式，并查看各种记录的数据，包括安全警告，网络请求，CSS消息等。 键盘快捷键：Mac OS X（ ALT（OPTION）+ COMMAND + K ），Windows（ CTRL + SHIFT + K ）
   调试器： JavaScript调试器可以通过设置断点，检查DOM节点，黑盒子外部源等来查明和修复缺陷。 与Inspector一样 ，该功能还支持远程调试。 键盘快捷键：Mac OS X（ ALT（OPTION）+ COMMAND + S ），Windows（ CTRL + SHIFT + S）
   样式编辑器：允许您创建新的样式表并将它们与活动网页合并，或者编辑现有工作表并测试您的更改在浏览器中的显示效果，只需单击一次即可。 键盘快捷键：Mac OS X，Windows（ SHIFT + F7 ）
   性能：详细分析活动页面的网络性能，帧率数据，JavaScript执行时间和状态，闪烁等等。 键盘快捷键：Mac OS X，Windows（ SHIFT + F5 ）
   网络：列出浏览器发起的每个网络请求以及相应的方法，原始域，类型，大小和时间。 键盘快捷键：Mac OS X（ ALT（OPTION）+ COMMAND + Q ），Windows（ CTRL + SHIFT + Q ）
   开发人员工具栏：打开交互式命令行解释器。 在解释器中输入帮助以获取所有可用命令及其正确语法的列表。 键盘快捷键：Mac OS X，Windows（ SHIFT + F2 ）
   WebIDE：提供通过运行Firefox OS或Firefox OS Simulator的实际设备创建和执行Web应用程序的功能。 键盘快捷键：Mac OS X，Windows（ SHIFT + F8 ）
   浏览器控制台：提供与Web控制台相同的功能（请参阅上文）。 但是，返回的所有数据都是针对整个Firefox应用程序（包括扩展和浏览器级功能），而不仅仅是活动的Web页面。 键盘快捷键：Mac OS X（ SHIFT + COMMAND + J ），Windows（ CTRL + SHIFT + J ）
   自适应设计视图：允许您以不同的分辨率，布局和屏幕尺寸即时查看网页，以模拟包括平板电脑和智能手机在内的多种设备。 键盘快捷键：Mac OS X（ ALT（OPTION）+ COMMAND + M ），Windows（ CTRL + SHIFT + M ）
   吸管：显示单独选择的像素的十六进制颜色代码。
   Scratchpad ：让您可以在弹出的Firefox窗口中编写，编辑，集成和执行JavaScript代码片段。 键盘快捷键：Mac OS X，Windows（ SHIFT + F4 ）
   页面源代码：原始的基于浏览器的开发者工具，该选项只显示活动页面的可用源代码。 键盘快捷键：Mac OS X（ COMMAND + U ），Windows（ CTRL + U ）
   获取更多工具：在Mozilla的官方插件网站上打开Web Developer's Toolbox集合，其中包含十几种流行的扩展，如Firebug和Greasemonkey。

Microsoft Edge / Internet Explorer

通常被称为F12开发者工具 ，对从早期版本的IE浏览器，IE11和微软边缘开发工具集推出界面以来的键盘快捷键表示敬意，自推出以来已经走过了很长时间，提供了一组非常方便的监视器，调试器，仿真器和即时编译器。

1. 点击更多操作菜单，用三个点表示，位于浏览器窗口的右上角。 出现下拉菜单时，选择标有F12开发人员工具的选项。 正如我已经提到的，您也可以通过F12键盘快捷键访问这些工具。
2. 现在应该显示开发界面，通常位于浏览器窗口的底部。 可以使用以下工具，每个工具都可以通过单击各自的标签标题或使用随附的键盘快捷方式进行访问。
   DOM Explorer：允许您在活动页面中编辑样式表和HTML，随时渲染修改后的结果。 利用智能感知功能在适用的地方自动完成代码。 键盘快捷键： （CTRL + 1）
   控制台：提供通过集成API提交包括计数器，定时器，跟踪和自定义消息的调试信息的功能。 此外，让您将代码注入到活动的Web页面并实时修改分配给各个变量的值。 键盘快捷键： （CTRL + 2）
   调试器：允许您在执行时设置断点并调试您的代码，如有必要，逐行执行。 键盘快捷键： （CTRL + 3）
   网络：列出页面加载和执行期间由浏览器发起的每个网络请求，包括协议详细信息，内容类型，带宽使用情况等等。 键盘快捷键： （CTRL + 4）
   性能：详细介绍帧速率，CPU利用率以及其他与性能相关的指标，以帮助您加快页面加载时间和其他活动。 键盘快捷键： （CTRL + 5）
   内存：通过显示内存使用时间线和来自不同时间间隔的快照，帮助您隔离和纠正当前网页上的潜在内存泄漏。 键盘快捷键： （CTRL + 6）
   仿真：显示活动页面如何以各种分辨率和屏幕尺寸呈现，模拟智能手机，平板电脑和其他设备。 还提供修改用户代理和页面方向的功能，以及通过输入纬度和经度来模拟不同的地理位置。 键盘快捷键： （CTRL + 7）
3. 要在任何其他工具中显示控制台 ，请点击位于开发工具界面右上角的右方括号内的方形按钮。
4. 要解除连接，开发人员工具界面将成为一个单独的窗口，单击由两个级联矩形表示的按钮或使用以下键盘快捷键： CTRL + P。 您可以通过再次按下CTRL + P将工具放回原始位置。

Apple Safari（仅限OS X）

Safari的多样化开发工具集反映了大型开发者社区，他们利用Mac来满足他们的设计和编程需求。 除了功能强大的控制台和传统日志记录和调试功能外，还提供易于使用的响应式设计模式和创建自己的浏览器扩展的工具。

1. 点击位于屏幕顶部的浏览器菜单中的Safari 。 出现下拉菜单时，选择首选项 。 您也可以使用以下键盘快捷键代替此菜单项： COMMAND + COMMA（，）
2. 现在应该显示Safari的“首选项”界面，覆盖您的浏览器窗口。 点击位于标题最右侧的高级图标。
3. 高级首选项现在应该可见。 在这个屏幕的底部是一个选项，带有一个复选框，带有菜单栏中的Show Develop菜单 。 如果方框中没有显示复选标记，请点击一次将其放置在那里。
4. 点击左上角的红色'x'关闭首选项界面。
5. 您现在应该在位于书签和窗口之间的名为Develop的浏览器菜单中注意到一个新选项。 点击这个菜单项。 现在应该显示下拉菜单，其中包含以下选项。
   打开页面：使您可以在Mac上当前安装的其他浏览器之一中打开活动网页。
   用户代理：允许您从多个预定义的用户代理值中进行选择，包括Chrome，Firefox和Internet Explorer的多个版本，以及定义您自己的自定义字符串。
   进入自适应设计模式 ：呈现当前页面，因为它会出现在各种设备和不同的屏幕分辨率上。
   Show Web Inspector：启动Safari开发工具的主界面，通常放置在浏览器屏幕的底部，包含以下部分： 元素 ， 网络 ， 资源 ， 时间轴 ， 调试器 ， 存储 ， 控制台 。
   显示错误控制台：还会启动开发工具界面，直接显示错误，警告和其他可搜索日志数据的控制台选项卡。
   显示页面源：打开资源选项卡，其中显示按文档分类的活动页面的源代码。
   显示页面资源：执行与显示页面源选项相同的功能。
   显示代码片段编辑器：打开一个新窗口，您可以在其中输入CSS和HTML代码，即时预览其输出。
   显示扩展生成器：提供使用CSS，HTML和JavaScript创建或编辑Safari扩展的功能。
   显示时间线记录：打开时间线选项卡，并开始实时显示网络请求，布局和渲染信息以及JavaScript执行。
   清空缓存：删除当前存储在硬盘上的整个缓存。
   禁用缓存：停止缓存Safari，以便在每次加载页面时从服务器检索所有内容。
   禁用图像：禁止在所有网页上呈现图像。
   禁用样式：加载页面时忽略CSS属性。
   禁用JavaScript：限制所有页面上的JavaScript执行。
   禁用扩展：禁止在浏览器中运行所有已安装的扩展 。
   禁用站点特定的黑客：如果Safari已被修改为明确处理特定于活动网页的问题，则此选项将阻止这些更改，以便在引入这些修改之前加载页面。
   禁用本地文件限制：允许浏览器访问本地磁盘上的文件，这是默认情况下出于安全原因限制的操作。
   禁用跨源限制：默认情况下会实施这些限制，以防止XSS和其他潜在危险。 但是，为了发展目的，他们通常需要暂时停用。
   允许来自智能搜索字段的JavaScript：启用后，可以输入具有javascript的 URL ：直接合并到地址栏中。
   将SHA-1证书视为不安全：使用SHA-1算法的 SSL证书被广泛认为是过时且易受攻击的。