【第一季第一期】开发的前端之痛 by 银环

1,097 views

Published on

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

No Downloads
Views
Total views
1,097
On SlideShare
0
From Embeds
0
Number of Embeds
119
Actions
Shares
0
Downloads
17
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

【第一季第一期】开发的前端之痛 by 银环

  1. 1. 开发的前端之痛
  2. 2. 但是很麻烦 前端很简单
  3. 3. w3c 标准 浏览器 兼容 html/css/js 语义 图片 flash/ as
  4. 4. 调试是个关键 !
  5. 5. 调试 前端 后台 工具 编写 查看
  6. 6. 工具太多,如何选取?
  7. 7. 工具 firebug fiddler web developer http watch
  8. 8. 工具 firebug fiddler web developer http watch
  9. 9. 为什么推荐使用 firebug ? <ul><li>❖ 很容易查出 html 结构错误 , 而不用一行行地看 html 代码 </li></ul><ul><li>❖ 样式上的错误也是如此,可以很方便的和 demo 对照 </li></ul><ul><li>❖ firefox 下 js 错误定位要比 ie 下准确 </li></ul>
  10. 10. firebug & 开发常见问题
  11. 11. 常见的 HTML+CSS 问题 为什么页面 全乱了? 这一块样式不对啊 , 怎么回事? 莫名其妙多了几个像素 / 样式怎么改也不对啊 页面有乱码
  12. 12. <ul><li>文件引用错误 </li></ul><ul><li>标签的嵌套引起结构错乱 </li></ul><ul><li>非法标签 </li></ul><ul><li>乱码 / 转义 </li></ul><ul><li>样式名不正确 </li></ul>常见的 HTML+CSS 问题
  13. 13. 查看文件的引用
  14. 14. 查看 html 及 css
  15. 15. <ul><li>保文件引用正确 </li></ul><ul><li>检查 html 结构是否正确 </li></ul><ul><li>检查标识是否缺失 </li></ul>html+css 错误自查
  16. 16. 常见的 HTML+CSS 问题 如何使用 tbra/kissy 里的组件? js 错如何调试? 如何判断错在哪里? 如何看 ajax/jsonp 的返回数据? js 没效果怎么回事?
  17. 17. 如何调用 yui/tbra 等?
  18. 18. 调试 js
  19. 19. 调试 js
  20. 20. 查看 ajax/ 网络状况
  21. 21. <ul><li>有明确错误直接调试 </li></ul><ul><li>文件引用是否正确 </li></ul><ul><li>检查标识是否缺失 </li></ul><ul><li>是否和样式有关 </li></ul><ul><li>调试 </li></ul>html+css 错误自查
  22. 22. <ul><li>Yui 官方文档: http://developer.yahoo.com/yui/ </li></ul><ul><li>前端 DPL 文档: http://assets.taobaocdn.com/tbra/dpl/ </li></ul><ul><li>Tbra1.0 示例: http://assets.taobaocdn.com/tbra/1.0/examples/ </li></ul><ul><li>Firebug 使用文档: http://wenku.baidu.com/view/72ce9f0ef12d2af90242e635.html </li></ul>更多资料
  23. 23. Thanks

×