Chrome Webstorm

Posted : admin On 1/3/2022
Features
  1. Jetbrains Ide Support Extension
  2. Jetbrains Ide Support
  3. Webstorm Chrome Debug Plugin

Small programs that add new features to your browser and personalize your browsing experience. I am not able to debug my Karma unit tests in WebStorm. How can I fix it? I see this message when I click the debug button: I checked How do I know what's wrong. Chrome://extensions shows: Click. With Chrome 86 (released on October 6, 2020) and higher, the extension no longer works properly and we at JetBrains have no intention to update the extension to work with the new Chrome versions. WebStorm 2020.3 removed the option to use the extension for debugging from the IDE Preferences. If chrome is your system's default browser, you can run a.html file in chrome from WebStorm, by right-clicking the file and selecting 13 & However, if you do NOT want chrome as your system's default browser, you can still tell WebStorm to use chrome. (see next slide) Setting Webstorm's Default Browser.

IntelliJ IDEA 10 allows you to debug JavaScript code running it in Mozilla Firefox. In IntelliJ IDEA 10.5 can choose to debug JavaScript in Google Chrome as well.

Debugger for Chrome supports all features of JavaScript debugger for Firefox, you can set breakpoints, inspect local variables, evaluate expressions and so on:

If you use Chrome for web browsing and want to debug in it simultaneously you can configure IntelliJ IDEA to use a separate Chrome user profile in ‘IDE Settings Browser Chrome‘:

To configure the default debugging browser just edit the ‘JavaScript Debug’ configuration under ‘Defaults’ section.

Download IntelliJ IDEA 10.5 EAP, try the new JS debugger and let us know what you think.

Off-topic: debugging JS in FireFox 4 is supported since IntelliJ IDEA 10.0.3.

Chrome Webstorm

Jetbrains Ide Support Extension

Easy steps to setting up Live Edit (Hot Reload) in Webstorm and making your web development experience much smoother.

1. Create a new project

Create a new project in Webstorm and add an index.html file we will use for our tests.

Insert some HTML code

and launch the page in your browser with the Chrome button on the top right of the html editing area in Webstorm.

2. Live Edit Setup

Good start ! Now let’s setup Live Edit in Webstorm so that anytime a change is made in Webstorm, the changes are automatically picked up by the browser.

a. Create a debug configuration

In the top right, click Edit Configurations to add a new configuration:

In the next screen:

  • Click the + button to add a new Config and choose ‘JavaScript Debug’ [1]
  • Choose a name for your configuration, for examples Live Edit[2]
  • Click on the ... next to URL and select your index.html file [3]
  • Select Chrome in the Browser Dropdown [4]
  • Click Apply

b. Launch the debug session

Click on little Bug icon next to your configuration on the top right, next to your configuration name.

Webstorm

If this your first time using Live Edit, Webstorm will ask you to install a Chrome Plugin

Click the link a proceed to install that plugin in Chrome.

Restart the debugging session from Webstorm and you are ready to go. Try to select elements in the .html file and see how any change has an immediate effect in Chrome.

c. Additional Configuration

At this point, everything is working great but you might find that sometimes some changes are not taken into account.

Go to Webstorm Settings and the Live Edit Section and use the following values:

Jetbrains Ide Support

Webstorm
  • Update: auto - 15ms
  • Check the ‘Restart if hotswap fails’ box.

Webstorm Chrome Debug Plugin

Enjoy :)