JavaScript 調試常見報錯以及修復方法

zhongmeizhi 發(fā)布于2019-08-21 10:25 / 1004人閱讀

摘要：表示錯誤沒有被語句捕獲，是錯誤的名字。如何修復錯誤確保方法名正確。這個錯誤的行號將指出正確的位置。相關錯誤代碼調用的方法在當前狀態(tài)無法調用。通常由引起，在方法準備完畢之前調用它會引起錯誤。原文翻譯出處涂鴉碼農錯誤以及如何修復

（看到一篇調試JS很有用的文章，收藏一下）

JavaScript 調試是一場噩夢：首先給出的錯誤非常難以理解，其次給出的行號不總有幫助。有個查找錯誤含義，及修復措施的列表，是不是很有用？

以下是奇怪的 JavaScript 錯誤列表。同樣的錯誤，不同的瀏覽器會給出不同的消息，因此有一些不同的例子。

如何讀懂錯誤？

首先，讓我們快速看下錯誤信息的結構。理解結構有助于理解錯誤，如果遇到列表之外的錯誤會減少麻煩。

Chrome 中典型的錯誤像這樣：

Uncaught TypeError: undefined is not a function

錯誤的結構如下：

Uncaught TypeError： 這部分信息通常不是很有用。Uncaught 表示錯誤沒有被 catch 語句捕獲，TypeError 是錯誤的名字。

undefined is not a function: 這部分信息，你必須逐字閱讀。比如這里表示代碼嘗試使用 undefined ，把它當做一個函數(shù)。

其它基于 webkit 的瀏覽器，比如 Safari ，給出的錯誤格式跟 Chrome 很類似。Firefox 也類似，但是不總包含第一部分，最新版本的 IE 也給出比 Chrome 簡單的錯誤 - 但是在這里，簡單并不總代表好。

以下是真正的錯誤。

Uncaught TypeError: undefined is not a function

相關錯誤：

number is not a function, object is not a function, string is not a function, Unhandled Error: ‘foo’ is not a function, Function Expected

當嘗試調用一個像方法的值時，這個值并不是一個方法。比如：

var foo = undefined;
foo();

如果你嘗試調用一個對象的方法時，你輸錯了名字，這個典型的錯誤很容易發(fā)生。

var x = document.getElementByID("foo");

由于對象的屬性不存在，默認是 undefined ，以上代碼將導致這個錯誤。嘗試調用一個像方法的數(shù)字，“number is not a function” 錯誤出現(xiàn)。

如何修復錯誤：確保方法名正確。這個錯誤的行號將指出正確的位置。

Uncaught ReferenceError: Invalid left-hand side in assignment

相關錯誤：

Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’, Uncaught exception: ReferenceError: Cannot assign to ‘this’

嘗試給不能賦值的東西賦值，引起這個錯誤。

這個錯誤最常見的例子出現(xiàn)在 if 語句使用：

if(doSomething() = "somevalue")

此例中，程序員意外地使用了單個等號，而不是雙等號。“l(fā)eft-hand side in assignment” 提及了等號左手邊的部分，因此你可以看到以上例子，左手邊包含不能賦值的東西，導致這個錯誤。

如何修復錯誤：確保沒有給函數(shù)結果賦值，或者給 this 關鍵字賦值。

Uncaught TypeError: Converting circular structure to JSON

相關錯誤：

Uncaught exception: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference in value argument not supported

把循環(huán)引用的對象，傳給 JSON.stringify 總會引起錯誤。

var a = { };
var b = { a: a };
a.b = b;
JSON.stringify(a);

由于以上的 a 和 b 循環(huán)引用彼此，結果對象無法轉換成 JSON。

如何修復錯誤： 移除任何想轉換成 JSON 的對象中的循環(huán)引用。

Unexpected token ;

相關錯誤：

Expected ), missing ) after argument list

JavaScript 解釋器預期的東西沒有被包含。不匹配的圓括號或方括號通常引起這個錯誤，錯誤信息可能有所不同 - “Unexpected token ]” 或者 “Expected {” 等。

如何修復錯誤： 有時錯誤出現(xiàn)的行號并不準確，因此很難修復。

[ ] { } ( ) 這幾個符號不配對常常導致出錯。檢查所有的圓括號和方括號是否配對。行號指出的不僅是問題字符。

Unexpected / 跟正則表達式有關。此時行號通常是正確的。

Unexpected ; 對象或者數(shù)組字面量里面有個；通常引起這個錯誤，或者函數(shù)調用的參數(shù)列表里有個分號。此時的行號通常也是正確的。

Uncaught SyntaxError: Unexpected token ILLEGAL

相關錯誤：

Unterminated String Literal, Invalid Line Terminator

一個字符串字面量少了結尾的引號。

如何修復錯誤： 確保所有的字符串都有結束的引號。

Uncaught TypeError: Cannot read property ‘foo’ of null, Uncaught TypeError: Cannot read property ‘foo’ of undefined

相關錯誤：

TypeError: someVal is null, Unable to get property ‘foo’ of undefined or null reference

嘗試讀取 null 或者 undefined ，把它當成了對象。例如：

var someVal = null;
console.log(someVal.foo);

如何修復錯誤： 通常由于拼寫錯誤導致。檢查錯誤指出的行號附近使用的變量名是否正確。

Uncaught TypeError: Cannot set property ‘foo’ of null, Uncaught TypeError: Cannot set property ‘foo’ of undefined

相關錯誤：

TypeError: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference

嘗試寫入 null 或者 undefined ，把它當成了一個對象。例如：

var someVal = null;
someVal.foo = 1;

如何修復錯誤： 也是由于拼寫錯誤所致。檢查錯誤指出的行號附近的變量名。

Uncaught RangeError: Maximum call stack size exceeded

相關錯誤：

Related errors: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow

通常由程序邏輯 bug 引起，導致函數(shù)的無限遞歸調用。

如何修復錯誤： 檢查遞歸函數(shù)中可能導致無限循環(huán) 的 bug 。

Uncaught URIError: URI malformed

相關錯誤：

URIError: malformed URI sequence

無效的 decodeURIComponent 調用所致。

如何修復錯誤： 按照錯誤指出的行號，檢查 decodeURIComponent 調用，它是正確的。

XMLHttpRequest cannot load [http://some/url/](http://some/url/). No ‘Access-Control-Allow-Origin’ header is present on the requested resource

相關錯誤：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
[http://some/url/](http://some/url/)

錯誤肯定是使用 XMLHttpRequest 引起的。

如何修復： 確保請求的 URL 是正確的，它遵循同源策略。最好的方法是從代碼中找到錯誤信息指出的 URL 。

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

相關錯誤：

InvalidStateError, DOMException code 11

代碼調用的方法在當前狀態(tài)無法調用。通常由 XMLHttpRequest 引起，在方法準備完畢之前調用它會引起錯誤。

var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Some-Header", "val");

這時就會出錯，因為 setRequestHeader 方法只能在 xhr.open 方法之后調用。

如何修復： 查看錯誤指出的行號，確保代碼運行的時機正確，或者在它（例如 xhr.open）之前添加了不必要的調用

結論

我看過不少無用的 JavaScript 錯誤，比如 PHP 中聲名狼藉的異常 Expected T_PAAMAYIM_NEKUDOTAYIM 。拋出更熟悉的錯誤才更有意義。現(xiàn)代瀏覽器不再拋出完全無用的錯誤，才會更有幫助。

原文Jani Hartikainen - 《JavaScript Errors and How to Fix Them》
翻譯出處：涂鴉碼農 - JavaScript 錯誤以及如何修復

GPU云服務器云服務器修復方法 javascript調試調試javascript javascript斷點調試

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85511.html

匯總Vue常見報錯以及解決方案實例

　　前言　　學習中有一種方式就是錯題匯總，在學習代碼，日常書寫代碼中對于遇到報錯，也要匯總，這樣可以在以后編碼過程中避免或解決這些問題。　　一、報錯結構　　首先對于報錯分為：錯誤類型、錯誤位置、錯誤描述、錯誤規(guī)則和問題數(shù)量。　　如上圖：　　報錯類型為編譯錯誤；　　錯誤位置在D:\myel\src\views\admin\AdminView.vue中的第四行第2個字符；（報錯位置不一定每次都是準確的...

3403771864 2023-01-20 08:10 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發(fā)布《80% 應聘者都不及格的 JS 面試題》之后，全網(wǎng)閱讀量超過 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發(fā)布《80% 應聘者都不及格的 JS 面試題》之后，全網(wǎng)閱讀量超過 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 評論0 收藏0
python包相對導入

摘要：包中的一個模塊可以采用相對路徑導入包，不影響模塊功能一個腳本未成為模塊，即其目錄及父目錄內無可以采用相對路徑導入包，并以腳本模式運行。參考相對導入與絕對導入絕對路徑導入格式為import a.b或者from a import b，相對路徑導入格式為from . import b或者from ..a import b。 python2默認為相對路徑導入，python3默認為絕對路徑導...

crossoverJie 2019-07-30 14:31 評論0 收藏0
[你不知道的 JavaScript 類型和語法] 第一章：類型

摘要：語言中規(guī)定的類型為以及。這兩個值有不同的類型。內建類型定義了七種內建類型中新增提示以上類型，除的被稱為基本類型。新增列出的六種類型的值都會返回一個對應類型名稱的字符串。是中新增的數(shù)據(jù)類型，我們會在第三章詳細介紹。譯者的前言一直都想好好研究這個在 GitHub 上很有名氣的系列，而翻譯恰是最好的閱讀途徑之一。可以讓我閱讀的時候，不那么不求甚解。圖靈社區(qū)出版了該系列兩部分的中文版——...

Astrian 2019-08-22 12:02 評論0 收藏0