将 Chrome React Developer Tools 与 create-react-app 一起使用时出错

Question

After creating a new create-react-app project I've run into a bit of a big problem when I run npm start inside the project. Chrome React Developer tools does not show all files in src folder. Instead it shows only folder ./src Chrome React Developer Tools

I am using nodejs 6.10.1 , create-react-app 1.3.0.

package.json:

     {
      "name": "test",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "axios": "^0.16.1",
        "bootstrap": "^3.3.7",
        "prop-types": "^15.5.9",
        "react": "^15.5.4",
        "react-bootstrap": "^0.30.10",
        "react-bootstrap-table": "^3.2.1",
        "react-dom": "^15.5.4",
        "react-redux": "^5.0.4",
        "react-router": "^3.0.0",
        "recharts": "^0.22.3",
        "redux": "^3.6.0",
        "redux-logger": "^3.0.1",
        "redux-promise-middleware": "^4.2.0",
        "redux-thunk": "^2.2.0"
      },
      "devDependencies": {
        "react-scripts": "0.9.5"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      }
    }

Any advice how to fix it? I checked documentation but didn't find any solution.

Answer 1

You can still debug the code using VScode Chrome extension, however its not my favorite way of debugging a frontend application.

Use eject command to enable debugging. After you npm run eject , it reveals more configurations for you to edit, one of those is source-map type (under a webpack configuration). Once you eject, the source-map type changes thus allowing you to debug on chrome-dev-tools.