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

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

浏览器中唯一的编程和测试工具的日子已经一去不复返了，允许您查看页面的源代码，而且还有更多。今天的浏览器让您通过执行执行和调试等事物来潜水更深javascript.片段，检查和编辑DOM元素，监视实时网络流量作为应用程序或页面加载以识别瓶颈，分析CSS性能，确保您的代码不利用太多内存或太多中央处理器周期，以及更多。

从测试角度来看，您可以通过响应设计和内置模拟器的魔法重现应用程序或网页的应用程序或网页以及不同的设备和平台。最好的部分是您可以在不必留下浏览器的情况下完成所有这些！

下面的教程漫步您通过如何在几个流行的开发工具访问这些开发人员工具web浏览器。

谷歌Chrome

的铬合金开发人员工具允许您编辑和调试代码，审计单个组件以暴露性能问题，模拟不同的设备屏幕，包括那些运行Android或iOS，并执行其他几个有用的功能。

1. Chrome的选择主菜单，标有三条水平线，位于浏览器的右上角。

2. 出现下拉菜单时，将鼠标光标悬停在鼠标上更多工具选项。

   

3. 现在应该出现一个子菜单。选择标签为开发者工具。您还可以使用以下键盘快捷键代替此菜单项：Chrome OS / Windows（CTRL + SHIFT + I），Mac OS X（alt（选项）+命令+ i)

   

4. 现在应该显示Chrome开发人员工具接口，如本示例屏幕截图所示。根据您的Chrome版本，您看到的初始布局可能与此处呈现的初始布局略有不同。开发人员工具的主集线器，通常位于屏幕的底部或右侧或右侧，包含以下选项卡。

5. 除了这些部分之外，您还可以通过>>图标，位于右侧表现标签。

   • 内存:监控并记录web页面上的内存使用情况。您可以看到您的站点上的JavaScript有多沉重。
   • 安全:突出显示活动页面或应用程序的证书问题和其他安全相关问题。
   • 应用程序:检查Web应用程序使用的资源。完全崩溃了被使用的内容。
   • 审计：提供优化页面或应用程序的负载时间和常规性能的方法。

   

6. 设备模式允许您在模拟器中查看活动页面，该模拟器几乎完全符合十几个设备之一，包括几个知名的Android和iOS模型，如iPad，iPhone和三星Galaxy。您也有能力模拟自定义屏幕分辨率以满足您的特定开发或测试需求。

   切换设备模式打开和关闭，选择手机图标直接位于左侧元素标签。

   

7. 您还可以通过首先选择开发人员工具的外观和感受菜单按钮代表三个垂直放置的点并且位于前面提到的标签的最右边。

   从这个下拉菜单中，您可以重新定位基座，显示或隐藏不同的工具，以及启动更高级的项目，如设备检查器。你会发现开发工具界面本身可以通过本节中的设置高度自定义。

   

火狐浏览器

Firefox的Web Developer部分包括设计师，开发人员和测试人员的工具，如风格编辑器和像素定位的EyeDropper。

1. 选择Firefox主菜单，代表三条水平线并位于浏览器窗口的右上角。

2. 出现下拉菜单时，请选择Web开发人员。

   

3. 的Web开发人员菜单现在应该显示，包含以下选项。您会注意到大多数菜单项都有与它们关联的键盘快捷键。

   • 切换工具：显示或隐藏开发人员工具接口，通常位于浏览器窗口底部。键盘快捷方式:Mac OS X (alt（选项）+命令+ i),窗口(CTRL + SHIFT + I)
   • 检查员：允许您通过远程调试检查活动页面上的和/或调整CSS和HTML代码以及便携式设备上。键盘快捷方式:Mac OS X (alt（选项）+命令+ c),窗口(CTRL + SHIFT + C)
   • Web控制台：允许您在活动页面中执行JavaScript表达式，以及查看多样化的记录数据，包括安全警告，网络请求，CSS消息等。键盘快捷方式:Mac OS X (alt（选项）+命令+ k),窗口(CTRL + SHIFT + K)
   • 调试器:JavaScript调试器通过设置断点，检查DOM节点，黑色拳击外部源等，允许您精确定位和修复缺陷。就像这种情况一样检查员，此功能也支持远程调试。键盘快捷方式:Mac OS X (alt（选项）+命令+ s),窗口(CTRL + SHIFT + S)
   • 风格编辑器：允许您创建新的样式表并使用活动网页或编辑现有工作表并测试您的更改如何在浏览器中呈现，只需单击一下。键盘快捷方式：Mac OS X，Windows（SHIFT + F7)
   • 表现：提供活动页面的网络性能，帧速率数据，JavaScript执行时间和状态，油漆闪烁等详细细分，更重要。键盘快捷方式：Mac OS X，Windows（SHIFT + F5)
   • 网络:列出浏览器发起的每个网络请求，以及相应的方法、起源域、类型、大小和经过的时间。键盘快捷方式:Mac OS X (alt（选项）+命令+ q),窗口(CTRL + SHIFT + Q)
   • 存储检查员:看看网站存储的缓存和cookie。键盘快捷键:(SHIFT + F9)
   • 开发人员工具栏：打开交互式命令行解释器。进入帮助进入解释器获取所有可用命令的列表及其正确的语法。键盘快捷方式：Mac OS X，Windows（SHIFT + F2)
   • WebIDE：提供通过运行Firefox OS的实际设备或通过Firefox OS模拟器创建和执行Web应用程序的能力。键盘快捷方式：Mac OS X，Windows（SHIFT + F8)
   • 浏览器控制台:提供与Web控制台（看上面）。但是，返回的所有数据都适用于整个Firefox应用程序（包括扩展以及浏览器级的功能)，而不仅仅是活动网页。键盘快捷方式:Mac OS X (shift + command + j),窗口(CTRL + SHIFT + J)
   • 响应式设计视图:允许您以不同的分辨率、布局和屏幕大小即时查看网页，以模拟多种设备，包括平板电脑和智能手机。键盘快捷方式:Mac OS X (alt（选项）+命令+ m),窗口(CTRL + SHIFT + M)
   • 滴眼剂:显示个别选定像素的十六进制颜色代码。
   • 便条簿:便条簿允许您从弹出Firefox窗口中编辑，编辑，集成和执行JavaScript代码的片段。打开一个交互式的JavaScript文档，允许您在代码中编写并对网站进行测试。键盘快捷键:（Shift + F4）
   • 服务工人:调试服务工作者您的Web应用程序。获取有关其性能和错误的详细信息。
   • 页面来源：基于浏览器的开发人员工具，此选项只需显示活动页面的可用源代码。键盘快捷方式:Mac OS X (命令+ U),窗口(Ctrl + U.)
   • 获取更多工具：打开Web开发人员的工具箱Mozilla官方插件站点上的一个集合，包含了大约12个流行的扩展，如Firebug和Greasemonkey。

   

Microsoft Edge / Internet Explorer

通常被称为F12开发工具IE11和Microsoft Edge中的开发工具集从一开始就提供了一组非常方便的监视器、调试器、模拟器和实时编译器，已经取得了很大的进步。

1. 选择更多操作，代表三个小点并位于浏览器窗口的右上角。

   

2. 当下拉菜单出现时，选择已标记的选项开发者工具。

   

3. 现在应显示开发接口，通常在浏览器窗口的底部。可提供以下工具，每个工具都可以通过单击其各自的标签标题或使用伴随键盘快捷键来访问。

   

   • DOM Explorer：允许您在活动页面中编辑样式表和HTML，呈现已修改的结果。利用IntelliSense功能在适用的自动完成代码中。键盘快捷键:(Ctrl + 1)
   • 安慰:提供通过集成API提交调试信息(包括计数器、计时器、跟踪和定制消息)的能力。此外，让你注入代码到一个活动的网页，并修改赋值给单个变量的实时。键盘快捷键:(Ctrl + 2)
   • 调试器：如果需要，请允许您设置断点并调试代码，如有必要，按行按行。键盘快捷键:(Ctrl + 3.)
   • 网络：在页面加载和执行期间列出浏览器发起的每个网络请求，包括协议详细信息，内容类型，带宽使用等等。键盘快捷键:(Ctrl + 4.)
   • 表现：详细帧速率，CPU利用率和其他与性能相关的指标，以帮助您加快页面加载时间和其他活动。键盘快捷键:(Ctrl + 5)
   • 内存：通过显示来自不同时间间隔的快照，帮助您在当前网页上隔离和纠正当前网页上的潜在内存泄漏。键盘快捷键:(Ctrl + 6.)
   • 仿真：显示活动页面如何以各种分辨率和屏幕大小呈现，仿真智能手机，平板电脑和其他设备。它还提供了修改用户代理和页面方向的能力，并通过输入纬度和经度来模拟不同的地理源。键盘快捷键:(Ctrl + 7.)

4. 显示安慰虽然在任何其他工具中按下方形按钮在它内部有一个右侧支架，位于开发工具界面的右上角。

   

5. 撤消开发人员工具界面，因此它成为一个单独的窗口，选择两个级联矩形或使用以下键盘快捷方式：Ctrl + P.。您可以通过按下将工具放回原始位置Ctrl + P.第二次。

   

Apple Safari（仅限Mac）

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

1. 选择Safari在浏览器菜单中，位于屏幕顶部。出现下拉菜单时，请选择首选项。您还可以使用以下键盘快捷键代替此菜单项：命令+逗号（，）

   

2. Safari的首选项现在应显示接口，覆盖浏览器窗口。选择高级图标，位于标题的远处右侧。

   

3. 的先进的首选项现在应该是可见的。在这个屏幕的底部有一个选项标签显示开发菜单在菜单栏中，伴随着复选框。如果框中没有显示复选标记，请单击一次以将一个放置在一起。

   

4. 关闭首选项界面。

5. 您现在应该注意命名的浏览器菜单中的一个新选项开发，位于之间书签和窗户。单击此菜单项。现在应显示一个下拉菜单，包含以下选项。

   • 打开页面：允许您在Mac上的其他浏览器中打开活动网页。
   • 用户代理:让您从十几个预定义的用户代理值中选择，包括几个版本的Chrome, Firefox和Internet Explorer，以及定义自己的自定义字符串。
   • 进入响应式设计模式：呈现当前页面，因为它将出现在各种设备和不同的屏幕分辨率上。
   • 显示网络检查员：启动Safari的DEV工具的主界面，通常放在浏览器屏幕底部并包含以下部分：元素,网络,资源,时间线,调试器,存储,安慰。
   • 显示错误控制台：还直接启动Dev Tools接口安慰标签它显示错误，警告和其他可搜索的日志数据。
   • 显示页面源码：打开资源标签，它显示由文档分类的活动页面的源代码。
   • 显示页面资源:执行与显示页面源码选项。
   • 显示代码片段编辑器：打开一个新的窗口，您可以在其中输入CSS和HTML代码，以即时预览其输出。
   • 显示扩展生成器:提供使用CSS、HTML和JavaScript创建或编辑Safari扩展的能力。
   • 显示时间记录：打开时间线选项卡并开始在实时显示网络请求，布局和呈现信息以及JavaScript执行。
   • 空的缓存:删除当前存储在硬盘上的整个缓存。
   • 禁用缓存：停止Safari从缓存，以便在每个页面加载时从服务器中检索所有内容。
   • 禁用图像：防止在所有网页上渲染图像。
   • 禁用样式：加载页面时忽略CSS属性。
   • 禁用JavaScript.：限制所有页面上的JavaScript执行。
   • 禁用扩展：禁止在浏览器中运行所有已安装的扩展。
   • 禁用特定于现场的黑客：如果Safari已被修改为显式处理特定于活动网页的问题，则此选项将阻止这些更改，以便在引入这些修改之前将页面加载。
   • 禁用本地文件限制：允许浏览器可以访问本地磁盘上的文件，以供安全原因默认限制的操作。
   • 禁用交叉原点限制：默认情况下，这些限制默认取决于防止XS和其他潜在危险。但是，他们经常需要暂时禁用发展目的。
   • 允许JavaScript从智能搜索字段：启用后，它提供了输入URL的能力JavaScript：直接包含在地址栏中。
   • 将SHA-1证书视为不安全: SSL证书使用SHA-1算法被普遍认为是过时和脆弱的。