CHROME 浏浏浏浏浏浏浏浏浏浏 浏浏 2011/6/25 1
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
参考链接