- PVSM.RU - https://www.pvsm.ru -

Инструментирование Google Chrome через WebSocket API

image Взаимодействие с браузерами никогда не было работой для слабонервных: около полудюжины различных API, различные механизмы IPC, и разные возможности у разных поставщиков. Такие проекты, как WebDriver [1], пытаются абстрагироваться от этой сложности, к тому же в Сети можно найти десятки [2] других «безголовых» драйверов, использующих WebKit или иные движки. В настоящее время в работе даже находится спецификация W3C на WebDriver [3].

Инструментирование Google Chrome

Тем не менее, в то время, как создание общего решения является сложной задачей, оказалось, что инструментирование Chrome очень просто, — как я недавно обнаружил при исследовании некоторых вопросов, связанных с сетевыми задержками. Начиная с 18 версии, Chrome теперь поддерживает протокол удалённой отладки v1.0 [4], который предоставляет все возможности браузера с помощью обычного 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 [5] (по умолчанию выключено). С этого момента Chrome предоставляет HTTP-сервер, который позволяет контролировать все открытые вкладки. Каждая вкладка представляет собой изолированный процесс и, следовательно, работает со своим WebSocket, путь к которому доступен через атрибут webSocketDebuggerUrl. Давайте попробуем сделать что-нибудь с этим:

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, и так далее (например, событие [6] Network.responseReceived). На самом деле, если вы оставите Web-страницу открытой, вы также увидите события длительного опроса (long polling), генерируемые для получения новых твитов. Тонны информации [7], все в вашем распоряжении.

Удаленная отладка (и более того) с Chrome

Приведенный выше пример иллюстрирует очень простое взаимодействие с Network API, но протокол предоставляет гораздо больше возможностей. Вы можете работать с отладчиком JavaScript, управлять виртуальной машиной V8, модифицировать и изучать DOM, а также отслеживать хронологию событий, а ещё более чем полдюжины других возможностей [4]. Наконец, хотя круто управлять настольным браузером, управлением браузером на вашем телефоне ещё круче: Chrome для Android [8] предоставляет все те же возможности [9].

Автор: akzhan


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/ruby/5231

Ссылки в тексте:

[1] WebDriver: http://google-opensource.blogspot.com/2009/05/introducing-webdriver.html

[2] найти десятки: https://github.com/search?utf8=%E2%9C%93&q=headless&repo=&langOverride=&start_value=1&type=Repositories&language=

[3] спецификация W3C на WebDriver: http://dvcs.w3.org/hg/webdriver/raw-file/tip/webdriver-spec.html

[4] протокол удалённой отладки v1.0: https://developers.google.com/chrome-developer-tools/docs/protocol/1.0/index

[5] удалённой отладки в Chrome: http://blog.chromium.org/2011/05/remote-debugging-with-chrome-developer.html

[6] событие: https://gist.github.com/2331998

[7] Тонны информации: https://developers.google.com/chrome-developer-tools/docs/protocol/1.0/network

[8] Chrome для Android: http://googleblog.blogspot.com/2012/02/introducing-chrome-for-android.html

[9] все те же возможности: https://developers.google.com/chrome/mobile/