标签: source-maps

我正在visual studio 2013中设置一个新的TypeScript项目.

我可以在我的VS项目上选择生成源映射.我可以选择为typescript文件指定根目录,并为未选中的源映射文件指定根目录.

我可以选择Chrome Dev工具来检查JS源图.

在我生成的app.js文件的底部,我看到:

//# sourceMappingURL=app.js.map

那个文件存在.

我没有看到在网络窗格中下载源映射,当我在源窗格中打开.ts文件时,我只看到一个空白文件.

有任何想法吗？谢谢!

我想调试从已babel编译的ES6文件运行的节点应用程序.我有一个src文件夹中的ES6源代码和文件夹中的babel ES5等效项build.

Project root
|
| build
| > ES5 Compiled files
|
| src
| > ES6 Source files

我的目标:将断点直接放在我的ES6源代码中.

我已经生成了正确的源映射,我做了一个节点调试配置,运行ES5主文件,项目根目录设置为工作目录.我在ES5编译文件中设置断点时可以中断,它会自动显示我的ES6源.

但是我想直接在ES6源中放置断点.

这甚至可能吗？

-

> 2015-10-11编辑<

当我使用绝对值时,源映射现在可以很好地使用@ mockaroodev的配置sourceRoot!

然而,调试仍然被打破:踩到一条线有时会让我处于意想不到的地方.似乎当行require以某种方式暗示非内部(非本机)时,调试器将在所需内容的末尾中断.这非常烦人!

我在Linux上使用Webstorm 10.0.4并将babel和sourcemaps升级到最新版本.

有人也遇到过这个问题吗？

在Google Chrome更新之前,我在网络标签上的Chrome Devtools中看到了源地图文件.现在,在更新到版本后43.0.2357.134 m我没有看到它们.

也许我的代码错了？或者有意隐藏那些源地图？

当我在JS代码上出错时,我有这种堆栈跟踪:

Error while processing route: admin.subscriptions/edit The adapter operation was aborted Error
    at n.i (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1375)
    at n (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1600)
    at u (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:4777)
    at i.c.error (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:8222)
    at u (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:17397)
    at Object.fireWith [as rejectWith] (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:18168)
    at r (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:22154)
    at XMLHttpRequest.<anonymous> (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:26964)
    at XMLHttpRequest.r (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:50:30564)

正如您所看到的,它是缩小的文件,它似乎不使用源映射文件.源映射文件运行良好.它在Chrome和Firefox上执行此操作.

我怎样才能有更好的堆栈跟踪？

有没有人有这个成功？

使用grunt-contrib-uglify生成的源地图时,Chrome/Safari中的调试器不会显示未编码的变量名称.源代码显示和调试正确.我已经验证源映射包含变量名称.这是uglify中的错误吗？

原始来源:

// two

function two()
{
    var test = "test";

    console.log("this is a " + test);
}

生成的来源:

function two(){var a="test";console.log("this is a "+a)}
//# sourceMappingURL=all.min.js.map

来源地图:

{
    "version": 3,
    "file": "all.min.js",
    "sources": ["../src/two.js"],
    "names": ["two","test","console","log"],
    "mappings":";;AAEA,QAASA,OAEL,GAAIC,GAAO,MAEXC,SAAQC,IAAI,aAAeF",
    "sourceRoot":"../"
}

我做了一些源+地图连接和结果在Firefox和Chrome中工作,但甚至没有从MS Edge和IE11中的webserver请求bundle.js.map.

实际JS文件由http:// localhost:8080/bundle.js提供

bundle.js以行结尾:

//# sourceMappingURL=bundle.js.map

尝试两个结束它与新线和没有,在两种情况下都不起作用.是否有一些清单要查看甚至一些"验证者"？

现在CoffeeScript支持新的Source Map热点,我想知道我是否也可以在我的浏览器中使用源映射,但在开发nodeJS应用程序时在命令行上使用.

我希望JS编译器给我更多有用的错误跟踪,其中的行实际上与我的coffeescript文件匹配,而不是编译的JS文件.

.css.map除了CSS文件之外,如何编译LESS文件以输出源映射文件()？有没有办法在命令行(NodeJS lessc)和任何基于GUI的程序上执行此操作？

我正在使用grunt 0.4.2和grunt-contrib-less 0.9.0.我希望将LESS编译成支持源映射的CSS.

我的LESS文件在public/less,并且主要文件被调用main.less.

编译public/less/main.less成public/css/main.css工作,但源地图不起作用.

我的Grunt配置有什么问题？

{
    less: {
        dev: {
            options: {
                compress: true,
                yuicompress: true,
                optimization: 2,
                sourceMap: true,
                sourceMapFilename: "public/css/main.css.source-map.json", //Write the source map to a separate file with the given filename.
                sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
                sourceMapRootpath: "/"//Adds this path onto the Less file paths in the source map.
            },
            files: {
                "public/css/main.css": "public/less/main.less"
            }
        }
    },
    watch: …