{"id":1504,"date":"2020-10-19T09:14:35","date_gmt":"2020-10-19T14:14:35","guid":{"rendered":"http:\/\/mattingly.design\/articles\/?p=1504"},"modified":"2020-10-19T09:25:38","modified_gmt":"2020-10-19T14:25:38","slug":"web-page-screen-capture","status":"publish","type":"post","link":"https:\/\/mattingly.design\/articles\/web-page-screen-capture\/","title":{"rendered":"Web Page Screen Captures Without A Plugin"},"content":{"rendered":"\n<p>Here&#8217;s how to screen capture website content in Safari, Chrome and Firefox. All three are natively capable of capturing an entire web page, specified sections, and mobile layouts within their developer tools, with no plugin required.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>This video covers:<\/p>\n\n\n\n<ol><li>Opening the Web Inspector<\/li><li>Procedure for capturing a full page screenshot in all three browsers<\/li><li>Differences in functionality between each browser<\/li><li>How to capture a section of a web page<\/li><li>How to capture a mobile layout version of a web page<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"gutenbee-responsive-embed\"><iframe loading=\"lazy\" title=\"Web Page Screen Captures Without A Plugin\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/D3lD6s0_Zmw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a demonstration of website content screen captures in Safari, Chrome and Firefox. Browser developer tools are capable of capturing an entire web page, specified sections, and mobile layouts, with no plugin required.<\/p>\n","protected":false},"author":1,"featured_media":1513,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,34],"tags":[37,24,36,35],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Page Screen Capture With Devtools - Mattingly Design<\/title>\n<meta name=\"description\" content=\"Learn how to screen capture website conten using only devtools in Safari, Chrome and Firefox, with no plugin required.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Page Screen Capture With Devtools - Mattingly Design\" \/>\n<meta property=\"og:description\" content=\"Learn how to screen capture website conten using only devtools in Safari, Chrome and Firefox, with no plugin required.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/\" \/>\n<meta property=\"og:site_name\" content=\"Mattingly Design News and Information\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/mattinglydesign\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-19T14:14:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-19T14:25:38+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/mattingly.design\/articles\/wp-content\/uploads\/2020\/10\/web-page-screenshot-devtools.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Web Page Screen Captures With Browser Devtools\" \/>\n<meta name=\"twitter:description\" content=\"Here&#039;s a demo of website content screen captures in Safari, Chrome and Firefox, using only their built-in developer tools. No plugin required.\" \/>\n<meta name=\"twitter:creator\" content=\"@mattinglydesign\" \/>\n<meta name=\"twitter:site\" content=\"@mattinglydesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chris Mattingly\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/mattingly.design\/articles\/#organization\",\"name\":\"Mattingly Design\",\"url\":\"https:\/\/mattingly.design\/articles\/\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/mattinglydesign\/\",\"https:\/\/www.youtube.com\/user\/MattinglyDesign\",\"http:\/\/facebook.com\/mattinglydesign\",\"https:\/\/twitter.com\/mattinglydesign\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mattingly.design\/articles\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/mattingly.design\/articles\/wp-content\/uploads\/2020\/09\/mattingly-design_100h.png\",\"contentUrl\":\"http:\/\/mattingly.design\/articles\/wp-content\/uploads\/2020\/09\/mattingly-design_100h.png\",\"width\":500,\"height\":100,\"caption\":\"Mattingly Design\"},\"image\":{\"@id\":\"https:\/\/mattingly.design\/articles\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mattingly.design\/articles\/#website\",\"url\":\"https:\/\/mattingly.design\/articles\/\",\"name\":\"Mattingly Design News and Information\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/mattingly.design\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mattingly.design\/articles\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#webpage\",\"url\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/\",\"name\":\"Web Page Screen Capture With Devtools - Mattingly Design\",\"isPartOf\":{\"@id\":\"https:\/\/mattingly.design\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#primaryimage\"},\"datePublished\":\"2020-10-19T14:14:35+00:00\",\"dateModified\":\"2020-10-19T14:25:38+00:00\",\"description\":\"Learn how to screen capture website conten using only devtools in Safari, Chrome and Firefox, with no plugin required.\",\"breadcrumb\":{\"@id\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mattingly.design\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Page Screen Captures Without A Plugin\"}]},{\"@type\":\"Article\",\"@id\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#webpage\"},\"author\":{\"@id\":\"https:\/\/mattingly.design\/articles\/#\/schema\/person\/bfecef46c1a6ed42d1f8a64123e997d6\"},\"headline\":\"Web Page Screen Captures Without A Plugin\",\"datePublished\":\"2020-10-19T14:14:35+00:00\",\"dateModified\":\"2020-10-19T14:25:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#webpage\"},\"wordCount\":93,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/mattingly.design\/articles\/#organization\"},\"image\":{\"@id\":\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#primaryimage\"},\"thumbnailUrl\":\"\",\"keywords\":[\"devtools\",\"mattingly design\",\"screen capture\",\"web development\"],\"articleSection\":[\"Tips\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/mattingly.design\/articles\/#\/schema\/person\/bfecef46c1a6ed42d1f8a64123e997d6\",\"name\":\"Chris Mattingly\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mattingly.design\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/005bc75512b4b119fd7a74b75069ce46?s=96&d=mm&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/005bc75512b4b119fd7a74b75069ce46?s=96&d=mm&r=pg\",\"caption\":\"Chris Mattingly\"},\"description\":\"Graphic Designer\/Web Developer with two decades of print and web experience for publications, marketing and commerce.\",\"sameAs\":[\"http:\/\/mattingly.design\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Page Screen Capture With Devtools - Mattingly Design","description":"Learn how to screen capture website conten using only devtools in Safari, Chrome and Firefox, with no plugin required.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/","og_locale":"en_US","og_type":"article","og_title":"Web Page Screen Capture With Devtools - Mattingly Design","og_description":"Learn how to screen capture website conten using only devtools in Safari, Chrome and Firefox, with no plugin required.","og_url":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/","og_site_name":"Mattingly Design News and Information","article_publisher":"http:\/\/facebook.com\/mattinglydesign","article_published_time":"2020-10-19T14:14:35+00:00","article_modified_time":"2020-10-19T14:25:38+00:00","og_image":[{"width":1200,"height":628,"url":"http:\/\/mattingly.design\/articles\/wp-content\/uploads\/2020\/10\/web-page-screenshot-devtools.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_title":"Web Page Screen Captures With Browser Devtools","twitter_description":"Here's a demo of website content screen captures in Safari, Chrome and Firefox, using only their built-in developer tools. No plugin required.","twitter_creator":"@mattinglydesign","twitter_site":"@mattinglydesign","twitter_misc":{"Written by":"Chris Mattingly"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/mattingly.design\/articles\/#organization","name":"Mattingly Design","url":"https:\/\/mattingly.design\/articles\/","sameAs":["https:\/\/www.linkedin.com\/in\/mattinglydesign\/","https:\/\/www.youtube.com\/user\/MattinglyDesign","http:\/\/facebook.com\/mattinglydesign","https:\/\/twitter.com\/mattinglydesign"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mattingly.design\/articles\/#\/schema\/logo\/image\/","url":"http:\/\/mattingly.design\/articles\/wp-content\/uploads\/2020\/09\/mattingly-design_100h.png","contentUrl":"http:\/\/mattingly.design\/articles\/wp-content\/uploads\/2020\/09\/mattingly-design_100h.png","width":500,"height":100,"caption":"Mattingly Design"},"image":{"@id":"https:\/\/mattingly.design\/articles\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/mattingly.design\/articles\/#website","url":"https:\/\/mattingly.design\/articles\/","name":"Mattingly Design News and Information","description":"","publisher":{"@id":"https:\/\/mattingly.design\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mattingly.design\/articles\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#primaryimage","url":"","contentUrl":""},{"@type":"WebPage","@id":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#webpage","url":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/","name":"Web Page Screen Capture With Devtools - Mattingly Design","isPartOf":{"@id":"https:\/\/mattingly.design\/articles\/#website"},"primaryImageOfPage":{"@id":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#primaryimage"},"datePublished":"2020-10-19T14:14:35+00:00","dateModified":"2020-10-19T14:25:38+00:00","description":"Learn how to screen capture website conten using only devtools in Safari, Chrome and Firefox, with no plugin required.","breadcrumb":{"@id":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/mattingly.design\/articles\/web-page-screen-capture\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mattingly.design\/articles\/"},{"@type":"ListItem","position":2,"name":"Web Page Screen Captures Without A Plugin"}]},{"@type":"Article","@id":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#article","isPartOf":{"@id":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#webpage"},"author":{"@id":"https:\/\/mattingly.design\/articles\/#\/schema\/person\/bfecef46c1a6ed42d1f8a64123e997d6"},"headline":"Web Page Screen Captures Without A Plugin","datePublished":"2020-10-19T14:14:35+00:00","dateModified":"2020-10-19T14:25:38+00:00","mainEntityOfPage":{"@id":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#webpage"},"wordCount":93,"commentCount":0,"publisher":{"@id":"https:\/\/mattingly.design\/articles\/#organization"},"image":{"@id":"http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#primaryimage"},"thumbnailUrl":"","keywords":["devtools","mattingly design","screen capture","web development"],"articleSection":["Tips","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/mattingly.design\/articles\/web-page-screen-capture\/#respond"]}]},{"@type":"Person","@id":"https:\/\/mattingly.design\/articles\/#\/schema\/person\/bfecef46c1a6ed42d1f8a64123e997d6","name":"Chris Mattingly","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mattingly.design\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/005bc75512b4b119fd7a74b75069ce46?s=96&d=mm&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/005bc75512b4b119fd7a74b75069ce46?s=96&d=mm&r=pg","caption":"Chris Mattingly"},"description":"Graphic Designer\/Web Developer with two decades of print and web experience for publications, marketing and commerce.","sameAs":["http:\/\/mattingly.design"]}]}},"_links":{"self":[{"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/posts\/1504"}],"collection":[{"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/comments?post=1504"}],"version-history":[{"count":4,"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/posts\/1504\/revisions"}],"predecessor-version":[{"id":1510,"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/posts\/1504\/revisions\/1510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/media\/1513"}],"wp:attachment":[{"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/media?parent=1504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/categories?post=1504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mattingly.design\/articles\/wp-json\/wp\/v2\/tags?post=1504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}