Live Edit in Node.js applications
With the Live Edit functionality, the changes you make to your HTML, CSS, or JavaScript code are immediately shown in the browser without reloading the page.
Live Edit works for other file types that contain or generate HTML, CSS, or JavaScript.
By default, Live Edit is enabled only in HTML and CSS files, but you can enable it in JavaScript files as well.
In the example below, the index.pug file is compiled into and HTML file in the runtime. During a debugging session, the changes that you make to index.pug are reflected in the browser.
Before you start
Make sure you have Node.js on your computer.
Make sure the JavaScript and TypeScript, JavaScript Debugger, and Node.js required plugins are enabled on the Settings | Plugins page. For more information, refer to Managing plugins.
Install and enable the Live Edit plugin on the Settings | Plugins page, as described in Installing plugins from JetBrains Marketplace.
Enable Live Edit
Press Ctrl+Alt+S to open settings and then select .
By default, the Only HTML and CSS option is selected. To enable Live edit in JavaScript as well, select the JavaScript, HTML and CSS option.
Select Update Node.js application on changes. Specify the time-delay between changing the code in the editor and showing this change in the browser: accept the default value
300 msor specify a custom value using the spin box next to the corresponding field.If necessary, enable tracking changes in files that are compiled into JavaScript, HTML, or CSS. These can be, for example, TypeScript, Sass, SCSS, .pug or other files.
Use Live Edit
Set the breakpoints where necessary.
Create a compound Node.js + JavaScript Debug run/debug configuration as described in Create a two-in-one Node.js+JavaScript debug run/debug configuration.
Start a debugging session as described in Start a session to debug the server and the client code.
In the Debug tool window, that opens, step through the program. When you reach the client-side code, the browser opens. As you step, the appearance of the page changes. Update your code as necessary and view how the updates are reflected in the browser on stepping. changes.