View actual HTML DOM

Last modified: 02 August 2021

Required plugins:

JavaScript and TypeScript, JavaScript Debugger -  The plugins are bundled with RubyMine and enabled by default.

Live Edit -  Install the plugin on the Settings/Preferences | Plugins page, tab Marketplace.

When you are debugging client-side code, the Elements tab of the Debug tool window shows the HTML source code that implements the actual browser page and its HTML DOM structure.

Any changes made to the page through the browser or in the editor are also immediately reflected in the Elements tab.

Currently this functionality is supported only for Google Chrome and only during a debugging session.