How to set up JavaScript debug in WebStorm

Details
Parent Category: editors

Reference

https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html#debugging_js_on_built_in_server

 

 

Preparation

Chrome browser

 

In webpack.config.js

Make sure that source-maps are generated.

 

devServer: {
  static: {
    directory: path.join(__dirname, "build"),
  },
  port: 3000,
},
devtool: "source-map",
module: {
  // exclude

 

 

Change the settings for the default web browser in Webstorm to allow for remote connections

 

Please add --remote-allow-origins=* to command line options of a Chrome dev browser (v111) in Settings | Tools | Web Browsers and Preview | <select chrome dev browser> | <press Edit>.

The version of Chrome is 111.x

 Note: You can get to the command line options for the browser by selecting the browser and clicking edit.

 

webstorm use chrome debugger

 

Procedure to get the debugger up and running.

 

Right click the html in the 'build' folder then select debug.