Web前端开发工具介绍
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web前端开发工具介绍

on

  • 6,385 views

 

Statistics

Views

Total Views
6,385
Views on SlideShare
6,355
Embed Views
30

Actions

Likes
6
Downloads
79
Comments
0

2 Embeds 30

http://www.wufangbo.com 16
http://www.slideshare.net 14

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web前端开发工具介绍 Presentation Transcript

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