How to take a screenshot that includes a scrolling element within a web page in Firefox?












69















I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.



It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).



The column contains formatted text and a few small images.



For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?



To be clear, I need to capture the entire page, not just the element itself.



I would like to accomplish this using Firefox on Windows.










share|improve this question




















  • 2





    Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.

    – JakeGould
    Jun 13 '16 at 6:30











  • @JakeGould Thanks Jake. Would that work to scroll and element within a page?

    – RockPaperLizard
    Jun 13 '16 at 7:17











  • Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.

    – JakeGould
    Jun 13 '16 at 7:23











  • Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.

    – a CVn
    Jun 13 '16 at 10:57











  • If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.

    – tehwalris
    Jun 13 '16 at 18:47
















69















I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.



It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).



The column contains formatted text and a few small images.



For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?



To be clear, I need to capture the entire page, not just the element itself.



I would like to accomplish this using Firefox on Windows.










share|improve this question




















  • 2





    Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.

    – JakeGould
    Jun 13 '16 at 6:30











  • @JakeGould Thanks Jake. Would that work to scroll and element within a page?

    – RockPaperLizard
    Jun 13 '16 at 7:17











  • Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.

    – JakeGould
    Jun 13 '16 at 7:23











  • Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.

    – a CVn
    Jun 13 '16 at 10:57











  • If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.

    – tehwalris
    Jun 13 '16 at 18:47














69












69








69


34






I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.



It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).



The column contains formatted text and a few small images.



For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?



To be clear, I need to capture the entire page, not just the element itself.



I would like to accomplish this using Firefox on Windows.










share|improve this question
















I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.



It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).



The column contains formatted text and a few small images.



For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?



To be clear, I need to capture the entire page, not just the element itself.



I would like to accomplish this using Firefox on Windows.







windows firefox scrolling screenshot capture






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jun 14 '16 at 6:47









JDługosz

582312




582312










asked Jun 13 '16 at 6:28









RockPaperLizardRockPaperLizard

3,221133671




3,221133671








  • 2





    Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.

    – JakeGould
    Jun 13 '16 at 6:30











  • @JakeGould Thanks Jake. Would that work to scroll and element within a page?

    – RockPaperLizard
    Jun 13 '16 at 7:17











  • Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.

    – JakeGould
    Jun 13 '16 at 7:23











  • Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.

    – a CVn
    Jun 13 '16 at 10:57











  • If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.

    – tehwalris
    Jun 13 '16 at 18:47














  • 2





    Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.

    – JakeGould
    Jun 13 '16 at 6:30











  • @JakeGould Thanks Jake. Would that work to scroll and element within a page?

    – RockPaperLizard
    Jun 13 '16 at 7:17











  • Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.

    – JakeGould
    Jun 13 '16 at 7:23











  • Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.

    – a CVn
    Jun 13 '16 at 10:57











  • If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.

    – tehwalris
    Jun 13 '16 at 18:47








2




2





Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.

– JakeGould
Jun 13 '16 at 6:30





Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.

– JakeGould
Jun 13 '16 at 6:30













@JakeGould Thanks Jake. Would that work to scroll and element within a page?

– RockPaperLizard
Jun 13 '16 at 7:17





@JakeGould Thanks Jake. Would that work to scroll and element within a page?

– RockPaperLizard
Jun 13 '16 at 7:17













Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.

– JakeGould
Jun 13 '16 at 7:23





Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.

– JakeGould
Jun 13 '16 at 7:23













Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.

– a CVn
Jun 13 '16 at 10:57





Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.

– a CVn
Jun 13 '16 at 10:57













If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.

– tehwalris
Jun 13 '16 at 18:47





If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.

– tehwalris
Jun 13 '16 at 18:47










9 Answers
9






active

oldest

votes


















84














My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.



Just pop open the developer tools → Find the element → Right Click and take screenshot



enter image description here



It didn't work on one of my internal site so cannot say it will work for all.



Update after OP's Edit:



If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...



enter image description here



It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.



Read below from https://en.wikipedia.org/wiki/Screenshot




A screenshot, screen capture, screen cap, cap, screen dump, or
screengrab is an image taken by a person to record the visible
items displayed on the monitor, television, or other visual output
device in use.




If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.






share|improve this answer


























  • Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.

    – RockPaperLizard
    Jun 13 '16 at 19:14








  • 5





    @RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the <body> element and it will give you the desired screenshot.

    – Digital Chris
    Jun 13 '16 at 19:34






  • 2





    If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.

    – user76225
    Jun 14 '16 at 17:52











  • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.

    – MrFox
    Dec 22 '17 at 14:16



















24














You can use the screenshot command from the Developer Toolbar:




  1. Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.


  2. In the toolbar, type the command screenshot --fullpage fullpage.png.



To capture a single element you can use its css selector with the --selector flag e.g.



screenshot --selector #hot-network-questions


will get you the image below



enter image description here






share|improve this answer





















  • 4





    @RockPaperLizard I found another post with the same answer and OP was edited by you.

    – pun
    Jun 13 '16 at 8:55











  • @pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.

    – RockPaperLizard
    Jun 13 '16 at 19:13











  • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.

    – MrFox
    Dec 22 '17 at 14:13



















8














Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).






share|improve this answer































    4














    There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.



    It is a paid application, but does have a trial available as well.






    share|improve this answer


























    • if you find this as an answer mark it and post it in comment What does that mean?

      – A.L
      Jun 13 '16 at 15:14








    • 3





      @A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.

      – MonkeyZeus
      Jun 13 '16 at 18:43













    • I've used SnagIt for years. It's a very useful piece of software.

      – Roy Tinker
      Jun 14 '16 at 17:08



















    1














    There is an extension called Nimbus Screen Capture which is perfectly suited to this task.



    You have the option to capture:




    • the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)

    • a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)

    • selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)

    • the entire page


    nimbus






    share|improve this answer
























    • Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?

      – RockPaperLizard
      Jun 14 '16 at 16:22











    • @RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.

      – Keith Hall
      Jun 15 '16 at 8:46











    • Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.

      – RockPaperLizard
      Jun 15 '16 at 9:33



















    1














    I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.



    FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.






    share|improve this answer

































      0














      Options to fit everything on one page:




      • Use <Ctrl>- to fit everything on one page

      • Rotate your screen to portrait mode

      • Use a second screen in portrait mode and locate it below the first one

      • Combine all of the above


      Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.

      Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).






      share|improve this answer
























      • Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.

        – RockPaperLizard
        Jun 13 '16 at 7:20













      • But if you zoom out the page, there is no way to scale it back out without distortion.

        – NiCk Newman
        Jun 14 '16 at 13:17



















      0














      To take screenshots you can add an Extension like easy screenshot.
      Then It will be much easier for you to take screen shots.






      share|improve this answer































        0














        For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.






        share|improve this answer






















          protected by Community Jun 23 '18 at 11:12



          Thank you for your interest in this question.
          Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



          Would you like to answer one of these unanswered questions instead?














          9 Answers
          9






          active

          oldest

          votes








          9 Answers
          9






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          84














          My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.



          Just pop open the developer tools → Find the element → Right Click and take screenshot



          enter image description here



          It didn't work on one of my internal site so cannot say it will work for all.



          Update after OP's Edit:



          If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...



          enter image description here



          It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.



          Read below from https://en.wikipedia.org/wiki/Screenshot




          A screenshot, screen capture, screen cap, cap, screen dump, or
          screengrab is an image taken by a person to record the visible
          items displayed on the monitor, television, or other visual output
          device in use.




          If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.






          share|improve this answer


























          • Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.

            – RockPaperLizard
            Jun 13 '16 at 19:14








          • 5





            @RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the <body> element and it will give you the desired screenshot.

            – Digital Chris
            Jun 13 '16 at 19:34






          • 2





            If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.

            – user76225
            Jun 14 '16 at 17:52











          • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.

            – MrFox
            Dec 22 '17 at 14:16
















          84














          My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.



          Just pop open the developer tools → Find the element → Right Click and take screenshot



          enter image description here



          It didn't work on one of my internal site so cannot say it will work for all.



          Update after OP's Edit:



          If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...



          enter image description here



          It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.



          Read below from https://en.wikipedia.org/wiki/Screenshot




          A screenshot, screen capture, screen cap, cap, screen dump, or
          screengrab is an image taken by a person to record the visible
          items displayed on the monitor, television, or other visual output
          device in use.




          If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.






          share|improve this answer


























          • Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.

            – RockPaperLizard
            Jun 13 '16 at 19:14








          • 5





            @RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the <body> element and it will give you the desired screenshot.

            – Digital Chris
            Jun 13 '16 at 19:34






          • 2





            If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.

            – user76225
            Jun 14 '16 at 17:52











          • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.

            – MrFox
            Dec 22 '17 at 14:16














          84












          84








          84







          My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.



          Just pop open the developer tools → Find the element → Right Click and take screenshot



          enter image description here



          It didn't work on one of my internal site so cannot say it will work for all.



          Update after OP's Edit:



          If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...



          enter image description here



          It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.



          Read below from https://en.wikipedia.org/wiki/Screenshot




          A screenshot, screen capture, screen cap, cap, screen dump, or
          screengrab is an image taken by a person to record the visible
          items displayed on the monitor, television, or other visual output
          device in use.




          If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.






          share|improve this answer















          My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.



          Just pop open the developer tools → Find the element → Right Click and take screenshot



          enter image description here



          It didn't work on one of my internal site so cannot say it will work for all.



          Update after OP's Edit:



          If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...



          enter image description here



          It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.



          Read below from https://en.wikipedia.org/wiki/Screenshot




          A screenshot, screen capture, screen cap, cap, screen dump, or
          screengrab is an image taken by a person to record the visible
          items displayed on the monitor, television, or other visual output
          device in use.




          If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jun 14 '16 at 5:01

























          answered Jun 13 '16 at 7:18









          punpun

          4,88381853




          4,88381853













          • Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.

            – RockPaperLizard
            Jun 13 '16 at 19:14








          • 5





            @RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the <body> element and it will give you the desired screenshot.

            – Digital Chris
            Jun 13 '16 at 19:34






          • 2





            If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.

            – user76225
            Jun 14 '16 at 17:52











          • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.

            – MrFox
            Dec 22 '17 at 14:16



















          • Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.

            – RockPaperLizard
            Jun 13 '16 at 19:14








          • 5





            @RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the <body> element and it will give you the desired screenshot.

            – Digital Chris
            Jun 13 '16 at 19:34






          • 2





            If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.

            – user76225
            Jun 14 '16 at 17:52











          • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.

            – MrFox
            Dec 22 '17 at 14:16

















          Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.

          – RockPaperLizard
          Jun 13 '16 at 19:14







          Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.

          – RockPaperLizard
          Jun 13 '16 at 19:14






          5




          5





          @RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the <body> element and it will give you the desired screenshot.

          – Digital Chris
          Jun 13 '16 at 19:34





          @RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the <body> element and it will give you the desired screenshot.

          – Digital Chris
          Jun 13 '16 at 19:34




          2




          2





          If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.

          – user76225
          Jun 14 '16 at 17:52





          If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.

          – user76225
          Jun 14 '16 at 17:52













          I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.

          – MrFox
          Dec 22 '17 at 14:16





          I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.

          – MrFox
          Dec 22 '17 at 14:16













          24














          You can use the screenshot command from the Developer Toolbar:




          1. Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.


          2. In the toolbar, type the command screenshot --fullpage fullpage.png.



          To capture a single element you can use its css selector with the --selector flag e.g.



          screenshot --selector #hot-network-questions


          will get you the image below



          enter image description here






          share|improve this answer





















          • 4





            @RockPaperLizard I found another post with the same answer and OP was edited by you.

            – pun
            Jun 13 '16 at 8:55











          • @pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.

            – RockPaperLizard
            Jun 13 '16 at 19:13











          • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.

            – MrFox
            Dec 22 '17 at 14:13
















          24














          You can use the screenshot command from the Developer Toolbar:




          1. Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.


          2. In the toolbar, type the command screenshot --fullpage fullpage.png.



          To capture a single element you can use its css selector with the --selector flag e.g.



          screenshot --selector #hot-network-questions


          will get you the image below



          enter image description here






          share|improve this answer





















          • 4





            @RockPaperLizard I found another post with the same answer and OP was edited by you.

            – pun
            Jun 13 '16 at 8:55











          • @pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.

            – RockPaperLizard
            Jun 13 '16 at 19:13











          • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.

            – MrFox
            Dec 22 '17 at 14:13














          24












          24








          24







          You can use the screenshot command from the Developer Toolbar:




          1. Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.


          2. In the toolbar, type the command screenshot --fullpage fullpage.png.



          To capture a single element you can use its css selector with the --selector flag e.g.



          screenshot --selector #hot-network-questions


          will get you the image below



          enter image description here






          share|improve this answer















          You can use the screenshot command from the Developer Toolbar:




          1. Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.


          2. In the toolbar, type the command screenshot --fullpage fullpage.png.



          To capture a single element you can use its css selector with the --selector flag e.g.



          screenshot --selector #hot-network-questions


          will get you the image below



          enter image description here







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jun 13 '16 at 10:45









          Tymric

          2622514




          2622514










          answered Jun 13 '16 at 7:54









          tophertopher

          35119




          35119








          • 4





            @RockPaperLizard I found another post with the same answer and OP was edited by you.

            – pun
            Jun 13 '16 at 8:55











          • @pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.

            – RockPaperLizard
            Jun 13 '16 at 19:13











          • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.

            – MrFox
            Dec 22 '17 at 14:13














          • 4





            @RockPaperLizard I found another post with the same answer and OP was edited by you.

            – pun
            Jun 13 '16 at 8:55











          • @pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.

            – RockPaperLizard
            Jun 13 '16 at 19:13











          • I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.

            – MrFox
            Dec 22 '17 at 14:13








          4




          4





          @RockPaperLizard I found another post with the same answer and OP was edited by you.

          – pun
          Jun 13 '16 at 8:55





          @RockPaperLizard I found another post with the same answer and OP was edited by you.

          – pun
          Jun 13 '16 at 8:55













          @pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.

          – RockPaperLizard
          Jun 13 '16 at 19:13





          @pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.

          – RockPaperLizard
          Jun 13 '16 at 19:13













          I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.

          – MrFox
          Dec 22 '17 at 14:13





          I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.

          – MrFox
          Dec 22 '17 at 14:13











          8














          Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).






          share|improve this answer




























            8














            Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).






            share|improve this answer


























              8












              8








              8







              Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).






              share|improve this answer













              Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).







              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Jun 13 '16 at 6:51









              OuroborusOuroborus

              2,47221024




              2,47221024























                  4














                  There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.



                  It is a paid application, but does have a trial available as well.






                  share|improve this answer


























                  • if you find this as an answer mark it and post it in comment What does that mean?

                    – A.L
                    Jun 13 '16 at 15:14








                  • 3





                    @A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.

                    – MonkeyZeus
                    Jun 13 '16 at 18:43













                  • I've used SnagIt for years. It's a very useful piece of software.

                    – Roy Tinker
                    Jun 14 '16 at 17:08
















                  4














                  There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.



                  It is a paid application, but does have a trial available as well.






                  share|improve this answer


























                  • if you find this as an answer mark it and post it in comment What does that mean?

                    – A.L
                    Jun 13 '16 at 15:14








                  • 3





                    @A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.

                    – MonkeyZeus
                    Jun 13 '16 at 18:43













                  • I've used SnagIt for years. It's a very useful piece of software.

                    – Roy Tinker
                    Jun 14 '16 at 17:08














                  4












                  4








                  4







                  There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.



                  It is a paid application, but does have a trial available as well.






                  share|improve this answer















                  There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.



                  It is a paid application, but does have a trial available as well.







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Jun 13 '16 at 18:54









                  Simon Sheehan

                  7,705124269




                  7,705124269










                  answered Jun 13 '16 at 7:26









                  Gurumurthy.GGurumurthy.G

                  391213




                  391213













                  • if you find this as an answer mark it and post it in comment What does that mean?

                    – A.L
                    Jun 13 '16 at 15:14








                  • 3





                    @A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.

                    – MonkeyZeus
                    Jun 13 '16 at 18:43













                  • I've used SnagIt for years. It's a very useful piece of software.

                    – Roy Tinker
                    Jun 14 '16 at 17:08



















                  • if you find this as an answer mark it and post it in comment What does that mean?

                    – A.L
                    Jun 13 '16 at 15:14








                  • 3





                    @A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.

                    – MonkeyZeus
                    Jun 13 '16 at 18:43













                  • I've used SnagIt for years. It's a very useful piece of software.

                    – Roy Tinker
                    Jun 14 '16 at 17:08

















                  if you find this as an answer mark it and post it in comment What does that mean?

                  – A.L
                  Jun 13 '16 at 15:14







                  if you find this as an answer mark it and post it in comment What does that mean?

                  – A.L
                  Jun 13 '16 at 15:14






                  3




                  3





                  @A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.

                  – MonkeyZeus
                  Jun 13 '16 at 18:43







                  @A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.

                  – MonkeyZeus
                  Jun 13 '16 at 18:43















                  I've used SnagIt for years. It's a very useful piece of software.

                  – Roy Tinker
                  Jun 14 '16 at 17:08





                  I've used SnagIt for years. It's a very useful piece of software.

                  – Roy Tinker
                  Jun 14 '16 at 17:08











                  1














                  There is an extension called Nimbus Screen Capture which is perfectly suited to this task.



                  You have the option to capture:




                  • the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)

                  • a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)

                  • selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)

                  • the entire page


                  nimbus






                  share|improve this answer
























                  • Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?

                    – RockPaperLizard
                    Jun 14 '16 at 16:22











                  • @RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.

                    – Keith Hall
                    Jun 15 '16 at 8:46











                  • Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.

                    – RockPaperLizard
                    Jun 15 '16 at 9:33
















                  1














                  There is an extension called Nimbus Screen Capture which is perfectly suited to this task.



                  You have the option to capture:




                  • the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)

                  • a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)

                  • selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)

                  • the entire page


                  nimbus






                  share|improve this answer
























                  • Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?

                    – RockPaperLizard
                    Jun 14 '16 at 16:22











                  • @RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.

                    – Keith Hall
                    Jun 15 '16 at 8:46











                  • Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.

                    – RockPaperLizard
                    Jun 15 '16 at 9:33














                  1












                  1








                  1







                  There is an extension called Nimbus Screen Capture which is perfectly suited to this task.



                  You have the option to capture:




                  • the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)

                  • a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)

                  • selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)

                  • the entire page


                  nimbus






                  share|improve this answer













                  There is an extension called Nimbus Screen Capture which is perfectly suited to this task.



                  You have the option to capture:




                  • the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)

                  • a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)

                  • selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)

                  • the entire page


                  nimbus







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Jun 14 '16 at 12:05









                  Keith HallKeith Hall

                  301110




                  301110













                  • Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?

                    – RockPaperLizard
                    Jun 14 '16 at 16:22











                  • @RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.

                    – Keith Hall
                    Jun 15 '16 at 8:46











                  • Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.

                    – RockPaperLizard
                    Jun 15 '16 at 9:33



















                  • Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?

                    – RockPaperLizard
                    Jun 14 '16 at 16:22











                  • @RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.

                    – Keith Hall
                    Jun 15 '16 at 8:46











                  • Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.

                    – RockPaperLizard
                    Jun 15 '16 at 9:33

















                  Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?

                  – RockPaperLizard
                  Jun 14 '16 at 16:22





                  Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?

                  – RockPaperLizard
                  Jun 14 '16 at 16:22













                  @RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.

                  – Keith Hall
                  Jun 15 '16 at 8:46





                  @RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.

                  – Keith Hall
                  Jun 15 '16 at 8:46













                  Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.

                  – RockPaperLizard
                  Jun 15 '16 at 9:33





                  Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.

                  – RockPaperLizard
                  Jun 15 '16 at 9:33











                  1














                  I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.



                  FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.






                  share|improve this answer






























                    1














                    I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.



                    FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.






                    share|improve this answer




























                      1












                      1








                      1







                      I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.



                      FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.






                      share|improve this answer















                      I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.



                      FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.







                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Feb 15 '17 at 3:16









                      user26398

                      17117




                      17117










                      answered Jun 14 '16 at 0:10









                      garethbgarethb

                      1212




                      1212























                          0














                          Options to fit everything on one page:




                          • Use <Ctrl>- to fit everything on one page

                          • Rotate your screen to portrait mode

                          • Use a second screen in portrait mode and locate it below the first one

                          • Combine all of the above


                          Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.

                          Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).






                          share|improve this answer
























                          • Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.

                            – RockPaperLizard
                            Jun 13 '16 at 7:20













                          • But if you zoom out the page, there is no way to scale it back out without distortion.

                            – NiCk Newman
                            Jun 14 '16 at 13:17
















                          0














                          Options to fit everything on one page:




                          • Use <Ctrl>- to fit everything on one page

                          • Rotate your screen to portrait mode

                          • Use a second screen in portrait mode and locate it below the first one

                          • Combine all of the above


                          Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.

                          Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).






                          share|improve this answer
























                          • Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.

                            – RockPaperLizard
                            Jun 13 '16 at 7:20













                          • But if you zoom out the page, there is no way to scale it back out without distortion.

                            – NiCk Newman
                            Jun 14 '16 at 13:17














                          0












                          0








                          0







                          Options to fit everything on one page:




                          • Use <Ctrl>- to fit everything on one page

                          • Rotate your screen to portrait mode

                          • Use a second screen in portrait mode and locate it below the first one

                          • Combine all of the above


                          Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.

                          Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).






                          share|improve this answer













                          Options to fit everything on one page:




                          • Use <Ctrl>- to fit everything on one page

                          • Rotate your screen to portrait mode

                          • Use a second screen in portrait mode and locate it below the first one

                          • Combine all of the above


                          Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.

                          Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Jun 13 '16 at 6:42









                          NZDNZD

                          1,979916




                          1,979916













                          • Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.

                            – RockPaperLizard
                            Jun 13 '16 at 7:20













                          • But if you zoom out the page, there is no way to scale it back out without distortion.

                            – NiCk Newman
                            Jun 14 '16 at 13:17



















                          • Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.

                            – RockPaperLizard
                            Jun 13 '16 at 7:20













                          • But if you zoom out the page, there is no way to scale it back out without distortion.

                            – NiCk Newman
                            Jun 14 '16 at 13:17

















                          Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.

                          – RockPaperLizard
                          Jun 13 '16 at 7:20







                          Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.

                          – RockPaperLizard
                          Jun 13 '16 at 7:20















                          But if you zoom out the page, there is no way to scale it back out without distortion.

                          – NiCk Newman
                          Jun 14 '16 at 13:17





                          But if you zoom out the page, there is no way to scale it back out without distortion.

                          – NiCk Newman
                          Jun 14 '16 at 13:17











                          0














                          To take screenshots you can add an Extension like easy screenshot.
                          Then It will be much easier for you to take screen shots.






                          share|improve this answer




























                            0














                            To take screenshots you can add an Extension like easy screenshot.
                            Then It will be much easier for you to take screen shots.






                            share|improve this answer


























                              0












                              0








                              0







                              To take screenshots you can add an Extension like easy screenshot.
                              Then It will be much easier for you to take screen shots.






                              share|improve this answer













                              To take screenshots you can add an Extension like easy screenshot.
                              Then It will be much easier for you to take screen shots.







                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Jun 15 '16 at 5:53









                              user606374user606374

                              1




                              1























                                  0














                                  For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.






                                  share|improve this answer




























                                    0














                                    For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.






                                    share|improve this answer


























                                      0












                                      0








                                      0







                                      For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.






                                      share|improve this answer













                                      For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.







                                      share|improve this answer












                                      share|improve this answer



                                      share|improve this answer










                                      answered Jan 31 at 13:15









                                      T.ToduaT.Todua

                                      1,50331828




                                      1,50331828

















                                          protected by Community Jun 23 '18 at 11:12



                                          Thank you for your interest in this question.
                                          Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



                                          Would you like to answer one of these unanswered questions instead?



                                          Popular posts from this blog

                                          Plaza Victoria

                                          In PowerPoint, is there a keyboard shortcut for bulleted / numbered list?

                                          How to put 3 figures in Latex with 2 figures side by side and 1 below these side by side images but in...