【第一季第一期】开发的前端之痛 by 银环
DESCRIPTION
TRANSCRIPT
![Page 1: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/1.jpg)
开发的前端之痛
![Page 2: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/2.jpg)
前端很简单但是很麻烦
![Page 3: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/3.jpg)
w3c 标准
浏览器 兼容
html/css/js
语义
图片
flash/ as
![Page 4: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/4.jpg)
调试是个关键 !
![Page 5: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/5.jpg)
调试
前端
后台
工具
编写 查看
![Page 6: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/6.jpg)
工具太多,如何选取?
![Page 7: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/7.jpg)
工具firebug
fiddler
webdeveloper
http watch
![Page 8: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/8.jpg)
工具firebug
fiddler
webdeveloper
http watch
![Page 9: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/9.jpg)
为什么推荐使用 firebug ?
❖ 很容易查出 html 结构错误 , 而不用一行行地看 html 代码
❖ 样式上的错误也是如此,可以很方便的和 demo 对照❖firefox下 js 错误定位要比 ie 下准确
![Page 10: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/10.jpg)
firebug & 开发常见问题
![Page 11: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/11.jpg)
常见的 HTML+CSS 问题
为什么页面全乱了?
这一块样式不对啊 ,怎么回事?
莫名其妙多了几个像素 /样式怎么改也不对啊
页面有乱码
![Page 12: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/12.jpg)
常见的 HTML+CSS 问题❖ 文件引用错误❖标签的嵌套引起结构错乱❖非法标签❖乱码 / 转义❖样式名不正确
![Page 13: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/13.jpg)
查看文件的引用
![Page 14: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/14.jpg)
查看 html 及 css
![Page 15: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/15.jpg)
html+css 错误自查❖保文件引用正确❖检查 html 结构是否正确❖检查标识是否缺失
![Page 16: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/16.jpg)
常见的 HTML+CSS 问题
如何使用tbra/kissy里
的组件?
js错如何调试?如何判断错在
哪里?
如何看ajax/jsonp的返回数据?
js没效果怎么回事?
![Page 17: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/17.jpg)
如何调用 yui/tbra 等?
![Page 18: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/18.jpg)
调试 js
![Page 19: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/19.jpg)
调试 js
![Page 20: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/20.jpg)
查看 ajax/ 网络状况
![Page 21: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/21.jpg)
html+css 错误自查❖有明确错误直接调试❖文件引用是否正确❖检查标识是否缺失❖是否和样式有关❖调试
![Page 22: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/22.jpg)
更多资料❖ 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
![Page 23: 【第一季第一期】开发的前端之痛 by 银环](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87d44a7959913b8b45f5/html5/thumbnails/23.jpg)
Thanks