ChRome 浏览器开发者工具介绍<br />黄昊<br />2011/6/25<br />1<br />
DOM操作<br />样式表操作<br />脚本调试<br />快捷键<br />目录<br />2<br />
3<br />讨论对象 – Chrome 12<br />12.0.xxx<br />
右键菜单:审查元素 / Inspect element<br />快捷键:Ctrl + Shift + I打开开发者工具<br />快捷键:Ctrl + Shift + J打开工具和命令行<br />4<br />启动开发者工具<br />
编辑DOM节点属性(双击)<br />编辑 outerHTML(右键菜单 Edit as HTML)<br />实现动态插入节点<br />删除节点<br />5<br />DOM操作<br />
修改和添加样式 (style)<br />添加新的规则 (rule)<br />直接动态修改样式表文件<br />多版本控制<br />小功能(颜色模式)<br />6<br />样式表操作<br />
用 ESC 键切换命令行窗口<br />在命令行窗口中学习 Javascript 特性<br />动态修改脚本,快速调试<br />7<br />脚本调试<br />
$0 – 引用当前选中元素<br />var e = $0;<br />元素 – 显示元素DOM树<br />dir(元素) – 显示元素属性 (properties)<br />inspect(元素) – 在文档树窗口中选中该元素<br />...
格式化混淆过后的脚本!<br />研究别人的代码<br />9<br />脚本调试 – 反混淆<br />
10<br />快捷键<br />
开发工具本身就是一个 HTML 页面!<br />远程调试<br />参与开发<br />http://code.google.com/chrome/devtools/docs/contributing.html<br />11<br />深入...
12<br />远程调试截图<br />
Google Chrome Developer Tools<br />http://code.google.com/chrome/devtools/<br />Chrome Developer Tools Cheatsheet<br />htt...
Upcoming SlideShare
Loading in …5
×

Chrome 浏览器开发者工具介绍

4,235 views

Published on

介绍 Chrome 开发者工具的 DOM,CSS 和 Javascript 相关功能。

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,235
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
41
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Chrome 浏览器开发者工具介绍

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

×