调试反应的web应用程序是DOTNET

Question

的一部分，我知道我可以通过创建一个JavaScript Debug配置和定位，在我跑步的应用程序调试纯在WebStorm反应的应用程序。

我得到的只是一个简单的工作是反应在得到WebStorm（File -> New -> Project -> React App）

创建样板应用程序，但我有一个现有的项目，有一个DOTNET后端，并在同一个项目一个阵营前端。树看起来像

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选项卡中，我可以看到控制台正在工作，但没有发生断点。

是我想要做的可能吗？还是我只是有调试坚持在Source标签在Chrome

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

Answer 1

在咕嘟咕嘟文件

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

我认为这会为您提供正确的源地图，以便您在代码中进行调试。

你可以写调试;声明在您的代码为了停止流程。