Firefox Developer Edition: Where is View Generated Source? With Solution

View Source vs. View Generated Source

When I work designing websites it’s very common that right-clicking on the page and choosing “view source” is sufficient for me to see what code gets rendered. There are few exceptions however that viewing the page source isn’t actually accurate as to what you are viewing on the page. If you’re reading this I assume you know it’s because of php, javascript, ajax and other languages render the results of their code.

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.

Tags: ,

3 Responses

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (21)  (1)  (17)  (6)  (1)  (1)  (7)  (1)  (4)  (18)  (5)  (2)  (31)  (9)  (1)  (12)  (4)  (1)  (4)  (6)  (10)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (4)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (15)  (13)  (2)  (7)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (34)  (5)  (9)  (9)