Question

设置：

Visual Studio 2013更新5 我正在使用Task Runner Explorer和配方中的下面gulp文件：



'use strict';
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');
var assign = require('lodash.assign');

var customOpts = {
    entries: ['./app/controller.js'],
    debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));

gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal

function bundle() {
    return b.bundle()
      // log errors if they happen
      .on('error', gutil.log.bind(gutil, 'Browserify Error'))
      .pipe(source('bundle.js'))
      // optional, remove if you don't need to buffer file contents
      .pipe(buffer())
      // optional, remove if you dont want sourcemaps
      .pipe(sourcemaps.init({ loadMaps: true })) // loads map from browserify file
         // Add transformation tasks to the pipeline here.
      .pipe(sourcemaps.write('./',{includeContent: false, sourceRoot: '../'})) // writes .map file
      .pipe(gulp.dest('./dist'));
}

'use strict'; var watchify = require('watchify'); var browserify = require('browserify'); var gulp = require('gulp'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sourcemaps'); var gutil = require('gulp-util'); var assign = require('lodash.assign'); var customOpts = { entries: ['./app/controller.js'], debug: true }; var opts = assign({}, watchify.args, customOpts); var b = watchify(browserify(opts)); gulp.task('js', bundle); // so you can run `gulp js` to build the file b.on('update', bundle); // on any dep update, runs the bundler b.on('log', gutil.log); // output build logs to terminal function bundle() { return b.bundle() // log errors if they happen .on('error', gutil.log.bind(gutil, 'Browserify Error')) .pipe(source('bundle.js')) // optional, remove if you don't need to buffer file contents .pipe(buffer()) // optional, remove if you dont want sourcemaps .pipe(sourcemaps.init({ loadMaps: true })) // loads map from browserify file // Add transformation tasks to the pipeline here. .pipe(sourcemaps.write('./',{includeContent: false, sourceRoot: '../'})) // writes .map file .pipe(gulp.dest('./dist')); } 以下是来自html页面，其中包含对我的browserify捆绑文件的引用：

我获得以下源地图和捆绑包。 SourceMap：

<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="dist/bundle.js"></script>
</head>

软件包：

{"version":3,"sources":["node_modules/browserify/node_modules/browser-pack/_prelude.js","app/controller.js","app/module.js"],"names":[],"mappings":"AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AClBA;AACA","file":"bundle.js","sourceRoot":"../"}

我可以使用IE和Chrome中通过源地图加载的原始文件成功调试。

问题：

我无法使用源映射文件中的函数内的脚本调试器进行调试，但我可以在捆绑文件中进行调试。

脚本

可以在controller.js中调试函数，但可以在控制器函数之外调试

可以调试Bundle.JS

如果您有任何建议，请告诉我。 Chrome和IE调试工作正常，但在Visual Studio中我们团队调试的比例很高。

如何在源映射中使用Visual Studio Debugger调试函数

0 个答案: