
Bulletproof demos using Chrome's playback mode - zackbloom
http://dev.hubspot.com/blog/bulletproof-demos
======
gojomo
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
Even more awesome would be the ability to send the recorded content to
someone.

~~~
masklinn
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)

~~~
inafield
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.

~~~
j_s
Don't miss what Google uses:

[http://googletesting.blogspot.com/2011/10/take-bite-out-
of-b...](http://googletesting.blogspot.com/2011/10/take-bite-out-of-bugs-and-
redundant.html)

[http://googletesting.blogspot.com/2011/11/rpf-googles-
record...](http://googletesting.blogspot.com/2011/11/rpf-googles-record-
playback-framework.html)

<http://code.google.com/p/bite-project/>

~~~
inafield
Wow. Thankyou. Made my day and possibly our QA team's day.

------
ryankshaw
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?

~~~
JoachimSchipper
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/GettingStart...](http://code.google.com/p/http-
impersonator/wiki/GettingStarted).

------
DCoder
_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.

------
mickdarling
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
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.

------
ErikRogneby
This would be great for capturing usability tests as well.

~~~
Mahn
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.

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

------
Neepy
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
\--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
No luck :(

~~~
colonelxc
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
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?

------
bdcravens
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
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
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.

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

~~~
jakub_g
chrome --disk-cache-size=1 --media-cache-size=1

1 is a size in bytes (must be >0).

------
nsoun
Interesting... I wasn't aware of this, I'll definitely give it a shot.

Thanks for the heads-up!

