https://linzeyan.github.io/categories/chrome/Recent content in Chrome on RickyHugo -- gohugo.ioenThu, 02 Jul 2020 09:07:34 +0800https://linzeyan.github.io/posts/2020/20200702-howto-screenshot-page-by-chrome-devtools/Thu, 02 Jul 2020 09:07:34 +0800https://linzeyan.github.io/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">How to capture web pages and long screenshots with Chrome DevTools?</a></li> </ul> <ol> <li>Open Chrome DevTools</li> <li>Click more_vert in the top-right, then choose filter_none to make it a separate window</li> <li><code>Ctrl + Shift + P</code>(<code>Command + Shift + P</code>)</li> <li>Type <code>screenshot</code> <ol> <li>Capture area screenshot: area screenshot. After selecting it, your cursor changes to add. Use it to select an area on the page.</li> <li>Capture full size screenshot: long screenshot. It completes automatically after about one second.</li> <li>Capture node screenshot: node screenshot. Similar to a long screenshot, but only visible parts are captured and the rest is blank.</li> <li>Capture screenshot: normal screenshot. It captures the visible page. If DevTools is not in a separate window, the result is affected.</li> </ol> </li> </ol>