Awesome view-source trick for JavaScript developers
Maybe I’m a little slow, but I’ve found an awesome little trick for people who use Firefox, and who need to dynamically add elements to the page via JavaScript.
I’ve been doing a lot of Ajax development lately for an internal webapp where I need to dynamically add nodes to lists. In my source code, I’ll have an empty <ul> tag with an ID, then I use that ID when I go and add <li>’s to it. No big deal, right?
If you use the standard view-source contextual menu item, it will show you the source code that you coded in: the empty <ul> tag. BUT, if after you’ve added your <li> nodes dynamically, you click-and-drag to select the rendered area, and choose “View Selection Source”, Firefox will show you the fully-rendered HTML for that area. As in, it will show you the <ul> tag with all of your <li> tags inside of it… just as though you’d coded it like that in the first place. How awesome is that?
So if you need to see what HTML your JavaScript is generating, simply select the area, and choose “View Selection Source”.
Comment by Ryan Parman 14 Feb 2006 at 8:46 pm
I’ve always relied on my memory to understand how it all comes together. 
I’m also a huge Firebug fan. I’ve used it nearly every single day of my life since it was released!
Comment by Geoffrey Sneddon 15 Feb 2006 at 8:34 am
Andrew, did you not realise Ryan is insane? 
Comment by Doug 6 Mar 2006 at 6:29 am
This is a good tip. If you need to see the generated source for the whole page, just type Ctrl-A, then View Selection Source
Comments for this post are now closed.
Comment by Andrew K. 14 Feb 2006 at 7:09 pm
oh my, how on Earth did you develop ajax apps without knowing about this and NOT go completely insane?? ;D
Make sure you also check out Firebug, which is easily the best FF extension for JS developers.
If that seems overkill to you, you might like Console2, which fixes the small problems with the Error Console that make it painful to use (eg: “I don’t care about CSS or chrome errors right now, I’m just trying to fix this damn script!!” )
→ Permalink