WebSocket APIを介したGoogle Chromeのインストルメンテーション

ブラウザーとの対話は、気弱な人の仕事ではありませんでした。約半ダースの異なるAPI、さまざまなIPCメカニズム、さまざまなベンダーのさまざまな機能です。 WebDriverなどのプロジェクトは、この複雑さを無視しようとしています;さらに、WebKitまたは他のエンジンを使用する他の「ヘッドレス」ドライバーがWeb上で多数見つかります。 現在、 WebDriverのW3C仕様は現在作業中です。

計装Google Chrome

ただし、共通のソリューションを作成するのは複雑な作業ですが、Chromeのインスツルメントは非常に簡単であることがわかりました。最近、ネットワーク遅延に関連するいくつかの問題を調査中に発見したように。 バージョン18以降、Chrome はリモートデバッグプロトコルv1.0をサポートするようになりました 。これは、通常のWebSocketを使用してすべてのブラウザー機能を提供します。

/Applications/Path To/Google Chrome --remote-debugging-port=9222 # OSX $> curl localhost:9222/json
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 [ { "devtoolsFrontendUrl": "/devtools/devtools.html?host=localhost:9222&page=1", "faviconUrl": "", "thumbnailUrl": "/thumb/chrome://newtab/", "title": "New Tab", "url": "chrome://newtab/", "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/1" } ]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、 Chromeでリモートデバッグを有効にします（デフォルトでは無効になっています）。 これ以降、Chromeには、開いているすべてのタブを制御できるHTTPサーバーが用意されています。 各タブは独立したプロセスであるため、 webSocketDebuggerUrl



属性を介してアクセスできるパスである独自のWebSocketでwebSocketDebuggerUrl



ます。 これで何かを試してみましょう（翻訳者のメモ：Rubyでコードを作成しますが、これは原則ではありません）：

 require 'em-http' require 'faye/websocket' require 'json' EM.run do # Chrome runs an HTTP handler listing available tabs conn = EM::HttpRequest.new('http://localhost:9222/json').get conn.callback do resp = JSON.parse(conn.response) puts "#{resp.size} available tabs, Chrome response: \n#{resp}" # connect to first tab via the WS debug URL ws = Faye::WebSocket::Client.new(resp.first['webSocketDebuggerUrl']) ws.onopen = lambda do |event| # once connected, enable network tracking ws.send JSON.dump({id: 1, method: 'Network.enable'}) # tell Chrome to navigate to twitter.com and look for "chrome" tweets ws.send JSON.dump({ id: 2, method: 'Page.navigate', params: {url: 'http://twitter.com/#!/search/chrome?q=chrome&' + rand(100).to_s} }) end ws.onmessage = lambda do |event| # print event notifications from Chrome to the console p [:new_message, JSON.parse(event.data)] end end end
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、Chromeにネットワークトラフィックの追跡と通知を有効にし、Twitter検索を行うように指示します。 この場合、Chromeは何十ものネットワーク通知を送信します。最初のページの取得、各サブリソースの通知、XHRなど（ Network.responseReceived



イベントなど ）。 実際、Webページを開いたままにすると、新しいツイートを受信するために長いポーリングイベントが生成されます。 大量の情報 、すべてがあなたの自由です。

Chromeを使用したリモートデバッグ（など）

上記の例は、ネットワークAPIとの非常に簡単な相互作用を示していますが、プロトコルはさらに多くの機能を提供します。 JavaScriptデバッガーでの作業、V8仮想マシンの管理、DOMの変更と学習、イベントの時系列の追跡、およびその他の半数以上の機能を使用できます 。 最後に、デスクトップブラウザーを管理するのはクールですが、携帯電話でのブラウザーの管理はさらにクールです。Chromefor Androidは、 すべて同じ機能を提供します 。