调试作为 Dotnet 一部分的反应 Web 应用程序

Question

我知道我可以通过创建JavaScript Debug 配置并将其指向我正在运行的应用程序来调试WebStorm 中的纯反应应用程序。

我只使用了一个在 WebStorm (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 Debug COnfiguration 并将其指向该 URL (localohst:3000)。在Debug 窗口的Console 选项卡中，我可以看到控制台正在工作，但没有遇到断点。

我正在尝试做的事情可能吗？还是我只需要在 Chrome 中的 Source 选项卡中进行调试

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']);

Answer 1

在您的 Gulp 文件中，在任务 browserify 中，尝试在 uglify 之后应用源映射。看看这里： https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md

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

您可以在代码中编写 debugger; 语句以停止流程。