Can't edit HTML in Chrome dev tools Sources tab

Question

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 1

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.

Solution 2

If I understood you correctly, you are trying to edit the left side of source. Try to double click on position when you want to edit code or get right click mouse and click on "Edit as HTML".

Solution 3

I had the same issue and a search got me to here.

For me what fixed it was to open the navagator bar, then click "filesystem", then click "add folder to workspace" , then click the folder location of whatever file you are wanting to edit. Once done, I was able to edit the html freely.