search

catchpoint / WebPageTest.recorder-chrome-extension

A Chrome extension for outputting user recording sessions as WebPageTest Custom Scripts
7 stars 2 forks source link

Support code view highlight in Recorder #11

Closed jecfish closed 1 year ago

jecfish commented 1 year ago

Chrome 110 launches a new "Show code and highlight" feature.

How to test You can test this feature with the latest Chrome Canary

  1. Open a recording in the Recorder, click "Show code".
  2. Hover over each step, the code should highlight accordingly.

Action required

  1. Your extension needs to update to the latest Puppeteer Replay.
  2. Rebuild & publish a new version to Web Store
  3. That's all!

If your extension doesn't have Puppeteer Replay as dependency, you can implement the [sourcemaps] (https://github.com/puppeteer/replay/blob/main/src/stringify.ts#L68) yourself to make it work.

my gif has pretty low res. ezgif-4-33a0309279

jecfish commented 1 year ago

@Siddhantshukla814 fyi!

Siddhantshukla814 commented 1 year ago

Hi @jecfish could you share an example of sourcemaps implementation?

OrKoN commented 1 year ago

@Siddhantshukla814 you can see the implementation starting here https://github.com/puppeteer/replay/blob/main/src/stringify.ts#L68

Siddhantshukla814 commented 1 year ago

Hi @OrKoN, currently this extension don't use puppeteer/replay library for generating the custom script I was wondering is there any doc that could help me with the step-by-step process to consume puppeteer/replay to generate custom scripts?

OrKoN commented 1 year ago

@Siddhantshukla814 we don't have a dedicated step-by-step guide but we have API docs and some real-world examples like Cypress as well as smaller sample code.

cc @jecfish

Siddhantshukla814 commented 1 year ago

Thank you! Forgot to close this issue as this has been resolved here https://github.com/WebPageTest/Recorder-To-WPT-Script/pull/14

https://www.npmjs.com/package/webpagetest-chrome-recorder