前端js除錯技巧

Codeagles發表於2018-07-10

版權宣告:本文為 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 了,接下來就是哪裡出錯點哪裡就好了,簡直就是太方便了。不過這段程式碼調瀏覽器,主流的當然沒問題了。繼續奔跑在前端的路上吧。

相關文章