HOME  → POSTS  → 2006

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

is an engineering manager with over 20 years of experience across software development, site reliability engineering, and security. He is the creator of SimplePie and AWS SDK for PHP, patented multifactor-authentication-as-a-service at WePay, defined much of the CI/CD and SRE disciplines at McGraw-Hill Education, and came up with the idea of “serverless, event-driven, responsive functions in the cloud” while at Amazon Web Services in 2010. Ryan's aptly-named blog, , is where he writes about ideas longer than . Ambivert. Curious. Not a coffee drinker.