Your SlideShare is downloading. ×
Chrome 浏览器开发者工具介绍
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chrome 浏览器开发者工具介绍

3,812
views

Published on

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

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

Published in: Technology, Business

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,812
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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