Chrome 網頁截圖小技巧

2021-02-13 at7h

很多時候，我們都有網頁截圖的需求，而通常我們都會使用系統截圖工具，或是通過 QQ、微信等第三方軟體的截圖功能來完成。而有時候需要截取整個網頁，對於那些有滾動條的頁面來說，上述的截圖工具只能截取當前屏幕顯示的頁面，並不能滿足需求。這個時候你可能想藉助一些工具插件來完成，但其實 Chrome 開發者工具中已經自帶了截圖命令，個人覺得效果也令人滿意。

所以，下面就來介紹下 Chrome 開發者工具截圖命令的使用(mac)：

提示：在此之前，請確保 Chrome 已升級至 59 或更高版本

1. 打開開發者工具：在你想要截圖的網頁上，按下F12或⌘Command + ⌥Option + j，也或者右鍵然後選擇「檢查」，打開開發者工具。

2. 輸入截圖命令：隨後，按⌘Command + ⇧Shift + P調出命令輸入框，然後輸入Capture full size screenshot（只輸前幾個字母就能找到），找到對應後項然後回車即可。

除了整個網頁長截圖以外，如果你想準確截取網頁的某一部分，沒問題！按⌘Command + ⇧Shift + C嗅探元素（即上圖中紅色框中的那個小箭頭），選中想要的部分後，再運行剛才的命令，就可以了。

最後，你還可以進入行動裝置模擬的模式下獲取手機或者平板的截圖，按⌘Command + ⇧Shift + M(即上圖中紅色框中的那個手機的標識)，然後運行剛才的命令就可以啦，在頂部的工具欄中，你還可以選擇要模擬的設備和解析度等。

相關焦點

  • 學習:chrome瀏覽器原生工具長截圖技巧
    用電腦屏幕截圖，每次只能截取屏幕中顯示的圖像。對於那些長文的新聞，我只能多截幾次屏，再想辦法拼接起來，比較麻煩。其實我也嘗試過在瀏覽器的右上角的工具欄中選擇「列印網頁」，列印成pdf。但是，往往會在換頁的地方有內容缺失，或者有些內容被其它的東西擋住了。而且我想要的是保存成圖片。今天在網上找到了解決方案。
  • 如何截圖整個網頁 網頁截圖技巧
    ，一般網頁都很長，採用原來介紹的方法只能截圖看到的一部分，滾動條下面的一大部分看不到的網頁內容就無法截圖到了，那麼該怎麼辦才能截圖整個網頁呢？其實以前在網絡截圖方法大全：QQ截圖，網頁截圖，瀏覽器截圖技巧一文中也簡單介紹了以下完整網頁截圖的方法，不過多數介紹的是一些國外軟體，今日重新查閱下，好像很多都已經不能用了，那麼接下來筆者告訴大家一個更簡單的網頁截圖方法吧，其實筆者很早就知道，可能覺得大家都知道，所以後期沒有對原來文章做一些補充，下面本文來完善下吧，本文主要介紹如何截圖整個完整的網頁頁面
  • 一步兩步,解鎖 Chrome 長截圖功能
    譬如，輸入短連結 chrome://inspect 就能幫助 Android 開發人員可視化調試查看應用中用到 SQLite 資料庫信息，非常方便。諸如此類小技巧，還有很多。這篇文章教大家如何利用 Chrome 瀏覽器自帶的功能截取 PC 端的網頁滾動長屏。
  • 【技巧】利用chrome瀏覽器自動翻譯外文網頁的設置方法
    chrome/1、打開電腦上的chrome瀏覽器，點擊右上角的功能按鈕，選擇「設置」。5、設置完成後，打開外文網頁，在地址欄右側會出現一個翻譯功能小圖標。6、點擊該翻譯圖標，可選擇查看原網頁，或者翻譯該網頁。
  • Chrome開發者工具的小技巧
    代碼格式化有很多css/js的代碼都會被 minify 掉，你可以點擊代碼窗口左下角的那個 { }  標籤，chrome會幫你給格式化掉。強制DOM狀態有些HTML的DOM是有狀態的，比如<a> 標籤，其會有 active，hover， focus，visited這些狀態，有時候，我們的CSS會來定關不同狀態的樣式，在分析網頁查看網頁上DOM的CSS樣式時，我們可以點擊CSS樣式上的 :hov 這個小按鈕來強制這個DOM的狀態。
  • Chrome 瀏覽器必知必會的小技巧
    （點擊上方藍字，快速關注我們）來源：FEWYhttps://segmentfault.com/a/1190000012143176說明這篇文章主要介紹的就是一些chrome瀏覽器的小技巧，很簡單，希望對大家有所幫助。
  • google chrome 使用小技巧
    那麼你必然需要一個Google chrome瀏覽器，主頁君找了一些chrome小技巧，分享給大家~(以下內容轉自知乎 作者：曾少賢）下面都是Google Chrome的操作技巧，全部學會不用花10分鐘，但足夠讓你節省好多時間
  • Chrome 瀏覽器 必知必會的小技巧
    瀏覽器的小技巧，很簡單，希望對大家有所幫助。這其中的一些小技巧在低版本中是沒有的，所以建議大家用最新版的，目前最新版是62，版本很重要，如果發現有些技巧不起作用，請先查看瀏覽器的版本。截全屏保存完整網頁為圖片第一種方式1、打開開發者工具使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)2、打開命令工具
  • 實用小技巧---如何給全部網頁截圖
    相信大家在平時學習和工作的時候，都少不了要對網頁截圖。
  • 無需軟體,教你用 Chrome 原生工具給網頁長截圖
    通常我們會使用系統的截圖工具或者瀏覽器擴展給網頁截圖，然而實際上Chrome和Safari都已經內置了網頁截圖功能
  • 電腦上網頁截圖,一個 Chrome 就夠了
    也許你嘗試過各種插件，或者是使用過一些截圖工具，但其實，Chrome 本身就帶有截圖特性，功能還很豐富。它不僅可以截取瀏覽器窗口，還可以截取網頁全圖，截取移動端顯示效果，甚至帶殼截圖。那麼 Chrome 的截圖該怎麼用呢？讓我給你詳細地介紹一下吧。截圖指令Chrome 的截圖功能藏在開發者工具中，所以在截圖之前你需要先打開開發者工具。
  • 那些Chrome不為人知的高效隱藏技巧,讓你的瀏覽器好用10倍!
    這樣一來，大家也可以通過網頁類型或緊急程度來分類了。比如社交論壇類、購物類、影音類、教程類、閱讀類等等。和使用手機一樣，在電腦上瀏覽網頁，有時也存在截取整個頁面長圖的需求。許多小夥伴為了截取網頁長圖，都選擇安裝了第三方工具，比如瀏覽器插件。實際上，Chrome瀏覽器是自帶滾動長截圖功能的。在需要截圖的頁面，按下F12按鈕，打開瀏覽器的開發者調試工具。
  • iPhone怎麼網頁長截圖?超簡單的iPhone網頁全屏截圖方法
    今天小編為大家分享2種蘋果手機網頁長截屏方法，一個是藉助APP，一個是藉助捷徑，可以讓iPhone和iPad的用戶，輕鬆實現完整網頁長截屏功能。方法一、藉助APP長截圖1、首先在iPhone或iPad上下載安裝網頁全截屏APP（下載地址，可以在我們的頭條號或公眾號回復關鍵詞「網頁全截屏」或「網頁長截圖」自動獲取），之後粘貼上需要長截屏的網頁網址，如圖所示。
  • 高效使用Chrome瀏覽器,你可能不知道的10個技巧.
    瀏覽器自帶滾動長截圖和使用手機一樣，在電腦上瀏覽網頁，有時也存在截取長圖的需求。除了為電腦安裝第三方截圖軟體，其實我們還可以使用瀏覽器自帶的功能，來獲取長截圖。03.對於禁止複製的內容，我們最常用的應對方法可能是截圖，除此外，我們還可以使用兩種方法來解除網站的禁止複製。
  • Chrome 開發者工具鮮為人知的小技巧,讓你的工作效率提高數倍!
    代碼格式化有很多css/js的代碼都會被 minify 掉，你可以點擊代碼窗口左下角的那個 { }  標籤，chrome會幫你給格式化掉。強制DOM狀態有些HTML的DOM是有狀態的，比如<a> 標籤，其會有 active，hover， focus，visited這些狀態，有時候，我們的CSS會來定關不同狀態的樣式，在分析網頁查看網頁上DOM的CSS樣式時，我們可以點擊CSS樣式上的 :hov 這個小按鈕來強制這個DOM的狀態。
  • 高效使用Chrome瀏覽器,你可能不知道的10個技巧
    點擊運行命令「Capture full size screenshot」，就可以得到當前網頁的長截圖。有些網站出於保護內容的目的，如 B 站的部分專欄文章等，會將網站的內容設置為禁止複製。除去侵犯他人權益的動機，有時我們複製一些內容，純粹是出於學習或交流的目的。
  • Chrome網頁性能分析小記
    - 這是開始正文的分割線 ---網頁性能分析的方式有很多種，只有知道性能差在什麼地方，才好針對性的進行優化。這次想說說最直觀的一種監控方式，即通過瀏覽器。chrome應該是大多前端小夥伴最常用的瀏覽器了，它提供了很多功能和方法，無論是pc還是移動端調試，都非常好用。
  • 如何實現整個網頁的完整截圖
    WINDOWS 系統頁面截圖方法MAC 系統頁面截圖方法QQ 完整網頁截圖法相信大家對於屏幕截圖已經駕輕就熟了，但是對於整個頁面的完整截圖就不一定那麼熟悉了。一般的截圖就只能截取當前屏幕的展示範圍，整個網頁的內容是無法獲取的。而當有些場景需要用到整個頁面截圖的時候就相當頭痛了。
  • 如何把一個網頁長、長、長、長截圖?
    因此，對於重要的網頁內容，小透明的做法一般是截圖，但普通的截圖工具只能一次性截圖，而網頁那麼長長長長長長長，如果想隨心所欲的把網頁內容連續截圖下來，您就需要本文介紹的這幾個小妙招了！可能很多讀者沒注意到，最新版的電腦端QQ已經支持長截圖了，小透明試了下，效果真的很不錯！還支持對長截圖進行塗鴉編輯哦！我對公眾號裡的這篇文章進行長截圖效果如下，還不錯吧！
  • Chrome中非常好用的網頁截圖插件
    網頁截圖(Webpage Screenshot)插件可以幫助用戶使用Chrome的時候截取當前瀏覽的網站