标签: source-maps

最近chrome停止显示Source Maps.

我的项目有一些突破,现在使用新版本的gwt和chrome我没有在源标签中看到java源代码.

我正在使用超级开发模式.我从Code Server收到的编译文件(*.cache.js)包含Source Maps的标题:

X-SourceMap:/sourcemaps/Simulation/gwtSourceMap.json

代码服务器不会打印它已发送源映射(之前为止),只是编译成功

我有:gwt版本2.5.0 Chrome版本25.0.1364.172 Ubuntu 12.04 LTS(但问题也在Windows和MacOS中重现)

源映射对于调试最小化的脚本或翻译语言(例如CoffeeScript)非常有用,但浏览器为您提供的输出很少,可以解决为什么映射不起作用的问题.有没有人有一个清单,可用于查找映射出错的位置.现在我的设置在我的本地开发环境中工作,但是当我尝试将它部署到我们的登台服务器时"它不起作用".

我在本地和登台环境之间验证的内容是相同的:

1. 在检查器设置中启用了源映射
2. package.min.js文件由/ js提供
3. package.min.js包含相同的//@ sourceMappingURL=package.min.js.map行
4. 由uglify-js2生成的缩小的源+源映射
5. 可以在/ js中访问原始文件

我可以看到的一个区别是生成的源映射的大小略有不同,并且sourcemap散列的sources属性中的文件具有略微不同的顺序.但是源图非常大,所以验证它实际上并没有显着不同是不容易的.

到目前为止,在GWT super dev模式下调试似乎是一个真正的痛苦.如果有任何错误,则没有堆栈跟踪,只是在chrome控制台中给出了一个神秘的消息.有没有办法让所有错误打印堆栈跟踪,比如开发模式？

我相信我已经有源地图,因为如果我在Chrome的开发工具中找到Sources,我可以看到我的java类的源代码.

由于sources属性中的问号条目,我正在使用的Kendo UI的JS源映射无法在Chrome中正确映射.Chrome会尝试加载js/src/js/?,只返回目录列表.之后,调试器指向(index):9所有缩小脚本的引用.

{ 
  "version": 3, 
  "file": "kendo.core.min.js", 
  "sources": [
    "?", 
    "kendo.core.js"
  ], 
  "names": [
    "f", 
    "define", 
    "$", 
    "undefined", 
    "..."
  ], 
  "mappings": "CAAA,SAAUA,EAAGC,QACTA,...", 
  "sourceRoot": "../../src/js/"
}

问号是什么意思？是否有必要或应该将其删除以使源地图正常运行？

我已经尝试了谷歌搜索,并且有关于A-to-B源地图如何工作的一些很好的信息,但是我找不到任何关于A到B到C源地图的后勤解释.

例如,Browserify它可能有不同类型的输入文件(如main.js,module-1.coffee,module-2.es6),并使用变换(coffeeify,6to5ify)来修改数据的方式,最终bundle.js包含在源地图评论一个巨大的内联数据URI.它的工作原理 - 如果某行输出bundle.js错误,那么devtools会向我显示原始源文件和行号,即使它在CoffeeScript模块中也是如此.

任何人都可以帮我理解这个的后勤...所有的源图都会在最后被"折叠"成一个源图吗？或者浏览器devtools是否必须遍历源映射树,直到找到没有源映射注释的文件？或者它以其他方式工作？

(也许这些东西已经有很好的记录,我只是在谷歌搜索错误的条款？)

我当前的webpack.config档案

module.exports = {
    entry: "./entry.js",
    output: {
        devtoolLineToLine: true,
        sourceMapFilename: "./bundle.js.map",
        pathinfo: true,
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    },
};

我在这里阅读https://webpack.github.io/docs/configuration.html,发现以下内容:

output.sourceMapFilename

[file]被JavaScript文件的文件名替换.

[id]被块的id替换.

[hash]被编译的哈希替换.

我已经在上面添加了它,但是当我的webpack手表运行时,我看不到地图文件？

这是怎么做到的？

有时我们想从生产服务器获取源图.但我们只希望开发人员获得这些源图,因此会有一些策略可以避免任何其他人获取源图,例如限制源图请求的IP.

当源图不可用时,Chrome和Firefox将不会显示任何错误消息.但Safari将为这些源图显示403/404错误.

我的问题是:有没有办法让Safari不显示这些消息？

我需要将JSON指针定义的JSON(或JavaScript对象)中的位置映射到JSON文本文件中的位置{line,column}.是否有任何现有的JavaScript库可以做到这一点？编写这段代码会有点单调乏味......

例如,如果我有一个JSON文件(文本):

{
  "foo": [
    {
      "bar": 1
    }
  ]
}

然后给出JSON指针,/foo/0/bar我需要得到{line: 4, column: 7}结果.

如果此JSON文件中存储了等效的JSON值:

{"foo":[{"bar":1}]}

那么相同的JSON指针的结果应该是{line: 1, column: 10}.

我在我的解决方案中有一组打字稿文件,我正在使用Visual Studio 2017中的typescript功能将这些文件编译为JS.我正在使用tsconfig.json文件.

我能够在VS或tsconfig中捆绑输出JS文件.

我可以使用WebEssentials缩小和映射*bundle.js.min回来*.bundle.js

在VS2017中编译,捆绑,缩小和映射的正确顺序是什么？

- project.csproj
  - scripts //output files
    - my.bundle.js
    - my.bundle.min.js
    - my.bundle.min.js.map
  - src //input files
    - mytypes.ts
    - mylogic.ts
    - mybaselogic.ts

(注意:我不想将WebPack,Babel或Grunt的负担添加到我的解决方案中)

angular.json只提供打开/关闭源代码生成的选项,但默认情况下它位于单独的文件中.

tsconfig.json还提供了inlineSources选项,但angular-cli忽略了它.

有没有办法告诉angular-cli在.js中写源代码？