Crystal codes
Jul 23, 2017 · 3 min read

How Dev Tools changes the Jr Dev Life

When I started my self-taught journey a few years ago of HTML and CSS, I’m not going to lie, y’all => I didn’t have a plan. I did my research on other’s plans and ultimately decided to dig into Codecademy’s free courses. And while those classes were the bomb dot com, it only provided a short tutorial to look into what Dev Tools is and just said ‘well, you should Google it’.

Bon Qui Qui

One of the many reasons The Iron Yard has been a saving grace is showing all students what can be done with Dev Tools and how to best utilize them. Just as a heads up, there is a LOT of information about this when you Google it (developer.chrome), so anyone that can help condense this and give you the meat, rather than info-dump on you is a God-send.

So, stick with me here — we all know that you’ve tiredly hit a keystroke and the computer comes up with something like this:

In your tired stupor, you know something has gone horribly wrong. All you wanted to do was use that tm on the magikarp!

On MacOS, you can get here by two-finger tapping and clicking ‘Inspect’ or hitting Command + Option + i

On Windows, you can get here by right-clicking and selecting ‘Inspect’ or hitting Control + Shift + i

This, my friends — is one of the best and most useful gifts my beloved instructors has given to us so far. From this screen, you are able to fully view the HTML(DOM-style) of any given site you go to, as well as the associated CSS and JS files. And guess what: you can manipulate it, too! Now don’t get all Mr. Hyde on me — it doesn’t stick to the site. As soon as you refresh the browser, all of your changes are no longer. But it does provide a lot of fun in your current session. Naturally, I started adjusting my FaceBook account. Come here, pretty purple, cursive text!

Besides manipulating the DOM and CSS of the site you’re on, this also gives you the ability to check out the JavaScript side of things to see why, when you’re clicking a button or scrolling down, facets of the site are changing or staying static etc.

If you have any useful tools, sites, or directories that would help a beginner with using DevTools, please comment them below! The ones I’ve found helpful are:

https://developer.chrome.com/devtools (of course)

Credit: Wes Bos — 14 Must Know Chrome Dev Tools Tricks

^^Wes Bos is THE boss. This is mostly for console logging, but it blows my mind!

Much love as always ❤

Crystal

Crystal codes

Written by

Wicked cool wife. Serial servant. ISFJ. Whovian. Software engineering student @TheIronYard. Wannabe hacker — ya gotta start somewhere, right?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade