views:

568

answers:

4

I'm debugging someone else's code for a web page that is made with ASP.NET with some javascript effects. It's a form that we are pre-populating with edit-able data, and one of the text boxes is getting populated with an incorrect value.

I know that the text box is getting filled with the correct value in the code behind, but somewhere between there and the browser it gets overwritten.

In trying to find out where that happened, I came across an interesting situation. If I right-click near the offending element and select "view page source," I can scroll down to the element and see

<input name="RecurrenceProperties$TextBox57" type="text" value="HEY ITS THE RIGHT VALUE" id="RecurrenceProperties_TextBox57" />

But the wrong value is in both the rendered html and the IE developer toolbar.

This seems like a hell of a clue, but I don't know enough about how "View Source" works to tell what is going on behind the curtain. What happens between the generation of the "View Source" source and the page actually rendering?

EDIT: I found where it was going wrong by putting a break-point on everywhere that ID occurs in javascript (not exactly elegant, but I found it).

Suggestions to disable javascript and use IE8 were very helpful. thanks.

+8  A: 

What you see with "view source" is the raw HTML that has been fetched. The HTML doesn't include any changes that were done via DHTML/JavaScript.


Update

Inspired by Manik's comment, here's a cross-browser1 bookmarklet to display what's rendered inside <body>:

javascript:"<pre>"+document.body.innerHTML.replace(/([&<>])/g,function(c){return"&"+{"&":"amp","<":"lt",">":"gt"}[c]+";";})+"</pre>"

1 Doesn't seem to work on Safari though. Anyone know why?

Ates Goral
Yup, and if you want to see the rendered source, create a bookmark with this as the URL: javascript:'<xmp>'%20+%20window.document.body.outerHTML+%20'</xmp>'
Manik
@Manik: nice! Note that <xmp> is deprecated and <pre> should be used instead (after escaping the HTML characters)
Ates Goral
@Manik: Also outerHTML is not standard. We'll have to make do with innerHTML and just see what's inside <body>...
Ates Goral
+4  A: 

If you want to see what effect the javascript is having on your page, use IE8 or FireFox/Firebug on the page to see what it is(not) doing.

They will also give you information on the Css Style, if the case is actually that the wrong element is displayed, and the right one is hidden.

StingyJack
+2  A: 

As mentioned already "View Source" will display the HTML sent by the server, modifications made via JavaScript will not be reflected in the "View Source".

I would suggest looking for any JavaScript code that might be modifying the value of the "RecurrenceProperties_TextBox57" text box. Check the <script type="text/javascript"></script> areas of the source for any code that references the text box.

Phaedrus
+1  A: 

If it's me, first thing I'd do is disable javascript and load the page. That'll narrow down where your error is coming very quickly, especially if you suspect javascript to be at fault.

AS far as what the view source is doing, it's showing you what the browser is interpreting...the code as it was sent from the server. None of that code is executed in the view source.

Gus