• [Time]: 2019/10/30
  • [keyword]: front-end, Webstrom

While Chrome DevTools debugging is good enough now, there are a few things that make me feel bad:

  1. You need to write it manuallydebuggerCan’t directly interrupt the point (if you have ESLint on, it’s the scene of a car crash, which is very uncomfortable)
  2. It is not convenient to see the source of other files when debugging
  3. The most important of course is the unified shortcut key.

This article works with jetBrains’ other ides, and most of the content comes from this blog post by Webstrom

The preparatory work

  1. Install the JavaScript Debugger plug-in, find plugins and search for JavaScript.
  2. Install the JetBrains IDE Support extension for Chrome.
  3. Click on the top rightAdd ConfigurationAnd then it pops upRun/Debug ConfigurationsDialog box, this time click+Number, select from the listJavaScript Debug.

Above steps at the end of the article at the end of the picture example, the text did not understand can jump to the end of the picture oh.

Example: the React

Create an app and launch it

npx create-react-app my-app
cd my-app
npm start
Copy the code

Note: By default, this app will run on port 3000. If you manually set the running port, the following url will also need to be changed.

Re-open the third step of preparation, type http://localhost:3000 and save the configuration in the URL field, and click the bug-like icon to start debugging.

The break point in the IDE when you go into debug mode the next time the program hits a breakpoint the app automatically goes into debug mode.

React, Vue, Angular, Electron can all be debugable, and the steps are all the same.

Possible problems and solutions

  1. No response after I hit debug.

    • Make sure the debug URL is correct.

  2. The following two paths have been found by opening Chrome with Chrome ://version/, refer to the appendix setting Chrome Path and user_data section.

    • Possible cause 1: The correct execution path of Chrome is not set.
    • Solution: Open the IDE Settings page and findTools\Web BrowsersFind Chrome, edit the Path section, and set it to the correct path.
    • The first possible cause of this problem is that user_Data is not set. Chrome has a user_data data, and by default the IDE starts Chrome using user_data inside the IDE, which will run Chrome with no data at all.
    • Solution: Open the IDE Settings page and findTools\Web BrowsersFind Chrome, click edit image on the right and checkUse custom user data directory“, and then fill in the correct path.

  3. A new window opens each time you debug.

    • The reason for this problem is that when the IDE starts Chrome, it adds the –remote-debugging-port startup parameter to Chrome. If chrome starts with the same user_data, a new Chrome window will be launched.

    • Solution: Close Chrome first, and then use the IDE to start chrome.

Used in projects created by VUE-CLI3 +

The webpack devtool is cheap-module-eval-source-map for a project created under vue-cli3+, which causes the IDE to be unable to locate the file location, resulting in debugging failure. In vue. Config. js, change to source-map.

  1. Create the vue.config.js file in the project root directory

  2. Modify the webPack devtool to the following code (if the reader uses chainWebpack to configure webpack, please search for how to modify the Webpack configuration.)

    module.exports = {
    configureWebpack: config= > {
        if (process.env.NODE_ENV === 'development') {
            config.devtool = 'source-map'; }}};Copy the code

The appendix

Installing a plug-in

New Debugging Configuration

Set Chrome path and user_data

No emotional closure: This post was also posted on my blog