Clever Geek Handbook

Unable to edit HTML in Chrome developer tools. Sources Tab

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

+3


source to share


3 answers


After the DOM is loaded, the browser does not use the original source as the DOM can be modified on the fly by Javascript. If you want to make live changes to the DOM, you can do so from the Elements tab. Right click on an element or attribute and there are options for editing it.



+8


source


If I understand you correctly, you are trying to edit the left side of the source. Try double-clicking the item if you want to edit the code, or right-click and select Edit as HTML.



+2


source


I had the same problem and a search brought me here.

For me, what fixed this was to open the navigation pane, then click on Filesystem, then click on Add Folder to Workspace, and then click on the folder location of any file you want to edit. After that, I was able to freely edit HTML.

0


source






More articles:


All Articles