Dev Tools Explained - For Beginners

I recently began teaching as a Summer Immersion Instructor for Girls Who Code. It’s been an amazing experience so far, one that I’m thrilled to be a part of. I can probably make a post about how wonderful it has been working for GWC and how amazing the company, (Synchrony Financial), we’re working out of in Stamford, CT is but I’ll save that for another day.

For now, I want to get back to basics. You see, this past week I fully realized that age old adage that teaching a subject will bring you to mastery. I was lecturing in front of a group of inspired, intelligent, beginner female developers trying to explain the idea of what a variable is. Variables to me are such a given at this point that even though I feel confident in my understanding, I was surprised to find myself slightly fumbling when I was going over the abstract to my class. Thankfully, I have two great TA’s who were able to fill in any gaps I created during my explanation. But I went home that night determined to address the issue of having an understanding vs being able to explain and teach in an understanding way for the future.

Yes, variables are a simple and basic idea, but it’s one that’s so fundamental that it can be tricky to break down to completely green developers.

I began looking over the curriculum planned for this week and realized that I’ll be introducing these girls to browser developer tools. Developer tools at this point have become so much a part of my work flow that I rarely give it a second thought. It’s just something that’s there that I usually always use when manipulating front end projects or testing scripts. It’s a bit like knowing what breathing is but now I’m trying to explain breathing air to a fish who has suddenly sprouted legs, can understand the english language, and is eager to begin running.

So going forward, I’m going to try to address as much as I can about the essentials of developer tools in Chrome. There can be a lot more written about this subject but again, I’m just trying to make sure I can explain the basics so that a beginner can grasp the idea of why and how developer tools are useful.

Developer tools are a major time saver for developers. Opening up DevTools will allow you to be able to interact and manipulate HTML, CSS and JS on any page across the web. Why is this important? Well, consider in the near future when you are working on web page and you want to figure out how to make your project look a certain way. For instance, you have a title on the page, and you want to make it’s text bigger but you don’t want resizing to throw off the formatting of every other thing you have laid out, (spoiler alert: this in all likely hood will happen anyway).

accurate.

You can go about this one of two ways. The first would be to take note of what you want to change, then look for that element in your code, make the sizing change either in the HTML or CSS, hit save, open the html file in your browser or run a local server, check the page and if your change isn’t quite right, repeat the process. It sometimes isn’t all that bad if you know exactly what kind of change to make but with front-end manipulation, experimenting and double checking how things look is par for the course.

The second way to go about the process above would be to open your project in your browser from your locally saved file, inspect the element you want to manipulate using DevTools, adjust the style of the element in DevTools so that you can instantly see changes made. When the changes made look good, then you can adjust the code in your text editor file accordingly, hit save and move on to the next item in your todo list.

The benefit of the second method is that by using DevTools, you save tons of time. If it doesn’t seem like it would save all that much time now, just understand that usually, the process of editing a web page on the front-end takes a lot of repetition. If you’re repeating the methods above in your work flow, the overall seconds of saved time truly do add up.

A quick note that you may have realized from the second method mentioned: If you are manipulating a webpage using DevTools, the changes you make are not permanent. The next time you refresh a page, your changes will be gone unless the page is yours and you save changes locally in your text editor. I’ve heard others allude to the DevTools panel as a sandbox where you can experiment, or a scratch pad where ideas can be played with. Just keep in mind that in the end, you will still have to save any changes made in DevTools locally for anything to be permanent.

So how does one use DevTools? Hopefully by now you’re at least a little bit intrigued. Let’s try opening up DevTools in Chrome now. To do this, you can either right click and select “inspect element”, or you can use keyboard shortcut, (command + shift + c). It should look something like this:

meta.

As a break down, here’s what you’ll see when opening DevTools: There are three distinct panels in the DevTools window. The top panel with all of the HTML elements is the DOM or “Document Object Model”. It’s a visual representation of the DOM that looks remarkably similar to the HTML you will be working off of in your text editor. If you want to get into what the DOM is in more detail, I suggest you check out this resource:

What is the DOM? | CSS-Tricks

You’ll also see in the lower left window all of the CSS applied to the page you’re inspecting. And to the right of that, you can see a CSS box model, which helps you know what you’re looking at and can be useful which figuring out padding of a given element. The TL;DR of the above is as follows:

1. The upper window contains the DOM, (looks like HTML)
2. The lower left window will show CSS styles
3. The lower right window will show the CSS Box Model

Notice how in the screen shot above, the element text, (in this case ‘meta’), is highlighted both on the page I am inspecting and in the DevTools. You can experiment with this and I suggest you do as you’re reading along by opening DevTools in your browser from this page.

From here if you highlight text, and inspect the element you can either change the words you see by editing what is between the <p> </p> tags or you can also change things like the color of the text by either using something like style=“color: red;” within the first ‘p’ tag. You should also be able to manipulate things like color directly in the css portion of the DevTools window.

Make your dreams come true.

If you’re doing this correctly you should be able to see immediate live changes to things on the page. If you’re not familiar with CSS just yet and don’t know how to start changing the color or size of things, just experiment in the sandbox that is DevTools and start deleting or unchecking boxes in the CSS section of the window.

As a beginner the best way to go about learning something new is to experiment. If you experiment and break something or make it disappear when using DevTools, don’t sweat it. You can easily undo with ctrl + z, or just refresh and dive back in. Remember, think of DevTools as a scratch pad or a safe zone where you can change anything to your liking without any repercussions. And most importantly, try to keep in mind that not every change has to be perfect immediately. It’s crucial when learning something to, as we say at Girls Who Code, be brave, not perfect.