Can't edit HTML in Chrome dev tools Sources tab

Issue

I have a noob question about the Sources panel in dev tools: when in the Elements tab I see my CSS to the right. I click on a CSS file and am brought to the Sources tab where I can make live edits. I can bring up the JS and do the same, but... If I bring up the HTML file, I am unable to make any edits to the HTML. Why is this? Is this by design? What am I missing?

Solution

Once the DOM is loaded, the browser doesn't use the original source, since the DOM can be modified on the fly by Javascript. If you want to make live edits to the DOM, you can do it in the Elements tab. Right click on an element or attribute, and there are options to edit it.

Answered By - Barmar