Menu
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?
662
asked Oct 20 '14 19:10
By right-clicking on the HTML in the “Elements” tab and selecting “Edit as HTML,” you can make live edits to the markup of a webpage that Chrome will immediately render once you're done editing.
Open Google Developer Tools using the Tools menu or press Ctrl + Shift + I / Cmd + Shift + I. Navigate to the Source tab, and then click the Sources icon or press Ctrl + O to select your JavaScript file. Press Ctrl + S / Cmd + S to save your new changes.
Alternatively, use the keyboard shortcuts – Ctrl + Shift + I for Windows or Linux and Cmd + Option + I for macOS users. Or, right-click on the web page and choose Inspect to access the Developer tools panel. Once the Elements tab appears on your browser window, you can edit the page's source code.
Inspect element is one of the developer tools incorporated into the Google Chrome, Firefox, Safari, and Internet Explorer web browsers. By accessing this tool, you can actually view — and even edit — the HTML and CSS source code behind the web content.
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.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
