时间轴面板可让你记录和分析在你的的应用程序运行的所有活动。它开始于你的应用程序感知调查性能问题的最佳场所。时间轴面板概述时间轴有三个主要部分：顶部的概述部分，记录视图和工具栏。要启动或停止录音，按下录制按钮切换（见制作录音）。按清除记录按钮从时间轴清除记录。胶水异步事件模式，让你更轻松地关联的异步事件的原因（请参阅关于嵌套事件）。
关于您的每个应用程序的网络运营，包括详细的时序数据，HTTP请求和响应头，cookies，WebSocket的数据，以及更多的网络小组记录的信息。网络面板可帮助你解答您的Web应用程序的网络性能问题，如：其中资源最慢时间第一个字节？哪些资源加载（持续时间）的时间最长？是谁发起的特定网络请求？多少时间花费在各种网络阶段的特定资源？
简介Chrome DevTools 允许你对页面或者 CSS 做出更改，并且可以实时查看更改效果。但是如果你需要复制外部编辑器中更改的内容并粘贴到 DevTools 时，什么对你才是更加重要的呢？工作空间可以让这些更改暂时存储在硬盘上而不需要离开 Chrome DevTools 界面。通过工作空间，你可以在 Sources 面板中编辑任何类型的源文件并且将改动保存到硬盘上。
你的网页内容在移动设备上的体验可能和电脑上完全不同。Chrome DevTools 提供了远程调试功能，这让你可以在安卓设备上实时调试开发的内容。安卓远程调试支持：在浏览器选项卡中调试网站。在原生安卓应用中调试网页内容。将屏幕从你的安卓设备上投影到你的开发机器上。使用端口转发和虚拟主机映射来让安卓设备访问开发使用的服务器。
随着移动用户的增长，移动端友好的响应式网站设计变得越来越重要。网页的内容要在不同的设备以及各种网络环境下看起来都不错才行。但是想要测试移动端的体验需要较长时间，并且调试也相当困难。在你的浏览器选项卡中有设备模式，该模式可以让你看到在设备上的体验效果，这就是移动仿真的力量。
随着 JavaScript 应用的复杂性逐渐提高，开发者需要有力的调试工具来帮助他们快速发现问题的原因，并且能高效地修复它。Chrome DevTools 提供了一系列实用的工具使得调试 JavaScript 应用不再是一件痛苦的事。在这个部分，我们会通过调试 Google Closure hovercard demo 以及其他的动态示例来让你了解怎么去使用这些工具。
Resources 面板允许你检查应用程序的本地资源，包括 IndexedDB， Web SQL 数据库，本地和会话(session)存储，cookies，以及应用缓存资源。你也可以快速可视化检查应用资源，包括图片、字体、以及样式表。IndexedDB你可以通过一个对象存储记录来审查你的 IndexedDB 数据库和对象的存储状况及相关页面，并且能够清除对象存储的记录。
许多开发者使用 CSS 预处理器来产生 CSS 样式表，比如 Sass， Less 或者 Stylus。因为 CSS 文件是生成的，直接修改 CSS 文件是没有用的。对于支持 CSS 源映射（source maps）的预处理器， DevTools 允许你在源面板中实时编辑预处理器的源文件，并且不需要离开 DevTools 或者刷新页面就能查看结果。
简介元素（Elements）面板使你可以浏览当前页面的结构化信息，在如今的应用中，为初始页面载入服务的 HTML 标记不一定是你在文档对象模型（DOM）树中看到的那样。在调试以及创建网页的时候，实时展示页面样式将会是非常有用的功能。
谷歌 Chrome 开发工具，是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。 适用人群这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作.
有很多方法可以提高你同事的开发效率。这可能是通过分享你所知道的或是用那些记录功能提供帮助或者写一个补丁来改进我们所使用的工具。你怎么帮助?除了对源代码的贡献以外，下面的集中方式都可以参与帮助： 文档创作 为开发工具提供文档来源的是 GitHub 上的贡献,并且总是受欢迎的。参考和教程指南受益于您的帮助。 联系 @paul_irish 的更多信息，你可以帮助在这里。
具体内容参看：https://groups.google.com/forum/?fromgroups#!forum/google-chrome-developer-tools
阅读我们的博客文章用于功能更新：多使用浏览器的开发工具（10月2012） 用Chrome开发者工具调试网络（4月2012） 新开发工具的实验 API（10月2011） Chrome开发者工具：控制JavaScript内存（5月2011） 使用 Chrome 远程调试（5月2011） Chrome开发者工具：了解堆栈跟踪（4月2011） Chrome开发者工具：基础内容（4月2011） 中断用户界面和网络事件的开发工具（…
以下的视频将帮助你学习谷歌浏览器的开发工具：开始下面的视频描述了如何开始使用开发工具、开发工具窗口内的面板以及交互控制台。视频地址：https://www.youtube.com/watch?v=7cqh7MGLgaM检测元素和资源下面的视频介绍了如何： 检查元件 更改样式属性 DOM 属性编辑 查看和编辑位置度量 查看网络活动的时间线 查看 XHR 信息。视频地址：https://www.
控制台编写多行命令当你进入控制台的多行编写模式时，你可以像标准文字编辑器那样使用文本块。Shitf + Enter 允许你从控制台进入多行模式。当你编写的 JavaScript 远比单行文字要复杂的时候，这是非常有用的。一但你创建了一个文字编写区域，在命令的最后按 Enter 就会开始运行。
利用控制台可以让你：日志诊断信息可以帮你分析 web 页面或者应用上的错误输入命令来与文档以及 Chrome 开发者工具进行交互你可能也会自己评估一般的 JavaScript 表达式。这个文档提供了一个控制台的预览和常规使用的概述。你可以浏览 Console API 和 Conmmand Line API 引用材料来理解更多的功能。基础操作打开控制台Javascript 控制台可以在两个地方打开。
开发者工作流程一般来说就是需要通过一些步骤来达到一个目标。当作者拥有了开发者工具，这就可以优化工作流程以较少的时间来完成常规任务，比如锁定文件或者函数，持续编写脚本或者样式表，保存经常使用的片段或者仅仅是重新布置一下布局，让其更贴合你得需求。在这一节中，我们将讲解一些小技巧，让你在使用 DevTools 时的工作流程变得更加高效。
谷歌开发工具(以下用开发者工具简称），是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。注意：如果你是一个网页开发者同时想要获得最新版本的开发工具，那么你应该使用谷歌浏览器（金丝雀）Canary 版。
关注时代Java
