The hidden gems of our favourite inspector.

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

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

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

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

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.

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 What is Press Loft? Press Loft  www.pressloft.com is a PR platform specialising in the home, gift, and lifestyle sectors that helps thousands of brands to get their products into the press. Their PR tools allow companies to easily secure press coverage and quality backlinks for SEO by connecting with their network of 20,000+ journalists, bloggers, and influencers. Get Free Press Coverage – take a 60-day free trial (only available to new customers only.