0
快速定位常见的前端问题<br />By 银环<br />
目 的<br />增进前端与开发无间隙合作<br />普及前端知识<br />提高工作效率<br />
调试环境<br />浏览器:firefox<br />工具:firebug<br />firebug帮助文档:http://wenku.baidu.com/view/72ce9f0ef12d2af90242e635.html<br />
目  录<br />常见html+css问题<br />01<br />常见js问题<br />02<br />
常见HTML+css问题|文档与文件<br />文档声明不正确(或者声明多个)<br />css/js路径未引用或者多引用<br />css/js路径引用不正确<br />
问题说明 |认识doctype<br /><!DOCTYPE html><br />区别于<br /><html><br />http://demo.ued.taobao.net/yinhuan/example/doctype.html<br ...
问题说明 |如何检查css/js引用是否正确<br />1. 与demo对照检查是否有引用<br />2. 查看文件加载是否正确<br />3. 检查加载的顺序<br />
问题说明 |如何检查css/js引用是否正确<br />http://demo.ued.taobao.net/yinhuan/example/act.html<br />
常见HTML+css问题|结构错误<br />标签未正确闭合<br />嵌套错误<br />非法嵌套<br />
问题说明 | 标签未正确闭合<br />1. 标签自闭合<br />2. 标签未闭合<br />
问题说明 | 标签未正确闭合<br />标签自闭合<br /><imgsrc=“” />               √<br /><input  type=“text” />   √<br /><span  />  or <div />   ...
问题说明 | 标签嵌套错误<br />1. 标签交叉<br />2. 标签放置位置不正确<br />http://demo.ued.taobao.net/yinhuan/example/tag_p.html<br />
问题分类说明 | 非法嵌套<br />几组常见标签:<br />table,tr,td   table ,tbody,tfoot<br />ul,liol,li<br />  dl, dt/dd<br />http://demo.ued.tao...
问题分类说明 | 查看元素及样式<br />(2)<br />(1)<br />(3)<br />(4)<br />
常见HTML+css问题|标识缺失/不正确<br />缺少ID或者class<br />标识设置不正确<br />
问题说明 | 缺失ID或者class<br />css几种最常见选择器:<br />  .msg24   .ok<br />  div.msg24   .ok<br />  .msg24    p<br />  #msg24   .ok<br ...
问题说明 | 标识设置不正确<br />设置table的cols数目与实际列数不符<br />http://demo.ued.taobao.net/yinhuan/example/table_col.html<br />实例地址:http://...
错误自查<br />step1:引用是否正确<br />   step2 : 结构是否正确<br />step3:标识是否缺失<br />   实在搞不定,咨询前端开发<br />
常见javascript问题|如何调用Yui /tbra /kissy?<br />查看YUI文档<br />  firebug DOM查看器<br />http://demo.ued.taobao.net/yinhuan/marketing/...
常见javascript问题|如何调试?<br />  firebug 断点<br />  console.log/dir/debugger<br />
Console.log<br />Console.dir<br />
常见javascript问题|查看AJAX请求和网络情况?<br />  firebug 控制台<br />  firebug查看网络<br />
更多资料:<br />Yui官方文档:http://developer.yahoo.com/yui/<br />前端DPL文档:http://assets.taobaocdn.com/tbra/dpl/<br />Tbra1.0示例:http:...
Thanks<br />
Upcoming SlideShare
Loading in...5
×

快速定位开发常见的前端问题

1,930

Published on

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

No Downloads
Views
Total Views
1,930
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
101
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "快速定位开发常见的前端问题"

  1. 1. 快速定位常见的前端问题<br />By 银环<br />
  2. 2. 目 的<br />增进前端与开发无间隙合作<br />普及前端知识<br />提高工作效率<br />
  3. 3. 调试环境<br />浏览器:firefox<br />工具:firebug<br />firebug帮助文档:http://wenku.baidu.com/view/72ce9f0ef12d2af90242e635.html<br />
  4. 4. 目 录<br />常见html+css问题<br />01<br />常见js问题<br />02<br />
  5. 5. 常见HTML+css问题|文档与文件<br />文档声明不正确(或者声明多个)<br />css/js路径未引用或者多引用<br />css/js路径引用不正确<br />
  6. 6. 问题说明 |认识doctype<br /><!DOCTYPE html><br />区别于<br /><html><br />http://demo.ued.taobao.net/yinhuan/example/doctype.html<br />http://demo.ued.taobao.net/yinhuan/example/doctype_right.html<br />
  7. 7. 问题说明 |如何检查css/js引用是否正确<br />1. 与demo对照检查是否有引用<br />2. 查看文件加载是否正确<br />3. 检查加载的顺序<br />
  8. 8. 问题说明 |如何检查css/js引用是否正确<br />http://demo.ued.taobao.net/yinhuan/example/act.html<br />
  9. 9. 常见HTML+css问题|结构错误<br />标签未正确闭合<br />嵌套错误<br />非法嵌套<br />
  10. 10. 问题说明 | 标签未正确闭合<br />1. 标签自闭合<br />2. 标签未闭合<br />
  11. 11. 问题说明 | 标签未正确闭合<br />标签自闭合<br /><imgsrc=“” /> √<br /><input type=“text” /> √<br /><span /> or <div /> X <br />2. 标签未闭合<br />http://demo.ued.taobao.net/yinhuan/example/tag.html<br />http://demo.ued.taobao.net/yinhuan/example/tag_right.html<br />
  12. 12. 问题说明 | 标签嵌套错误<br />1. 标签交叉<br />2. 标签放置位置不正确<br />http://demo.ued.taobao.net/yinhuan/example/tag_p.html<br />
  13. 13. 问题分类说明 | 非法嵌套<br />几组常见标签:<br />table,tr,td table ,tbody,tfoot<br />ul,liol,li<br /> dl, dt/dd<br />http://demo.ued.taobao.net/yinhuan/example/ul.html<br />
  14. 14. 问题分类说明 | 查看元素及样式<br />(2)<br />(1)<br />(3)<br />(4)<br />
  15. 15. 常见HTML+css问题|标识缺失/不正确<br />缺少ID或者class<br />标识设置不正确<br />
  16. 16. 问题说明 | 缺失ID或者class<br />css几种最常见选择器:<br /> .msg24 .ok<br /> div.msg24 .ok<br /> .msg24 p<br /> #msg24 .ok<br />http://demo.ued.taobao.net/qingyu/marketing/micropayments/account_payment.html<br />
  17. 17. 问题说明 | 标识设置不正确<br />设置table的cols数目与实际列数不符<br />http://demo.ued.taobao.net/yinhuan/example/table_col.html<br />实例地址:http://demo.ued.taobao.net/yinhuan/example/table.html<br />
  18. 18. 错误自查<br />step1:引用是否正确<br /> step2 : 结构是否正确<br />step3:标识是否缺失<br /> 实在搞不定,咨询前端开发<br />
  19. 19. 常见javascript问题|如何调用Yui /tbra /kissy?<br />查看YUI文档<br /> firebug DOM查看器<br />http://demo.ued.taobao.net/yinhuan/marketing/huijin2/magic_detail.html<br />
  20. 20.
  21. 21. 常见javascript问题|如何调试?<br /> firebug 断点<br /> console.log/dir/debugger<br />
  22. 22.
  23. 23. Console.log<br />Console.dir<br />
  24. 24. 常见javascript问题|查看AJAX请求和网络情况?<br /> firebug 控制台<br /> firebug查看网络<br />
  25. 25.
  26. 26. 更多资料:<br />Yui官方文档:http://developer.yahoo.com/yui/<br />前端DPL文档:http://assets.taobaocdn.com/tbra/dpl/<br />Tbra1.0示例:http://assets.taobaocdn.com/tbra/1.0/examples/<br />Firebug使用文档:http://wenku.baidu.com/view/72ce9f0ef12d2af90242e635.html<br />
  27. 27. Thanks<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×