There are several tools you can add-on to your browser that will help you manage and learn more about your Web content:
- http://chrispederick.com/work/web-developer/ – Add the ultimate Web Developer toolbar.
- http://colorzilla.com/ – For Firefox or Chrome Colorzilla allows you to analyze the colors on your page and use a eyedropper to figure the hexadecimal value of the color.
- http://frayd.us/extensions/measureit/ – Use the MeasureIt add-on to figure out the size of an element on the page by drawing out a ruler to get the pixel width and height. The company makes several other interesting add-ons, http://frayd.us/.
- http://ainspector.github.io/ – The Firefox Accessibility Extension allows you to view the site in different modes and test for accessibility issues.
- https://addons.mozilla.org/en-US/firefox/addon/link-analyzer/ – Link Analyzer is another Firefox extension, that will allow you to test the links on a page for broken links.
- http://chrispederick.com/work/user-agent-switcher/ – Use the User Agent Switcher to try to make Firefox emulate another browser. For example, it may give a close approximation of how Internet Explorer or iPhone 3 might render the page.
- http://yslow.org/ – Use this add-on to learn more information about why a page is loading slowly.
- Awesome Screenshot, available on Chrome, Firefox, Safari – Makes it easy to take a screenshot of the entire web page, automatically scrolling to the end of the page.
- See simulates what it’s like to see the web with various visual impairments.
In all browsers you can now view the source code. In Chrome and Firefox just right click on the area of the page you want to inspect and select “Inspect Element.” In Safari, you must first check the box in the Preferences menu under Advanced that says “Show Develop Menu in Menu Bar”. However, the inspector with the best feedback is still FireBug, http://getfirebug.com/ for Firefox.