5 ms·

Bulletproof demos using Chrome's playback mode

222 points by zackbloom 14y ago

ErikRogneby 14y ago
This would be great for capturing usability tests as well.
- Mahn 14y ago
  Not really, if I understand correctly this is capturing only the requests, "caching" them in a way, so when on playback mode if you do an action that fires this request, it's fetched from the recorded store. I think its use is limited to what the article suggests: making sure real life demos don't break.
nsoun 14y ago
Interesting... I wasn't aware of this, I'll definitely give it a shot. Thanks for the heads-up!
uptown 14y ago
Very cool. Is there a switch to direct Chrome to ignore the cache and pull fresh data from the server?
- MikeKusold 14y ago
  Go to: Developer Tools (F12) -> Settings (bottom right gear) Then there is a setting to disable cache. Although I have heard reports that it doesn't completely work, but that might have been fixed by now.
- bthomas 14y ago
  Not sure if this is what you're looking for, but Command-Shift-R refreshes a page ignoring cache
- jakub_g 14y ago
  chrome --disk-cache-size=1 --media-cache-size=1 1 is a size in bytes (must be >0).
ryankshaw 14y ago
I would be interested in recording the actual order of http requests and being able to replay them on the commandline. something like open -a "Google Chrome" --args --record-mode --output-file output.log then: some-command-that-plays-it-back --infile output.log does anyone know if something like that exists?
- jonny_eh 14y ago
  This would make tests so much easier!
- j_s 14y ago
  This is not happening in Chrome as of last year, but you can use a proxy like Fiddler2 or Charles. http://stackoverflow.com/questions/8806625/is-it-possible-to-run-a-har-archive-on-google-chrome http://stackoverflow.com/questions/8806625/is-it-possible-to... [edit] Also: Random perl script: https://github.com/inno/pluck-har https://github.com/inno/pluck-har Google's record/playback Chrome extension: http://code.google.com/p/bite-project/ http://code.google.com/p/bite-project/
- JoachimSchipper 14y ago
  There exist various proxies that do this; for me, the first Google result for "proxy record replay http" leads to http://code.google.com/p/http-impersonator/wiki/GettingStarted http://code.google.com/p/http-impersonator/wiki/GettingStart....
- lincolnbryant 14y ago
  A bit heavy duty and not cli, but http://www.charlesproxy.com/ http://www.charlesproxy.com/ is capable of intercepting and outputting logs.
gojomo 14y ago
Anyone know where the recorded content is stored, and whether it's kept segregated from other cached content? This could be a really interesting archival format...
- inafield 14y ago
  Even more awesome would be the ability to send the recorded content to someone.
  - masklinn 14y ago
    Yeah that's the first thing I thought of, especially if it's possible to pause and inspect/introspect the DOM and code, that would make debugging client issues much easier. Although just capturing user session would already be nice, better than forcing people to take videos of their desktop (and with a bit of luck the file would be much smaller)
    - bdcravens 14y ago
      Use Selenium and whatever host language you want to pause, introspect, etc (example, Java's sleep and use jSoup to parse DOM after grabbing it with Selenium's getBody() )
      - masklinn 14y ago
        Selenium's no good, and it's even worse for user recordings: it only stores activity, so if the issue came from e.g. a mishandled network glitch, it won't be recorded.
    - inafield 14y ago
      Exactly. I'm imagining a world where I tell a customer to use a Chrome add-in that automatically starts recording what they do and uploads it to me and I can see what is going on. Even if not that wonderful, just the ability to have QA or fellow developers send me a file that I can analyze instead of tying up their computer would be wonderful. Especially when working with remote co-workers. The problem with video is that I can't inspect their DOM or their console.
andrewaylett 14y ago
There's a similar trick built into fiddler, too, although that's Windows only. Does anyone know of a cross-platform equivalent for Firefox?
bdcravens 14y ago
If you're going to go to the trouble of running something from the terminal (even if you save time with a bash/batch script), why would you prefer this over Selenium? With Selenium you can customize the actions, extend using your favorite language (such as adding pauses or pulling inputs from a database), and if you use Firefox, you can get the same recording ability (only you can save the file and can extend via JavaScript)
- ffk 14y ago
  Selenium solves a different problem. With selenium, you record user actions, and verify properties about the state of the site. The record/playback feature is designed to make a copy of the content you look at during a session, allowing you to retrieve it offline at a later time by revisiting the page (or making equivalent HTTP calls). Interestingly, if you use both together, you can design a offline-mode reader for hacker news for use on the train or other disconnected environments. Or, combine selenium and playback mode to create kick ass demos that are less likely to fail on weak wifi networks. :)
  - bdcravens 14y ago
    True. I hadn't considered situations where the content would change if you replayed later. For the apps where I'd use this that's never been a use case, and aside from the cached content, Selenium accomplishes the same and more. Selenium is typically used for testing and verification, but it's quite useful as a recording/playback or full-fledged browser automation tool. Another good one is iMacros.
- j_s 14y ago
  This Chrome feature is useful for 'I'm going up on stage to demo my product' scenarios, thus the > even if your servers have exploded, a bug has been > deployed, or the conference wifi has dropped out
Neepy 14y ago
Any idea what the command is for windows? start /b "" "C:\Users\User\AppData\Local\Google\Chrome\Application\chrome.exe" --args --record-mode doesn't seem to work
- zackbloom 14y ago
  --args is an option to the OS X open command, you shouldn't need it on windows. My guess is: start /b "" "C:\Users\User\AppData\Local\Google\Chrome\Application\chrome.exe" --record-mode Report back if it works!
  - Neepy 14y ago
    No luck :(
    - colonelxc 14y ago
      You can just run the executable, you don't need to call start. "C:\Users\User\AppData\Local\Google\Chrome\Application\chrome.exe" --record-mode
      - Neepy 14y ago
        I've tried that also but still no luck. I have the commands in separate bat files but I wouldn't expect that to affect it, or I might be using the wrong chrome executable?
- snarfy 14y ago
  1. Close all chrome windows, open a cmd prompt, then cd to c:\users\user\appdata\local\google\chrome\application 2. run chrome.exe --record-mode ( /record-mode also works) 3. navigate in a predetermined way, then close chrome 4. run chrome.exe --playback-mode ( /playback-mode also works) 5. navigate in the same predetermined way. Those clicks will all work. Any other clicks will not work and result in 'cache miss' errors.
- DCoder 14y ago
  Create a separate profile or close _all_ open Chrome windows first. "c:\path\to\chrome\dir\chrome" --user-data-dir="c:\path\to\chrome\dir\User Data/test" --record-mode
mickdarling 14y ago
Unfortunately my site works directly with embedded Hulu videos and it doesn't seem like this process can replay those videos from the cache. I JUST dealt with bad data speeds at SXSW while demoing for @scobleizer so this would have been great for the future.
est 14y ago
I thought Chrome could record your navigation actions .e.g input URL and click elements, it turned out to be directly cache of URL contents so you could read from cache later... Anyway, cool concept, except it doesn't work with X-Content-Type-Options: nosniff, or ajax call with timestamp parameters.
DCoder 14y ago
It doesn't record where you click or what you open, just every request as it moves over the wire. I am getting quite different results - it records http requests and user input (keyboard/mouse). Windows 7 x64, Chrome 25.0.1364.172 m : # navigate to chrome directory cd C:\Users\User\AppData\Local\Google\Chrome\Application\ # run chrome with a new profile chrome --user-data-dir="../User Data/recording_test" --first-run --record-mode # use the new chrome profile to browse around # close chrome # launch it in playback mode chrome --user-data-dir="../User Data/recording_test" --playback-mode # watch disaster ensue as it locks your mouse (not keyboard), # replays all activity (url bar input, navigation, mouse cursor movements...), # and doesn't even stop when you alt-tab # to a different application It feels unpolished - mouse scroll wasn't recorded, the "translate this page?" bar wasn't showing up the same way as in the recording, and most importantly, I managed to switch to a different application and it continued sending input to that application. HTTP requests did get cached as promised, and non-cached requests (due to missing scroll event, it clicked on a different link) resulted in a cache error.

222 points by zackbloom 14y ago

ErikRogneby 14y ago

This would be great for capturing usability tests as well.

Mahn 14y ago
Not really, if I understand correctly this is capturing only the requests, "caching" them in a way, so when on playback mode if you do an action that fires this request, it's fetched from the recorded store. I think its use is limited to what the article suggests: making sure real life demos don't break.

nsoun 14y ago

Interesting... I wasn't aware of this, I'll definitely give it a shot. Thanks for the heads-up!

uptown 14y ago

Very cool. Is there a switch to direct Chrome to ignore the cache and pull fresh data from the server?

MikeKusold 14y ago
Go to: Developer Tools (F12) -> Settings (bottom right gear) Then there is a setting to disable cache. Although I have heard reports that it doesn't completely work, but that might have been fixed by now.
bthomas 14y ago
Not sure if this is what you're looking for, but Command-Shift-R refreshes a page ignoring cache
jakub_g 14y ago
chrome --disk-cache-size=1 --media-cache-size=1 1 is a size in bytes (must be >0).

ryankshaw 14y ago

I would be interested in recording the actual order of http requests and being able to replay them on the commandline. something like open -a "Google Chrome" --args --record-mode --output-file output.log then: some-command-that-plays-it-back --infile output.log does anyone know if something like that exists?

jonny_eh 14y ago
This would make tests so much easier!
j_s 14y ago
This is not happening in Chrome as of last year, but you can use a proxy like Fiddler2 or Charles. http://stackoverflow.com/questions/8806625/is-it-possible-to-run-a-har-archive-on-google-chrome http://stackoverflow.com/questions/8806625/is-it-possible-to... [edit] Also: Random perl script: https://github.com/inno/pluck-har https://github.com/inno/pluck-har Google's record/playback Chrome extension: http://code.google.com/p/bite-project/ http://code.google.com/p/bite-project/
JoachimSchipper 14y ago
There exist various proxies that do this; for me, the first Google result for "proxy record replay http" leads to http://code.google.com/p/http-impersonator/wiki/GettingStarted http://code.google.com/p/http-impersonator/wiki/GettingStart....
lincolnbryant 14y ago
A bit heavy duty and not cli, but http://www.charlesproxy.com/ http://www.charlesproxy.com/ is capable of intercepting and outputting logs.

gojomo 14y ago

Anyone know where the recorded content is stored, and whether it's kept segregated from other cached content? This could be a really interesting archival format...

inafield 14y ago
Even more awesome would be the ability to send the recorded content to someone.
- masklinn 14y ago
  Yeah that's the first thing I thought of, especially if it's possible to pause and inspect/introspect the DOM and code, that would make debugging client issues much easier. Although just capturing user session would already be nice, better than forcing people to take videos of their desktop (and with a bit of luck the file would be much smaller)
  - bdcravens 14y ago
    Use Selenium and whatever host language you want to pause, introspect, etc (example, Java's sleep and use jSoup to parse DOM after grabbing it with Selenium's getBody() )
    - masklinn 14y ago
      Selenium's no good, and it's even worse for user recordings: it only stores activity, so if the issue came from e.g. a mishandled network glitch, it won't be recorded.
  - inafield 14y ago
    Exactly. I'm imagining a world where I tell a customer to use a Chrome add-in that automatically starts recording what they do and uploads it to me and I can see what is going on. Even if not that wonderful, just the ability to have QA or fellow developers send me a file that I can analyze instead of tying up their computer would be wonderful. Especially when working with remote co-workers. The problem with video is that I can't inspect their DOM or their console.

andrewaylett 14y ago

There's a similar trick built into fiddler, too, although that's Windows only. Does anyone know of a cross-platform equivalent for Firefox?

bdcravens 14y ago

If you're going to go to the trouble of running something from the terminal (even if you save time with a bash/batch script), why would you prefer this over Selenium? With Selenium you can customize the actions, extend using your favorite language (such as adding pauses or pulling inputs from a database), and if you use Firefox, you can get the same recording ability (only you can save the file and can extend via JavaScript)

ffk 14y ago
Selenium solves a different problem. With selenium, you record user actions, and verify properties about the state of the site. The record/playback feature is designed to make a copy of the content you look at during a session, allowing you to retrieve it offline at a later time by revisiting the page (or making equivalent HTTP calls). Interestingly, if you use both together, you can design a offline-mode reader for hacker news for use on the train or other disconnected environments. Or, combine selenium and playback mode to create kick ass demos that are less likely to fail on weak wifi networks. :)
- bdcravens 14y ago
  True. I hadn't considered situations where the content would change if you replayed later. For the apps where I'd use this that's never been a use case, and aside from the cached content, Selenium accomplishes the same and more. Selenium is typically used for testing and verification, but it's quite useful as a recording/playback or full-fledged browser automation tool. Another good one is iMacros.
j_s 14y ago
This Chrome feature is useful for 'I'm going up on stage to demo my product' scenarios, thus the > even if your servers have exploded, a bug has been > deployed, or the conference wifi has dropped out

Neepy 14y ago

Any idea what the command is for windows? start /b "" "C:\Users\User\AppData\Local\Google\Chrome\Application\chrome.exe" --args --record-mode doesn't seem to work

zackbloom 14y ago
--args is an option to the OS X open command, you shouldn't need it on windows. My guess is: start /b "" "C:\Users\User\AppData\Local\Google\Chrome\Application\chrome.exe" --record-mode Report back if it works!
- Neepy 14y ago
  No luck :(
  - colonelxc 14y ago
    You can just run the executable, you don't need to call start. "C:\Users\User\AppData\Local\Google\Chrome\Application\chrome.exe" --record-mode
    - Neepy 14y ago
      I've tried that also but still no luck. I have the commands in separate bat files but I wouldn't expect that to affect it, or I might be using the wrong chrome executable?
snarfy 14y ago
1. Close all chrome windows, open a cmd prompt, then cd to c:\users\user\appdata\local\google\chrome\application 2. run chrome.exe --record-mode ( /record-mode also works) 3. navigate in a predetermined way, then close chrome 4. run chrome.exe --playback-mode ( /playback-mode also works) 5. navigate in the same predetermined way. Those clicks will all work. Any other clicks will not work and result in 'cache miss' errors.
DCoder 14y ago
Create a separate profile or close _all_ open Chrome windows first. "c:\path\to\chrome\dir\chrome" --user-data-dir="c:\path\to\chrome\dir\User Data/test" --record-mode

mickdarling 14y ago

Unfortunately my site works directly with embedded Hulu videos and it doesn't seem like this process can replay those videos from the cache. I JUST dealt with bad data speeds at SXSW while demoing for @scobleizer so this would have been great for the future.

est 14y ago

I thought Chrome could record your navigation actions .e.g input URL and click elements, it turned out to be directly cache of URL contents so you could read from cache later... Anyway, cool concept, except it doesn't work with X-Content-Type-Options: nosniff, or ajax call with timestamp parameters.

DCoder 14y ago

It doesn't record where you click or what you open, just every request as it moves over the wire. I am getting quite different results - it records http requests and user input (keyboard/mouse). Windows 7 x64, Chrome 25.0.1364.172 m : # navigate to chrome directory cd C:\Users\User\AppData\Local\Google\Chrome\Application\ # run chrome with a new profile chrome --user-data-dir="../User Data/recording_test" --first-run --record-mode # use the new chrome profile to browse around # close chrome # launch it in playback mode chrome --user-data-dir="../User Data/recording_test" --playback-mode # watch disaster ensue as it locks your mouse (not keyboard), # replays all activity (url bar input, navigation, mouse cursor movements...), # and doesn't even stop when you alt-tab # to a different application It feels unpolished - mouse scroll wasn't recorded, the "translate this page?" bar wasn't showing up the same way as in the recording, and most importantly, I managed to switch to a different application and it continued sending input to that application. HTTP requests did get cached as promised, and non-cached requests (due to missing scroll event, it clicked on a different link) resulted in a cache error.