Dev Tools — Why you should dive in with both feet.
Tips I have picked up from using them.
I am a little over half way into my 16 week boot-camp and I’ll share my thoughts on the journey so far in another post but now I want to talk about dev tools. I started thinking of the dev tools as just a ‘cool’ feature of browsers and now I consider them one of my most powerful weapons for development.
Everyone has a favourite browser, whether it be safari, firefox or chrome (for those interested mines’ the latter) and dev tools in all of them are your best friend as a developer. Having recently completed some challenges that were solved with the dev tool I thought I would share some of the more useful features I use all the time. I will talk about the dev tools in chrome and firefox as I have used these the most. But First….
Access
It is ‘ctrl+shift+i’ for both, easy right? Or ‘cmd+option+i’ IOS
Layout
Again both of them have a similar layout a window with tabs at the top. By default Chrome appears on the right and Firefox along the bottom. A lot of their tabs contain the same features they just have different name, so below is a list of the tabs in chrome and the corresponding name in firefox.
- Elements — Inspector;
- Console — Console;
- Sources — Debugger;
- Network — Network.
Features found in both
Select elements in the DOM
Under the Elements (inspector) tab you can navigate around the DOM and when you highlight a section of it the corresponding section on the page is highlighted.
Also you can click the icon of a square and a mouse tip to click on the page and the same area of the DOM in selected.
Editing HTML in the DOM
Whilst in the DOM if you right click an element you can select ‘edit as HTML’, it opens an IDE and you can edit and select the html to be copied into you local files.
Responsive design mode
In the ‘Elements’ tab if you click the icon that looks like a square with a phone on it (a square with a small square in the top left-hand corner, in firefox). It allows you to re-size the window to test how you site looks across all size screens. It also enables touch events.
Color Picker
When styling your site it can be annoying to match colors across all the elements and this is where the color picker helps. First you select the patch of color you want to change from the CSS class. You can then use the dropper tool to select a color on your website or use the color palette to select your new color.
Adding and editing classes
Once you have selected an element on the page you can edit its CSS properties by clicking in the widow and typing in the new property and value. You can also toggle them on and off by clicking the ticks.
Toggling classes
If you have pseudo class (e.g. hover) you can test how this looks by using the :hov (3 squares diagonally, in firefox) icon and selecting the class you want to test. This will toggle that on for the element selected.
Also if you have multiple classes on an element you can toggle these on and off using the .cls icon.
Console for errors and testing out code
The console is where you can run JavaScript. This is useful for testing part of your code. It is also useful outputting logs/ error from you code, good for trouble shooting. Finally it is worth mentioning that you can access all of the built in functions such as Math and Array.
Sources tab for editing JS
In the Sources (debugger) tab you can view all the files in your project. When looking at minimised files you can click the ‘{}’ icon to beautify the file and make it easier to read. As an added benefit in chrome you can also edit JavaScript files, these changes are not saved locally but allow to change and test code on the fly.
Sources tab for event listener breakpoints
Ever had a function not giving you the output you expected, you can test it by… going to the ‘Sources’ tab, ‘Event Listener Breakpoint’ tab and select the ‘mouse’ option. Now call the function with ‘onclick’ and when you click the button it will call the function and pause the script, by using the icon that looks like an arrow with a circle on top you can step through the function line by line and the console will show you the conditions and variables at each point allowing you to see where code is not behaving as expected.
Network tab for checking out ajax requests
In the network tab you can see all of the requests your page is making along with a host of information (size, how long it took, etc.). Also by clicking on the individual request you can see the request and response objects including the information on header, body etc.
Differences
I have highlighted what I think are some of the best features in the dev tools. I use these all the time. As I continue to develop I will update this post to include other excellent features I have started using. On to the differences…
- Layout — I hope that I have shown that mostly the differences are layout, both dev tools contain the same features (you just have to find them).
- Can’t edit JS in firefox — I found that you can’t edit JavaScript in firefox, but this isn’t necessarily a bad thing, either use chrome or just edit the file locally.
