Inspect Element

General - Quick File Switching

Thu, 12 Sep 2019 00:00:00 GMT

DevTools provides a ‘panel’ like most code editors. From here you can achieve multiple actions.

One time saving action is switching between files. To do this, follow the steps below to improve your workflow:

With DevTools open, hit Ctrl + P (Cmd + P)
A panel will pop up, type the file name within the search area.
Hit enter to open that file in DevTools sources.

JavaScript - Selecting Elements In The Console

Wed, 11 Sep 2019 00:00:00 GMT

The DevTools console provides you with shorterned element selectors to quicken your workflow.

Listed below are three variables and their explanations:

$0 - $4 : A history of the five most recent DOM elements that you’ve selected in the elements panel, $0 being the last.
$$() : A shortened version of document.querySelectorAll() which returns an array of the given CSS selector.
$() : A shortened version of document.querySelector() which returns the first element, matching a given CSS selector.

CSS - Change CSS values using the mouse or keyboard

Fri, 30 Aug 2019 00:00:00 GMT

You can change numerical property values in DevTools using the mouse scroller or keyboard arrow keys.

Keyboard

Up and down change the value by 1.
‘Alt + Up/Down’ to change the value by 0.1.
‘Shift + Up/Down’ to change the value by 10.

Mouse

One scroll of the mouse wheel changes the value by 1.

HTML - Expand Child Nodes

Thu, 29 Aug 2019 00:00:00 GMT

Some nodes in HTML can contain hundreds of children. It’s often time consuming to run through each node and click to expand.

With DevTools you can use ‘Alt + click’ to expand all the child nodes.

Hold Alt on your keyboard.
Click the small arrow on the left of the DOM node.

JavaScript - Unminify JS Files

Wed, 28 Aug 2019 00:00:00 GMT

Within the sources tab in DevTools you can view all the resources used to load the page.

JavaScript files are minimised to reduce size and load time but this makes them illegible.

Click on a JavaScript file within the ‘page’ pane and if it’s minimised use the steps below.

Naviage to the ‘editor’ pane. (The pane showing the code)
Find the two curly brackets at the bottom. They will look like this { }
Click them and you will given a formatted version of the JavaScript file selected.

CSS - Autocomplete CSS Properties

Tue, 27 Aug 2019 00:00:00 GMT

Can’t remember a CSS property name but know the value you need?

Chrome DevTools has you covered!

Within the element.style section in DevTools start typing the value you want to use. If recognised, DevTools will create auto suggestions saving you time.

Example: You know you want your text to be ‘italic’ but can’t remember the ‘font-style’ property.

Type ‘italic’ into the element.style section.
DevTools will auto suggest:
```
font-style:italic
```
Magic.