With modern browsers come modern web developing tools. There are some de facto web development tools and there are some lesser known but equally powerful utilities which helps us developers in the task of developing a website. In this article, we will take a look at most of the available in-browser web development tools for different browsers, review them and classify them.
Actually, there are so many tools out there on the internet but it is difficult to know all of them, let alone try to try them all. These tools reviewed here will help you decrease your development time and increase your efficiency drastically. They also save you a lot of headache and enable you develop your website in a more productive way.
Firebug is probably the most well known and most used in-browser web development tool ever. Firebug gives you tools to really make web development look like a piece of cake. With Firebug, you can inspect and edit HTML easily on-the-fly. With the Inspect button, you can always inspect individual elements on a web page to determine what’s wrong and fix the problem. Firebug also has a search function which allows you to easily find what you are looking for by just typing in the search box. The changes you make to the page’s code persists even after a page reload.
Firebug’s CSS tab allows you to view the CSS source of any web page and modify it and see live changes. It can also preview color codes and image URLs. Firebug CSS editor also has auto-complete capabilities for the property you are editing. This feature will save you both time and frustration. The CSS editor also allows you to disable a whole property line of an element with a single click. If a web page contains more than one stylesheet, you can view all of the and edit them. The CSS editor contains many many other powerful features and it will never let you down.
Firebug also allows you to visualize CSS layout easily so that you can spot the difference between margin, border, padding, and content. With Firebug, you also have rulers to measure things up.
Another great feature of Firebug is the network monitoring tool. Using this powerful utility, you can actually analyze the page’s components different load times, see for specific file types, see if the components are being cached or not. You can also examine HTTP headers and XMLHttpRequest (used in AJAX).
Firebug also allows you explore the Document Object Model quickly and easily. This feature also has auto complete and edit on the fly features.
Firebug really caters for all needs of the modern web developer. If there are errors on your web page, you get notifications from the status bar. You get informative error codes and you can easily jump to the debugger to correct the error.
Further Reading Resources:
- 10 Reasons Why You Should Be Using Firebug
- Debug and tune applications on the fly with Firebug
- The PeC Review: Firebug Is a Developer's Tool Worth the Buzz
- Build Better Pages With Firebug
Yahoo! YSlow For Firebug
Further Reading Resources:
Page Speed For Firebug
Page Speed is a similar extension to YSlow for Firebug which allows you to measure the performance of web pages based of a set of rules. Page Speed grades each page you run the test on, and give you advice on how to improve its score.
Further Reading Resources:
FirePHP For Firebug
FirePHP is another extremely useful Firebug plugin which implements an API for PHP web application development. FirePHP allows you to log your debugging messages to the Firebug console. This means that the debugging data will not interfere with the content on your page. This is ideal for AJAX development where clean JSON or XML responses are required.
Further Reading Resources:
FireCookie For Firebug
FireCookie is another very good plugin for Firebug. It allows you to view and manage cookies in your browser for specific pages. Since it a Firebug extension, it has the same look and feel of Firebug. When FireCookie has been installed, a new panel appears in the Firebug window, when you can start manipulating cookie with ease. The cookies are represented in an expandable list, where they can be inspected/searched for. FireCookie also allows you to set permissions for accepting, rejecting cookies from a domain.
FireCookie can also log all cookie activities like cookie creation, deletion, modification or rejection, with the ability to switch on/off this option. FireCookie also allows you to work with the expiration time of cookies using local timezone. It is also possible to export all cookies data to a text file in a standard format. FireCookie also has full clipboard capabilities, where it is possible to cut/copy/paste cookies. FireCookie integrates itself with the Net panel, where the cookies sent and received can be monitored. It is also possible to sort cookies by name or value. If the cookie is formatted in the JSON or XML, then FireCookie provides both a JSON and XML Inspector where you can view cookies of those format. If you are testing cookies, it is also possible to set breakpoints for easy debugging.
FireRainbow For Firebug
PixelPerfect For Firebug
PixelPerfect is another Firebug extension which enables you to overlay an existing composition over a coded HTML layout. It allows you to see which pixels are not correctly placed. Using PixelPerfect, you can also reduce the opacity of the overlay so that you can see both the latter and the HTML. You can then use Firebug for editing the web page and making the necessary corrections.
Firediff For Firebug
Firediff is another very good Firebug extension which allows you to see and track changes made to the DOM and CSS of a web page. You can hence modify the DOM or CSS to correct problems and improve overall design of a web page.
Firefocus For Firebug
Firefocus is a Firebug add-on which allows easy tracking of the element that currently has focus. The element which is being tracked is highlighted for easy following of the changes happening to it. Firefocus can also log all changes occurring to the elements.
FormBug For Firebug
FormBug is a Firebug extension which allows web developers to easily develop form-intensive websites. FormBug allows you to populate Forms easily or only those you have selected. It also allows you to print the name and value of every element of every form to the console or only those you have selected. FormBug also allows you to inspect forms, with a little popup showing you the name and value of each element in the form.
FireQuery For Firebug
FireQuery is an awesome tool for JQuery developers. It allows easy development of JQuery applications while providing useful information in Firebug Console and DOM inspector. Using the JQuerify option, you can easily inject JQuery code into any web page.
FireFinder For Firebug
FireFinder is a Firebug add-on which allows you to quickly find HTML elements matching chosen CSS selector(s) or XPath expression. FireFinder also has a nifty feature called FriendlyFire. FriendlyFire allows you to quickly share a code snippet with a friend/collaborator, for a matching element. It uses JS Bin pastebin to put the code online and generate a public link for you to share with your friend/collaborator. Here’s a video for a quick introduction to FireFinder and its FriendlyFire feature.
CodeBurner For Firebug/Other Platforms
CodeBurner is a great web developer tool which can be integrated into Firefox, or with popular Firefox developer add-on, Firebug, the Opera browser, Adobe AIR applications and the OS X dashboard. CodeBurner provides useful information for web developers about HTML and CSS. Just type in the HTML element or CSS property in the search box and instantly get the required information about it. Information about the typed keyword covers things like browser compatibility info, syntax, code samples and more.
Aardvark Firefox Extension
The Aardvark Firefox extension is an amazing piece of software for web developers. Once installed, you just have to load the web page you want to work on, right click on it and click on the Start Aardvark option. This will enable you to select the different elements of the page. Now, you can use the different keyboard shortcuts Aardvark defines to do specific tasks like removing, killing, colorizing, etc of the element in question. This is a useful tool to have if you want to clean up a web page visually, view how the the page is created, block by block and view source of each elements. To give you a better idea of what Aardvark can do, here is a little video below which demonstrates the capabilities of Aardvark:
XRAY is a very useful bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). XRAY enables you to see the box model for any element on a web page. You can need to drag the bookmarklet to your bookmark toolbar, then load the web page you want to inspect. Clicking on the bookmarklet will activate it and then clicking on any element on the web page will show its box model and the different properties of the element.
CSSViewer is a handy Firefox extension which enables you to view the CSS properties of an element when your mouse pointer hovers over them. It can be used to inspect the CSS characteristics of any element of a web page quickly and get an overview of the CSS.
Codetch is Firefox extension which aims to provide a Dreamweaver look and feel editor in Firefox. It enables you to edit your documents in Firefox, right next to your web pages easily. It also provides reference for coding and snippets of code to ease your task. However, there is no syntax highlighting.
Web Developer is an extension for Firefox, Flock and Seamonkey browsers which adds a menu and toolbar to them, with numerous web development tools at your fingertips. Web Developer allows you to get server information of the website you’re investigating. It also has a magnifying glass which enables you to effectively zoom into a web page to view the area in more detail. Web Developer can even generate a color palette of a website which you can visualize. It’s got another awesome feature of allowing the developer to see the print and mobile version of a website, which can be useful if you’re developing for the mobile web. Web Developer can even show you the sizes of all images and block elements on a web page, perform accessibility tests (disabling CSS), find CSS errors quickly and reminding you to put alt tags on required elements.
Further Reading Resources:
- Awesome Things That Firefox’s Web Developer Extension Can Do
- 9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension
- SEO Implications of Web Developer FireFox Toolbar
- Web Developer Firefox Extension Makes CSS Editing Easy
Internet Explorer Developer Toolbar
Internet Explorer Developer Toolbar is an extension for Internet Explorer which provides you with web development tools inside the browser. It allows you to validate the HTML and CSS of the web page, previewing of your web page at different resolutions and has an integrated ruler for helping position elements.
Using Internet Explorer Developer Toolbar, you can easily view the DOM and CSS source of any web page. Internet Explorer Developer Toolbar is inbuilt into Internet Explorer 8 but can be downloaded as a separate package for older versions of the the browser.
Web Accessibility Toolbar (WAT)
Web Accessibility Toolbar is a toolbar for Internet Explorer. This toolbar allows you to test a web page for different accessibility issues. It helps you identify the components of the web page, providing you with alternate views of the web page ad tries to facilitate the use of third-party online applications. The toolbar allows you to validate your HTML code, checks for deprecated code and informs you, can generate a page speed report and more.
ColorZilla is an advanced color picker, eyedropper for the Firefox browser.
The eyedropper allows you to pick any color in the web browser window.
It also has a built-in zoom option to enable you zoom on smaller areas to be able to pick the colors better.
ColorZilla also has a DOM color analyzer which enables you to find the color of any DOM element easily.
ColorZilla has plenty of more nifty features and is sure to find its place in your web developer tools’ arsenal.
Since it is a Firefox extension, it also works on multiple platforms where Firefox runs, like Windows, Linux, MAC OSX, etc.
ColorZilla is also a multi-lingual tool and can integrate itself with popular Firefox developer extension, Firebug.
FireShot is another useful Firefox and Internet Explorer extension which allows you to captures, edits, annotates, organizes, exports and prints screenshots of web pages opened in the browser.
What’s special in this screenshot capture utility is that it can capture the whole length of a web page.
FireShot also allows you to easily annotate the screenshot you have taken and save in in different image formats.
FireShot also has basic image editing capabilities like cropping, blur tool, etc. FireShot also exists in a Pro version with more features.
MeasureIt is a Firefox extension which allows you to easily draw a ruler on a web page to measure the width, height or alignment of page elements. You can have a ruler show the length in different units, resize the ruler, perform multiple measurements at once and do much more.
HTML Validator is another very good Firefox extension which enables you to validate your HTML documents, with an icon in the status bar showing the number of errors in the document being viewed. HTML Validator is based on Tidy and OpenSP algorithms. This means that the HTML of the document is not transferred over the internet to a third-party server for validation. Instead, HTML Validator enables Firefox to validate the HTML locally. The OpenSP algorithm is the same algorithm used at the validation service at http://validator.w3.org/.
Screengrab! is another screen capture utility, similar to FireShot, which allows you to capture partial or full screenshots of web pages. It enables you to save the captured image to the clipboard and to a file in either the JPEG or PNG file formats.
Dummy Lipsum is a Firefox and Flock extension, which allows you to generate dummy lipsum text to fill the void spaces on your web pages.
This is especially useful while your website is in development, and you have no real content to place in the web page.
Dummy Lipsum adds a context menu to the browser, allowing you to quickly insert dummy text in the web page.
HttpWatch is a Firefox and Internet Explorer extension which integrates with the browsers to provide HTTP and HTTPS monitoring to web developers. With HttpWatch you can see headers, cookies, caching and POST data easily. HttpWatch also supports HTTPS, compression, redirection & chunked encoding network monitoring. The data you collect from HttpWatch can be exported to CSV, HAR and XML. HttpWatch boasts several other features as well as a commercial Pro edition.
LiveHTTPHeaders is a Firefox add-on which allows you view headers of websites. It adds another tab in the tab in the 'View Page Info' of a web page, which appears when you right click on any web page. It also allows for editing of the the request headers.
Web Accessibility Toolbar (Vision Australia)
Web Accessibility Toolbar is yet another toolbar to check for web page accessibility. It allows easy identification of the components of a web page, providing useful reference and additional resources.
Fangs is a Firefox add-on which emulates a web page in text only mode. This enables web developers to find accessibility problems which might arise and solve them straightaway, making their website accessible on a broader type of browsers.
FireFTP For Firefox
FireFTP is another great web developer tool aimed to provide FTP uploading/downloading capabilities to Firefox. FireFTP supports SSL/TLS/SFTP connections, directories synchronization and comparison, auto-reconnect and resume of operations and has more very good features. FireFTP is the first choice tool you should look to for FTP operations inside the Firefox browser.
Web Development Helper
Web Development Helper is an Internet Explorer extension, which provides a you with the tools for AJAX and ASP.NET development. Web Development Helper includes several features like the DOM inspector, an HTTP tracing tool, and script diagnostics and immediate window. The extension can also capture screenshots of current page and also allows you to view page specific data like metadata, tags, and linked resources. Web Development Helper is also able to log HTTP (and HTTPS) requests and perform several other useful tasks for easier web development.
GridFox is a Firefox extension which allows you to overlay a grid on any website. You can thus view the grid layout of any website easily. GridFox is essential in creating and maintaining pixel-perfect, grid-based layouts. Using it couldn’t be any simpler: load the web page, right click on it, click on GridFox Show Grids. Take a look at a sample grid overlay generated by GridFox for the Yahoo! homepage:
The Library Detector
The following libraries can be detected: jQuery, jQuery UI, Dojo, Prototype, Scriptaculous, MooTools, Spry, YUI and Qooxdoo. Hovering over the icons in the status bar will show additional information about the library, such as the version used.
Tamper Data is a Firefox add-on which enables easy tracking and modifying of http/https requests. It can be useful in the security testing of Web based applications and tracking of request/responses.
JSONView is another great Firefox add-on which allows you to easily view JSON documents in the browser, similar to the way you view XML documents. This helps enormously in debugging JSON-using applications. The JSON file is formatted, highlighted, and arrays and objects can be collapsed.
User Agent Switcher
User Agent Switcher is an add-on for an extension for Firefox, Flock and Seamonkey browsers which allows you to change the user agent of any browser to another one.
This will probably help you design websites for other platforms.
For example, it can help you develop iPhone website from your desktop and fool the server into believing that you are indeed using an iPhone.
There are many other applications of this useful little tool, which will prove helpful for web developers.
Further Reading Resources:
DOM Diff And Page Diff
The only difference between the two products is that DOM Diff compares the two web pages using their DOM source, whereas Page Diff marks out the difference using the two pages’ source code.
You can check both of them out at their respective web pages and choose one which fits your needs most.