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

資訊專欄INFORMATION COLUMN

線上出bug了？別怕，這么定位！

greatwhole / 2270人閱讀

摘要：由于現(xiàn)在構(gòu)建工具盛行，前端部署的代碼都是經(jīng)過編譯，壓縮后的，于是乎，就扮演了一個(gè)十分重要的角色，用來作為源代碼和編譯代碼之間的映射，方便定位問題。源代碼的標(biāo)識(shí)，如果無法獲取，返回。

摘要： Source Map還是很神奇的。

原文：線上出bug了？別怕，這么定位！

公眾號(hào)：前端小苑

Fundebug經(jīng)授權(quán)轉(zhuǎn)載并修改，版權(quán)歸原作者所有。

工作中，生產(chǎn)環(huán)境代碼是編譯后代碼，搜集到報(bào)錯(cuò)信息的行和列無法在源碼中對(duì)應(yīng)，很多時(shí)候只能靠“經(jīng)驗(yàn)”去猜，本文針對(duì)這種情況，開發(fā)了一個(gè)npm命令行小工具，幫助快速定位報(bào)錯(cuò)的源碼位置，提升效率。

由于現(xiàn)在構(gòu)建工具盛行，前端部署的代碼都是經(jīng)過編譯，壓縮后的，于是乎，SoueceMap就扮演了一個(gè)十分重要的角色，用來作為源代碼和編譯代碼之間的映射，方便定位問題。

測(cè)試SourceMap功能

首先全局安裝reverse-sourcemap

npm install --global reverse-sourcemap

選擇編譯后的代碼進(jìn)行測(cè)試，下面是vue項(xiàng)目編譯生成的代碼。

在命令行執(zhí)行命令，將main.js反編譯回源碼，并輸出到sourcecode目錄下。

reverse-sourcemap -v dist/main.a8ebc11c3f03786d8e3b.js.map  -o sourcecode

上面是執(zhí)行命令輸出的sourcecode目錄，生成的目錄結(jié)構(gòu)和源碼目錄一致，打開一個(gè)文件，和源碼做下對(duì)比：

可以看出，反編譯出的代碼無論目錄結(jié)構(gòu)還是具體代碼都和源碼一致。

生產(chǎn)環(huán)境代碼報(bào)錯(cuò)如何定位源碼位置

如果使用了Fundebug的Source Map功能的話，則可以很方便的定位出錯(cuò)位置：

如果沒有使用監(jiān)控工具的話，生產(chǎn)環(huán)境的代碼，經(jīng)過壓縮、編譯，很不利于Debug。針對(duì)這個(gè)問題，需要準(zhǔn)備一份生產(chǎn)環(huán)境代碼的map文件，為了方便，可以在項(xiàng)目的package.json增加debug命令用來生成map文件。這條命令除了開啟sourcemap，其他的具體webpack配置和生產(chǎn)環(huán)境配置相同。

    "scripts": {
        "start": "vue-cli-service serve --mode dev",
        "stage": "vue-cli-service build --mode staging",
        "online": "vue-cli-service build",
        "debug": "vue-cli-service build --mode debug"
    }

有了map文件，通過SourceMap提供的API就可以定位到源碼的位置。下面是實(shí)現(xiàn)的核心代碼。

// Get file content
const sourceMap = require("source-map");
const readFile = function (filePath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filePath, {encoding:"utf-8"}, function(error, data) {
      if (error) {
        console.log(error)
        return reject(error);
      }
      resolve(JSON.parse(data));
    });
  });
};

// Find the source location
async function searchSource(filePath, line, column) {
  const rawSourceMap = await readFile(filePath)
  const consumer = await new sourceMap.SourceMapConsumer(rawSourceMap);
  const res = consumer.originalPositionFor({
    "line" : line,
    "column" : column
   });
   consumer.destroy()
  return res
}

最重要的就是使用SourceMap提供的 originalPositionFor API。 SourceMapConsumer.prototype.originalPositionFor(generatedPosition)

originalPositionFor API的參數(shù)為一個(gè)包含line和column屬性的對(duì)象
line 編譯生成代碼的行號(hào)，從1開始
column 編譯生成代碼的列號(hào)，從0開始
這個(gè)方法會(huì)返回一個(gè)具有以下屬性的對(duì)象

{
    "source": "webpack:///src/pages/common/403.vue?c891", // 源代碼文件的位置,如果無法獲取，返回null。
    "line": 4, // 源代碼的行號(hào)，從1開始，如果無法獲取，返回null。
    "column": 24, // 源代碼的列號(hào)，從0開始，如果無法獲取，返回null。
    "name": "get" // 源代碼的標(biāo)識(shí)，如果無法獲取，返回null。
}
源碼定位工具

為了使用方便，我將這個(gè)功能做成了一個(gè)命令行小工具。全局安裝后，不需要做任何配置就可以使用。

安裝 
npm install --global source-location
參數(shù)介紹 
Usage: sl [options]

Options:
  -v, --version           output the version number
  -p, --source-flie-path  The generated source file  編譯后的map文件
  -l, --ine               The line number in the generated source  編譯后代碼行號(hào)
  -c, --column            The column number in the generated source  編譯后代碼列號(hào)
  -h, --help              output usage information
使用案例

終端執(zhí)行命令：

sl -p dist/1.f47efcb58028826c7c05.js.map -l 1 -c 34

命令行將會(huì)輸出：源碼的文件路徑：path，源碼行號(hào)：line，源碼標(biāo)識(shí)：name。

項(xiàng)目的github地址： github.com/front-end-y… 如有錯(cuò)誤歡迎指出。

最后，推薦大家使用Fundebug，一款很好用的BUG監(jiān)控工具，支持Source Map功能~

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

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

相關(guān)文章

  • 【騰訊Bugly干貨分享】移動(dòng)互聯(lián)網(wǎng)測(cè)試到質(zhì)量的轉(zhuǎn)變

    摘要：每周都會(huì)舉行嘉賓分享，話題討論等活動(dòng)。本期，我們邀請(qǐng)了測(cè)試技術(shù)社區(qū)聯(lián)合創(chuàng)始人陳曄，為大家分享移動(dòng)互聯(lián)網(wǎng)測(cè)試到質(zhì)量的轉(zhuǎn)變。分享內(nèi)容簡介在移動(dòng)互聯(lián)網(wǎng)越來越快的迭代項(xiàng)目中，很多測(cè)試人員和測(cè)試團(tuán)隊(duì)都開始覺得力不從心。 本文來自于騰訊bugly開發(fā)者社區(qū)，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載，原文地址：http://dev.qq.com/topic/57ee0... Dev Club 是一個(gè)交流移動(dòng)開發(fā)技術(shù)，...

    renweihub 評(píng)論0 收藏0

  • 馬蜂窩大交通業(yè)務(wù)質(zhì)量體系建設(shè)初步實(shí)踐

    摘要：大交通研發(fā)質(zhì)量體系建設(shè)為了幫助用戶更好地完成消費(fèi)決策閉環(huán)，馬蜂窩上線了大交通業(yè)務(wù)，為用戶提供購買機(jī)票火車票等服務(wù)。 質(zhì)量是決定產(chǎn)品能否成功、企業(yè)能否持續(xù)發(fā)展的關(guān)鍵因素之一。如何做好質(zhì)量體系建設(shè)，這是個(gè)比較大的話題，包含的范圍很廣，也沒有固定的衡量標(biāo)準(zhǔn)。 打開一個(gè)互聯(lián)網(wǎng)公司招聘網(wǎng)站，搜索「測(cè)試工程師」崗位時(shí)，你會(huì)發(fā)現(xiàn)幾乎全部 JD 都包含一條要求「建設(shè)或者參與建設(shè)所負(fù)責(zé)業(yè)務(wù)的質(zhì)量體系」。...

    Ilikewhite 評(píng)論0 收藏0

  • 馬蜂窩大交通業(yè)務(wù)質(zhì)量體系建設(shè)初步實(shí)踐

    摘要：大交通研發(fā)質(zhì)量體系建設(shè)為了幫助用戶更好地完成消費(fèi)決策閉環(huán)，馬蜂窩上線了大交通業(yè)務(wù)，為用戶提供購買機(jī)票火車票等服務(wù)。 質(zhì)量是決定產(chǎn)品能否成功、企業(yè)能否持續(xù)發(fā)展的關(guān)鍵因素之一。如何做好質(zhì)量體系建設(shè)，這是個(gè)比較大的話題，包含的范圍很廣，也沒有固定的衡量標(biāo)準(zhǔn)。 打開一個(gè)互聯(lián)網(wǎng)公司招聘網(wǎng)站，搜索「測(cè)試工程師」崗位時(shí)，你會(huì)發(fā)現(xiàn)幾乎全部 JD 都包含一條要求「建設(shè)或者參與建設(shè)所負(fù)責(zé)業(yè)務(wù)的質(zhì)量體系」。...

    fantix 評(píng)論0 收藏0

  • 一步一步搭建前端監(jiān)控系統(tǒng)：如何定位前端線上問題？

    摘要：一直以來，前端的線上問題很難定位，因?yàn)樗l(fā)生于用戶的一系列操作之后。當(dāng)然，這些問題并非不能克服，讓我們來一起看看如何去定位線上的問題吧。地址參考一步一步搭建前端監(jiān)控系統(tǒng)錯(cuò)誤監(jiān)控篇一步一步搭建前端監(jiān)控系統(tǒng)接口請(qǐng)求異常監(jiān)控篇 摘要： 記錄用戶行為，排查線上BUG。 作者：一步一個(gè)腳印一個(gè)坑 原文：如何定位前端線上問題（如何排查前端生產(chǎn)問題） Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所...

    aaron 評(píng)論0 收藏0

  • 【總結(jié)】我們2018年的關(guān)鍵詞-堅(jiān)持學(xué)習(xí)

    摘要：因?yàn)樯婕皹I(yè)務(wù)敏感話題，本文只記錄我們學(xué)習(xí)的歷程。我由衷的感謝團(tuán)隊(duì)的小伙伴們，感謝你們的堅(jiān)韌不拔，感謝你們的持續(xù)成長。這個(gè)變化只是在每天的堅(jiān)持和刻意練習(xí)中發(fā)生的，是那么的神奇。 因?yàn)樯婕皹I(yè)務(wù)敏感話題，本文只記錄我們學(xué)習(xí)的歷程。 關(guān)于堅(jiān)持 ??從2016年起，我們團(tuán)隊(duì)堅(jiān)持每天早晨8:50-10:30的100分鐘早晨討論，到現(xiàn)在已經(jīng)兩年了，期間沒有中斷過。我由衷的感謝團(tuán)隊(duì)的小伙伴們，感謝你們...

    Imfan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<