phpstorm, webstorm debug debugging JS

 

The first step: to give you the Chromeadded JetBrains IDE Supportplug-ins required over the wall, is this the figure below.

 

Step two: We put the project up and running, that is, run the command, my side is

yarn run start

　　

Step three: Open Webstorm（Phpstorm）the Run window, clickEdite Connfigurations

添加一个JavaScript Debug

 

name可以自定义，URL根据自己实际情况，（我这边没有在下面的Before launch:Show this page,Activate tool window这一栏里添加这个项目npm start或者yarn start的启动脚本，一定要先启动项目，然后在点虫子按钮）

 

Needs to be set if the following configuration, and the specific command according to the actual situation package.json

 

 

Browser's configuration, click after the monitor is turned on

Bugs point start debug, Google browser will pop up a separate browser page for debugging

 

Focus here, and sometimes you code in the editor may not break, can () print console.log, and then break into the point-source browser, will automatically trigger linkage to the editor