要約： Sourceは地図が素晴らしいです。
- オリジナル：バグを並べますか？そう位置決め、恐れてはいけません！
- いいえ公共ん：フロント小法廷
Fundebugは転載を許可し、変更、元の作者に属します。
コードの後に本番環境での作業は、コードをコンパイルされたソースコードにない行と列に対応するエラー情報を収集し、そして非常に多くの場合、彼らは推測する「経験」に頼っている、このような状況のこの見解、小さなコマンドラインツールのNPMの開発すぐに役立つように効率を向上させるための誤差源の位置を突き止めます。
流行で今ビルドツールので、コードの展開のフロントエンドは、圧縮、コンパイルされ、それ以来、それが問題を見つけやすいソースコードとコンパイルされたコードの間のマッピングとして使用される非常に重要な役割を果たしたSoueceMap。
SourceMap機能検査
まず、グローバルにインストール逆sourcemap
npm install --global reverse-sourcemapコード選択テストをコンパイルし、以下の項目がVUEコンパイラ生成されたコードです。
コマンドラインコマンドでは、次のソースコードのディレクトリにmain.jsソース、および出力をバック逆コンパイル。
reverse-sourcemap -v dist/main.a8ebc11c3f03786d8e3b.js.map -o sourcecode
上記を実行し、出力ソースコードディレクトリ、ディレクトリ構造と生成する一貫性のあるソースディレクトリでファイルを開き、比較元を行います。
図から分かるように、コードのディレクトリ構造または特定のコードとソースコード一致するかどうかをコンパイル。
コードのエラー位置のソースの実稼働環境を確認する方法
場合Fundebugソースマップ機能の、あなたは簡単にエラーの場所を見つけることができます。
、その後、監視ツール、圧縮されたコンパイル済みの製品コードを使用しない場合は、デバッグを助長されていません。この問題に対処するために、私たちは本番環境のコードを必要とする、マップファイルは、利便性のために、あなたはマップファイルpackage.jsonプロジェクトを生成するために、デバッグコマンドを増やすことができます。加えて、このコマンドはsourcemap、他の特定の構成および設定のWebPACK同じ生産環境を開きます。
"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"
}マップファイルを使用すると、SourceMapが提供するAPIを使用すると、ソースの場所に移動することができます。ここで達成するためにコアコードです。
// 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的参数为一个包含line和column属性的对象
line 编译生成代码的行号，从1开始
column 编译生成代码的列号，从0开始
这个方法会返回一个具有以下属性的对象
{
"source": "webpack:///src/pages/common/403.vue?c891", // 源代码文件的位置,如果无法获取，返回null。
"line": 4, // 源代码的行号，从1开始，如果无法获取，返回null。
"column": 24, // 源代码的列号，从0开始，如果无法获取，返回null。
"name": "get" // 源代码的标识，如果无法获取，返回null。
}源码定位工具
为了使用方便，我将这个功能做成了一个命令行小工具。全局安装后，不需要做任何配置就可以使用。
安装
npm install --global source-location参数介绍
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 编译后代码行号
-c, --column The column number in the generated source 编译后代码列号
-h, --help output usage information使用案例
终端执行命令：
sl -p dist/1.f47efcb58028826c7c05.js.map -l 1 -c 34 命令行将会输出：源码的文件路径：path，源码行号：line，源码标识：name。
项目的github地址： github.com/front-end-y… 如有错误欢迎指出。
最后，推荐大家使用Fundebug，一款很好用的BUG监控工具，支持Source Map功能~