标签: source-maps

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

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

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

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

有没有办法为优化框架缩小的脚本生成源图？

我发现很多资源都在讨论Web Essetials,但是在编译时它会生成min和map文件.我需要捆绑的脚本来自不同的来源,因此我不能依赖于vs.net的功能.

此问题解决了同样的问题:协调ASP.NET脚本包和源映射

我有一些JavaScript代码从任意编译到JS语言编译到commonJS模块,我想使用sourcemaps调试浏览器化的代码.

所以我的文件已经//# sourceMappingURL=index.js.map有了,我希望browserify能够读取并转换它们,这样我就可以使用我原来的非JS语言进行调试.

我需要另一个变换吗？

我尝试使用browserify的调试标志,然后它确实生成了一个源图,但是它用于中间JS文件,而不是原始的非JS文件.我甚至看到原始//# sourceMappingURL语句在包中挥之不去,而我的浏览器调试器并不喜欢它.

这有可能吗？

我看到这一点:使用browserify后保留原始的打字稿源图但它不起作用.

我使用IntelliJ 14.1.4创建JavaScript应用程序.为了调试,我使用Gulp启动了一个Web服务器.然后我启动JavaScript调试并与Chrome连接(通过插件).我可以通过这种方式调试"普通"JavaScript,但是当使用源映射(由browserify创建)时,IntelliJ不再触发断点.如果我使用Chrome的调试工具,一切都按预期工作,但IntelliJ似乎无法转换其断点.

有没有办法让这项工作？我花了很长时间研究这个问题,据我所知,IntelliJ支持源地图.此外,我还能够使用这种使用源映射的方法来调试GWT生成的JavaScript.

更新:似乎此问题存在当前问题.如果知道任何工作环节,我很高兴听到解决方案.

下面的答案解决了这个问题.以下是我设置gulp构建的方法:

bundler.bundle()
    .pipe(exorcist('./build/bundle.js.map', null, null, '../src'))

与./build是我生成文件夹,并../src作为JavaScript源文件的根,相对于生成的文件夹.

我正在使用WebPack和这个简单的配置文件捆绑我的应用程序.

var path = require('path');

module.exports = {
    debug: true,
    devtool: 'source-map',

    context: path.join(__dirname, 'js'),
    entry: './main.js',
    output: {
        path: path.join(__dirname, 'Built'),
        filename: '[name].bundle.js'
    }
};

这将创建源映射,我可以轻松地在所有流行的浏览器中调试我的原始javascript文件.但是,在Visual Studio中设置断点并运行项目不起作用,断点被禁用说"没有为此文档加载符号".我正在通过IE11进行调试,其中简单的javascript可以立即被Visual Studio调试,但是在捆绑后这不再起作用了.

有一个迹象表明源映射有效,因为我进入了控制台输出Unsupported format of the sourcemap.生成上面使用配置的源地图如下所示

{"version":3,"sources":["webpack:///webpack/bootstrap 2919a5f916c286b8e21a","webpack:///./main.js","webpack:///./structure_editor/content.js","webpack:///./structure_editor/test_bundle.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;ACtCA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;ACVA,8C;;;;;;ACAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6B","file":"main.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n …

我无法弄清楚我在这里做错了什么.当我尝试使用Gulp创建源图文件时,我收到一条非常奇怪的错误消息.

events.js:85
      throw er; // Unhandled 'error' event
            ^
CssSyntaxError: /www/static/sass/maps/main.css.map:1:198: Missed semicolon

我希望它们在一个单独的.map文件中创建.我无法理解为什么它告诉我在我要求它创建的文件中有错误...？

我究竟做错了什么？

这是我的gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    minifyCSS = require('gulp-minify-css'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    input = 'static/sass/**/*.scss',
    output = 'static/css';

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
};

gulp.task('sass', function() {
    return gulp
        .src(input)
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(autoprefixer())
        .pipe(minifyCSS())
        .pipe(gulp.dest(output))
});

gulp.task('watch', function() {
    gulp.watch(input, ['sass']);
});

// Default task - Compile then set Watch
gulp.task('default', ['sass', 'watch']);

我试图从编译.ts到.min.js如下:

TS --> ES6 ---> ES5 ---> .min.js + .map

在我刚刚做以下事情之前,一切正常:

TS ---> ES5 --->  .min.js + .map

我希望能够使用源地图.我的tsconfig.json如下:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "isolatedModules": false,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

自从我添加后"target": "es6"我收到错误:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

tsify文档说:

在通过Browserify捆绑器运行之前未将TypeScript文件编译为JavaScript时,会发生此错误.您可能会遇到几个已知的原因.

但在我的Gulp任务中,在babelify之前运行tsify:

gulp.task("bundle", function() {

  var mainTsFilePath = "src/main.ts";
  var outputFolder …

我正在运行Chrome 48.0,最近当我尝试在开发者控制台中放置断点时,有时他们会拒绝放置在某些行,而是跳转到另一行.几乎就像当你试图在一条没有意义的线上放置一个断点(比如一个支架本身),但这些只是常规线.如果我对我的代码进行了更改,那么拒绝工作的行可能会发生变化,之前工作的行可能会停止工作.

我假设这与源映射有关,但我很困惑为什么有些行正常工作,并且它之后的行不会.

我正在使用grunt-browserify与babelify和babel-preset-react,babel-preset-es2015和babel-plugin-syntax-object-rest-spread:

    options: {
      transform: [['babelify', {
        presets: ['react', 'es2015'],
        plugins: ['syntax-object-rest-spread'],
      }]],
      browserifyOptions: {
        extensions: ['.jsx'],
        paths: [absPath + '/js', absPath],
        debug: true // Adds source maps to output
      },

知道可能会发生什么吗？

我正在使用webpack为典型的角度项目生成bundled.js文件.现在我在Web服务器上部署它.bundle.js文件最后有以下内容

//# sourceMappingURL=main.bundle.js.map

但Chrome似乎没有检测到有可用的源图.它甚至没有显示说明源地图可用的图标.我该如何解决？另外,源图的路径应该是http://url/main.bundle.js.map吗？chrome如何知道从哪里加载源图？

我真的很难让源地图工作.当我运行我的应用程序时,我在控制台中看到错误 - 见下文:

当我点击fineUploaderTest-bundle.js:1链接时,我得不到任何代码 - 见下文:

在该窗口的底部,请注意它显示为:

源自fineUploaderTest-bundle.js的源映射

我的Webpack版本是2.7.0,这是webpack.config.js文件:

var IS_DEV = false;

var webpack = require('webpack');
var path = require("path");

// Define plugins needed for production and dev cases
var _pluginsDev = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),

];
var _pluginsProd = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),
    new webpack.DefinePlugin({ // Minimizer, removing multiple occurances of imports et.c
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        minimize: …