Looking for how to edit HTML in Chrome on the fly?
We know that not everyone has a developer background so here are two methods that will allow you to edit html in chrome
What should you know first?
Chrome Dev Tools
What’s this? How can it help me to live edit HTML?
Chrome DevTools is a bundle of tools built exclusive for Google Chrome and that can only be managed inside the browser. DevTools allows you to live edit pages and detect problems on the fly.
How can I open Chrome Dev Tools to edit HTML?
- You must right-click an element on the website and click Inspect, this will lead you to the Elements panel.
- Press Command+Option+C, if you have a Mac or Control+Shift+C in you have a Windows, Linux, Chrome OS.
Why do I need it to edit HTML in Chrome?
If you are looking to live edit html following the first method we will propose to you, it is vital for you to know what Chrome Dev Tools are and how to get to them
Now that we have clear what Chrome Dev Tools are, let’s go ahead with Method 1
Method 1: edit HTML code in Chrome with Chrome Dev Tools
Open Chrome Dev Tools or “inspector” following the guide we have included above. Once in open, click the element that you want to edit and it will take you to its HTML code; in addition, Chrome will show you its positioning and sizing information.
Once an element is clicked, it will allow you to interact with it in a lot of different ways. Right-click on the HTML code and press “Edit as HTML”; following this, you will now be able to live edit the html of this element in Chrome, it will be rendered once you’re done editing.
How to confirm DevTools that you have finished your HTML edit ?
Do not hit the Escape key, this will discard all your changes. You must ensure them clicking Ctrl+Enter or pressing outside of the text box you are editing.
HTML edits can be undone or redone pressing Ctrl+Z and Ctrl+Y hotkeys. They will also erase upon page refresh unless you ensure your changes.
Method 2: edit HTML using this Chrome extension
If you are looking for a tool that allows you to make quick edits to a website, testing different ideas, this Chrome Extension is your best choice, being able to do different changes over your HTML code and watching in real time how this changes will look on your site, no tech expertise needed.
This is why this Chrome extension exists, to take the methods above to the next level and empower digital professionals with the right tools so they can be able to edit html on their own, giving them freedom to propose changes and innovations while working with websites but without coding know-how; being able to be part of the conversation again and independently of tech experts.
This Chrome extension it’s called Edit, and you just need to install it and click its icon to turn the current website instantly editable:
It sells for $15, and you can check it out here:
Conclusion
There are two different methods that allow you to edit HTML, but the first can be very inconvenient and limited to people with developer background. The second method, with Edit Chrome extension, is a convenient, one-click solution to live edit html.
