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.
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:
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.Advertisement
Ghacks is a technology news blog that was founded in 2005 by Martin Brinkmann. It has since then become one of the most popular tech news sites on the Internet with five authors and regular contributions from freelance writers.