chrome 浏览器开发者工具介绍
DESCRIPTION
介绍 Chrome 开发者工具的 DOM,CSS 和 Javascript 相关功能。TRANSCRIPT
![Page 1: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/1.jpg)
1
CHROME 浏览器开发者工具介绍
黄昊2011/6/25
![Page 2: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/2.jpg)
2
DOM 操作 样式表操作 脚本调试 快捷键
目录
![Page 3: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/3.jpg)
3
讨论对象 – Chrome 12
12.0.xxx
![Page 4: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/4.jpg)
4
右键菜单:审查元素 / Inspect element 快捷键: Ctrl + Shift + I 打开开发者工具 快捷键: Ctrl + Shift + J 打开工具和命令行
启动开发者工具
![Page 5: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/5.jpg)
5
编辑 DOM 节点属性( 双击 )
编辑 outerHTML( 右键菜单 Edit as HTML)◦ 实现动态插入节点
删除节点
DOM 操作
![Page 6: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/6.jpg)
6
修改和添加样式 (style)
添加新的规则 (rule)
直接动态修改样式表文件
多版本控制
小功能 ( 颜色模式 )
样式表操作
![Page 7: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/7.jpg)
7
用 ESC 键切换命令行窗口 在命令行窗口中学习 Javascript 特性 动态修改脚本,快速调试
脚本调试
![Page 8: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/8.jpg)
8
$0 – 引用当前选中元素◦ var e = $0;
元素 – 显示元素 DOM 树 dir( 元素 ) – 显示元素属性 (properties) inspect( 元素 ) – 在文档树窗口中选中该元素 copy( 文字 ) – 拷贝文字到剪贴板
脚本调试 – 控制台 API ( 类似 Firebug)
![Page 9: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/9.jpg)
9
格式化混淆过后的脚本!◦ 研究别人的代码
脚本调试 – 反混淆
![Page 10: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/10.jpg)
10
快捷键
![Page 11: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/11.jpg)
11
开发工具本身就是一个 HTML 页面! 远程调试 参与开发
◦ http://code.google.com/chrome/devtools/docs/contributing.html
深入到内部
![Page 12: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/12.jpg)
12
远程调试截图
![Page 13: Chrome 浏览器开发者工具介绍](https://reader030.vdocuments.site/reader030/viewer/2022012304/5589e494d8b42a87558b4700/html5/thumbnails/13.jpg)
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
参考链接