标签: source-maps

我们正在通过grunt-contrib-requirejs使用uglify2-compressor为缩小来源的平板电脑提供Cordova WebApp.我们生成用于调试的源映射,通过KitKat Android平板电脑上的远程调试,使用chrome桌面浏览器完美运行.

现在我们希望将客户的错误报告发送到我们的服务器.Android WebView似乎并不关心我们的源地图.因此,我们收到错误消息,如"第1行,字符1231231" - 不是很有帮助...

问题是:是否可以使用Android(和iOS)Webview的源映射可能使用Cordova插件,或者我们是否必须等待更新(Chrome和Firefox桌面能够解析地图...)和ship un-minifies代码,以便我们能够获得发生错误的行号？

有没有办法直接为ES6代码提供源映射？即我编写ES6代码,用例如es6-transpiler进行转换,然后将ES5缩小并合并到一个文件中.但是我希望在原版ES6中有源代码.可能吗？

任何转录器/ minifiers和构建工具(grunt,gulp)就足够了.

我根本不同意"偏离主题"的决定,因为问题是关于某些实际问题.尽管如此,我今天提供了一个aswer:

https://github.com/azu/multi-stage-sourcemap

我在gulpjs版本中通过gulp-less使用LESS编译器.我已经启用了sourceMap生成,它有点工作,有适当的文件名和行号.

使用源地图生成LESS的gulp线非常简单:

var less = require('gulp-less');

// [...]

gulp.src('web/css/**/*.less')
    .pipe(less({
        sourceMap: true
    }))
    .pipe(gulp.dest('dist/css'));

唯一的问题是源映射包含原始.less文件的URL,它是作为我的文件系统的绝对路径生成的,例如/Users/myuser/projects/project/web/css/myfile.less.

在开发过程中,我通过Apache为站点提供服务.当我使用Chrome DevTools打开网站时,我可以检查元素,并且源地图正常工作,因为我可以myfile.less在"样式"面板上看到包含正确的行号.但是,Chrome正在尝试加载较少的文件,并且使用完整路径是源映射输出,但假设它是我的站点的相对URL,因此它尝试加载http://localhost/Users/myuser/projects/project/web/css/myfile.less不存在的文件.

我尝试使用工作区来修复它,但没有真正管理.这个设置有什么问题吗？我错过了什么吗？

我正在使用Chrome并启用了源地图.Coffeescript正在编译JS,其源代码嵌入在.js文件的底部.我可以在开发人员工具的源选项卡中看到*.coffee代码.

当控制台出错时,我希望能够点击并跳转到coffeescript代码.目前它只跳转到.js代码,没有办法从那里转到.coffee代码.

这支持吗？如果是这样,我怎样才能使它工作？

我有一个使用的Ember应用程序ember-cli,我正在使用ember-qunit测试适配器编写我的测试,并testem按照ember-cli文档中的说明在浏览器中运行它们.虽然当我对我的应用程序感兴趣时,谷歌浏览器中的调试工作正常,但在运行测试时我无法使用许多调试功能,如断点.

我经常遇到一个问题,即我的测试失败,尽管我的实际应用程序似乎正常工作,并且在我的测试运行时调查我想要逐步执行代码的问题.

但当我进入我出现的代码时,vendor.js我只是看到了以下内容vendor.js:

// Please wait a bit.
// Compiled script is not shown while source map is being loaded!

这两行是文件的第6行和第7行.前面的行是空白的,这两行是文件中的最后一行.调试器将文件的第一行突出显示,就好像它是源中的当前位置,但由于某种原因它无法显示源.

我可以继续执行代码,但我看不到任何东西.

但是,如果我vendor.js在开发人员工具源文件列表的源列表中找到它,那么它将作为单独的源选项卡打开,我可以看到我的所有代码.在这一点上,我有两个标签vendor.js,一个标签包含我所有的供应商资产,另一个标有上面引用的那些标签.

我猜测我的测试服务方式和我的应用程序在开发环境中的服务方式之间存在一些不同之处.

我使用以下版本的东西:

ember 1.9.1
ember-data 1.0.0-beta.14.1
ember-cli 0.1.9
qunit 1.17.1
ember-qunit 0.2.0
testem 0.6.33

虽然我已经开了一堆,但我并没有任何关于问题源于何处的线索.也许它与如何testem运行测试有关？或者它可能是我的测试中包含的东西有一个混乱的源地图？

我感谢任何帮助或想法.

我正在开发一个Angular应用程序.在尝试调试我的指令的链接功能时,我遇到了Chrome关于源地图的问题.

在页面的第一次加载(由Gulp和BrowserSync触发)时,一切都很好,花花公子:我可以看到浏览器化文件以及地图中的单个源文件.控制台中出现错误,因此我单击调用跟踪来探索它,并在源文件中显示正确的代码行 - 正如预期的那样.

麻烦开始于在我的代码中设置断点并重新加载浏览器以进行调试.执行在断点处停止 - 好的 - 但显然还没有加载源文件.相反,之前的源文件,友好的绿色字母文字告诉我:

请稍等一下.加载源地图时不显示编译的脚本!

那是正确的.我可以在sources选项卡中看到它确实没有加载,但没有任何进一步发生(可能是由于断点).

我之前从未有过这种行为.我认为这不是由于我的Browserify源地图,而是我怀疑这是Chrome的一个问题.

在Firefox中,一切正常.但我更喜欢Chrome而不是Firefox,所以......

你们有没有遇到过这个问题,或者知道可能导致这个问题的原因是什么？

我正在使用的是版本41.0.2272.118的Chrome版本(当前提出此问题的版本).

我有一个库,从babel转换成预编译的源图:

node_modules/mylib:
index.js
index.js.map
mapTokens.js
mapTokens.js.map
plainObject.js
plainObject.js.map
Translator.js
Translator.js.map

当我在我的项目中使用这个lib时,如何教webpack解析这个地图？目前webpack仅为主项目构建源映射,而不是为node_modules中的库构建.

我是javascript和SASS源地图的忠实粉丝; 但是,我不想将源映射加载到生产中,原因有两个:原始源代码可用,并且它不能很好地利用带宽.

但是,有时候,生产中需要调试(我们都看到了前端的生产错误).

有没有办法让我在事后指定源地图？例如,我可以在本地或在VPN锁定服务器后面或甚至在用户不可见的文件夹中提供源地图.我可以在运行时或指定设置并重新加载页面时这样做.(实际上,如果我能坚持那个甚至更好的设置).

我正在尝试在具有源映射的已转换代码中放置断点,但每次按下一行来放置断点时,它都会立即取消.

像这儿:

这是webpack配置的问题吗？我应该发布吗？

我正在为Chrome开发一个Webextension，代码是用Typescript编写的，所以我需要源映射。

该扩展程序与ParcelJS捆绑在一起，但我认为我的问题与捆绑器无关。

从Chrome 70更新到72后，源地图不再起作用。作为最小的示例，我可以使用以下代码在MacOS 14和Ubuntu 18.04，Chrome 72上重现该问题。

这个问题似乎只限于Chrome72。不幸的是，在撰写本文时，这是当前的稳定版本：

• 73.0.3683.27版（官方内部版本）beta（64位），没问题
• 版本71.0.3578.98（Official Build）稳定的Chromium 64位，没问题
• 版本72.0.3626.96（正式内部版本）（64位）不起作用

为了方便起见，我建立了一个github仓库。克隆它并运行以下命令（对不起，我不确定是否需要在全球范围内安装包裹捆绑器。为方便起见，我总是这样做）

git clone https://github.com/lhk/contentscript_smap.git
cd contentscript_smap
# npm install -g parcel-bundler 
npm install -d
parcel build manifest.json

要遵循Stackoverflow规则（如果您链接到代码，则还应该在问题中包含它，该链接有时可能会断开）：

content.ts：

console.log('log from typescript')

manifest.json：

{
    "manifest_version": 2,
    "name": "sourcemaps messed up",
    "version": "0.0.1",
    "description": "",
    "author": "",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "./content.ts"
            ]
        }
    ],
    "permissions": [
        "activeTab",
        "<all_urls>"
    ]
}

package.json：

{
  "name": "contentscript_smap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { …