Bulletproof demos using Chrome's playback mode | Hacker News Reader

Bulletproof demos using Chrome's playback mode

dev.hubspot.com

222 pointszackbloom35 comments

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

Even more awesome would be the ability to send the recorded content to someone.

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)

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() )

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.

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.

Don't miss what Google uses:

http://googletesting.blogspot.com/2011/10/take-bite-out-of-b...

http://googletesting.blogspot.com/2011/11/rpf-googles-record...

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

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

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?

This would make tests so much easier!

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

[edit] Also:

Random perl script: https://github.com/inno/pluck-har

Google's record/playback Chrome extension: http://code.google.com/p/bite-project/

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

A bit heavy duty and not cli, but http://www.charlesproxy.com/ is capable of intercepting and outputting logs.

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.

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.

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.

This would be great for capturing usability tests as well.

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.

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

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

--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!

No luck :(

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

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?

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.

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

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)

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. :)

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.

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

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

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.

Not sure if this is what you're looking for, but Command-Shift-R refreshes a page ignoring cache

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

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

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

Thanks for the heads-up!

Reply on news.ycombinator.com