Google_Chrome_开发人员工具详解
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代码。
可以在源代码中单击断点，程序将在到达该行时停止执行。
google_chrome_源代码_分析
************************************************** **（本文从网上整理得到，源地址/caimouse/archive/2008/09/07/2893806.aspx）谷歌浏览器的源码分析(1) 收藏随着网络技术的发展，越来越多应用都已经离不开网络，特别像人类大脑一样的知识库的搜索引擎，更加是离不开功能强大的云计算。
不过，即便云计算非常强大，但它还不能直接地把结果呈现给用户，这样就需要一个客户端来呈现出来，这个客户端就是浏览器。
现在越来越多人上网，他们每一次上网，都离不开浏览的使用，这已经是一个不可缺少的软件了。
这里介绍和分析谷歌推出有创新的浏览器，它的速度比其它浏览器快很多，那么它是怎么实现的呢？又采用了什么样的技术能达到这样呢？又比如它的标签页是每一个进程进行显示的，这到底又是怎么样实现的呢？下面来通过分析它的源码，一一地解开这种高新技术的使用，以及这种高效算法的奥秘。
谷歌浏览器的英语名称为Chrome，它的意义是铬。
铬是一种有光泽的、蓝灰色的坚硬金属元素。
不失光泽，抗腐蚀，最早在铬铁矿中发现。
用作催化剂，可加强钢合金的强度和生产不锈钢，可以做防腐镀层和玻璃制品中的颜料。
原子序数24；原子量51.996；比重7.18；化合价2，3，6。
谷歌起这个名称，可能是想让这个浏览器永远不失去光泽，永远那么吸引人。
铬是无毒，化学性质很稳定，有延展性，含杂质时硬而脆。
熔点1857C，沸点2672C，密度单晶为7.22克/厘米3，多晶为7.14克/厘米3；铬，原子序数24，原子量51.9961。
铬的名称来自希腊文Chroma，意为颜色。
因为这种元素以多种不同颜色的化合物存在，故被称为“多彩的元素”。
可用于制不锈钢，汽车零件，工具，磁带和录像带等。
铬镀在金属上可以防锈，也叫可多米，坚固美观。
红、绿宝石的色彩也来自于铬。
作为现代科技中最重要的金属，以不同百分比熔合的铬镍钢千变万化，种类繁多，令人难以置信。
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函数，就可以通过这个功能实现了。
谷歌浏览器
谷歌浏览器优质词条编辑词条编辑摘要谷歌浏览器，又称Google Chrome，是一个由Google（谷歌）公司开发的开放原始码网页浏览器。
软件的beta测试版本在2008年9月2日发布，提供43种语言版本，适用于PC、苹果机和Linux 的快速浏览器。
软件的名称是来自于又称作Chrome的网路浏览器图形使用者界面（GUI）。
Google Chrome 浏览器在简约的外观设计下，蕴含了尖端的技术，让网络浏览变得更快捷、更安全且更简便，Chrome浏览器登录即可同步计算机上的个性化设置，随时随地享受个性化体验。
基本信息栏中文名称谷歌浏览器开发公司谷歌发行时间2008年9月2日支持平台Windows、Linux和Mac 语言版本50种语言外文名称Google Chrome发行商谷歌编程语言C++、汇编语言、Javascript 渲染引擎WebKit（基于KHTML）开源免费版Chromium软件简介编辑本段软件概述Google Chrome是由Google开发的一款设计简单、高效的Web浏览工具。
[1]Google Chrome的特点是简洁、快速。
GoogleChrome支持多标签浏览，每个标签页面都在独立的“沙箱”内运行，在提高安全性的同时，一个标签页面的崩溃也不会导致其他标签页面被关闭。
此外，Google Chrome基于更强大的JavaScript V8引擎，这是当前Web浏览器所无法实现的。
Google Chrome另有手机版的Chrome浏览器，于2012年发布了谷歌浏览器移动版，提供IOS系统和安卓系统的谷歌浏览器，在保持浏览器原有特点的情况下，实现了多终端使用浏览器，具有共享收藏历史信息等功能，是手机浏览器的一次巨大突破。
随着Android系统的份额不断扩大而市场占有率不断飙升。
Google Chrome是一款免费软件，借鉴了苹果Safari的WebKit引擎、Mozilla 的Firefox及其他相关应用。
如何使用网站调试工具(如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. 资源面板：用于查看网页的所有资源文件，如图片、样式表、脚本文件等。
深入浅出CDP（ChromeDevToolsProtocol）
深⼊浅出CDP（ChromeDevToolsProtocol）深⼊浅出 CDP (Chrome DevTools Protocol)14 Jan 2020Table of Contents背景⾃从 Chrome 59 发布⽀持 –headless 启动参数以后 (Windows 上是 60 版本), 轻量级浏览器内核就不再是 webdriver ⼀家独⼤, 甚⾄ phantomjs 作者也发⽂表⽰不再维护该项⽬, 国外也有越来越多的⽂章推荐使⽤ headless Chrome 代替过去 selenium + webdriver 的⽅式进⾏ Web 测试或者爬⾍相关⼯作. ⽬前国内实际上使⽤ headless Chrome 的并不少, 只不过⽬前⼤量营销号的存在, 导致为了点击量频繁刷⽂, 进⽽把早年间 selenium ⽤作爬⾍的旧⽂章重新翻到读者眼前, 所以遇到各种稀奇古怪的问题, 初学者使⽤体验较差. selenium 作为⽼牌 Web 测试⼿段闻名已久, 在⾼级功能 API 层⾯⾮常成熟, 后来也加强了对 Chrome headless 模式下 CDP 的⽀持, ⽬前依然拥有⼤量⽤户在使⽤.这⾥, 简单提⼀下 selenium + webdriver ⽅式的⼀些不⾜:1. 默认参数启动时很容易被服务端发现2. 性能与 Chrome headless 相⽐, 较差3. 存在了⽆数年的内存泄漏问题4. 不像 Chrome 有⼤⼚在背后⽀撑, 上千 issues 解决不完5. ⽆法作为完整浏览器使⽤和调试简⽽⾔之, 都 2020 年了, 不要再抱着 selenium 不放了概述CDP交流⽅式通过 HTTP, WebSocket 两种⽅式, 对添加了远程调试接⼝参数( --remote-debugging-port=9222 )的浏览器进⾏远程调试, ⼤部分功能其实与浏览器⼿机打开的 devtools ⼀致1. HTTP 负责总览当前 Tabs 信息2. 每个 Tab 的对话使⽤ WebSocket 建⽴连接, 并接收已开启功能 (enabled domain) 的事件消息.Headless Browser俗称的⽆头浏览器, 实际上就是没有图形界⾯的浏览器, 因为省去了视觉渲染的⼯作, 性能和开销有较⼤优化, 粗略估计, 原本只能启动⼗个浏览器的内存, 使⽤ Headless 模式可以⾄少启动三倍的数量常见⽤途1. 主要还是 Web 测试2. 少数情况会⽤来做爬⾍, 所见即所得的调试体验⾮常容易上⼿3. 有⼀些 Web ⾃动化的⼯作, 可以替代⾃⼰写扩展或者 tampermonkey JS 脚本, 毕竟权限更⾼更全⾯, GUI 模式调试完以后, ⽆⼈参与操作的多数情况, 则可以⽆痛改成 –Headless 模式来提⾼性能常见问题1. Chrome 浏览器有⼀个并发连接数的限制. 即对同⼀个⽹站, 只允许建⽴最多 6 个连接(纯静态情况下, 可以看作是 6 个同 domain 的 Tabs). 如果真的遇到超过 6 个连接的需求, 可以通过新开⼀个浏览器实例来解决.2. 对于 Linux 来说, ⼦进程处理不正确会导致出现僵⼫进程/孤⼉进程, 导致⽩⽩浪费资源, 时间长了整台服务器的内存都会垮掉. 常见解决⽅案有 3 种1. 将 Chrome 守护进程 (Daemon) 与业务代码隔离, 随需要启动对应数量的 Chrome 实例2. 就 Python subprocess 这个内置模块来说, 确定每次关闭的时候执⾏正确的姿势1. 调⽤ Browser.close 功能 gracefully 地关闭浏览器2. 然后 terminate ⼦进程后, 记得 wait ⼀下消息3. 最后保险起见可以再加个 kill, 虽然实际没什么⽤3. 最简单的其实是找到 chrome 实例的进程 ID 来杀, 毕竟杀死以后, subprocess 那边⽴刻就结束了3. 神奇的是, 除了 chrome 实例有僵⼫进程, 连 tab 也会存在⼀些看不见 ( /json ⾥那些⾮ “page” 类型的就是了)或关不掉(僵⼫标签页)的 tab 页1. ⽬前这种 tab 不确定会不会⾃⼰关闭, 访问 B 站遇到过2. 以前我处理这种 tab 的⽅式是给每个 tab 设定⼀个 lifespan, 异步⼀个循环, 扫描并关闭那些⾮ page 类型或者寿命超时了的 tab3. 然⽽ tab 数量多了以后, 反⽽会出现很多⽆法关闭的僵⼫ tab, 通过 /json/close 或者发送 Page.close 事件都⽆效, 暂时只好重启 chrome 实例来清理4. 拿来做爬⾍还有⼏个问题没解决1. chronium 开发团队本着 “你并不是真的特别需要” 原则, 没有动态挂代理的开发意向, 毕竟⼈家也不太希望⼈们拿它来做爬⾍, 只能指望不同代理 IP 启动多个 chrome 实例来解决2. 在 “⾮ headless” 情况下, 可以通过代理扩展, 或者 pac ⽂件, 来搞定动态代理的问题3. 在 headless 的模式, 那就只好从 upstream ⾓度搞了, 甚⾄挂上 mitmproxy 也⾏吧4. ⾄于动态修改 UA, 暂时可以⽤扩展来搞, 不过如果喜欢钻研, 可以发现 CDP ⾥⽀持动态修改 Request 的各项属性, 在这⾥改 headers 是有效的⽂档常⽤功能Chrome DevTools Protocol ⽂档的使⽤, 主要还是使⽤⾥⾯的检索功能, 不过最常⽤的还是以下⼏个领域1. Page1. 简单地理解, 可以把⼀个 Page 看成⼀个 Page 类型的 Tab2. 对 Tab 的刷新, 跳转, 停⽌, 激活, 截图等功能都可以找到3. 也会有很多有⽤的事件需要 enable Page 以后才能监听到, ⽐如 loadEventFired4. 多个⽹站的任务, 可以在同⼀个浏览器⾥打开多个 Tab 进⾏操作, 通过不同的 Websocket 地址进⾏连接, 相对隔离, 并且托异步模型的福, Chrome 多个标签操作的抗压能⼒还不错5. 然⽽并发操作多个 Tab 的时候, 可能会出现⼀点⼩问题需要注意: 同⼀个浏览器实例, 对⼀个域名只能建⽴ 6 个连接, 这个不太好改; 过快⽣成⼤量 Tab, 可能会导致有的 Tab ⽆法正常关闭(zombie tabs)2. Network1. 和产⽣⽹络流量有关系的⼤都在这个 Domain2. ⽐如 setExtraHTTPHeaders / setUserAgentOverride 对当前标签页的所有请求修改原是参数3. ⽐如对 cookie 的各种操作4. 通过 responseReceived + getResponseBody 来监听流量, 只⽤前者就能嗅探到 mp4 这种特殊类型的 url 了, ⽽后者可以把流量⾥已经 base64 化的数据进⾏其他操作, ⽐如验证码图⽚的处理3. 其他功能也基本和 devtools ⼀致常规姿势1. 和某个 Tab 建⽴连接2. 通过 send 发送你想使⽤的 methods3. 通过 recv 监听你发送 methods 产⽣的事件, 或者其他 enable 的事件, 并执⾏对应回调实践准备⼯作1. 安装 chrome 浏览器2. 安装 Python3.7pip install ichrome -Uichrome 库是可选的, 主要是为了演⽰通过 HTTP / Websocket client 与 chrome 实例实现通信ichrome 库除了协程实现, 也有⼀个同步实现, 观察它的源码⽐协程版本的更直观⼀点, 也易于学习启动调试模式下的 chromefrom ichrome import ChromeDaemondef launch_chrome():with ChromeDaemon(host="127.0.0.1", port=9222, max_deaths=1) as chromed:chromed.run_forever()if __name__ == "__main__":launch_chrome()以上代码负责启动 chrome 调试模式的守护进程, 具体参数如下:1. **chrome_path: **表⽰ chrome 的可执⾏路径 / 命令, 默认为 None 的时候, 会⾃动根据操作系统去尝试找寻 chrome 路径, 如 linux 下的 google-chrome 和 google-chrome-stable, macOS 下的 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome, 或者Windows 下的1. C:/Program Files (x86)/Google/Chrome/Application/chrome.exe2. C:/Program Files/Google/Chrome/Application/chrome.exe3. “%s\AppData\Local\Google\Chrome\Application\chrome.exe” % os.getenv(“USERPROFILE”)2. **host: ** 默认为 127.0.0.1, 之所以不⽤ localhost, 是因为很多 Windows / macOS 的 etc/hosts ⽂件⾥被强制绑定到了 ipv6 地址上3. **port: ** 默认为 92224. **headless: ** 常见参数 –headless, –hide-scrollbars, 放在初始化参数⾥了5. **user_agent: ** 常见参数 –user-agent6. **proxy: ** 常见参数 –proxy-server7. **user_data_dir: ** 避免 chrome 到处乱放 user data, 所以默认会放到 user ⽬录下的 ichrome_user_data ⽂件夹下, 命名按端⼝号chrome_92228. **disable_image: ** 常⽤参数 –blink-settings=imagesEnabled=false, 从 blink 层⾯禁⽤, ⽐其他禁⽌图⽚加载的⽅式要靠谱9. **max_deaths: ** ⽤来⾃动重启, max_deaths=2 表⽰快速杀死 chrome 实例 2 次才能避免再次⾃动重启, 所以默认为 110. **extra_config: ** 就是添加其他更多 chrome 启动的参数, 参数类型为 list启动带图形界⾯的 chrome 之后, 可以⼿动尝试下通过 http 请求和 chrome 实例通信了1. 访问 , 会拿到⼀个列出当前 tabs 信息的 json2. 其他操作参考 (HTTP Endpoints 部分)[{"description": "","devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/E6826ED4A0365605F3234B2A441B1D03","id": "E6826ED4A0365605F3234B2A441B1D03","title": "about:blank","type": "page","url": "about:blank","webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/E6826ED4A0365605F3234B2A441B1D03"}]操作 Tab1. 建⽴到 webSocketDebuggerUrl 的 Websocket 连接, 然后监听事件2. ⼤部分功能 ichrome 已经打包好了from ichrome import AsyncChromeimport asyncioasync def async_operate_tab():chrome = AsyncChrome(host='127.0.0.1', port=9222)if not await chrome.connect():raise RuntimeErrortab = (await chrome.tabs)[0]async with tab():# 跳转到 httpbin, 3 秒 loading 超时的话则 stop loadingawait tab.set_url('', timeout=3)# 注⼊ js, 并查看返回结果result = await tab.js("document.title")title = result['result']['result']['value']# 打印 titleprint(title)# # 通过 js 修改 titleawait tab.js("document.title = 'New Title'")# click ⼀个 css 选择器的位置, 跳转到了 Githubawait tab.click('body > a:first-child')# 等待加载完成await tab.wait_loading(3)async def callback_function(request):if request:# 监听到经过过滤的流量, 等待它加载⼀会⽐较保险for _ in range(3):result = await tab.get_response(request)if result.get('error'):await tab.wait_loading(1)continue# 拿到整个 htmlbody = result['result']['body']print(body)def filter_func(r):url = r['params']['response']['url']print('received:', url)return url == 'https:///'# 监听流量, 需要异步处理, 则使⽤ asyncio.ensure_future 即可# 监听 10 秒task = asyncio.ensure_future(tab.wait_response(filter_function=filter_func,callback_function=callback_function,timeout=10),loop=tab.loop)# 点击⼀下左上⾓的⼩章鱼则会触发流量await tab.click('[href="https:///"]')# 等待监听流量await taskif __name__ == "__main__":asyncio.run(async_operate_tab())总结CDP 单单⼊门的话, 其实没想象中那么复杂, chrome 59 刚出的时候, puppeteer 都没的⽤, 更别说 pyppeteer 之类的包装, 看了⼏个早期项⽬的源码, 发现简单使⽤的话, 其实主要就是:1. HTTP2. Websocket3. Javascript4. Protocolpyppeteer 诞⽣之初曾体验了⼀下, 第⼀步就因为⼀些不可抗⼒导致下载 chromium 失败, 所以之后只能阅读⼀下⾥⾯⼀些有意思的源码, 主要看了下如何从 puppeteer 原⽣事件驱动转为 Python ⾓度的事件, pyee 的使⽤也让⼈眼前⼀亮之后⾃⼰摸索过程中也碰到了各种各样问题, 除了上⾯提到的, 其实还遇到 Websocket 粘包(粘包本⾝就是个因为理解不⾜导致的伪命题), Chrome Headless 阉割掉了很多基础功能也使开发过程中总是⽆理由地调试失败, 甚⾄关闭 user-dir 使⽤匿名模式导致⼀系列不知名故障也是费⼼费⼒, 不过总体来说收获颇⼤⽤ Python 来操作 chrome 能做的事情挺多, 尤其是各路签到爬⾍, 或者索取微信公众平台⼤概 20 ⼩时有效期的 cookie / token 给后台爬⾍使⽤, 采集视频, ⾃动化测试时候截图, 启动 Headless 模式以后节省了很多⼿动操作的时间, 甚⾄可以丢到⽆ GUI 的 linux server 上去. 要知道以前指望的还是 tampermonkey 或者⼿写扩展, 很多 Python 的功能只能转 js 再⽤, 劳⼼劳⼒.。
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。
xpath基本语法 chrome
一、概述XPath（XML Path Language）是一种在XML文档中定位节点的查询语言。
它是一种跨评台、跨语言的技术，可以用于定位HTML文档中的任何元素。
在Chrome浏览器中，XPath可以用于定位页面元素，并且可以与其他标准技术（如CSS选择器）结合使用。
二、基本语法在Chrome浏览器中，可以通过调试工具（DevTools）来使用XPath 定位页面元素。
下面是XPath的一些基本语法：1. 使用绝对路径XPath可以使用绝对路径来定位元素。
可以使用`/html/body/div[1]/p[2]`来定位页面中的第一个`div`元素下的第二个`p`元素。
2. 使用相对路径XPath也可以使用相对路径来定位元素。
可以使用`//div[class='content']//p`来定位页面中所有`class`属性为`content`的`div`元素下的所有`p`元素。
3. 使用节点属性XPath可以通过节点的属性来定位元素。
可以使用`//input[type='text']`来定位页面中所有`type`属性为`text`的`input`元素。
4. 使用逻辑运算符XPath支持使用逻辑运算符来定位元素。
可以使用`//input[type='text' and name='username']`来定位页面中`type`属性为`text`并且`name`属性为`username`的`input`元素。
5. 使用索引XPath还支持使用索引来定位元素。
可以使用`(//div[class='content'])[2]//p`来定位页面中第二个`class`属性为`content`的`div`元素下的所有`p`元素。
6. 使用通配符XPath可以使用通配符来定位元素。
可以使用`//input[type='text' and starts-with(name, 'user')]`来定位页面中`type`属性为`text`并且`name`属性以`user`开头的`input`元素。
devtools使用总结
devtools使用总结简介devtools（开发者工具）是一款强大的浏览器调试工具，通常用于Web开发人员进行网页调试和性能优化。
在这篇文档中，我们将总结devtools的使用方法和常见功能，以帮助开发人员更好地利用这个工具。
安装和启动devtools是现代浏览器的内置工具，可通过浏览器的开发者模式访问。
以下是常见浏览器的启动devtools的方法：•谷歌浏览器：点击菜单栏的三个点，选择“更多工具” -> “开发者工具”，或者按下快捷键Ctrl+Shift+I。
•火狐浏览器：点击菜单栏的三个横线，选择“开发者” -> “Web开发者工具”，或者按下快捷键Ctrl+Shift+I。
•Safari浏览器：点击菜单栏的“偏好设置” -> “高级” -> “在菜单栏中显示“开发”菜单”。
•Microsoft Edge浏览器：点击菜单栏的三个点，选择“更多工具” -> “开发人员工具”，或者按下快捷键Ctrl+Shift+I。
基本功能1. 元素面板（Elements）元素面板是一个直观的DOM树形结构，可查看和编辑网页的HTML和CSS。
开发人员可以通过单击元素来查看和修改其样式和属性。
此外，还可以在元素面板中添加或删除元素，以实现对网页结构的调整。
2. 控制台面板（Console）控制台面板提供一个JavaScript命令行界面，开发人员可以在这里输入和执行JavaScript代码。
同时，控制台面板还会显示网页中的错误和警告信息，帮助开发人员进行debug。
3. 网络面板（Network）网络面板用于监视网页的网络请求，包括HTTP请求和响应。
开发人员可以查看每个请求的详细信息，如请求头、响应时间和请求大小。
此外，网络面板还提供了筛选功能，用于筛选特定的请求类型或域名。
4. 资源面板（Resources）资源面板允许开发人员查看和修改网页加载的各种资源，如脚本、样式表、图片和字体等。
chrome 使用技巧
chrome 使用技巧Google Chrome是目前最流行的网页浏览器之一，它不仅速度快、稳定性好，还有许多实用的使用技巧，让用户能更高效地使用互联网。
1. 快捷键：Chrome有许多方便的快捷键，例如Ctrl + T可以打开新标签页，Ctrl + Tab可以在已打开的标签页之间切换，Ctrl + Shift + T可以恢复刚刚关闭的标签页，Ctrl + L可以快速选中地址栏，Ctrl + W可以关闭当前标签页等。
学会使用这些快捷键可以大大提高浏览效率。
2. 搜索技巧：Chrome的地址栏也可以作为搜索栏使用，直接输入要搜索的关键词即可。
而且Chrome支持各种搜索引擎，用户可以在设置中选择自己喜欢的搜索引擎，默认是Google。
另外，Chrome还支持搜索关键词的自动完成和搜索建议，能够更精准地找到想要的结果。
3. 标签页管理：Chrome支持多标签页的使用，方便用户同时浏览多个网页。
用户可以用鼠标拖动标签页来改变它们的顺序，也可以用鼠标中键点击链接来在新标签页中打开链接。
另外，Chrome还支持把多个标签页合并成一个窗口，或者把一个窗口的标签页分开并排列在屏幕上。
4. 书签管理：Chrome的书签管理功能也很强大。
用户可以通过点击地址栏旁边的星星按钮来保存当前页面为书签，也可以通过Ctrl + D快捷键来进行书签操作。
另外，用户还可以把书签导出为HTML文件，方便在其他浏览器中使用。
5. 扩展程序：Chrome支持各种扩展程序，可以为浏览器增加各种功能和工具。
用户可以在Chrome网上应用商店中找到并安装各种扩展程序，例如广告拦截器、密码管理器、翻译工具等。
扩展程序的使用可以根据个人需求来进行选择和定制。
6. 隐私和安全：Chrome也非常注重用户的隐私和安全。
用户可以在设置中进行隐私和安全设置，例如清除浏览数据、管理密码、配置安全证书等。
另外，Chrome还自带了反恶意软件的功能，可以帮助用户阻止潜在的恶意网站和软件。
前端开发中的网页性能分析工具推荐
前端开发中的网页性能分析工具推荐在前端开发中，网页性能是一个非常重要的指标。
随着互联网的发展和网页技术的进步，用户对于网页加载速度和响应时间的要求也越来越高。
为了达到更好的用户体验，我们需要使用一些网页性能分析工具来评估和优化我们的网页。
一、Google PageSpeed InsightsGoogle PageSpeed Insights是一个由Google提供的免费性能测试工具。
它可以分析网页的性能指标，如加载时间、可交互时间和性能优化建议等。
同时，它还会生成一个性能报告，帮助开发者了解自己的网页在不同终端上的性能表现，并提供相应的优化方案。
二、WebPagetestWebPagetest是一个开源的网页性能测试工具，提供了全球各地的测试节点。
它可以模拟不同网络环境和设备，测试网页在不同情况下的加载速度和性能。
通过分析测试结果，开发者可以找出网页性能瓶颈，并采取相应的优化措施。
三、GTmetrixGTmetrix是一个综合性的网页性能分析工具，它结合了Google PageSpeed Insights和Yahoo YSlow的技术指标，为开发者提供了全面的性能分析报告。
通过GTmetrix，开发者可以了解网页的加载时间、文件大小、缓存设置等重要性能指标，并根据报告中的建议来进行优化。
四、LighthouseLighthouse是一个由Google开发的自动化网页性能测试工具，它可以在Chrome浏览器中进行运行。
Lighthouse会根据一系列性能指标对网页进行评估，包括加载时间、首次绘制时间、可交互时间等。
同时，它还会提供相应的优化建议和最佳实践，帮助开发者改善网页的性能。
五、PingdomPingdom是一款流行的网站检测工具，它可以测试并分析网页的性能和可用性。
Pingdom提供了全球各地的测试节点，可以模拟不同网络环境下的加载速度。
同时，它还能够监测网页的可用性，并在网页出现故障时发送警报，帮助开发者及时解决问题。
Chrome开发者工具不完全指南(四、性能进阶篇)
前言Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化，简单来说它就是Timeline的数字化版本。
它的功能选项卡不是很多（只有三个），操作起来比较前面的几块功能版本来说简单，但是里面的数据确很多，很杂，要弄懂它们需要花费一些时间。
尤其是在内存快照中的各种庞杂的数据。
在这篇博客中卤煮将继续给大家分享Chrome开发者工具的使用经验。
如果你遇到不懂的地方或者有不对的地方，可以在评论中回复卤煮，文章最后卤煮会最后把秘籍交出来。
下面要介绍的是Profiles。
首先打开Profiles面板。
Profiles界面分为左右两个区域，左边区域是放文件的区域，右边是展示数据的区域。
在开始检测之前可以看到右边区域有三个选项，它们分别代表者不同的功能:1.(Collect JavaScript CPU Profile)监控函数执行期花费的时间2.(Take Heap Snapshot)为当前界面拍一个内存快照3.(Record Heap Allocations)实时监控记录内存变化(对象分配跟踪)一、Collect JavaScript CPU Profile（函数收集器）首先来关注第一个功能，(Collect JavaScript CPU Profile)监控函数执行期花费的时间。
讲道理不如举例子，为了更清楚地了解它的功能概况，我们可以编写一个测试列子来观察它们的作用。
这个列子简单一些，使得我们分析的数据更清晰一些。
<!DOCTYPE html><html><head><title></title></head><body><button id="btn"> click me</button><script type="text/javascript">function a() {console.log('hello world');}function b() {a();}function c() {b();}document.getElementById('btn').addEventListener('click', c, true);</script></body></html>在右边区域中选择Collect JavaScript CPU Profile选项，点击下方的Start按钮（也可以点击左边的黑色圆圈），这时候Chrome会开始记录网页的方法执行，然后我们点击界面的按钮来执行函数。
各类浏览器调试工具使用详解
各类浏览器调试工具使用详解浏览器调试工具是开发者在开发过程中必备的工具之一，它可以帮助我们快速定位和解决网页中的问题。
不同的浏览器提供了不同的调试工具，下面将对常用的几种浏览器调试工具进行详细介绍。
1. Chrome DevTools (Chrome开发者工具)Chrome DevTools是Google Chrome浏览器自带的一套调试工具，通过按下F12或右键点击网页选择“检查”即可打开。
它提供了丰富的功能，包括元素查看、控制台、网络、源代码等。
- 控制台：用于查看和调试JavaScript代码，可以输出日志、执行命令、查看变量值等。
-网络：用于分析网络请求，可以查看请求和响应的头部、状态码、内容等信息。
- 源代码：可以在DevTools中直接修改和调试页面的源代码，还可以设置断点进行代码调试。
2. Firefox Developer Tools (Firefox开发者工具)Firefox Developer Tools是Mozilla Firefox浏览器内置的调试工具，通过按下F12或右键点击网页选择“检查元素”打开。
它提供了类似Chrome DevTools的功能，包括元素查看、控制台、网络、存储等。
-元素查看：可以查看和修改元素样式、布局、事件监听等。
- 控制台：用于调试JavaScript代码，可以输出日志、查看变量值、执行命令等。
-网络：可以查看和分析网络请求，包括请求和响应的头部、状态码、内容等。
- 存储：可以查看和修改网页的Cookie、本地存储、IndexedDB等。
3. Safari Web Inspector (Safari网络检查器)Safari Web Inspector是Safari浏览器自带的调试工具，通过菜单栏中的“开发”选项中选择“显示Web检查器”可以打开。
与Chrome DevTools和Firefox Developer Tools类似，它也提供了元素查看、控制台、网络、资源等功能。
学习使用浏览器开发者工具进行调试和性能分析
学习使用浏览器开发者工具进行调试和性能分析浏览器开发者工具是一组内置于现代浏览器中的工具，旨在帮助开发人员调试和优化网页。
使用浏览器开发者工具，开发人员可以通过检查和修改网页的HTML、CSS和JavaScript来查找和解决问题。
同时，浏览器开发者工具还提供了性能分析功能，可以帮助开发人员优化网页加载速度和性能。
本文将详细介绍如何使用浏览器开发者工具进行调试和性能分析，主要包括以下几个方面的内容：1. 开启浏览器开发者工具：不同浏览器的开发者工具打开方式不尽相同，可以通过快捷键、菜单栏或右键菜单来打开。
常见的浏览器开发者工具有Chrome DevTools、Mozilla Firefox的开发者工具、Microsoft Edge的开发者工具等。
2. 检查网页元素：在浏览器开发者工具的“Elements”（或类似名称）标签中，可以查看网页的DOM结构，并对元素进行检查和修改。
开发人员可以通过查看和修改HTML标签、属性和样式来调试和优化网页。
3. 控制台调试：浏览器开发者工具提供了JavaScript控制台，可以在其中执行和调试JavaScript代码。
开发人员可以在控制台中输出日志信息、调用JavaScript 函数，甚至可以在运行中的网页上进行实时的代码修改和测试。
4. 网络调试：浏览器开发者工具还提供了网络调试功能，可以查看网页的网络请求和响应。
开发人员可以查看请求的详细信息、请求头和响应内容，还可以模拟不同的网络环境和速度来测试网页的性能。
5. 性能分析：浏览器开发者工具的性能分析功能可以帮助开发人员找到网页加载过程中的性能瓶颈和优化点。
通过对网络请求、DOM构建、JavaScript执行和渲染等方面的分析，开发人员可以了解网页加载的耗时和资源占用情况，并针对性地进行优化。
6. 编辑器集成：一些浏览器开发者工具还可以与编辑器集成，提供更加高效的开发体验。
开发人员可以在编辑器中直接编辑网页代码，并通过浏览器开发者工具实时预览效果，从而更方便地进行调试和开发。
chromium代码解析 -回复
chromium代码解析-回复Chromium 代码解析Chromium 是一款开源的网页浏览器项目，它的核心代码被广泛应用于世界上最流行的浏览器之一- Google Chrome。
Chromium 项目的目标是提供一个稳定、高效、安全的浏览器引擎，为用户提供良好的上网体验。
在本文中，我们将深入探讨Chromium 的代码结构、工作原理和关键特性，以及如何通过分析其代码来理解浏览器的工作原理。
一、代码结构Chromium 代码库由几个主要部分组成，包括浏览器引擎Blink、网络栈Net、JavaScript 引擎V8，以及其他辅助模块。
其中，Blink 和Net 是Chromium 的核心组件，负责渲染和处理网页内容，以及处理网络请求和响应。
Blink 引擎是Chromium 中用于渲染网页的核心模块，它基于Webkit 开发，包含了HTML 解析器、CSS 解析器和渲染引擎等关键组件。
Blink 引擎的代码位于src/third_party/blink 目录下，它为Chromium 提供了强大的渲染和展示网页内容的能力。
Net 模块负责处理浏览器的网络请求和响应，包括HTTP 协议栈、TLS/SSL 安全通信和网络代理等功能。
它的代码位于src/net 目录下，通过分析这些代码我们可以深入了解浏览器是如何与服务器通信、加载网页内容和处理网络异常的。
除了核心组件，Chromium 还包含许多其他模块，如浏览器UI、JavaScript 引擎V8、媒体模块、安全模块等。
这些模块的代码分布在不同的目录下，每个模块都有自己的功能和设计目标。
二、工作原理Chromium 的工作原理与大多数现代浏览器类似，主要分为渲染进程和浏览器进程。
浏览器进程负责用户界面、与用户的交互和对浏览器标签页的管理，而渲染进程负责加载和渲染网页内容。
当用户在浏览器中输入一个网址或点击链接时，浏览器进程将发起一个网络请求，请求数据将被发送到Net 模块进行处理。
Google Chrome 新手入门
Google Chrome新手入门一、基础知识1.Google Chrome 采用WebKit 内核，并拥有目前最快的JavaScript 引擎V8，支持几乎所有最新的Web技术。
无论是软件界面还是浏览速度，都会让你耳目一新。
另外，它是多进程（Multi-process）模式的浏览器，所以当你打开多个标签页时，任务管理器中会有多个相同的chrome.exe 进程；这样做的好处是，当一个标签页崩溃时，也不会影响到其他的标签页（除非主进程崩溃）。
2.已经拥有的功能(1) 隐私模式(2) 换肤功能(3) 支持直接安装User Scripts(4) 支持扩展(5) 新标签页比Opera 的Speed dial 更强大(6) 一框多用：地址栏(omnibox)中直接显示搜索建议(7)支持Windows 7 的jumplist(8)类似Firefox中的冻结标签页的Pin Tab功能(9) 可以直接创建网站快捷方式到桌面(10)……二、下载及安装1.Chrome & Chromium(1) Google Chrome正式版（Stable）4.0.249.89 在线安装| 离线安装包测试版（Beta） 4.1.249.1025 在线安装| 离线安装包开发版（Dev） 5.0.342.2 在线安装| 离线安装包以上链接只适用于Windows用户，请使用Linux或Mac的用户访问这里。
Chrome Channel切换器：可以让你切换Chrome浏览器的版本。
注意：在线安装会自动添加google update 服务，以保证程序及时升级到最新版本；如果不喜欢，下载离线安装包，用winrar/7-zip 打开并解压即可使用。
（自己动手制作便携版的方法：/thread-6298-1-1.html）另外，如果喜欢PortableApps，可以下载他们制作的版本。
/apps/internet/google_chrome_portable 如果想实现Google Chrome portable，让你的个人配置信息、Cookie等随chrome.exe一起保存的话，参考我那篇绿化Google Chrome的博客帖子，给一个run.bat的例子，和chrome.exe放在一起，双击run.bat启动的chrome会自动把所有个性配置信息保存在和chrome.exe同级目录的est_profile文件夹下。
Chrome开发人员工具之控制台(Console)
Chrome开发人员工具之——控制台（console）
在每个面板下都可以展开控制台界面，在查看Dom、调试Javascript时，都可能用到控制台。
单击工具条上的按钮可以展开、关闭控制台界面，Esc键也能可以。
控制台里有自动完成功能。
在输入表达式时，可以自动提示属性名。
有多个属性名，可以通过上、下方向键选择。
按向右方向键表示接受当前的自动完成提示。
控制台也支持Firebug的命令行API。
在Elements面板下使用控制台
$(css选择器)
依据选择器，选择(dump)一个指定节点
$0
选择最后一次选定（select）的节点（啥叫“选定”：比如鼠标单击某个节点，则表示选定过）
$1
选择上一次选定的节点
$2,$3...
道理同上
inspect( css选择器)
审查元素
dir( id )
查看以Javascript对象的形式展示的属性
dirxml( id )
查看以html形式展示的树形标签结构
原文地址：https:///chrome-developer-tools/docs/console 翻译：Sigma。
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"⽂件定义的条⽬。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
GoogleChrome浏览器开发人员工具，让网页开发变得更轻松无论是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”的表，点击此表，可查看里面所有的记录。