Useful Developer Tools

In the past couple of weeks I have learned about a few different development tools that have made development here at Blueprint so much smoother! The two that I’ll cover below are very useful for styling and optimizing a website.

The first helpful tool that I have started using daily is Firebug for Mozilla or just the built-in developer tools for Chrome. Simply right-click an element and click “Inspect Element” and a handy window pops up with the HTML for the element highlighted, and the CSS styles displayed. Positioning elements with this is so simple, you can even use the arrow keys to increase or decrease values and move elements around a page. I can help to see the hierarchy in which an element is placed for writing styles, or just writing styles right there in the window and seeing what happens. It’s a much faster and more efficient process than changing a stylesheet, saving, uploading, and refreshing.

Another tool I have been shown is the Google PageSpeed tool. All you need to do is insert a URL and have Google assess the speed of your website. If you have a low score, Google will tell you everything you can do to speed up your site, and link you to pages detailing why it will help your page speed and how to do it.

Both tools are very simple and easy to use, and you will find that they help you produce higher-quality websites in less time!