- суг команда
- Автор: Джонни
1. Происхождение технологии отладки
Для каждого разработчика ошибки больше не являются обычным явлением, а отладка — обычным явлением. Однако, чтобы проследить происхождение, мы должны начать с 1950-х годов.
9 сентября 1947 года, когда Гарвардский университет тестировал компьютер Mark II Aiken Repeater, моль прилипла к реле, из-за чего компьютер перестал работать должным образом. После того, как оператор удалил мотылька, компьютер возобновил работу. Нормальная работа возобновилась. Поэтому они записали мотылька в журнал, который они записали в то время, и написали это предложение в конце журнала: Первый реальный случай обнаружения ошибки. Это была первая настоящая ошибка, которую они нашли, и первая ошибка в истории человеческого компьютерного программного обеспечения. Они также придумали слово «отладка» машины, что привело к развитию технологии компьютерной отладки.
2. Инструменты разработчика Chrome
Что касается веб-интерфейса, мы каждый день используем инструменты разработки и отладки для просмотра структуры dom, точек останова js, а также для просмотра и анализа запросов на вход.Наиболее знакомыми инструментами разработки и отладки должны быть Chrome Devtools и Firefox FireBug.
Chrome DevTools на самом деле представляет собой веб-приложение, написанное на HTML, JavaScript и CSS, которое интегрировано в браузер. Он основан на протоколе удаленной отладки и связан с архитектурой браузера следующим образом:
На рисунке показано:
- Протокол удаленной отладки основан на WebSocket и использует WebSocket для установления быстрого канала данных, соединяющего DevTools и ядро браузера.
- Браузер имеет несколько вкладок и предоставляет URI конечной точки веб-сокета отдельно для каждой вкладки.
- Каждый экземпляр DevTool может просматривать только одну вкладку, то есть он может поддерживать связь только с одной вкладкой.
На самом деле Chrome Developer Tools можно не только открывать прямо на текущей странице браузера, он действует как клиент (с открытым исходным кодом), а также может использоваться для отладки любого браузера, поддерживающего протокол удаленной отладки.
Используйте документацию:Developers.Google.com/Web/tools/From…
репозиторий гитхаб:GitHub.com/chrome Разработчики…
3. Протокол удаленной отладки
Протокол удаленной отладки Webkit был представлен в 2012 году, и в настоящее время все браузеры с ядром Webkit поддерживают эту функцию. Протокол удаленной отладки основан на WebSocket и использует WebSocket для установления быстрого канала передачи данных между клиентом (например, DevTools) и ядром браузера.Инструменты разработчика Chrome — это просто случай применения протокола удаленной отладки Webkit.
- Режим связи и структура сообщения: Для всех операций каждой страницы протокол удаленной отладки делит ее на разные домены команд, такие как Браузер, Дом, Отладчик и Сеть и т. д. Каждый домен определяет разные команды и события. В процессе разработки и отладки ядро браузера и удаленный клиент обмениваются данными, отправляя сообщения через WebSocket.Сообщения в основном делятся на два формата: один с идентификатором сообщения, а другой без идентификатора сообщения, соответственно представляющие два типа сообщений. Режим:
- запрос/ответ: как и при асинхронном вызове, соответствующий возвращаемый результат получается с помощью запрошенной информации. Такое сообщение должно иметь идентификатор сообщения, в противном случае обе стороны не могут правильно оценить соответствие статуса запроса и возврата.
- уведомление: в отличие от первого, этот режим используется одной стороной для одностороннего уведомления другой стороны определенной информации. Аналогично понятию «событие».
- Верхняя инкапсуляция Chrome: Чтобы облегчить разработку расширений Chrome, API расширения отладчика Chrome предоставляет API более высокого уровня — API отладчика Chrome. Этот API скрывает идентификатор запроса и обрабатывает привязку запроса к его ответу, что позволяет sendCommand обрабатывать результат в вызове функции обратного вызова. Каждая команда состоит из двух частей: запроса и ответа.В части запроса указывается операция, которая должна быть выполнена, и параметры, которые требуются для операции, а часть ответа указывает на состояние операции, успех или неудачу.
Возьмите домен отладчика в качестве примера,
- Структура команды следующая:
- Структура мероприятия следующая:
Документ соглашения:V-tools.GitHub.IO/Dev-tools для chrome - пустышка...
API отладчика:developer.chrome.com/extensions/…
Мы можем использовать devtools для просмотра фактических данных о связи между расширением Devtools и ядром браузера.Шаги следующие:
1. Откройте экспериментальный режим инструментов разработчика:
- В браузере введите chrome://flags
- Найти эксперименты с инструментами разработчика
- Статус меняется на "включено"
- перезапустить браузер
2. Откройте вкладку мониторинга протокола
- Нажмите инструмент DevTools на значок меню в правом верхнем углу, введите «Настройки», выберите вкладку «Эксперименты» слева и подключите «Монитор протокола».
- Закройте devtools и снова откройте его, щелкните значок меню в правом верхнем углу инструмента devtools, затем введите «Дополнительные инструменты» и выберите «Монитор протокола».
Тогда мы можем увидеть:
В-четвертых, режим удаленной отладки Chrome:
Из вышеизложенного мы уже знаем, как Devtools взаимодействует с ядром браузера на основе протокола удаленной отладки.Однако, мало того, Chrome также может включать режим удаленной отладки, позволяя внешним клиентам (поддерживающим протокол удаленной отладки) отлаживать его.
- Сторона сервера протокола:
Сначала откройте Chrome в режиме удаленной отладки:
./chrome --remote-debugging-port=9222
После этого отладочные данные будут перенаправлены на локальный порт 9222, и браузер может ввести localhost:9222/json, чтобы увидеть:
Среди них мы можем видеть URL-адрес веб-сокета, соответствующий каждой вкладке, через который можно установить соединение для связи с ядром системы.
- Клиент протокола:
Мы можем использовать встроенные инструменты Chrome, чтобы установить соединение с ним для отладки.Шаги следующие:
1) Откройте встроенный клиент Chrome и введите в браузере:
http://localhost:9222
Вы можете увидеть следующий интерфейс:
2) Или в интерфейсе chrome://inspect мы можем обнаружить, что локальный браузер также можно использовать в качестве удаленного устройства для отладки.
3) Мы также можем использовать внешний инструмент отладки, такой как программа узла, подключаемый модуль vscode и т. д., для достижения различных богатых функций разработки и отладки, получая данные json каждой страницы из порта 9222, а затем подключаясь к веб-сокету. для связи.
5. Технология удаленной отладки мобильного терминала:
Из вышесказанного режим удаленной отладки таких браузеров, как chrome, кажется немного безвкусным, у меня уже есть инструменты Devtools, так зачем открывать режим удаленной отладки и использовать другие инструменты для отладки. Не волнуйтесь, режим удаленной отладки действительно играет роль в отладке мобильного устройства. Мобильное устройство имеет рабочую среду, но нет подходящей среды разработки и отладки.С помощью режима удаленной отладки webkit мы можем легко просматривать и отлаживать мобильное устройство.
Существует множество технологий удаленной отладки мобильных веб-приложений, таких как weinre, которая встраивает скрипты в код, и мы объясним ее на основе протокола удаленной отладки webkit. Из вышеизложенного мы уже знаем, что данные json будут отправлены на порт отладки (localhost: 9222) после включения режима удаленной отладки на мобильном Chrome.Из соображений безопасности Chrome ограничен локальным локальным хостом и не может быть отправлены на указанный ip. В это время необходимо каким-то образом связать данные порта мобильного терминала 9222 с терминалом ПК, а затем терминал ПК может выполнять отладку через локальный порт терминала ПК и страницу мобильного терминала.
1. Метод привязки порта:
- Проводной (USB-кабель): мобильный браузер с webkit в качестве ядра, после включения функции удаленной отладки браузера подключитесь к ПК через usb, а затем привяжите порт через adb:
adb forward tcp:9222 localabstract:chrome_devtools_remote
- Беспроводная связь (сеть): перенаправление портов через ssh, этот метод подходит для мобильного терминала, поддерживающего вход в систему через ssh-подключение.
#在本地主机A1登陆远程云主机B1，并进行本地端口转发。2000端口绑定本地所有网卡 ssh -L 2000:localhost:3000 root@192.168.*.*
6. Отладить серверный скрипт (нодовую программу):
В 2016 году Node принял «инструменты разработчика» браузера Chrome в качестве официального инструмента отладки, так что сценарии Node также можно отлаживать с помощью графического интерфейса, что значительно облегчает разработчиков. Способ включения отладки следующий:
node --inspect --debug-brk index.js
Затем вы можете увидеть запись отладки app.js через chrome://inspect.После открытия появляется настроенная версия Devtools.Вкладки всего четыре, а части, не связанные с отладкой скриптов сервера, удалены.
Можно обнаружить, что принцип отладки скрипта узла аналогичен принципу отладки скрипта chrome js.Его встроенный V8 поддерживает протокол удаленной отладки.После включения отладки он действует как серверная сторона, и клиент devtools общается с ним через соединение через веб-сокет.
6. Резюме
До сих пор мы представили принципы связи, лежащие в основе локальной и удаленной отладки. Будучи мощным универсальным протоколом, протокол удаленной отладки поддерживает связь между различными серверами или клиентами.
Отладка браузера фактически заканчивается в движке: движке рендеринга и движке JavaScipt. Что касается модификации CSS, точек останова JS и т. д., как реализовать это в механизме рендеринга, переключения контекста, трассировки стека вызовов функций и т. д., есть еще много вещей, которые стоит изучить.