Every developer needs to know how to use the developer tools in their browser of choice regardless of which browser it is. They all have the same basic functionality so once you know how to use the dev tools in one browser you can use them in all the browsers.
Nobody really talks about the different tabs in the developer tools. It's one of those things you're expected to know how to use or just figure it out. I'm going to at least give you a basic explanation of what the tabs are and when you should use them. Personally, I'm a Chrome fan so all of my dev tool references will be with respect to Chrome. Go ahead and push F12 in your browser to bring up the developer tools.
Elements
When you have that one input box that won't align itself with the others, this is where you're going to experiment first. The Elements tab will show you all of the HTML for the page where you have opened the developer tools. You'll be able to see class names, ids, and any comments.
One of the best things about the Elements tab is that you can play with the CSS. There's a column that will let you edit the styles for any HTML element on the page. It's a great way to figure out all of the weird CSS issues without recompiling the code for something as simple as a color change.
You can even change your display to mock a phone screen. This really helps with mobile styling since you normally can't see the mobile styles on a laptop. The Elements tab is one of the tabs you should really get acquainted with for all things HTML and CSS debugging related.
Console
Normally you'll see a little console at the bottom of your dev tools. The Console tab is the full page version of that. Here you can see any errors or outputs from the page that has been loaded.
If you are debugging your code, you can check variable values, execute functions, and even change variable values just by using the console. It's not going to give away much information so you have to have some particular behavior you're looking for.
Most of the time you'll probably have the console down at the bottom of your developer tools so this tab isn't the most crucial thing in the world. It's just handy if you have a situation where you need to see more of the console screen.
Sources
This is arguably the most useful tab in the dev tools. In the Sources tab you can see, edit, and add breakpoints to the code files that have been loaded for the page. There's nothing better when you're hunting down a JavaScript bug. This is how you access the code for the entire front-end of a page while it's running.
Looking at the files is really only useful when you are doing local debugging. Otherwise you'll see a lot of abstracted code and it'll look like gibberish. But this is where you can put breakpoints to trace through the call stack and find where a value originated.
This is also where you can see what values you are sending to your APIs or database. Out of all the tabs, this is going to be where you spend most of your time. It's also why you'll probably leave your console docked at the bottom of the developer tools.
Network
Have you ever gotten a random error message that you couldn't track down in the Sources tab? Then you might want to look for any errors in the Network tab. Since the Sources tab only shows you the front-end code, if you're not finding an error there it's good to check for back-end problems.
What the Network tab will tell you is if you've had any bad API calls. If any of your back-end methods have bugs in them the Network tab will help you find them. You'll be able to see the request headers sent to the API to see if any values look unusual.
You won't be able to see any code for the back-end here though. It'll help you figure out where to start looking on the back-end, but you'll still have to do some digging.
Performance
If you're page keeps timing out and you've already looked through some of the other possible issues, try this tab. In the Performance tab, you can start recording how long it takes resources to load or unload. This is super useful if you're having issues with a page timing out.
You do have to remember to click Record before you start calling functions or else you won't have any data to look at. It'll show you a breakdown of how long each call takes and it'll show you how much time each part of your code takes to execute.
Honestly, the Performance tab isn't used a whole lot. But when it is used it's a great option for looking at places to improve the efficiency of your code.
Application
The Application tab is most useful when you have an page that deals with cookies or local storage. You can go to this tab and see every cookie that a page has. You can see what's in your cache or your session storage if you need to see what's happening with your updates not showing.
Also, this is an easy way to test out different user permissions if they are set using cookies. It just makes it easy to change values without doing a whole lot of extra work. It's also a great place to come clear your cache.
This is another one of those tabs that you probably won't use much, but it's super powerful in certain situations if you know what to do with it.
Some of you probably know that there are three other tabs in the Chrome dev tools: Audits, Memory, and Security. These are used so rarely that the other tabs overshadow them. Of course there are those unique situations where they might be used, I just haven't run into enough of them yet.
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
Top comments (3)
This was exactly me on my first job, I was looking through a large app and had to find my bearings, I had no chance of doing this without going deeper into the dev tools(you can console. log your way through, but this much more inefficient then brake points). They are a MUST have addition to your dev toolbelt.
Great writeup!. Thankyou
I didn't know the F12 button opened the Chrome Dev Tools! Thanks for that! Now, I have to read the rest of the article.