在一般情況下我們代碼報錯啥的都會覺得 下圖

然后現在來說下經常用的異常

1.try catch

這個是比較常見的異常捕獲方式通常都是

使用try catch能夠很好的捕獲異常并對應進行相應處理，不至于讓頁面掛掉，但是其存在一些弊端，比如需要在捕獲異常的代碼上進行包裹，會導致頁面臃腫不堪，不適用于整個項目的異常捕獲。

try,catch的幾個特點：

• 無法捕捉到語法錯誤，只能捕捉運行時錯誤；
• 可以拿到出錯的信息，堆棧，出錯的文件、行號、列號；
• 需要借助工具把所有的function塊以及文件塊加入try,catch，可以在這個階段打入更多的靜態信息。

2.window.onerror

除了try catch還有window.onerror, onerror提供了全局監聽異常的功能：

運行以后：

window.onerror提供了錯誤的信息，還提供了錯誤行列號，可以更準確的定位錯誤代碼

window.onerror的幾個特點：

• 可以捕捉語法錯誤，也可以捕捉運行時錯誤；
• 可以拿到出錯的信息，堆棧，出錯的文件、行號、列號；
• 只要在當前頁面執行的js腳本出錯都會捕捉到，例如：瀏覽器插件的javascript、或者flash拋出的異常等。
• 跨域的資源需要特殊頭部支持。

3.sourceMap

部署前端之前，開發者通常會對代碼進行打包壓縮，這樣可以減少代碼大小，從而有效提高訪問速度。然而，壓縮代碼的報錯信息是很難Debug的，因為它的行號和列號已經失真。這時就需要SourceMap來還原真實的出錯位置了。

Source Map是一個JSON文件，其中包含了代碼轉換前后的位置信息。給定一個轉換之后的壓縮代碼的位置，就可以通過Source Map獲取轉換之前的代碼位置，反過來也一樣。

Source Map真正神奇之處在于mappings屬性，它記錄了位置是如何對應的。JavaScript Source Map 詳解里面已經有很好的解釋了，就不多說了

如果要在chrome里面使用的話需要一些簡單的配置