SlideShare una empresa de Scribd logo
1 de 23
Descargar para leer sin conexión
开发的前端之痛
但是很麻烦 前端很简单
w3c 标准 浏览器 兼容 html/css/js 语义 图片 flash/ as
调试是个关键 !
调试 前端 后台 工具 编写 查看
工具太多,如何选取?
工具 firebug fiddler web developer http watch
工具 firebug fiddler web developer http watch
为什么推荐使用 firebug ? ,[object Object],[object Object],[object Object]
firebug & 开发常见问题
常见的 HTML+CSS 问题 为什么页面 全乱了? 这一块样式不对啊 , 怎么回事? 莫名其妙多了几个像素 / 样式怎么改也不对啊 页面有乱码
[object Object],[object Object],[object Object],[object Object],[object Object],常见的 HTML+CSS 问题
查看文件的引用
查看 html 及 css
[object Object],[object Object],[object Object],html+css 错误自查
常见的 HTML+CSS 问题 如何使用 tbra/kissy 里的组件? js 错如何调试? 如何判断错在哪里? 如何看 ajax/jsonp 的返回数据? js 没效果怎么回事?
如何调用 yui/tbra 等?
调试 js
调试 js
查看 ajax/ 网络状况
[object Object],[object Object],[object Object],[object Object],[object Object],html+css 错误自查
[object Object],[object Object],[object Object],[object Object],更多资料
Thanks

Más contenido relacionado

Destacado

【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽tbosstraining
 
【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimizationtbosstraining
 
【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰tbosstraining
 
【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript event【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript eventtbosstraining
 
【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程tbosstraining
 
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Actiontbosstraining
 

Destacado (6)

【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽
 
【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization
 
【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰【第一季第一期】前端的深化 by 周杰
【第一季第一期】前端的深化 by 周杰
 
【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript event【第一季第二期】Dive into javascript event
【第一季第二期】Dive into javascript event
 
【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程【第一季第五期】要漂亮很容易!——超简单CSS速成教程
【第一季第五期】要漂亮很容易!——超简单CSS速成教程
 
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action
 

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

富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用luolonghao
 
前端常用调试工具介绍
前端常用调试工具介绍前端常用调试工具介绍
前端常用调试工具介绍taobao.com
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3Adam Lu
 
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍裕波 周
 
Html5css3 go.yeefe.com
Html5css3 go.yeefe.comHtml5css3 go.yeefe.com
Html5css3 go.yeefe.comtellyeefe
 
网页设计及制作(Div+css)
网页设计及制作(Div+css)网页设计及制作(Div+css)
网页设计及制作(Div+css)lrk3
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型裕波 周
 
AtticTV and NodeJS
AtticTV and NodeJSAtticTV and NodeJS
AtticTV and NodeJSGrey Ang
 
HTML5 历史、现状及未来
HTML5 历史、现状及未来HTML5 历史、现状及未来
HTML5 历史、现状及未来Yongbin Tian
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScriptSanji Zhang
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展agen
 
Html5不只是个传说
Html5不只是个传说Html5不只是个传说
Html5不只是个传说Zhi Zhong
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展agen
 
網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630Yeh Yung-Hsin
 
Lazyload实践
Lazyload实践Lazyload实践
Lazyload实践Wu tianhao
 

Similar a 【第一季第一期】开发的前端之痛 by 银环 (20)

富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
 
日新培训
日新培训日新培训
日新培训
 
前端常用调试工具介绍
前端常用调试工具介绍前端常用调试工具介绍
前端常用调试工具介绍
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3
 
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
 
Html5css3 go.yeefe.com
Html5css3 go.yeefe.comHtml5css3 go.yeefe.com
Html5css3 go.yeefe.com
 
网页设计及制作(Div+css)
网页设计及制作(Div+css)网页设计及制作(Div+css)
网页设计及制作(Div+css)
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
 
AtticTV and NodeJS
AtticTV and NodeJSAtticTV and NodeJS
AtticTV and NodeJS
 
HTML5 历史、现状及未来
HTML5 历史、现状及未来HTML5 历史、现状及未来
HTML5 历史、现状及未来
 
Html5
Html5Html5
Html5
 
复习
复习复习
复习
 
HTML introduction
HTML introductionHTML introduction
HTML introduction
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScript
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
 
Web教程2
Web教程2Web教程2
Web教程2
 
Html5不只是个传说
Html5不只是个传说Html5不只是个传说
Html5不只是个传说
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
 
網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630
 
Lazyload实践
Lazyload实践Lazyload实践
Lazyload实践
 

Último

20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdfJamie (Taka) Wang
 
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdfJamie (Taka) Wang
 
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdfJamie (Taka) Wang
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdfJamie (Taka) Wang
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdfJamie (Taka) Wang
 
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...Jamie (Taka) Wang
 
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...Jamie (Taka) Wang
 
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdfJamie (Taka) Wang
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdfJamie (Taka) Wang
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdfJamie (Taka) Wang
 

Último (17)

20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdf
 
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
 
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
 
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
 
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
 
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdf
 

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