The hidden gems of our favourite inspector.

0
809
views

This week we thought we would share with you a few hidden gems of one of our favourite tools, Google’s Chrome DevTools. This allows us to inspect our code, perform analysis on run times and display any errors in our JavaScript or CSS with ease.

Here is a list of what the team picked out:

1) Colour Formatting & Eye Dropper

Chrome Colour Picker
The Chrome DevTool colour picker.

All web developers have their preferred colour format whether it be HEX, RGB or HSL. If you need to find the right colour format for your preferred style, simply hold shift and click on the colour thumbnail, and it will cycle through each format of that specific colour. This allows us to keep our code format consistent throughout the site.

With the help of a free Chrome Extension the Eye Dropper can be used to quickly see the colour code of an area on the screen. This saves a lot of time when we get wireframes from our designers because it means we don’t need to have any external applications open to do the job for us.

2) DOM breakpoints

Chrome DOM breakpoints
Forcing our link to display it’s style when it’s hovered and focused.

 

If we are trying to debug any CSS or JavaScript element that can have many states (ie. active, hover, focused, visited) we can force these states within the browser itself, rather than having to edit our code, refresh the page, analyse the change and repeat the process until we find the error.

3) Device Emulator

Chrome Device Emulator
The journalist home page being scaled down to the dimensions of the iPad 3rd Generation.

If we want to see how a particular page will look on a particular device, we can run an emulator using DevTools, which will scale our screen to the dimensions of that device and adjust the layout accordingly. By default they have covered all of the popular mobile devices, which means we can analyse the strengths and weaknesses of each page in a variety of screen resolutions.

4) Network Panel

Chrome Network timeline
The network timeline of our resources for a page on Press Loft.

As developers, we love numbers! So the network panel is great at showing us the network activity of a page and producing incredibly useful data. The tool allows us to see what assets were loaded and what order they were loaded in, and of this is represented in a handy colour chart that displays additional information about a particular asset.

This is particularly useful if we want to to increase the performance of a resource intensive page and find areas where we can improve it, or even find ways of adding assets to the page without affecting the load times. The numbers never lie!

 

 

5) The Console API.

Console
The Chrome console API displaying “Hello World!” to our console.

This really is the tool that is used  everyday when we are working away on the site. Here we can get information about any JavaScript compile errors and where they occur, and also insert testing alerts into our code to see what kind of output we are getting.

 

As applications become more complex the Chrome DevTools allows us to break up a page into manageable chunks, allowing us to fix bugs more quickly and create products of a higher quality.

Have a great weekend and happy coding!

Press Loft Tech Team

LEAVE A REPLY

Please enter your comment!
Please enter your name here