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
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.
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