After relaunching Dr. Link Check (our broken link checker service) last month, we needed some high-res, high-quality screenshots of the website for promotional purposes. Typically, when in need of a quick screenshot I use the nifty Firefox Screenshots feature by right-clicking on the page and choosing Take a screenshot. This time, however, I needed screenshots with a higher pixel density than my non-Retina display supports. After some googling, I found an easy way to take high-DPI screenshots via the Firefox Web Console.
:screenshot --dpr 2
This results in a screenshot of the currently visible area being saved to the Downloads folder (with an auto-generated filename in the form of "Screen Shot yyyy-mm-dd at hh.mm.ss.png"). The
--dpr 2 argument causes Firefox to use a device-pixel-ratio of 2, capturing the screen at two times the usual resolution.
If you want to take a screenshot of the full page, append
--fullpage to the command. Here's the full list of arguments you can use:
--clipboardCopies the screenshot to the clipboard
--delay 5Waits the specified number seconds before taking the screenshot
--dpr 2Uses the specified device-to-pixel ratio for the screenshot
--fileSaves the screenshot to a file, even if the
--clipboardargument is specified
--filename screenshot.pngSaves the screenshot under the specified filename
--fullpageTakes a screenshot of the full page, not just the currently visible area
--selector "#id"Takes a screenshot of the element that matches the specified CSS query selector
Unfortunately, there isn't (yet?) a command for taking a screenshot at a specified window or viewport size. A good workaround is to open the page in Responsive Design Mode in Firefox:
When we launched Dr. Link Check as a free service almost seven years ago, it was meant as a quick prototype. We liked the technical challenge and wanted to test whether there was a market for a broken-link-checker tool. Feedback to the launch was very positive, and we promptly received emails asking about a paid version with additional features. You know you are on to something when people proactively approach you willing to hand over their hard-earned money!
Despite the encouragement, we didn’t act upon it. We were simply too busy with other projects; most notably, our wireframing and prototyping tool PowerMockup. Dr. Link Check ran more or less in auto-pilot mode and received little to no attention from us – until last year, when we were approached about selling the website. That reminded us of the potential of the service and gave us the impulse to start working on it again.
Today, we are officially launching Dr. Link Check 2.0. We have rebuilt the service from the ground up, with many exciting new features. We are really proud of the outcome. We would love it if you could head over to the home page and give it a try!
Compared to the old version, Dr. Link Check is now able to ...
Also new is the “Overview” report that gives you a nice visual summary of the results of a link check.
Another thing you may notice is that the website is now mobile-friendly and can easily be used on any device.
We hope you enjoy the new version. If you notice any problems or have any suggestions, please let us know.