Принцип протокола удаленной отладки Chrome

Chrome

задний план

Инструментарий разработчика Chrome в целом всем знаком, открыть консоль для локальной отладки можно правым кликом по инспектору или cmd+opt+j. Другой способ — отлаживать другой браузер через один браузер или отлаживать мобильный webView через USB-соединение с мобильным телефоном. Оба эти метода относятся к целевой странице удаленной отладки в новом окне. Это вновь открытое окно открывает html-страницу (inspector.html), которая выглядит как встроенные инструменты разработки. Отладка целевой страницы в spector.html аналогична отладке во встроенных инструментах разработки.

О соглашении

Официальное объяснение — это протокол, который позволяет инструментам отлаживать и проверять Chrome, Chromium и другие браузеры на базе Blink. Он разделяет несколько различных функциональных модулей (доменов), таких как DOM, Debugger, Network, Timeline и т. д. Каждый модуль определяет некоторые команды и события в виде структурированного JSON.

Принцип удаленной отладки

Страница удаленного отладчика (inspector.html) может делать то же самое, что и инструменты разработки, встроенные в целевую страницу.

запустить экземпляр хрома

Функция удаленной отладки Chrome по умолчанию отключена, и к ней можно получить доступ через--remote-debugging-portКомандная строка создает экземпляр хрома для отладки. Такие как:

sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9527

Запустите Chrome здесь, Chrome разместит веб-приложение в качестве сервера, и к этому веб-приложению можно будет получить доступ через http://localhost:9527.

Управление вкладками Chrome

Получить информацию обо всех открытых тегах, вернуть массив json,typeдляpageявляется открытой страницей. тип может иметь другие типы.

http://localhost:9527/json

вернусь:

[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9527/devtools/page/7FBA9CF445D4BF16990FEF94A6F32F76",
   "id": "7FBA9CF445D4BF16990FEF94A6F32F76",
   "title": "tigertrade-web",
   "type": "page",
   "url": "http://172.25.7.141:4000/client/quoteMain.html#symbol=GCmain&market=FUT&secType=FUT",
   "webSocketDebuggerUrl": "ws://localhost:9527/devtools/page/7FBA9CF445D4BF16990FEF94A6F32F76"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9527/devtools/page/61EDD947CB27F854C65B34005EFC2A85",
   "id": "61EDD947CB27F854C65B34005EFC2A85",
   "title": "tigertrade-web",
   "type": "page",
   "url": "http://172.25.7.141:4000/client/quoteInfoSide.html#symbol=GCmain&market=FUT&secType=FUT",
   "webSocketDebuggerUrl": "ws://localhost:9527/devtools/page/61EDD947CB27F854C65B34005EFC2A85"
} ]

Соединение между spector.html и хостом Chrome устанавливается через веб-сокет. Адрес веб-сокета — это значение параметра ws в URL-адресе.

вpage/с последующимpage id, каждая страница имеет уникальный идентификатор страницы, и Chrome использует этот идентификатор, чтобы определить, какая страница является целевой. Через это соединение происходит обмен данными между страницей и ядром Chrome.

Между экземпляром отладчика Chrome и экземпляром целевой страницы существует связь процесса, поэтому инспекция.html может загружать исходный файл целевой страницы через экземпляр отладчика Chrome, а также может управлять целевой страницей, например добавлять точки останова, обновлять, записывать Сетевая информация и т.д.

  • Закрыть вкладку, передать id страницы
http://localhost:9527/json/close/7FBA9CF445D4BF16990FEF94A6F32F76
  • Активировать вкладку
http://localhost:9527/json/activate/7FBA9CF445D4BF16990FEF94A6F32F76
  • Просмотр информации о версии Chrome и протокола
http://localhost:9527/json/version

Как работают инструменты разработки

Что происходит внутри devtools, когда мы выполняем различные операции с spector.html?

Во-первых, на панели «Сеть» инструментов разработчика проверьте вкладку WS, обновите страницу и найдите подключение через веб-сокет. Это ws-соединение, установленное между spector.html и хостом Chrome для обмена данными.

расширять

отладка узла

резюме

Многие инструменты используют протокол отладки Chrome, в том числе phantomJS и ChromeDriver Selenium, которые по сути являются одной и той же реализацией, эквивалентной API, предоставляемому ядром Chrome для вызова приложений. На официальном сайте перечислено множество интересных инструментов:Связь, Из-за богатого API существует так много плагинов для Chrome.

Библиотека для узла, реализующего протокол удаленной отладки:

Категории