Strange Star

使用Chrome開發人員工具做網頁截圖

使用Chrome開發人員工具做網頁截圖

使用Chrome開發人員工具做網頁截圖

在工作中常看到喜歡的網頁設計,或是基於紀念用途想收藏的時候,原本我是使用FSCapture或Chrome的外掛,但總有截取不順、斷圖的狀況。

最近Chrome 59 推出了很多新的功能,其中一個功能是網頁截圖,很棒的地方是它可以在RWD的狀態下做截圖。

【第一種截圖法】

  1. 進入RWD(手機)檢視模式
  2. 點選三個點點進選單
  3. 選擇Capture screenshot 截取固定區域 或 Capture full size screenshot 截取整個網頁,點選即可完成截圖

 

 

【第二種截圖法】

  1. 在Chrome開發者工具中輸入Ctrl + Shift + P (Mac : Cmd + Shift + P)

  2. 在指令列中輸入capture,找到 Capture screenshot 截取固定區域 或 Capture full size screenshot 截取整個網頁,點選即可完成截圖

【Chrome官方教學影片】

 

【延伸閱讀】

What’s New In DevTools (Chrome 59)

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。