Website development tools


When building for websites you want to make life as easy as possible for you.
There are many tools out there that help make that process easier for correcting browser and function issues.

Firstly I do all my development on Firefox due to it large range of addons.

Tool: Firebug
Link: https://getfirebug.com/
Used for: Changing css directly, console logs, viewing files that have not loaded properly, javascript errors and many more

Tool: User agent switcher
Link: https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
Used for: Making it seem like your brower is a mobile device (iPhone, Andriod, Blackberry etc)
Import: http://techpatterns.com/downloads/firefox/useragentswitcher.xml (used to update your agent list)

Tool: Firesizer
Link: https://addons.mozilla.org/en-US/firefox/addon/firesizer/
Used for: Resizing your screen to see how your website is viewed on a mobile screen
Add: http://resizemybrowser.com/ (additional sizes options for more mobile screens)

Tool: MeasureIt
Link: https://addons.mozilla.org/en-US/firefox/addon/measureit/
Used for: Quickly measuring the size of something on a website

Tool: QuickJava
Link: https://addons.mozilla.org/en-US/firefox/addon/quickjava/
Used for: Disabling Java, Javascript, Flash, Silverlight, Cookies, Images, Animated Images and CSS to see how your website behaves

Tool: Total Validator
Link: https://addons.mozilla.org/en-US/firefox/addon/total-validator/
Used for: Validating your websites html

Tool: FiddlerHook
Link: http://www.fiddler2.com/fiddler2/addons/fiddlerhook/
Used for: Hooking Fiddler to your browser

How to view addons on the browser:
After installing an addon, it isn’t always shown. Right click on the top of the browser and select the addon you want or the addon bar.

Additional:

Tool: Fiddler
Link: http://www.fiddler2.com/fiddler2/
Used for: Seeing and editing the redirects of pages and resources.

Tool: Mobilephoneemulator
Link: http://www.mobilephoneemulator.com/
Used for: another method to view your site on a mobile device screen (beware that you should use the same browser as the mobile for more accurate results)

Finally:
All other browsers:
IE, Chrome, Safari etc

So with this list of tools you should have everything you need to check and correct how your website will be displayed to your users.

Leave a Reply

Your email address will not be published. Required fields are marked *