作者：坂田miniStar

【寫作說明】：因搬磚需要，經常截圖網頁面面，蒐羅了網上的技巧，要麼只是選單，要麼只是快捷鍵。特別是快捷鍵實際使用時容易記混淆，也容易忘記。

自己試用了一段時間，完整的使用選單和快捷鍵的方式記錄下來，供值友參考 。

一、換Chrome瀏覽器

裝系統驅動，都是圖省事被安利了360瀏覽器，360為免費版、但是360瀏覽器最大的問題就是各種廣告彈窗、越用越慢、還有不能忍的就是與工具軟體的許可權衝突。

沒毛病，惹不起就躲，不得已解除安裝了360，裝上了Chrome 。

二、 截圖幕需求

截圖幕工具我用得最多的是系統自帶的截圖小工具，

但是系統自帶的截圖工具有一個缺陷就是隻能截顯示的部分，但現在網頁大部分都是有好幾個頁面的長度，用自帶截圖工具效率就很低了，分塊截圖再拼接，而且很容易對不齊，工作量也加大了。迫切需要一個新的方法來提高生產效率。

於是瀏覽器自帶的截圖功能的優勢就體現出來了，因為可以截長圖啊，又不想裝外掛，按蒐集來的方法直接來試用一遍Chrome截圖的完整操作。

三、開啟瀏覽器

在這裡以瀏覽張大媽網站頁面為例，先進入張大媽頁面。

四、進入開發者模式

4。1 方法1：直接按鍵盤上的快捷鍵F12，實測了中英文輸出法條件下都是生效的。

4。2 方法2：在瀏覽器介面直接透過選單欄的路徑：選單欄右上角省略號——更多工具——開發者工具，也可以進入除錯模式。

4。3 方法3：直接按組合快捷鍵，Ctrl+Shift+I，也可以進入除錯模式。

五、找到截圖選單 

5。1 方法1：在開發者模式下的選單中，選單欄右上角省略號——Run command，點選即可進入功能選單搜尋介面。

然後，在位址列裡輸入Scr，工具欄立即自動聯想出來的ScreenShot的4個選單組都是截圖工具選單（紫色的標籤）。

5。2 方法式：直接按快捷鍵組合 Ctrl+Shift+P，直接進入功能選單搜尋介面。

然後，在位址列裡輸入Scr，工具自動聯想出來的ScreenShot選單組即是截圖工具選單

六、Chrome支援的4種截圖方式使用

6。1 方式1：Screenshot： Capture area screenshot（手動選擇截圖區域，然後瀏覽器自動存為圖片到預設下載目錄）。

實測這個截圖功能在使用時有時會出現亂碼（圖片上的字型錯亂）；如果出現這樣的錯誤截圖，只能重新截一次（我實測最差情況下三次也有兩次是可以正確截圖的）。

6。2 方式2：Screenshot： Capture full size screenshot（擷取整個頁面）

這個功能就是截長圖了，圖片很長，我只放了一個瀏覽的縮圖，只是是頁面內容，全部被截下來了，截圖用來做PDF文件清晰度也足夠了。

6。3 方式3： Screenshot： Capture node screenshot（截圖當前螢幕顯示的內容、並連同整體頁面尺寸一起儲存，未顯示的部分只保留背景，沒有顯示內容）。

該方法截圖是一塊塊的截，但保留背景，用來拼接和對齊頁面內容很有幫助。

6。4 方式4： Screenshot： Capture screenshot （截圖當前螢幕顯示的內容、並自動存為圖片）

也就是滑鼠滑到哪一段，這個截圖就是截顯示的那一段。

七、存圖方式

Chrome瀏覽器預設有一個存圖資料夾，截圖的圖片自動存在該資料夾下，完成截圖後複製出來即可。

八、總結

被360的各種彈窗、外掛搞怕了，感覺Chrome瀏覽器還是相對比較簡潔的。

本方法全是基於瀏覽器本身自帶的，沒有裝其它的外掛，輕便好用。推薦大家試一下，拋棄360，減少對外掛依賴。

截圖檔案是自動儲存的，操作完一次後圖片是自動儲存的，不需要重複操作，截完圖直接去瀏覽器下載資料夾找圖就可以了。

相對於網上流傳的只有快捷鍵的提示，實際經常會忘記或記混淆快捷鍵。

我更推薦先從選單操作一遍，why？ 可以透過這樣操作知道瀏覽器的選單分佈，即使一時忘記了快捷鍵，按圖索驥也能很快找到相關功能。

這個總結寫之前總覺得有點雞肋，但時因為我用網頁截圖功能挺多的，經常用不順暢，有時一著急又用回系統自帶截圖工具了，效果又得到了降低 。痛定思痛，這次終於有時間把這個思路整理一下了，目的就是一貼搞定小雞肋。

來一張外拍小姐姐的圖，搬磚人雖然仍在搬磚，但也要快樂過節呀 。

End！ 節日快樂！