Black Friday SALE 50% OFF on the entire line of Qi products Discount code: BLACKFRIDAY2022 Black Friday SALE 50% OFF on the entire line of Qi products Discount code: BLACKFRIDAY2022 Black Friday SALE 50% OFF on the entire line of Qi products Discount code: BLACKFRIDAY2022
Black Friday SALE 50% OFF on the entire line of Qi products Discount code: BLACKFRIDAY2022 Black Friday SALE 50% OFF on the entire line of Qi products Discount code: BLACKFRIDAY2022 Black Friday SALE 50% OFF on the entire line of Qi products Discount code: BLACKFRIDAY2022

Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

7 Tips and Tricks for Using Your Browser’s Inspect Element Tool in WordPress

Tips and Tricks for Using Your Browser’s Inspect Element Tool in WordPress

Can we ever have enough ways to manipulate all the various elements of our websites? We can do it with themes, website builders, and by adding custom CSS and custom code. Do we really need another way to see the code that makes our web pages and mess with it?

Yes, if by that we mean using the browser inspect element tool in WordPress. It’s not like any of the regular ways to manipulate the website, and it offers some really fun and unique features.

In this article, we’ll show you:

What Is the Inspect Element Tool?

The Inspect Element tool is a feature commonly found in modern browsers such as Firefox and Chrome. It’s also known by the name Developers Tools, or simply DevTools. They are, as their name says, a group of tools built into the browser that lets you do some pretty great stuff – but mostly view and change the contents and the appearance of a web page.

Bringing up the tools is as easy as pressing the F12 key on a keyboard if you have a PC – it works in any browser. You can also right-click and choose “Inspect Element.” If you’re using a Mac and the Safari browser, you first need to enable the Developer menu. Go to Safari > Preferences > Advanced, and then click the Show Develop menu in the menu bar box. After that, either use the right-click + Inspect Element or the option+cmd+i shortcut to bring up the tool.

Inspect Element Right Click

The subwindow that opens is where all the magic happens. It’s generally divided into two parts, the Elements panel where you can see and edit page HTML, and the other where you can see and edit CSS. There’s also a JavaScript Console you can access, as well as the Debugger.

Inspect Element Window

Now, you must know that different browsers might have different options in their DevTools. There’s a heated discussion whether it’s Firefox or the Chromium-based browsers that have the edge, but either way, it’s important to remember that occasionally you’ll need specific browsers for specific things. For example, if you need a Console where you can toggle errors and warnings but also CSS and logging messages, you should use Firefox. Neither Chrome nor Edge has the option.

The other important thing to remember is that the changes you make in DevTools don’t 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 that you’ll accidentally break something. It’s a giant sandbox where you can try out things and, occasionally, find fixes to some issues. Now, let’s see some of the things you can do with this set of tools.

We’ll be using Firefox’s Inspect Elements tool, but that doesn’t mean you can’t do these tricks and tips in other browsers, too. They just might be available under different names or in different places.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

Change the Content and Appearance of Headers on a Page

Let’s start with something simple. Go to your website, open any of its pages, highlight one of the headings you have on it, and then click the Inspect Element tool option. DevTools should open with the heading in question highlighted in the HTML inspector tool.

Inspect Element HTML

Even from there, you can start changing the contents of the website simply by changing the words in the header. But it might be even more fun to change the font, size, letter spacing, and even the color of the heading, and you can do all of that from the CSS editor part. Remember, none of the changes you make here are permanent.

Scroll down the Filter Styles window until you find the options for colors and fonts and have your fun. You can even use an eyedropper tool to color the subheading into another color you have on your website but you’re not sure what it is.

Inspect Element Color Picker

Network Speed Simulation

Do you want to see how quickly your website would load on different network speeds? Inspect Elements tool lets you do it. If you’re wondering how quickly your webpage would load over a 2G network, simply navigate away from the Inspector over to Network, find the No Throttling menu.

Inspect Element Network
Inspect Element Network

Open the menu and choose 2G. Reload the page and you’ll notice the sudden crawl. The option is present in Chrome, too – you can even create custom throttling profiles from the settings and bring them up when in the Network tab.

Drag-and-Drop Elements

Don’t let all the code confuse you – you can drag and drop elements in the Elements panel to change their place on the page.

Inspect Element Drag and Drop

Responsive Design Mode

Every website developer needs a way to see how their website appears and behaves on a small-screened device. But as it’s still more practical to develop and design on a bigger screen, we have to rely on device emulators of sorts to help us see how it all would look on a smartphone, for example.

With the Inspect Elements tools, Responsive Design Mode is built in. You can switch to it easily by pressing the button next to the button that closes the Inspect Elements tool.

Inspect Element Responsive Mode

You’ll see your page as it looks on mobile devices. You can adjust the size of the screen, as well as throttling and touch simulation. In Chrome, you’ll find the Device Toolbar toggle – which lets you do the same thing – on the left hand side of the Inspector window.

Inspect Element Responsive Mode Preview

The Image Viewer

A neat little feature you’ll see in Firefox’s DevTools is the image viewer – hover over any image in the CSS inspector and the image will pop up.

Inspect Element Image

The Cookie Jar

Wondering what cookies are created by your page or the iframes inside of it? The easiest way to find out would be to go to the Storage Inspector part of DevTools and see a full list.

Inspect Element Cookie Jar

In Chrome, you can go to the Application window, and under the storage options find Cookies.

Inspect Element Tool Has Settings

In case you’ve missed it, the tool has settings of its own. You can access them by pressing the F1 key and choose the default developer tools, toolbox buttons, themes, inspector options, editor preferences, and advanced settings.

Inspect Element Settings

You should spend some time getting familiar with the options you have here. They range from the ability to switch between a dark and a light theme, to adding a screenshot button and disabling JavaScript.

Conclusion

WordPress already gives you more than enough power when it comes to shaping a website and its pages. But occasionally, or even more often, it’s good to have a way to try all kinds of things or find solutions to problems in a safe environment.

The browser Inspect Element tool does that for developers. DevTools lets you enjoy on a playground where you can completely change how a page looks or what it contains, without any consequence. Whether you’d do it to exercise creativity or make your website safer, you’d have to agree that the feature is more than useful.

Post your comment

Comments0