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.
From stackoverflow
-
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?
Manik : Yup, and if you want to see the rendered source, create a bookmark with this as the URL: javascript:''%20+%20window.document.body.outerHTML+%20' 'Ates Goral : @Manik: nice! Note thatis deprecated and <pre> should be used instead (after escaping the HTML characters) </div> <div class="p_a_com"> <span>Ates Goral :</span> @Manik: Also outerHTML is not standard. We'll have to make do with innerHTML and just see what's inside <body>... </div> </div> </li> <li class="p_ans_l"> <p>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. </p> <p>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. </p> </li> <li class="p_ans_l"> <p>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". </p> <p>I would suggest looking for any JavaScript code that might be modifying the value of the "RecurrenceProperties_TextBox57" text box. Check the <code><script type="text/javascript"></script></code> areas of the source for any code that references the text box.</p> </li> <li class="p_ans_l"> <p>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.</p> <p>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.</p> </li> </ul> </div> </div> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'> Posted by <span class='fn'>Ku XI</span> </span> <span class='post-timestamp'> at <a class='timestamp-link' href='https://icodecode6.blogspot.com/2011/03/how-does-ie7-source-button-interact.html' rel='bookmark' title='permanent link'><abbr class='published' title='2011-03-27T07:38:00-07:00'>7:38 AM</abbr></a> </span> <span class='post-comment-link'> </span> <span class='post-icons'> <span class='item-control blog-admin pid-771926732'> <a href='https://www.blogger.com/post-edit.g?blogID=7171621000752064068&postID=6971659418110485768&from=pencil' title='Edit Post'> <img alt="" class="icon-action" height="18" src="//www.blogger.com/img/icon18_edit_allbkg.gif" width="18"> </a> </span> </span> </div> <div class='post-footer-line post-footer-line-2'><span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'></div> </div> </div> <div class='comments' id='comments'> <a name='comments'></a> <h4> 0 comments: </h4> <dl class='avatar-comment-indent' id='comments-block'> </dl> <p class='comment-footer'> <div class='comment-form'> <a name='comment-form'></a> <h4 id='comment-post-message'>Post a Comment</h4> <p> </p> <a href='https://www.blogger.com/comment/frame/7171621000752064068?po=6971659418110485768&hl=en&saa=85391&origin=https://icodecode6.blogspot.com' id='comment-editor-src'></a> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'></iframe> <!--Can't find substitution for tag [post.friendConnectJs]--> <script src='https://www.blogger.com/static/v1/jsbin/2830521187-comment_from_post_iframe.js' type='text/javascript'></script> <script type='text/javascript'> BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '0'); </script> </div> </p> <div id='backlinks-container'> <div id='Blog1_backlinks-container'> </div> </div> </div> <!--Can't find substitution for tag [adEnd]--> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='https://icodecode6.blogspot.com/2011/03/human-factors-design-meeting.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='https://icodecode6.blogspot.com/2011/03/which-browsers-support-font-embedding.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a> </span> <a class='home-link' href='https://icodecode6.blogspot.com/'>Home</a> </div> <div class='clear'></div> <div class='post-feeds'> <div class='feed-links'> Subscribe to: <a class='feed-link' href='https://icodecode6.blogspot.com/feeds/6971659418110485768/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a> </div> </div> </div></div> </div> <div id='sidebar1-wrapper'> <div class='sidebar no-items section' id='sidebar1'> </div> </div> </div> <div id='sidebar2-wrapper'> <div class='sidebar section' id='sidebar2'> <div class='widget BlogArchive' data-version='1' id='BlogArchive1'> <h2>Blog Archive</h2> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul> <li class='archivedate'> <a href='https://icodecode6.blogspot.com/2011/05/'>May</a> (200) </li> <li class='archivedate'> <a href='https://icodecode6.blogspot.com/2011/04/'>April</a> (699) </li> <li class='archivedate'> <a href='https://icodecode6.blogspot.com/2011/03/'>March</a> (699) </li> <li class='archivedate'> <a href='https://icodecode6.blogspot.com/2011/02/'>February</a> (644) </li> <li class='archivedate'> <a href='https://icodecode6.blogspot.com/2011/01/'>January</a> (863) </li> </ul> </div> </div> <div class='clear'></div> </div> </div></div> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> </div></div> <!-- end outer-wrapper --> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3432011497-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AEUoTZola5WEpqZRj3-pjPmC7SPE:1785092470011';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7171621000752064068','//icodecode6.blogspot.com/2011/03/how-does-ie7-source-button-interact.html','7171621000752064068'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7171621000752064068', 'title': 'Programming Answer', 'url': 'https://icodecode6.blogspot.com/2011/03/how-does-ie7-source-button-interact.html', 'canonicalUrl': 'http://icodecode6.blogspot.com/2011/03/how-does-ie7-source-button-interact.html', 'homepageUrl': 'https://icodecode6.blogspot.com/', 'searchUrl': 'https://icodecode6.blogspot.com/search', 'canonicalHomepageUrl': 'http://icodecode6.blogspot.com/', 'blogspotFaviconUrl': 'https://icodecode6.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Programming Answer - Atom\x22 href\x3d\x22https://icodecode6.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Programming Answer - RSS\x22 href\x3d\x22https://icodecode6.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Programming Answer - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7171621000752064068/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Programming Answer - Atom\x22 href\x3d\x22https://icodecode6.blogspot.com/feeds/6971659418110485768/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-6870522351295034', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d1bc633a119a9f9d', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '6971659418110485768', 'pageName': 'How does IE7\x26#39;s \x26quot;View Source\x26quot; button interact with javascript?', 'pageTitle': 'Programming Answer: How does IE7\x26#39;s \x26quot;View Source\x26quot; button interact with javascript?'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How does IE7\x26#39;s \x26quot;View Source\x26quot; button interact with javascript?', 'description': ' I\x27m debugging someone else\x27s code for a web page that is made with ASP.NET with some javascript effects. It\x27s a form that we ...', 'url': 'https://icodecode6.blogspot.com/2011/03/how-does-ie7-source-button-interact.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 6971659418110485768}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3899201366-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar2', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull')); </script> </body> </html>