果你是一名站長或 Web 開發者，在瀏覽器中查看網頁源代碼（HTML、CSS 與 JavaScript）是每天必不可少的操作，這個在桌面端輕而易舉的操作到了移動端卻變成了一件麻煩事。如今有了 View Source 對 iOS 8 Extensions 的巧妙利用，在移動端對網頁源代碼進行瀏覽與操作將變得很輕松。

安裝 View Source 后，通過 Safari 分享按鈕打開 View Source 開關，這樣就可以顯示當前網頁源代碼，如果你不想這么做，也可以把 View Source 作為一個獨立應用去打開想要查看的網站源碼，當然，在這種情況下，View Source 不會顯示網頁內容，而是直接顯示頁面源代碼。

這里可以看見關于少數派網頁的源代碼，例如通常的 SEO 人員會去為網頁定義 Title 以及 Meta 標簽的 Keywords，以保持搜索引擎對于網站更好的抓取。

View Source 中通過 DOM 節點樹可以很直觀的看到當前網頁的結構，用來查找和訪問節點變得很容易。另外很酷的一點是 View Source 還可以通過 inject JS 來編寫自定義 JS 代碼，退出插件時會在 Web 頁面顯示輸出的 JS 效果。例如在少數派頁面下 Script 中輸入：

alert(document.title);

退出插件就可以在 Safari 中顯示關于少數派網站 Title 標簽的 alert 彈窗，效果如圖。

當然，如果你想在彈窗中顯示一句話的話，可以在 Script 中輸入：

alert(I love Sspai);

當然，這些只是普通的 JavaScript alert 代碼，如果你有更有趣的玩法或者更實用的功能，也可以在評論中告訴我。

通過右上角更多的選項可以調用更多的功能，例如將代碼復制至剪切板在其他應用上繼續編輯，也可以發送郵件、選擇高亮與更多主題，這里不妨多說一下，View Source 提供了很多高亮的主題以供選擇，筆者個人比較傾向于 Blue Screen 這個主題。

View Source 目前可以從 App Store 下載，售價 6 元。

覽html網頁，查看其源代碼，可以幫助我們了解該版網頁的信息以及架構，每個瀏覽器都是允許用戶查看他們訪問的任何網頁的HTML源代碼的。以下編程獅小師妹就介紹幾個常見瀏覽器的查看網頁 HTML 源代碼的方法。

谷歌瀏覽器 Google Chrome

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看網頁源代碼(V)”。

查看包含元素的頁面源

1. 打開 Chrome 瀏覽器，然后瀏覽要查看其源代碼的網頁。
2. 點擊瀏覽器窗口右上角的“自定義及控制Google Chrome” 圖標。
3. 在出現的下拉菜單中，選擇更多工具(L)，然后選擇開發者工具(D)（快捷鍵：Ctrl+Shift+I）。
4. 單擊屏幕底部出現的新部分左上角的“元素(Elements)”選項卡。

提示：

在 Chrome 中，按 F12 或 Ctrl+ Shift+I 也會調出交互式開發人員工具。此工具提供了與源代碼和 CSS 設置的更多交互，使用戶可以查看代碼中的更改如何立即影響網頁。

火狐瀏覽器 Mozilla Firefox

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的 Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看頁面源代碼(V)”。

查看包含元素的頁面源

1. 打開 Firefox 并瀏覽您要查看其源代碼的網頁。
2. 單擊屏幕右上角的菜單 圖標。
3. 在下拉菜單中選擇Web開發者，然后從展開的菜單中選擇切換工具箱（快捷鍵：Ctrl+ Shift+I）。
4. 單擊顯示在屏幕底部的部分左上角的“查看器”選項卡。

提示：

在 Firefox 中，按 F12 或 Ctrl+ Shift+I也會調出交互式開發人員工具。該工具提供了與源代碼和 CSS 設置的交互，使用戶可以實時查看代碼中的更改如何影響網頁。

查看頁面的部分源代碼

1. 突出顯示網頁中您要查看其源代碼的部分。
2. 右鍵單擊突出顯示的部分，然后選擇檢查元素(Q)。

提示：

您可以使用 Firebug 附加組件查看和編輯頁面的源代碼，并通過瀏覽器實時查看更改。

微軟 Edge

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看頁面源代碼(V)”。

查看包含元素的頁面源

1. 打開 Microsoft Edge 并瀏覽您要查看其源代碼的網頁。
2. 點擊屏幕右上角的設置和更多 圖標。
3. 將鼠標移到更多工具(L)在下拉菜單中，在展開的菜單選擇開發人員工具(D)。
4. 單擊屏幕右側出現的窗口頂部的“元素(Elements)”選項卡。

提示：

在Microsoft Edge中，按F12或 Ctrl+ Shift+I 也會調出交互式開發人員工具。該工具提供了與源代碼和 CSS 設置的交互，使用戶可以實時查看代碼中的更改如何影響網頁。

IE瀏覽器 Microsoft Internet Explorer

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇查看源(V)。

查看包含元素的頁面源

1. 打開 Internet Explorer 并瀏覽您要查看其源代碼的網頁。
2. 單擊右上角的工具 。
3. 從下拉菜單中選擇F12開發人員工具。
4. 單擊開發人員工具菜單左上角的 DOM 資源管理器 選項卡。

提示：

在 Internet Explorer 中，按 F12 會彈出 DOM 工具。該工具提供了與源代碼和 CSS 設置的交互，使用戶可以查看代碼中的更改如何立即影響網頁。

360安全瀏覽器

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看網頁源代碼(V)”。

查看包含元素的頁面源

1. 打開 360 安全瀏覽器，然后瀏覽要查看其源代碼的網頁。
2. 點擊瀏覽器窗口右上角的打開菜單圖標。
3. 在出現的下拉菜單中，選擇更多工具(L)，然后選擇開發者工具(D)（快捷鍵：Ctrl+Shift+I）。
4. 單擊屏幕底部出現的新部分左上角的“元素(Elements)”選項卡。

提示：

在 360 安全瀏覽器中，按 F12 或 Ctrl+ Shift+I 也會調出交互式開發者工具。此工具提供了與源代碼和 CSS 設置的更多交互，使用戶可以查看代碼中的更改如何立即影響網頁。

如何關閉源代碼頁或工具

查看完網頁上的源代碼后，您可能想要退出或關閉它。關閉源代碼取決于您用來打開源代碼的方法。

• 如果您使用了Ctrl+U 方法（Edge 除外）或右鍵單擊方法，請關閉在瀏覽器窗口頂部打開的新選項卡。
• 如果您使用過開發人員方法（使用 F12 或Ctrl+ Shift+I），請再次按相同的鍵，或單擊工具窗口右上角的圖標。

使用在線工具查看源代碼

除了使用瀏覽器外，還有一些在線工具可讓您查看任何網頁的源代碼。這些工具可能會有所幫助，因為大多數工具都可以格式化，樣式化和突出顯示代碼，以使其易于閱讀。

以上就是編程獅W3Cschool為你整理的關于《如何在瀏覽器賬中查看網頁的HTML源代碼？》的全部內容，希望對你有所幫助~