Detailed steps for debugging VUE projects in IDEA

To debug js code, you need to write debugger in the code or set breakpoints in Chrome every time, and the breakpoint information of Chrome is not user-friendly. I accidentally discovered that idea has this function, it is really amazing. After studying for a long time, I finally got it done. Haha, I'm so happy. Here are the detailed steps:

1. Download the browser plug-in

Search for the "jetbrains ide support" plug-in in the Chrome app store. You may need FQ (if you don't know how to use Baidu, just use google host), as shown below. This is what I have installed. Here I tried to find the downloaded plug-in and installed it, but the connection was not successful and an error message was always prompted, which will be mentioned below. So don't be lazy and download it honestly.

After successful installation, this icon will appear in the upper right corner

It should be noted that you should not install downloaded plug-ins. First, they will not work after installation. Second, Chrome does not trust plug-ins from unknown sources and will automatically disable the plug-ins after restarting. If you cannot install it online, there is another way: change the extension of the downloaded plug-in to rar, unzip it to a folder, use the browser's plug-in developer mode, load the folder as a plug-in, and install it.

You can also right-click on the plug-in icon and select Options, as shown below, to configure the port, which must be consistent with that in idea;

2. Configure IDEA

The configuration in idea is as follows

After these two steps are configured, run the newly created JavaScript Debug to start debugging and access the breakpoints.

This is the end of this article about how to debug VUE front-end projects in IDEA. For more information about debugging VUE projects in IDEA, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!