成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端Bug解決方案

voyagelab / 2622人閱讀

摘要：不在此一一列舉，若你遇到代表性問(wèn)題歡迎留言參考種常見(jiàn)的標(biāo)簽錯(cuò)誤寫(xiě)法小結(jié)結(jié)構(gòu)層問(wèn)題的解決方案就是谷歌瀏覽器按打開(kāi)控制臺(tái)看元素結(jié)構(gòu)是不是你設(shè)想的一樣。解決方案在的時(shí)候設(shè)置才能清除漸變背景。

沒(méi)錯(cuò)！我正在寫(xiě)bug呢！不管你是小白還是大牛，寫(xiě)bug無(wú)可避免，遇到bug怎么辦？別慌！毛主席教導(dǎo)我們“戰(zhàn)略上藐視BUG，戰(zhàn)術(shù)上重視BUG”！
前端遇到的bug無(wú)非就三個(gè)方面結(jié)構(gòu)層（HTML），表現(xiàn)層（CSS），行為層（JavaScript）。

一、結(jié)構(gòu)層（HTML）

HTML出錯(cuò)的主要原因是對(duì)規(guī)范不夠理解，沒(méi)有按照規(guī)范來(lái)布局。網(wǎng)上搜到很多常見(jiàn)的HTNML錯(cuò)誤都是如此：

錯(cuò)誤1. 標(biāo)簽嵌套混亂

例1：比如常見(jiàn)的p標(biāo)簽里嵌套div標(biāo)簽

我是一個(gè)段落
我是一個(gè)塊級(jí)元素
我是一個(gè)段落

瀏覽器解析后就變成這樣了

例2：缺少結(jié)束標(biāo)簽，或結(jié)束標(biāo)簽時(shí)機(jī)不對(duì)。
有時(shí)候往往是一個(gè)標(biāo)簽沒(méi)有閉合導(dǎo)致整個(gè)布局錯(cuò)亂。

/*錯(cuò)誤代碼*/

3333
aaa

/*正確代碼*/

3333
aaa

錯(cuò)誤原因：DTD中規(guī)定了塊級(jí)元素是不能放在P里;P標(biāo)簽內(nèi)包含塊元素時(shí)，它會(huì)先結(jié)束自己。另外提一下，內(nèi)聯(lián)元素不可以包含塊元素。
解決思路：如上圖，就是谷歌瀏覽器按F12（command+option）打開(kāi)控制臺(tái)看元素。

錯(cuò)誤2.濫使用br標(biāo)簽

br標(biāo)簽作用在于換行的，而被用來(lái)增加行間距和內(nèi)聯(lián)元素之間的換行。

/*錯(cuò)誤代碼*/
 

    我是一句話
    

    

    我是一句話
    

    

    我是一句話










    我是一個(gè)鏈接  

    我是一個(gè)鏈接  

    我是一個(gè)鏈接  




/*正確代碼*/


    我是一句話

    我是一句話

    我是一句話

錯(cuò)誤原因： br標(biāo)簽?zāi)康脑谟趽Q行，作為增加間距不能準(zhǔn)確的給出具體的間距大小，作為列表不能明確的表示這是一個(gè)列表。
解決思路：，通常是用line-height來(lái)調(diào)整行間距，用padding來(lái)解決段落之間的間距。這樣也能很好的做到結(jié)構(gòu)樣式分離。

錯(cuò)誤3.使用內(nèi)聯(lián)的樣式

為了代碼結(jié)構(gòu)清晰，結(jié)構(gòu)樣式分離，我們不推薦使用內(nèi)聯(lián)樣式。另外當(dāng)有行為層的時(shí)候我們大多通過(guò)js來(lái)改變的是內(nèi)聯(lián)樣式。在結(jié)構(gòu)使用內(nèi)聯(lián)樣式會(huì)帶來(lái)很多麻煩。

/*錯(cuò)誤代碼*/




/*正確代碼*/


//使用樣式表定義樣式。

不在此一一列舉，若你遇到代表性問(wèn)題歡迎留言！參考:10種常見(jiàn)的HTML標(biāo)簽錯(cuò)誤寫(xiě)法

小結(jié)：結(jié)構(gòu)層（HTML）問(wèn)題的解決方案就是谷歌瀏覽器按F12（command+option）打開(kāi)控制臺(tái)看元素結(jié)構(gòu)是不是你設(shè)想的一樣。

二、表現(xiàn)層（CSS）

少數(shù)原因由于粗心大意少寫(xiě)了分號(hào)或者結(jié)尾的花括號(hào)｝導(dǎo)致后面的樣式都不起作用了?；蛘邌卧~拼寫(xiě)錯(cuò)誤引起的樣式無(wú)效。在開(kāi)發(fā)過(guò)程中建議使用代碼提示，自動(dòng)補(bǔ)全功能的編輯器（比如：WebStorm）。學(xué)習(xí)練習(xí)的時(shí)候使用手寫(xiě)的編輯器。
css錯(cuò)誤大多來(lái)自對(duì)css權(quán)重的不理解。排除粗心因素通常遇到到設(shè)置的樣式不起作用就是這類原因。

錯(cuò)誤1：z-index不起作用，或者是負(fù)的margin值會(huì)影響z-index？。 
p{background-color: red; width: 200px; height: 100px ; position: relative; z-index: 1}
div{background-color: green;width: 200px; height: 100px; margin-top: -50px ;z-index: 999}
 
 我是一個(gè)段落

 
 我是一個(gè)塊

錯(cuò)誤原因，定位影響層級(jí)，定位元素層級(jí)高。z-index無(wú)效。另外浮動(dòng)元素也影響層級(jí)。
解決思路：查找CSS錯(cuò)誤的完整步驟
小結(jié)：表現(xiàn)層（CSS）解決方案還是利用瀏覽器的元素審查功能，查看你的元素，給元素添加行內(nèi)樣式測(cè)試是否有效。如果你的css樣式經(jīng)常不起作用。請(qǐng)認(rèn)真閱讀下面兩篇文章css權(quán)重和Css常用的排序方式權(quán)重分配

錯(cuò)誤2：在用background-image設(shè)置漸變背景的時(shí)候，在hover的時(shí)候設(shè)置background：none無(wú)效，還是有漸變背景。

解決方案：在hover的時(shí)候設(shè)置background-image:none才能清除漸變背景。

錯(cuò)誤3：有的瀏覽器正常有的瀏覽器不正常

這里主要針對(duì)css3的兼容性，關(guān)于低版本的ie不做考慮。抵制垃圾瀏覽器從我做起！
例如

display:flex
display:-webkit-flex

錯(cuò)誤原因：沒(méi)有做兼容性處理；
解決方案：CSS3新特性，兼容性，兼容方法總結(jié)

三、行為層（JavaScript） 錯(cuò)誤1：找不到對(duì)象

例如:

當(dāng)我們運(yùn)行這段代碼的時(shí)候報(bào)出了一個(gè)錯(cuò)誤

"Uncaught TypeError: Cannot set property "innerHTML" of null"    /AJAX_TEST/selector_test.html (43)

這個(gè)時(shí)候我們只要根據(jù)錯(cuò)誤提示找到出錯(cuò)的地方(43)行，這個(gè)時(shí)候我們會(huì)發(fā)現(xiàn)這段代碼

document.querySelector("#div1 > div").innerHTML = "first div";

出錯(cuò)的原因就是document.querySelector("#div1 > div")該選擇器找不到該元素節(jié)點(diǎn)，然后我們根據(jù)選擇器找到節(jié)點(diǎn)

發(fā)現(xiàn)該元素節(jié)點(diǎn)被注釋掉了，我們將該注釋取消就OK了
解決思路：在谷歌瀏覽器控制臺(tái)查看有沒(méi)有報(bào)錯(cuò)。有報(bào)錯(cuò)的，根據(jù)報(bào)錯(cuò)提示，直接找到報(bào)錯(cuò)的那行代碼。
用注釋法或者alert輸出法查找原因。

錯(cuò)誤2:方法/變量未定義

例如：通過(guò)類名獲取元素在有的瀏覽器不支持
解決思路：用if判斷如果瀏覽器支持的情況下怎么出來(lái)，不支持的情況下怎么處理，兼容性處理如下

   function getClass(n){    
            if(document.getElementsByClassName){
               return document.getElementsByClassName(n);
            }else{
                var objArr=document.getElementsByTagName("*");
                var arrClass=[];
                for(var i=0;i

小結(jié)：JavaScript錯(cuò)誤處理方式
1.通過(guò)谷歌或火狐瀏覽器控制臺(tái)查看錯(cuò)誤提示，定位錯(cuò)誤代碼，打斷點(diǎn)定位錯(cuò)誤代碼。
2.如果沒(méi)錯(cuò)誤提示的，在源代碼中用alert輸出，或者逐步注釋功能代碼塊，定位錯(cuò)誤代碼片段。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112589.html

相關(guān)文章

  • 前后端分離的問(wèn)題與解決方案

    摘要：版本升級(jí)每個(gè)文件方法頭標(biāo)明版本號(hào)，每次修改需修改版本號(hào)大于原版本號(hào)，即為版本升級(jí)。 這些天項(xiàng)目有的API出現(xiàn)版本控制問(wèn)題，著實(shí)忙乎了一小陣，因?yàn)轫?xiàng)目使用TP5的傳統(tǒng)方法進(jìn)行版本控制（api目錄下進(jìn)行版本區(qū)分，由請(qǐng)求路徑?jīng)Q定使用的版本） showImg(https://segmentfault.com/img/bVbekSM?w=200&h=128); 但是問(wèn)題往往是，項(xiàng)目使用了v2版本...

    zilu 評(píng)論0 收藏0

  • 年輕人，勸你不要做前端

    摘要：前端娛樂(lè)圈這些年前端有點(diǎn)熱鬧。刷量，撕，版本帝想要混前端，除了要有足夠強(qiáng)的學(xué)習(xí)力。領(lǐng)導(dǎo)說(shuō)所有測(cè)試的都要先指派給前端，前端查清原因后再指給當(dāng)事人。年，前端不再只是切圖仔。 ? 前端娛樂(lè)圈 這些年前端有點(diǎn)熱鬧。 github刷量，vue撕x，版本帝angularJs...... showImg(https://segmentfault.com/img/remote/146000001937...

    sevi_stuo 評(píng)論0 收藏0

  • 前端Bug解決方案

    摘要：不在此一一列舉，若你遇到代表性問(wèn)題歡迎留言參考種常見(jiàn)的標(biāo)簽錯(cuò)誤寫(xiě)法小結(jié)結(jié)構(gòu)層問(wèn)題的解決方案就是谷歌瀏覽器按打開(kāi)控制臺(tái)看元素結(jié)構(gòu)是不是你設(shè)想的一樣。解決方案在的時(shí)候設(shè)置才能清除漸變背景。 沒(méi)錯(cuò)！我正在寫(xiě)bug呢！不管你是小白還是大牛，寫(xiě)bug無(wú)可避免，遇到bug怎么辦？別慌！毛主席教導(dǎo)我們戰(zhàn)略上藐視BUG，戰(zhàn)術(shù)上重視BUG！前端遇到的bug無(wú)非就三個(gè)方面結(jié)構(gòu)層（HTML），表現(xiàn)層（CSS...

    cppowboy 評(píng)論0 收藏0

  • 前端Bug解決方案

    摘要：不在此一一列舉，若你遇到代表性問(wèn)題歡迎留言參考種常見(jiàn)的標(biāo)簽錯(cuò)誤寫(xiě)法小結(jié)結(jié)構(gòu)層問(wèn)題的解決方案就是谷歌瀏覽器按打開(kāi)控制臺(tái)看元素結(jié)構(gòu)是不是你設(shè)想的一樣。解決方案在的時(shí)候設(shè)置才能清除漸變背景。 沒(méi)錯(cuò)！我正在寫(xiě)bug呢！不管你是小白還是大牛，寫(xiě)bug無(wú)可避免，遇到bug怎么辦？別慌！毛主席教導(dǎo)我們戰(zhàn)略上藐視BUG，戰(zhàn)術(shù)上重視BUG！前端遇到的bug無(wú)非就三個(gè)方面結(jié)構(gòu)層（HTML），表現(xiàn)層（CSS...

    Charles 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

voyagelab

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<