Debugging reagieren Web-App, die Teil von Dotnet ist

Question

Ich weiß, dass ich eine pure reagieren App in WebStorm debuggen kann, indem Sie eine JavaScript Debug Konfiguration erstellen und das auf meine laufende App zeigen.

Ich habe, dass mit nur einem einfachen reagieren vorformulierten App arbeiten, die in WebStorm (File -> New -> Project -> React App)

Aber ich habe ein vorhandenes Projekt erstellt werden, das einen Dotnet-Backend hat und ein vorderes Ende im selben Projekt React. Der Baum sieht aus wie

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

ich das Projekt, indem man zuerst die Verpackung alles zusammen mit npm run distdev laufen und dann dotnet run -f net47, um alles zu starten. Aber ich kann nicht herausfinden, wie man die js debuggt.

Ich erstellte ein JavaScript Debug COnfiguration in WebStorm erneut und zeigte auf diese URL (localohst:3000). In Console Registerkarte im Debug Fenster kann ich sehen, die Konsole funktioniert, aber keine Haltepunkte werden getroffen.

Was versuche ich zu tun? Oder muss ich mit Debugging in der Source Tab in Chrome nur Stick

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

in Ihrer Gulp-Datei, in der Task browserify , versuche nach dem Uglify Quellmaps anzuwenden. Schau mal hier: https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md

Ich denke, dass würde Ihnen die richtigen Quellkarten bieten, damit Sie in Ihrem Code debuggen können.

Sie können Debugger schreiben; Anweisung in Ihrem Code, um den Fluss zu stoppen.