workeffortwaste / layout-shift-gif Goto Github PK

Love the idea of your package and CLI api ❤️.

I suggest to use puppeteer-core to prevent user from waiting of chrome downloading each time when package was used via npx. Waiting for 132.4 Mb each launch hurts UX a bit 😅.

We can use find_chrome.js script to get executablePath of local chrome instance or it'll download it's latest revision.

I can prepare PR, if you don't mind, do you?

Is there a way I could output the whole page to the gif. I have pages that are very tall: multiple screens

I tried to run

layout-shift-gif --url https://blacklivesmatter.com/ --device mobile --output layout-shift.gif --width=650 --height= 5000

This is the file that was generated, no picture with the t-shirt

Hi Thanks for adding apple silicon support, I tried it again and i get this issue:

╭─ericjohnson@ej-mba-m1 ~
╰─$ layout-shift-gif --url https://blacklivesmatter.com/ --device mobile --output layout-shift.gif                           1 ↵
file:///opt/homebrew/lib/node_modules/layout-shift-gif/layout-shift-gif.js:59
const phone = devices['Nexus 5X']
                     ^

TypeError: Cannot read properties of undefined (reading 'Nexus 5X')
    at file:///opt/homebrew/lib/node_modules/layout-shift-gif/layout-shift-gif.js:59:22
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async loadESM (node:internal/process/esm_loader:88:5)
    at async handleMainPromise (node:internal/modules/run_main:61:12)

Node.js v17.4.0

Steps to reproduce:

1. Run npm install -g layout-shift-gif
2. Run layout-shift-gif --url https://blacklivesmatter.com/ --device mobile --output layout-shift.gif
3. The error above occurs.

Hi =)
Is there a change you could add a way to use a localhost with https? Of course, the main problem about this is that I always have to add an exception when I navigate through a visual browser, pero using this project as a npm program through the terminal throws an error about my website's certificate.

Btw, excellent project!

While using the tool, I am presented with information about the CLS on the page via colored rectangles (I have seen green and orange) that animate by either popping into the gif or having their border-style change (from solid to dashed or vice versa).

What do the different colors and border styles indicate?

puppeteer/puppeteer#7099

I think you can just bump up the puppeteer version to fix it.

For analyzing which divs specifically are affected it would be helpful if a full css selector to the div that has changed could be included in the output.

Something like body > div > div.foobar > div > span:nth-child(10)
It makes finding the affected elements much easier.

I figure this is related to having an M1, any ideas?

╭─ericjohnson@ej-mba-m1 ~
╰─$ npm install -g layout-shift-gif

added 126 packages, and audited 127 packages in 15s

11 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
╭─ericjohnson@ej-mba-m1 ~
╰─$ layout-shift-gif --url https://blacklivesmatter.com/ --device mobile --output layout-shift.gif
TimeoutError: Timed out after 10000 ms while trying to connect to the browser! Only Chrome at revision r869685 is guaranteed to work.
at Timeout.onTimeout (/opt/homebrew/lib/node_modules/layout-shift-gif/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:205:20)

It'd be great if you try to close the cookie prompts / pop-up windows (or being able to specify which element to click). E.g.: