Chrome 浏览器开发者工具介绍

ChRome 浏览器开发者工具介绍
黄昊
2011/6/25
1

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

3
讨论对象 – Chrome 12
12.0.xxx

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

编辑DOM节点属性(双击)
编辑 outerHTML(右键菜单 Edit as HTML)
实现动态插入节点
删除节点
5
DOM操作

修改和添加样式 (style)
添加新的规则 (rule)
直接动态修改样式表文件
多版本控制
小功能(颜色模式)
6
样式表操作

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

$0 – 引用当前选中元素
var e = $0;
元素 – 显示元素DOM树
dir(元素) – 显示元素属性 (properties)
inspect(元素) – 在文档树窗口中选中该元素
copy(文字) – 拷贝文字到剪贴板
8
脚本调试 – 控制台API (类似 Firebug)

格式化混淆过后的脚本！
研究别人的代码
9
脚本调试 – 反混淆

10
快捷键

开发工具本身就是一个 HTML 页面！
远程调试
参与开发
http://code.google.com/chrome/devtools/docs/contributing.html
11
深入到内部

12
远程调试截图

Google Chrome Developer Tools
http://code.google.com/chrome/devtools/
Chrome Developer Tools Cheatsheet
http://smus.com/devtools-cheatsheet
Google Chrome Developer Tools: 12 Tricks to Develop Quicker
http://www.youtube.com/watch?v=nOEw9iiopwI
How to contribute to Chrome Developer Tools
http://code.google.com/chrome/devtools/docs/contributing.html
13
参考链接

Chrome 浏览器开发者工具介绍

by huanghao39 on Jul 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Chrome 浏览器开发者工具介绍 — Presentation Transcript