{"id":256255,"date":"2017-06-30T14:19:02","date_gmt":"2017-06-30T21:19:02","guid":{"rendered":"http:\/\/css-tricks.com\/?p=256255"},"modified":"2018-07-12T14:53:54","modified_gmt":"2018-07-12T21:53:54","slug":"full-page-screenshots-browsers","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/full-page-screenshots-browsers\/","title":{"rendered":"Full Page Screenshots in Browsers"},"content":{"rendered":"

It can be quite useful to get a “full page” screenshot in a browser. That is, not just the visible area. The visible area is pretty easy to get just by screenshotting the screen. A full page screenshot captures the entire website even if it needs to be scrolled around to see all of it. You could take individual screenshots of the visible area and use a photo editing program to stitch them together, but that’s a pain in the but. Nevermind the fact that it’s extra tricky with things like fixed position elements.<\/p>\n

Fortunately, browsers can help us out a bit here.<\/p>\n

<\/p>\n

Chrome<\/h3>\n

As of Chrome 59, it’s built into DevTools. Here’s a video<\/a>. You use “Responsive Design Mode”, then the menu option to get the full page screenshot is in the menu in the upper right.<\/p>\n

\"\"<\/figure>\n

I find it easy to use the command prompt to do it as well:<\/p>\n

Command-Shift-P to open the command palette.<\/figcaption><\/figure>\n

If you need a “mobile” full-length screenshot, just adjust the responsive view to the size you want and save again. Handy!<\/p>\n

I’ve also had good luck with the Nimbus extension<\/a> in Chrome. <\/p>\n

Firefox<\/h3>\n

There is a setting in the Firefox DevTools that you need to turn on called Take a screenshot of the entire page<\/strong> under Available Toolbox Buttons<\/strong>. Flip that on, and you get a button.<\/p>\n

\"\"<\/figure>\n

Safari<\/h3>\n

In Safari DevTools, select a node, right-click, and you’ll see Capture Screenshot<\/strong> in the context menu.<\/p>\n

\"\"<\/figure>\n

Safari has File > Export as PDF<\/strong>, but it’s pretty awkward. I have no idea how it decides what to export and what not to, the layout is weird, and it’s broken into multiple pages for some reason. <\/p>\n

The Awesome Screenshot<\/a> extension seems to do the trick.<\/p>\n

\"\"<\/figure>\n

There are also some native apps like BrowseShot<\/a> and Paparazzi!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

It can be quite useful to get a “full page” screenshot in a browser. That is, not just the visible area. The visible area is pretty easy to get just by screenshotting the screen. A full page screenshot captures the entire website even if it needs to be scrolled around to see all of it. […]<\/p>\n","protected":false},"author":2508,"featured_media":256256,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/link-devtools.png?fit=898%2C486&ssl=1","jetpack-related-posts":[{"id":377264,"url":"https:\/\/css-tricks.com\/some-cross-browser-devtools-features-you-might-not-know\/","url_meta":{"origin":256255,"position":0},"title":"Some Cross-Browser DevTools Features You Might Not Know","date":"March 22, 2023","format":false,"excerpt":"I spend a lot of time in DevTools, and I\u2019m sure you do too. Sometimes I even bounce between them, especially when I\u2019m debugging cross-browser issues. DevTools is a lot like browsers themselves \u2014 not all of the features in one browser\u2019s DevTools will be the same or supported in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?fit=1200%2C862&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322098,"url":"https:\/\/css-tricks.com\/icon-glassmorphism-effect-in-css\/","url_meta":{"origin":256255,"position":1},"title":"Icon Glassmorphism Effect in CSS","date":"November 8, 2021","format":false,"excerpt":"I recently came across a cool effect known as glassmorphism in a Dribble shot. My first thought was I could quickly recreate it in a few minutes if I just use some emojis for the icons without wasting time on SVG-ing them. The effect we're after. I couldn't have been\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/bar_glass_cg_an-1.png?fit=799%2C449&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":262598,"url":"https:\/\/css-tricks.com\/sliding-nightmare-understanding-range-input\/","url_meta":{"origin":256255,"position":2},"title":"A Sliding Nightmare: Understanding the Range Input","date":"December 27, 2017","format":false,"excerpt":"You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it's not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/11\/structure_firefox-an.png?fit=1000%2C741&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288072,"url":"https:\/\/css-tricks.com\/color-inputs-a-deep-dive-into-cross-browser-differences\/","url_meta":{"origin":256255,"position":3},"title":"Color Inputs: A Deep Dive into Cross-Browser Differences","date":"July 12, 2019","format":false,"excerpt":"In this article, we'll be taking a look at the structure inside elements, browser inconsistencies, why they look a certain way in a certain browser, and how to dig into it. Having a good understanding of this input allows us to evaluate whether a certain cross-browser look can be achieved\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/color-input.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":296484,"url":"https:\/\/css-tricks.com\/weekly-platform-news-layout-shifts-stalled-high-bitrate-videos-screenshots-in-firefox\/","url_meta":{"origin":256255,"position":4},"title":"Weekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in Firefox","date":"September 26, 2019","format":false,"excerpt":"In this week's roundup: fighting shifty layouts, some videos might be a bit stalled, and a new way to take screenshots in Firefox. Let's get into the news! Identifying the causes of layout shifts during page load You can now use WebPageTest to capture any layout shifts that occur on\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/web-platform-news-190614.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359017,"url":"https:\/\/css-tricks.com\/auto-dark-theme\/","url_meta":{"origin":256255,"position":5},"title":"Auto Dark Theme","date":"December 20, 2021","format":false,"excerpt":"There are a number of ways to approach a dark mode for your website, but essentially you get all the styles ready for it and then apply them when the user has indicated they want them, whether by direct choice or a system-level preference. If your website doesn't have a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-3.51.37-PM.png?fit=1200%2C355&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/link-devtools.png?fit=898%2C486&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/256255"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=256255"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/256255\/revisions"}],"predecessor-version":[{"id":274041,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/256255\/revisions\/274041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/256256"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=256255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=256255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=256255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}