DEV Community

Cover image for Screenshoteer - Makes web screenshots and mobile emulations from the command line.
Vladimir Carrer
Vladimir Carrer

Posted on

1 2

Screenshoteer - Makes web screenshots and mobile emulations from the command line.

Alt Text

Tool based on puppeteer.

Installation

npm i -g screenshoteer
Enter fullscreen mode Exit fullscreen mode

You can use screenshoteer like this:

screenshoteer  --url https://www.example.com

or .html localy copy the url path from the browser

screenshoteer --url file:///Users/../index.html
screenshoteer --url file:///C:/Users/../Random-HTML-file.html
Enter fullscreen mode Exit fullscreen mode

And with the help of puppeteer(Headless Chrome) it will generate screenshot of the entire web page.


Parameters:

-h help

--url web page url

--emulate - emulate web device example: --emulate "iPhone 6"

--fullpage - can be true or false. It will take screenshot of entire web page if is true. True is the default parameter.

--pdf - generate additional pdf

--w - width of the Web Page in px

--h - height of the Web Page in px

--waitfor - wait time for the page load in milliseconds

--waitforselector - wait for the selector to appear in page
--el - css selector document.querySelector

--auth - basic http authentication

--no - exclude "image", "stylesheet", "script", "font"

--click - example: ".selector>a" excellent way to close popups or to click some buttons on the page.

--file - output file name (optional, otherwise based on page title and timestamp)

--theme - switch to dark or light color theme

--vd - Emulate vision deficiency 'achromatopsia', 'deuteranopia', 'protanopia', 'tritanopia', 'blurredVision', and 'none'

Examples:

screenshoteer  --url https://news.ycombinator.com --fullpage false

screenshoteer  --url https://www.reddit.com/r/nodejs --emulate "iPhone 7"

screenshoteer  --url https://www.nytimes.com  --emulate "Nexus 4"

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 800 --fullpage false

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 0 --fullpage false

screenshoteer --url https://lobste.rs --pdf

screenshoteer --url https://lobste.rs --w 500

screenshoteer --url  https://news.ycombinator.com/item?id=18598672 --el ".fatitem"

screenshoteer --url  https://site.com --auth "username;password"

screenshoteer --url https://www.nytimes.com --no "image"

screenshoteer --url https://www.nytimes.com --no "script"

screenshoteer --url https://www.economist.com/ --click ".ribbon__close-button"

screenshoteer --url file:///Users/../index.html

screenshoteer --url https://www.slashdot.org --file /tmp/slashdot.png

screenshoteer --url https://mxb.dev/blog/color-theme-switcher/ --theme dark

screenshoteer --url https://news.ycombinator.com --vd blurredVision
Enter fullscreen mode Exit fullscreen mode

Github: https://github.com/vladocar/screenshoteer

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay