开发的前端之痛

前端很简单但是很麻烦

w3c 标准

浏览器 兼容

html/css/js

语义

图片

flash/ as

调试是个关键 !

调试

前端

后台

工具

编写 查看

工具太多，如何选取？

工具firebug

fiddler

webdeveloper

http watch

工具firebug

fiddler

webdeveloper

http watch

为什么推荐使用 firebug ？

❖ 很容易查出 html 结构错误 , 而不用一行行地看 html 代码

❖ 样式上的错误也是如此，可以很方便的和 demo 对照❖firefox下 js 错误定位要比 ie 下准确

firebug & 开发常见问题

常见的 HTML+CSS 问题

为什么页面全乱了？

这一块样式不对啊 ,怎么回事？

莫名其妙多了几个像素 /样式怎么改也不对啊

页面有乱码

常见的 HTML+CSS 问题❖ 文件引用错误❖标签的嵌套引起结构错乱❖非法标签❖乱码 / 转义❖样式名不正确

查看文件的引用

查看 html 及 css

html+css 错误自查❖保文件引用正确❖检查 html 结构是否正确❖检查标识是否缺失

常见的 HTML+CSS 问题

如何使用tbra/kissy里

的组件？

js错如何调试？如何判断错在

哪里？

如何看ajax/jsonp的返回数据？

js没效果怎么回事？

如何调用 yui/tbra 等？

调试 js

调试 js

查看 ajax/ 网络状况

html+css 错误自查❖有明确错误直接调试❖文件引用是否正确❖检查标识是否缺失❖是否和样式有关❖调试

更多资料❖ Yui 官方文档： http://developer.yahoo.com/yui/

❖ 前端 DPL 文档： http://assets.taobaocdn.com/tbra/dpl/

❖ Tbra1.0 示例： http://assets.taobaocdn.com/tbra/1.0/examples/

❖ Firebug 使用文档： http://wenku.baidu.com/view/72ce9f0ef12d2af90242e635.html

Thanks