标签: source-maps

我正在 asp.net 中为我的 javascript 和 css 文件启用捆绑优化，如何启用 SourceMap 生成？我应该转移到其他迷你程序吗？

如果我使用 devtool: 'source-map' 它适用于 CSS：

但是，我的 JavaScript 变量名并不好玩：

所以，如果我使用 devtool：eval-source-maps。生活很美好——调试JS。但是我的 CSS 然后指向大 bundle-css 而不是单独的文件：

我怎么有我的蛋糕，也吃它？！我想在同一个构建过程中对 JS 使用 eval-source-map，对 CSS 使用 source-map。

这是我的 webpack 配置（在撰写本文时使用最新的所有内容）：

/* eslint no-console:"off" */
const {resolve} = require('path');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const {getIfUtils, removeEmpty} = require('webpack-config-utils');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// const OfflinePlugin = require('offline-plugin/runtime').install();

module.exports = (env) => {
    const …

我正在尝试使用 TypeScript (^2.9.2) 和 Webpack (^4.12.1) 从头开始​​设置我的新 Screeps（游戏）项目。如何正确设置源映射？我做了什么：

1. "sourceMap": true,在 tsconfig.json 中设置
2. devtool: 'inline-source-map',在 webpack.config.js 中设置。我想内联是 Screeps 的必需品吗？
3. 在 webpack 配置中设置loader: "source-map-loader",为test: /\.ts$/, enforce: 'pre',不丢失 TS 源映射。

在我的 main.ts 中，现在只是console.log(foo);导致：

ReferenceError: foo is not defined
    at Object../src/main.ts:98:13
    at __webpack_require__:20:30
    at eval:84:18
    at main:87:10
    at eval:105:4
    at Object.<anonymous>:2:143759
    at Object.r.run:2:144268```

Screeps 客户端控制台就是这种情况。在 Firefox 中，我只看到foo is not defined没有任何更具体的信息。

有什么办法可以/src/main.ts:1:13在堆栈跟踪中的某个地方获得（正确的行号）吗？这看起来似乎没有任何源映射，但在 main.js 构建的底部有一个：

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4vc3JjL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBOzs7QUFHQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBO0FBQ0Esa0RBQTBDLGdDQUFnQztBQUMxRTtBQUNBOztBQUVBO0FBQ0E7QUFDQTtBQUNBLGdFQUF3RCxrQkFBa0I7QUFDMUU7QUFDQSx5REFBaUQsY0FBYztBQUMvRDs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsaURBQXlDLGlDQUFpQztBQUMxRSx3SEFBZ0gsbUJBQW1CLEVBQUU7QUFDckk7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQSxtQ0FBMkIsMEJBQTBCLEVBQUU7QUFDdkQseUNBQWlDLGVBQWU7QUFDaEQ7QUFDQTtBQUNBOztBQUVBO0FBQ0EsOERBQXNELCtEQUErRDs7QUFFckg7QUFDQTs7O0FBR0E7QUFDQTs7Ozs7Ozs7Ozs7Ozs7QUNsRkEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxVQUFVLENBQUMsQ0FBQyIsImZpbGUiOiJtYWluLmpzIiwic291cmNlc0NvbnRlbnQiOlsiIFx0Ly8gVGhlIG1vZHVsZSBjYWNoZVxuIFx0dmFyIGluc3RhbGxlZE1vZHVsZXMgPSB7fTtcblxuIFx0Ly8gVGhlIHJlcXVpcmUgZnVuY3Rpb25cbiBcdGZ1bmN0aW9uIF9fd2VicGFja19yZXF1aXJlX18obW9kdWxlSWQpIHtcblxuIFx0XHQvLyBDaGVjayBpZiBtb2R1bGUgaXMgaW4gY2FjaGVcbiBcdFx0aWYoaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0pIHtcbiBcdFx0XHRyZXR1cm4gaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0uZXhwb3J0cztcbiBcdFx0fVxuIFx0XHQvLyBDcmVhdGUgYSBuZXcgbW9kdWxlIChhbmQgcHV0IGl0IGludG8gdGhlIGNhY2hlKVxuIFx0XHR2YXIgbW9kdWxlID0gaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0gPSB7XG4gXHRcdFx0aTogbW9kdWxlSWQsXG4gXHRcdFx0bDogZmFsc2UsXG4gXHRcdFx0ZXhwb3J0czoge31cbiBcdFx0fTtcblxuIFx0XHQvLyBFeGVjdXRlIHRoZSBtb2R1bGUgZnVuY3Rpb25cbiBcdFx0bW9kdWxlc1ttb2R1bGVJZF0uY2FsbChtb2R1bGUuZXhwb3J0cywgbW9kdWxlLCBtb2R1bGUuZXhwb3J0cywgX193ZWJwYWNrX3JlcXVpcmVfXyk7XG5cbiBcdFx0Ly8gRmxhZyB0aGUgbW9kdWxlIGFzIGxvYWRlZFxuIFx0XHRtb2R1bGUubCA9IHRydWU7XG5cbiBcdFx0Ly8gUmV0dXJuIHRoZSBleHBvcnRzIG9mIHRoZSBtb2R1bGVcbiBcdFx0cmV0dXJuIG1vZHVsZS5leHBvcnRzO1xuIFx0fVxuXG5cbiBcdC8vIGV4cG9zZSB0aGUgbW9kdWxlcyBvYmplY3QgKF9fd2VicGFja19tb2R1bGVzX18pXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLm0gPSBtb2R1bGVzO1xuXG4gXHQvLyBleHBvc2UgdGhlIG1vZHVsZSBjYWNoZVxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5jID0gaW5zdGFsbGVkTW9kdWxlcztcblxuIFx0Ly8gZGVmaW5lIGdldHRlciBmdW5jdGlvbiBmb3IgaGFybW9ueSBleHBvcnRzXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmQgPSBmdW5jdGlvbihleHBvcnRzLCBuYW1lLCBnZXR0ZXIpIHtcbiBcdFx0aWYoIV9fd2VicGFja19yZXF1aXJlX18ubyhleHBvcnRzLCBuYW1lKSkge1xuIFx0XHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCBuYW1lLCB7IGVudW1lcmFibGU6IHRydWUsIGdldDogZ2V0dGVyIH0pO1xuIFx0XHR9XG4gXHR9O1xuXG4gXHQvLyBkZWZpbmUgX19lc01vZHVsZSBvbiBleHBvcnRzXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLnIgPSBmdW5jdGlvbihleHBvcnRzKSB7XG4gXHRcdGlmKHR5cGVvZiBTeW1ib2wgIT09ICd1bmRlZmluZWQnICYmIFN5bWJvbC50b1N0cmluZ1RhZykge1xuIFx0XHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCBTeW1ib2wudG9TdHJpbmdUYWcsIHsgdmFsdWU6ICdNb2R1bGUnIH0pO1xuIFx0XHR9XG4gXHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCAnX19lc01vZHVsZScsIHsgdmFsdWU6IHRydWUgfSk7XG4gXHR9O1xuXG4gXHQvLyBjcmVhdGUgYSBmYWtlIG5hbWVzcGFjZSBvYmplY3RcbiBcdC8vIG1vZGUgJiAxOiB2YWx1ZSBpcyBhIG1vZHVsZSBpZCwgcmVxdWlyZSBpdFxuIFx0Ly8gbW9kZSAmIDI6IG1lcmdlIGFsbCBwcm9wZXJ0aWVzIG9mIHZhbHVlIGludG8gdGhlIG5zXG4gXHQvLyBtb2RlICYgNDogcmV0dXJuIHZhbHVlIHdoZW4gYWxyZWFkeSBucyBvYmplY3RcbiBcdC8vIG1vZGUgJiA4fDE6IGJlaGF2ZSBsaWtlIHJlcXVpcmVcbiBcdF9fd2VicGFja19yZXF1aXJlX18udCA9IGZ1bmN0aW9uKHZhbHVlLCBtb2RlKSB7XG4gXHRcdGlmKG1vZGUgJiAxKSB2YWx1ZSA9IF9fd2VicGFja19yZXF1aXJlX18odmFsdWUpO1xuIFx0XHRpZihtb2RlICYgOCkgcmV0dXJuIHZhbHVlO1xuIFx0XHRpZigobW9kZSAmIDQpICYmIHR5cGVvZiB2YWx1ZSA9PT0gJ29iamVjdCcgJiYgdmFsdWUgJiYgdmFsdWUuX19lc01vZHVsZSkgcmV0dXJuIHZhbHVlO1xuIFx0XHR2YXIgbnMgPSBPYmplY3QuY3JlYXRlKG51bGwpO1xuIFx0XHRfX3dlYnBhY2tfcmVxdWlyZV9fLnIobnMpO1xuIFx0XHRPYmplY3QuZGVmaW5lUHJvcGVydHkobnMsICdkZWZhdWx0JywgeyBlbnVtZXJhYmxlOiB0cnVlLCB2YWx1ZTogdmFsdWUgfSk7XG4gXHRcdGlmKG1vZGUgJiAyICYmIHR5cGVvZiB2YWx1ZSAhPSAnc3RyaW5nJykgZm9yKHZhciBrZXkgaW4gdmFsdWUpIF9fd2VicGFja19yZXF1aXJlX18uZChucywga2V5LCBmdW5jdGlvbihrZXkpIHsgcmV0dXJuIHZhbHVlW2tleV07IH0uYmluZChudWxsLCBrZXkpKTtcbiBcdFx0cmV0dXJuIG5zO1xuIFx0fTtcblxuIFx0Ly8gZ2V0RGVmYXVsdEV4cG9ydCBmdW5jdGlvbiBmb3IgY29tcGF0aWJpbGl0eSB3aXRoIG5vbi1oYXJtb255IG1vZHVsZXNcbiBcdF9fd2VicGFja19yZXF1aXJlX18ubiA9IGZ1bmN0aW9uKG1vZHVsZSkge1xuIFx0XHR2YXIgZ2V0dGVyID0gbW9kdWxlICYmIG1vZHVsZS5fX2VzTW9kdWxlID9cbiBcdFx0XHRmdW5jdGlvbiBnZXREZWZhdWx0KCkgeyByZXR1cm4gbW9kdWxlWydkZWZhdWx0J107IH0gOlxuIFx0XHRcdGZ1bmN0aW9uIGdldE1vZHVsZUV4cG9ydHMoKSB7IHJldHVybiBtb2R1bGU7IH07XG4gXHRcdF9fd2VicGFja19yZXF1aXJlX18uZChnZXR0ZXIsICdhJywgZ2V0dGVyKTtcbiBcdFx0cmV0dXJuIGdldHRlcjtcbiBcdH07XG5cbiBcdC8vIE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbFxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5vID0gZnVuY3Rpb24ob2JqZWN0LCBwcm9wZXJ0eSkgeyByZXR1cm4gT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsKG9iamVjdCwgcHJvcGVydHkpOyB9O1xuXG4gXHQvLyBfX3dlYnBhY2tfcHVibGljX3BhdGhfX1xuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5wID0gXCJcIjtcblxuXG4gXHQvLyBMb2FkIGVudHJ5IG1vZHVsZSBhbmQgcmV0dXJuIGV4cG9ydHNcbiBcdHJldHVybiBfX3dlYnBhY2tfcmVxdWlyZV9fKF9fd2VicGFja19yZXF1aXJlX18ucyA9IFwiLi9zcmMvbWFpbi50c1wiKTtcbiIsImNvbnNvbGUubG9nKCdJdCB3b3JrcycpO1xuIl0sInNvdXJjZVJvb3QiOiIifQ==

我的生产应用程序是在没有源映射的情况下部署的。

有没有办法在我的本地文件系统上为生产中的包获取生成的源映射，并将它们应用于 Chrome DevTools 中从我们的生产服务器提供的缩小代码？

我正面临哨兵的奇怪行为。我使用 sentry-webpack-plugin 将我的源地图上传到远程公司哨兵服务器。一切似乎都很好。 我在发布选项卡中的工件下看到源映射。

但问题是，在某些情况下，sourmaps 被正确映射，但在其他哨兵中显示缩小的错误代码并警告“Sourcemap 无效或不可解析”（即使出现相同的错误）

我做了一些研究，在哨兵论坛上有人指出这可能是因为上传工件时压缩了源地图。但是为什么在某些情况下它有效，而在其他情况下无效？

这是示例：一个错误在哨兵中出现两次，但第一次正确映射到源，第二次没有

有效映射：

来自哨兵的映射异常

无效映射：

来自哨兵的未映射异常

在 main.js 最后一行是：

//#sourceMappingURL=vendor.d5b6708d.js.map

我的源地图上传到哨兵，并从静态服务器中删除，通过 WebpackDeleteAfterEmit 插件提供 main.*.js。

我启用了 CSS 源映射，但 Google Chrome 的行为就像它们被禁用一样。在我查看的所有资源中，我需要做的就是在 DevTools 首选项中启用源映射。它显然在那里启用：

源映射位于我的 CCS 文件旁边，如下所示：

在 DevTools > Elements > Styles 中，只有 CSS 文件，没有 SCSS 或 SASS：

这是我在 Gruntfile.js 中的 grunt-contrib-sass 配置：

    sass: {
        dist: {
            files: [{
                expand: true,
                cwd: './src/',
                src: ['**/*.css', '**/*.scss', '**/*.sass'],
                dest: './dist',
                ext: '.css',
                sourcemap: 'auto',
            }],
            options: {
            }
        }
    },

该站点通过grunt serveOSX 提供服务，源映射由 grunt-contrib-sass 生成。

真正奇怪的是，我有 99% 的把握确定我第一次设置后就看到它正常工作了一次。在那之后我没有改变任何东西......

尝试调试的下一步是什么？我是否应该能够查看 Chrome 是否正在向.map文件发出（失败？）请求？我错过了什么吗？

更新：我想我已经确定地图没有被加载，因为 sourceMappingURL 不存在于编译的 CSS 中。我为此开辟了一个新问题。

我在我的项目中使用 Angular 7，有一个特定的依赖项有一些损坏的 Source Map 文件。我想禁用源映射，但仅针对该特定依赖项。

我发现有一个配置（在 angular.json 文件中）：

"vendorSourceMap": true

如果我将其更改为 false，我可以禁用该库以及其他几个库。

我只想禁用一个特定的依赖项。

是否可以？

我正在使用 Typescript 构建一个 Electron 桌面应用程序（使用 Chromium）。Chromium 开发工具似乎在错误的位置寻找源映射。

我在 Windows 上，应用程序使用 file://

生成的文件具有相对于 .js 文件位置的源映射位置。比如/myapp/dist/components/loginview.jshas sourceMappingURL=loginview.js.map，映射文件和 JS 文件在同一个目录下。

然而，Chromium 正在应用程序的根目录中寻找映射文件（以及当前加载的 HTML 文件）。对于上面的示例，它发出以下警告：

DevTools failed to parse SourceMap: file:///myapp/dist/loginview.js.map

在这种情况下，我希望开发工具查看“file:///myapp/dist/ components /loginview.js.map”。

我在 tsconfig.json 中尝试了各种选项，包括 mapRoot 和 rootDir，但似乎没有任何改变生成的 URL。

我不确定解决方案是否在于配置打字稿以在源映射 URL 中发出子文件夹名称，或者配置铬来解析相对于 js 文件的 URL。我一直无法找到一种方法来做到这一点。

我正在尝试使用 Mozilla 的源地图库将转换后的文件中的位置映射回其原始位置。我发现了一种情况，源地图找不到有效位置，但我不明白为什么。

这是我的源文件

sub main()
end sub

出于这个问题的目的，我正在创建一个源映射，该映射可以完美地模拟源文件而无需转换。因此，理论上任何位置请求都应该返回完全相同的位置。但是，这就是我现在在以下代码片段中看到的内容。在这种情况下，{line: 2, column: 1}返回{line: null, column: null}，但{line: 2, column: 0}正确返回{line: 2, column: 0}。

我究竟做错了什么？

sourceMap.SourceMapConsumer.initialize({
  "lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm"
});

//create a source map
let codeAndMap = new sourceMap.SourceNode(null, null, 'main.brs', [
  new sourceMap.SourceNode(1, 0, 'main.brs', 'sub main()'), '\n',
  new sourceMap.SourceNode(2, 0, 'main.brs', 'end sub')
]).toStringWithSourceMap();

sourceMap.SourceMapConsumer.with(codeAndMap.map.toJSON(), null, (consumer) => {
  console.log('column 0', JSON.stringify(

    //returns {line: 2, column: 0}
    consumer.originalPositionFor({
      line: 2,
      column: 0, …

使用parcel 设置的普通香草打字稿开发环境。

我在浏览器（Edge/Chrome）中没有 SourceMap：

DevTools failed to load SourceMap: Could not parse content for http://localhost:1234/index.7cacc1f4.js.map: Unexpected token < in JSON at position 0

页面加载后的包裹服务日志：

$ parcel serve ./src/index.html --log-level verbose
?? Server running at http://localhost:1234
? Built in 3.15s
@parcel/reporter-dev-server: Request: localhost:1234/
@parcel/reporter-dev-server: Request: localhost:1234/index.7cacc1f4.js
@parcel/reporter-dev-server: Request: localhost:1234/index.7cacc1f4.js.map
@parcel/reporter-dev-server: Request: localhost:1234/favicon-32x32.232ca4f5.png

SourceMap 文件在 dist 中：

$ ls dist
__                              favicon-32x32.232ca4f5.png      index.453c97a0.js.map
apple-touch-icon.8e36bc09.png   favicon-32x32.a91f4dac.png      index.7cacc1f4.js
apple-touch-icon.e80caf23.png   index.031565ba.js               index.7cacc1f4.js.map
favicon-16x16.bc10cd1f.png      index.031565ba.js.map           index.html
favicon-16x16.d41cdce3.png      index.453c97a0.js

它似乎parcel serve正在返回索引页而不是 SourceMaps：

$ curl -v …