https://linzeyan.github.io/zh-tw/categories/chrome/Recent content in Chrome on RickyHugo -- gohugo.iozh-twThu, 02 Jul 2020 09:07:34 +0800https://linzeyan.github.io/zh-tw/posts/2020/20200702-howto-screenshot-page-by-chrome-devtools/Thu, 02 Jul 2020 09:07:34 +0800https://linzeyan.github.io/zh-tw/posts/2020/20200702-howto-screenshot-page-by-chrome-devtools/<ul> <li><a href="https://tedliou.com/archives/howto-screenshot-page-by-chrome-devtools/" target="_blank" rel="noopener">如何使用 Chrome 開發人員工具擷取網頁畫面與製作長截圖？</a></li> </ul> <ol> <li>開啟 Chrome 開發人員工具</li> <li>按下右上角的 more_vert，並選擇 filter_none 將它改成獨立視窗</li> <li><code>Ctrl + Shift + P</code>(<code>Command + Shift + P</code>)</li> <li>輸入 <code>screenshot</code> <ol> <li>Capture area screenshot：區域擷圖，選擇後你的滑鼠指標會變成 add，用它在網頁中框選出一個範圍即可擷圖。</li> <li>Capture full size screenshot：長截圖，延遲一秒左右後將會自動完成擷圖，就是這麼簡單。</li> <li>Capture node screenshot：節點擷圖，它類似長擷圖，但只有螢幕有顯示到的地方有影像，其餘都是空白。在文章後段我們會放預覽圖讓你比較一下差異。</li> <li>Capture screenshot：普通擷圖，會自動擷取視窗看得到的網頁。如果剛剛沒有讓開發者工具變成獨立視窗的話，這邊的擷圖結果就會被影響。</li> </ol> </li> </ol>