2

I am new to web development (am a backend developer normally).

I am trying to set up a development environment to reflect my current workflow. I develop Java in IntelliJ Ultimate and I like how I can step through and debug.

The current front end development team start npm and then use Chrome developer tool window to debug.

Is there a way to connect WebStorm to this process so that I can set a break point in WebStorm instead of using the Chrome developer tool window?

I have installed the JetBrains extension in Chrome and I cannot find how to do this on their site.

Again, please excuse my ignorance as I am very new to front end development. but if I can get this functionality it would be fantastic.

Any help or guidance would be very much appreciated.

1

2 Answers 2

1

Create JavaScript Debug run configuration per instructions at https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver, add breakpoints, start your server via npm, then select the configuration above and press Debug. See also these videos:

Sign up to request clarification or add additional context in comments.

Comments

0

You need chrome extension that you already installed here is link also ExtensionJetBrains IDE Support

once you install know enable breakpoint here is the way to do all step you can see shortcut key too

enter image description here

once you enabled breakpoint then just click near to line number to set breakpoint enter image description here another option go to File-> setting and enable breakpoint

enter image description here

enter image description here

when you run your code open inspect as well then you will see this magic :D :)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.