Search code examples
debuggingwebstormliveedit

Trying to configure debug server in WebStorm 9.03

I have a project which uses a node.js/express server to serve an AngularJS SPA.

The project contains a number of different applications which share some common resources. The express server is configured to serve assets from different locations:

    server.use('/assets', express.static(path.join(rootDir, 'myApp/assets')));
    server.use('/images', express.static(path.join(rootDir, 'components/common/images')));
    server.use(express.static(path.join(rootDir, 'components')));

I am trying to change the app to make use of WebStorm's liveEdit feature but having difficulty configuring the debugger.

Here's what I have done so far:

  1. Install the chrome extension, make it active and configure the port to 9000.
  2. Create a new Javascript/Debug configuration with url: http://localhost:9000
  3. Configure remote urls for my index.html (http://localhost:9000/index.html: myApp/index.html), assets, images, components etc. as above.

When I click the debug button for my new config, I just get a message 'This webpage is not available'.

I have been through the JetBrains docs but don't see a solution.

Solution

  • no-no-no. Don't change built-in server port - you don't need the built-in server here. Your client app is served by Express server - you need using this server instead of the built-in one. Please change the chrome extension port back to default. Just make sure to start your Express server prior to debugging your client code, and specify the server url (http://localhost:9000 or whatever it is) in JavaScript Debug run configuration. Or, you can use a single configuration ( Node.js ) to run both server and client: it has a 'Browser/LiveEdit' tab that allows to launch the browser and debug the client code. Check the 'After launch' checkbox there, specify the URL of the server your front end is served on and enable the 'with javaScript Debugger' option