If you want to edit a website you own, what if someone visits while your site is ‘getting changed’? They’re not going to like what they see.
Luckily, there’s a way to instantly preview HTML and CSS changes without them going live. It’s called ‘developer tools’ and it’s a little-known utility built into your browser. Even if you haven’t got your own website, you can still use developer tools to edit a website, as it works with any website you can view in your browser.
How Does Developer Tools Edit a Website?
Developer tools allows you to view the HTML source of a page, as well as all the CSS associated with each element, and edit the code as much as you like. The changes will show up instantly in your browser. Cool, right?
Now, don’t get fooled into thinking that this actually makes permanent changes to the page online. Click the reload button, and all your changes will be gone. There’s no way of saving your changes (other than taking a screenshot). But the utility is still incredibly useful, as you’ll find out.
How to Bring Up Developer Tools
On Google Chrome, simply right-click any element on a page and select ‘Inspect Element’ to bring it up. On Firefox the feature is called Firebug, on Opera it’s Dragonfly, and Safari and even Internet Explorer have developer tools too.
Why Use Developer Tools to Edit a Website?
Especially if you’re not 100% sure what you’re doing, if you’re making HTML or CSS changes to a live website, it’s a good idea to test them out using developer tools first, to make sure you don’t get any unexpected results.
You could use developer tools to preview any changes you want to make to your website before you actually go and make the changes. Especially if it’s a website where you want as many happy visitors as possible, you don’t want to take the chance of a potential reader arriving on the site while it’s not looking its best.
But that’s not the only reason why developer tools is a great utility to get familiar with. You can use it on any site you like, not just your own, and play around with the look of the site and see how it uses HTML and CSS to look the way it does.
Here are some examples. Want to know the hex color code of Facebook’s signature blue color? Or are you curious as to why the links in Google’s black bar seem to act as blocks, rather than text links? Developer tools is the way to find out!
Try It Out For Yourself
Ready to try out developer tools? Right-click this text and select ‘Inspect Element’, or the equivalent in your browser. Now go into the CSS pane and add a rule to change the color or font of the text. It changes instantly!
Try right clicking the element in the HTML pane and selecting ‘Edit HTML’. Now you can edit the text on the page. You can even delete this paragraph altogether by selecting ‘Delete Node’.
That’s just the tip of the iceberg of what’s possible with developer tools, a handy utility for whenever you want to edit a website.
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
