王保平 2008 年 3 月
 
<ul><li>Firefox 阵营 </li></ul><ul><ul><li>DOM Inspector </li></ul></ul><ul><ul><li>View Source Chart </li></ul></ul><ul><ul...
<ul><li>EmEditor / Notepad++ / UltraEdit / Editplus … </li></ul><ul><li>Eclipse </li></ul><ul><li>Visual Studio 2008 </li>...
<ul><li>http://www.emeditor.com/ </li></ul><ul><li>插件比较丰富,可以打造成一个 IDE 来使用。 </li></ul><ul><li>对东亚语言支持很好,编码探测和转换功能很强。 </li><...
<ul><li>Open ! </li></ul><ul><li>Funny ! </li></ul><ul><li>Powerful ! </li></ul>http://www.mozilla.com/en-US/firefox/ Port...
http://www.mozilla.org/projects/inspector/ Firefox 阵营
https://addons.mozilla.org/en-US/firefox/addon/655 Firefox 阵营
http://www.getfirebug.com/ Firebug Documentation: http://www.getfirebug.com/docs.html Firefox 阵营
<ul><li>HTML 视图 </li></ul>Firefox 阵营 <ul><li>DOM 探测 </li></ul><ul><li>内容的即时修改 </li></ul><ul><li>CSS 信息 </li></ul><ul><li>L...
<ul><li>CSS 视图 </li></ul>Firefox 阵营 <ul><li>效果预览 </li></ul><ul><li>即时修改 </li></ul><ul><li>CSS 标尺 </li></ul><ul><li>禁用特定样式 ...
<ul><li>Script 视图 </li></ul>Firefox 阵营 <ul><li>断点 </li></ul><ul><li>即时信息 </li></ul><ul><li>Log Calls to </li></ul><ul><li>...
<ul><li>DOM 视图 </li></ul>Firefox 阵营 <ul><li>查看 DOM 对象信息 </li></ul><ul><li>… </li></ul>
<ul><li>Net 视图 </li></ul>Firefox 阵营 <ul><li>网络状况监视 </li></ul><ul><li>性能分析 </li></ul><ul><li>… </li></ul>
<ul><li>Console Command Line </li></ul>Firefox 阵营 <ul><li>$(); </li></ul><ul><li>dir(); </li></ul><ul><li>monitor(); </li>...
<ul><li>Console </li></ul>Firefox 阵营 <ul><li>console.log() </li></ul><ul><li>console.assert(); </li></ul><ul><li>console.t...
<ul><li>debugger </li></ul>Firefox 阵营
Web 前端开发的瑞士军刀! 杀人放火必备工具!!! Firefox 阵营
https://addons.mozilla.org/en-US/firefox/addon/216 Firefox 阵营 专业级 JavaScript 调试工具
https://addons.mozilla.org/en-US/firefox/addon/2104 Firefox 阵营 方便的 CSS 查看器
https://addons.mozilla.org/en-US/firefox/addon/271 Firefox 阵营 页面配色探测与提取工具
http://users.skynet.be/mgueury/mozilla/index.html Firefox 阵营 W3C 规范的执法者
https://addons.mozilla.org/en-US/firefox/addon/60 Firefox 阵营 什么功能都有一点……
https://addons.mozilla.org/en-US/firefox/addon/5369 Firefox 阵营 Yahoo 推出的 Firebug 的性能分析插件
<ul><li>在已有的插件中,选择适合自己的。 </li></ul><ul><li>在未知的插件中,保持发现和尝试的乐趣。 </li></ul><ul><li>在空闲的时间里,自己动手写写…… </li></ul>
<ul><li>微软专有、闭塞 </li></ul><ul><li>Web 前端开发人员的噩梦 </li></ul><ul><li>失望中的期望: IE8 ,快点…… </li></ul>
https://www.microsoft.com/downloads/d...displaylang=en
http://www.ie7pro.com/
http://www.fiddlertool.com/fiddler/
<ul><li>其它浏览器( Opera 、 Safari 等)插件 </li></ul><ul><li>专业小工具 </li></ul><ul><li>…… </li></ul>
http://webkit.org/ More
http://www.brianapps.net/sizer.html More
http://www.colorschemer.com/ More
匠人 大师
 
Upcoming SlideShare
Loading in …5
×

Web前端开发工具介绍

6,168 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,168
On SlideShare
0
From Embeds
0
Number of Embeds
399
Actions
Shares
0
Downloads
85
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Web前端开发工具介绍

  1. 1. 王保平 2008 年 3 月
  2. 3. <ul><li>Firefox 阵营 </li></ul><ul><ul><li>DOM Inspector </li></ul></ul><ul><ul><li>View Source Chart </li></ul></ul><ul><ul><li>Firebug </li></ul></ul><ul><ul><li>JavaScript Debugger </li></ul></ul><ul><ul><li>CSSViewer </li></ul></ul><ul><ul><li>ColorZilla </li></ul></ul><ul><ul><li>HTML Validator </li></ul></ul><ul><ul><li>Web Developer </li></ul></ul><ul><ul><li>YSlow </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>IE 堡垒 </li></ul><ul><ul><li>IE Developer Toolbar </li></ul></ul><ul><ul><li>IE Pro </li></ul></ul><ul><ul><li>Fiddler </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>编辑器 </li></ul><ul><ul><li>EmEditor </li></ul></ul><ul><ul><li>Eclipse </li></ul></ul><ul><ul><li>Visual Studio 2008 </li></ul></ul><ul><ul><li>Aptana </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>更多 </li></ul><ul><ul><li>Webkit(Safari) </li></ul></ul><ul><ul><li>Sizer </li></ul></ul><ul><ul><li>ColorSchemer Studio </li></ul></ul><ul><ul><li>… </li></ul></ul>
  3. 4. <ul><li>EmEditor / Notepad++ / UltraEdit / Editplus … </li></ul><ul><li>Eclipse </li></ul><ul><li>Visual Studio 2008 </li></ul><ul><li>Dreamweaver </li></ul><ul><li>… </li></ul>萝卜白菜,各有所爱。 适合自己的,就是最好的。
  4. 5. <ul><li>http://www.emeditor.com/ </li></ul><ul><li>插件比较丰富,可以打造成一个 IDE 来使用。 </li></ul><ul><li>对东亚语言支持很好,编码探测和转换功能很强。 </li></ul><ul><li>语法高亮、智能提示等特性都很不错。 </li></ul><ul><li>… </li></ul>编辑器
  5. 6. <ul><li>Open ! </li></ul><ul><li>Funny ! </li></ul><ul><li>Powerful ! </li></ul>http://www.mozilla.com/en-US/firefox/ Portable Edition: http://portableapps.com/apps/internet/firefox_portable
  6. 7. http://www.mozilla.org/projects/inspector/ Firefox 阵营
  7. 8. https://addons.mozilla.org/en-US/firefox/addon/655 Firefox 阵营
  8. 9. http://www.getfirebug.com/ Firebug Documentation: http://www.getfirebug.com/docs.html Firefox 阵营
  9. 10. <ul><li>HTML 视图 </li></ul>Firefox 阵营 <ul><li>DOM 探测 </li></ul><ul><li>内容的即时修改 </li></ul><ul><li>CSS 信息 </li></ul><ul><li>Layout 信息 </li></ul><ul><li>DOM 信息 </li></ul><ul><li>… </li></ul>
  10. 11. <ul><li>CSS 视图 </li></ul>Firefox 阵营 <ul><li>效果预览 </li></ul><ul><li>即时修改 </li></ul><ul><li>CSS 标尺 </li></ul><ul><li>禁用特定样式 </li></ul><ul><li>… </li></ul>
  11. 12. <ul><li>Script 视图 </li></ul>Firefox 阵营 <ul><li>断点 </li></ul><ul><li>即时信息 </li></ul><ul><li>Log Calls to </li></ul><ul><li>高级调试功能 </li></ul><ul><li>… </li></ul>
  12. 13. <ul><li>DOM 视图 </li></ul>Firefox 阵营 <ul><li>查看 DOM 对象信息 </li></ul><ul><li>… </li></ul>
  13. 14. <ul><li>Net 视图 </li></ul>Firefox 阵营 <ul><li>网络状况监视 </li></ul><ul><li>性能分析 </li></ul><ul><li>… </li></ul>
  14. 15. <ul><li>Console Command Line </li></ul>Firefox 阵营 <ul><li>$(); </li></ul><ul><li>dir(); </li></ul><ul><li>monitor(); </li></ul><ul><li>profile(); </li></ul><ul><li>… </li></ul>http://www.getfirebug.com/commandline.html
  15. 16. <ul><li>Console </li></ul>Firefox 阵营 <ul><li>console.log() </li></ul><ul><li>console.assert(); </li></ul><ul><li>console.time(); </li></ul><ul><li>console.profile(); </li></ul><ul><li>… </li></ul>http://www.getfirebug.com/console.html
  16. 17. <ul><li>debugger </li></ul>Firefox 阵营
  17. 18. Web 前端开发的瑞士军刀! 杀人放火必备工具!!! Firefox 阵营
  18. 19. https://addons.mozilla.org/en-US/firefox/addon/216 Firefox 阵营 专业级 JavaScript 调试工具
  19. 20. https://addons.mozilla.org/en-US/firefox/addon/2104 Firefox 阵营 方便的 CSS 查看器
  20. 21. https://addons.mozilla.org/en-US/firefox/addon/271 Firefox 阵营 页面配色探测与提取工具
  21. 22. http://users.skynet.be/mgueury/mozilla/index.html Firefox 阵营 W3C 规范的执法者
  22. 23. https://addons.mozilla.org/en-US/firefox/addon/60 Firefox 阵营 什么功能都有一点……
  23. 24. https://addons.mozilla.org/en-US/firefox/addon/5369 Firefox 阵营 Yahoo 推出的 Firebug 的性能分析插件
  24. 25. <ul><li>在已有的插件中,选择适合自己的。 </li></ul><ul><li>在未知的插件中,保持发现和尝试的乐趣。 </li></ul><ul><li>在空闲的时间里,自己动手写写…… </li></ul>
  25. 26. <ul><li>微软专有、闭塞 </li></ul><ul><li>Web 前端开发人员的噩梦 </li></ul><ul><li>失望中的期望: IE8 ,快点…… </li></ul>
  26. 27. https://www.microsoft.com/downloads/d...displaylang=en
  27. 28. http://www.ie7pro.com/
  28. 29. http://www.fiddlertool.com/fiddler/
  29. 30. <ul><li>其它浏览器( Opera 、 Safari 等)插件 </li></ul><ul><li>专业小工具 </li></ul><ul><li>…… </li></ul>
  30. 31. http://webkit.org/ More
  31. 32. http://www.brianapps.net/sizer.html More
  32. 33. http://www.colorschemer.com/ More
  33. 34. 匠人 大师

×