debugging是作为Dotnet的一部分的Web应用程序
我知道我可以在WebStormdebugging一个纯粹的反应应用程序， WebStorm是创build一个JavaScript Debugconfiguration，并指向我正在运行的应用程序。
我得到的只是一个简单的反应样板应用程序创buildWebStorm（ File -> New -> Project -> React App ）
但是我有一个现有的项目，在同一个项目中有一个Dotnet后端和一个React前端。 树看起来像
MyApp - src - Controllers - Models ... - UIApp - src ... (react ui parts) ....
我运行该项目首先打包所有与npm run distdev一起，然后dotnet run -f net47启动一切。 但我不知道如何debuggingJS。
我再次在WebStorm中创build了一个JavaScript Debug COnfiguration ，并将其指向该url（ localohst:3000 ）。 在“ Debug窗口的“ Console选项卡中，我可以看到控制台正在工作，但没有发生断点。
我正在尝试做什么？ 或者我只需坚持在Chrome中的Source标签中进行debugging
packaage.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文件中，在任务浏览器中，尝试在uglify之后应用sourcemaps。 看看这里： https ： //github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md
我认为这会为您提供正确的源代码映射，以允许您在代码中进行debugging。
你可以写debugging器; 在您的代码中的语句，以停止stream程。