Website Developer Tools

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.

Color Picker

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.

Chrome Link: https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en


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.

Chrome Link: https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli?hl=en

Website: https://developers.google.com/speed/pagespeed/insights/


Corporate Ipsum

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.

Chrome Link: https://chrome.google.com/webstore/detail/corporate-ipsum/lfmadckmfehehmdnmhaebniooenedcbb?hl=en


Page Ruler

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.

Chrome Link: https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=en


Mobile Emulator

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.


Webpage Screenshot

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.

Chrome Link: https://chrome.google.com/webstore/detail/webpage-screenshot/ckibcdccnfeookdmbahgiakhnjcddpki

Advertisements

Leave a message please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s