如何查看頁面源代碼與頁面渲染不同？

我們（在工作中）有一家設計公司在html5中構建一個靜態網站，並且我已經綁定了ASP.Net代碼以使其功能正常。日誌在屏幕上有一個這樣的形式：如何查看頁面源代碼與頁面渲染不同？

<input class="ui-input-text ui-body-c" id="txtUsername" placeholder="Username&hellip;" value="" runat="server" /> 
<input class="ui-input-text ui-body-c" id="txtPassword" placeholder="Password&hellip;" value="" runat="server" type="password" /> 
<span class="select-decoration submit login"> 
     <input class="submit-button" id="btnLogin" value="Login" type="submit" runat="server" onserverclick="submitbutton_click" /> 
</span>

...和驗證後登錄我做的Response.Redirect到「家」屏幕。

我的問題是雖然頁面似乎加載，如果你'查看頁面源'，代碼呈現仍然是登錄頁面，地址欄中的網址仍然是登錄頁面;並且由於登錄處於根目錄並且所有內容頁都位於'/ v2'子目錄中，所以圖像的路徑都不是有效的，因此不顯示任何內容。

奇怪的是，如果您在瀏覽器中使用'F12'工具，檢查的html是正確的html。 IE 10，Firefox和Chrome的這種行爲是正確的。

我已經嘗試了Response.Redirect的真正和錯誤的標誌（絕大多數是絕望，沒有進一步的代碼來執行），沒有喜悅。

我在這裏找到的一切都是指PostBackTriggers，但是我沒有使用UpdatePanel，所以沒有那裏的喜悅。

我確信這與HTML5有關，但它對我來說是新的領域，所以我很掙扎。

來源

2014-04-09 SteveG

我假設你並未真正設置cookie或任何其他內容，並且如果在驗證完成後刷新主頁，則會將其發送回登錄頁面？如果是這樣的話，問題在於，當你'查看頁面源代碼'時，瀏覽器實際上並沒有給你當前所在頁面的HTML。它實際上是再次從服務器獲取所有內容，就像普通請求一樣，唯一的區別是瀏覽器現在向您顯示HTML而不是呈現它。這也是F12開發人員工具DOM-inspector可以向您顯示當前HTML的原因，因爲這確實可以實時向您顯示當前的HTML。我希望我很清楚，並且我假設正確，但我沒有足夠高的評價。 :)

來源

2014-04-09 10:24:13 Tobias

正確，我沒有設置cookie並刷新主頁確實重新加載登錄頁面。我不確定我是否遵循你所說的關於從服務器再次獲取所有html的說法，但是......什麼會導致這種行爲？ – SteveG

簡而言之，當您正常加載頁面時會發生什麼情況，瀏覽器會向服務器發送獲取請求，檢索HTML並進行渲染，因此讓人們看起來很愉快。當您使用'view-source：'追加地址欄中的網址時（Chrome瀏覽器在選擇'查看網頁源代碼'時會執行此操作），同樣的事情會發生，除非瀏覽器跳過了最後一步，只是向您顯示HTML。所以，當你查看頁面源代碼時，瀏覽器並不認爲'讓我給他顯示當前頁面的HTML'，而是認爲'讓我們再次獲取所有的HTML，從' – Tobias

'得到它的同一個地方謝謝，這就解釋了爲什麼查看源與實際頁面不同。我的問題仍然存在，但...爲什麼Response.Redirect獲取新頁面，呈現它，但實際上並沒有改變網址？ – SteveG

如何查看頁面源代碼與頁面渲染不同？

回答

相關問題