HTML Inspector

• Download EXE - 33.54 KB
• Download source - 177.06 KB

Introduction

HTML inspector is a really tiny utility that I wrote to spy on HTML pages. It is written in C# with just a couple of lines.

It uses a web browser control for displaying web pages and a property grid control to display the attributes of the selected element. We can find everything about an HTML element by just clicking on it. If you make changes in the property grid, it will be reflected on the page.

Background

I was involved with a project that automates web pages using scripts. Small scripts can be written in VBScript to do tasks like finding an element on a web page and then clicking on it. But then came a problem. How would we get the attributes of an element without going through the tones of code that make up a page?.

The solution, HTML Inspector.

Using the Code

How does it work?

First add a click event handler to the WebBrowser’s document object’s click event. Then in the event handler, find the active element on the page and assign it to the Selected element property of the property grid.

 private void Browser_DocumentCompleted
	(object sender, WebBrowserDocumentCompletedEventArgs e)
 {
        // add a handler for Click event
        Browser.Document.Click += new HtmlElementEventHandler(Document_Click);
 }

   void Document_Click(object sender, HtmlElementEventArgs e)
  {
            // Assign the selected object to property grid
            PropGrid.SelectedObject = ((HtmlDocument)sender).ActiveElement;
  }

Browse is the web browser control and PropGrid is the property grid control.

Points of Interest

The nifty technology that works behind the scenes to make things so simple is Reflection.

ALL HAIL REFLECTION !!

The icons used in this tool are from http://www.famfamfam.com/lab/icons/silk/. It is a really nice collection of icons that are free to use as you like. I wish to thank the author Mark James for this wonderful collection of icons.

History

• 30^th July, 2009 - First version released