In this article, we explore some of the most popular and useful in-browser Web development tools. You’ll find tools for popular Web browsers like Firefox and Internet Explorer. Whether you need to debug and inspect your HTML, inspect HTTP headers, access FTP source files, evaluate accessibility or just figure out what color a Web page element is, you may find a variety of tools discussed here useful. [Content Care Nov/08/2016]
You might be interested in the following related posts:
- 40+ Desert Island Web Development Tools1
- Next-Generation Responsive Web Design Tools: Webflow, Edge Reflow, Macaw3
For example, before Firebug, many developers would use the alert() function to see what a variable contains or to find what line the code breaks. With Firebug enabled, you’re told specifically what the error is and which line it comes from. Firebug is an excellent tool for AJAX application developers because it lets you explore and perform on-the-fly edits on the DOM to see what happens when you manipulate Web page elements after a user action.
Web Developer Link
The Web Developer8 extension (for the Firefox, Flock and SeaMonkey Web browsers) is an add-on that adds a tool bar with a menu of options for debugging and inspecting Web pages. It has a ton of features, my favorite being the View CSS Information option (CSS >> View Style Information, or Control + Shift + Y on Windows) which makes a page element clickable and shows you CSS selectors that affect that particular page element. It’s helpful for exploring and understanding large CSS files and projects that you’re unfamiliar with (such as a new open-source content management system).
YSlow12 is a Firefox extension created by Yahoo! developers that integrates with Firebug (therefore you need to have Firebug enabled for it to work). YSlow analyzes a Web page for front-end performance and, in its simplest usage, gives you a letter grade (A being the best and F being the poorest) for each of the best practices for speeding up your website13.
The Components view outlines every single component of a Web page in tabular format and allows you to inspect it to see attributes such as size, expiration date (for cached files), whether it uses server-side compression (Gzip) and response time (how long the component took to load).
- What the 80/20 Rule Tells Us about Reducing HTTP Requests14
- Maximizing Parallel Downloads in the Carpool Lane15
- Yahoo’s Problems Are Not Your Problems16: counter-arguments for some of the rules developed by Yahoo!, such as penalizing you for not having a Content Delivery Network.
Internet Explorer Web (Edge) Developer Toolbar Link
If you need similar functionality to that of Firebug and Web Developer for Firefox, but want to debug, inspect and tune your Web pages and applications on the Internet Explorer browser, check out the Internet Explorer Web Developer Toolbar18. The IE Web Developer Toolbar, when enabled, opens a toggle-able pane located at the bottom of the Web browser, giving you access to many helpful options for exploring Web page components.
It has a ton of other helpful features, such as selectively disabling IE settings (to see how your Web pages degrade in IE); the ability to view the HTML and CSS source of any Web page with syntax-highlighting; and an in-browser ruler to help you measure things on a Web page.
Fiddler Web Debugger Link
Fiddler20 is an Internet Explorer extension that analyzes and profiles a Web page’s HTTP traffic. If you’ve ever wanted to know exactly what happens when a client requests a Web page, Fiddler is the tool that’ll help you do the job. The HTTP Statistics view exposes all components and files required to generate a particular page, giving you details such as the total number of HTTP requests, total page weight, HTTP response headers and cache expiration.
Fiddler permits you to set up breakpoints, allowing you to step through and edit HTTP traffic (to see how it would affect your Web page), a useful feature for analyzing AJAX-based interaction and potential security flaws in a Web application. Perhaps what makes Fiddler so powerful is its extensibility, allowing you to create your own scripts (or import other developers’ scripts) to perform certain tasks or make interface modifications to the extension itself.
DebugBar is free for personal and educational use, but you are required to buy a license if you use it for commercial purposes.
HttpWatch27 is another HTTP traffic viewer and debugger for Firefox and Internet Explorer that is similar to Fiddler. It has many unique features and a more intuitive, less intimidating interface than Fiddler. Some notable features are the ability to generate request-level time charts (useful for documentation and presentation purposes); decryption of HTTPS traffic to help you debug, inspect and tweak your secure SSL-based connections28; and the ability to export captured data to XML and CSV formats for importing into spreadsheet applications such as Microsoft Excel or Google Spreadsheets.
Live HTTP Headers Link
Live HTTP Headers31 is a Firefox extension that allows you to inspect HTTP request and response headers32. Exploring HTTP headers allows you to debug Web applications, glean some information about the website’s server and inspect cookies sent to the client requesting the page.
For example, the Server response header gives you a website’s HTTP server type (Apache, IIS, nginx, etc.), the HTTP server version and the operating system (though server administrators can remove or limit the information you see for security purposes).
Web Accessibility Toolbar Link
The Web Accessibility Toolbar34 is a freeware extension for Internet Explorer and Opera that gives you a slew of options for quickly evaluating and analyzing your Web content’s accessibility. It has validation options for submitting your URL to content accessibility web services, a grayscale converter to simulate the user experience of individuals with color-blindness and poor eyesight, and a search function for particular page structures (e.g. finding list objects and unordered lists).
ColorZilla40 is an incredibly simple — but very useful — extension for Firefox. If you’ve ever wanted to determine what colors are used on a Web page, ColorZilla is the tool for the job. It adds an eyedropper icon to the bottom-left corner of Firefox.
Clicking on the eyedropper icon makes objects on the Web page clickable, and upon clicking a particular section of a Web page, it outputs the hexadecimal, RGB and hue/saturation values of that area . Before ColorZilla, you might have pasted a screen capture of a Web page into a graphics editor like Photoshop and then used the eyedropper tool in the editor to sample colors. ColorZilla saves you time and streamlines color-sampling processes.
FireShot42 is an in-browser tool for Firefox and Internet Explorer that allows you to take screenshots and then annotate, edit, organize and export them. Screen-grabbing is a common activity for Web developers to document previews of Web application prototypes and share them with clients, and FireShot gives you a feature-packed in-browser option to manage and streamline your screenshot needs.
Web Inspector Link
Web Inspector44 is part of the Webkit open-source browser engine project45. It’s an ultra-sleek tool for inspecting the DOM hierarchy in a separate, compact HUD-style window. You can easily search the DOM, explore the DOM tree (hierarchy) and have a useful interface for isolating DOM sub-trees and nodes so that you can focus on particular sections of a Web page. The Web Inspector also provides you with a Style pane to explore CSS rules applied to particular page elements.
FireFTP47 is a free, cross-platform Firefox extension for FTP’ing files. It offers several advantages to stand-alone FTP applications, such as its operating system-independent requirements. What’s exceptional about FireFTP is that even though it is an in-browser (and free!) application, it has all the features you would expect from a standalone FTP application, such as support for secure (SSL, TLS, SFTP) protocols, a synchronization feature to sync up local and remote files, and directory comparison to help you see what files are missing or different between two directories and much more.
What’s your favorite in-browser tool? Link
There is an overwhelming amount of in-browser tools for Web development out there. Some are specific to particular Web technologies and set-ups (such as FirePHP for PHP developers, SQLite Manager48 for developers using SQLite databases. If your favorite tool isn’t on the list, let us know in the comments section why it’s your favorite and why we should check it out.
- 1 https://www.smashingmagazine.com/2009/09/40-desert-island-web-development-tools/
- 2 https://www.smashingmagazine.com/2011/10/useful-coding-workflow-tools-for-web-designers-developers/
- 3 https://www.smashingmagazine.com/2014/05/next-generation-responsive-web-design-tools-webflow-edge-reflow-macaw/
- 4 http://getfirebug.com/
- 5 http://getfirebug.com/
- 6 http://www.ibm.com/developerworks/web/library/wa-aj-firebug/
- 7 http://chrispederick.com/work/web-developer/
- 8 http://chrispederick.com/work/web-developer/
- 9 http://jigsaw.w3.org/css-validator/
- 10 http://www.cynthiasays.com/
- 11 http://developer.yahoo.com/yslow/
- 12 http://developer.yahoo.com/yslow/
- 13 http://developer.yahoo.com/performance/rules.html
- 14 http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
- 15 http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
- 16 http://www.codinghorror.com/blog/archives/000932.html
- 17 https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/
- 18 http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
- 19 http://www.fiddlertool.com/fiddler/
- 20 http://www.fiddlertool.com/fiddler/
- 21 http://msdn.microsoft.com/en-us/library/bb250446.aspx
- 22 http://www.west-wind.com/WebLog/posts/4085.aspx
- 23 http://www.debugbar.com/
- 24 http://www.debugbar.com/
- 25 http://www.my-debugbar.com/wiki/CompanionJS/ConsoleAPI
- 26 http://www.httpwatch.com/
- 27 http://www.httpwatch.com/
- 28 http://en.wikipedia.org/wiki/Secure_Sockets_Layer
- 29 http://www.httpwatch.com/editions.htm
- 30 http://livehttpheaders.mozdev.org/
- 31 http://livehttpheaders.mozdev.org/
- 32 http://en.wikipedia.org/wiki/List_of_HTTP_headers
- 33 https://www.paciellogroup.com/resources/wat/
- 34 https://www.paciellogroup.com/resources/wat/
- 35 https://en.wikipedia.org/wiki/Venkman
- 36 https://en.wikipedia.org/wiki/Venkman
- 38 http://www.hacksrus.com/~ginda/venkman/faq/venkman-faq.html
- 39 http://www.colorzilla.com/firefox/
- 40 http://www.colorzilla.com/firefox/
- 41 http://screenshot-program.com/fireshot/
- 42 http://screenshot-program.com/fireshot/
- 43 http://webkit.org/blog/41/
- 44 http://webkit.org/blog/41/
- 45 http://webkit.org/
- 46 http://fireftp.mozdev.org/
- 47 http://fireftp.mozdev.org/
- 48 http://code.google.com/p/sqlite-manager/