Create your own items in IE's Context-Menu
I don't know about you, but one of the things I do all the time, when developing web apps, is "Right Click - View Source" to show the HTML behind a page. Not only do I use this to see how other people do stuff, but also to "debug" my own code. This method has its limitations though and it would be nice to create your own debugging menu commands wouldn't it. Well now you can, if you happen to use Internet Explorer 4+
Look at the picture below. The menu shows all the usual options plus a few others.
What do these new commands do:
- Hidden Fields - shows the values of all the hidden fields on all the forms on the document. You may be thinking that you can do this by looking at the source, but if your JavaScript alters their values then this is not reflected in the source, but this new command will show their current value.
- Fill All Fields - I use this when testing forms with lots of fields. It annoys me having to continually tab through all fields, entering something like "sasasd" in each one, or selecting a value from a drop down. This will do that all for you.
- Open Frame - One of the many things that annoy me about framesets is that you cannot see the URL of the page that is loaded. This command opens the current frame in its own window.
I've used these three purely as examples, yet the possibilities are almost endless. If you want to use these or just see how it is done then:
- Download this zip file
- Close all you browser sessions
- Extract all files to a folder called "C:\IE Commands"
- Run the .reg file that should be in the new directory (if you extracted to a different directory then you need to edit the file paths in the .reg file first).
- Restart the browser, your new commands should be available. Et voila.
For the technical "in and outs" of how this works read this Microsoft page
Note: There are optional DWORD values you can apply to the new registry Keys that tells the command which Context-Menus to appear in, ie when the user right-clicks images, text, anchors etc.
Running the commands.reg file adds a set of Keys to the following branch in the Registry:
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt]
Microsoft Web Dev Tools
Microsoft has some usefull web dev tools that are added to the context menu. Check out the link below for details.
http://www.microsoft.com/Windows/IE/WebAccess
Reply
Validate HTML page
Using the same principles detailed in the article I added a new usefull command to the context menu called Validate HTML. Which calls the WC3 HTML Valdation service.
Create a web page with the following code e.g. call validate.htm
<HTML>
<input type="edit" name="location" value="">
<SCRIPT LANGUAGE="JavaScript" defer>
var win = external.menuArguments; document.all.location.value = win.document.location.href;
window.location = "http://validator.w3.org/check/referer?uri=" + encodeURI(document.all.location.value) + "&doctype=Inline&ss=&outline=&sp=";
</SCRIPT> </HTML>
Then add the appropriate registry entry with an name of e.g. Validate HTML.
When IE is restarted the Validate HTML option will appear in the context-menu.
Notes: You must have a live Internet connection for this to work. The Opera browser has this feature built in. The Javascript code above may not be best way to do it as I am not a Javascript guru but it seems to work.
Reply
Nice to know...
..that there are other people who care what the W3C think of their design. All we need now is the Domino server to follow suit. It's going to be a long time before we get a Domino site to validate ;(
Out of interest you can do this using a simpler method - [<a href="area/D3744338BD59581F86256A1D004A953B?OpenDocument">Bookmarklets</a>]. You just need a Favourite/Bookmark that points to: javascript:window.location='http://validator.w3.org/check?uri='+window.location;
Reply
Hidden Fields
The Hidden Fields option doesn't seem to do anything for me. I can see IE refresh real quickly, but nada else.
Using IE 6, Windows XP Home - attaching to a Domino form that I know has hidden fields.
I love the Fill All Fields option.
Reply
Re: Hidden Fields
Change ExtDoc.location.pathname ExtDoc.location.search
to
ExtMen.location.pathname ExtMen.location.search
This seams to do it
And
(screen.width/2)-100 was not be interpreted as a number.
Reply
Re: Hidden Fields
<SCRIPT LANGUAGE="JavaScript" defer>
//loop through all the forms on the document (usually just the one); for ( var i = 0; i < ExtDoc.forms.length; i++ ){ OUTPUT += '<tr><td><span class="Header">Form #' + (i+1) + ' = ' + ExtDoc.forms[i].name + '</span></td></tr>'; OUTPUT += '<tr><td>'; OUTPUT += '<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#bbbbbb" width="100%"><tr class="Header"><td>Field Name</td><td>Field Value</td></tr>';
//loop through all the elements on the form for ( var j = 0; j < ExtDoc.forms[i].elements.length; j++ ){ //create a row in the table if the element is a hidden input field if (ExtDoc.forms[i].elements[j].type == "hidden") OUTPUT += '<tr><td>' + ExtDoc.forms[i].elements[j].name + '</td><td>' + ExtDoc.forms[i].elements[j].value + '\n</td></tr>'; }
OUTPUT += '</table>' OUTPUT += '</td></tr>'; }
Reply