概要
BrowserStackのローカルテスト環境を構築して、Liveを試すところまで。ローカルのテストや社内からしかアクセスできないWebページのテストを行うことができます。大体はTest private, local or internal servers and local HTML, CSS & JavaScript folders instantly.に書いてありますのでこちらも参照して下さい。
アカウント作る
作ってない人は作りましょう。
Chrome Extensionのインストール
BrowserStackが提供するChrome Extensionをインストールします。
BrowserStackLocalのインストールと起動
https://www.browserstack.com/local-testing のDownload the appropriate binary辺りにバイナリが置いてあるのでダウンロードします。アクセスキー(上記ページのバイナリが置いてあるリンクのちょっと下か設定ページを参照)を指定して起動します。
path/to/BrowserStack your-access-key
Live画面での設定
https://www.browserstack.com/start で適当に機種を選んでLive画面を開きます。SETTINGSからServer TestingのResolve all URLs through my networkをチェックします。
試してみる
index.htmlを作って、
<!doctype html>
<html>
<head><title>Hello world!</title></head>
<body>
<section>
<h1>Hello world!</h1>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</section>
<script>alert('hello world!');</script>
</body>
</html>
こうします(これは各自お好きなようにしてください)。
python -m SimpleHTTPServer 8888
Liveで見てみます(それっぽいのが出た)。
DEVTOOLSを使ってみます。下に出ているChrome DevtoolsっぽいものはChrome自身のものではなくて、BrowserStack側で用意しているものです。ここからリモートで開いているブラウザのelementを操作したり、ConsoleからJavaScriptを実行することができます(凄すぎる)。
内容を書き換えてみる。
Consoleを使ってみる。
まとめ
BrowserStackのローカルテストについて紹介しました。正直DEVTOOLSには驚愕しました。一つ注意としては、同時接続数に制限があり、複数タブで開いてたりすると繋がらないことがあります。