标签: source-maps

我有一个构建脚本,通过uglifyjs运行我的所有代码,做一些花哨的缓存,最终运行eval( code )在一些JavaScript文件上.

我正在尝试使用源映射启动和运行整个过程,但只要我正在使用,我似乎无法使其工作eval.如果我直接使用<script src="...">它链接到文件工作正常.

在我的eval代码中,我有:

code, blah blah blah
//@ sourceMappingURL=/cache/618a67795c7460184bd9b99020cbb9fd.map

然后在那个.map文件中,我有:

{
      "version"  : 3
    , "file"     : "618a67795c7460184bd9b99020cbb9fd.map"
    , "sources"  : ["/js/Parallax-JS/js/parallax-2.js"]
    , "names"    : [
          "a"
        , "bunch"
        , "of"
        , "variable"
        , "names"
    ]
    , "mappings" : "... LONG MAP ..."
}

我试过把它放在//@ sourceURL=最后,至少给了我正确的文件名,但仍然没有可读源.

有任何想法吗？在Chrome 25(dev)和26(canary)中进行测试

我记得曾经在某个地方找到了一个源地图查看器,它并排显示了源地图和源地图(我也想到了编译后的代码),让你滚动鼠标来查看源地图的不同部分.

我不能为我的生活现在找到它,但我真的想用它来验证我的源图的完整性(无法判断地图中的错误还是chrome中的错误).

谁知道我在说什么？

我将 Gulp 与 Browserify 一起使用，并将 Babelify 用于 ES6 和 JSX-React 转译。尽管网上有很多例子，但我无法弄清楚如何生成指向原始预编译 ES6/JSX 文件的源映射。

这是我当前的 gulp browserify 任务，它基于此示例：

gulp.task('browserify', function() {
  browserify({ entries: './src/js/main.jsx', extensions: ['.jsx'], debug: true })
    .transform(babelify, {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist/js'));
});

所有这些都是创建一个main.js.map文件，该文件似乎与捆绑main.js文件具有完全相同的内容。在 Chrome 中，它看起来像这样：

但我想调试原始源代码.jsx和.js（使用 ES6 语法）文件。它们在我的 IDE 中看起来像这样：

我怎样才能做到这一点？

我想我使用Xcode正确创建了源地图。需要这个用于生产构建。

我补充说：

react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap/sourcemap.js

到Xcode中的Bundle React Native code and imagesin build phases，以生成似乎有效的sourcemap。

但是，当尝试使用以下代码来分析带有行号和列号的源映射时，我没有得到正确的结果

var sourceMap = require('source-map');
var fs = require('fs');

// read source-map, should be new for every build
fs.readFile('../my-app/src/sourcemap/sourcemap.js', 'utf8', function (err, data) {
    var smc = new sourceMap.SourceMapConsumer(data);

    // replace line and colum numbers with line/col from error output
    console.log(smc.originalPositionFor({
        line: 105132,
        column: 98
    }));
});

我正在使用Xcode的堆栈跟踪作为测试，但我得到了null。Xcode部分输出：

2016-04-26 17:50:00.631 [error][tid:com.facebook.React.JavaScript] Can't find …

数据URI是否有默认字符集？我阅读了规范，但没有看到。

例如，如果我有一个源映射的数据URI，希望可以在浏览器中对其进行可靠地解释，那么可以忽略字符集吗？

//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJza...

与

//@ sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJza...

我在GitHub问题中看到人们在没有显式的情况下在源映射文件中使用汉字时遇到了问题charset=utf-8。因此，如果有一个默认值（或者至少，如果我们可以期望浏览器选择了一个默认值），那么似乎不是一个默认值utf-8...

我有一个 Aurelia TypeScript 项目，其中我编译的 JavaScript 文件进入.../wwwroot子文件夹，原始打字稿文件位于.../src. 我试图使用VS代码在Chrome扩展调试断点，但不打，当我打开diagnosticLogging中launch.json的映射的源是不正确：它看在.../wwwroot/src/file.ts来代替.../src/file.ts。

我试图解决这个问题，sourceMapPathOverrides但没有成功。看来我无法匹配我的 sourceRoot。

我试过这个：

"webRoot": "${workspaceRoot}/wwwroot",
"sourceMapPathOverrides": {
    "/src/*": "${workspaceRoot}/src/*"     
},

这是用于查找源的调试控制台输出login.js：

›SourceMaps.loadSourceMapContents: Reading local sourcemap file from ...\wwwroot\dist\login.js.map
›SourceMap: creating for ...\wwwroot\dist\login.js
›SourceMap: sourceRoot: /src
›SourceMap: sources: ["login.ts"]
›SourceMap: webRoot: .../wwwroot
›SourceMap: resolved sourceRoot /src -> ...\wwwroot\src
›SourceMaps.scriptParsed: ...\wwwroot\dist\login.js was just loaded and has mapped sources: ["...\\wwwroot\\src\\login.ts"]

注意：三个点...代表我在磁盘上删除的项目根目录路径。

我如何使用sourceMapPathOverrides有它查找login.ts的.../src/？ …

我在VS 2017上创建了一个新项目.我正在使用webpack捆绑JS文件.我的webpack.config.js文件是 -

module.exports = {
    entry: "./app.js", // bundle's entry point
    output: {
        path: __dirname + "/dist", // output directory
        filename: "index_bundle.js" // name of the generated bundle
    },
    devtool: "source-map"
};

我正在尝试从visual studio调试chrome.如果我在index_bundle.js文件上放置一个断点 - 它运行良好,它在断点处停止,它甚至将它映射到正确的文件.该问题时,我尝试把一个破发点上的原始JS文件出现.例如app.js - 它会尝试将断点放在bootstrap 14248a9c8b87e0f9032f文件中 - 这是错误的文件.我认为VS在阅读地图文件时遇到了问题.这是我创建的地图文件:

{
  "version": 3,
  "sources": [ "webpack:///webpack/bootstrap 14248a9c8b87e0f9032f", "webpack:///./funcs.js", "webpack:///./app.js" ],
  "names": [],
}

好像它试图将断点放在原始文件上按下的相对行上的bootstrap文件中.(例如,如果我要使用app.js条目交换地图文件上的引导条目 - 它似乎将断点放在正确的位置) (顺便说一句,我没有把所有的地图文件内容 - 它是太长了,没有把map,sourceContent,file和sourceRoot条目放到

我正在努力调试Closure Compiler编译的js文件及其相应的源映射文件（问题：关联文件的源代码未显示在Chrome / firefox中）。

Closure Compiler是否有办法将源映射“内联”放在已编译的js文件中（而不是生成单独的源映射文件）？

如果不是，是否可以修改已编译的js文件，以用源地图内容替换源地图链接？

我正在为现有项目设置一个Webpack构建过程,并且已经遇到了源映射的一些问题.

我在用devtool: 'eval-source-map',.如果浏览器中发生错误,则堆栈跟踪中的每个文件/行号都指向压缩到Webpack包中的单行的文件.

例如,堆栈跟踪的第一行可能如下所示:

未捕获的错误:foo

在child.initialize(eval at(http://127.0.0.1:8000/js/dist/index.js:1270:1),:45:10)

单击文件名/行号会将包中的链接到Webpack所包含的"包含"错误发生的文件所在的行.看起来像这样:

/* 223 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
// Below is the line it points to, and it goes on to have the entire file on the same line
eval("/* WEBPACK VAR INJECTION */(function(Backbone, $, _) { ... 

但是整个文件内容都在这一行上,所以这完全没用.

即使我将我的Webpack配置修改为这样,也会发生这种情况:

var path = require('path'),
    webpack = require('webpack');

module.exports = {
    entry: {
        'indexhead': './static/js/main.js',
        'accounthead': './static/js/accountManager.js'
    },
    output: {
        path: path.join(__dirname, 'static/js/dist'),
        filename: '[name].js'
    },
    devtool: …

我一直在努力让我的源地图在我的应用程序中运行很长一段时间.我已经设定

devtool:  'source-map',

在webpack配置中,但它们在Chrome devtools中仍然不可用.

我使用我的FE Stack推了一个非常简单的应用程序希望有人可以识别问题,无论是webpack,angular还是其他库.https://github.com/coreysnyder/Angular-Webpack3-Seed

以下是我正在运行的版本:

{ 
  CoreyApp: '1.0.0',
  npm: '4.4.4',
  ares: '1.10.1-DEV',
  http_parser: '2.7.0',
  icu: '57.1',
  modules: '48',
  node: '6.9.0',
  openssl: '1.0.2j',
  uv: '1.9.1',
  v8: '5.1.281.84',
  zlib: '1.2.8' 
}
OSX 10.12.6