将预处理的代码映射到源代码Map preprocessed code to source code

即使组合、缩小或编译客户端代码,也保持其可读和可调试。Keep your client-side code readable and debuggable even after you combine, minify, or compile it. 使用源映射将源代码映射到已编译的代码。Use source maps to map your source code to your compiled code.

摘要Summary

  • 使用"源地图"将缩小代码映射到源代码。Use Source Maps to map minified code to source code. 然后,您能够读取和调试原始源中的已编译代码。You are then able to read and debug compiled code in the original source.
  • 只能使用能够生成源地图的预处理器。Only use pre-processors capable of producing Source Maps.
  • 验证 Web 服务器能否提供源地图。Verify that your web server is able to serve Source Maps.

预处理器入门Get started with preprocessors

本文介绍了如何在 DevTools 源工具中与 JavaScript 源映射进行交互。This article explains how to interact with JavaScript Source Maps in the DevTools Sources tool.

使用受支持的预处理器Use a supported preprocessor

使用能够创建源地图的微型程序。Use a minifier that is capable of creating source maps. 对于扩展视图,导航到源 地图:语言、工具和其他信息 Wiki 页面。For an extended view, navigate to Source maps: languages, tools and other info wiki page.

通常将以下类型的预处理器与源地图结合使用:The following types of preprocessors are commonly used in combination with Source Maps:

DevTools 源工具中的源地图Source Maps in DevTools Sources tool

来自预处理器的源地图除了缩小文件外,还会导致 DevTools 加载原始文件。Source Maps from preprocessors cause DevTools to load your original files in addition to your minified ones. 然后,使用原始文件设置断点并逐步执行代码。You then use the originals to set breakpoints and step through code. 同时,Microsoft Edge 实际上是在运行缩小代码。Meanwhile, Microsoft Edge is actually running your minified code. 通过运行代码,你可以错觉运行生产中的开发网站。The running of the code gives you the illusion of running a development site in production.

在 DevTools 中运行源地图时,应该会注意到 JavaScript 未编译,并且它引用的所有单个 JavaScript 文件都显示出来。When running Source Maps in DevTools, you should notice that the JavaScript is not compiled and all of the individual JavaScript files it references are displayed. DevTools 中的源地图使用源映射,但基础功能实际上运行已编译的代码。Source Maps in DevTools is using source mapping, but the underlying functionality actually runs the compiled code. 任何错误、日志和断点都映射到开发人员代码,以便进行出色的调试。Any errors, logs, and breakpoints map to the dev code for awesome debugging. 实际上,它让你产生一种在生产中运行开发网站的错觉。So in effect it gives you the illusion that you are running a dev site in production.

在设置中启用源地图Enable Source Maps in settings

默认情况下启用源地图Source Maps are enabled by default,但如果您想要仔细检查或启用它们;First open DevTools, choose Customize and control DevTools \ (... ) > Settings., but if you want to double-check or enable them; first open DevTools, choose Customize and control DevTools (...) > Settings. 在首选项窗格的****源下,启用JavaScript 源映射On the Preferences pane, under Sources, turn on Enable JavaScript Source Maps. 还可以启用"启用CSS 源映射"。You may also turn on the Enable CSS Source Maps.

启用源地图

使用源地图调试Debugging with Source Maps

调试代码并启用源地图时,源地图显示在两处:When debugging your code and Source Maps enabled, Source Maps show in two places:

  1. 在控制台 \ (源的链接应该是原始文件,而不是生成的) In the console (the link to source should be the original file, not the generated one)
  2. 单步执行代码 \ (调用堆栈中的链接应打开原始源文件) When stepping through code (the links in the call stack should open the original source file)

@sourceURL 和 displayName@sourceURL and displayName

虽然 不是 Source Map 规范的一部分,但 允许您在使用 evals 时更轻松地 @sourceURL 进行开发。While not part of the Source Map spec, the @sourceURL allows you to make development much easier when working with evals. 帮助程序显示类似于 //# sourceMappingURL 属性,并提及源地图 V3 规范。The helper is displayed similar to the //# sourceMappingURL property and is mentioned in the Source Map V3 specifications.

通过在你的代码中包括以下特殊注释(已对此进行评论)可以命名 evals 以及内联脚本和样式,以便每个注释在 DevTools 中显示为更符合逻辑的名称。By including the following special comment in your code, which is evaled, you are able to name evals and inline scripts and styles so each appears as more logical names in your DevTools.

//# sourceURL=source.coffee

导航到以下页面。Navigate to the following page.

完成以下操作。Complete the following actions.

  1. 打开 DevTools 并导航到 "源" 工具。Open DevTools and navigate to the Sources tool.
  2. 在"命名代码:输入" 字段中 输入文件名。Enter in a filename into the Name your code: input field.
  3. 选择" 编译" 按钮。Choose the compile button.
  4. 将出现警报,显示来自 CoffeeScript 源的评估和。An alert appears, showing the evaluated sum from the CoffeeScript source.

如果展开" "子面板,现在将显示一个包含先前输入的自定义文件名的新文件。If you expand the Sources sub-panel you now display a new file with the custom filename you entered earlier. 如果双击查看此文件,则它包含原始源的已编译 JavaScript。If you double-click to view this file, it contains the compiled JavaScript for the original source. 但是,最后一行是 // @sourceURL 指示原始源文件的注释。On the last line, however, is a // @sourceURL comment indicating the original source file. 这有助于你在使用语言抽象时进行调试。This may help you with debugging while working with language abstractions.

使用 sourceURL

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,Meggin Kearney \ (Tech Writer) 和Paul Bakaus \ (Open Web Developer Advocate、Google:Tools、Performance、Animation 和 UX) 创作。The original page is found here and is authored by Meggin Kearney (Tech Writer) and Paul Bakaus (Open Web Developer Advocate, Google: Tools, Performance, Animation, and UX).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.