Sourcemap全解：什麼是sourcemap？怎麼用？

一、Sourcemap還原項目

在前端開發中，有時候我們會發現自己寫的代碼在調試時看不懂，因為代碼文件被壓縮成了一行或者幾行，難以閱讀和查錯。此時，我們可以使用sourcemap文件還原源代碼，從而更便於我們的調試。

一般情況下，我們可以通過在webpack或者gulp等自動化構建工具中開啟sourcemap選項生成sourcemap文件。當我們在調試模式下使用Chrome或者Firefox瀏覽器調試代碼時，我們可以通過在Sources或者Debugger面板中選擇對應的sourcemap文件來還原代碼。

二、Sourcemap是幹嘛的

sourcemap文件是一種映射關係文件，它存儲了壓縮後的代碼與源代碼之間的關係，包括代碼位置、代碼映射位置和所在文件名等信息。瀏覽器調試工具通過sourcemap文件可以將壓縮後的代碼還原成原始代碼，並且可以顯示正確的行號和源文件名，便於開發者進行調試和排錯。

三、Sourcemap原理

sourcemap文件原理就是通過將源代碼與壓縮後的代碼之間的關係信息存儲在一個.json文件中。當瀏覽器遇到錯誤信息時，可以通過讀取對應的sourcemap文件，查找錯誤發生在哪一段源代碼中，從而幫助開發人員更快地定位問題。

四、Sourcemap怎麼讀

假設我們使用了webpack打包工具自動生成了sourcemap文件，那麼我們可以通過以下步驟讀取sourcemap文件：

1. 在我們使用webpack打包工具時，需要開啟sourcemap選項，生成sourcemap文件；
2. 首先在控制台打印出錯誤信息，然後在瀏覽器調試工具中打開Sources或Debugger面板；
3. 在 Sources 或者 Debugger 面板中可以看到當前頁面加載的所有資源，我們可以通過定位到錯誤信息所在的文件位置，選擇對應的sourcemap文件並加載；
4. 當我們將 sourcemap 文件引入到瀏覽器後，瀏覽器會自動將其與壓縮後的文件關聯，並且會重新映射代碼到對應的源代碼和行數；
5. 最後，我們可以在瀏覽器中查看到正確的源代碼行數和文件，在指定行數處進行調試和排錯。

五、Sourcemap怎麼設置

我們可以通過webpack、gulp等構建工具來開啟sourcemap選項生成sourcemap文件。在webpack中，開啟sourcemap選項可以使用以下命令：

module.exports = {
  devtool: 'source-map'
}

在gulp中，可以使用以下包來生成sourcemap：

var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');

gulp.task('js', function () {
  return gulp.src('./src/js/*.js')
    .pipe(sourcemaps.init())
    //壓縮、混淆文件
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dest/js/'))
})

六、Sourcemap什麼意思

sourcemap的字面意思是“源碼映射”，它是一種映射關係文件，用於將壓縮後的代碼還原成源代碼，並且能夠正確地顯示出源代碼的行數、列數、文件名等信息，便於開發人員進行調試和排錯。

七、Sourcemap堆棧解析

當我們的代碼發生錯誤時，瀏覽器會顯示出一個調用堆棧信息，這個堆棧信息是由一系列錯誤發生的位置構成，稱為堆棧幀。其中每個堆棧幀都包含了一個代碼位置信息，包括文件名、行數和列數等信息。瀏覽器可以通過sourcemap文件將這些錯誤的位置信息重新映射到與之對應的源代碼中，幫助我們進行排錯。

八、Sourcemap定位問題

在使用sourcemap定位問題時，我們可以通過以下步驟來進行：

1. 打開瀏覽器調試工具，使用 Sources 或 Debugger 面板找到面板底部的 Call Stack 面板，展開以查看錯誤信息的位置；
2. 右鍵單擊錯誤堆棧的某個幀，並選擇 "Open in Source" 選項，瀏覽器就會加載錯位代碼文件和 sourcemap 文件；
3. 接着，就可以像調試普通 JavaScript 代碼一樣查找並解決問題代碼了。

九、Sourcemap文件泄露怎麼整改

因為sourcemap文件包含了源代碼的位置信息，若遭竊取或者泄露，可能會引發嚴重的安全問題。為了解決這個問題，我們可以通過以下方式進行整改：

1. 不在生產環境中生成sourcemap文件；
2. 對sourcemap文件進行加密、混淆或者刪除；
3. 使用防盜鏈策略，限制只有網站綁定的域名或者IP地址才可以訪問sourcemap文件；
4. 修改代碼中的提示文本，避免泄露敏感信息。

麻省理工sourcemap

麻省理工大學開發了一款sourcemap可視化工具，可以便於我們快速地查找並定位sourcemap文件和源代碼文件，從而更方便地進行調試和排錯。下面是使用sourcemap可視化工具的相關代碼：

var sourceMap = require('source-map');
var fs = require('fs');

var rawSourceMap = fs.readFileSync('bundle.js.map');
var consumer = await new sourceMap.SourceMapConsumer(rawSourceMap.toString());

// 查找幀所在的位置
var location = consumer.originalPositionFor({
  line: 1,
  column: 12128
});

console.log(location.source); // "index.js"
console.log(location.line); // 7
console.log(location.column); // 5

總之，sourcemap是前端開發中非常重要的一項工具，通過合理使用sourcemap可以提高我們在開發過程中的調試效率和代碼質量，是每個前端開發人員必須掌握的技能之一。