此文章詳細介紹了在 MyEclipse中使用 Source Maps 進行 JavaScript 調試，使用本教程能正確配置您的環境以使用源映射來簡化 JavaScript 調試。

MyEclipse官方正版下載

什么是源地圖？

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

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

要利用源映射，需要適當地配置處理工具。每個工具都有自己特定的配置方式；因此，建議使用Gulp 作為項目的構建器，因為它允許以統一的方式在一個地方配置不同的工具。但是，這并不是對每個人都適用的最佳解決方案，將提供幾個工具的示例配置。

Gulp

推薦使用 Gulp 來構建項目，因為它對源映射的支持是最靈活的。這是 CoffeeScript 的示例：

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

瀏覽器化

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

注意：Browserify 不允許指定 sourceRoot；它總是嵌入文件內容并在生成源映射時保存源文件的絕對文件系統路徑。這意味著不需要任何進一步的配置來獲取文件的工作區鏈接，但是當項目移動到文件系統上的不同位置時，需要重建源代碼。

打字稿

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

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

如何指定源根？

在 java IDE中使用 JavaScript 調試器的最大優勢是您可以在工作區的文件中放置斷點。這也適用于源映射，但是，調試器必須知道在工作區中的何處查找適當的文件。有 4 種方法可以指定源的位置：

1. Workspace relative — 帶有架構“workspace”的 URL，后跟項目名稱和項目中的路徑。這是與調試器一起使用的建議方法，因為它簡單、明確且最便攜。

   瀏覽器

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

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

   
   

   Source — 預計 在My Node Project 項目中的src/ source.js 中

2. 絕對路徑——指定源根路徑表示文件系統文件夾

   瀏覽器

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

   源文件名——source.js

   源根——C : /Workspace/my-web-project/src 源——預計在C:/Workspace/my-web-project/src/source.js

   文件在工作區的進一步位置執行Node.js映射文件位置——C :/Workspace/My Project/target/maps/generated.js.map源文件名——source.js源根目錄——C:/Workspace/My Project/src”源——預計在 C:/Workspace/My Project/src/source.js 文件在工作區的進一步定位執行。

3. 相對于源映射文件 - 如果您有內聯源映射，則根據源映射文件或原始文件的位置解析路徑；要求源文件在已解析的位置下。

   瀏覽器

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

   源文件名——source.js

   源根目錄—— .. /

   sources源——預計在// localhost:8080/my-web-project/sources/source.js 根據您的 Web 應用程序啟動設置

   Node.js

   映射文件位置- C:/Workspace/My Project/target/maps/generated從 URL 到工作區的進一步映射正在發生.js.map

   源文件名——source.js

   源碼根—— .. /../src 源碼——預計在C:/Workspace/My Project/src/source.js

   進一步定位工作區中的文件

4. 主機相對 -路徑根據網頁主機名解析。此模式僅適用于 JavaScript Web 應用程序，它要求源文件在已解析的位置下可用。

   瀏覽器

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

   源文件名——app/source.js

   源根目錄—— /my-web-project/sources來源——預計在 //localhost:8080/my-web-project/sources/app/source.js 

   根據您的 Web 應用程序啟動設置，從 URL 到工作區的進一步映射正在發生。

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

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

在工作區中沒有源文件怎么辦？

 如果已將源映射配置為包含內容，將能夠查看并用于調試這些嵌入源，即使源文件無法在工作區中找到。此外，當瀏覽堆棧跟蹤時，將自動使用這些嵌入式源。

可以在非 JavaScript/TypeScript 文件中放置斷點嗎？

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

如何禁用源地圖支持？

要禁用源映射支持，請打開調試啟動配置并清除啟用源映射支持復選框。

在 MyEclipse 中使用 Source Maps 進行 JavaScript 調試，想要了解更多MyEclipse使用教程，

MyEclipse V2022.1正式發布，大家可以下載MyEclipse官方正版試用，更多MyEclipse價格咨詢可聯系慧都在線客服。

MyEclipse | 下載試用

MyEclipse是功能最全面、性價比最高的企業級Java IDE之一。

 MyEclipseQQ群：742336981      歡迎進群一起討論