Posted 8 months ago. Visible to the public.

Chrome: Making high-resolution website screenshots without add-ons

If you want to make a screenshot of a website that works well in print or on a high-DPI screen (like Apple Retina displays), here is how you can capture a high-resolution screenshot.

You can do this without an addon:

  • Open the website
  • If you have multiple monitoros:
    • Resize the Chrome window so it covers multiple monitors (in Linux you can hold ALT and resize by dragging with the right mouse button)
    • Zoom into the page using CTRL + and CTRL - so it covers most of the window area. Leave generous padding on the left and right so it looks good.
  • If you only have single screen:
    • Open the responsive view ("device toolbar" - CTRL SHIFT M)
    • Set a small zoom (e.g. 25%) with a viewport that covers the width of your physical screen
  • Open developer tools (CTRL SHIFT J)
  • Open developer tools action bar (CTRL SHIFT P)
  • Quicksearch for the action "Capture full size screenshot"
  • A few seconds after selecting the action, a file picker will ask you where to save the PNG.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Henning Koch
Last edit:
7 months ago
by Henning Koch
Keywords:
high, quality
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more