web前端bug

⑴ Web前端工作中常見的div+css錯誤

今天小編要為大家分享的文章是關於Web前端工作中常見的div+css錯誤。熟悉web前端工作的小夥伴都知道，web工作需要我們認真仔細，而且一不小心就會出現問題。今天小編就為大家准備了這篇文章大家一起來看一看在web前端工作中如何檢查和處理常見的div+css錯誤。

1.檢查HTML元素是否拼寫錯誤、是否忘記結束標記


即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。


2.檢查CSS是否正確


檢查一下有無拼寫錯誤、是否忘記結尾的｝或者在｝後面存在其他符號等。可以利用CleanCSS來檢查
CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。


3.確定錯誤發生的位置


假如錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊後顯示恢復正常，即可確定錯誤發生的位置。


4.利用border屬性確定出錯元素的布局特性


使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。


5.float元素的父元素不能指定clear屬性


MacIE下假如對float的元素的父元素使用clear屬性，四周的float元素布局就會混亂。這是MacIE的聞名的bug，倘若不知道就會走彎路。


6.float元素務必指定width屬性


很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。


另外指定元素時盡量使用em而不是px做單位。


7.float元素不能指定margin和padding等屬性


IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在
float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定非凡的值。


8.float元素的寬度之和要小於100%


假如float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小於99%。


9.是否重設了默認的樣式?


某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等。


10.是否忘記了寫DTD?


假如無論怎樣調整不同瀏覽器顯示結果還是不一樣，那麼可以檢查一下頁面開頭是不是忘了寫下面這行DTD：html4.01：

html5：

以上就是小編今天為大家分享的關於Web前端工作中常見的div+css錯誤的檢查和處理方法的注意事項，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web前端培訓官網。最後祝願小夥伴們面試成功，成為一名優秀的web前端工程師。

⑵ 求助小白自學前端，但是不知道怎麼找BUG

那方面的bug 呢，頁面還是邏輯代碼
頁面bug 可以在瀏覽器 delete 按鍵一個元素一個元素的刪除排查，刷新就都恢復了
邏輯代碼這個不好說，需要經驗和時間

⑶ Web前端工程師要掌握的JavaScript常見BUG及修復方法

今天小編要跟大家分享的文章是關於Web前端工程師要掌握的JavaScript常見BUG及修復方法。JavaScript看上去是一門十分簡單的語言，然而事實並不如此。它有很多容易被弄錯的細節，一不注意就導致BUG。所以今天小編就為大家分享了10個JavaScript常見的bug及修改方法，來和小編一起看一看吧！

一、錯誤的對this進行引用


在閉包或則回調中，this關鍵字的作用域很容易弄錯。舉個例子：


Game.prototype.restart=function(){


this.clearLocalStorage();


this.timer=setTimeout(function(){


this.clearBoard();//此處this指的是?


},0);


};


如果執行上面的代碼，我們會看到報錯：


UncaughtTypeError:undefinedisnotafunction


出錯的原因在於：當你調用setTimeout函數，你實際上調用的是window.setTimeout()。在setTimeout中傳入的匿名函數是在window這個對象環境下，所以this是指向window，但是window並沒有clearBoard方法。


如何解決呢?定義新的變數引用指向Game對象的this，然後就可以使用啦。


Game.prototype.restart=function(){


this.clearLocalStorage();


varself=this;//將this指向的對象綁定到self


this.timer=setTimeout(function(){


self.clearBoard();


},0);


};


或則使用bind()函數：


Game.prototype.restart=function(){


this.clearLocalStorage();


this.timer=setTimeout(this.reset.bind(this),0);//bindto'this'


};


Game.prototype.reset=function(){


this.clearBoard();//此處this的引用正確


};


二、和塊作用域(blockscope)有關的BUG


在大多數程序語言中，每一個函數塊都有一個獨立的新的作用域，但是在JavaScript中並不是。例如：


for(vari=0;i<10;i++){


/*...*/


}


console.log(i);//會輸出什麼呢?


通常在這種情況下，調用console.log()會輸出undefined或則報錯。不過呢，這里會輸出10。在JavaScript中，即使for循環已經結束，變數i依然存在，並且記錄最後的值。有些開發者會忘記這一點，然後導致許多bug。我們可以使用let而不是for來杜絕這一問題。


三、內存泄漏


你需要監控內存使用量，因為泄露很難避免。內存泄露可能由於引用不存在的對象或則循環引用導致。


·如何避免：關注對象的可訪問性(reachability)。


·可訪問的對象：


§現有的callstack任何位置可以訪問的對象


§全局對象


當一個對象可以通過引用訪問到，那麼會在內存中保存。瀏覽器的垃圾回收器僅僅會把那些不可訪問的對象回收。


四、混淆的相等判斷


JavaScript自動將所有在布爾環境下的變數類型轉換為布爾類型，但是可能導致bug。舉例：


//所有都是true


console.log(false==Ɔ');


console.log(null==undefined);


console.log(" "==0);


console.log(''==0);


//注意：下面兩個也是


if({})//


if([])//


{}和[]都是對象，他們都會被轉換為true。為了防止bug出現，推薦使用===和!==來做比較，因為不會隱式做類型轉換。


五、低效的DOM操作


在JavaScript中，你可以輕松操作DOM(添加、修改和刪除)，但是開發者往往很低效地去操作。這會導致bug出現，因為這些操作非常耗費計算資源。為了解決這個問題，推薦使用文檔碎片(Document
Fragment)，如果你需要操作多個DOM元素。


六、在for循環中錯誤的定義函數


舉例：


varelements=document.getElementsByTagName('input');


varn=elements.length;//假設我們有10個元素


for(vari=0;i

elements[i].onclick=function(){


console.log("元素編號#"+i);


};


}


如果我們有10個元素，那麼點擊任何一個元素都會顯示「元素編號#10」!因為在onclick被調用的時候，for循環已經結束，因此所有的i都是10。


解法：


varelements=document.getElementsByTagName('input');


varn=elements.length;//假設有10個元素


varmakeHandler=function(num){//outerfunction


returnfunction(){//innerfunction


console.log("元素編號##"+num);


};


};


for(vari=0;i

elements[i].onclick=makeHandler(i+1);


}


makeHandler在for循環執行的時候立即被調用，獲取到當前的值i+1，並且存儲在變數num中。makeHandler返回一個函數使用num變數，該函數被綁定到元素的點擊事件。


七、通過原型錯誤地繼承


開發者如果沒能正確理解繼承的原理，那麼就可能寫出有bug的代碼：


BaseObject=function(name){


if(typeofname!=="undefined"){


this.name=name;


}else{


this.name='default'


}


};


varfirstObj=newBaseObject();


varsecondObj=newBaseObject('unique');


console.log(firstObj.name);//->輸出'default'


console.log(secondObj.name);//->輸出'unique'


但是，如果我們做如下操作：


deletesecondObj.name;


那麼：


console.log(secondObj.name);//->輸出'undefined'


而我們實際上想要的結果是列印默認的name。


BaseObject=function(name){


if(typeofname!=="undefined"){


this.name=name;


}


};


BaseObject.prototype.name='default'


每一個BaseObject都繼承name屬性，並且默認值為default。此時如果secondObj的name屬性被刪除掉，通過原型鏈查找會返回正確的默認值。


varthirdObj=newBaseObject('unique');


console.log(thirdObj.name);//->輸出'unique'


deletethirdObj.name;


console.log(thirdObj.name);//->輸出'default'


八、實例方法中的無效引用


我們來實現一個簡單的構造函數用來創建對象：


varMyObject=function(){}


MyObject.prototype.whoAmI=function(){


console.log(this===window?"window":"MyObj");


};


varobj=newMyObject();


為了使用方便，我們定義變數whoAmI來引用obj.whoAmI：


varwhoAmI=obj.whoAmI;


列印出來看看：


console.log(whoAmI);


控制台會輸出：


function(){


console.log(this===window?"window":"MyObj");


}


現在我們來對比一下兩者調用的區別：


obj.whoAmI();//輸出"MyObj"(和期望一致)


whoAmI();//輸出"window"(竟然輸出了window)


當我們把obj.whoAmI賦值給whoAmI的時候，這個新的變數whoAmI是定義在全局下，因此this指向全局的window，而不是MyObj。如果我們真的要獲取對MyObj的函數的引用，需要在其作用域下。


varMyObject=function(){}


MyObject.prototype.whoAmI=function(){


console.log(this===window?"window":"MyObj");


};


varobj=newMyObject();


obj.w=obj.whoAmI;//任然在obj的作用域


obj.whoAmI();//輸出"MyObj"


obj.w();//輸出"MyObj"


九、settimeout/setlnterval函數第一個參數誤用字元串


如果你將一個字元串作為setTimeout/setTimeInterval，它會被傳給函數構造函數並構建一個新的函數。該操作流程很慢而且低效，並導致bug出現。


varhello=function(){


console.log("hello,fundebug!");


}


setTimeout("hello",1000);


一個好的替代方法就是傳入函數作為參數：


setInterval(logTime,1000);//將logTime函數傳入


setTimeout(function(){//傳入一個匿名函數


logMessage(msgValue);


},1000);


十、未能成功使用strictmode


使用strictmodel會增加很多限制條件來加強安全和防止某些錯誤的出現，如果不使用strict
mode，你就相當於少了一個得力的助手幫你避免錯誤：


·更加容易debug


·避免不小心定義了不該定義的全局變數


·避免this隱式轉換


·避免屬性名字或則參數值的重復使用


·eval()更加安全


·無效地使用delete會自動拋出錯誤


以上就是小編今天為大家分享的關於Web前端工程師要掌握的JavaScript常見BUG及修復方法的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端相關知識記得關注北大青鳥Linux培訓官網，最後祝願小夥伴們工作順利！


作者：fundebug


原文：#/2017/11/15/top_10_bugs_and_fixing_method/

⑷ web前端到底要不要考慮360、safari等其他瀏覽器的bug

可以不用考慮360，但要考慮firefox。因為360是基礎IE的核心的瀏覽器，IE的版本是多少，360的也好不了多少。而FIREFOX的前身是NETSCAPE，版本和核心跟IE不太一樣，但顯示標准和支持的代碼標准都比較接近。IE跟firebox可能在CSS樣式中略有不同，顯示方式也略有不一樣。同時HTML的支持程度也各有不一樣，現在流行的是HTML5.CSS3.0等等，還有web標准都不太一致，致使網頁呈現的兼容性就略有差別。如果從安全行的角度去看。360在IE基礎上安全策略加固了，和firefox的加固程度不一。360和firefox想同處是，支持的網路協議都是一直。
希望以上的回答會給你帶來方便

⑸ 前端js 遇到難以重現的 bug 該怎麼辦

推薦使用Fundebug監控。Fundebug的用戶行為記錄可以幫助你更好地去理解BUG的成因，快速復現bug。

⑹ WEB前端js捕獲錯誤信息

當產品上線以後，我們就要在前端做好這類錯誤的監控。你可以選擇一些前端監控服務，比如fundebug來做24小時實時監控。Fundebug的監控插件可以支持JS錯誤，網路請求錯誤、資源加錯誤的監控。並且記錄用戶出錯前的行為，方便錯誤重現。而且大量的bug數據會通過機器學習智能聚合，整合分析。

⑺ Web前端中常見的瀏覽器兼容問題有哪些

使用Trident內核的瀏覽器：IE、Maxthon、TT； 使用Gecko內核的瀏覽器：Netcape6及以上版本、FireFox； 使用Presto內核的瀏覽器：Opera7及以上版本； 使用Webkit內核的瀏覽器：Safari、Chrome。
而我現在所說的兼容性問題，主要是說IE與幾個主流瀏覽器如firefox，google等。而對IE瀏覽器來說，IE7又是個跨度，因為之前的版本更新甚慢，bug甚多。從IE8開始，IE瀏覽器漸漸遵循標准，到IE9後由於大家都一致認為標准很重要，可以說在兼容性上比較好了，但是在中國來說，由於xp的佔有率問題，使用IE7以下的用戶仍然很多，所以我們不得不考慮低版本瀏覽器的兼容。

對瀏覽器兼容問題，一般分，HTML，Javascript兼容，CSS兼容。 其中html相關問題比較容易處理，無非是高版本瀏覽器用了低版本瀏覽器無法識別的元素，導致其不能解析，所以平時注意一點就是。特別是HTML5增加了許多新標簽，低版本瀏覽器有點影響時代進步啊

問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同

• 問題症狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

• 碰到頻率:100%

• 解決方案：css里*{margin:0;padding:0;}

• 備註：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css文件開頭都會用通配符*來設置各個標簽的內外補丁是0。

問題二：塊屬性標簽float後，又有橫行的margin情況下，在ie6顯示margin比設置的大

• 問題症狀:常見症狀是ie6中後面的一塊被頂到下一行

• 碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）

• 解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性

• 備註：我們最常用的就是div+css布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。

問題三：設置較小高度標簽（一般小於10px），在ie6，ie7，遨遊中高度超出自己設置高度

• 問題症狀：ie6、7和遨遊里這個標簽的高度不受控制，超出自己設置的高度

• 碰到頻率：60%

• 解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

• 備註：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是ie8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。

問題四：行內屬性標簽，設置display:block後採用float布局，又有橫行的margin的情況，ie6間距bug（類似第二種）

• 問題症狀：ie6里的間距比超過設置的間距

• 碰到幾率：20%

• 解決方案：在display:block;後面加入display:inline;display:table;

• 備註：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局並有橫向的margin後，在ie6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

問題五：圖片默認有間距

• 問題症狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加上問題一中提到的通配符也不起作用。

• 碰到幾率：20%

• 解決方案：使用float屬性為img布局

• 備註：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道

問題六：標簽最低高度設置min-height不兼容

• 問題症狀：因為min-height本身就是一個不兼容的css屬性，所以設置min-height時不能很好的被各個瀏覽器兼容

• 碰到幾率：5%

• 解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

• 備註：在B/S系統前端開時，有很多情況下我們有這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。

問題七：透明度的兼容css設置

• 方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這么麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的，只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什麼會出現兼容問題以及怎麼去解決這些兼容問題。1



技巧一：css hack

使用hacker 我可以把瀏覽器分為3類：ie6 ；ie7和遨遊；其他（ie8 chrome ff safari opera等）

• ie6認識的hacker 是下劃線_ 和星號 *

• ie7 遨遊認識的hacker是星號 * （包括上面問題6中的 !important也算是hack的一種。不過實用性較小。）

• 比如這樣一個css設置 height:300px;*height:200px;_height:100px;ie6瀏覽器在讀到 height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt， 所以當ie6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認為高度是200px。繼續往下讀，ie6還認識_height,所以他又會覆蓋掉200px高的設置，把高度設置為100px；


• ie7和遨遊也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px；


• 剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。1234



因為優先順序相同且相沖突的屬性設置後一個會覆蓋掉前一個，所以書寫的次序是很重要的。

• /* CSS屬性級Hack */ color:red; /* 所有瀏覽器可識別*/_color:red; /* 僅IE6 識別 */*color:red; /* IE6、IE7 識別 */+color:red; /* IE6、IE7 識別 */*+color:red; /* IE6、IE7 識別 */[color:red; /* IE6、IE7 識別 */ color:red9; /* IE6、IE7、IE8、IE9 識別 */color:red; /* IE8、IE9 識別*/color:red9; /* 僅IE9識別 */color:red ; /* 僅IE9識別 */color:red!important; /* IE6 不識別!important 有危險*//* CSS選擇符級Hack */ *html #demo { color:red;} /* 僅IE6 識別 */*+html #demo { color:red;} /* 僅IE7 識別 */body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以識別


• */ head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以識別 */:root #demo { color:red9; } : /* 僅IE9識別 */



越少的浮動，就會越少的代碼，會有更靈活的頁面，會有擴展性更強的頁面。這不多說，歸結為到一定水平了，浮動會用的較少。另外，您也會避免使用浮動+margin的用法。所以，越後來越不易遇到這種bug。

技巧二：padding，marign，height，width

注意是技巧，不是方法： 寫好標准頭http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>http://www.w3.org/1999/xhtml」>盡量用padding，慎用margin，height盡量補上100%，父級height有定值子級height不用100%，子級全為浮動時底部補個空clear:both的div寬盡量用margin，慎用padding，width算準實際要的減去padding

技巧三：顯示類（display:block,inline）

• display:block,inline兩個元素



• display:block; //可以為內嵌元素模擬為塊元素display:inline; //實現同一行排列的的效果display:table; //for FF,模擬table的效果1234567



display:block塊元素，元素的特點是： 總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度預設是它的容器的100%，除非設定一個寬度

display:inline就是將元素顯示為行內元素，元素的特點是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。span，a，label，input，img，strong和em是 inline 元素的例子

技巧四：怎樣使一個div層居中於瀏覽器中？

1）

• <style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;border:1px solid red; } --></style>12345678910111213141516171819



2）div里的內容，IE默認為居中，而FF默認為左對齊，可以嘗試增加代碼margin: 0 auto;

技巧五：float的div閉合;清除浮動;自適應高度

① 例如：＜div id="floatA">＜div id="floatB">＜div id="NOTfloatC">

• 這里的NOTfloatC並不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設置為float:left;)

• 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標簽，必須將float標簽閉合。在＜divclass="floatB">＜div class="NOTfloatC">之間加上＜div class="clear">這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。並且將clear這種樣式定義為為如下即可：.clear{clear:both;}

②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自適應，要在wrapper裡面加上overflow:hidden; 當包含float的box的時候，高度自適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
例如某一個wrapper如下定義：

• .colwrapper{overflow:hidden; zoom:1; margin:5px auto;}1



③對於排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如:

• <div id=」page」>



• <div id=」left」>＜/div>


• <div id=」center」>＜/div>


• <div id=」right」>＜/div>



• </div>1234567



比如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left centerright的向下拉長,而page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成float,所以我們應該這樣解決：

• <div id=」page」>



• <div id=」bg」 style=」float:left;width:100%」>



• <div id=」left」>＜/div>


• <div id=」center」>＜/div>


• <div id=」right」>＜/div>



• </div>



• </div>1234567891011



再嵌入一個float left而寬度是100%的DIV解決之。

④萬能float 閉合(非常重要!)

關於 clear float 的原理可參見 [How To ClearFloats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上class=」clearfix」即可,屢試不爽。

• /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */1234567



或者這樣設置：.hackbox{display:table; //將對象作為塊元素級的表格顯示}

技巧六：div嵌套時 y軸上 padding和 marign的問題

• FF里 y 軸上 子div 到 父div 的距離為 父padding + 子marign

• IE里 y 軸上 子div 到 父div 的距離為 父padding 和 子marign 里大的一個

• FF里 y 軸上 父padding=0 且 border=0 時，子div 到 父div 的距離為0，子marign 作用到 父div 外面

⑻ 如何精確定位到產生漏洞的代碼

摘要 2.可以根據響應的值判斷一些bug所在

⑼ 一個WEB前端，有找bug的天賦是啥感覺

‍‍會有一種想要返工寫成較大塊集群的沖動和誘惑。醜陋的邏輯語句，還有冗長的語法，導致代碼非常難以閱讀！但話又說回來，如果代碼沒有壞掉的話，那就不要去修復它。這種洶涌澎拜的斗爭是我經常要面對的，而且顯然會困擾許多軟體開發人員。‍‍