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 Chromeand 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 theElementspanel.
- PressCommand+Option+C, if you have a Mac orControl+Shift+Cin 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 theEscapekey, this will discard all your changes. You must ensure them clicking Ctrl+Enteror pressing outside of the text box you are editing.
HTML edits can be undone or redone pressing Ctrl+ZandCtrl+Yhotkeys. 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.
Oh, and by the way!
Are you already using Edit?
This blog is run by Edit, a Chrome extension that turns any website editable in a single click.
It's very useful for marketers, copywriters and digital professionals in general because it allows to try and test quick changes on the content of a website in the easiest and simplest of ways, without the need for any designer of developer. You don't need any programming knowledge whatsoever either. It feels *really* empowering! Just have a look:
Since you're already reading blog posts like this one, you might enjoy using it! It may very well save you hours and dozens of back-and-forth emails with your designers and developers when asking for small changes just to test things out!
Check it out!
Discover everything you can do with Edit
