除了大多数专注于寻求网上冲浪的日常用户的浏览器制造商之外，他们还迎合Web开发人员，设计人员和质量保证专业人员，他们通过将强大的工具集成到浏览器中来帮助构建这些用户正在访问的应用和网站他们自己。
在浏览器中找到的唯一编程和测试工具允许您查看页面源代码的日子已经一去不复返了。今天的浏览器让您可以通过执行和调试JavaScript代码段，检查和编辑DOM元素，监控实时网络流量作为应用程序或页面加载来识别瓶颈，分析CSS性能，确保代码是没有太多的内存或太多的CPU周期，等等。从测试的角度来看，您可以通过响应式设计和内置模拟器的魔力，重现应用程序或Web页面在不同浏览器以及不同设备和平台上的呈现方式。最棒的是，您无需离开浏览器即可完成所有这些操作！
下面的教程将向您介绍如何在几种流行的Web浏览器中访问这些开发人员工具。
谷歌浏览器
Chrome的开发人员工具允许您编辑和调试代码，审核单个组件以暴露性能问题，模拟不同的设备屏幕，包括运行Android或iOS的设备屏幕，以及执行其他一些有用的功能。
- 点击Chrome的主菜单按钮，标有三条水平线，位于浏览器的右上角。
- 出现下拉菜单时，将鼠标光标悬停在 更多工具 选项。
- 现在应该出现一个子菜单。选择标记的选项 开发者工具 。您还可以使用以下键盘快捷键代替此菜单项：Chrome OS / Windows（ CTRL + SHIFT + I ），Mac OS X（ ALT（OPTION）+ COMMAND + I )
- 现在应显示Chrome开发者工具界面，如此示例屏幕截图所示。根据您的Chrome版本，您看到的初始布局可能与此处显示的略有不同。开发人员工具的主要中心通常位于屏幕的底部或右侧，包含以下选项卡。内容： 提供检查CSS和HTML代码以及即时编辑CSS的能力，实时查看更改的效果。安慰： Chrome的JavaScript控制台允许直接命令输入和诊断调试。资料来源： 允许您通过功能强大的图形界面调试JavaScript代码。网络： 对活动应用程序或页面上的每个相关操作进行分类和显示详细信息，包括完整的请求和响应标头以及高级时序度量标准。时间线： 一旦启动页面或应用程序加载请求，就可以对浏览器中发生的每个活动进行深入分析。
- 除了这些部分，您还可以通过以下方式访问以下工具 >> 图标，位于右侧 时间线 标签。轮廓： 细分为 CPU分析器 和 堆分析器 部分，提供活动应用程序或页面的全面内存使用和总体执行时间。安全： 使用活动页面或应用程序突出显示证书问题和其他与安全相关的问题。资源： 您可以在此处检查当前网页或应用程序使用的cookie，本地存储，应用缓存和其他本地数据源。审计： 提供优化页面或应用程序的加载时间和一般性能的方法。
- 设备模式 允许您在模拟器中查看活动页面，该模拟器几乎完全像在十几个设备中的一个上显示，包括几个着名的Android和iOS模型，如iPad，iPhone和三星Galaxy。您还可以模拟自定义屏幕分辨率以满足您的特定开发或测试需求。切换 设备模式 打开和关闭，选择直接位于左侧的手机图标 分子 标签。
- 您还可以通过首先单击由三个垂直放置的点表示的菜单按钮并位于上述选项卡的最右侧来自定义开发人员工具的外观。在此下拉菜单中，您可以重新定位停靠栏，显示或隐藏不同的工具，以及启动更高级的项目，例如设备检查器。您会发现开发工具界面本身可以通过本节中的设置进行高度自定义。
火狐浏览器
Firefox的Web开发人员部分包括设计人员，开发人员和测试人员等工具，例如样式编辑器和像素定位吸管。
Lifewire推荐读物：前25名Greasemonkey和Tampermonkey用户脚本
- 单击Firefox的主菜单按钮，由三条水平线表示，位于浏览器窗口的右上角。
- 出现下拉菜单时，选择标有的图标 开发人员 。该 Web开发人员 现在应显示菜单，其中包含以下选项。您会注意到大多数菜单项都有与之关联的键盘快捷键。切换工具： 显示或隐藏开发人员工具界面，通常位于浏览器窗口的底部。键盘快捷键：Mac OS X（ ALT（OPTION）+ COMMAND + I ），Windows（ CTRL + SHIFT + I )督察： 允许您通过远程调试在活动页面和便携式设备上检查和/或调整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节点，黑色装箱外部源等，您可以查明并修复缺陷。就像是的情况一样 检查员 ，此功能还支持远程调试。键盘快捷键：Mac OS X（ ALT（OPTION）+ COMMAND + S ），Windows（ CTRL + SHIFT + S） 风格编辑： 允许您创建新样式表并将其与活动Web页面合并，或编辑现有工作表，并只需单击一下即可测试更改在浏览器中的呈现方式。键盘快捷键：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应用程序（包括扩展和浏览器级功能），而不仅仅是活动网页。键盘快捷键：Mac OS X（ Shift + COMMAND + J ），Windows（ Ctrl + Shift + J )响应式设计视图： 允许您立即查看不同分辨率，布局和屏幕大小的网页，以模仿多种设备，包括平板电脑和智能手机。键盘快捷键：Mac OS X（ ALT（OPTION）+ COMMAND + M ），Windows（ CTRL + SHIFT + M )滴管： 显示单独选择的像素的十六进制颜色代码。便笺： 允许您在弹出的Firefox窗口中编写，编辑，集成和执行JavaScript代码片段。键盘快捷键：Mac OS X，Windows（ SHIFT + F4 )页面来源： 原始的基于浏览器的开发人员工具，此选项只显示活动页面的可用源代码。键盘快捷键：Mac OS X（ COMMAND + U ），Windows（ CTRL + U )获得更多工具： 打开 Web开发人员的工具箱 Mozilla官方附加组件网站上的收集，包括大约十几种流行的扩展，如Firebug和Greasemonkey。
Microsoft Edge / Internet Explorer
通常被称为 F12开发人员工具 向早期版本的Internet Explorer启动界面的键盘快捷键致敬，IE11和Microsoft Edge中的开发工具集自成立以来已经走过了漫长的道路，提供了一组非常方便的监视器，调试器，模拟器等等。 -the-fly编译器。
- 点击 更多操作 菜单，由三个点表示，位于浏览器窗口的右上角。出现下拉菜单时，选择标记的选项 F12开发人员工具 。正如我已经提到的，你也可以通过访问工具 F12 键盘快捷键。
- 现在应该显示开发界面，通常位于浏览器窗口的底部。可以使用以下工具，每个工具都可通过单击其各自的选项卡标题或使用随附的键盘快捷键访问。DOM Explorer： 允许您在活动页面中编辑样式表和HTML，随时呈现修改后的结果。利用IntelliSense功能在适用的情况下自动完成代码。键盘快捷键： （CTRL + 1） 安慰： 提供通过集成API提交调试信息（包括计数器，计时器，跟踪和自定义消息）的功能。此外，允许您将代码注入活动Web页面并实时修改分配给各个变量的值。键盘快捷键： （CTRL + 2） 调试器： 允许您在执行时设置断点并调试代码，必要时逐行。键盘快捷键： （CTRL + 3） 网络： 列出在页面加载和执行期间由浏览器发起的每个网络请求，包括协议详细信息，内容类型，带宽使用等等。键盘快捷键： （CTRL + 4） 性能： 详细说明帧速率，CPU利用率和其他与性能相关的指标，以帮助您加快页面加载时间和其他活动。键盘快捷键： （CTRL + 5） 记忆： 通过显示内存使用时间线以及来自不同时间间隔的快照，帮助您隔离和纠正当前网页上潜在的内存泄漏。键盘快捷键： （CTRL + 6） 仿真： 显示活动页面如何以各种分辨率和屏幕大小呈现，模拟智能手机，平板电脑和其他设备。还提供修改用户代理和页面方向的功能，以及通过输入纬度和经度来模拟不同的地理位置。键盘快捷键： （CTRL + 7）
- 要显示 安慰 在任何其他工具中，单击位于其中右侧括号的方形按钮，位于开发工具界面的右上角。
- 要取消停靠，开发人员工具界面使其成为一个单独的窗口，单击由两个级联矩形表示的按钮或使用以下键盘快捷键： CTRL + P 。您可以按下将工具放回原位 CTRL + P 第二次。
Apple Safari（仅限OS X）
Safari的多样化开发工具集反映了利用Mac满足其设计和编程需求的大型开发人员社区。除了功能强大的控制台和传统的日志记录和调试功能外，还提供易于使用的响应式设计模式和创建自己的浏览器扩展的工具。
- 点击 苹果浏览器 在浏览器菜单中，位于屏幕顶部。出现下拉菜单时，选择 喜好 。您还可以使用以下键盘快捷键代替此菜单项： COMMAND +逗号（，）
- Safari的 喜好 现在应该显示界面，覆盖浏览器窗口。点击 高级 图标，位于标题的最右侧。
- 该 高级 现在应该可以看到偏好。在此屏幕的底部是一个标记的选项 在菜单栏中显示“开发”菜单 ，附有一个复选框。如果框中没有显示复选标记，请单击一次以在其中放置一个复选标记。
- 关上 喜好 点击左上角的红色'x'界面。
- 您现在应该注意到名为的浏览器菜单中的新选项 开发 ，位于 书签 和 窗口 。单击此菜单项。现在应显示一个下拉菜单，其中包含以下选项。打开页面： 允许您在Mac上当前安装的其他浏览器中打开活动网页。用户代理： 允许您从十几个预定义的用户代理值中进行选择，包括几个版本的Chrome，Firefox和Internet Explorer，以及定义您自己的自定义字符串。进入响应式设计模式： 呈现当前页面，因为它将出现在各种设备和不同的屏幕分辨率上。显示Web检查器： 启动Safari的开发工具的主界面，通常位于浏览器屏幕的底部，包含以下部分： 分子 , 网络 , 资源 , 时间线 , 调试器 , 存储 , 安慰 .显示错误控制台： 还可以直接启动dev工具界面 安慰 选项卡，显示错误，警告和其他可搜索的日志数据。显示页面来源： 打开 资源 选项卡，显示按文档分类的活动页面的源代码。显示页面资源： 执行与。相同的功能 显示页面来源 选项。显示片段编辑器： 打开一个新窗口，您可以在其中输入CSS和HTML代码，即时预览其输出。显示扩展构建器： 提供使用CSS，HTML和JavaScript创建或编辑Safari扩展的功能。显示时间线录制： 打开 时间线 选项卡并开始实时显示网络请求，布局和呈现信息以及JavaScript执行。空缓存： 删除当前存储在硬盘驱动器上的整个缓存。禁用缓存： 阻止Safari进行缓存，以便在每次加载页面时从服务器检索所有内容。禁用图片： 防止图像在所有网页上呈现。禁用样式： 加载页面时忽略CSS属性。禁用JavaScript： 限制所有页面上的JavaScript执行。禁用扩展程序： 禁止所有已安装的扩展在浏览器中运行。禁用特定于站点的黑客： 如果已修改Safari以显式处理特定于活动网页的问题，则此选项将阻止这些更改，以便在引入这些修改之前加载页面。禁用本地文件限制： 允许浏览器访问本地磁盘上的文件，默认情况下出于安全原因限制该操作。禁用跨源限制： 默认情况下会实施这些限制以防止XSS和其他潜在危险。但是，它们通常需要暂时禁用以用于开发目的。允许来自智能搜索字段的JavaScript： 启用后，可以使用输入URL JavaScript的： 直接纳入地址栏。将SHA-1证书视为不安全： 使用SHA-1算法的SSL证书被广泛认为是过时且易受攻击的。
