标签: source-maps

我想将源地图添加到我的网站,但我想对它们的服务方式进行一些控制.什么是适合他们的MIME类型？

一些数据

• 内容本身就是JavaScript,但并不意味着这样执行.
• CDN.js服务http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.map于Content-Type: application/octet-stream.
• 谷歌提供http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.map使用Content-Type: application/json
• 源映射规范指出映射应该从)]}以防止它们被评估为实际JavaScript(从而暴露跨站点脚本攻击)开始.这使得文件无效JSON和有效但不可运行的JavaScript.

致力于将JavaScript源代码构建到我的工作流程中,我一直在寻找有关调试源映射的特定部分的一些文档.在下面的图片中,我正在运行压缩的Javascript代码,但通过源映射的魔力,Chrome调试器能够重建看似未压缩的代码供我调试:

但是,如果查看局部变量,someNumber并且someOtherNumber未定义.相反,我们有a和r,这是这个函数的编译变量名称.这对于Mozilla Firefox和Chrome都是一样的.

我尝试在源图上查看Chrome DevTools文档,但我没有看到任何关于此的文章.它是源图调试的当前限制,是否有任何解决方法？

更新:

我已经在铬项目问题中找到了这个主题.它看起来不像已经或正在实施.随着团队开始在他们的构建系统中实现Babel来编写ES2015代码,这正成为一个越来越重要的问题.有没有团队找到解决方法？

我突然无法调试我的 Angular 应用程序。不太确定我做了什么。我更新node.js后可能会发生这种情况

• 角度：13.1.1
• NodeJS：18.1.0
• VS代码：1.67.1

启动.json

"configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
    },
  ]

错误：

Could not read source map for http://localhost:4200/runtime.js: Unexpected 503 response from http://127.0.0.1:4200/runtime.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/vendor.js: Unexpected 503 response from http://127.0.0.1:4200/vendor.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/main.js: Unexpected 503 response from http://127.0.0.1:4200/main.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/styles.js: …

我收到了一个令人沮丧的警告，并且无法找到可用的解决方案：

WARNING in ../lensing/dist/main.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from "data" URL: data:application/json;charset=utf-8;base64,eyJ2ZXJza [...]

我的 webpack.config.js 看起来像（npm 模块的设置）：

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'lensing',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                }
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                use: ['source-map-loader'],
            },
            {
                test: /\.(png|jpg|gif|svg)$/i,
                use: [
                    {
                        loader: …

应用程序崩溃时我收到了如下错误日志:

致命异常:com.facebook.react.modules.core.JavascriptException:onSelect index.android.bundle:20:7148 onPress index.android.bundle:20:2435

但是对我来说麻烦拍摄并没有多大帮助.我如何启用源地图以便我可以追踪问题所在？

更新2018年 https://docs.expo.io/versions/latest/guides/using-sentry.html看起来很有前途!

我使用concat将JS文件合并到一个文件中,并使用uglify来最小化JavaScript.如何创建使用源JS文件的sourcemaps文件？

我目前的gruntfile:

concat: {
    options: {
        // define a string to put between each file in the concatenated output
        separator: ';'
    },
    dist: {
        // the files to concatenate
        src: ['<%= config.src %>/js/**/*.js'],
        // the location of the resulting JS file
         dest: '<%= config.dist %>/js/main.js'
    }
},

uglify: {
    dist: {
        files: {
            '<%= config.dist %>/js/main.min.js': ['<%= concat.dist.dest %>']
        }
    }
},

我正在尝试编写一个gulp任务,允许我在JS中使用模块(CommonJS很好),使用browserify + 6to5.我也希望源映射能够工作.

所以:1.我使用ES6语法编写模块.2. 6to5将这些模块转换为CommonJS(或其他)语法.3. Browserify捆绑模块.4.源映射返回原始ES6文件.

怎么写这样的任务？

编辑:这是我到目前为止所拥有的:

吞咽任务

gulp.task('browserify', function() {
    var source = require('vinyl-source-stream');
    var browserify = require('browserify');
    var to5ify = require('6to5ify');

    browserify({
        debug: true
    })
    .transform(to5ify)
    .require('./app/webroot/js/modules/main.js', {
        entry: true
    })
    .bundle()
    .on('error', function(err) {
        console.log('Error: ' + err.message);
    })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(destJs));
});

模块/ A.js

function foo() {
    console.log('Hello World');

    let x = 10;

    console.log('x is', x);
}

export {
    foo
};

模块/ B.js

import {
    foo
}
from './A';

function bar() {
    foo();
}

export { …

我已经编写了一个AngularJS应用程序,但它确实是一个调试的噩梦.我正在使用Grunt + uglify来连接和缩小我的应用程序代码.它还会在缩小的JS文件旁边创建源映射.

当文件中存在JS错误但在AngularJS应用程序之外时,源映射似乎正常工作.例如,如果我console.log('a.b');在其中一个文件的顶部写入,则Chrome调试器中记录的错误会显示原始文件的行+文件信息,而不是缩小的文件.

当Angular运行自己的代码出现问题时(例如在Controller代码中),会出现问题.我从Angular获得了很好的堆栈跟踪,但它只详细说明了缩小的文件而不是原始文件.

有什么办法让Angular能够确认源地图吗？

示例错误如下:

TypeError: Cannot call method 'getElement' of undefined
at Object.addMapControls (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:2848)
at Object.g [as init] (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:344)
at new a (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:591)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js:29:495)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js:30:123)

我想在我正在处理的rails 3.2应用程序上添加源映射支持.据我所知,Sprockets不支持生成源映射,并且从其github页面看起来该功能计划为4.0.我正在使用Sprockets 2.2,我认为猴子修补是唯一的方法.主Sprockets模块下的模块处理可以访问js_compressor函数,该函数可以修补以生成单个文件的源映射.但是,当JS文件合并时,我不知道如何添加它.我使用Uglifier 2.4作为压缩器.

该项目混合了CoffeeScript,JS和EJS文件.所以,我认为这就是链轮将它们组合在一起的方式.首先,它会将Coffeescript和EJS转换为JS,然后使用js_compressor压缩单个文件,然后将它们连接成组.现在,由于组合到同一文件的多个文件的源映射是单个文件.因此,我需要稍微更改编译过程,并在连接完成后使js_compressor在文件上运行.那么,任何人都可以帮忙吗？甚至解释链轮编译过程和使用的模块以及所涉及的功能也会有很大帮助.我不关心目前为CoffeeScript代码制作源地图文件.即使映射到他们转换的JS文件也行.

此外,如果有一些宝石可以提供帮助,我想非常欢迎.

我有使用Typescript编写的项目,我希望能够调试它(在Chrome Dev Tools或中Intellij).

起初我看到了Typescript的import功能不受支持.所以我试图用Webpack随webpack dev server但这完全失败了.即使我的应用程序正在运行(由于只有一个bundle.js包含所有代码的文件),它也无法将代码与给定的源映射匹配,这使调试变得不可能.

我停止使用webpack后,我尝试添加require.js作为依赖项来解决require is not defined我得到的错误.这工作但现在我再次陷入困境并得到这个:

未捕获的ReferenceError:未定义导出

我不知道为什么这不起作用.我想让我的应用程序工作(通过webpack或能够在转换后解析import语句)并且仍然能够使用typescript生成的source-maps调试代码.我怎样才能做到这一点？

我正在附加我的配置文件,以防有些东西丢失:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js:

module.exports = {
    resolve: {
        extensions: [/*'.ts', '.tsx', */'.js']
    },
    entry: './scripts/main.js',
    output: {
        path: '/',
        filename: 'app.js'
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' …