How to test quick changes to web pages before making them

Most developers use a local development environment that replicates the live website. They use it to test any change made to the website before it is pushed to the live server.

This can be an update, for instance a new version of WordPress, the installation of a new script or feature, or a change to a site's layout or design.

It makes sense to test these things locally first as site visitors may otherwise be exposed to them, bad if a change has not the desired result or renders functionality useless on the site.

You may not have access to the local development environment at all times, or don't use one at all, that's when Development Tools that ship with browsers such as Firefox, Google Chrome or Internet Explorer come in handy as you can use them to test changes on the live side without modifying a single file for all users.

In fact, you can use it to modify any site you come across on the Internet not only your own. Note though that the changes are of temporary nature only which means that they are gone as soon as the page gets reloaded or the browser closed.

Developer Tools

The tools work all in the same fashion and I'm demonstrating how you use them to make quick changes in Chromium.

You can star them with a tap on F12 most of the time. The interface opens at the bottom of the screen automatically. Depending on the browser you are using, you may see the HTML and CSS code or other information.

The inspector tool is one of the most useful tools that you have access to. It allows you to select any element on a web page, the page title, an image, text or media, to focus on it.

In Chromium, the HTML code is displayed that is powering it as well as all CSS styles. To modify it, simply change the HMTL code or the CSS style information.

Instead of modifying existing information, you can also add new code to the page to test it and see if it works fine or requires refinement.

Here is a basic example highlighting a simple modification:

1. Visit the Windows News website.
2. Hit F12 to open the Developer Tools in the browser.
3. Select the Inspector element. In Chrome, that is the leftmost icon in the "elements network sources" bar.
4. Once selected, click on the page title Windows News.
5. Chromium jumps to the right location in the HTML and displays all CSS styles affecting the page title.
6. To change the HTML code, simply modify it by clicking in it. You can change the page title for instance, or replace it with an image to see how it looks.
7. Styles on the other hand let you modify how the title is displayed. You can modify the color of it or its size, change its alignment, or modify other parameters such as border and margin values.

Conclusion

Developer Tools offer a quick way to test changes without applying them right away to a website. While you cannot use the tools to test updates or new plugins, you can use them to test any code or style modifications to make sure they are right before modifying the files on the web server.