标签: source-maps

我刚刚意识到源映射 - 一个期待已久的功能.令人印象深刻的是,很多人聚在一起为咖啡脚本(浏览器,kickstart项目等......)做到了这一点.

我设置了一个小测试,所以我可以理解如何使用它...

CoffeeScript的

注意,这里有一个故意的错误,因为y没有定义

console.log 123

sq = (x)->
  x * x

console.log "thats how easy: "+sq y

来源地图

{
  "version": 3,
  "file": "test.js",
  "sourceRoot": "",
  "sources": [
    "test.coffee"
  ],
  "names": [],
  "mappings": ";AAAA;CAAA,CAAA,IAAA;CAAA;CAAA,CAAA,CAAA,IAAO;;CAAP,CAEA,CAAK,MAAC;CACJ,EAAI,QAAJ;CAHF,EAEK;;CAFL,CAKA,CAAA,IAAO,WAAK;CALZ"
}

使用Javascript

// Generated by CoffeeScript 1.6.1
(function() {
  var sq;

  console.log(123);

  sq = function(x) {
    return x * x;
  };

  console.log("thats how easy: " + sq(y));

}).call(this);
//@ sourceMappingURL=test.map

玉

html
  head
    script(src="test.js")
  body
    h1 Test Page

这一切似乎都有效,因为显示了咖啡脚本源,我甚至可以设置断点(但图形似乎没有显示,并且在javascript中设置断点的位置似乎有些不稳定).

我遇到的问题是,当出现错误时,控制台会报告javascript文件的行号.如何找出导致错误的咖啡脚本源文件的行？

我在OSX 10.8.2上使用Google …

我正在使用jQuery动态地将CSS标签添加到页面:

$('<style type="text/css"/>').text(css).appendTo(document.head);

在Chrome开发者工具中查看时,所有CSS都显示为"localhost",这并不总是有用:

是否有类似CSS的Source Maps,它可以让我识别调试器的CSS来源？

假设我的语言看起来像

print "Hello World"

这转化为

var $__Helpers = {
    print: function(s) {
        if (typeof s != 'string')
            throw new TypeError('String expected');
        console.log(s);
    }
};

$__Helpers.print("Hello World");

如果这种语言的用户这样做

print 5

通过$__Helpers.print说"String expected" 将抛出TypeError .我希望开发人员工具将该print 5行显示为此错误的原始调用.我知道如何让我的源地图显示一个看起来像的调用堆栈

transpiled_script.js:2
original_script.os:1

transpiled_script.js:2调用$__Helpers.print函数的脚本和行号在哪里,是调用original_script.os:1的脚本和行号print 5.我想让开发工具忽略顶部调用transpiled_script.js(这只是我的转换程序的一个实现细节)并且只显示来自原始脚本的调用(这是他们应该在自己的脚本中调试的部分).

我显然不能简单地映射transpiled_script.js:2到original_script.os:1因为print内部可能有多个调用original_script.os,所以它不是一对一的关系.

有没有办法做到这一点？

(我使用escodegen来生成我的源码和我的源码图(escodegen使用Node mozilla/source-map模块),所以有办法告诉escodegen或mozilla/source-map这样做是理想的,但我可以覆盖escodegen的输出,如果这是不可能的.)

我正在从我的网站记录javascript错误,但文件被最小化,所以我没有得到有意义的行号.不过,我确实有源地图.

是否有服务,脚本,npm模块或任何可以帮助我将缩小版本中的行号"翻译"为有用的东西？

我在生产中的缩小代码中有一些错误.我有源图不在生产中.我想(事后)使用源映射将我的堆栈跟踪转换为人类可读的堆栈跟踪.有没有人这样做过？

在我们的Django项目中,我们使用Gulp来编译我们的资产,然后使用UglifyJS来缩小它们.在整个过程中,我们正在生成源图,它们似乎正常工作.

当我们使用Django static模板标记来包含我们的缩小文件时,问题就来了.假设我们有一个缩小的JS文件ourapp.min.js.在我们的模板中,我们会写:

<script src="{% static 'ourapp.min.js %}"></script>

这将编译成如下:

<script src="/ourstaticroot/ourapp.min.0123456789ab.js"></script>

(0123456789ab文件内容的散列在哪里)

现在的问题是,虽然文件已被重命名,但我们的源图仍指向旧文件名,因此突然变得无效.如果我们需要调试这个页面(例如,使用Sentry)它找不到源文件,我们就会调试uglified文件,这就变成了一个更重要的任务.

有谁知道解决这个问题的好方法？我们希望继续使用Gulp作为我们的资产,并继续使用散列文件名,因为这可以防止因过时资产文件的缓存而导致的问题.

我部署的JavaScript应用程序引发了异常.Javascript代码被混淆了.我想知道,原始源代码中的哪一行引发了异常.未部署源地图,因此Chrome Devtools无法连接它们.我可能在我的localhost上有源映射.

所以基本上我想从我的机器添加源映射到浏览器,以便知道出现异常的行号.

我试着Add Folder to Workspace和Map to File System Resource.它没有帮助.在浏览器的控制台中可以看到异常,但它仍然指向混淆的javascript源,并且无法检测到所需的行号.

我可能做错了什么.任何帮助表示赞赏(包括额外的扩展或其他浏览器使用).

除了source maps在Chrome中启用之外,在我的gulpfile.js中,我根据这个答案进行errLogToConsole: true, sourceComments: 'map', sourceMap: 'sass'调用时使用它作为参数:sass

gulp.task('sass', function() {
  return gulp.src('../assets/styles/**/*.scss')
  .pipe(plumber({ errorHandler: onError }))
  .pipe(sass({errLogToConsole: true, sourceComments: 'map', sourceMap: 'sass'}))
  .pipe(autoprefixer())
  .pipe(gulp.dest('../dist/styles'))
  .pipe(browserSync.reload({
    stream: true
  }))
});

然而SCSS内容仍然没有出现在DevTools中.为什么？

注意:源映射注释确实显示在已编译的CSS中,如下面的屏幕截图所示

在我决定发布这个问题之前,我做了很多事情作为背景调查.所以,我的问题是:

- 我使用webpack v4.6.0和webpack-dev-server v3.1.3 - 它们可以很好地协同工作,但是现在我正在尝试为我的应用程序设置源映射,似乎devtool选项不起作用.

至少对我来说,我已经尝试并测试了列表中的每个选项:

• Webpack 4 - Sourcemaps:这个问题表明devtool: 'source-map'应该开箱即用,但对我来说情况并非如此
• 如何使webpack源码映射到原始文件:添加 devtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')到我的输出配置没有多大帮助,而不是client.js它为我显示index.js虽然
• https://github.com/webpack/webpack/issues/6400:这个不是我的问题的准确描述,通过尝试这里的方法似乎没有帮助我
• 我尝试使用webpack.SourceMapDevToolPlugin但它也不适用于我的设置,即使我删除devtools或将它们设置为false
• 我这里不使用UglifyJS插件
• 我知道webpack-dev-server现在处于维护状态,所以我尝试了webpack-serve,但是看起来源映射不适用于它
• 我曾尝试源地图支持包为好,但没有运气或者,作为有类似的情况在这里:

你知道这个问题是由一些PR修复还是你自己尝试解决？任何提示或帮助表示赞赏!

我想获得这里描述的输出,在blogpost中直接链接到我的文件和原始文件代码.

我的webpack.js

// webpack v4.6.0
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const stylish = require('eslint/lib/formatters/stylish');
const webpack = require('webpack');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    devtoolModuleFilenameTemplate: …

我有来自客户的性能分析记录，我可以在其中看到混淆的方法名称。

我有混淆的 JS 文件和源映射。

我希望在 Chrome 开发工具中打开性能记录后看到未混淆的方法名称。

不幸的是我不知道如何加载源地图。记录中的 URL 甚至指向一个域。

知道如何告诉 Chrome 使用驱动器中的特定源映射吗？