标签: source-maps

关于源映射,我在chrome中遇到了一个奇怪的行为(build 181620).在我的应用程序中,我使用缩小的jquery,登录后,我开始在服务器日志文件中看到"jquery.min.map"的HTTP请求.这些请求缺少cookie头(所有其他请求都没问题).这些请求甚至没有暴露在开发人员工具的网络标签中(这不会让我感到烦恼).

关键是,这个应用程序中的js文件只能用于登录客户端,因此在此设置中,源映射要么不起作用,要么我必须将源映射的位置更改为公共目录.

我的问题是:这是一个理想的行为(意思是 - 源地图请求不应该发送cookie)或者它是Chromium中的错误？

我正在尝试使源图在我使用Grunt和UglifyJS Grunt任务时发挥出色.

这是当前的任务:

uglify: {
  dist: {
    options: {
      sourceMap: function(path) {
        return path + ".map";
      },
    },
    files: {
      'dist/video.min.js': [ 'javascripts/video.js' ]
    }
  }
}

有什么问题？

生成了源地图,但Chrome正在错误的位置搜索源地图(即dist/dist/video.min.js.map).我知道这是因为我在控制台中得到404.

所以我编辑dist/video.min.js并改为sourceMappingURL指向正确的位置.现在,源图已加载,但正在寻找完全错误的地方的video.js :( dist/javascripts/video.js那又是dist!)

所以基本上现在我没有任何想法,只是戳了gruntfile没有运气.

有任何想法吗？谢谢!

我似乎无法使用gulp-ruby-sass获取源代码并正常工作.他们会生成,我可以在我的css文件末尾看到评论,但Chrome仍然无法读取它们,尽管在设置中启用了选项.

谢谢你的帮助,

var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-ruby-sass');

gulp.task('sass', function(){
  gulp.src('./assets/scss/main.scss')
      .pipe(sass({noCache: true, sourcemapPath: '../scss'}))
      .on('error', function(err){console.log(err.message);})
      .pipe(gulp.dest('./assets/css/'));
});

gulp.task('watch',function(){
  gulp.watch('./assets/**/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);

我在生产中有一个最小化的文件,有一个记录错误的错误处理程序,以及在我缩小文件时生成的源映射,但是我无法将错误映射到我的源文件,因为错误是在日志中并且不会出现在chrome或firefox中,其中很容易消耗缩小的文件和源图.是否有应用程序或工具将使用我生成的源地图将缩小文件中的错误报告转换为原始未分类文件中的位置？所以我要完全清楚

dist.min.js

它由几个js文件组成,然后用uglify.js缩小.我有

dist.min.js.map

这是uglify缩小文件时生成的mapfile.我需要做的是接受错误

ERROR: Uncaught TypeError: Cannot call method 'indexOf' of undefined, dist.min.js:1 "TypeError: Cannot call method 'indexOf' of undefined at distmin.js:1:21815 at ab.event.dispatch (dist.min.js:3:25564) at q.handle (dist.min.js:3:22314)"

并找出我的原始源代码中实际发生错误的位置.我知道如何在Chrome中使用源图,但是是否有一个外部工具可以让我手动输入行和列并显示源代码中的位置？

我在ES6中有一个功能class:

class Test {
   // Omitted code for brevity
   loadEvents() {
      $.get('/api/v1/events', (data) => {
         this.actions.setEvents(data);
      });
   }
}

Babel将其转换为另一种形式,并生成一个_this变量来控制箭头函数的词法范围.

var _this = this;

$.get('/api/v1/events', function (data) {
   _this.actions.setEvents(data);
});

当我使用Chrome中的源映射调试ES6类并在我调用的行上放置一个断点时this.actions.setEvents(data);我注意到Chrome没有"重新映射" this以匹配原始的ES6代码,而是this指向外部函数范围,我需要使用_this如果我想要访问的箭头功能词汇范围,这是完全没有意义的.如果我使用的是源代码,我会期待Chrome开发者.用于保存this我的ES6代码中的词法范围的工具.

有没有办法让Chrome开发者工具按预期使用源图和箭头功能？

试图找出为什么我不能在Rails 5中使用源映射.Rails 5使用Sass 3.4.2x,所以看起来它不应该有以前版本的Rails的问题.

我添加了以下内容 config/environments/development.rb

# Enable source maps for Sass
config.sass.inline_source_maps = true

我创建了一个gulp/typescript工作流,它执行以下操作.

1. gulp.watch(..)
2. 一饮而尽,打字稿
3. 一饮而尽,丑化
4. 一饮而尽,sourcemaps

使用以下..

var tsProject = ts.createProject('tsconfig.json') // See below for options

gulp.task('watch-ts', function () {
    return gulp.watch(paths.scriptSrc + '/**/*.ts', ['compile-ts']);
});

gulp.task('compile-ts', function () {
    var tsResult = gulp
        .src(paths.scriptSrc + '/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject));

    return tsResult
        .js
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.scripts));
});

{
    "compilerOptions": {
        "outFile": "app.js",
        "target": "es5",
        "removeComments": true,
        "noImplicitAny": false,
        "module": "system",
        "experimentalDecorators": true,
        "declaration": false,
        "noEmitOnError": true
    }
}

因此,在创建了js文件+源映射之后,当我尝试使用Chrome调试器插入并调试我的一个打字稿文件时,断点会跳到整个地方,并且每行F10按下一行跳转到一些随机行.我相信在生成源图时会发生一些奇怪的事情,但不知道是什么.

如果我注释掉".pipe(uglify())"那么我可以完美地调试并且没有问题.

有谁知道可能导致这种行为的原因是什么？

假设在html文件的子目录中有一个带有source-map的js文件.

• index.html(使用js/myjs.js)
• JS/myjs.js
• JS/myjs.js.map

那么myjs.js的sourceMappingURL评论是哪个？

//# sourceMappingURL=myjs.js.map

要么

//# sourceMappingURL=js/myjs.js.map

我在生产和开发服务器上使用源映射的js文件,所以我只是从本地存储加载它.在这种情况下,我在文件末尾使用下一个字符串//#sourceMappingURL = file://// var/www/static /.哪些指向我当地的商店.但是我想在操作系统Linux和Windows上使用它.所以对于Windows,这个字符串是无效的文件://// var/www/static /,我应该使用file://// C:/ www/static /.在这种情况下,Linux浏览器可以获取此文件.是否有可能使用一些适用于两种操作系统的通用引用

是否有任何示例如何配置SourceMapDevToolPlugin以匹配各种devtool sourcemap选项.

例如,什么是SourceMapDevToolPlugin配置等效于devtool:cheap-module-eval-source-map 我正在尝试配置插件以映射devtool的各种选项.