Do we have enough ways to manipulate all the various elements of our websites? We can do this with themes, website builders, and adding custom CSS and custom code. Do we really need another way to see the code that renders and messes with our web pages?
Yes, if by that we mean using the browser review element tool in WordPress. It is unlike any of the normal ways to manipulate the website and offers some really fun and unique features.
In this article, we will show you:
The Inspect Element tool is a feature commonly found in modern browsers such as Firefox and Chrome. Also known as Developers Tools or simply DevTools. As their names suggest, it’s a suite of tools built into the browser that lets you do some pretty cool stuff – but mostly view and change the content and appearance of a web page.
Opening the tools is as easy as pressing the F12 key on the keyboard if you have a PC – it works in any browser. You can also right-click and select “Inspect Element”. If you are using Mac and Safari browser, you need to enable Developer menu first.. go Safari > Preferences > Advancedand then click the Show Enhancement menu in the menu bar box. After that, use the shortcut right click + Inspect Element or option+cmd+i to bring up the tool.
The bottom window that opens is where all the magic happens. It is usually divided into two parts, the Elements panel where you can view and edit the HTML page, and the other panel where you can view and edit the CSS. In addition to the Debugger, there is also a JavaScript Console you can access.
Now you should know that different browsers may have different options in their DevTools. There is heated debate as to whether the advantage is Firefox or Chromium-based browsers, but either way, It’s important to remember that sometimes you will need certain browsers for certain things.. For example, if you need a Console where you can switch between errors and warnings, as well as CSS and log messages, you should use Firefox. Neither Chrome nor Edge has this option.
Another important point to note is that changes you make in DevTools do not create permanent changes to the website. The beauty of using them is that you can make real-time changes to your web pages without having to worry about accidentally breaking something. It’s a huge sandbox where you can try things out and occasionally find fixes for some issues.. Now, let’s see some of the things you can do with this toolkit.
We will use Firefox’s Inspect Elements tool, but that doesn’t mean you can’t do these tricks and tips in other browsers as well. They may just be found under different names or in different places.
Let’s start with something simple. Go to your website, open any of its pages, highlight one of the titles you have, and then click the Inspect Element tool. DevTools should open with the title in question highlighted in the HTML inspector tool.
Even from there, you can start changing the content of the website just by changing the words in the title. But changing the font, size, letter spacing, and even the color of the title can be even more fun, all from within the CSS editor section.. Remember, none of the changes you make here are permanent.
Scroll down the Filter Styles window until you find options for colors and fonts and have fun. You could even use an eyedropper tool to paint the subtitle to another color on your website, but not sure what that is.
Want to see how fast your website will load at different network speeds? The Inspect Elements tool lets you do this. If you are wondering how fast your web page will load over a 2G network, go to Network from Inspector, find the No Restrictions menu.
Open the menu and select 2G. Reload the page and you will notice the sudden crawl. The option is also available in Chrome – You can even create custom throttling profiles from the settings and view them in the Network tab.
Every website developer needs a way to see how their website looks and behaves on a small screen device. But since it is still more practical to develop and design on a larger screen, we have to rely on some kind of device emulator to help us see how everything will look like on a smartphone, for example.
Responsive Design Mode is built in, with Inspect Elements tools. You can switch easily by pressing the button next to the button that closes the Inspect Items tool.
You will see your page as it appears on mobile devices. You can adjust the size of the screen, dimming and touch simulation. In Chrome, on the left side of the Inspector window, you’ll find the Device Toolbar toggle that lets you do the same.
If you missed it, the tool has its own settings. You can access them by pressing F1 and select default developer tools, toolbox buttons, themes, inspector options, editor preferences, and advanced settings.
You should spend some time getting familiar with the options you have here. They range from switching between a dark and light theme to adding a screenshot button to disabling JavaScript.
Solution
WordPress already gives you more than enough power to style a website and its pages. But sometimes, even more often, it’s good to have a way to try all sorts of things or find solutions to problems in a safe environment.
The Scanner Inspect Element tool does this for developers. DevTools lets you have fun on a playground where you can completely change the look or content of a page without any consequences. Whether you’re doing it to enhance your creativity or to make your website more secure, you have to admit that this feature is more than just useful.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
