4 ms·

RRWeb only records changes to the DOM, it doesn't actually replay the JavaScript that makes those changes happen. So you see exactly what the user sees, but you

RRWeb only records changes to the DOM, it doesn't actually replay the JavaScript that makes those changes happen. So you see exactly what the user sees, but you're not able to inspect memory or anything like that. There are a few caveats since not everything is captured in the DOM, such as media playback state and content in canvases. The user may also have some configurations that change their media queries, such as dark mode or prefers reduced motion. Edit: and yes, to your point, browser differences would also render differently.

westurner 2y ago
What about debugging and recording stack traces too? "DevTools Protocol API docs—its domains, methods, and events": https://github.com/ChromeDevTools/debugger-protocol-viewer https://github.com/ChromeDevTools/debugger-protocol-viewer .. https://chromedevtools.github.io/devtools-protocol/ https://chromedevtools.github.io/devtools-protocol/ ChromeDevTools/awesome-chrome-devtools > Chrome Debugger integration with Editors: https://github.com/ChromeDevTools/awesome-chrome-devtools#chrome-debugger-integration-with-editors https://github.com/ChromeDevTools/awesome-chrome-devtools#ch... DAP: Debug Adapter Protocol > Implementations: https://microsoft.github.io/debug-adapter-protocol/implementors/adapters/ https://microsoft.github.io/debug-adapter-protocol/implement... : - Microsoft/vscode-js-debug: https://github.com/microsoft/vscode-js-debug https://github.com/microsoft/vscode-js-debug : > This is a DAP-based JavaScript debugger. It debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, and more. It has been the default JavaScript debugger in Visual Studio Code since 1.46, and is gradually rolling out in Visual Studio proper. - awto/effectfuljs: https://github.com/awto/effectfuljs/tree/main/packages/vscode-debugger https://github.com/awto/effectfuljs/tree/main/packages/vscod... : > EffectfulJS Debugger: VSCode debugger for JavaScript/TypeScript. Besides the typical debugger's features it offers: Time-traveling, Persistent state, Platform independence, Programmable API, Hot mocking of functions or even parts of a function, Hot code swapping, Data breakpoints. This works by instrumenting JavaScript/TypeScript code and injecting necessary debugging API calls into it. It is implemented using EffectfulJS. https://github.com/awto/effectfuljs https://github.com/awto/effectfuljs : @effectful/debugger , @effectful/es-persist: https://github.com/awto/effectfuljs/tree/main/packages/es-persist https://github.com/awto/effectfuljs/tree/main/packages/es-pe...
Juice10 2y ago
Maintainer of rrweb here: media playback was added a little while ago and was recently improved quite a lot. Canvas recording is also available but there are three different ways of doing that as all three have their own pros/cons.

westurner 2y ago

What about debugging and recording stack traces too? "DevTools Protocol API docs—its domains, methods, and events": https://github.com/ChromeDevTools/debugger-protocol-viewer https://github.com/ChromeDevTools/debugger-protocol-viewer .. https://chromedevtools.github.io/devtools-protocol/ https://chromedevtools.github.io/devtools-protocol/ ChromeDevTools/awesome-chrome-devtools > Chrome Debugger integration with Editors: https://github.com/ChromeDevTools/awesome-chrome-devtools#chrome-debugger-integration-with-editors https://github.com/ChromeDevTools/awesome-chrome-devtools#ch... DAP: Debug Adapter Protocol > Implementations: https://microsoft.github.io/debug-adapter-protocol/implementors/adapters/ https://microsoft.github.io/debug-adapter-protocol/implement... : - Microsoft/vscode-js-debug: https://github.com/microsoft/vscode-js-debug https://github.com/microsoft/vscode-js-debug : > This is a DAP-based JavaScript debugger. It debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, and more. It has been the default JavaScript debugger in Visual Studio Code since 1.46, and is gradually rolling out in Visual Studio proper. - awto/effectfuljs: https://github.com/awto/effectfuljs/tree/main/packages/vscode-debugger https://github.com/awto/effectfuljs/tree/main/packages/vscod... : > EffectfulJS Debugger: VSCode debugger for JavaScript/TypeScript. Besides the typical debugger's features it offers: Time-traveling, Persistent state, Platform independence, Programmable API, Hot mocking of functions or even parts of a function, Hot code swapping, Data breakpoints. This works by instrumenting JavaScript/TypeScript code and injecting necessary debugging API calls into it. It is implemented using EffectfulJS. https://github.com/awto/effectfuljs https://github.com/awto/effectfuljs : @effectful/debugger , @effectful/es-persist: https://github.com/awto/effectfuljs/tree/main/packages/es-persist https://github.com/awto/effectfuljs/tree/main/packages/es-pe...

Juice10 2y ago

Maintainer of rrweb here: media playback was added a little while ago and was recently improved quite a lot. Canvas recording is also available but there are three different ways of doing that as all three have their own pros/cons.