前端js除錯技巧

Codeagles發表於2018-07-10
前端JS除錯

版權宣告：本文為 Codeagles 原創文章，可以隨意轉載，但必須在明確位置註明出處！！！

身為前端小白的後端的我，又學會了一個前端除錯技巧，可以除錯js問題。

問題

在做一個頁面的時候，js邏輯寫完，所需要的js檔案也都引入了，但是就是沒有效果，我猜測是js程式碼出問題了，但是苦於不知道怎麼除錯。 ####方法 經過一番折騰發現了一個利器（對於小白的我來說是神器），在頁面中加入一段js程式碼，如下：

<head>
  <script type="text/javascript"> 
  window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
    console.log("錯誤資訊：" , errorMessage); 
    console.log("出錯檔案：" , scriptURI); 
    console.log("出錯行號：" , lineNumber); 
    console.log("出錯列號：" , columnNumber); 
    console.log("錯誤詳情：" , errorObj); 
  } 
  </script>
</head>
複製程式碼

加入這個之後，執行程式，在Chrome中開發者除錯模式。

Error.png

在除錯模式下的console中就可以具體的看到，是哪個檔案出錯，哪個地方出錯，直接一找就OK 了，接下來就是哪裡出錯點哪裡就好了，簡直就是太方便了。不過這段程式碼調瀏覽器，主流的當然沒問題了。繼續奔跑在前端的路上吧。

相關文章