In this specific case I’d like to examine, a client’s calendar script shows the current months calendar on the screen, and via ajax a user can then navigate through the months without a page reload each time. So it’s nice and seamless. On any date the client can enter an event through a content management system and have that content appear in a modal window (aka pop-up) when the event title is clicked on in the calendar. So when the user wants more info on an event, they click the title and a modal window pops up displaying all the content entered.
When testing using Firefox’s Developer Edition web browser I found that anytime I would right-click to view source I would not see the source for the month I was currently viewing, but rather the source for the first month that loaded when I went to the calendar page (the calendar would load and I would then click next month, next month, etc. and I couldn’t view the source for what I was currently looking at on the page). I knew exactly what was going on and knew that had to view the “generated source for the page” and not the source for “what-at-first” loaded.
Web Developer Toolbar by Chris Pederick has had this as a feature for many months, maybe even years. From whatever you were viewing on-screen you could just choose “view generated source” from the toolbar. I used this a fair amount. Now, as I’m trying to spend more time in Mozilla’s Firefox Developer Edition, I went looking for a similar feature there—to no avail. FDE has been out less than 30 days so I couldn’t find any answers specifically to this issue. And then I went in search of the solution.
An old stackoverflow question from three years ago “HTML source versus HTML generated source” had a comment there that lead me to the solution. The comment was:
Interesting fact: The same or similar effect can be achieved by selecting all text on the page with ctrl+a and choosing “View Selection Source” from the context menu. In fact, when you click the “View Generated Source” button on the web developer toolbar, it actually selects all the text on the page, so it’s probably the same!
And it worked! I didn’t know this and perhaps it’s worked like that for years. Here’s the difference: When you right-click on a page and select “view source”, you get the good ‘ol normal “view source”; However, if you select (highlight with the mouse) any area on the page, or even hitting ctrl-a to select it all—and then right-click looking for the option “view source”, it’s not there. But rather it’s replaced with “view selection source”… which shows the generated source. Bingo!
Especially helpful in the case of styling the modal window content, which was by default hidden from the code on the page, until a user clicked the event title to launch (display) the modal window. Selecting the calendar and choosing view selection source showed me all the hidden inline goodies I was looking for. Thanks Karl Nicoll for your comment on stackoverflow 3 years ago… this tip still works in the latest browsers.