本文主要以百度首頁為例罩引，記錄Chrome瀏覽器中嘹悼，保存頁面的多種方式（涉及一些Chrome的“小技巧”）嵌器，涉及插件使用請自行嘗試瞳脓，本文僅對不使用插件的情況下保存頁面的不同處理方法做簡單介紹亿卤。
系統(tǒng)環(huán)境：Windows10、Chrome 70.0.3538.110（正式版本） （64 位）.
保存離線頁面
說到頁面離線保存陨帆，首先想到的就是右鍵保存（Ctrl + S），這樣的方式保存會把當(dāng)前頁面的資源保存下來，并放到一個目錄下面，大致效果如下：
在想要編輯頁面源碼等情況下，可以使用此方法窄瘟，如果只想獲取單個離線頁面文件用來離線查看，則可以嘗試保存當(dāng)前頁面為MHTML文檔趟卸，可以使用插件（Save As MHT 寞肖、Save As MHTML 等） 或Chrome原生支持來完成此功能。
Chrome瀏覽器保存MHTML格式頁面
很多瀏覽器（IE 5.0+衰腌、Opera 9.0+新蟆、Chrome等）都支持存儲MHTML格式頁面，大多不支持的瀏覽器右蕊，也有對應(yīng)的插件可以處理琼稻。
在Chrome中，要保存MHTML格式頁面饶囚，需要在Chrome的實(shí)驗(yàn)性功能設(shè)置中開啟帕翻。
首先，在Chrome瀏覽器的地址欄輸入 chrome://flags 萝风，可以進(jìn)入Chrome的實(shí)驗(yàn)性功能設(shè)置頁面
在頁面的搜索框內(nèi)輸入 mhtml 嘀掸，找到 Save Page as MHTML 項（或直接在地址欄輸入 chrome://flags/#save-page-as-mhtml），將該項設(shè)置為 Enabled 规惰，然后點(diǎn)擊底部提示中的 RELAUNCH NOW 按鈕重啟瀏覽器睬塌，使修改生效。
重啟瀏覽器后歇万，在需要保存的頁面中揩晴，右鍵，選擇另存為（或快捷鍵 Ctrl + S）贪磺，彈出的另存為窗口硫兰，保存類型選擇 網(wǎng)頁（單個文件）
附：IE保存MHT格式頁面
MHTML（維基百科 | 百度百科），網(wǎng)頁歸檔寒锚，又稱單一檔案網(wǎng)頁或網(wǎng)頁封存檔案劫映，可以將一個多附件網(wǎng)頁保存為單一文檔，文檔擴(kuò)展名為 .mht 或 .mhtml刹前。IE瀏覽器支持保存 .mht 文件泳赋，下面做簡單介紹。
IE瀏覽器中打開需要保存的百度首頁頁面鏈接腮郊，然后右鍵保存（Ctrl + S）摹蘑，出現(xiàn)的保存窗口中筹燕，選擇保存類型 *.mht
此時可以看到一個百度的MHT文件轧飞，文本編輯器打開后衅鹿，可以看到類似下面的代碼：
這里可以看到MHTML文檔是基于超文本標(biāo)記語言的，里面可以看到經(jīng)過處理的頁面代碼过咬。
保存PDF頁面
Chrome中PDF格式頁面保存大渤，可以通過 PrintFriendly & PDF (有Chrome插件）等在線處理服務(wù)或使用Chrome插件（Save As PDF）實(shí)現(xiàn)，也可以通過打印來實(shí)現(xiàn)掸绞。
Chrome打印預(yù)覽中保存頁面PDF
在想保存的頁面中泵三，快捷鍵 Ctrl + P （或右鍵菜單 -> 打印(p)...），打開頁面的打印瀏覽界面
此時可以看到站點(diǎn)的打印預(yù)覽效果（默認(rèn)黑白顯示）衔掸，在左側(cè)選項中找到 目標(biāo)打印機(jī) -> 更改... 烫幕，在彈出的選擇界面中，找到 另存為 PDF 敞映，雙擊即可
此時就可以看到站點(diǎn)的彩色版預(yù)覽效果较曼，點(diǎn)擊左側(cè)的 保存 按鈕即可將站點(diǎn)存儲為PDF格式。
保存圖片頁面
部分情況下振愿，可能會需要截取頁面捷犹，有時僅需要截取部分內(nèi)容，這通過普通的截圖工具即可完成冕末，如QQ截取萍歉、微信截圖、Windows自帶截圖工具等等档桃；而有時可能需要截取頁面長圖枪孩，這也可以通過工具來實(shí)現(xiàn)，如FastStone Capture藻肄、Chrome插件（FireShot销凑、Full Page Screen Capture）等。這里簡單介紹 FastStone Capture 和Chrome截圖方法仅炊，其他方式不贅述斗幼。
截圖工具實(shí)現(xiàn)圖片頁面保存
打開工具 FastStone Capture ，選擇 捕捉滾動窗口 按鈕抚垄，則可以進(jìn)入長圖截圖窗口
FastStone Capture的捕捉滾動窗口蜕窿，可以支持自動滾動窗口及自定義滾動窗口，可以根據(jù)需要選擇呆馁，以達(dá)到截取所需內(nèi)容的目的（自定義滾動截圖不太好使桐经，不容易把控結(jié)束時間，截取的圖片可能需要再次編輯）
Chrome瀏覽器命令行菜單實(shí)現(xiàn)圖片頁面保存
在Chrome瀏覽器的開發(fā)者工具中（devtools）浙滤，也提供了類似主流編輯器（Sublime Text, Atom, Visual Studio Code等）中的命令行菜單阴挣，通常使用 Ctrl + Shift + P ( Mac 上是 Cmd + Shift + P) 。如Sublime Text的命令行菜單：
使用Sublime Text的朋友應(yīng)該很熟悉這個了纺腊，而命令行菜單帶來的遍歷是不言而喻的畔咧。
在Chrome瀏覽器中茎芭，首先 F12 打開 DevTools 開發(fā)者工具，然后在DevTools中使用快捷鍵 Ctrl + Shift + P 誓沸，就可以打開Chrome的命令行菜單：
在命令行菜單中梅桩，輸入 capture 就可以看到有如下選項
這里可以看到，Chrome命令行菜單提供了三個用于界面捕獲的命令
- Capture full size screenshot - 截取整個站點(diǎn)（長圖）
- Capture node screenshot - 截取選擇的DOM節(jié)點(diǎn)
- Capture screenshot - 截取視圖窗口顯示的部分
在命令行內(nèi)輸入對應(yīng)的命令拜隧，即可完成截圖宿百。
附：Chrome瀏覽器站點(diǎn)移動端視圖截圖
上面介紹了截取站點(diǎn)方法，這里額外說下洪添，想截取站點(diǎn)在不同像素顯示下響應(yīng)顯示時垦页，截取類似移動端長圖的方法。
同樣在Chrome瀏覽器中干奢，打開DevTools外臂，然后點(diǎn)擊按鈕，點(diǎn)擊 toggle device toolbar（切換設(shè)備工具欄） 律胀，可以看到類似如下效果：
在這個工具欄中宋光，可以通過切換不同的設(shè)備（不同的分辨率），來查看站點(diǎn)在不同的分辨率下的顯示情況炭菌，可以很好的輔助站點(diǎn)的響應(yīng)式開發(fā)工作罪佳。在這個視圖中，可以通過點(diǎn)擊頂部菜單項最右邊的三個點(diǎn)黑低，來打開菜單赘艳，里面有截取屏幕的選項，如下：
Headless Chrome模式完成頁面截圖及轉(zhuǎn)存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是可以命令行模式運(yùn)行Chromium和Blink渲染引擎提供功能蕾管。可以在無UI窗口的情況下菩暗，完成很多瀏覽器的操作掰曾，是自動測試和服務(wù)器環(huán)境的絕佳工具。更多內(nèi)容參看官方說明停团。
Headless Chrome 保存頁面
管理員模式運(yùn)行命令行窗口旷坦，使用 cd 命令進(jìn)入Chrome瀏覽器安裝目錄，輸入類似如下命令：
chrome --headless --disable-gpu --dump-dom https://www.baidu.com
測試了下佑稠，好像沒有效果秒梅，具體原因不清楚。舌胶。捆蜀。有知道的朋友，希望可以不吝賜教！Ａ舅誊薄！
Headless Chrome 保存頁面PDF
管理員模式運(yùn)行命令行窗口，使用 cd 命令進(jìn)入Chrome瀏覽器安裝目錄娩井，輸入類似如下命令：
chrome --headless --disable-gpu --print-to-pdf='存儲路徑\文件名稱' https://www.baidu.com
注意，此處如果不給存儲路徑和文件名稱似袁，則保存的pdf可以在Chrome瀏覽器安裝目錄下對應(yīng)版本號的目錄文件下洞辣，文件名稱為 output.pdf
Headless Chrome 頁面截圖
管理員模式運(yùn)行命令行窗口，使用 cd 命令進(jìn)入Chrome瀏覽器安裝目錄昙衅，輸入類似如下命令：
chrome --headless --disable-gpu --screenshot='存儲路徑\文件名稱' https://www.baidu.com
## 設(shè)置圖片大小(尺寸大小好像沒有用扬霜，具體作用自行研究)
chrome --headless --disable-gpu --screenshot='存儲路徑\文件名稱' --window-size=寬,高 https://www.baidu.com
注意，此處如果不給存儲路徑和文件名稱而涉，則保存的pdf可以在Chrome瀏覽器安裝目錄下對應(yīng)版本號的目錄文件下著瓶，文件名稱為 output.pdf
Puppeteer
Chrome官方推出的Puppeteer（封裝了Headless Chrome的Node庫），可以完成瀏覽器中手動執(zhí)行的大多數(shù)操作：
- 生成頁面的屏幕截圖和PDF啼县。
- 抓取SPA（單頁面應(yīng)用程序）并生成預(yù)渲染內(nèi)容（即“SSR”（服務(wù)器端渲染））材原。
- 自動化表單提交，UI測試季眷，鍵盤輸入等余蟹。
- 創(chuàng)建最新的自動化測試環(huán)境。使用最新的JavaScript和瀏覽器功能直接在最新版本的Chrome中運(yùn)行測試子刮。
- 捕獲站點(diǎn)的時間線跟蹤威酒，以幫助診斷性能問題。
- 測試Chrome擴(kuò)展程序挺峡。
類似的還可以嘗試PhantomJS -- 可編寫腳本的無頭瀏覽器
閱讀參考
- Chrome 開發(fā)者工具中的命令菜單
- DevTools Digest: More Power with the New Command Menu -- Google developers
- Chrome DevTools: Use the Command Menu to access almost everything in DevTools in a few keystrokes
- Headless_software -- 維基百科
- chromeless(已停止維護(hù)，推薦使用Puppeteer)
- 使用 Chrome Headless 模式將 HTML 轉(zhuǎn) PDF
- Chromium命令行開關(guān)列表
