Ever want to change a simple background color on your site, but can’t find a setting in your theme?
Have an error that’s driving you crazy, but you don’t know what to tell your tech person to get them to understand what you’re talking about?
Well, there’s good news. If you use Google Chrome, one of your most useful blogging tools is hiding inside your browser. It’s called Chrome Developer Tools and it can help you find errors, tweak colors and styles, and more.
The price? 100% free!
What’s Chrome Developer Tools?
Chrome Developer Tools, or “dev tools” for short, are a set of exploration tools built into the Google Chrome browser. They allow developers to look deeper into a site’s structure, code, scripts, and more.
But these tools aren’t only for developers. They can be useful for bloggers, too! A few things Chrome Developer Tools will help you with include:
- Tweaking colors and fonts
- Seeing what your site looks like on mobile devices
- Communicating with your tech person
Keep reading below and I’ll show you how.
A very brief introduction to website structure and styles
Before we jump into how to use Chrome Developer Tools, let’s get a feeling for what we’ll be looking at.
HTML: Hypertext Markup Language
Webpages are made up of HTML (Hypertext Markup Language). HTML consists of tags that give your browser information about the structure of your site.
If you’ve ever typed out a blog post in your website’s post editor and noticed words like “heading” or “paragraph,” you were working with HTML. Your website’s platform inserts the HTML tags for you so all you have to worry about is writing.
With a few exceptions, most HTML tags have an opening tag and a closing tag. You can tell opening and closing tags apart by the forward slash in the closing tag.
The closing tag tells the browser “Okay, we’re done here now!” The items you want affected go in between the opening and closing tags.
Great! You know enough about website structure to be dangerous. Now let’s move on to learning about what gives your site its look.
CSS: Cascading Style Sheets
CSS stands for Cascading Style Sheets. CSS is used to give your site fonts, colors, and more.
The way we write CSS is a little different than HTML. We still have an opening and closing, but instead of less than/equal than signs and a forward slash, we use curly braces.
CSS uses declaration blocks to find HTML tags and apply styles to them. In this example, we’re telling the browser our site’s paragraphs have black text:
CSS is a huge topic that we could spend months on, but that’s about all you need to know to make small changes to your website using dev tools.
Now that you’ve got a basic understanding of website structure and styles, we can move on to why and how to use Chrome Developer Tools to make improvements to your site.
1 | It will help you make small adjustments to your site without paying someone else to do it
Ever want to change the background color on something or adjust the font size of your blog posts? Chrome Developer Tools can help you complete these small adjustments without paying someone to do it for you.
To get started, right click on the item you want to change and choose Inspect:
If you’re not a developer, tools like this can be overwhelming. And that’s okay! The best thing to do to get started is to right-click on the element you want to make changes to and ignore everything else.
For example, suppose I don’t want my post headings to be uppercase and I can’t find a setting in my theme to change it. I can right-click, hit inspect, and see what CSS rules are causing the behavior.
Now comes the coolest part of dev tools. You can make changes to the code and see how it would look on your site without actually changing anything.
[sharable-quote tweet=”Learn how to make changes to the code on your site and see what different colors and fonts look like without actually changing anything.” user=”nicolepdev” template=”qlite”]
Go ahead, change away! Refresh your browser window and everything will go back to the way it was. If you’re new to CSS and not sure which property you’re looking for, do a quick Google search for what you want to change and the keyword “CSS.”
In this example you’d Google something like “uppercase CSS” and you’d see that it’s a property called text-transform. And if you type the property into dev tools, a helpful menu of all the options will pop up:
If you want to save your changes, you can copy and paste the CSS code from dev tools into the custom CSS area of your website.
In WordPress, it’s usually in the Appearance > Customize menu on the left-hand side of your dashboard. Platforms other than WordPress have similar options.
2 | It will help you see what your site looks like on any device
Did you know that half of all traffic on the internet comes from people browsing on mobile? Considering that, it’s important to have your website looking good on all devices.
But what if you’re an iPhone person and you have no idea what your site looks like on an Android device? Dev tools to the rescue!
Dev tools has a built-in emulator that will show you what your site looks like on any device. An emulator is a program that allows a system to look or behave like another system, and in dev tools you can make your browser behave like several different mobile devices.
To access this feature, click the toggle device toolbar button in the upper left-hand corner of the dev tools panel.
This will open up an additional menu at the top that will allow you to select which device you’d like to emulate.
Why should you care what your site looks like on mobile devices? Well, other than the traffic stats we talked about above, it’s great for SEO and the right thing to do from an accessibility standpoint.
Emulate your site on a few of the most popular mobile devices, like iPad, iPhone, and Pixel and check for things like:
- Usable menus. Does your menu bar work on mobile? Can you see each link and use the menu to move around the site?
- Font sizes. Are the fonts big enough to see? Does the color of your content provide enough contrast so people with vision problems can read it?
- Obstructions. Do you have newsletter pop-ups, privacy notices, or any other elements that show up on mobile and prevent users from viewing and using your site?
You want to make it as easy as possible for all users on any device to access your content, and dev tools can get you started in the right direction.
3 | It will help you communicate with your tech helper
Ever send a problem to your tech person and wonder what takes them so long to fix it? They’re the experts, right?
Well, even experts need to know where to start, and that’s where troubleshooting comes in. Your tech person usually takes a problem you send their way and tests it against a couple of things to get an idea of where to start fixing it.
Troubleshooting takes time, so how you present a problem matters. And when your tech person has to start from scratch to figure out an issue, the issue ends up taking longer to fix.
You can help your tech person along by taking a look at what’s going on in the console tab in Chrome Developer Tools. Instead of saying something like “it’s not working,” tell them the specific error messages you’re seeing or what specifically is or is not happening that makes you think there’s a problem.
Errors in the dev tools console may not be related to the problem you’re having, but it’s a great first step in opening good communication lines between you and the person working on your website and a good tool to keep in your blogging arsenal.
In this article, I talked about how to use Chrome Developer Tools as a blogging resource to:
- Tweak styles, colors, and fonts
- See what your website looks like on any device
- Communicate with your tech person
While it can be overwhelming at first, knowing more about the structure and inner workings of your website will build your confidence when tech issues arise and help you make decisions that benefit the overall health and functionality of your site.