Home > View Post

Quick Javascript Debugging Tip

I use this one so much, I can't imagine life without it. People (me included) usually kick themselves when they first realise you can do this...

View this page in Internet Explorer (for those reading this in some kind of aggregator, view this page). It also works in Firefox. Type this into the address bar:

javascript:void(document.body.style.backgroundColor = 'pink');
Je je, cool eh?

Want to know how many forms this page contains?

Want to programmatically post the form?
Want to see how many tables are used in this layout?
What about divs?
Want to change the borders of all divs to be red?
javascript:{var fn = new function() {var divs = document.getElementsByTagName('DIV'); for (var i=0; i < divs.length; i++){divs[i].style.border = "1px solid red";}}; fn();}
Want to set your browser to 800x600? (this is a good one to bookmark)
Great eh? This is a really powerful tool, particularly when you're probing the security of your web applications.

PS The reason I void() or alert() the instructions is to avoid a return value, otherwise it replaces your page source.

PPS I'm very sorry that it's so hard to cut & paste the snippets above - some IE peculiarity. If anybody knows of a good workaround for this please contact me.

Tags: Other

Josh Post By Josh Twist
5:09 AM
02 Feb 2006

» Next Post: Now with added comments
« Previous Post: IE7 finally fixes the SELECT control

Comments are closed for this post.

Posted by Fanboy @ 01 Dec 2006 2:41 PM
IE7 note:

Turns out these don't work in IE7 if you have more than 1 (the default) tab opened in your browser.

© 2005 - 2022 Josh Twist - All Rights Reserved.