GoogleChrome开发人员工具详解
2.chromium开发工具--gclient
2.chromium开发⼯具--gclient1.gclient简介gclient是⾕歌开发的⼀套跨平台git仓库管理⼯具，⽤来将多个git仓库组成⼀个solution进⾏管理。
总体上，其核⼼功能是根据⼀个Solution的DEPS⽂件所定义的规则将多个git仓库拉取到指定⽬录。
例如，chromium就是由80多个独⽴仓库组成。
2.相关概念hooks: 当gclient拉完代码后执⾏的额外脚本；solution: ⼀个包含DEPS⽂件的仓库，可以认为是⼀个完整的项⽬；DEPS: ⼀个特殊的⽂件，规定了项⽬依赖关系；.gclient：⼀个特殊⽂件，规定了要拉取的solution，可由gclient config命令创建出来；include_rules：指定当前⽬录下哪些⽬录/⽂件可以被其他代码include包含，哪些不可以被include。
帮助命令:gclient --help3.常⽤命令3.1 gclient config该命令会⽣成.gclient⽂件，⽤于初始化要拉取的solution，其内容记录了solution仓库的地址以及要保存的位置。
我们在拉取chromium代码时第⼀步其实也是⽣成了.gclient⽂件，内容如下：solutions = [{"url": "https:///chromium/src.git", # Solution仓库地址"managed": False,"name": "src", # 拉取代码后存放的位置"custom_deps": {}, # ⾃定义依赖的仓库地址"custom_vars": {},},]以下是可以配置的字段：name : checkout出源码的名字url : 源码所在的⽬录，gclient希望checkout出的源码中包括⼀个DEPS的⽂件，这个⽂件包含了必须checkout到⼯作⽬录的源码的信息；deps_file 这是⼀个⽂件名（不包括路径），指在⼯程⽬录中包含依赖列表的⽂件，该项为可选，默认值为"DEPS"custom_deps 这是⼀个可选的字典对象，会覆盖⼯程的"DEPS"⽂件定义的条⽬。
程序员必备的4款Chrome插件，编程神器！
程序员必备的4款Chrome插件，编程神器！之前就粉丝跟⼩编说，想要推荐⼏款程序员使⽤的插件，所以⼩编就去找了找，发现了这4款当下⽐较热门且实⽤的，也是程序员经常⽤到的，这⼏款插件也可以提⾼⼯作效率，难怪隔壁⼩哥哥程序员的效率都挺⾼，估计也⽤了这⼏款插件，下⾯我们⼀起来看看吧！⼀、WEB前端助⼿(FeHelper)下载地址：/devtool/webqianduanzhushoufehelper/download.htmlFeHelper是⼀款⾮常好⽤的插件，它的功能主要是对于前台数据的格式化和渲染等操作，⽐如可以实现对包括Javascript代码美化、CSS代码美化、HTML代码美化等，前端开发者必备的⼀款插件。
这些就是它的功能，真的是很全⾯，基本上常⽤的⼯具这个上⾯都有了，像⼀些前端Web开发⼈员需要和后台代码⼯程师配合在，使⽤json数据传输的时候，⽤这款插件就可以帮助Web前端师更快速的对json进⾏解码，所以有了它，⼯作效率翻倍啊！强烈推荐安装使⽤。
⼆、Google翻译下载地址：/google/google-translate/download.htmlGoogleGoogle翻译是⾕歌提供的⼀个翻译插件，可以提供103种语⾔之间的即时翻译，⽀持两种语⾔之间的字词、句⼦、和⽹页翻译，⾮常⽅便。
对于英⽂不好的朋友来说，翻译插件可以说是必备的，⾕歌翻译可以翻译整个⽹页，或者选中⼀段⽂字进⾏翻译，再或者点击⼀个单词⽴即出现翻译结果，像程序员经常看的都是英⽂⽂档，肯定也会遇到个别⼏个不懂的单词，就可以选中单词，点击右键，⼀键翻译，⾮常⽅便，⽽且还⽀持多种语⾔，虽然我们可能不会⽤到其中⼤部分语⾔，但还是要夸夸这个翻译插件。
三、Octotree下载地址：/devtool/octotree/download.htmlOctotree是⼀款Chrome插件，主要是⽤于将GitHub项⽬代码以树形格式展⽰，⽽且在展⽰的列表中，我们可以下载指定的⽂件，再也不⽤下载整个项⽬了，有了它，在GitHub⾥能够让你感受像IDE⾥⼀样浏览和搜索代码。
ChromeDevTools使用指南
ChromeDevTools使用指南ChromeDevTools是一种由Google开发的功能强大的开发工具，旨在协助开发人员调试和优化Web应用程序。
本指南将介绍ChromeDevTools的主要功能和使用方法。
一、启动ChromeDevTools要在Chrome浏览器中启动ChromeDevTools，只需按下键盘上的F12键或通过右键单击页面并选择“检查”选项即可启动。
也可以使用快捷键CTRL+SHIFT+I(Windows)或CMD+OPTION+I(Mac)来启动ChromeDevTools。
二、主要功能1.元素面板元素面板允许开发人员查看和更改文档对象模型(DOM)。
调试时，可以使用它来查看元素的CSS和布局属性，并通过单击元素直接更改它们。
还可以在HTML和CSS代码中通过单击元素查找相应的代码行。
2.控制台控制台是一个交互式窗口，用于运行JavaScript代码和调试过程中的错误。
开发人员可以使用控制台来快速测试代码片段，并输出调试信息。
3.网络面板网络面板允许开发人员监视网页如何加载资源，包括JavaScript脚本、CSS文件、图像和其他文件。
通过该面板，可以查看每个请求的详细信息，并确定网页响应慢的原因。
4.源代码面板源代码面板允许开发人员在原始JS、CSS和HTML文件中查看和编辑代码。
还可以使用断点和调试器来调试JavaScript代码。
5.性能面板性能面板提供了有关Web应用程序性能的详细信息。
可以使用它来确定哪些函数和过程消耗了大量时间，并确定可用于提高应用程序性能的优化点。
三、使用技巧1.快速查找元素在Elements面板中，可以按CTRL+F(Windows)或CMD+F(Mac)快速查找元素。
只需输入要查找的文本，就可以在DOM树中高亮显示符合条件的元素。
2.调试JavaScript使用Sources面板中的调试器可以方便地调试JavaScript代码。
可以在源代码中单击断点，程序将在到达该行时停止执行。
chromedriver用法
文章标题：深入探索ChromeDriver的用法和应用一、引言在如今互联网高度发达的时代，网络浏览器的使用已经成为我们生活中不可或缺的一部分。
而Chrome浏览器作为目前世界上最受欢迎的网络浏览器之一，其自动化测试工具ChromeDriver也备受关注。
本文将深入探讨ChromeDriver的用法和应用，帮助读者更全面地了解和应用这一工具。
二、ChromeDriver概述ChromeDriver是一个由Chrome团队开发维护的WebDriver实现，它提供了与Chrome浏览器进行交互的方式。
使用ChromeDriver，我们可以在自动化测试、网页截图、性能分析等方面发挥出其强大的作用。
ChromeDriver也支持多种编程语言和操作系统，使其具有广泛的适用性。
三、ChromeDriver的安装与配置1. 安装ChromeDriver- 我们需要下载与自己所使用的Chrome浏览器版本相对应的ChromeDriver版本。
- 将下载的ChromeDriver可执行文件放置在系统环境变量中，或者将其路径添加到代码中。
2. 配置ChromeDriver环境- 在编写自动化测试脚本时，需要调用ChromeDriver，并设置一些参数来控制浏览器的行为。
- 通过对ChromeDriver的配置，我们可以实现更多自定义化的操作和功能。
四、ChromeDriver基本用法1. 启动浏览器- 使用ChromeDriver启动浏览器是我们进行自动化测试的第一步，可以通过简单的代码实现浏览器的启动。
2. 导航网页- 通过ChromeDriver可以实现对浏览器的位置区域导航，控制浏览器打开指定的网页。
3. 定位元素- ChromeDriver提供了多种定位元素的方式，如通过ID、class、tag name等方式，可以准确地找到页面上的元素。
4. 操作页面- 通过ChromeDriver可以实现对页面元素的点击、输入文字、下拉框选择等操作，模拟用户真实的操作行为。
GoogleChrome浏览器调试功能介绍
GoogleChrome浏览器调试功能介绍Chrome浏览器得益于其优秀的V8解释器，javascript执行速度和内存占有率表现非常优秀。
对于html+css+javascript前台技术的学习或者开发，浏览器developer tool的使用时必不可少的，也能极大的提高学习或者开发效率。
本文根据版本 23.0.1271.10。
在window下，开启developer tool的快捷键为F12。
1 Developer tool功能结构Developer tool的功能栏有8个，分别是标签、资源、网络、源码、时间轴、性能、监察和显示（命令行）。
2 Element panel2.1 Element控制面板基本功能Element控制面板能够让你查看所有的DOM tree中的内容，可以根据html内容找到页面中的元素或者根据页面中的定位标签，同时可以改变DOM的内容。
由javascript代码产生的标签，也只能通过这种方式查看了（在你的IDE中无法看到）。
Element控制面板如上图所示，我选中标签之后，在页面中显示的对应的元素就会选中。
如果，我现在要定位百度一下这个按钮，我可以通过左下角的放大镜，在页面中选中百度一下，DOM中也会把对应的标签给你找出来。
这个功能在调试时绝对是利器。
最下面显示的是现在选中标签在DOM中的层次关系。
选元素找标签功能我们也可以对里面的内容进行临时性修改，如刚才找到的百度一下标签中的value改成“调试一下”后马上在页面中相应显示。
2.2 右侧功能栏2.2.1 style查看使用css时，存在着样式覆盖等问题，有的时候显示的样式可能出乎你的意料，或者对元素的大小位置（特别是窗口）的查看。
同时，我们也可以在这里进行临时修改，在页面中反应（真正的所见即所得，不是别的IDE所能替代的）。
修改样式或大小2.2.2 标签注册事件查看如果你想知道“百度一下”这个按钮注册了哪些功能，或者鼠标点击时执行了哪个javascript函数，就可以通过这个功能实现了。
如何使用网站调试工具(如Chrome开发者工具或Firebug)诊断和解决网站错误和问题的教程和技巧
如何使用网站调试工具（如Chrome开发者工具或Firebug）诊断和解决网站错误和问题的教程和技巧网站调试工具是开发者在开发和维护网站时的必备利器。
它们可以帮助我们诊断和解决各种网站错误和问题，从而确保网站的正常运行和良好的用户体验。
本文将介绍如何使用常见的网站调试工具（如Chrome开发者工具和Firebug），并分享一些调试网站错误和问题的实用技巧和经验。
通过学习本文，您将能够快速定位和解决网站错误和问题，提高网站的质量和性能。
一、Chrome开发者工具Chrome开发者工具是一款功能强大而又易于使用的网站调试工具。
它内置于Google Chrome浏览器中，并提供了一系列调试和监控网站的功能。
以下是使用Chrome开发者工具调试网站的步骤：1. 打开Chrome浏览器，并打开待调试的网站。
2. 右键点击网页中的任意位置，并选择“检查”。
或者按下键盘上的Ctrl + Shift + I（Windows）或Cmd + Option + I（Mac）快捷键。
3. 弹出的开发者工具窗口中，可以看到网站的HTML、CSS和JavaScript代码，以及网站的网络请求、性能等信息。
二、基本功能介绍1. 元素面板：可以查看和编辑网页的HTML和CSS代码。
通过选择某个HTML元素，我们可以在右侧的样式选项卡中调整该元素的样式属性，以实时预览效果。
2. 控制台面板：提供了一个交互式的JavaScript命令行环境，可以查看和调试JavaScript代码中的错误和警告信息。
我们可以在控制台中运行JavaScript代码，以检查和修改网页中的变量和对象。
3. 网络面板：用于监控和分析网页发起的网络请求。
我们可以查看每个请求的详细信息，如URL、请求方法、响应状态码等，以及请求和响应的内容。
通过网络面板，我们可以检查网页的加载性能，并优化网页的资源请求。
4. 资源面板：用于查看网页的所有资源文件，如图片、样式表、脚本文件等。
浏览器开发者工具用法
浏览器开发者工具用法浏览器开发者工具是为开发人员提供的一种强大的工具，用于调试和分析网页。
它可以帮助开发人员查看网页的结构、样式、性能以及与后端服务器的通信等信息。
以下是一些常用的浏览器开发者工具用法：1. 查看网页结构：打开开发者工具的"Elements"（元素）面板，可以查看网页的HTML 结构。
可以单击元素来查看和编辑其相关的CSS属性。
还可以通过点击元素旁边的小三角形来展开和折叠子元素。
2. 调试JavaScript代码：在开发者工具的"Sources"（源码）面板中，可以查看和编辑网页的JavaScript代码。
可以设置断点，观察变量的值，逐步执行代码，以及检查错误和异常信息。
3. 调试网络请求：在"Network"（网络）面板中，可以查看所有的网络请求和响应。
可以查看请求的方法、URL、头部信息和响应状态等。
还可以查看请求和响应的详细内容，包括请求和响应的数据、头部和Cookie等信息。
4. 分析网页性能：在"Performance"（性能）面板中，可以记录和分析网页的性能。
可以查看网页加载过程中每个阶段的耗时，并分析性能瓶颈和优化机会。
还可以录制流程，分析资源的加载顺序和依赖关系，以便优化页面加载速度。
5. 诊断网页布局问题：在"Elements"（元素）面板中，可以使用"Layout"选项来查看网页元素的盒模型（box model）。
可以查看元素的尺寸、位置和边距等信息。
还可以使用"Inspect"工具来直观地查看网页布局，并调整元素的大小和位置。
6. 模拟设备：在开发者工具的"Device"（设备）面板中，可以模拟不同的设备和屏幕尺寸。
可以查看网页在不同设备上的显示效果，并进行响应式设计和优化。
7. 监控资源和事件：在"Performance"（性能）面板中，可以使用"Memory"（内存）选项来监控网页的内存使用情况。
trace 用法 chrom
trace 用法chrom[trace 用法chrom]在计算机科学领域，trace（追踪）是一种用于调试程序的技术。
它可以记录程序的执行过程和变量的数值，以帮助开发人员诊断和修复程序错误。
Trace也被广泛应用于性能分析和优化领域，以帮助开发人员理解和改进程序的执行性能。
在本文中，我们将详细介绍Trace在Chrome浏览器中的用法，并探讨如何使用Trace来分析和优化web应用程序的性能。
第一部分：Chrome浏览器中的Trace 工具1.1 Trace 工具的概述首先，我们将对Chrome浏览器中的Trace工具进行概览。
Trace工具是Chrome开发者工具的一部分，它可以捕捉和展示程序的执行轨迹和性能数据。
通过使用Trace工具，开发人员可以深入了解代码执行过程中出现的性能瓶颈，以及如何优化代码以改进性能。
1.2 Trace 工具的开启和配置在使用Trace工具之前，我们需要打开Chrome浏览器的开发者工具。
然后，在开发者工具的顶部导航栏中找到"Performance"（性能）选项卡，并点击它。
在性能选项卡中，可以看到Trace工具的相关选项和配置。
1.3 开始一个Trace Session在Trace工具中，通常会使用两种方式开始一个Trace会话。
第一种方式是通过点击工具栏上的记录按钮来手动开始和停止Trace。
另一种方式是通过命令行接口（CLI）来自动开始和停止Trace。
1.4 配置并运行Trace在开始Trace会话之前，我们可以配置Trace工具以捕获特定的性能数据。
例如，可以选择捕获特定的事件、采样频率、页面加载时间等。
配置完毕后，我们可以点击记录按钮开始Trace会话。
在会话过程中，我们可以进行一系列操作，例如打开和关闭页面、执行操作等。
1.5 停止Trace 并分析结果当我们认为Trace会话已经足够长或者已经捕获到了感兴趣的性能数据后，可以点击停止按钮来停止Trace。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
G o o g l e C h r o m e开发人员工具详解集团企业公司编码：（LL3698-KKI1269-TM2483-LUI12689-ITT289-G o o g l e C h r o m e浏览器开发人员工具，让网页开发变得更轻松无论是IE6/7的InternetExplorerDeveloperToolbar或者是IE8自带的DeveloperTools，还是Firefox的Firebug，以及Safari的WebInspector和Opera的Dragonfly，他们的宗旨只有一个——帮助程序员方便、更高效地进行网页开发。
作为浏览器中生力军，GoogleChrome浏览器(4.0及以上版本)也自带了丰富的开发人员工具，让您可以随时随地对任何网页的CSS、HTML和JavaScript进行实时编辑、调试以及监控。
GoogleChrome浏览器开发人员工具不仅仅能帮助您诊断、修复在网页加载、脚本执行以及页面呈现中出现的问题，还可以帮助您最大限度地了解您的网页或网络应用程序对CPU以及内存的使用情况。
本篇教程将从以下几部分系统地讲解如何使用GoogleChrome浏览器开发人员工具来帮助您的开发：准备工作如何使用元素(Elements)面板如何使用资源(Resources)面板如何使用脚本(Scripts)面板如何使用时间轴(Timeline)面板如何使用剖析(Profiles)面板如何使用存储(Storage)面板如何使用审计(Audits)面板如何使用JavaScript控制台(Console)准备工作要开始使用开发人员工具，请先下载。
（如果您想试用最新版本的的开发人员工具，可以下载（英文网页）GoogleChrome浏览器。
）在GoogleChrome浏览器安装完成后，您可以打开自己感兴趣的网页或网络应用程序，然后通过下面任何一种方式进入开发人员工具：点击位于浏览器用户界面右上角的“页面”下拉菜单，然后选择“开发人员”→“开发人员工具”。
右键点击网页上的任一元素，在弹出菜单中选择“审查元素”。
在Windows或Linux操作系统上，使用Ctrl+Shift+I快捷键打开开发人员工具（或使用Ctrl+Shift+J直接进入JavaScript控制台）。
在Mac上，使用Command+Option+I快捷键打开开发人员工具（或使用Command+Option+J直接进入JavaScript控制台）。
现在您应该已经看到开发人员工具的窗口了吧？在窗口的最上方的工具栏里排列着8个图标，分别对应不同的功能，每一个图标点击后都会打开相应的调试面板，帮助您获取各种不同的信息，如DOM树、资源占用情况、页面相关的脚本等。
通过Ctrl+[和Ctrl+]键，可以在这些项之间进行切换。
工具栏最右方还提供了一个搜索框，方便在当前面板中进行搜索。
工具窗口下部的按钮可以让调试窗口停靠到主窗口内，切换JavaScript 控制台状态，以及其它一些功能。
当然您也可以使用Esc键来更快地切换JavaScript控制台状态。
直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。
窗口右下角显示的是错误和警告计数，点击它们也会打开控制台。
接下来的单元，让我们一起来一一分解这些图标所对应面板具有的强大功能吧！元素（Elements）面板在元素（Elements）面板中，可以看到整个页面的DOM树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。
我们这里以为例，鼠标右键单击“Google搜索”按钮，选择“审查元素”，您会看到如下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的“停靠”图标将其变为内嵌模式）：在工具窗口右侧，显示的是被选元素的样式信息，如有兴趣，可以尝试通过双击现有属性来修改该元素的style属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时观察页面的实时变化。
那怎样给现有的元素或者选择器增加一个属性值呢？不用着急，鼠标双击您所想修改的元素的element.style部分或者它应用的选择器的空白部分（如下图所示），即可添加属性。
需要注意的是，添加任何属性都必须以分号结束。
拖动工具窗口最右侧的滚动条，在展开的Styles模块下方还有Metrics、Properties、EventListeners几大模块。
Metrics模块以图形方式展示出左侧面板中选中元素的盒模型并标出了各部分的详细数值，在调试页面布局问题时，这样的展示方式往往更直观、更清晰。
向上拖动工具窗口中部的滚动条，找到“图片”元素，点击后，可看到在页面上相应的元素被选中，这时我们将工具窗口右侧的滚动条拖到最下方，展开EventListeners中个各项，可看到这个链接（元素）的相关事件监听函数。
通过EventListeners项右侧的“齿轮”图标，您可以选择是只显示选中节点上的注册的事件，还是显示整个事件流中所有注册的事件。
点击工具窗口左下角的放大镜图标可进入“审查模式”，选中后，放大镜变为蓝色，这时随鼠标在主窗口的页面中的移动，你会看到相应的元素被高亮标识出来，点击后，工具窗口会显示选中元素的DOM节点信息。
另外值得注意的一点是，在GoogleChrome浏览器开发人员工具里，所有脚本和样式表是按语法着色的，调试起来更加清晰。
资源（Resources）面板在资源面板中，你可以看到从网络上下载的所有资源。
打开资源面板的时候，您通常会看到如下的界面：由于资源跟踪会对性能产生一定影响，可以选择只对本次会话进行追踪还是对所有会话都进行资源跟踪。
选择好后点击启用资源追踪（“Enableresourcetracking”）按钮，你会看到如下的状态：这是加载此网页使用网络资源的时间表。
每个水平的棒状图示代表一个资源占用网络的时间，而在每个棒状图示的左侧颜色较浅的部分代表延迟时间（Latency），即从向服务器发出请求到服务器第一次响应之间的时长。
鼠标移至棒状图示上，可看到每个部分所花销的精确时间。
图中蓝色和红色的两条垂直线分别代表DOMContent加载完成和Load事件被触发的时间点。
在了解了网页各部分加载所花费的的时间后，您可以进行有效改进从而提高网站的效率。
位于时间表上方的轴，列出了可供选择的不同类型的资源，您可以选择查看所有资源，或仅查看某一类的资源。
通过时间表下方的下拉菜单，你可以指定排序方式。
同时您还可以通过下拉菜单左侧的“列表”选择使用宽行或窄行的方式来查看所有资源的信息。
点击左侧工具栏的Size图标，可以看到下载的各项资源的大小。
点击左侧各项资源，则可以看到它的详细信息，例如点击logo_cn.png 这项，我们将会看到：打开“Headers”标签页可以查看完整的头信息。
您甚至可以直接将资源图标拖入浏览器窗口，在浏览器中直接直接访问该项资源。
脚本（Scripts）面板在脚本面板里，您可以方便的调试JavaScript代码。
下面的图中标注了在脚本面板里的几个主要功能：图中的①—③的3个图标分别代表：①单步调试，不进入函数体内部②单步调试，进入函数体内部③跳出当前函数设置断点后按F5刷新，页面会在执行到断点语句处停下，如图：您可以在右侧添加所需观察的变量，来进行跟踪变量值的变化，也可查看堆栈调用情况及全局变量和函数的信息，也可以将鼠标移到感兴趣的变量名上直接查看此变量当前的值。
在脚本面板中，您可能会用到以下快捷键帮助调试：时间轴（Timeline）面板时间轴面板为您的网页及网络应用程序做了一个详细的性能分析，告诉您载入页面的时间究竟花在哪些地方。
从加载资源到解析JavaScript脚本、计算样式表及页面渲染的所有步骤，您都可以在这里看到它们消耗的时间和内存。
打开时间轴面板，您会看到这样的界面：这次我们以Google的举例，看一下这个面板的功能：1.首先，在GoogleChrome浏览器标签页中打开：2.如果您尚未打开开发人员工具，请按照这一章节的介绍打开开发人员工具，并切换到时间轴（Timeline）面板3.点击“开始记录”图标，您会看到圆点变为红色4.F5刷新页面，待页面载入完成后，再次点击“开始记录”图标，红色圆点变为灰色，您会看到时间轴面板里记录下来的时间消耗情况：鼠标移到棒状图示上，会看到相应的事件在载入、脚本解析及渲染三步骤所花费的详细时间：您还可以拖动上半部分区域的时间轴上的灰色竖条，设定下方详细数据区的时间范围，如下图所示：切换到Memory行，并重新记录，可以观察页面载入的过程中每个时刻使用堆的大小。
剖析（Profiles）面板剖析面板由CPU分析器和堆分析器组成，它能够帮助您了解网页和网络应用程序的执行时间和内存使用情况。
CPU分析器显示的是JavaScript脚本里的每个函数分别占用了多少执行时间堆分析器显示每个JavaScript对象所使用的内存大小通过了解资源使用分布，您就可以有效地对代码进行优化，从而提高网站的效率。
我们以为例，探讨剖析面板的使用。
首先在GoogleChrome浏览器中打开，并打开开发人员工具的剖析面板，您会看到如下界面：点击开始按钮，并刷新测试页面，开始信息收集。
页面重新载入完成后，浏览器在基准测试中的得分会显示出来，这时点击按钮停止CPU使用信息收集，您会看到“CPUPROFILES”项目下多出一个记录，这是您此信息收集区间CPU消耗的一个详细分解记录，您从中可以看出每个函数占CPU时间的百分比。
如果您仅仅对JavaScript代码中的几个函数感兴趣，您也可以选中它们，然后点击按钮，面板中将只显示被选中函数的信息，而按钮作用恰恰相反，将只显示除选中函数以外其它函数的信息。
在页面载入的过程中，您可以在任意时刻点击内存信息采集按钮，获取那一时刻内存使用状况信息。
内存使用信息记录会显示在“HEAPSNAPSHOTS”项下面。
剖析面板的搜索框不仅仅可进行函数名/对象名搜索，同时也支持数值（支持单位后缀，如ms/s/B/KB/MB及%）查找和带比较运算符（<、<=、=、>=、>）的数值查找。
例如在搜索框里输入“>30KB”，您会看到所有大于30KB的记录条被标为浅橙色，同时左侧的内存使用记录旁也会有数字表明在这个记录中有多少条满足搜索条件的结果。
存储（Storage）面板通过存储面板，您可以与HTML5的数据库存储和cookie进行交互。
您可以检查当前页面打开的所有数据库的内容，也可以在这些数据库中进行SQL查询。
我们以来简单介绍一下此面板的使用方法：1.在GoogleChrome浏览器中打开，并打开开发人员工具的存储面板2.在“黄色便条”中键入“第一条记录”，再新建两个便条，分别键入“第二条记录”和“第三条记录”在存储面板中，您可以点击数据库图标，会发现此页面建立了一个名为“WebkitStickyNotes”的表，点击此表，可查看里面所有的记录。