How to Take a High-DPI Website Screenshot in Firefox

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.

  1. Open the Web Console by pressing Ctrl-Shift-K (Cmd-Option-K on macOS).
  2. Type the following command: :screenshot --dpr 2
  3. Press Enter.

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"). The --dpr 2 argument causes Firefox to use a device-pixel-ratio of 2, capturing the screen at two times the usual resolution.

Web Console

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:

  • --clipboard Copies the screenshot to the clipboard
  • --delay 5 Waits the specified number seconds before taking the screenshot
  • --dpr 2 Uses the specified device-to-pixel ratio for the screenshot
  • --file Saves the screenshot to a file, even if the --clipboard argument is specified
  • --filename screenshot.png Saves the screenshot under the specified filename
  • --fullpage Takes 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:

  1. Activate Responsive Design Mode by pressing Ctrl-Shift-M (Cmd-Option-M on macOS).
  2. Adjust the screen size to your liking.
  3. Take a screenshot as described above.

Dr. Link Check 2.0

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!

Dr. Link Check 2011-2018

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!

Dr. Link Check Homepage

Compared to the old version, Dr. Link Check is now able to ...

  • crawl websites of all sizes with millions of links
  • limit checks to certain parts (subdomain, path, etc.) of a website
  • check not only page links (<a href>) but also links to resources like image, CSS, or JavaScript files
  • check if SSL certificates are expired, untrusted, or invalid
  • check URLs against four blacklists of malware and phishing sites
  • check if links lead to parked domains
  • manage link checks for different websites as projects under your account
  • schedule link checks to run on a regular basis and notify you about issues via email
  • filter results and create custom reports based on properties like URL, HTTP status code, link type, etc.
  • export check results to CSV (Excel) and PDF format
  • and so much more

Links with Issues

Also new is the “Overview” report that gives you a nice visual summary of the results of a link check.

Overview Report

Another thing you may notice is that the website is now mobile-friendly and can easily be used on any device.

Mobile Website

We hope you enjoy the new version. If you notice any problems or have any suggestions, please let us know.

Newer Posts