5 ms·

Awesome, I wonder if there is a possibility to create a chrome extension that works like 'Vue devttools' and show the heap and changes in real-time and maybe al

Awesome, I wonder if there is a possibility to create a chrome extension that works like 'Vue devttools' and show the heap and changes in real-time and maybe allow editing. That would be amazing for learning / debugging. > We use the --no-headless argument to boot a windowed Chrome instance (i.e. not headless) because Google can detect and thwart headless Chrome - but that's a story for another time. Use `puppeteer-extra-plugin-stealth`(1) for such sites. It defeats a lot of bot identification including recaptcha v3. (1) https://www.npmjs.com/package/puppeteer-extra-plugin-stealth https://www.npmjs.com/package/puppeteer-extra-plugin-stealth

acemarke 4y ago
Not _quite_ what you're describing, but Replay [0], the company I work for, _is_ building a true "time-traveling debugger" for JS. It works by recording the OS-level interactions with the browser process, then re-running those in the cloud. From the user's perspective in our debugging client UI, they can jump to any point in a timeline and do typical step debugging. However, you can also see how many times any line of code ran, and also add print statements to any line that will print out the results from _every time that line got executed_. So, no heap analysis per se, but you can definitely inspect the variables and stack from anywhere in the recording. Right now our debugging client is just scratching the surface of the info we have available from our backend. We recently put together a couple small examples that use the Replay backend API to extract data from recordings and do other analysis, like generating code coverage reports and introspecting React's internals to determine whether a given component was mounting or re-rendering. Given that capability, we hope to add the ability to do "React component stack" debugging in the not-too-distant future, such as a button that would let you "Step Back to Parent Component". We're also working on adding Redux DevTools integration now (like, I filed an initial PR for this today! [2]), and hope to add integration with other frameworks down the road. [0] https://replay.io https://replay.io [1] https://github.com/RecordReplay/replay-protocol-examples https://github.com/RecordReplay/replay-protocol-examples [2] https://github.com/RecordReplay/devtools/pull/6601 https://github.com/RecordReplay/devtools/pull/6601
- mdaniel 4y ago
  Wowzers, that must make you an impressive attack target for all the session data that gets uploaded to your site. How do you deal with user consent in those cases? I was curious to see what that experience was like from a client side, but it seems https://newaer.com/ https://newaer.com/ is bombing the .min.js include, which of course doesn't turn on said session capture BuiltWith alleges you use replay on replay.io but I didn't see any references to it on the main page, and app.replay.io is a white screen due to getInitialTabsState blowing up in src/ui/setup/index.ts
  - acemarke 4y ago
    Ah... sorry, not sure I followed all the train of thought there. The marketing page at https://replay.io https://replay.io is built with Webflow. The data privacy and security approach is described at https://www.replay.io/security-privacy https://www.replay.io/security-privacy . The actual client app at https://app.replay.io https://app.replay.io is a Next.js app, albeit a fairly complex one: https://github.com/RecordReplay/devtools https://github.com/RecordReplay/devtools If you're seeing a bug in our client app, could you either try using it again and see if it's fixed now? (Or even better, use the Replay browser to record that error happening, submit it, and file a Github issue with the recording link so we can fix it! Seriously, we dogfood Replay to debug Replay on a daily basis.)
    - mdaniel 4y ago
      I guess your description of the product omitted the "one must use a special build of Firefox" part because when I go to https://app.replay.io https://app.replay.io with a non-magic browser, it is a white page. However, after downloading your copy of Firefox, it seems to default to app.replay.io and presents a login page Confusingly, however, clicking on the "Sign in" button launches a link in my system's browser. Fascinating. > The data privacy and security approach is described at https://www.replay.io/security-privacy https://www.replay.io/security-privacy Fine, but my experience with these time traveling session recording frameworks is that they exfiltrate all events to The Cloud, so I wondered how any user of a website that uses that technology would give consent to being monitored in that way. However, after hearing you say "download the browser," maybe that's where the misunderstanding happened Is it a development time tool, or a sniffer that is designed to be included in a "script" tag on random websites and record all interactions? because those are entirely different threat models > If you're seeing a bug in our client app, could you either try using it again and see if it's fixed now? I dunno if "client app" means your rebrand of Firefox, or https://app.replay.io https://app.replay.io. If the former, well, that's not at all what I was testing. If the latter, no, definitely not fixed
oldmanhorton 4y ago
Before the whole project was killed, Node-ChakraCore had a time travel debugger that worked pretty well. I don't know how easy it would be to port the methods it used to a chrome extension (my guess is somewhere between difficult and impossible), but browser vendors could implement this natively.

acemarke 4y ago

Not _quite_ what you're describing, but Replay [0], the company I work for, _is_ building a true "time-traveling debugger" for JS. It works by recording the OS-level interactions with the browser process, then re-running those in the cloud. From the user's perspective in our debugging client UI, they can jump to any point in a timeline and do typical step debugging. However, you can also see how many times any line of code ran, and also add print statements to any line that will print out the results from _every time that line got executed_. So, no heap analysis per se, but you can definitely inspect the variables and stack from anywhere in the recording. Right now our debugging client is just scratching the surface of the info we have available from our backend. We recently put together a couple small examples that use the Replay backend API to extract data from recordings and do other analysis, like generating code coverage reports and introspecting React's internals to determine whether a given component was mounting or re-rendering. Given that capability, we hope to add the ability to do "React component stack" debugging in the not-too-distant future, such as a button that would let you "Step Back to Parent Component". We're also working on adding Redux DevTools integration now (like, I filed an initial PR for this today! [2]), and hope to add integration with other frameworks down the road. [0] https://replay.io https://replay.io [1] https://github.com/RecordReplay/replay-protocol-examples https://github.com/RecordReplay/replay-protocol-examples [2] https://github.com/RecordReplay/devtools/pull/6601 https://github.com/RecordReplay/devtools/pull/6601

mdaniel 4y ago
Wowzers, that must make you an impressive attack target for all the session data that gets uploaded to your site. How do you deal with user consent in those cases? I was curious to see what that experience was like from a client side, but it seems https://newaer.com/ https://newaer.com/ is bombing the .min.js include, which of course doesn't turn on said session capture BuiltWith alleges you use replay on replay.io but I didn't see any references to it on the main page, and app.replay.io is a white screen due to getInitialTabsState blowing up in src/ui/setup/index.ts
- acemarke 4y ago
  Ah... sorry, not sure I followed all the train of thought there. The marketing page at https://replay.io https://replay.io is built with Webflow. The data privacy and security approach is described at https://www.replay.io/security-privacy https://www.replay.io/security-privacy . The actual client app at https://app.replay.io https://app.replay.io is a Next.js app, albeit a fairly complex one: https://github.com/RecordReplay/devtools https://github.com/RecordReplay/devtools If you're seeing a bug in our client app, could you either try using it again and see if it's fixed now? (Or even better, use the Replay browser to record that error happening, submit it, and file a Github issue with the recording link so we can fix it! Seriously, we dogfood Replay to debug Replay on a daily basis.)
  - mdaniel 4y ago
    I guess your description of the product omitted the "one must use a special build of Firefox" part because when I go to https://app.replay.io https://app.replay.io with a non-magic browser, it is a white page. However, after downloading your copy of Firefox, it seems to default to app.replay.io and presents a login page Confusingly, however, clicking on the "Sign in" button launches a link in my system's browser. Fascinating. > The data privacy and security approach is described at https://www.replay.io/security-privacy https://www.replay.io/security-privacy Fine, but my experience with these time traveling session recording frameworks is that they exfiltrate all events to The Cloud, so I wondered how any user of a website that uses that technology would give consent to being monitored in that way. However, after hearing you say "download the browser," maybe that's where the misunderstanding happened Is it a development time tool, or a sniffer that is designed to be included in a "script" tag on random websites and record all interactions? because those are entirely different threat models > If you're seeing a bug in our client app, could you either try using it again and see if it's fixed now? I dunno if "client app" means your rebrand of Firefox, or https://app.replay.io https://app.replay.io. If the former, well, that's not at all what I was testing. If the latter, no, definitely not fixed

oldmanhorton 4y ago

Before the whole project was killed, Node-ChakraCore had a time travel debugger that worked pretty well. I don't know how easy it would be to port the methods it used to a chrome extension (my guess is somewhere between difficult and impossible), but browser vendors could implement this natively.