一鍵打開瀏覽器「上帝模式」，你也許不知道的5個實用小技巧

▍ 前言

網際網路時代，我們得以憑藉一個小小的視窗瀏覽浩瀚的網路世界，離不開瀏覽器的支持。

贊助商廣告

而今網路上的各種資訊和資源更是讓瀏覽器成為每個工作族必備的工具之一，因此你或多或少聽說過「F12」這一關鍵詞。

「F12」是打開瀏覽器「開發者工具」的一個快捷鍵，「開發者工具」還有以下幾種打開方式：

快捷鍵：Ctrl Shift I
快捷鍵（macOS）：Command Option I
右鍵菜單 - 檢查
菜單欄 - 更多工具 - 開發者工具

相信如果是從事網站開發的讀者對「開發者工具」並不陌生，這是進行網站調試和檢查 bug 的最常用工具。

▍ 瀏覽器的「上帝模式」

何謂「上帝模式」？通常是指一個人對某件事情上擁有無限的控制能力，可以隨心所欲地改變和操縱一切。在我們的理解中，「上帝模式」可以被用來形容某種具有超凡能力或者無限自由的狀態。

就好比是在「我的世界」里開啟了「創造模式」。

「我的世界」中的「上帝模式」

將這個概念應用到瀏覽器上，我們可以將其理解為用戶通過開發者工具獲得了對網頁的絕對控制權。在普通人看來，網頁是一個已經完成並且不可更改的東西，而開發者工具就提供了一種讓普通人可以像開發人員一樣去修改和操作網頁的途徑。

開發者工具 （devtools）是一套用於開發和調試網頁的工具，這些工具可以檢查當前加載的 HTML、CSS 和 JavaScript，顯示每個資源頁面的請求以及載入所花費的時間。不同於網站創建器或者集成開發環境，開發者工具不直接參與網站的創建，而用於測試網站或網頁應用的用戶界面，它提供了對網頁源代碼的完全訪問權限。

▍ 網頁的本質

正如前文所述，開發者工具是一套用於檢查和調試網頁的工具，那麼在介紹之前，首先需要了解我們瀏覽的「網頁」的本質是什麼。

網頁的本質是一些用 HTML（超文本標記語言）編寫的文本文件。

HTML 是一種用於創建網頁的標記語言，它由一系列的標籤組成，這些標籤用於描述網頁的結構和內容。這與 TXT、Markdown、XML 沒有本質區別。

贊助商廣告

眼花繚亂的網頁實際上是由文本渲染而成

區別在於瀏覽器識別到 HTML 的標籤後會將其渲染成對應的格式，比如以下 HTML 代碼：

這是一個標題

首頁
關於我們
產品
聯繫我們

文章標題

這是一段文章內容。

圖片標題

在瀏覽器中會被渲染成：

HTML 文件在瀏覽器中的樣子

一個純 HTML 構成的網頁就像上圖一樣簡陋，要形成精美的網頁還少不了 CSS（Cascading Style Sheets）和 JS（JavaScript）的支持。CSS 用於調整網頁的外觀和樣式，比如網頁元素的顏色、大小、位置等；JS 則用於實現網頁的動態效果和交互，比如登錄功能、提交表單、點擊事件等。

如果不是網站開發人員，我們在「開發者工具」中常用的就是使用 JS 對網站修改和查詢。JS 是與 HTML 與 CSS 的交互橋樑，使我們可以輕鬆地通過 DOM 與網頁元素進行交互。

DOM 是文檔對象模型（Document Object Model）的縮寫，它是一種用於表示和操作 HTML、XML 等文檔結構的編程接口。在瀏覽器中，每個加載的網頁都會被解析成一個 DOM 樹，通過 DOM 可以對這個樹狀結構進行訪問和操作，使用 JavaScript 等腳本語言可以動態地改變網頁的內容、結構和樣式。

在瀏覽器的「開發者工具」中，JS 代碼主要通過「Console（控制台）」運行。

Console 是一個簡易的 REPL（Read-Eval-Print Loop，一種交互式編程環境），可以在控制台中運行 JavaScript，與正在檢查的網頁進行交互。

正是 HTML、CSS、JS 三者相輔相成，網際網路才在我們眼前呈現出如此豐富多彩的樣式。

好，簡單了解網頁的本質之後，接下來本文就以普通人能夠理解的視角並結合幾個有趣且實用的例子，帶大家了解一下這個熟悉而又陌生的「F12」到底能做些什麼。

如果你現在正在使用電腦端瀏覽本文，可以跟著我一起試一試~

註：下文以 Chrome 瀏覽器的「開發者工具」為例。

▍ 將網頁變成所見所得編輯器

現在假設我想裝成一個大佬在朋友面前炫耀一下，比如將自己的我們粉絲 P 成 10 萬，文章閱讀量 P 成 100 萬。

一般做法可能會使用截圖工具截一張圖，而後在 PS 中將粉絲數從「10」改成「10 萬」；而聰明點的朋友可能會按下「F12」打開「開發者工具」，找到網頁中 HTML 的對應位置，手動將粉絲數改成 10 萬。

但你完全可以只使用一行代碼，讓整個網頁變成你的「所見即所得」編輯器，隨心所欲地修改原始網頁的任何內容。

按下「F12」，打開「Console」，輸入以下代碼：

贊助商廣告

document.body.contentEditable= true

按下「回車」，神奇的事情發生了，整個網頁的內容都可以任意修改或刪除，你可以像編輯 Word 文檔一樣編輯原始網頁：

隨心所欲地「篡改」網頁

註：倘若你使用的是 Edge 瀏覽器，由於其一些限制策略，粘貼代碼時可能會彈出以下警告：

在 Console 中手動輸入以下代碼即可解除限制：

allow pasting

▍ 16 倍速播放影片

在瀏覽影片的過程中，有時候我們想要快速播放影片以便加快學習進度，但大部分影片網站只提供了 0.5 到 2 倍速之間的播放速度。

贊助商廣告

B 站最高只提供 2 倍播放速度

而使用「開發者工具」則可以輕鬆實現超過 2 倍的播放速度。隨便點開 B 站的一個影片播放界面，按下「F12」，打開「Console」，輸入以下代碼：

document.querySelector( 'video').playbackRate = 16;

這行代碼的作用是使用 querySelector 方法選擇當前網頁中類型為 video 的標籤，並將其播放速度設置為 16 倍。

執行完上述代碼，你會發現影片的播放速度瞬間飆升至 16 倍，這對於快速查看影片內容或者加快學習進度非常有用。

16 倍播放影片

既然可以快放，慢放自然也是可以實現的，上述代碼中的數字表示我們設置的播放速度，將更改為小於 1 的數值即可實現慢放。譬如我在「Console」執行以下代碼：

document.querySelector( 'video').playbackRate = 0.1

這時影片會以極慢的速度一幀一幀地播放，這在需要精確截取影片畫面時非常有用。

至於能不能將播放速度設置為負值，各位讀者朋友可以自己嘗試一下。

▍ 複製網頁文本的小技巧

當我們嘗試複製網頁上的一段文本時會發現，有些網頁並不是那麼容易被複製，像是某些網頁沒有提供右鍵菜單、某段文本不可選中等。

比方說現在我們打算獲取少數派首頁的所有文章標題，一般的做法是手動選擇文章標題，複製到記事本中進行整理，這樣雖然慢但或許可行……嗎？

但你實際嘗試之後會發現少數派首頁的文章標題其實是被禁止複製的，這種方法並不可行。

那麼我們有什麼辦法能複製這種「無法複製的文本」呢？

我們可以按下 F12，使用開發者工具自帶的元素選擇器（快捷鍵 Ctrl Shift C），將鼠標定位至對應的文章標題上，開發者工具的「Elements」（元素）會跳轉到的文章標題對應的 HTML 位置，在這裡你可以盡情複製原本無法複製的文本。

在源碼中找到文章標題的位置

但以上方式只適用於複製一段文章標題，如果我們想匯總近期上首頁的所有文章的標題呢？

贊助商廣告

現在，請你打開少數派的首頁界面，按下 F12，打開「Console」，輸入以下代碼試試：

var elements = document.getElementsByClassName( "card_content");
var titles = [];
for ( var i = 0; i var titleElement = elements[i].querySelector( ".title.text_ellipsis2");
if (titleElement) {
var title = titleElement.textContent.trim().replace( /s /g, " ");
titles.push(title);
}
}
console.log(titles.join( " "));

按下回車，這段代碼會在「Console」列印出近期上首頁的文章標題列表：

輕鬆獲取所有文章標題

以上代碼的功能是根據當前網頁的特點，從 HTML 提取我們需要的資訊。觀察少數派首頁的特點可以發現，文章標題資訊保存在像這樣的 HTML 結構中：

放輕鬆 | 不再追逐快樂，允許自己悲傷，以及我的思考

可以看出，文章標題的文本被保存在的 div 元素中，使用 JS 的選擇器可以輕鬆將需要的內容從原始代碼中提取出來。

恭喜，你已經學會了爬蟲的入門教學！

掌握原理後，你可以觀察不同網頁的特點，使用 JS 輕鬆實現效率翻倍。

舉個實際的例子：

最近在準備一門考試，我喜歡將做錯的題目記錄到 Anki，以便後續複習和回憶。但有些網站會將一段完整的文本分割成一段段零碎的文本，或者該段文字本身就是多行文本，這不方便我們複製需要的內容。

打開「開發者工具」發現網站上的題目將選項保存在多個 HTML 標籤中，這讓我很難直接複製出一道完整的選擇題：

這是一道選擇題，但選項分布在多個元素當中

這種類型的文本看似繁瑣，但觀察 HTML 的特點發現使用 JS 的選擇器可以很輕鬆地將我們需要的內容剝離出來，以下是一個示例：

var paperWrap = document.getElementById( "paperWrap");
var question = paperWrap.querySelector( ".singleR").textContent.trim();

var options = Array.from(paperWrap.querySelectorAll( ".answerContentList label"));
var options = options.map( function(option) {
return option.textContent.trim();
});

贊助商廣告

var result = question " " options.join( " ");
console.log(result);

這段代碼首先通過 document.getElementById("paperWrap") 獲取到包含題目資訊的元素，接著使用 querySelector(".singleR").textContent.trim() 在 paperWrap 中查找類為 .singleR 元素的內容並去除文本之間的空格；隨後使用 paperWrap.querySelectorAll(".answerContentList label") 查找所有類名為 answerContentList 且標籤類型為 Label 的元素，通過 map 方法將每個選項的純文本集合成數組；最後通過字符串拼接，列印出我們需要的內容。

在開發者工具的「Console」運行以上代碼，會列印出一道完整的選擇題，這樣複製起來可就方便多了。

列印出的結果很符合我的需求

▍ 自由截取網頁

其實有經驗的朋友打開「開發者工具」時應該會發現，這東西能跑 JS，能修改網頁、能 debug，這不就是一個 IDE（Integrated Development Environment）嘛。是的，可以這麼理解，甚至當我們執行快捷鍵 Ctrl Shift P（或 Command Shift P）會出現一個程式設計師都很熟悉的面板：

命令面板

在 VSCode 中這是一個常用的面板，用於快速執行某些操作和功能，瀏覽器的命令面板也自帶了「開發者工具」中的一些快捷命令。

現在請思考一下，如果你現在想截取網頁中的一個頁面，你會怎麼做，一般來說會有以下幾種方式：

使用 Snipaste 之類的截圖工具
使用 QQ、微信的截圖功能
使用 Windows 自帶的快捷鍵 Prtsc 按鍵

以上其實都是藉助外部工具捕獲螢幕的一種方法，但其實瀏覽器本身就為我們提供了一套截圖工具。

在「開發者工具」中使用「Ctrl Shift P」打開命令面板，輸入 capture ，命令面板的列表會顯示出四種截圖方式：

贊助商廣告

自帶的四種截圖方式

Capture area screenshot

捕獲區域截圖。

在命令面板中執行這個指令後，鼠標光標會立即變成一個十字形狀，我們可以通過移動光標選取需要截取的範圍，鬆手後會自動完成截圖。

這種簡單直觀的截圖流程與我們通常使用的方式沒什麼區別。

Capture full size screenshot

捕獲全尺寸截圖。

全尺寸截圖它可以幫助我們獲取當前瀏覽器中正在瀏覽的網頁的完整螢幕截圖。與上一個截圖方式不同，全尺寸截圖可以捕獲整個頁面的內容，包括滾動到螢幕外的部分，通俗來講就是「長截圖」。

「長截圖」在手機上算是一個比較常用的功能，不過如果想對網頁進行「長截圖」可得花一番功夫，但瀏覽器的「開發者工具」其實已經為你準備好這個功能。

當我們在網頁中看到一篇不錯的文章，在命令面板中執行此指令後，瀏覽器會將我們正在瀏覽的網頁進行全屏截圖，並保存為 png 格式。

整篇文章被保存為長圖

Capture node screenshot

捕獲節點截圖。

如前文「網頁的本質」一節中所述，網頁實際上是一篇帶有特定標籤的文本，每個標籤可以稱作一個節點，大部分節點都擁有父節點與子節點。而 Capture node screenshot 功能可以將我們選中的節點以及其子節點直接捕獲為截圖，這在你需要精確截取文章某部分內容的時候非常有用。

比如，我想截取我主頁的個人資訊，在「開發者工具」中找到此界面在源碼中的位置（按下快捷鍵「Ctrl Shift C」點擊博主資訊面板即可）。下圖中可以看到，個人資訊面板在源碼中對應的位置是 class 為 user_info_card 的 div 節點。

找到所需界面在源碼中對應的節點

選中該節點，執行 Capture node screenshot 指令，瀏覽器會將這個元素捕獲成圖片並保存。

贊助商廣告

完美截取指定元素

Capture screenshot

捕獲截圖。

這個功能可以截取當前網頁的可見部分（就是我們在瀏覽器中能實際看到的部分）。

▍ 獲取網頁的資源

瀏覽網頁已經成為一件稀疏平常的事情，但你有沒有想過我們在瀏覽器中看到的字體、圖片、音樂、影片到底是保存在什麼地方呢。

網頁的所有原始資源均保存在 HTML 文件中定義的資源位置，也就是網站所在的伺服器或者資源的 CDN 上。通過我們瀏覽網頁的這個行為，瀏覽器會將對應的資源緩存到本地以保證網頁被正常渲染。

瀏覽某些網頁的時候發現網頁中的圖片無法加載，其實就是瀏覽器沒有正確從伺服器上緩存圖片而導致的。

讀到這裡你應該發現，既然所有資源都緩存在瀏覽器本地，那麼我們是否可以把我們想要的資源保存在電腦磁盤中呢？

答案是可以的，通過「開發者工具」中的「Network」功能，可以自由獲取網頁中緩存的各項資源。

Network 用於監控和分析瀏覽器與伺服器之間的網路請求和響應。它可以顯示資源請求的詳細資訊、性能數據，幫助開發者調試錯誤、優化網頁加載速度，並模擬不同網路條件進行測試。

現在打開「開發者工具」中的「Network」標籤，將當前瀏覽的網頁刷新一下，「Network」下會顯示該網頁中所有資源和請求的名稱、類型、文件大小、響應時間等內容：

「Network」列出了每種資源的詳細資訊

瀏覽器將伺服器上的 JS、CSS、圖片等資源緩存到本地，使得我們能夠正常瀏覽網頁，在網站開發從業者中，「Network」是十分常用的調試工具，能幫助快速判斷導致網站異常的原因。

當然並不代表這個功能對普羅大眾沒有用處，我們瀏覽網頁在乎的可能有：字體、圖片、影片等一些能實際看見的資源。

而網頁由各種訪問請求匯聚而成，在可讀性極差的列表中尋找我們需要的資源不可謂不困難，所以「開發者工具」貼心地提供了分類功能，在「Network」中可以看到有一行分類標籤：

資源類型

我們選中對應的分類能即可快速篩選對應的資源類型。其中：

Font - 網站中使用的字體樣式
Img - 網站中使用的圖片
贊助商廣告
Media - 網站中使用的媒體資源

比如你在瀏覽某個網頁的時候發現該網頁的字體樣式十分好看，想將其放在自己的博客中使用，那麼可以瀏覽「Font」標籤將字體下載並應用到自己的博客當中（請注意版權問題）。除「Font」標籤之外的其他標籤各位讀者朋友也可以自行嘗試一下。

當你困惑於網頁沒有提供合適的資源獲取途徑時，按下 F12 打開開發者模式，或許能發現一片新的天地。

▍ 結語

「開發者工具」雖然被冠以「開發者」前綴，但其實也只不過是瀏覽器自帶的一個強大功能，它讓普通人也能像開發人員一樣對網頁進行修改和操作。

在你瀏覽網頁的間隙，不妨按下「F12」鍵，觀察一下每個網站的特點，相信這個小小的按鍵或許能給你帶來一些意外之喜。

最後，請務必記住，使用「開發者工具」時要遵守法律法規和道德規範，請勿在涉及版權保護的網站使用，尊重他人的版權和隱私是我們每個人應該遵守的基本原則。