Click here to Skip to main content
15,867,771 members
Articles / Web Development / XHTML

HTML Inspector

Rate me:
Please Sign up or sign in to vote.
3.19/5 (15 votes)
30 Jul 2009CPOL1 min read 45.2K   3.4K   19   8
HTML Inspector is a really tiny utility that I wrote to spy on HTML pages
HtmlInspector.jpg

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.

C#
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

  • 30th July, 2009 - First version released

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Sutherland Global Services
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 1 Pin
Anton Semenov24-Jun-14 3:28
Anton Semenov24-Jun-14 3:28 
GeneralMy vote of 1 Pin
mmdavis165031-Jul-09 8:16
mmdavis165031-Jul-09 8:16 
GeneralRe: My vote of 1 Pin
TheChindu2-Aug-09 21:18
TheChindu2-Aug-09 21:18 
QuestionDoes not work ... perhaps with frames? Pin
Martin081531-Jul-09 1:09
professionalMartin081531-Jul-09 1:09 
GeneralMy vote of 1 Pin
Ashley Staggs30-Jul-09 8:00
Ashley Staggs30-Jul-09 8:00 
GeneralRe: My vote of 1 Pin
Johnny J.30-Jul-09 20:03
professionalJohnny J.30-Jul-09 20:03 
GeneralMy vote of 1 Pin
Sebastien Lebreton30-Jul-09 3:00
Sebastien Lebreton30-Jul-09 3:00 
GeneralRe: My vote of 1 Pin
JoseMenendez30-Jul-09 4:43
JoseMenendez30-Jul-09 4:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.