Windows小技巧 -- Chrome瀏覽器中頁面儲存技巧
本文主要以百度首頁為例,記錄Chrome瀏覽器中,儲存頁面的多種方式(涉及一些Chrome的“小技巧”),涉及外掛使用請自行嘗試,本文僅對不使用外掛的情況下儲存頁面的不同處理方法做簡單介紹。
系統環境:Windows10、Chrome 70.0.3538.110(正式版本) (64 位).
儲存離線頁面
說到頁面離線儲存,首先想到的就是右鍵儲存(Ctrl + S
),這樣的方式儲存會把當前頁面的資源儲存下來,並放到一個目錄下面,大致效果如下:
在想要編輯頁面原始碼等情況下,可以使用此方法,如果只想獲取單個離線頁面檔案用來離線檢視,則可以嘗試儲存當前頁面為MHTML文件,可以使用外掛(Save As MHT
Save As MHTML
等) 或Chrome原生支援來完成此功能。
Chrome瀏覽器儲存MHTML格式頁面
很多瀏覽器(IE 5.0+、Opera 9.0+、Chrome等)都支援儲存MHTML格式頁面,大多不支援的瀏覽器,也有對應的外掛可以處理。
在Chrome中,要儲存MHTML格式頁面,需要在Chrome的實驗性功能設定中開啟。
首先,在Chrome瀏覽器的位址列輸入 chrome://flags
,可以進入Chrome的實驗性功能設定頁面
在頁面的搜尋框內輸入 mhtml
,找到 Save Page as MHTML
項(或直接在位址列輸入 chrome://flags/#save-page-as-mhtml
Enabled
,然後點選底部提示中的 RELAUNCH NOW
按鈕重啟瀏覽器,使修改生效。
重啟瀏覽器後,在需要儲存的頁面中,右鍵,選擇另存為(或快捷鍵 Ctrl + S
),彈出的另存為視窗,儲存型別選擇 網頁(單個檔案)
附:IE儲存MHT格式頁面
MHTML(維基百科 | 百度百科),網頁歸檔,又稱單一檔案網頁或網頁封存檔案,可以將一個多附件網頁儲存為單一文件,文件副檔名為 .mht
或 .mhtml
。IE瀏覽器支援儲存 .mht
檔案,下面做簡單介紹。
IE瀏覽器中開啟需要儲存的百度首頁頁面連結,然後右鍵儲存(Ctrl + S
),出現的儲存視窗中,選擇儲存型別 *.mht
此時可以看到一個百度的MHT檔案,文字編輯器開啟後,可以看到類似下面的程式碼:
這裡可以看到MHTML文件是基於超文字標記語言的,裡面可以看到經過處理的頁面程式碼。
儲存PDF頁面
Chrome中PDF格式頁面儲存,可以通過 PrintFriendly & PDF (有Chrome外掛)等線上處理服務或使用Chrome外掛(Save As PDF)實現,也可以通過列印來實現。
Chrome列印預覽中儲存頁面PDF
在想儲存的頁面中,快捷鍵 Ctrl + P
(或右鍵選單 -> 列印(p)...
),開啟頁面的列印瀏覽介面
此時可以看到站點的列印預覽效果(預設黑白顯示),在左側選項中找到 目標印表機
-> 更改...
,在彈出的選擇介面中,找到 另存為 PDF
,雙擊即可
此時就可以看到站點的彩色版預覽效果,點選左側的 儲存
按鈕即可將站點儲存為PDF格式。
儲存圖片頁面
部分情況下,可能會需要擷取頁面,有時僅需要擷取部分內容,這通過普通的截圖工具即可完成,如QQ擷取、微信截圖、Windows自帶截圖工具等等;而有時可能需要擷取頁面長圖,這也可以通過工具來實現,如FastStone Capture、Chrome外掛(FireShot、Full Page Screen Capture)等。這裡簡單介紹 FastStone Capture
和Chrome截圖方法,其他方式不贅述。
截圖工具實現圖片頁面儲存
開啟工具 FastStone Capture ,選擇 捕捉滾動視窗
按鈕,則可以進入長圖截圖視窗
FastStone Capture的捕捉滾動視窗,可以支援自動滾動視窗及自定義滾動視窗,可以根據需要選擇,以達到擷取所需內容的目的(自定義滾動截圖不太好使,不容易把控結束時間,擷取的圖片可能需要再次編輯)
Chrome瀏覽器命令列選單實現圖片頁面儲存
在Chrome瀏覽器的開發者工具中(devtools),也提供了類似主流編輯器(Sublime Text, Atom, Visual Studio Code等)中的命令列選單,通常使用 Ctrl + Shift + P
( Mac 上是 Cmd + Shift + P
) 。如Sublime Text的命令列選單:
使用Sublime Text的朋友應該很熟悉這個了,而命令列選單帶來的遍歷是不言而喻的。
在Chrome瀏覽器中,首先 F12
開啟 DevTools
開發者工具,然後在DevTools中使用快捷鍵 Ctrl + Shift + P
,就可以開啟Chrome的命令列選單:
在命令列選單中,輸入 capture
就可以看到有如下選項
這裡可以看到,Chrome命令列選單提供了三個用於介面捕獲的命令
- Capture full size screenshot - 擷取整個站點(長圖)
- Capture node screenshot - 擷取選擇的DOM節點
- Capture screenshot - 擷取檢視視窗顯示的部分
在命令列內輸入對應的命令,即可完成截圖。
附:Chrome瀏覽器站點移動端檢視截圖
上面介紹了擷取站點方法,這裡額外說下,想擷取站點在不同畫素顯示下響應顯示時,擷取類似移動端長圖的方法。
同樣在Chrome瀏覽器中,開啟DevTools,然後點選按鈕,點選 toggle device toolbar(切換裝置工具欄)
,可以看到類似如下效果:
在這個工具欄中,可以通過切換不同的裝置(不同的解析度),來檢視站點在不同的解析度下的顯示情況,可以很好的輔助站點的響應式開發工作。在這個檢視中,可以通過點選頂部選單項最右邊的三個點,來開啟選單,裡面有擷取螢幕的選項,如下:
Headless Chrome模式完成頁面截圖及轉存PDF
Headless Chrome is shipping in Chrome 59. It’s a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line.
Chrome 59以上版本支援Headless Chrome,Headless Chrome是可以命令列模式執行Chromium和Blink渲染引擎提供功能。可以在無UI視窗的情況下,完成很多瀏覽器的操作,是自動測試和伺服器環境的絕佳工具。更多內容參看官方說明。
Headless Chrome 儲存頁面
管理員模式執行命令列視窗,使用 cd
命令進入Chrome瀏覽器安裝目錄,輸入類似如下命令:
chrome --headless --disable-gpu --dump-dom https://www.baidu.com
測試了下,好像沒有效果,具體原因不清楚。。。有知道的朋友,希望可以不吝賜教!!!
Headless Chrome 儲存頁面PDF
管理員模式執行命令列視窗,使用 cd
命令進入Chrome瀏覽器安裝目錄,輸入類似如下命令:
chrome --headless --disable-gpu --print-to-pdf='儲存路徑\檔名稱' https://www.baidu.com
注意,此處如果不給儲存路徑和檔名稱,則儲存的pdf可以在Chrome瀏覽器安裝目錄下對應版本號的目錄檔案下,檔名稱為 output.pdf
Headless Chrome 頁面截圖
管理員模式執行命令列視窗,使用 cd
命令進入Chrome瀏覽器安裝目錄,輸入類似如下命令:
chrome --headless --disable-gpu --screenshot='儲存路徑\檔名稱' https://www.baidu.com
## 設定圖片大小(尺寸大小好像沒有用,具體作用自行研究)
chrome --headless --disable-gpu --screenshot='儲存路徑\檔名稱' --window-size=寬,高 https://www.baidu.com
注意,此處如果不給儲存路徑和檔名稱,則儲存的pdf可以在Chrome瀏覽器安裝目錄下對應版本號的目錄檔案下,檔名稱為 output.pdf
Puppeteer
Chrome官方推出的Puppeteer(封裝了Headless Chrome的Node庫),可以完成瀏覽器中手動執行的大多數操作:
- 生成頁面的螢幕截圖和PDF。
- 抓取SPA(單頁面應用程式)並生成預渲染內容(即“SSR”(伺服器端渲染))。
- 自動化表單提交,UI測試,鍵盤輸入等。
- 建立最新的自動化測試環境。使用最新的JavaScript和瀏覽器功能直接在最新版本的Chrome中執行測試。
- 捕獲站點的時間線跟蹤,以幫助診斷效能問題。
- 測試Chrome擴充套件程式。
類似的還可以嘗試PhantomJS – 可編寫指令碼的無頭瀏覽器