Bulletproof demos using Chrome's playback mode(dev.hubspot.com)
dev.hubspot.com
Bulletproof demos using Chrome's playback mode
http://dev.hubspot.com/blog/bulletproof-demos
11 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)
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)
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.
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/
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.
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.
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?
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?
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....
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/
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/
A bit heavy duty and not cli, but http://www.charlesproxy.com/ is capable of intercepting and outputting logs.
This would make tests so much easier!
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 :
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
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 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.
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.
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
start /b "" "C:\Users\User\AppData\Local\Google\Chrome\Application\chrome.exe" --args --record-mode
doesn't seem to work
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.
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.
--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!
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
"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?
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-modeIf 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. :)
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 outVery cool. Is there a switch to direct Chrome to ignore the cache and pull fresh data from the server?
chrome --disk-cache-size=1 --media-cache-size=1
1 is a size in bytes (must be >0).
1 is a size in bytes (must be >0).
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.
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
Interesting... I wasn't aware of this, I'll definitely give it a shot.
Thanks for the heads-up!
Thanks for the heads-up!