Chrome开发者工具文档

2021-05-11html5阅读(10)

修复内存问题 了解如何使用Chrome DevTools查找影响网页性能的内存问题，包括内存泄漏，内存膨胀和频繁的垃圾回收。 TL;DR 使用Chrome任务管理器,了解您的网页使用的内存量。 使用时间轴记录可视化内存使用。 使用堆快照标识...

2021-05-11html5阅读(10)

在不同网络条件下优化性能 用户在移动设备上面临的网络条件很容易被忽略。使用DevTools来模拟不同的网络条件。修复加载时间问题，您的用户将感谢您。 TL;DR 在不影响其他标签的流量的情况下，使用Chrome DevTools网络模拟器来...

2021-05-11html5阅读(10)

了解资源加载时序 了解网络下载资源的阶段至关重要。这是修复加载问题的基础。 TL;DR 了解资源时序的阶段。 知道每个阶段提供给Resource Timing(资源时序)API。 在时间轴图表中识别性能问题的不同指示。如连续的透明条或大块绿...

2021-05-10html5阅读(11)

评估资源加载时间 使用Network(网络)面板评估网站的网络性能。 Network(网络)面板记录在页面上有关每个网络操作的信息，包括详细的时序数据，HTTP请求和响应头，Cookie等。 TL;DR 使用Network(网络)面板记录和...

2021-05-10html5阅读(14)

诊断强制同步布局（Layout） 了解如何使用DevTools诊断强制同步布局。 在本指南中，您通过一个demo来识别和解决问题，了解如何调试强制同步布局。 演示动画图像使用requestAnimationFrame()， 这是基于帧的动画...

2021-05-10html5阅读(11)

加速JavaScript执行 使用Chrome DevTools CPU Profiler（分析器）识别高开销的函数。 TL;DR 通过CPU Profiler（分析器）准确记录被调用的函数以及花费的时间长度。 将您的分析形象好为火焰图。 ...

2021-05-09html5阅读(12)

分析运行时性能 用户期望页面的交互性和流畅。但是在传输到显示器的过程中每个阶段都可能出现闪烁卡顿。 接下来我们将了解用于识别和解决运行时性能降低的常见问题的工具和策略。 TL;DR 不要编写强制浏览器重新计算布局的JavaScript。分离...

2021-05-09html5阅读(12)

时间轴事件参考 时间轴事件模型显示并录制触发的所有事件。使用时间轴事件参考可了解有关每个时间轴事件类型的详细信息。 通用的时间轴事件属性 某些细节存在于所有类型的事件中，而一些仅适用于某些事件类型。这个部分列出了不同事件类型的通用属性。某些...

2021-05-09html5阅读(10)

如何使用时间轴工具 使用Chrome DevTools Timeline(时间轴)面板录制和分析应用程序运行时的所有活动。这是开始检查和感知应用程序性能问题的最佳位置。 TL;DR 进行时间轴录制来分析在网页加载或用户互动后发生的每个事件。...

2021-05-08html5阅读(13)

命令行API参考 命令行API 包含一组用于执行常见任务的便利功能：选择和检查DOM元素，以方便阅读的格式显示数据，停止和启动分析器，和监视DOM事件。 注意: 这些API仅在控制台中可用。您无法在页面的脚本中访问命令行API。 $_ $_...

2021-05-08html5阅读(14)

监听事件 Chrome DevTools命令行API提供了多种方式来观察和检查事件监听器。JavaScript在交互式页面中起着中心作用，并且浏览器为您提供了一些有用的工具来调试事件和事件处理程序。 TL;DR 使用monitorEvent...

2021-05-08html5阅读(13)

计算表达式 使用DevTools控制台的求值计算功能，探测页面上任何项的状态。 DevTools控制台允许您以特别的方式了解页面中项的状态。他可以计算JavaScript的任何表达式，控制台本身支持几个功能。 TL;DR 计算键入的表达式。...

2021-05-07html5阅读(11)

Console API 参考 使用 Console API 将信息写入控制台，创建JavaScript配置文件和启动调试会话。 console.assert(expression, object) 如果计算表达式返回false时,向控制台写...

2021-05-07html5阅读(15)

异常和错误处理 您需要修复网页抛出的异常和在JavaScript中调试错误。 如果你能得到页面异常和JavaScript错误的细节，在实际工作中非常有用 。当页面抛出异常或脚本产生错误时，Console(控制台)面板会提供明确的可靠信息，以...

2021-05-07html5阅读(14)

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

2021-05-06html5阅读(10)

比较类似的数据对象 使用table()方法查看结构化数据并比较数据对象。 table()方法提供了一种简单的方法来查看包含类似数据的对象和数组。当调用时，它将获取到的对象属性创建为标题。每一行数据来自每个索引下的属性值。 基本示例: 记录对...

2021-05-06html5阅读(12)

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

2021-05-06html5阅读(14)

使用 Console(控制台) 了解如何：打开DevTools Console(控制台)，堆叠冗余消息或在自己的行上显示它们，清除或保持输出或将其保存到文件，过滤输出，以及了解其他Console(控制台)设置。 TL;DR 以专用面板形式，...

2021-05-05html5阅读(18)

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

2021-05-05html5阅读(18)

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

2021-05-05html5阅读(20)

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

2021-05-04html5阅读(16)

在任何页面上运行代码片段 代码片段是可以在Chrome DevTools的Sources(源文件)面板中创建和执行的小脚本。您可以从任何页面访问和运行它们。 当您运行代码段时，它在当前打开的页面的上下文中执行。 如果你有小的实用程序或调试脚...

2021-05-04html5阅读(18)

如何遍历你的代码 通过一次执行一行代码或一个函数，您可以观察数据和页面中的更改，来确切了解发生了什么。您还可以修改脚本中使用的数据值，甚至可以修改脚本本身。 为什么这个变量值为20而不是30？为什么这行代码似乎没有任何效果？为什么这个标志为...

2021-05-04html5阅读(17)

如何设置断点 使用断点来暂停JavaScript代码，审查变量的值和在特定时刻所调用的堆栈。 一旦你设置了断点，你应该学习如何遍历你的代码，并审查你的变量和调用堆栈。 TL;DR 设置断点的最基本的方法是在特定的代码行上手动添加一个断点。您...

2021-05-03html5阅读(17)

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