Blogging and Writing

Handy Google Chrome Developer Tools Tricks for Bloggers

blogging word cloud

Ok, so the title sounds horrendously unappealing, but I promise, it’s not that bad. Google Chrome has a feature that might occasionally come in handy, so that’s what we’re going to talk about.

Developer Tools cam be found in Chrome by going to the View menu, and then going down to Developer at the bottom of the list of menu items. That pops out a little side menu, and what we’re interested in is “Inspect Elements.”

Once you’ve done that, when you hover you mouse over something, extra info pops up. This is the detail that a website gives your browser so that it knows what to display.

Identify a font

screenshot of Developer Tools Inspector details about a text paragraph

So, what’s all this nonsense? This is from my home page, hovering over a paragraph of text. Let’s say you want to know what font I’m using because you’d like to try it on your blog. This tells you that I’m using PT Serif font.

Identify a colour

screenshot of Chrome Inspect tool showing font and background colours

This is an Inspector screenshot of me hovering over the pale blue background that was shown in the screenshot above. Do you like that colour and want to use it? Feel free. This shows you that the background colour is hex code #F0FFFE.

Identify a block type

screenshot of Inspector view of media text block

Let’s say you see something on someone’s site that you might want to try, but you don’t know what kind of block it is. The Inspector can tell you, although not really in the prettiest way. In this screenshot, I’m hovering over the top block. The “div” is html and not relevant for our purposes. But the next part is. Wp-block is the WordPress block type, which in this case is a media+text block, displayed as media-text. So, if you want to create something like this, you can use a media+text block.

Check out the CSS

screenshot showing styles in Chrome developer tools

This part gets fancier. Cascading style sheets (CSS) is something you can use on the WordPress premium plan or above, or on self-hosted blogs. In the media+text blocks in the previous screenshots, there’s blue shadowing, which a basic media+text block doesn’t do.

If you want to find out how that happens, instead of just hovering over a block, click on it. All the way along, there’s been this scary code-y mess on the right hand side of the screen; now w’er going to actually look at it. The top part is html, which we’re going to ignore. The bottom part, under the Styles tab, is what we’re interested in.

The third bit down you’ll see “.media-text-box”, and in grey to the right of that it’s marked as custom-CSS. This is the CSS code I’ve created to apply to blocks marked with the CSS class I’ve called “media-text-box.” I’ve added padding around my block, and then I’ve used the box-shadow CSS property to create the shadowing effect. If you want, you can then use these bits of code, or go look up on a site like W3Schools to see what you can do with box shadows. That’s how I discovered them in the first place; I saw it on someone’s blog, found out what it was using the Inspector, and then mucked around on my own.

For most of you, the last bit about CSS is probably completely irrelevant, but there may come a time when you might want to know what font, colour, or block type someone is using, and now you can. There’s a whole lot more that Chrome developer tools can do that are far beyond my understanding, but the inspector bit is less scary.

Do you ever get your geek on and mess around with stuff like this, or do you mostly stick to more sensible activities, like actually blogging?

The regular blogger's guide to blogging - graphic of WordPress logo and cogs turning

The Regular Blogger’s Guide to Blogging has tips and tools that are relevant and useful for the average blogger.

19 thoughts on “Handy Google Chrome Developer Tools Tricks for Bloggers”

  1. Or – you can simply right click anywhere, on any page and choose “inspect” – no need to use the View menu…

  2. Lmao – the word “sensible” in your last paragraph. ๐Ÿ˜„. Because CSS, developer tools and all these things are not sensible? ๐Ÿ™ƒ.
    I love it.
    All of it is very sensible. It’s just incredibly hard for some of us to follow that stuff without getting a little sleepy because we cannot all be brillant like some people. Ha.

      1. It’s more of a general observation about you. Versus pertaining to this particular post. You have written articles where you debunked elements of quantum physics as they pertain to some topic or other within “science”. I read that last night and said to myself “Holy Shit!” It was kind of amazing.

          1. I meant debunking some element within quantum physics in comparison to something else. It’s far too complex for me to recall properly here. I didn’t mean debunking the whole field itself, lady!
            Anyway. I could argue with you all day long about your high intelligence level, but I find that it is now time for me to start moving and get off my ass ๐Ÿ˜ƒ. May you and your readers have a great day.

  3. CSS is something I was fiddling with for a long time with my old theme. It didn’t give me many options for changing colours and fonts on my site. Now, I have a better optimized theme and it gives me a lot of options. Definitely worth the change. That colour picker is something I could certainly use though!

    Ang |

  4. Wow, yeah, you’re a tech genius! When I was making my indiegogo crowdfunding page yesterday, they had these optional fill-ins that had something to do with this sort of thing? It was greek to me, and I skipped it. I can’t even think of the words for what it was. But at least it was optional! I’m going to make mental note of this blog post, though, in case I ever happen upon a blog where I want to know the font. It seems useful that you can reverse-search and get that info, so thanks for sharing! Who knew? The internet never ceases to astound me!! ๐Ÿ˜ฎ

  5. Bonus tip: Developer console also has a terminal which can run javascript. You can use this to do interesting things like intercept someone’s credit card number or, as I did, bulk delete every YouTube comment you’ve ever made instead of having to click “delete” on every single one. Lol

  6. Ummm… I can tape things together ๐Ÿคช I lost my tech edge in the 90s, I think. I can read about concepts and mostly understand, but retention is negligible.
    I know who to ask if I have questions though ๐Ÿ˜‰

Leave a Reply