當前位置: 首頁 > Chrome插件推薦 > 利用Chrome開發者工具功能進行網頁整頁截圖的方法
 
說起要截取整個網站頁面,很多朋友第一時間想到的都是用哪款chrome插件,確實,我們網站之前也有介紹過一些截圖插件比如:

1.Awesome Screenshot

2.Webpage Screenshot

3.Smartshot:支持滾屏的谷歌瀏覽器截圖插件

4.Joxi Full Page Screen Capture:全屏截圖插件

但其實現在不少瀏覽器都自帶截屏功能了。尤其是像chrome如此強大的瀏覽器,比較可惜的是 Chrome 目前并沒有很明顯地將這個功能展示出來,所以今天就讓我們給大家分享一個可以不需要任何軟件或者插件就可以直接整屏截取網頁的方法吧!

利用Chrome開發者工具功能進行網頁整頁截圖的方法

第一步:打開chrome開發者工具。

打開你想截圖的網頁,然后按下 F12(macOS 是 option + command + i)調出開發者工具,接著按「Ctrl + Shift + P」(macOS 是 command + Shift + P)。緊接著輸入指令 capture,它會提示有三個選項,如下圖所示:

利用Chrome開發者工具功能進行網頁整頁截圖的方法

分別是截取全屏、node 模式以及當前范圍,用鼠標點擊或者用鍵盤選擇對應的就可以了。

第二步:截取手機版的網頁

如果你想擷取網頁在行動裝置例如手機的畫面截圖,可通過快速鍵 Ctrl + Shift + M(Mac 為 ?Command + ?Shift + M)來開啟模擬工具,切換 iPhone、iPad、Nexus、Galaxy 等裝置開啟網頁的顯示情形,再搭配前面介紹的截圖功能抓取網頁在手機顯示的畫面截圖。

是不是特別的簡單呢?相比起用擴展來截圖,這個方式當然會復雜而且簡陋點,但當你緊急需要時而且不方便下載擴展的時候,也是個不錯的選擇。當然你也可以選擇網頁截圖插件

利用Chrome開發者工具功能進行網頁整頁截圖的方法 相關插件

NetBeans Connector

開發者插件 2019-05-19 03:19:17

在NetBeans Connector提供獲獎的NetBeans IDE和谷歌Chrome瀏覽器。
的NetBeans IDE提供了一套完整的JavaScript和HTML5的開發工具,包括代碼編輯,調試,現場造型,開發與iOS和Android的獎項之間的深

Webstorm網頁調試插件:JetBrains IDE Support

開發者插件 2019-03-05 20:22:16

JetBrains IDE Support是一款支持編譯即時顯示在瀏覽器上調試的谷歌瀏覽器插件。作為web開發人員常用的開發者插件,程序員習慣稱之為JB插件。這款調試插件需要與一些開發工具結合使用,

React Developer Tools - React開發者工具

開發者插件 2019-02-20 12:10:21

React Developer Tools是一款由facebook開發的有用的Chrome 瀏覽器擴展,可以通過 Chrome Web存儲獲取。使用 Chrome Devtools 進行調試時,可以查看應用程序的 React 組件分層結構,而不是更加神秘的瀏

Postman Interceptor

開發者插件 2018-04-16 16:07:54

送你發送請求通過郵差應用程序,它使用瀏覽器Cookie通過郵差鍍鉻的應用程序。
郵差攔截器發射幫助請求。
它也可以發送標題這是由鍍鉻通常的限制,但是對于測試API的關鍵。

Postman

開發者插件 2018-04-16 16:08:38

Postman是一個非常有力的Http Client工具,Postman是一款功能強大的網頁調試與發送網頁HTTP請求的Chrome插件,可在Web服務測 試中用來進行接口測試。

MobX Developer Tools

開發者插件 2019-05-19 02:38:33

用于MobX和React的開發工具 檢查mobx-react觀察員。 編輯可觀察對象中的值(不支持編輯反應道具/狀態,使用react-devtools) 跟蹤MobX可觀察量的變化 MST支持

postman接口測試系列教程(一):環境配置

聚合專題 2018-06-25 22:16:02

最近忙著項目接口測試,經過不同工具的對比,發現 postman 使用起來挺順手的,所以馬上決定使用這個工具進行接口測試工作。剛開始的時候,了解了下接口測試的相關信息,直接著手

chrome開發者工具實現整站截屏

聚合專題 2018-08-30 11:44:32

我們經常要遇到將整個網站作為圖片保存下來的情況,而windows系統自帶的PrintScreen鍵只能保存當前屏幕的截圖 在chrome瀏覽器中可以安裝第三方的截圖插件實現整站截圖 今天我們要介紹

热门棋牌游戏排名 怎么买e球彩进球数 两个平台对打套利 百万 美女捕鱼游戏手机版 双色球黄金分割率算法 新疆时时开奖走势 亚洲兴发pt第一老虎机官网 金博 至尊是哪两张牌 今晚六开彩开奖开奖结果 二八杠游戏安卓下载