Chrome DevTools谷歌浏览器开发者工具如何录制堆快照

学习如何用Chrome DevTools 堆分析器录制堆快照并查找内存泄漏。 Chrome DevTools 堆分析器显示页面 JavaScript 对象和相关 DOM 节点的内存分配 (请参见Objects retaining tree)。使用它来获取 JS 堆快照、 分析内存图、 比较快照,查找内存泄漏。 生成快照 ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具在不同网络条件下优化性能

用户在移动设备上面临的网络条件很容易被忽略。使用DevTools来模拟不同的网络条件。修复加载时间问题,您的用户将感谢您。 这篇文章的主要内容为: 在不影响其他标签的流量的情况下,使用Chrome DevTools网络模拟器来评估网站的性能。 使用自定义配置文件,配置特定的受众群体网络条件。 模拟网络连接 Networ ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具了解资源加载时序

了解网络下载资源的阶段至关重要。这是修复加载问题的基础。 这篇文章的主要内容为: 了解资源时序的阶段。 知道每个阶段提供给Resource Timing(资源时序)API。 在时间轴图表中识别性能问题的不同指示。如连续的透明条或大块绿色。 所有网络请求都被视为资源。当它们通过网络检索时,分为不同的生命周期。Networ ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具评估资源加载时间

使用Network(网络)面板评估网站的网络性能。 Network(网络)面板记录在页面上有关每个网络操作的信息,包括详细的时序数据,HTTP请求和响应头,Cookie等。 TL;DR 使用Network(网络)面板记录和分析网络活动。 以聚合(所有类型)或单个资源类型查看负载信息。 过滤和排序资源的显示方式。 保存, ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具加速JavaScript执行

使用Chrome DevTools CPU Profiler(分析器)识别高开销的函数。 这篇文章的主要内容为: 通过CPU Profiler(分析器)准确记录被调用的函数以及花费的时间长度。 将您的分析形象好为火焰图。 录制一个CPU分析 如果你注意到你的JavaScript中有卡顿现象,那么请收集一个JavaScr ...阅读更多

Posted on

Chrome DevTools谷歌浏览器如何使用时间轴工具

使用Chrome DevTools Timeline(时间轴)面板录制和分析应用程序运行时的所有活动。这是开始检查和感知应用程序性能问题的最佳位置。 这篇文章的主要内容为: 进行时间轴录制来分析在网页加载或用户互动后发生的每个事件。 在Overview(概览)窗格中查看FPS,CPU和网络请求。 单击 Flame Ch ...阅读更多

Posted on

Chrome将预处理的代码映射到源代码

在你的代码合并,压缩或编译后,保持客户端代码可读性和可调试性。使用Source Maps(源码映射)将源代码映射到已编译的代码。 这篇文章的内容为: 使用Source Maps(源码映射)将压缩代码映射到源代码。然后,您可以在其原始源代码中读取和调试编译的代码。 仅使用能够生成Source Maps(源码映射)的预处理 ...阅读更多

Posted on

Chrome DevTools在Sources(源文件)面板中跟踪监视变量

Chrome DevTools允许您在整个应用程序中轻松查看多个变量。观察源代码中的变量可以让您离开控制台,并专注于改进代码。 Sources(源文件)面板提供了在应用程序中跟踪监视变量的功能。它位于调试器侧边栏的Watch窗格。通过利用此功能,您不需要重复地将对象日志输出到控制台中。 添加变量 要将变量添加到监视列表 ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具使JavaScript看起来漂亮

当在Sources(源文件)面板中查看脚本时,单击Pretty-Print(美化)图标,可以将压缩的脚本格式化成方便阅读的形式。 下面是缩略脚本在Sources(源文件)面板中的显示方式: 下面是点击Pretty-Print(美化)图标后显示的同样的脚本: 说明 翻译自:https://developers.googl ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具在任何页面上运行代码片段

代码片段是可以在Chrome DevTools的Sources(源文件)面板中创建和执行的小脚本。您可以从任何页面访问和运行它们。 当您运行代码段时,它在当前打开的页面的上下文中执行。 如果你有小的实用程序或调试脚本需要在多个页面上反复使用,请考虑将脚本另存为代码片段。您还可以使用代码片段替代 书签。 这篇文章的主要内 ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具如何设置断点

使用断点来暂停JavaScript代码,审查变量的值和在特定时刻所调用的堆栈。 一旦你设置了断点,你应该学习如何遍历你的代码,并审查你的变量和调用堆栈。 TL;DR 设置断点的最基本的方法是在特定的代码行上手动添加一个断点。您也可以将这些断点配置为仅在满足特定条件时触发。 您还可以设置在满足一般条件时触发的断点,例如事 ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具远程调试 WebView

使用Chrome开发人员工具调试原生Android应用中的WebView。 在Android 4.4(KitKat)或更高版本上,使用DevTools在原生Android应用中调试WebView内容。 TL;DR 在原生Android应用启用WebView调试;在Chrome DevTools中调试WebView。 通 ...阅读更多

Posted on