1

CHROME 浏览器开发者工具介绍

黄昊2011/6/25

2

DOM 操作 样式表操作 脚本调试 快捷键

目录

3

讨论对象 – Chrome 12

12.0.xxx

4

右键菜单：审查元素 / Inspect element 快捷键： Ctrl + Shift + I 打开开发者工具 快捷键： Ctrl + Shift + J 打开工具和命令行

启动开发者工具

5

编辑 DOM 节点属性( 双击 )

编辑 outerHTML( 右键菜单 Edit as HTML)◦ 实现动态插入节点

删除节点

DOM 操作

6

修改和添加样式 (style)

添加新的规则 (rule)

直接动态修改样式表文件

多版本控制

小功能 ( 颜色模式 )

样式表操作

7

用 ESC 键切换命令行窗口 在命令行窗口中学习 Javascript 特性 动态修改脚本，快速调试

脚本调试

8

$0 – 引用当前选中元素◦ var e = $0;

元素 – 显示元素 DOM 树 dir( 元素 ) – 显示元素属性 (properties) inspect( 元素 ) – 在文档树窗口中选中该元素 copy( 文字 ) – 拷贝文字到剪贴板

脚本调试 – 控制台 API ( 类似 Firebug)

9

格式化混淆过后的脚本！◦ 研究别人的代码

脚本调试 – 反混淆

10

快捷键

11

开发工具本身就是一个 HTML 页面！ 远程调试 参与开发

◦ http://code.google.com/chrome/devtools/docs/contributing.html

深入到内部

12

远程调试截图

13

Google Chrome Developer Toolshttp://code.google.com/chrome/devtools/Chrome Developer Tools Cheatsheethttp://smus.com/devtools-cheatsheetGoogle Chrome Developer Tools: 12 Tricks to Develop Quickerhttp://www.youtube.com/watch?v=nOEw9iiopwIHow to contribute to Chrome Developer Toolshttp://

code.google.com/chrome/devtools/docs/contributing.html

参考链接