A web developer’s browser

by Mads Kristensen 17. May 2006 02:57

As a web developer, I do a lot of testing against different browsers and validating to W3C standards. These are the two things I spend most time doing when testing the HTML interface. It has become a common thing to do by most web developers no matter what kind of website they create and what tools they use.

The way most of us do it is by having a lot of different browsers open at the same time and the W3C HTML validation service web site. This approach is pretty good, but it has some serious issues.

Issue 1: Browser tests

By using different browsers as a test tool, you are pretty much covered for the everyday website development. But if you’re developing with a server-side technology such as ASP.NET or PHP, you might want to react differently to page requests, based on some server variables or http headers. It can be quite difficult to test your website in IE 5.5 on Windows 2000 if you have Windows XP installed and your website may generate different HTML based on the user-agent string.

Also, your server-side logic might react differently based on some custom headers and that’s not possible to simulate in any of the big browsers.

Issue 2: HTML validation

When developing a website, you probably built and tested it on your local machine before deploying it to a web server. If you want to do HTML validation from your local machine, you either have to copy/paste the source code or upload the HTML file directly to the W3C validator. When doing server-side development, you do not have the generated html file for upload, so you have to do copy/paste each time you want to validate. It is time consuming and annoying, but we have learned to live with it for some years now.

If you validate the html from a public web server you can just point the W3C validator to your website and hit refresh every time you make changes. The problem arises when you are building a password protected site, where only authenticated users may enter. A site like this, does not allow any validator to enter the site and do its job.

Issue 3: Load time

When you are optimizing your website for performance, you are probably interested in the page load time and the weight of your html in kilobytes. This is an easy way to test viewstate optimization in ASP.NET. None of the main browsers give you that information.

Issue 4: View the source code

Each time you make a change and want to see the html source code, you have to open the source code in a separate window by right-clicking and select View Source… or something similar. If you’re like me, you end up with a lot of Notepad windows because you forget to close them.

Issue 5: ASP.NET rendering

Some of the ASP.NET web controls render html differently based on the browser. This means that the validator service might not see the same html as a standard web browser does and because of that, does not validate correctly.

The idea

To solve all of the above issues in a way that is easy to do, with no learning curve and in one single application.

The solution

An extended web browser that can be used for server variable simulation and validation of html pages - both local and remote. I built such a browser in .NET 2.0 and called it Test Browser, because that’s exactly what it is. Here’s a screenshot.

Test browser

The features include

  • Turn automatic validation on/off
  • Show the page size in kilobytes and the load time
  • Simulate different user-agents, including GoogleBot  
  • Create a list of HTTP headers to be sent on each request
  • Save the list as a profile to use again and again
  • Import/export the profiles for easy sharing
  • Tabbed interface

The application is very simple to use and the interface very clear. I am planning on adding extra features such as a JavaScript debugger, CSS validator and a cookie watcher. If you have other ideas, please let me know and I’ll see what I can do.

Download

The application is a .NET 2.0 ClickOnce application, so it leaves no footprint in your registry and doesn’t pollute your system. It is as easy to install as it is to uninstall. The .NET Framework 2.0 is required.

Test Browse as ClickOnce (recommended)
TestBrowser.msi (437 KB)
Source code C#.zip (545,61 KB)

* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included

Tags:

ASP.NET | Client-side

Comments

5/18/2006 5:19:43 PM #

Chris van Sluijsveld

I would like to use/test your webdevelops browser. But i am behind a proxy server so the Clickonce installer fails. Can you put a installer on your site so i can download it? Thanks

Chris van Sluijsveld |

5/19/2006 1:11:57 AM #

 Mads Kristensen

Hi Chris

I've just added the installer file. It is still recommended to use the ClickOnce application if it is possible. It will update itself automatically once a week if there is an update available. The installer will not. I hope you'll like it.

Mads Kristensen |

5/19/2006 3:37:08 PM #

Chris van Sluijsveld

Thanks,

It had to do with the ISA server policy in the company that i work for at the moment.

Thanks for the Intaller.

Chris van Sluijsveld |

6/12/2006 3:33:19 PM #

HKB

Nice test browser.

I woud be nice if the source code was shown with different colors like in Firefox.

And if you could make it possible to view tables an other objects start and end tag in an easy way...

That would be perfect...

HKB |

12/1/2006 2:41:04 AM #

Craig Barber

Firefox is my development browser. You can do all of the above with it (and then some). Check out extentions: Firebug, Html Validator, CSS validator, and Tamper Data. But that's just for local development.

For ASP.Net projects, I just include a command line link-checker and HTML validator (you could build your own with the W3C Web Services) that are run for against the sites for every commit. For Rails I just include HTML validation in every get and post in my functional tests *joy*

Craig Barber |

12/2/2006 6:22:35 AM #

 David Seruyange

Mads, I really like your idea but I think you should release the source code for this project.  Something like this could be taken to a whole new level if you allow others to modify and enhance it.  Not necessarily GPL in license, but maybe MIT.  Who knows, maybe you're planning to sell this browser for $$$ some day?

Anyway, just a quick note that a request to www.cnn.com caused some exceptions.

David Seruyange |

12/2/2006 8:13:16 AM #

Simone Busoli

Hi Mads, nice tool, thank you!

Simone Busoli |

12/2/2006 5:46:52 PM #

Mads Kristensen

David, that's a good idea. It has been more than 6 months since I made the latest release. It has only gotten attention in the last couple of days and that took me by surprise. I'll release the source in this weekend.

Mads Kristensen |

Comments are closed

About the slave

Mads Kristensen Mads Kristensen
Web developer at ZYB and founder of BlogEngine.NET. More...

LinkedIn ZYB Facebook Last.fm Twitter View Mads Kristensen's profile on Technorati

The Lounge

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008