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