Java IDE MyEclipse 使用教程：使用 Source Maps 进行 JavaScript 调试-控件新闻-慧都网

Java IDE MyEclipse 使用教程：使用 Source Maps 进行 JavaScript 调试

翻译|使用教程|编辑：董玉霞|2022-04-24 11:54:39.250|阅读 124 次

概述：此文章详细介绍了在 MyEclipse中使用 Source Maps 进行 JavaScript 调试，使用本教程能正确配置您的环境以使用源映射来简化 JavaScript 调试。

什么是源地图？

由于转换（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 种方法可以指定源的位置：

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 中
绝对路径——指定源根路径表示文件系统文件夹
浏览器

映射文件位置——//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 文件在工作区的进一步定位执行。
相对于源映射文件 - 如果您有内联源映射，则根据源映射文件或原始文件的位置解析路径；要求源文件在已解析的位置下。
浏览器

地图文件位置——//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

进一步定位工作区中的文件
主机相对 -路径根据网页主机名解析。此模式仅适用于 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 加载了哪些脚本。提供源映射的脚本节点将是可扩展的，将看到所有源文件的列表。可以位于工作区中的每个文件都标有链接图标链接的并且每个找不到的文件都标有警告标志未链接. 即使文件不在工作区中，仍然可以看到文件的内容。

在 MyEclipse 中使用 Source Maps 进行 JavaScript 调试

在工作区中没有源文件怎么办？

如果已将源映射配置为包含内容，将能够查看并用于调试这些嵌入源，即使源文件无法在工作区中找到。此外，当浏览堆栈跟踪时，将自动使用这些嵌入式源。

可以在非 JavaScript/TypeScript 文件中放置断点吗？

断点适用于其他语言，例如 CoffeeScript。使用 JavaScript 编辑器打开文件，最好在 General>Editors>File Associations 的首选项中指定关联。在列表中找到文件扩展名或使用添加按钮添加新扩展名，单击它并将 JavaScript Editor 或 MyEclipse JavaScript Editor 添加到列表中，确保它是默认的。如果对非 JS/TS 文件使用了一些专门的编辑器，请通过 support@genuitec.com 告知我们，将确保编辑器受支持并且可以在其中设置断点。