成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

腳本錯誤量極致優(yōu)化-讓腳本錯誤一目了然

DirtyMind / 1220人閱讀

摘要：通過文件可以得到源文件的具體錯誤信息，結(jié)合上源文件的內(nèi)容進(jìn)行可視化展示，讓報錯信息一目了然基于快速定位腳本報錯方案整套方案的代碼實現(xiàn)可以在這查看，效果如下左邊的為線上頁面，上報腳本錯誤右邊的為腳本錯誤監(jiān)控系統(tǒng)此時，錯誤信息中行列數(shù)為和。

>>>點擊獲取更多文章<<<

示例 · 壓縮代碼定位錯誤困難

1.源代碼（存在錯誤）

function test() {
    noerror // <- 報錯
}

test();

2.經(jīng) webpack 打包壓縮后產(chǎn)生如下代碼

!function(n){function r(e){if(t[e])return t[e].exports;var o=t[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};r.m=n,r.c=t,r.i=function(n){return n},r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e})},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,"a",t),t},r.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},r.p="",r(r.s=0)}([function(n,r){function t(){noerror}t()}]);

3.代碼如期報錯，并上報相關(guān)信息

{ msg: "Uncaught ReferenceError: noerror is not defined",
  url: "http://127.0.0.1:8077/main.min.js",
  row: "1",
  col: "515" }

此時，錯誤信息中行列數(shù)為 1 和 515。 結(jié)合壓縮后的代碼，肉眼觀察很難定位出具體問題。

如何定位到具體錯誤 方案一：不壓縮 js 代碼

這種方式簡單粗暴，但存在明顯問題：1. 源代碼泄漏，2. 文件的大小大大增加。

方案二：將壓縮代碼中分號變成換行

uglifyjs 有一個叫 semicolons 配置參數(shù)，設(shè)置為 false 時，會將壓縮代碼中的分號替換為換行符，提高代碼可讀性， 如

!function(n){function r(e){if(t[e])return t[e].exports
var o=t[e]={i:e,l:!1,exports:{}}
return n[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={}
r.m=n,r.c=t,r.i=function(n){return n},r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e})},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n}
return r.d(t,"a",t),t},r.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},r.p="",r(r.s=0)}([function(n,r){function t(){noerror}t()}])

此時，錯誤信息中行列數(shù)為 5 和 137，查找起來比普通壓縮方便不少。但仍會出現(xiàn)一行中有很多代碼，不容易定位的問題。

方案三：js 代碼半壓縮 · 保留空格和換行

uglifyjs 的另一配置參數(shù) beautify 設(shè)置為 true 時，最終代碼將呈現(xiàn)壓縮后進(jìn)行格式化的效果（保留空格和換行），如

!function(n) {
    // ...
    // ...
}([ function(n, r) {
    function t() {
        noerror;
    }
    t();
} ]);

此時，錯誤信息中行列數(shù)為 32 和 9，能夠快速定位到具體位置，進(jìn)而對應(yīng)到源代碼。但由于增加了換行和空格，所以文件大小有所增加。

方案四：SourceMap 快速定位

SourceMap 是一個信息文件，存儲著源文件的信息及源文件與處理后文件的映射關(guān)系。

在定位壓縮代碼的報錯時，可以通過錯誤信息的行列數(shù)與對應(yīng)的 SourceMap 文件，處理后得到源文件的具體錯誤信息。

SourceMap 文件中的 sourcesContent 字段對應(yīng)源代碼內(nèi)容，不希望將 SourceMap 文件發(fā)布到外網(wǎng)上，而是將其存儲到腳本錯誤處理平臺上，只用在處理腳本錯誤中。

通過 SourceMap 文件可以得到源文件的具體錯誤信息，結(jié)合 sourcesContent 上源文件的內(nèi)容進(jìn)行可視化展示，讓報錯信息一目了然！

基于 SourceMap 快速定位腳本報錯方案

整套方案的代碼實現(xiàn)可以在這 noerror 查看，效果如下

1.左邊的為線上頁面，上報腳本錯誤
2.右邊的為 noerror 腳本錯誤監(jiān)控系統(tǒng)

此時，錯誤信息中行列數(shù)為 1 和 515。 結(jié)合 sourcemap，經(jīng)處理（source-map）后，拿到對應(yīng)的源文件上的具體錯誤信息，并進(jìn)行展示。

方案五：開源方案 sentry

sentry 是一個實時的錯誤日志追蹤和聚合平臺，包含了上面 sourcemap 方案，并支持更多功能，如：錯誤調(diào)用棧，log 信息，issue管理，多項目，多用戶，提供多種語言客戶端等，具體介紹可以查看 getsentry/sentry，sentry.io，這里暫不展開。

參考來源https://github.com/joeyguo/bl...

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108263.html

相關(guān)文章

  • 腳本錯誤量極致優(yōu)化-監(jiān)控上報與Script error

    摘要：如上報監(jiān)控項目是否正常運轉(zhuǎn)測速上報反應(yīng)項目質(zhì)量腳本錯誤監(jiān)控作為監(jiān)控中重要一環(huán)，當(dāng)頁面發(fā)生報錯的時候，通過上報錯誤信息，能及時發(fā)現(xiàn)存在問題，修復(fù)優(yōu)化減少損失。監(jiān)控上報腳本錯誤主要有兩類語法錯誤運行時錯誤。 更多細(xì)節(jié)點擊 在前端開發(fā)工作中，除了項目開發(fā)保質(zhì)保量上線以外，項目的數(shù)據(jù)監(jiān)控也應(yīng)該配套起來，確保線上的正常運轉(zhuǎn)。如上報 pv監(jiān)控項目是否正常運轉(zhuǎn)；測速上報反應(yīng)項目質(zhì)量；腳本錯誤監(jiān)控作為...

    wayneli 評論0 收藏0

  • javascript性能優(yōu)化技巧

    摘要：語句會使得局部變量位于作用域第二層，會使性能下降，所以應(yīng)避免使用。使用事件委托來減少事件處理器的數(shù)量。把最可能出現(xiàn)的條件放在首位。在進(jìn)行優(yōu)化時，要弄清楚性能瓶頸，然后對癥優(yōu)化。新看到一篇很棒的文章前端性能優(yōu)化備忘錄如有不對，歡迎指正。 春節(jié)在家，把《高性能的JavaScript》刷了一遍，受益匪淺。本著每看完一本書都要做讀書筆記的習(xí)慣，將書中的知識點總結(jié)一下。 由于不同瀏覽器使用的Ja...

    levinit 評論0 收藏0

  • javascript嚴(yán)格模式

    摘要：概述的嚴(yán)格模式是中的一種限制性更強的變種方式。嚴(yán)格模式在語義上與正常的有一些不同。首先，嚴(yán)格模式會將陷阱直接變成明顯的錯誤。嚴(yán)格模式禁止刪除聲明變量。 概述 ECMAScript 5的嚴(yán)格模式是JavaScript中的一種限制性更強的變種方式。嚴(yán)格模式不是一個子集：它在語義上與正常代碼有著明顯的差異。不支持嚴(yán)格模式的瀏覽器與支持嚴(yán)格模式的瀏覽器行為上也不一樣， 所以不要在未經(jīng)嚴(yán)格模式特...

    Chao 評論0 收藏0

發(fā)表評論

0條評論

DirtyMind

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<