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”.
I’m also a huge Firebug fan. I’ve used it nearly every single day of my life since it was released!
Andrew K.
February 14, 2006
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!!” )