此文章詳細(xì)介紹了在 MyEclipse中使用 Source Maps 進(jìn)行 JavaScript 調(diào)試，使用本教程能正確配置您的環(huán)境以使用源映射來簡(jiǎn)化 JavaScript 調(diào)試。

MyEclipse官方正版下載

什么是源地圖？

由于轉(zhuǎn)換（TypeScript、CoffeeScript 等）、縮小（minifyJS、UglifyJS 等）、捆綁（Browserify 等）或源文件中的其他一些過程。通常生成的文件的代碼難以理解或與原始源代碼有很大不同。這就是源地圖出現(xiàn)的地方。大多數(shù)流行的處理工具可以生成它們并允許調(diào)試器在原始文件的上下文中表示當(dāng)前代碼執(zhí)行位置。

如何配置我的工具以生成源映射？

要利用源映射，需要適當(dāng)?shù)嘏渲?處理工具。每個(gè)工具都有自己特定的配置方式；因此，建議使用Gulp 作為項(xiàng)目的構(gòu)建器，因?yàn)樗试S以統(tǒng)一的方式在一個(gè)地方配置不同的工具。但是，這并不是對(duì)每個(gè)人都適用的最佳解決方案，將提供幾個(gè)工具的示例配置。

Gulp

推薦使用 Gulp 來構(gòu)建項(xiàng)目，因?yàn)樗鼘?duì)源映射的支持是最靈活的。這是 CoffeeScript 的示例：

gulp.task('coffee', function() { 
  gulp.src('./src/*.coffee') 
	.pipe(sourcemaps.init()) 
	.pipe(coffee({bare: true}).on('錯(cuò)誤'，gutil.log)) 
	.pipe(sourcemaps.write({sourceRoot: “workspace:my-coffee-project/”})) 
	.pipe(gulp.dest('./build/')); 
});

瀏覽器化

• 命令行——添加`--debug`參數(shù)；例如browserify main.js –debug。
• 構(gòu)建腳本——在 browserify 調(diào)用中添加 `debug: true` 選項(xiàng)；例如browserify({standalone: “main”, debug: true})

注意：Browserify 不允許指定 sourceRoot；它總是嵌入文件內(nèi)容并在生成源映射時(shí)保存源文件的絕對(duì)文件系統(tǒng)路徑。這意味著不需要任何進(jìn)一步的配置來獲取文件的工作區(qū)鏈接，但是當(dāng)項(xiàng)目移動(dòng)到文件系統(tǒng)上的不同位置時(shí)，需要重建源代碼。

打字稿

最好使用tsconfig.json文件。如果在TS文件旁邊生成JS文件，只需要將sourceMap屬性指定為true，否則還需要指定sourceRoot屬性。下面是一個(gè)例子：

{ 
  "compilerOptions": { 
  	"target": "es5", 
  	"outDir": "target", 
  	"sourceMap": true, 
  	"sourceRoot": "workspace:my-ts-project/" 
  }, 
  "files": [ 
  	" main.ts”、
  	“utils.ts” 
  ] 
}

如何指定源根？

在 java IDE中使用 JavaScript 調(diào)試器的最大優(yōu)勢(shì)是您可以在工作區(qū)的文件中放置斷點(diǎn)。這也適用于源映射，但是，調(diào)試器必須知道在工作區(qū)中的何處查找適當(dāng)?shù)奈募Ｓ?4 種方法可以指定源的位置：

1. Workspace relative — 帶有架構(gòu)“workspace”的 URL，后跟項(xiàng)目名稱和項(xiàng)目中的路徑。這是與調(diào)試器一起使用的建議方法，因?yàn)樗?jiǎn)單、明確且最便攜。

   瀏覽器

   地圖文件位置——//localhost:8080/my-web-project/maps/generated.js.map

   源文件名——source.js源根——workspace :my - web-project/src/main/js源—預(yù)計(jì)在src/main/js/source.js 中my-web-project 項(xiàng)目Node.js映射文件位置— :/Workspace/My Node Project/target/maps/generated.js.map源文件名— source.js源碼根——workspace:My Node Project/src/

   
   

   Source — 預(yù)計(jì) 在My Node Project 項(xiàng)目中的src/ source.js 中

2. 絕對(duì)路徑——指定源根路徑表示文件系統(tǒng)文件夾

   瀏覽器

   映射文件位置——//localhost:8080/my-web-project/maps/generated.js.map

   源文件名——source.js

   源根——C : /Workspace/my-web-project/src 源——預(yù)計(jì)在C:/Workspace/my-web-project/src/source.js

   文件在工作區(qū)的進(jìn)一步位置執(zhí)行Node.js映射文件位置——C :/Workspace/My Project/target/maps/generated.js.map源文件名——source.js源根目錄——C:/Workspace/My Project/src”源——預(yù)計(jì)在 C:/Workspace/My Project/src/source.js  文件在工作區(qū)的進(jìn)一步定位執(zhí)行。

3. 相對(duì)于源映射文件 - 如果您有內(nèi)聯(lián)源映射，則根據(jù)源映射文件或原始文件的位置解析路徑；要求源文件在已解析的位置下。

   瀏覽器

   地圖文件位置——//localhost:8080/my-web-project/maps/generated.js.map

   源文件名——source.js

   源根目錄—— .. /

   sources源——預(yù)計(jì)在// localhost:8080/my-web-project/sources/source.js 根據(jù)您的 Web 應(yīng)用程序啟動(dòng)設(shè)置

   Node.js

   映射文件位置- C:/Workspace/My Project/target/maps/generated從 URL 到工作區(qū)的進(jìn)一步映射正在發(fā)生.js.map

   源文件名——source.js

   源碼根—— .. /../src 源碼——預(yù)計(jì)在C:/Workspace/My Project/src/source.js

   進(jìn)一步定位工作區(qū)中的文件

4. 主機(jī)相對(duì) -路徑根據(jù)網(wǎng)頁主機(jī)名解析。此模式僅適用于 JavaScript Web 應(yīng)用程序，它要求源文件在已解析的位置下可用。

   瀏覽器

   地圖文件位置——//localhost:8080/my-web-project/js/maps/app/generated.js.map

   源文件名——app/source.js

   源根目錄—— /my-web-project/sources來源——預(yù)計(jì)在 //localhost:8080/my-web-project/sources/app/source.js

   根據(jù)您的 Web 應(yīng)用程序啟動(dòng)設(shè)置，從 URL 到工作區(qū)的進(jìn)一步映射正在發(fā)生。

如何知道是否在工作區(qū)中找到了源文件？

可以在 Loaded JavaScript 視圖中檢查瀏覽器或 Node.js 加載了哪些腳本。提供源映射的腳本節(jié)點(diǎn)將是可擴(kuò)展的，將看到所有源文件的列表。可以位于工作區(qū)中的每個(gè)文件都標(biāo)有鏈接圖標(biāo) 鏈接的 并且每個(gè)找不到的文件都標(biāo)有警告標(biāo)志未鏈接. 即使文件不在工作區(qū)中，仍然可以看到文件的內(nèi)容。

在工作區(qū)中沒有源文件怎么辦？

如果已將源映射配置為包含內(nèi)容，將能夠查看并用于調(diào)試這些嵌入源，即使源文件無法在工作區(qū)中找到。此外，當(dāng)瀏覽堆棧跟蹤時(shí)，將自動(dòng)使用這些嵌入式源。

可以在非 JavaScript/TypeScript 文件中放置斷點(diǎn)嗎？

 斷點(diǎn)適用于其他語言，例如 CoffeeScript。使用 JavaScript 編輯器打開文件，最好在 General>Editors>File Associations 的首選項(xiàng)中指定關(guān)聯(lián)。在列表中找到文件擴(kuò)展名或使用添加按鈕添加新擴(kuò)展名，單擊它并將 JavaScript Editor 或 MyEclipse JavaScript Editor 添加到列表中，確保它是默認(rèn)的。如果對(duì)非 JS/TS 文件使用了一些專門的編輯器，請(qǐng)通過 support@genuitec.com 告知我們，將確保編輯器受支持并且可以在其中設(shè)置斷點(diǎn)。

如何禁用源地圖支持？

要禁用源映射支持，請(qǐng)打開調(diào)試啟動(dòng)配置并清除啟用源映射支持復(fù)選框。

在 MyEclipse 中使用 Source Maps 進(jìn)行 JavaScript 調(diào)試，想要了解更多MyEclipse使用教程，

MyEclipse V2022.1正式發(fā)布，大家可以下載MyEclipse官方正版試用，更多MyEclipse價(jià)格咨詢可聯(lián)系慧都在線客服。

MyEclipse | 下載試用

MyEclipse是功能最全面、性價(jià)比最高的企業(yè)級(jí)Java IDE之一。

MyEclipseQQ群：742336981      ;歡迎進(jìn)群一起討論