https://github.com/tryggvigy/chrome-devtools-protocol-screenshot
CLI tool to captures screenshots using chrome devtools protocol
https://github.com/tryggvigy/chrome-devtools-protocol-screenshot
apache2 chrome-devtools-protocol cli-utilities screenshot
Last synced: 6 months ago
JSON representation
CLI tool to captures screenshots using chrome devtools protocol
- Host: GitHub
- URL: https://github.com/tryggvigy/chrome-devtools-protocol-screenshot
- Owner: tryggvigy
- License: apache-2.0
- Created: 2017-09-17T21:51:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-17T22:28:26.000Z (over 8 years ago)
- Last Synced: 2025-06-08T22:07:39.209Z (7 months ago)
- Topics: apache2, chrome-devtools-protocol, cli-utilities, screenshot
- Language: JavaScript
- Size: 9.77 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
This tool reads instructions from stdin or args and captures screenshots
using the chrome devtools protocol from a running blink-based
browser instance at various given breakpoints.
```npm install -g chrome-devtools-protocol-screenshot```
and then start on your chromium browsers remote debug port.
```chrome-devtools-protocol-screenshot.js -p 9222```
#### Stdin
If you have a `inst.json` like the following (you can use any uri, for example http://example.com)
```json
{
"uris": {
"spotify:album:6LBiuhK7PZKjVXyMfPxPoh": {
"breakPoints": [1200, 800, 400]
},
"spotify:artist:7xUZ4069zcyBM4Bn10NQ1c": {
"breakPoints": [1200, 600]
}
}
}
```
then
```
cat inst.json | chrome-devtools-protocol-screenshot --outputDir ./captures --remoteDebuggingPort 9222
```
will output screenshots of these uris at these widths to the output directory.
#### args
```
chrome-devtools-protocol-screenshot --outputDir ./captures --remoteDebuggingPort 9222 --breakPoints 1200,800
```
Will create screenshots at 1200 width and 800 width of the current page
in the chromium app and output them to ./captures.
## Comparison
You can use whatever image comparison tool you like.
I like to use ImageMagik.
```
convert '(' img1.png ')' \
'(' img2.png ')' \
'(' -clone 0-1 -compose darken -composite ')' \
-channel RGB -combine diff.png
```
Generates:
```
compare foo_prod.png foo_dev.png diff.png
```
Generates:
