While browsers’ dev tools are incredibly useful, they can be intimidating. Especially the first time you open them up. There’s a lot going on in those panels. Do you need to learn all of this stuff?
Well, no, you don’t need to learn it all. This video is meant to give you the foundation you need to start being productive in dev tools today. I start with the very basics: showing you how to open dev tools and work with the window they live in. Then I go over working with HTML and CSS. And then I finish with some light JavaScript debugging.
YouTube embeds track user data for advertising purposes. You can watch the video on YouTube if you prefer not to grant consent for YouTube embeds.
Highlights
Here are the highlights of what I talk about in the video. These are written for Chrome, though all of the features I talk about are present in other browsers, just in different locations.
Developer Tools Window
You can open dev tools with a keyboard shortcut: Command + Option + I (Ctrl + Shift + I for Windows)
You can also open dev tools through the View > Developer > Developer Tools (Menu > More tools > Developer Tools for Windows)
You can also right-click any element on a web page and select Inspect to open the Elements panel with that element highlighted.
Next to the Close button, there’s a
icon. Clicking this will reveal a menu that lets you pop the dev tools out into their own window or change the edge of the browser they are docked to.You can resize the Developer Tools window as well as many panels inside of it. Experiment until you’re comfortable.
Elements Panel (Styles)
With an element selected, you’ll see the styles that are applied to that element.
These styles can be edited by typing new values. Numerical values can be adjusted with your arrow keys. Modifier keys adjust the jumps in values the arrow keys make.
Some value types, such as colors and transitions, offer graphical interfaces to edit those values more easily. If you see a little icon next to a value, click it to open this editor.
Elements Panel (Markup)
You can change text, elements, and attributes by double-clicking and making changes. Experiment to get a feel for what can be changed this way.
For more freedom, you can right-click an element in this panel and select Edit as HTML. This lets you edit the markup as plain text.
You can delete highlighted elements with the Delete key.
You can reorder elements by dragging them around.
You can undo changes with Command + Z (Ctrl + Z for Windows)
JavaScript Debugging
Place a debugger statement in a JS file to stop execution. This lets you look around at the state at any place in your code, which is really useful. The Developer Tools window must be open for this to take effect.
Next to the
button is a 
button. This lets you step through your code, line-by-line.Use the Watch panel to keep an eye on an expression as you step through your code.
While there’s a lot more to dev tools, this introduction should be plenty to get you warmed up. Now you’re equipped to debug HTML, CSS, and JavaScript. Now it’s up to you to learn more as you need it. Best of luck!
