由Loen创建，最后一次修改2017-03-01在Web开发者中，GoogleChrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能，使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能，如使用console和debugger在线编辑CSS。在这篇文章中，我们将分享15个有助于改进你...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12树形提示(不稳定)https://chromedevtools.github.io/debugger-protocol-viewer/

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12远程调试协议工具栏被分成若干域（DOM，Debugger，NetWork等）的。每个域定义了一些它支持的命令和它产生的事件。命令和事件是固定结构序列化的JSON对象。你可以在调试使用原始消息，因为它们在相应域的文档资料中被定义，或使用扩展的JavaScriptAP...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12展示Chrome调试协议客户端实例有很多浏览器的调试协议的第三方客户端。本节介绍一个示例。BracketBracket是一个基于Web的IDE，使用Chrome调试协议启用调试，实时编辑HTML/CSS。Brackets网站。从download.brackets....

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12远程调试协议在底层，Chrome开发者工具是用HTML，JavaScript和CSS写的Web应用程序。在Javascript运行时，它提供一个特殊的绑定，这允许它与chrome网页进行交互并且容许装载它们。交互协议包括被发送到页面的命令，和该页面生成的事件。尽管...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12Settings修改DevTools中的设置点击设置齿轮，打开GeneralSettings面板进行修改。或者，也可以使用快捷键？打开Setting窗格。通用设置禁用缓存只对打开了DevTools的网页禁止资源缓存。如果DevTools关闭，就会停止作用。禁用Ja...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12快捷键DevTools有许多内置快捷键，开发人员可以在他们的日常工作中使用快捷键来节省时间，提高开发效率。下面列出的每个快捷方式和其在Windows/Linux和Mac相应键位。一些快捷键可用在所有DevTools，其它的只能用在指定单面板，或者被使用的时候是被打...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12DevTools插件实例有许多可用的或正在开发的DevTools插件。本节展示一小部分。这里列出的所有插件都可以从Chrome网上应用店安装。而且他们都是开源的，所以你可以把它们当作开发自己插件的灵感来源。AngularJSBatarangAngularJSBat...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12扩展DevTools总览一个DevTools插件能增加功能到ChromeDevTools中来.它能够增加新的UI面板和侧边栏，能与被检查的页面进行通信，能获得关于网络请求的信息，以及其他的功能。详见显式的DevTools插件。DevTools插件能够访问一组额外特...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12整合DevToolsChromeDevTools是可扩展的。因此，如果DevTools缺少你需要一个功能，你可以找到一个现有的插件，或者自己写一个扩展程序。或者你也可以将开发者工具功能集成到你的应用程序中。有两种基本方式使用DevTools建立一个自定义的解决方案...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12命令行API参考命令行API用ChromeDevToos执行常见任务的方法集合。这些集合包含了选择和检查DOM元素、停止和启动分析器、监测DOM事件的易用方法。这个API补充了控制台API，命令行API仅可在控制台内使用。$_返回最近一次计算过的表达式的值。在下面...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12控制台API参考控制台API为Web应用程序提供输入信息到控制台、创建JavaScript文件和启动调试会话的方法。console.assert(expresson,object)如果指定表达式返回false，返回结果会随着一个栈跟踪器输入到控制台上。在接下来的示...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12JavaScript内存分析内存泄露是指计算机内存逐渐丢失。当某个程序总是无法释放内存时，就会出现内存泄露。JavaScriptweb应用程序可能会经常遇到类似于本地程序中内存泄露这样的问题，比如泄露和膨胀，但是JavaScript有内存回收机制可以解决此类问题。...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12分析JavaScript性能JavaScript分析概论使用谷歌浏览器,打开V8基准套件页面。再打开ChromeDevTools,移导航到概要文件面板,并验证“收集JavaScriptCPU配置文件”是否被选中。现在,单击开始按钮或按Cmd+E开始记录一个Java...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12时间轴示例：强制同步布局的诊断该示例展示了怎么使用时间轴找出一种被称为“强制同步布局”的性能瓶颈。示例应用程序循环演示了几张图片并且强制使用了在执行基于帧的动画时所推荐的requestAnimationFrame()方法。但是在动画运行的时候仍然会出现不大理想的状...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12使用时间轴时间轴面板可让你记录和分析在你的的应用程序运行的所有活动。它开始于你的应用程序感知调查性能问题的最佳场所。时间轴面板概述时间轴有三个主要部分：顶部的概述部分，记录视图和工具栏。要启动或停止录音，按下录制按钮切换（见制作录音）。按清除记录按钮从时间轴清除记...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12评估网络性能关于您的每个应用程序的网络运营，包括详细的时序数据，HTTP请求和响应头，cookies，WebSocket的数据，以及更多的网络小组记录的信息。网络面板可帮助你解答您的Web应用程序的网络性能问题，如：其中资源最慢时间第一个字节？哪些资源加载（持续时...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12通过工作空间保存更改简介ChromeDevTools允许你对页面或者CSS做出更改，并且可以实时查看更改效果。但是如果你需要复制外部编辑器中更改的内容并粘贴到DevTools时，什么对你才是更加重要的呢？工作空间可以让这些更改暂时存储在硬盘上而不需要离开Chrom...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12在安卓设备上使用Chrome远程调试功能你的网页内容在移动设备上的体验可能和电脑上完全不同。ChromeDevTools提供了远程调试功能，这让你可以在安卓设备上实时调试开发的内容。安卓远程调试支持：在浏览器选项卡中调试网站。在原生安卓应用中调试网页内容。将屏幕从...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12设备模式&移动仿真随着移动用户的增长，移动端友好的响应式网站设计变得越来越重要。网页的内容要在不同的设备以及各种网络环境下看起来都不错才行。但是想要测试移动端的体验需要较长时间，并且调试也相当困难。在你的浏览器选项卡中有设备模式，该模式可以让你看到在设备上...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12调试JavaScript脚本随着JavaScript应用的复杂性逐渐提高，开发者需要有力的调试工具来帮助他们快速发现问题的原因，并且能高效地修复它。ChromeDevTools提供了一系列实用的工具使得调试JavaScript应用不再是一件痛苦的事。在这个部分，我...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12管理应用存储空间Resources面板允许你检查应用程序的本地资源，包括IndexedDB，WebSQL数据库，本地和会话(session)存储，cookies，以及应用缓存资源。你也可以快速可视化检查应用资源，包括图片、字体、以及样式表。IndexedDB你可以...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12使用CSS预处理器许多开发者使用CSS预处理器来产生CSS样式表，比如Sass，Less或者Stylus。因为CSS文件是生成的，直接修改CSS文件是没有用的。对于支持CSS源映射（sourcemaps）的预处理器，DevTools允许你在源面板中实时编辑预处理器...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12编辑样式以及DOM简介元素（Elements）面板使你可以浏览当前页面的结构化信息，在如今的应用中，为初始页面载入服务的HTML标记不一定是你在文档对象模型（DOM）树中看到的那样。在调试以及创建网页的时候，实时展示页面样式将会是非常有用的功能。你可以使用元素面板...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12对Chrome开发工具的贡献有很多方法可以提高你同事的开发效率。这可能是通过分享你所知道的或是用那些记录功能提供帮助或者写一个补丁来改进我们所使用的工具。你怎么帮助?除了对源代码的贡献以外，下面的集中方式都可以参与帮助：文档创作为开发工具提供文档来源的是GitHu...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12邮件列表具体内容参看：https://groups.google.com/forum/?fromgroups#!forum/google-chrome-developer-tools

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12博客帖子阅读我们的博客文章用于功能更新：多使用浏览器的开发工具（10月2012）用Chrome开发者工具调试网络（4月2012）新开发工具的实验API（10月2011）Chrome开发者工具：控制JavaScript内存（5月2011）使用Chrome远程调试（5...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12视频Videos以下的视频将帮助你学习谷歌浏览器的开发工具：开始下面的视频描述了如何开始使用开发工具、开发工具窗口内的面板以及交互控制台。视频地址：https://www.youtube.com/watch?v=7cqh7MGLgaM检测元素和资源下面的视频介绍了...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12技巧和窍门控制台编写多行命令当你进入控制台的多行编写模式时，你可以像标准文字编辑器那样使用文本块。Shitf+Enter允许你从控制台进入多行模式。当你编写的JavaScript远比单行文字要复杂的时候，这是非常有用的。一但你创建了一个文字编写区域，在命令的最后按...

[阅读全文]

由珍珍阿姨创建，Loen最后一次修改2016-08-12使用控制台利用控制台可以让你：日志诊断信息可以帮你分析web页面或者应用上的错误输入命令来与文档以及Chrome开发者工具进行交互你可能也会自己评估一般的JavaScript表达式。这个文档提供了一个控制台的预览和常规使用的概述。你可以浏览ConsoleAPI和C...

[阅读全文]