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”.
