异常和错误处理 您需要修复网页抛出的异常和在JavaScript中调试错误。 如果你能得到页面异常和JavaScript错误的细节，在实际工作中非常有用 。当页面抛出异常……

测量和计数执行 利用Console API来测量执行时间和计数语句执行。 TL;DR 使用console.time()和console.timeEnd()测量代码两个执行点之间所需的时间。 使用cons……

比较类似的数据对象 使用table()方法查看结构化数据并比较数据对象。 table()方法提供了一种简单的方法来查看包含类似数据的对象和数组。当调用时，它将获取到……

在 Console(控制台)中诊断和打印日志 控制台日志是一个强大的方法，用来检查您的页面或应用程序。让我们从console.log()开始，探索其他高级用法。 TL;DR 使用……

使用 Console(控制台) 了解如何：打开DevTools Console(控制台)，堆叠冗余消息或在自己的行上显示它们，清除或保持输出或将其保存到文件，过滤输出，以及……

将预处理的代码映射到源代码 在你的代码合并，压缩或编译后，保持客户端代码可读性和可调试性。使用Source Maps(源码映射)将源代码映射到已编译的代码。 TL;D……

在Sources(源文件)面板中跟踪监视变量 Chrome DevTools允许您在整个应用程序中轻松查看多个变量。观察源代码中的变量可以让您离开控制台，并专注于改进代码。……

使JavaScript看起来漂亮 当在Sources(源文件)面板中查看脚本时，单击Pretty-Print（美化）图标，可以将压缩的脚本格式化成方便阅读的形式。 下面是缩略脚本在……

在任何页面上运行代码片段 代码片段是可以在Chrome DevTools的Sources(源文件)面板中创建和执行的小脚本。您可以从任何页面访问和运行它们。 当您运行代码段……

如何遍历你的代码 通过一次执行一行代码或一个函数，您可以观察数据和页面中的更改，来确切了解发生了什么。您还可以修改脚本中使用的数据值，甚至可以修改脚……

如何设置断点 使用断点来暂停JavaScript代码，审查变量的值和在特定时刻所调用的堆栈。 一旦你设置了断点，你应该学习如何遍历你的代码，并审查你的变量和调……

远程调试 WebView 使用Chrome开发人员工具调试原生Android应用中的WebView。 在Android 4.4（KitKat）或更高版本上，使用DevTools在原生Android应用中调试Web……

访问本地服务器 在开发机的Web服务器上托管一个站点，然后在Android设备上访问站点内容。 通过USB数据线和Chrome DevTools，您可以在开发机上运行站点，然后……

远程调试Android设备 在Windows，Mac 或 Linux 上远程调试 Android 设备上的实时内容。 TL;DR 设置你的Android设备进行远程调试，并从开发机中发现它。 ……

模拟和测试其他浏览器 确保你的网站能够在Chrome和Android上正常运行后，你的工作并没有结束。即使Device Mode(设备模式)可以模拟一系列其他设备，如iPhone，……

模拟传感器：地理定位和加速计 GPS芯片和加速计可能很难测试，因为大多数台式机没有它们。Chrome DevTools传感器模拟窗格通过模拟常见的移动设备传感器来降低……

测试响应和设备特定可视窗口 更新后的Device Mode(设备模式)（从Chrome 49开始）是现在“移动优先”开发工具的一个组成部分，并扩展了主要的DevTools 工具条。……

使用设备模式模拟移动设备 使用 Chrome 开发者工具的Device Mode(设备模式)来构建移动优先，完全响应式的网站。了解如何使用它来模拟各种设备及其功能。 ……

检查资源 按框架、域、类型或其他标准来组织管理资源。 TL;DR 使用 Application(应用)面板的Frames(框架)窗格按frame(框架)组织管理资源。 您还可以在Source……

检查和删除 Cookie 在 Application(应用)面板中检查和删除 cookie。 TL;DR 查看有关cookie的详细信息，例如其名称，值，域，大小等。 删除单个Cookie，所选……

检查和管理Storage, Databases 和 Caches 在 Application(应用)面板检查和管理Storage(存储)、 Databases(数据库)和Caches(缓存)。 TL;DR 查看和编辑本地和……

编辑DOM Chrome DevTools Elements(元素)面板中的DOM树视图显示当前网页的DOM结构。通过DOM更新来实时编辑您的网页的内容和结构。 TL;DR DOM定义了页面的结构……

检查动画 使用Chrome DevTools Animations(动画)检查器检查和修改动画。 TL;DR 通过打开Animation Inspector(动画检查器)捕获动画。它会自动检测动画并将它……

编辑样式 使用Styles(样式)窗格修改与元素关联的CSS样式。 TL;DR Styles(样式)窗格允许您以尽可能多的方式更改本地CSS，包括编辑现有样式，添加新样式，添……

检查和编辑页面和样式 使用Chrome DevTools Elements(元素)面板，检查并实时编辑页面中的HTML和CSS。 TL;DR 在Elements(元素)面板中随时检查并编辑 DOM 树……