It is difficult to become an effective web developer. One way to make it easier is to leverage the technology available to you, like your browser’s developer tools.
Learning how to use your browser’s developer tools is very important. You will find these tools very helpful when working through my JavaScript tutorials. They can be used for experimenting, debugging issues, and generally seeing what’s going on behind the scenes. In this post I’m going to show you some of the most useful things you can do with them.
I’ll be using Google Chrome, but any browser will have similar tools available. In Chrome, you can open up your browser’s developer tools using several different methods. The quickest method is probably using the keyboard shortcut, Ctrl + Shift + I. Since you’re presumably reading this post in your web browser, go ahead and do that right now.
Once you have the developer tools opened up you’ll notice a toolbar at the top. There are many tabs, and all have their uses. The ones I use most often are the Elements, Console, and Sources tabs.
There are also two little icons in the top left. One let’s you jump to any HTML element on the page, and the other let’s you see what the page would look like on a mobile device. I find those little buttons helpful too.
Here is a screenshot pointing all this out.
Elements
The Elements tab will let you make changes in real time to the HTML and CSS. This is handy because it let’s you try out changes before adding them to your HTML or CSS file. It speeds up development and allows you to iterate faster.
Just make sure you don’t get carried away. It’s possible to make a whole bunch of changes in here, but they will get reset if you refresh the page. Make sure you add your changes to the code itself if you want to keep them permanently.
Console
The Console tab lets you execute arbitrary JavaScript code in the console. This is helpful for testing things out and inspecting the contents of variables in real time.
For example, we can see below what is contained inside the answers array in the code I wrote for the ear trainer tutorial. Just type the name of the variable you want to inspect in the console and press enter.
Sources
The Sources tab will show you the contents of your HTML, CSS, and JavaScript files.
In my opinion, the most useful thing about this tab is that you can put break points in your JavaScript code. Break points allow you to pause the execution in the middle of your running program and step through it line by line. You can also inspect the contents of different JavaScript variables that are in scope.
This is very helpful when debugging problems with your code. You can see here how I’ve set a break point at the line where we evaluate if an answer is correct. I’ve also evaluated the variables in the console so I can see if they match.
Mobile Friendly
Finally, by clicking the mobile device icon we can see a preview of what my crossword puzzle generator post looks like on a mobile device. You can choose from different device types and orientations. Testing on real devices is always the best, but this is a handy feature to make sure the page generally looks good.
You should take the time to explore more of these buttons and tabs on your own, as there is a lot of really cool and useful functionality for you to discover.
The best way to get good at using your browser’s developer tools is good old fashioned practice. Keep that in mind as a silver lining the next time you’re frustrated by a bug in your JavaScript code.
As always, thanks for reading. Follow me on Twitter if you’d like to keep up with what I’m up to.
You can also subscribe to my blog if you’d like some tips on writing functions and to have my blog posts show up in your inbox.