Javascript 调试作为Dotnet一部分的react web应用程序

我知道我可以在

WebStorm

中调试纯react应用程序，方法是创建

JavaScript调试

配置并将其指向我正在运行的应用程序

我只需要在WebStorm中创建一个简单的react样板应用程序（

File->New->Project->react-app

）

但是我有一个现有的项目，在同一个项目中有一个Dotnet后端和一个React前端。这棵树看起来像

MyApp
  - src
    - Controllers
    - Models
    ...
    - UIApp 
      - src
        ... (react ui parts) 
    ....

我运行项目时，首先将所有内容与

npm run distdev

打包在一起，然后

dotnet run-f net47

启动所有内容。但是我不知道如何调试js

我再次在WebStorm中创建了一个

JavaScript调试配置

，并将其指向该url（

localohst:3000

）。在

Debug

窗口的

Console

选项卡中，我可以看到控制台正在工作，但没有遇到断点

我想做的事可能吗？还是我必须坚持在Chrome的

源代码
选项卡中进行调试

package.json

{
  "name": "myapp",
  "version": "0.0.1",
  "description": "my appn",
  "repository": "",
  "main": "dist/js/app.js",
  "dependencies": {
    "axios": "0.16.2",
    "babel-polyfill": "6.23.0",
    "es6-promise": "4.1.1",
    "halogen": "^0.2.0",
    "history": "4.6.3",
    "immutable": "3.8.1",
    "material-ui": "0.18.6",
    "moment": "2.18.1",
    "query-string": "^4.3.4",
    "react": "15.6.1",
    "react-addons-css-transition-group": "15.6.0",
    "react-addons-update": "15.6.0",
    "react-bootstrap": "0.31.0",
    "react-bootstrap-table": "4.0.0-beta.1",
    "react-datepicker": "0.44.0",
    "react-datetime": "2.8.4",
    "react-dnd": "2.4.0",
    "react-dnd-html5-backend": "2.1.2",
    "react-dom": "15.6.1",
    "react-dropzone-component": "2.0.0",
    "react-proxy": "1.1.8",
    "react-redux": "5.0.5",
    "react-redux-toastr": "7.0.0",
    "react-router": "4.1.1",
    "react-router-bootstrap": "0.24.2",
    "react-router-dom": "4.1.1",
    "react-router-redux": "5.0.0-alpha.6",
    "react-s-alert": "1.3.0",
    "react-svg-piechart": "1.3.0",
    "react-tap-event-plugin": "2.0.1",
    "react-tinymce": "^0.5.1",
    "react-widgets": "4.0.0-rc.15",
    "redux": "3.7.1",
    "redux-auth-wrapper": "^1.1.0",
    "redux-form": "6.8.0",
    "redux-immutablejs": "0.0.8",
    "redux-promise": "0.5.3",
    "redux-throttle": "0.1.1",
    "redux-thunk": "2.2.0",
    "redux-tooltip": "0.7.2",
    "rest-url-builder": "1.0.6"
  },
  "devDependencies": {
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-plugin-transform-object-rest-spread": "6.23.0",
    "babel-plugin-transform-object-assign": "6.22.0",
    "babel-plugin-transform-es2015-object-super": "6.24.1",
    "babel-plugin-transform-es2015-arrow-functions": "6.22.0",
    "babel-plugin-transform-es2015-for-of": "6.23.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-plugin-react-transform": "2.0.2",
    "babelify": "7.3.0",
    "browserify": "14.4.0",
    "del": "3.0.0",
    "envify": "4.1.0",
    "eslint-plugin-react": "7.1.0",
    "gulp": "3.9.1",
    "gulp-babel": "6.1.2",
    "gulp-clean-css": "3.6.0",
    "gulp-concat-css": "2.3.0",
    "gulp-eslint": "4.0.0",
    "gulp-flatten": "0.3.1",
    "gulp-header": "1.8.8",
    "gulp-if": "2.0.2",
    "gulp-rename": "1.2.2",
    "gulp-sass": "3.1.0",
    "gulp-sourcemaps": "2.6.0",
    "gulp-uglify": "3.0.0",
    "gulp-util": "3.0.8",
    "livereactload": "3.3.0",
    "reactify": "1.1.1",
    "uglify-js": "3.0.24",
    "vinyl-buffer": "1.0.0",
    "vinyl-source-stream": "1.1.0",
    "watchify": "3.9.0",
    "webpack": "3.1.0",
    "webpack-stream": "3.2.0"
  },
  "scripts": {
    "clean": "gulp clean",
    "lint": "gulp lint",
    "distdev": "gulp distUI-dev",
    "dist": "gulp distUI",
    "watch": "gulp default"
  },
  "browserify": {
    "transform": [
      "reactify",
      "envify"
    ]
  }
}

gulpfile.babel.js

import gulp from 'gulp';
import babelify from 'babelify';
import browserify from 'browserify';
import del from 'del'
import eslint from 'gulp-eslint';
import gulpif from 'gulp-if';
import sass from 'gulp-sass';
import uglify from 'gulp-uglify';
import buffer from 'vinyl-buffer';
import source from 'vinyl-source-stream';
import sourcemaps from 'gulp-sourcemaps';
import cleanCSS from 'gulp-clean-css';
import concatCss from 'gulp-concat-css';

const paths = {
  appBundle: 'appBundle.js',
  appBundleMin: 'appBundle.min.js',
  srcMain: 'UIApp/src/js/Main.js',
  srcSassMain: 'UIApp/src/styles/app.scss',
  srcLint: ['UIApp/src/**/*.js', 'UIApp/test/**/*.js'],
  srcDocuments:['UIApp/src/documents/*'],
  dist: 'wwwroot',
  distJs: 'wwwroot/js',
  distCss: 'wwwroot/css',
  appDistCss:'wwwroot/css/app.css',
  distFonts: 'wwwroot/fonts',
  distFontAwesome: 'wwwroot/fonts/font-awesome',
  distImages: 'wwwroot/images',
  distDocuments: 'wwwroot/documents'
};

var debug = true

gulp.task('styles', function() {
  gulp.src(paths.srcSassMain)
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.distCss));
});

gulp.task('stylesminify', function() {
  gulp.src(paths.srcSassMain)
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sass().on('error', sass.logError))
    .pipe(concatCss('app.min.css')) 
    .pipe(buffer())
    .pipe(cleanCSS({debug: debug, processImport: false}, function(details) {
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.distCss))
});

gulp.task('browserify', () => {
  browserify(paths.srcMain, {debug: true})
    .transform(babelify)
    .bundle()
    .pipe(source(paths.appBundle))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(gulpif(!debug, uglify()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.distJs));
});

gulp.task('appuglify', () => {
  browserify(paths.srcMain, {debug: true})
    .transform(babelify)
    .bundle()
    .pipe(source(paths.appBundleMin))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.distJs));
});

gulp.task('copyFiles', function() {
  // copy css files
  gulp.src('UIApp/src/styles/**/*.css')
    .pipe(gulp.dest(paths.distCss));
  // copy images
  gulp.src('UIApp/src/images/**/*')
    .pipe(gulp.dest(paths.distImages));
  //copy documents
  gulp.src('UIApp/src/documents/**/*')
    .pipe(gulp.dest(paths.distDocuments));
  // copy Fonts
  gulp.src('UIApp/src/fonts/**/*')
    .pipe(gulp.dest(paths.distFonts));
  // copy Font Awesome
  gulp.src('UIApp/src/font-awesome/**/*')
    .pipe(gulp.dest(paths.distFontAwesome));
  gulp.src('UIApp/src/js/common/**/*')
        .pipe(gulp.dest(paths.distJs));
});

gulp.task('lint', () => {
  gulp.src(paths.srcLint)
    .pipe(eslint())
    .pipe(eslint.format());
});

gulp.task('distUI-dev', [
  'browserify', 'styles', 'copyFiles'
]);

gulp.task('distUI', [
  'appuglify', 'stylesminify', 'copyFiles'
]);

gulp.task('clean', function() {
  return del([paths.dist]);
});

gulp.task('watch', () => {
  gulp.watch(paths.srcLint, ['distUI-dev']);
});

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

在Gulp文件的任务browserify中，尝试在uglify之后应用sourcemaps。请看这里：

我认为这将为您提供正确的源代码映射，以允许您在代码中进行调试

您可以编写调试器语句以停止流。
您可以共享您的package.json和webpack配置吗？这样的调试只对webpack有效吗？我正在使用gulp进行捆绑，这可能不仅是webpack的问题，而且取决于您的配置，也许您需要添加源地图以便使用chrome开发工具Sok进行调试。我已经添加了我的package.json和gulpfile.babel.js，以备帮助您可以尝试手动为
MyApp/src/UIApp/src
文件夹指定源地图urlhttp://localohst:3000/
在
JavaScript调试配置
设置中。对不起，我不太明白。这看起来就像我在browserify任务中已经做的一样，您是否能够使用调试器进行调试；陈述（即使不是原始代码）是的，如果我有
调试器在我的代码中，它停在IDE中。虽然有几行关闭，请检查源地图的正确创建，它们实际上在同一个服务器文件夹中。是的，当我查看Chrome上的开发者工具时，我可以正确地看到所有源文件和所有内容