Question

我知道我可以通过创建if($status == "queued"){ //then send the email here} else{ // nothing to be sent.}配置并将其指向我正在运行的应用来调试WebStorm中的纯反应应用。

我只使用了一个在WebStorm中创建的简单反应样板应用程序（JavaScript Debug）

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

File -> New -> Project -> React App

我首先将所有内容与MyApp - src - Controllers - Models ... - UIApp - src ... (react ui parts) ....以及npm run distdev打包在一起来运行项目，以启动所有内容。但我无法弄清楚如何调试js。

我再次在WebStorm中创建了dotnet run -f net47并将其指向该网址（JavaScript Debug COnfiguration）。在localohst:3000窗口的Console选项卡中，我可以看到控制台正在运行，但没有遇到任何断点。

我正在尝试做什么？或者我只需要坚持在Chrome的Debug标签中进行调试

packaage.json

Source

gulpfile.babel.js

{
  "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"
    ]
  }
}

Answer 1

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

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

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

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

1 个答案: