Next, I looked at the Console.
I learned that it has some predefined helper functions! You can use `$(selector)` as an abbreviation for `document.querySelector(selector)`.
Similarly, `$$(selector)` is short for `document.querySelectorAll(selector)`!
Even though this reeks of jQuery, I think these are fantastic in this context and I might use them *a lot*!
Let's start with the "Inspector", which shows you the tree of HTML elements.
You can directly summon it, and inspect a specific element on your current site by pressing Ctrl+Shift+C (Cmd+Opt+C on macOS), and then clicking your element.
This is similar to right-clicking the element, and pressing Q, but I like Ctrl+Shift+C a bit better because it will give you a live preview of which node you are picking!
All tree views in the DevTools have pretty good support for keyboard shortcuts!
You can use arrow up & down to highlight different elements, and arrow right & left to unfold/fold the elements.
You can find a full list of keyboard shortcuts here: https://firefox-source-docs.mozilla.org/devtools-user/keyboard_shortcuts/index.html
All elements with "display: flex" have a little "flex" pill icon next to them. If you click it, it will highlight the structure of the flexbox, and keep it highlighted as you interact with it!
This is probably common knowledge, but I wasn't aware of it so far:
The sun & moon icons in the "Rules" tab allow you to quickly force the site into light mode/dark mode! ☀️🌙
You can open the web console in a split view by pressing Esc!
This is the same console as in the "Console" tab. And this works in any tab, not just the Inspector! Super useful if you wanna see more things at once!
In the CSS pane, there's this little dashed box icon after CSS rules. Click it to permanently highlight the matching elements on the page!
Here, I highlight a specific <p> element. The colors that are used correspond to the colors in the "Layout" tab, and show you the size of the margin, border, padding, and content area.
Also, really good if you have two monitors!
