Chrome开发者工具文档

2021-05-15html5阅读(334)

设置你的构建工具 学习如何通过一组构建过程工具提升开发效率和创建快速加载的网站。每个网站都应该有一个开发版本和一个生产版本。 开发版本具有所有的HTML，CSS，JS和图像文件，如果你的网站结构很干净，这样你很乐意为之工作。 生产版本将获取...

2021-05-15html5阅读(359)

设置浏览器扩展 每个桌面浏览器都有一套开发工具，开箱即用，您可以将他们添加到您的浏览器的扩展或插件。 以下是两个具有一些实用功能的Chrome扩展程序，可帮助您调试设计。 Emmet Re:View Emmet Re:View是一个工具，它...

2021-05-15html5阅读(376)

设置CSS和JS预处理器 正确使用CSS预处理器(如Sass)，以及JS预处理器和转换器可以大大提升你的开发效率。本文讲解如何设置设置CSS和JS预处理器。 TL;DR 预处理器允许您使用浏览器原生不支持的CSS和JavaScript中的特...

2021-05-14html5阅读(336)

设置命令行快捷方式 为您重复使用的命令行任务设置快捷方式。如果你发现自己需要在命令行中重复输入同样的东西，那么设置命令行快捷方式非常有必要。 TL;DR 使命令行为您工作;创建容易记住和快速键入的别名。 尝试保存 Github dotfil...

2021-05-14html5阅读(392)

使用 DevTools Workspaces(工作区)保存更改 在Chrome DevTools中设置持久化编写，以便您可以立即查看更改并将这些更改保存到磁盘。 Chrome DevTools允许您更改网页上的元素和样式，并实时查看更改效果...

2021-05-14html5阅读(342)

设置编辑器 您的代码编辑器是您主要的开发工具;你使用它来编写和保存代码。通过学习编辑器的快捷方式和安装主要的插件，可以使你更好，更快编写代码。 TL;DR 选择一个编辑器，您可以自定义快捷方式，并有许多插件可以帮助您更好，更快编写代码。 使...

2021-05-13html5阅读(435)

远程调试协议 在底层，Chrome 开发者工具是用 HTML，JavaScript 和 CSS 写的 Web 应用程序。在 Javascript 运行时，它提供一个特殊的绑定，这允许它与 chrome 网页进行交互并且容许装载它们。交互协议...

2021-05-13html5阅读(438)

扩展 DevTools 总览 一个 DevTools 插件能增加功能到 Chrome DevTools 中来.它能够增加新的 UI 面板和侧边栏，能与被检查的页面进行通信，能获得关于网络请求的信息，以及其他的功能。详见显式的 DevTool...

2021-05-13html5阅读(416)

整合 DevTools Chrome DevTools  是可扩展的。因此，如果 DevTools 缺少你需要一个功能，你可以找到一个现有的插件，或者自己写一个扩展程序。或者你也可以将开发者工具功能集成到你的应用程序中。 有两种基本方式使用...

2021-05-12html5阅读(379)

如何使用分配分析器工具 使用分配分析器工具来查找未被正确地垃圾收回收，并继续保留在内存中的对象。 分配分析器如何工作 allocation profiler(分配分析器)结合了堆分析器中快照的详细信息以及Timeline(时间轴)面板的增量...

2021-05-12html5阅读(421)

如何录制堆快照 学习如何用Chrome DevTools 堆分析器录制堆快照并查找内存泄漏。 Chrome DevTools 堆分析器显示页面 JavaScript 对象和相关 DOM 节点的内存分配 （请参见Objects retaini...

2021-05-12html5阅读(355)

内存术语 本节介绍内存分析中使用的常用术语，同样适用于其他不同语言的内存分析工具。 这里描述的术语和概念适用于Chrome DevTools堆分析器。如果你曾经使用过Java，.NET，或其他一些内存分析器，那么该篇的内容对你而言就是一次提...

2021-05-11html5阅读(395)

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

2021-05-11html5阅读(423)

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

2021-05-11html5阅读(338)

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

2021-05-10html5阅读(367)

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

2021-05-10html5阅读(407)

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

2021-05-10html5阅读(365)

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

2021-05-09html5阅读(327)

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

2021-05-09html5阅读(532)

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

2021-05-09html5阅读(334)

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

2021-05-08html5阅读(540)

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

2021-05-08html5阅读(998)

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

2021-05-08html5阅读(421)

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

2021-05-07html5阅读(380)

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