repl.ws
Script browsers remotely
Good for ad-hoc debugging and automated testing
Of web applications
Also shown to remedy other ailments
Brought to you by Tomasz Janczuk / @tjanczuk
(Use space or arrow keys to navigate)
with repl.ws you can
Run JavaScript remotely on multiple browsers...
...from a console or programmatically
repl.ws is
a websocket relay in the cloud
supports multiple sessions
a session connects many browsers with one controller
controller sends javascript to browsers
browsers execute it and send back results to controller
repl.ws is a chatroom where people speak
javascript and json
You can use repl.ws
as a free cloud service at http://repl.ws
Provided to you pro publico bono by
yours truly
or host it yourself
by way of
open source
Let's get started
Add a script to your web site
<html>
<head>
<script src="http://repl.ws/js/{{id}}"></script>
</head>
<body>
<h1>Lorem ipsum</h1>
</body>
</html>
Note the {{id}} in the script URL
It is your repl.ws session identifier
It does not need to be pre-registered, but it should be unique
So use enough entropy - think of it as a password
Now open your web site in a browser and...
...Connect a controller
Use a generic, console-based Node.js WebSocket client
1. Install Node.js (one-time)
2. Install ws Node.js module (one-time)
npm install ws -g
3. Connect wscat to the repl.ws session
wscat -c ws://repl.ws/{{id}}
Finally...
Hello, world!
Remotely manipulate the DOM
> document.body.innerHTML="Hello, world!"
< Hello, world!
Observe the changes in the browser window
Remotely load a script into the page
Let's load and use jQuery
> .ld('//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js')
< Loaded //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
> $('body').html()
< Hello, world!
...or use a shorthand for loading JQuery:
> .ldjq
< Loaded //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
Type .h to see other built-in functions besides .ld
Remotely load CSS into the page
Let's load jQuery UI CSS
> .ld('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css')
< Loaded //ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css
Remotely modify CSS
Experiment with or fine tune CSS on actual device/browser
> $('p').css('color', 'red').css('font-size','2em')
< [object Object]
Remotely launch a YouTube video
Start a JSConf.US 2014 video on connected browsers
> $('body').html('<iframe src="//www.youtube.com/embed/2RevdtDs6tU"></iframe>')
< [object Object]
List connected browsers
Each browser connected to the session has an identifier
> .ls
< 0: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
< 2: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.76.4 (KHTML, like Gecko) Version/7.0.4 Safari/537.76.4
Other built-in helper functions
Type .h to get help
> .h
< Available commands:
.s - show session status
.ls - list connected browsers
.ld(url) - load JavaScript at `url` into connected browsers
e.g. .ld('http://foo.com/bar.js')
.ldjq - load default jQuery
.ldjqm - load default jQuery Mobile
.ldjqui - load default jQuery UI
.lddojo - load default Dojo
.ldext - load default Ext Core
.ldjq(ver) - load specific version of jQuery, e.g. .ldjq('1.4.3')
.ldjqm(ver) - load specific version of jQuery Mobile, e.g. .ldjqm('1.4.0')
... and more
JSON support
Receive JSON from browsers for programmatic control with ?json query parameter:
wscat -c ws://repl.ws/{{id}}?json
Repl.ws responses will now be JSON encoded:
< .s
< {"type":"status","browsers":1}
> $('body p').length
< {"type":"msg","msg":"2","from":0}
JSON protocol details on GitHub
Try it now
http://repl.ws
Brought to you by Tomasz Janczuk / @tjanczuk
