Shane O'Moore

Ramblings from a Sligo (Ireland) based Web Developer.

less than 1 minute read

Here’s a short list of tips you can try out when debugging in Chrome Dev Tools that might (hopefully) make your life a little easier :smile:

CSS Overview

This is a handy feature to get some great information about a HTML document. Including colors, fonts, unused declarations and even media queries.

How to enabled: Settings > Experiments > CSS Overview

Font Editor

Quickly edit fonts with this style editor pane.

How to enabled: Settings > Experiments > Enable new Font Editor within Styles Pane

Get Current Element

This one I find personally very useful when you are inspecting an element and just want to grab it really quick from the console. Instead of finding the id or querying for the element some way try this one out.

First inspect the element, then run $0 inside the console window and boom you have the element.

Last Evaluation

Get the previous console window evaluation by running $_.

Design Mode

This one is pretty fun run document.designMode="on" in your console and edit any text as if it’s markdown right in the browser. No need for a screenshot with this tip…you’ll have to try it out yourself :smile:

You May Also Enjoy

5 minute read

Coming Soon - ES2022

1 minute read

With the soon to be released (June-ish) of ECMAScript 2022 I thought it would be a nice idea to have a look at some interesting features en-route.

10 Useful Git Commands

2 minute read

Let’s have a look at some of the most used and also useful git commands that we might find ourselves using on a regular basis. Using something like GitKraken...