<aside>
💡 Let’s also set up live reload/preview package in Atom. You can install atom-html-preview for a in-IDE preview tab, or atom-live-server for in-browser experience.
</aside>
I am definitely a “Safari guy” for my daily driver browser. But for dev work, Chrome’s the best in town. (They are all somewhat bad, in different ways.)
It has the most robust, best-in-class set of DevTools—though Safari and Firefox have their own versions, too. You’ll often hear people call it the “Web Inspector” or just “The Inspector”. It’s going to be your best (web) friend, showing you everything that the browser parses to display the page.
In Chrome, you can bring them up by right-clicking on any element/part of a page and clicking Inspect.
You can also hit ⌘ ⌥ I on the Mac.
You’ll see the tools on the right side of the page. Depending on how big your screen is, they might be laid out a bit differently—but the basics are the same:
The top part is the DOM—you can expand/collapse all the nested HTML Elements on the opened page.
The first button in the upper-left lets you mouse over on the page, and will then show you that element hierarchically in the DOM.
The second (more on this later, toggles the Device toolbar, “responsive mode.”
Handy tip here: ⌘ F in here will let you search for elements or text by name.
The middle part is for the styles. It shows whatever CSS properties apply to the element you have selected above, in the DOM.
These are ordered with the most-specific at the top, with cascading/conflicting rules crossed out lower.
On the right, you can see the sum Computed values of all the rules that apply.
Below this is the Console, which is for debugging Javascript. We’ll talk more about this later.
But they are temporary—these changes will be lost when you leave or reload the page! They are just for you.**
First open the inspector, as noted above.
Enter the device mode with the little phone/tablet icon.