Awesome view-source trick for JavaScript developers

Projects and Code191 words1 minutes to read

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

Ryan Parman

Ryan Parman is an experienced software engineer, open source evangelist, and passionate user advocate currently living in Seattle. He is the creator of and , and worked on DevOps and Security at . He is now bringing learning into the digital age as an Engineering Lead and Site Reliability Engineer at . Ryan's aptly-named blog, , is where he writes about ideas longer than .