前端Bug解決方案

voyagelab 發(fā)布于2019-08-29 13:25 / 2619人閱讀

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

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

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

HTML出錯的主要原因是對規(guī)范不夠理解，沒有按照規(guī)范來布局。網(wǎng)上搜到很多常見的HTNML錯誤都是如此：

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

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

我是一個段落

我是一個塊級元素

我是一個段落

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

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

/*錯誤代碼*/

2222

aaa /*正確代碼*/

2222

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

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

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

/*錯誤代碼*/

我是一句話

我是一句話

我是一句話

我是一個鏈接
 我是一個鏈接
 我是一個鏈接

/*正確代碼*/

我是一句話
我是一句話
我是一句話

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

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

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

/*錯誤代碼*/



/*正確代碼*/

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

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

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

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

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

錯誤1：z-index不起作用，或者是負(fù)的margin值會影響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}
  我是一個段落
  我是一個塊

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

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

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

錯誤3：有的瀏覽器正常有的瀏覽器不正常

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

display:flex
display:-webkit-flex

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

三、行為層（JavaScript） 錯誤1：找不到對象

例如:

當(dāng)我們運行這段代碼的時候報出了一個錯誤

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

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

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

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

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

錯誤2:方法/變量未定義

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

   function getClass(n){    
            if(document.getElementsByClassName){
               return document.getElementsByClassName(n);
            }else{
                var objArr=document.getElementsByTagName("*");
                var arrClass=[];
                for(var i=0;i
小結(jié)：JavaScript錯誤處理方式
1.通過谷歌或火狐瀏覽器控制臺查看錯誤提示，定位錯誤代碼，打斷點定位錯誤代碼。
2.如果沒錯誤提示的，在源代碼中用alert輸出，或者逐步注釋功能代碼塊，定位錯誤代碼片段。