debugging.md

Debugging

Table of Contents

• Debugging with VC Code
• Debugging with WebStorm
  • Troubleshooting
  • Enable ESLint

Debugging with Visual Studio Code

You can super charge your React debugging workflow with VS Code and Chrome debugging by using this launch.json config:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/app",
            "sourceMapPathOverrides": {
                "webpack:///./app/*": "${webRoot}/*",
                "webpack:///app/*": "${webRoot}/*"
            }
        }
    ]
}

You can read more in Live edit and debug your React apps directly from VS Code — without leaving the editor 🔥 🎉🎈

Note: There's currently a known problem with source maps and VS Code. You can change your webpack config to use inline-source-map and the issue should be resolved.

Debugging with WebStorm

WebStorm is a powerful IDE, and why not also use it as debugger tool? Here is the steps

1. Install JetBrain Chrome Extension
2. Setting up the PORT
3. Change WebPack devtool config to source-map (This line)
4. Run web server (npm run start)
5. Create Run Configuration (Run > Edit Configurations)
6. Add new JavaScript Debug
7. Setting up URL
8. Start Debug (Click the green bug button)
9. Edit Run Configuration Again
10. Mapping Url as below picture * Map your root directory with webpack://. (please note the last dot) * Map your build directory with your root path (e.g. http://localhost:3000)
11. Hit OK and restart debugging session

Troubleshooting

1. You miss the last . (dot) in webpack://.
2. The port debugger is listening tool and the JetBrain extension is mismatch.

Enable ESLint

ESLint help making all developer follow the same coding format. Please also setting up in your IDE, otherwise, you will fail ESLint test.

1. Go to WebStorm Preference
2. Search for ESLint
3. Click Enable

Have another question?

Submit an issue, hop onto the Gitter channel or contact Max direct on twitter!