As a developer I have grown an array of website in-browser developing tools. These tools could be for improving speed, checking the SEO of a website or just plain helpful in the process of development all built into the browser. So here are just some of my best used tools, but please comment any other tools you use and why.
I use Chrome as the developing browser of chose, so all the tools will be for this browser.
This is a major plugin for any developer or designer as it shows you what Hex, RGB, HSL or what ever type of color index you need from the live website. This is the best thing to match the color you want from a website perfectly. The other advantage is when you are doing in browser changes it is all live changing, so make your developing much faster.
Apart from the plugin to the browser, you can also use the Chrome in built one. When you create a ‘color’ element in the browser editor, there is a little color box. Click on this and a color picker will appear which you can select from the page and change instantly.
Google Page Insights
This plugin will analyse you website page and give you knowledge of who to increase the speed of that page. This is a great plugin to find out what is making that exact page take so long. It can give you information about how to minify files, remove redirect and optimising images. They also have the program as a website.
When you are first building the website it is always handy to put some dummy text in to fill out the space. The problem is you have to either make it up or find a site that will do it for you. With this handy tool you can get a set a mount of text that even makes sense.
Being a perfectionist you will need to make sure all your elements line up. One way is to have this plugin to measure the sizes of the containers and then gain the details of how many pixels they are. You can also use it as a straight line to make sure they are perfect.
This is not plugin, but it is very handy. With this tool you can see what you website will look like on all major mobile devices. This will save you having to test on all other devices, though I would always say the best test is using a real device.
This is just handy for portfolio’s and showing your work to others. It can take screen shot of your whole website, but if you have any position fixed elements then they will follow the screen shot down.