DEV Community

Yubraj Ghimire for Etribes Connect GmbH

Posted on

JavaScript Debugging in PhpStorm

Whenever we think of JavaScript debugging πŸ€” console.log, debugger, browser dev tools are some terms that come up in our mind but have you ever thought of debugging JavaScript with IDE?

This post will guide you to integrate JavaScript debugging in PhpStorm in no time.

Lets get started...

Step1 - Install JetBrains IDE Support extension

First of all, you need to install JetBrains IDE Support extension for Google Chrome to debug client-side apps in any IDEs from JetBrains.

Alt Text

After installing the extension, now you should see the JetBrains icon in your google chrome panel.

Alt Text

Step2 - Add JavaScript Debug configuration in PhpStorm

Click Run|Edit Configurations... from the menu which will open the dialog box and add configuration by clicking + icon and choose JavaScript Debug as a new configuration. Provide your Name for the configuration and URL for the server.

Alt Text

Step3 - Start debugging

Choose the right debugging configuration and start debugging by clicking on the debug icon.
Alt Text

This will open your project in the new browser.
Alt Text

If you set the breakpoints, you would see the script stops at the breakpoints.

Alt Text

Congratulations! πŸ‘ You have just integrated JavaScript Debugging successfully!

Keep on coding & keep on debugging 🐞

Top comments (1)

Collapse
 
sayyedhammadali profile image
Sayyed Hammad Ali

good one baba!