43 In-Browser Web Development Tools That Will Make You A Better Web Developer

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

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 comes with a JavaScript Debugger.  Usually, web pages consist of more than one JavaScript file (.js).  Firebug represents all the files in an easy to understand list, which will help you find that file to be debugged without any hassle.  Firebug also allows you to set breakpoints in the JavaScript code so that the execution of the script paused at that specific breakpoint for you to assess the output.  Firebug also provides you with a JavaScript command line, which has auto-complete capabilities, multi-line command-line, smart paste and more.  What’s even more interesting is that Firebug assists you in creating bookmarklets.

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
• An In-depth Look At The Future of Javascript Debugging With Firebug
• Build Better Pages With Firebug 

 

Yahoo! YSlow For Firebug

YSlow is a Firefox add-on which integrates itself with Firebug.  YSlow’s job is to analyze web pages and suggest ways to improve the website’s loading performance based on Yahoo's own set of rules for high performance webpage (which is a recommended read).  After running YSlow analysis on your web page, YSlow will grade it according to how well it satisfies the testing criteria.  It will then give you precious advice on how to improve your web page’s grade.  YSlow also comes with useful tools such as Smush.it and JSLint.  Smush.it is a tool which enables you to optimize your images for faster loading times, while JSLint is another  great tool which is a JavaScript syntax checker and validator.  However, know what is important to take from the analysis of YSlow, because sometimes what YSlow will ask you to do is just impossible to achieve.

Further Reading Resources:

• YSlow: Yahoo's Problems Are Not Your Problems
• Understanding YSlow: What Matters; What Doesn’t

 

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:

• Using Page Speed

 

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:

• Integrating FirePHP for Ajax Development
• How to Debug PHP Using Firefox with FirePHP
• The Joy of FirePHP: A Crash-Course: New Plus Tutorial

 

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

FireRainbow is another Firebug extension which implements code syntax highlighting for HTML, CSS and JavaScript inside Firebug.  This is a useful feature to increase the readability of the code and enables easier coding.  The color themes for the syntax highlighting can edited within Firebug or new color themes can be download.

 

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

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

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

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

 

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

 

DebugBar

DebugBar is an Internet Explorer extension, which provides powerful new features for web development in the Internet Explorer browser.  It has a DOM inspector which enable viewing of the DOM tree and editing of elements on the fly.  DebugBar also has an HTTP inspector which enables you to view GET and POST parameters easily, check cookies and get server information.  It also has an inbuilt JavaScript inspector and debugger for viewing and debugging JavaScript code.   DebugBar can also validate the HTML of a web page, optimize and reduce its size.  DebugBar is free for personal and educational use, but you will need to buy a license if you intend to use it in a commercial project.

 

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.

 

Opera Dragonfly

Opera Dragonfly is the premier web development tool for the Opera browser.  It allows you to debug JavaScript, inspect CSS, DOM and HTTP headers with ease.  A very promising feature of Dragonfly is that it supports remote debugging, meaning that it can communicate with Opera Mobile browsers so as to debug for mobile website, right from your desktop computer.

Opera Dragonfly’s JavaScript debugging capabilities include a step-by-step debugging, with the ability to set breakpoint along the code.  You can also edit the DOM and see live changes to it.  CSS editing capabilities are also included in  Opera Dragonfly along with the Network Monitor tool which enables inspections of HTTP requests and response headers.  Opera Dragonfly also automatically updates itself, hassle-free.

 

Web Inspector

Web Inspector is a web development tool especially for Webkit powered browsers like Safari and Google Chrome.  It is a very powerful tool which can be used for viewing the DOM tree, has a console panel for showing errors and warning while debugging JavaScript.  Web Inspector also has a network panel which resource load timeline along with HTTP request and response headers.  Web Inspector has syntax highlighting for HTML.  Web Inspector can also be used to view cookies, debugging AJAX and to perform live CSS editing.

 

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

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

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

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

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!

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

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

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

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

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.

 

Venkman JavaScript Debugger

The Venkman JavaScript Debugger is the code name for Mozilla's JavaScript Debugger, developed by the Mozilla Corporation for browsers like the Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x.  It is a cross-platform application, using a mid-level JavaScript debugging API.

 

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

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 Library Detector is a very useful Firefox extension which detects and shows, in the form of icons in the status bar, the JavaScript libraries which are being used on the current web page.  

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

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

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.

 

JavaScript Deobfuscator

JavaScript Deobfuscator is a helpful tool for Firefox if you want to view JavaScript which is obfuscated and generated on the fly of a web page.  This tool reformats the JavaScript code and make its more readable.  The JavaScript Deobfuscator window shows a list of all JavaScript code being compiled/executed by the browser.  To view a specific piece of code, simply click on it.

 

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: 

• Understanding User-Agent Strings
• What Is My User Agent (tool)

 

 

DOM Diff And Page Diff

DOM Diff and Page Diff are two similar Firefox extensions which allows you to compare two web pages and highlight the differences. 

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.