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

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

㈡ 測試：進入某個頁面顯示內容錯誤，如何定位是前端還是後端問題

朋友您好，進入某個頁面顯示內容錯誤，定位是前端問題還是後端問題，其實很簡答。將後端的日誌等級調低，當頁面顯示內容錯誤的時候，可以看一下後端日誌有沒有報錯；其次，如果你是研發人員的話，可以debug或者將頁面請求的響應值都列印出來。還有一種方法，就是在頁面端，使用一些工具，如打開開發者工具，點擊網路，可以看一下請求後台的返回值是否是預期的，如果是預期的值，頁面展示不對，那就是前端展示出現了問題，如果是後端響應的值都不對，那可以從後端排查問題。

㈢ 瀏覽器顯示網頁走丟了怎麼辦

您好，先確認已正確連接網路且網速沒問題，用【360安全衛士】里的【人工服務】--輸入「輸入「上網異常」查找方案，選用「網頁打不開」、「二級頁面打不開」、「網頁載入慢」等對應方案--點擊【查找方案】--再點「修復」即可；同時摁下「win鍵+R」組合鍵，輸入cmd/kipconfig/flushdns確定，清除刷新DNS緩存；或打開【360安全衛士】點右下角的【更多】--在電腦安全里找到【360主頁修復】點擊即可。如果還未解決，按照以下順序繼續排查：

1：重新設置本機DNS伺服器地址：在網上鄰居上右擊，選擇「屬性」，本地連接右擊，選擇「屬性」，找到「internet協議（tcp/ip）」，雙擊進去，選擇「自動獲取IP地址」「自動獲得DNS伺服器地址」，然後「確定」即可。有時候本機的網卡驅動沒有裝好，不能很好的獲取Ip地址、DNS伺服器地址，可以使用驅動人生6進行驅動更新或重裝。

2：IE瀏覽器設置問題或IE組件被破壞：可嘗試用「IE伴侶」修復，也可以用360急救箱修復。

3：電腦感染病毒導致網頁打不開：這也是常見的網頁打不開的原因，可以使用殺毒軟體全盤殺毒，殺毒完成之後再修復系統（可以使用360急救箱或者系統盤）即可。

4：如果以上都認真排查了還未解決：開機按F8鍵，到出現【高級啟動選項】界面再鬆手，在【高級啟動選項】里用上下鍵選擇【最後一次正確配置】，敲回車即可。如果這個瀏覽器不太穩定經常出問題，建議刪除並更換一種瀏覽器，推薦下載使用最新的「360安全瀏覽器7.3」或」8.1版」試試。滿意望採納!

㈣ 自己寫的網站，在本地測試時前端頁面顯示好好的，可是上傳到阿里雲伺服器的時候，出現了頁面排版錯亂問題

既然是自己寫的
就從自己習慣著手
看環境 看路徑 看模板 看調用文件

㈤ 如何分析定位一個問題是前端還是後端引起的

1.首先，記錄問題本身錯誤信息，確認和後台通訊介面
2.通過抓包工具（比如fiddler）復現當前存在問題進行抓包
3.結合介面相關文檔說明，對抓包數據進行解析
4.驗證解析結果，分析如果請求無誤，響應返回結果有誤，且結果和問題報錯信息一致則為後台問題；若請求無誤，響應結果也正確，則為前端問題，如果想系統的學習測試相關的技術，可以了解一下黑馬程序員的軟體測試課程，裡面講的非常詳細。

㈥ 前端開發bug如何快速

1，根據報錯信息定位：
(1) Uncaught TypeError: Cannot read property 'attr' of undefined;
此類型為變數或者對象屬性未定義類型。
(2) Uncaught TypeError: a.map is not a function；
a.map不是函數，說明a不是數組，只有數組才有map方法。

(3) Uncaught SyntaxError: Invalid or unexpected token；
這種一般是js的代碼格式錯誤。

2, 排除法
頁面中一共有abcd五個方法，注釋掉d後代碼正常說明d有問題。
3，剝離法
同樣一個方法，在A頁面沒問題，在B頁面有問題，這時候，新建一個剝離這個組件，然後運行，如果沒有異常，就算不是這個組件或者方法的問題，然後逐漸在新頁面中加入可能影響B頁面的條件。

㈦ 網站被掛馬，源碼里沒有但是訪問查看源碼卻有，該如何排查呢

看看你網站結構，如果採用前後端分離，還得看看後端代碼有沒有給你附加，光在前端看不一定有用，看看js，，特別是有加密的地方，還是直接找漏洞最主要，看看日誌，做好安全，就不會再有了，還沒處理好可以找額代處理

㈧ Web前端工程師如何處理Web前端的異常_

今天小編要跟大家分享的文章是關於Web前端工程師如何處理前端的異常。前端一直是距離用戶最近的一層，隨著產品的日益完善，我們會更加註重用戶體驗，而前端異常卻如鯁在喉，甚是煩人。下面我們就來看一看前端工程師該如何處理前端異常。一、為什麼要處理異常異常是不可控的，會影響最終的呈現結果，但是我們有充分的理由去做這樣的事情。


1.增強用戶體驗；
2.遠程定位問題；
3.未雨綢繆，及早發現問題；
4.無法復線問題，尤其是移動端，機型，系統都是問題；
5.完善的前端方案，前端監控系統；


對於JS而言，我們面對的僅僅只是異常，異常的出現不會直接導致JS引擎崩潰，最多隻會使當前執行的任務終止。二、需要處理哪些異常？對於前端來說，我們可做的異常捕獲還真不少。總結一下，大概如下：


·___S語法錯誤、代碼異常


·___JAX請求異常


·___蔡試醇釉匾斐


·___romise異常


·___frame異常


·___纈_cripterror


·___覽：塗ǘ


下面我會針對每種具體情況來說明如何處理這些異常。三、Try-Catch的誤區try-catch只能捕獲到同步的運行時錯誤，對語法和非同步錯誤卻無能為力，捕獲不到。
1.同步運行時錯誤：


try{
letname='jartto'
console.log(nam);
}catch(e){
console.log('捕獲到異常：',e);
}


輸出：


捕獲到異常：ReferenceError:namisnotdefined
at:3:15


2.不能捕獲到語法錯誤，我們修改一下代碼，刪掉一個單引號：


try{
letname='jartto;
console.log(nam);
}catch(e){

console.log('捕獲到異常：',e);
}


輸出：


UncaughtSyntaxError:Invalidorunexpectedtoken


不過語法錯誤在我們開發階段就可以看到，應該不會順利上到線上環境。


3.非同步錯誤


try{
setTimeout(()=>{
undefined.map(v=>v);
},1000)
}catch(e){
console.log('捕獲到異常：',e);
}


我們看看日誌：


UncaughtTypeError:Cannotreadproperty'map'of
undefined
atsetTimeout(:3:11)


並沒有捕獲到異常，這是需要我們特別注意的地方。四、window.onerror不是萬能的當JS運行時錯誤發生時，window會觸發一個ErrorEvent介面的error事件，並執行window.onerror()。/**
*@param{String}message錯誤信息
*@param{String}source出錯文件
*@param{Number}lineno行號
*@param{Number}colno列號
*@param{Object}errorError對象（對象）
*/

window.onerror=function(message,source,lineno,colno,error){
console.log('捕獲到異常：',{message,source,lineno,colno,error});
}

1.首先試試同步運行時錯誤


window.onerror=function(message,source,lineno,colno,
error){
//message：錯誤信息（字元串）。
//source：發生錯誤的腳本URL（字元串）
//lineno：發生錯誤的行號（數字）
//colno：發生錯誤的列號（數字）
//error：Error對象（對象）
console.log('捕獲到異常：',{message,source,lineno,colno,
error});
}
Jartto;


可以看到，我們捕獲到了異常：

2.再試試語法錯誤呢？


window.onerror=function(message,source,lineno,colno,
error){
console.log('捕獲到異常：',{message,source,lineno,colno,error});
}
letname='Jartto


控制台列印出了這樣的異常：


UncaughtSyntaxError:Invalidorunexpectedtoken


什麼，竟然沒有捕獲到語法錯誤？


3.懷著忐忑的心，我們最後來試試非同步運行時錯誤：


window.onerror=function(message,source,lineno,colno,
error){
console.log('捕獲到異常：',{message,source,lineno,colno,error});
}
setTimeout(()=>{
Jartto;
});


控制台輸出了：


捕獲到異常：{message:"Uncaught
ReferenceError:Jarttoisnotdefined",source:
"http://127.0.0.1:8001/",lineno:36,colno:5,error:
ReferenceError:Jarttoisnotdefined
atsetTimeout(http://127.0.0.1:8001/:36:5)}


4.接著，我們試試網路請求異常的情況：






我們發現，不論是靜態資源異常，或者介面異常，錯誤都無法捕獲到。


補充一點：window.onerror函數只有在返回true的時候，異常才不會向上拋出，否則即使是知道異常的發生控制台還是會顯示UncaughtError:xxxxx


window.onerror=function(message,source,lineno,colno,
error){
console.log('捕獲到異常：',{message,source,lineno,colno,error});
returntrue;
}
setTimeout(()=>{
Jartto;
});


控制台就不會再有這樣的錯誤了：


UncaughtReferenceError:Jarttoisnotdefined
atsetTimeout((index):36)


需要注意：onerror最好寫在所有JS腳本的前面，否則有可能捕獲不到錯誤；onerror無法捕獲語法錯誤；


到這里基本就清晰了：在實際的使用過程中，onerror主要是來捕獲預料之外的錯誤，而try-catch則是用來在可預見情況下監控特定的錯誤，兩者結合使用更加高效。


問題又來了，捕獲不到靜態資源載入異常怎麼辦？五、window.addEventListener當一項資源（如圖片或腳本）載入失敗，載入資源的元素會觸發一個Event介面的error事件，並執行該元素上的onerror()處理函數。這些error事件不會向上冒泡到window，不過（至少在Firefox中）能被單一的window.addEventListener捕獲。



window.addEventListener('error',(error)=>{
console.log('捕獲到異常：',error);
},true)




控制台輸出：


SHAPE*MERGEFORMAT


由於網路請求異常不會事件冒泡，因此必須在捕獲階段將其捕捉到才行，但是這種方式雖然可以捕捉到網路請求的異常，但是無法判斷HTTP的狀態是404還是其他比如500等等，所以還需要配合服務端日誌才進行排查分析才可以。


需要注意：


·___煌榔饗路禱氐_rror對象可能不同，需要注意兼容處理。


·___枰⒁獗苊_ddEventListener重復監聽。六、PromiseCatch在promise中使用catch可以非常方便的捕獲到非同步error，這個很簡單。


沒有寫catch的Promise中拋出的錯誤無法被onerror或try-catch捕獲到，所以我們務必要在Promise中不要忘記寫catch處理拋出的異常。


解決方案：為了防止有漏掉的Promise異常，建議在全局增加一個對unhandledrejection的監聽，用來全局監聽UncaughtPromiseError。使用方式：


window.addEventListener("unhandledrejection",
function(e){
console.log(e);
});


我們繼續來嘗試一下：


window.addEventListener("unhandledrejection",
function(e){
e.preventDefault()
console.log('捕獲到異常：',e);
returntrue;
});
Promise.reject('promiseerror');


可以看到如下輸出：

那如果對Promise不進行catch呢？


window.addEventListener("unhandledrejection",
function(e){
e.preventDefault()
console.log('捕獲到異常：',e);
returntrue;
});
ewPromise((resolve,reject)=>{
reject('jartto:promiseerror');
});


嗯，事實證明，也是會被正常捕獲到的。


所以，正如我們上面所說，為了防止有漏掉的Promise異常，建議在全局增加一個對unhandledrejection的監聽，用來全局監聽UncaughtPromiseError。


補充一點：如果去掉控制台的異常顯示，需要加上：


event.preventDefault();七、VUEerrorHandlerVue.config.errorHandler=(err,vm,info)=>{
console.error('通過vue
errorHandler捕獲的錯誤');
console.error(err);
console.error(vm);
console.error(info);
}八、React異常捕獲React16提供了一個內置函數componentDidCatch，使用它可以非常簡單的獲取到react下的錯誤信息


componentDidCatch(error,info){
console.log(error,info);
}


除此之外，我們可以了解一下：errorboundaryUI的某部分引起的JS錯誤不應該破壞整個程序，為了幫React的使用者解決這個問題，React16介紹了一種關於錯誤邊界（errorboundary)的新觀念。


需要注意的是：errorboundaries並不會捕捉下面這些錯誤。


1.事件處理器2.非同步代碼3.服務端的渲染代碼4.在errorboundaries區域內的錯誤


我們來舉一個小例子，在下面這個componentDIdCatch(error,info)里的類會變成一個errorboundary：


.Component{
constructor(props){
super(props);
this.state={hasError:false};
}
componentDidCatch(error,info){
//DisplayfallbackUI
this.setState({hasError:true});
//
logErrorToMyService(error,info);
}
render(){
if(this.state.hasError){
//
return

Somethingwentwrong.

;
}
returnthis.props.children;
}
}


然後我們像使用普通組件那樣使用它：







componentDidCatch()方法像JS的catch{}模塊一樣工作，但是對於組件，只有class類型的組件(classcomponent)可以成為一個errorboundaries。


實際上，大多數情況下我們可以在整個程序中定義一個errorboundary組件，之後就可以一直使用它了！九、iframe異常對於iframe的異常捕獲，我們還得借力window.onerror：


window.onerror=function(message,source,lineno,colno,
error){
console.log('捕獲到異常：',{message,source,lineno,colno,error});
}


一個簡單的例子可能如下：


frameborder="0">
十、Scripterror一般情況，如果出現Scripterror這樣的錯誤，基本上可以確定是出現了跨域問題。這時候，是不會有其他太多輔助信息的，但是解決思路無非如下：


跨源資源共享機制(CORS)：我們為script標簽添加crossOrigin屬性。


crossorigin>


或者動態去添加js腳本：


constscript=document.createElement('script');
script.crossOrigin='anonymous'
script.src=url;
document.body.appendChild(script);


特別注意，伺服器端需要設置：Access-Control-Allow-Origin


此外，我們也可以試試這個-解決ScriptError的另類思路：


constoriginAddEventListener=EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener=function(type,listener,options){
constwrappedListener=function(...args){
try{
returnlistener.apply(this,args);
}
catch(err){
throwerr;
}
}
returnoriginAddEventListener.call(this,type,wrappedListener,options);
}


簡單解釋一下：


·___男戳_ventTarget的addEventListener方法；


·___源氳_istener進行包裝，返回包裝過的listener，對其執行進行try-catch；


·___榔韃換岫_ry-catch起來的異常進行跨域攔截，所以catch到的時候，是有堆棧信息的；


·___匭_hrow出來異常的時候，執行的是同域代碼，所以window.onerror捕獲的時候不會丟失堆棧信息；


利用包裝addEventListener，我們還可以達到「擴展堆棧」的效果：


(()=>{
constoriginAddEventListener=EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener=function(type,listener,options){
+//捕獲添加事件時的堆棧
+constaddStack=newError(`Event(${type})`).stack;
constwrappedListener=function(...args){
try{
returnlistener.apply(this,args);
}
catch(err){
+//異常發生時，擴展堆棧
+err.stack+=' '+addStack;
throwerr;
}
}
returnoriginAddEventListener.call(this,type,wrappedListener,options);
}
})();十一、崩潰和卡頓卡頓也就是網頁暫時響應比較慢，JS可能無法及時執行。但崩潰就不一樣了，網頁都崩潰了，JS都不運行了，還有什麼辦法可以監控網頁的崩潰，並將網頁崩潰上報呢？


崩潰和卡頓也是不可忽視的，也許會導致你的用戶流失。


1.利用window對象的load和beforeunload事件實現了網頁崩潰的監控。不錯的文章，推薦閱讀：Logging
InformationonBrowserCrashes。window.addEventListener('load',function(){
sessionSt