Webstorm Javascript
Previous videos from the series Debugging JavaScript in WebStorm and Chrome:- client-side.
- It is possible by creating a macro that formats the code and save it, and then bind this macro to Ctrl+S shortcut. (Mac: Cmd+S) This answer was posted for phpStorm and it is equally valid for WebStorm.
- The WebStorm documentation says to simply open the HTML file in the browser, but that doesn't seem to work. For what it's worth, everything is working up on codepen.io. Here's the HTML (for a simple weather app).
- Creating a JavaScript program using WebStorm CS 105: Introduction to Computer Programming Khan Window Complete Program The Khan Academy videos let you edit the JavaScript code to create your own cool images, animations and more. However, the code in the Khan Academy window is NOT a full program: it only works inside Khan Academy's window.
This tutorial describes configuration and workflow with Live Edit feature in WebStorm.
What is Live Edit?
Jet Brains Js Ide
Live Edit gives you an opportunity to see all the changes you make in your HTML and CSS files instantly in a browser without refreshing the page. Just install the extension for Google Chrome and, as you edit HTML, CSS or JavaScript in WebStorm, Live Edit will push your changes to the browser without reloading the page and highlight the elements you are working on. Completion lookup is also live.
Live Edit also supports SASS, LESS, CoffeeScript, TypeScript, etc. (a configured file watcher is needed). CSS and JavaScript (including any other language that can be transpiled to CSS or JavaScript) will be hot-swapped without a page refresh. Hot-swapped JavaScript will be effective only if it used in cycle or event-driven.
Note: the list of supported browsers includes only Google Chrome, Chrome Canary and Dartium.
Installing Google Chrome extension
To use Live Edit you need to install JetBrains IDE support for Google Chrome.
The Google Chrome extension JetBrains IDE Support is available in Chrome Web Store. It can be installed for free. A browser restart is not required.
1. Open the Chrome Web Store and navigate to JetBrains IDE Support extension. Click the + button.
2. 'Add JetBrains IDE Support' popup will appear, listing permissions asked by the extension. Click Add.
3. The extension has been installed! No reboot is required. A popup with confirmation will appear and extension icon will appear near the search bar.
Starting JavaScript debug session
To start using Live Edit you need to start a JavaScript debug session for any html file.
{To start the JavaScript debugger|http://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session], select Debug file from the context menu of any html file (or in the context menu of the editor when the file is opened).
A new Run/Debug configuration will be created automatically, the debug session will start and file will be opened in the browser.
Otherwise, you can create a Run/Debug Configuration manually:
1. Click the drop-down list at the top right-hand corner of the IDE window and select Edit configuration. Alternatively, this action is also available in the main WebStorm menu Run.
2. Click ‘+’ to add a new JavaScript Debug configuration.
3. Provide the URL you would like to use Live Edit for: select the html file path (then WebStorm will use its built-in web server to serve it) or a page address on any other web server.
Once configured, we can start the JavaScript Debug session by clicking Debug at the top right.
Note: make sure that the View | Live Edit option is selected.
Inspect in WebStorm action
Alternatively, open the page you'd like to edit in Chrome by selecting Open in Browser from the context menu of the html file.
When page opens, select Inspect in IDE from the context menu.
Using Live Edit
Place WebStorm and Chrome on your screen in such a way that you can see both applications to take advantage of Live Edit instant changes.
Click the Debug button to run a JavaScript Debug Session or use Inspect in IDE action.
From now on, any changes you perform will be instantly shown in Google Chrome browser without a page reload. For example, you can edit text, manipulate colors to find one that suits you best, etc. Any CSS/JavaScript used by the file you are debugging will be instantly updated as well.
Webstorm Javascript Debug
Troubleshooting
First of all, check that all actions listed under Installing Google Chrome extension and Starting JavaScript debug session sections of this tutorial have been performed.
1. I get the message 'Internal HTTP server disabled. Cannot start internal HTTP server. Git integration, JavaScript debugger and LiveEdit may operate with errors...'
The IDE failed to bind to port 63342. Please check your firewall settings and restart the IDE.
2. I get the message in Chrome log: 'System latest connected to xxx.xxx (127.0.0.1:63342)', but LiveEdit is not working.
Probably there is another instance of a JetBrains IDE running, meaning that port 63342 is already bound. Please check that the product name corresponds to your IDE (where 'xxx' stands for the build number, e.g. '126.159').
3. How do I configure an IDE connection (IDE port)?
Open chrome://extensions/
Scroll down to the section JetBrains IDE Support and click Options.
OR, right-click the JB browser icon and select Options.
4. How to enable logging?
Please see the instructions on this page.
Features
Don't Compromise
on the Development Experience
The smartest editor
Use the full power of the modern JavaScript ecosystem – WebStorm’s got you covered! Enjoy the intelligent code completion, on-the-fly error detection, powerful navigation and refactoring for JavaScript, TypeScript, stylesheet languages, and all the most popular frameworks.
Mobile
- Ionic
- Cordova
- React Native
- Electron
Debugger
Debug your client-side and Node.js apps with ease in the IDE – put breakpoints right in the source code, explore the call stack and variables, set watches, and use the interactive console.
Debugger
Debug your client-side and Node.js apps with ease in the IDE – put breakpoints right in the source code, explore the call stack and variables, set watches, and use the interactive console.
Seamless tool integration
Take advantage of the linters, build tools, test runners, REST client, and other tools, all deeply integrated with the IDE. But any time you need Terminal, it's also available as an IDE tool window.
Unit testing
Run and debug tests with Karma, Mocha, Protractor, and Jest in WebStorm. Immediately see test statuses right in the editor, or in a handy treeview from which you can quickly jump to the test.
Integration with VCS
Use a simple unified UI to work with Git, GitHub, Mercurial, and other VCS. Commit files, review changes, and resolve conflicts with a visual diff/merge tool right in the IDE.
What’s New in WebStorm 2021.1
Smarter completion for JavaScript
Download Webstorm For Windows
ML-assisted completion for JavaScript and TypeScript is now enabled by default. Additionally, suggestions for symbol names have become a bit smarter.
Improvements for HTML and CSS
A built-in HTML preview, better support for Stylelint, and details about selector specificity in CSS will help you work more productively.
Usability enhancements
This version is packed with new settings for choosing editor font weight, the ability to maximize tabs in the split view, and fixes for a lot of known issues.
Why WebStorm
Get up and running quickly
Start working on your projects immediately instead of wasting time juggling multiple plugins. With a variety of built-in developer tools and out-of-the-box language and framework support, there’s everything needed for productive JavaScript development.
Increase your productivity
Don’t spend your time going back and forth between the terminal and text editor or on things that can be automated with the help of refactorings and quick fixes; it’s what the IDE is best at. It puts the most critical developer tools like the debugger and Git at your fingertips.
Write better code with less effort
Write cleaner and more reliable code as the IDE runs dozens of inspections as you type and promptly detects potential errors and redundancies. Save time exploring the code base with autocompletion that suggests which variables and methods are most relevant in the current context.
Swiftly find what you need
Get around your code faster regardless of how large your projects are. Jump to the definition for any class, function, method, variable, or component and find its usages in just a few clicks. Easily navigate through the file you have opened with an at-a-glance view of its structure.
Tailor the look and feel to your liking
Don’t feel like using the defaults? Adjust the appearance and behavior of the IDE by playing around with themes, code styles, plugins, and more, so that it fits your unique needs better. You can also automatically share your custom settings between different instances of WebStorm.
Join our customers
Teams all over the world use WebStorm. Join them and get the best development experience
What our customers say