Как отключить отладчик Chrome

Обновлено: 03.07.2024

Используйте Chrome Remote Debugger для отладки приложения Cast.

Запустите Chrome Remote Debugger для определенного устройства Google Cast следующим образом:

Информацию об отладке приложений Cast на устройстве Android TV см. в разделе Android TV: отладка.

Чтобы отладить приложение Web Receiver на устройствах Google Cast, выполните следующие действия:

Для выполнения отладки необходимо зарегистрировать и приложение, и устройство.

Запустите приложение sender и выполните трансляцию на устройство Google Cast, чтобы загрузить приложение Web Receiver для отладки. Убедитесь, что отправитель и веб-приемник подключены к одной и той же сети. Важно! Отладка не будет работать, если этот шаг пропущен.

Есть два способа подключения к устройству для удаленной отладки:

В браузере Chrome введите в поле адреса следующее, чтобы перейти к инспектору Chrome:

Появится список устройств с поддержкой Cast в этой сети.

Выберите устройство для приложения Web Receiver, которое вы хотите отладить, нажав его ссылку «Проверить».

Должно открыться окно инспектора, позволяющее удаленно отлаживать приложение Web Receiver.

Напрямую к порту 9222 устройства

В браузере Chrome введите следующее в поле адреса, чтобы напрямую перейти к отлаживаемому устройству. Это может быть быстрее, чем Chrome Inspector, если в вашей сети много устройств:

IP-адрес устройства можно узнать, выбрав устройство в приложении Google Home, перейдя в настройки и заглянув в раздел «Информация».

Выберите сеанс, который вы хотите отладить, щелкнув его ссылку Удаленная отладка.

Если Chrome Remote Debugger не заполняется, нажмите значок слева от адресной строки и выберите настройки сайта . Прокрутите настройки до конца и измените параметр Небезопасное содержимое на Разрешить .

В консоли Chrome Remote Debugger включите ведение журнала отладки, введя следующее:

Поддерживается полное манипулирование DOM, а также полный Chrome JavaScript REPL (консоль), что позволит вам возиться с работающим приложением Web Receiver.

Когда ваш веб-приемник сломается (жизненный цикл завершится), отладчик станет неактивным с предупреждающим сообщением вверху. На этом этапе вы больше не можете взаимодействовать с отладчиком. Чтобы возобновить отладку, необходимо перезапустить приложение Web Receiver, а затем перезагрузить инспектор.

Точки останова

Вы можете добавить в код точки останова вручную с помощью отладчика; в вашем коде веб-приемника.

Локальное кэширование

Используйте window.location.reload(true); выполнить принудительную перезагрузку, которая очищает кеш приложения Web Receiver.

Сохранение журналов между сеансами

Вы можете сохранить журналы между сеансами, щелкнув значок шестеренки в отладчике и установив флажок "Сохранить журнал при навигации".

Если не указано иное, содержимое этой страницы предоставляется по лицензии Creative Commons Attribution 4.0, а образцы кода — по лицензии Apache 2.0. Подробнее см. в Правилах сайта Google Developers. Java является зарегистрированным товарным знаком Oracle и/или ее дочерних компаний.

Прежде чем писать более сложный код, давайте поговорим об отладке.

Отладка — это процесс поиска и исправления ошибок в скрипте. Все современные браузеры и большинство других сред поддерживают инструменты отладки — специальный пользовательский интерфейс в инструментах разработчика, который значительно упрощает отладку. Это также позволяет шаг за шагом отслеживать код, чтобы увидеть, что именно происходит.

Здесь мы будем использовать Chrome, потому что в нем достаточно функций, а в большинстве других браузеров используется аналогичный процесс.

Панель «Источники»

Ваша версия Chrome может немного отличаться, но все равно должно быть понятно, что там.

  • Откройте пример страницы в Chrome.
  • Включите инструменты разработчика, нажав F12 (Mac: Cmd + Opt + I).
  • Выберите панель «Источники».

Вот что вы должны увидеть, если делаете это впервые:

Кнопка-переключатель открывает вкладку с файлами.

Давайте нажмем на него и выберем hello.js в дереве. Вот что должно появиться:

Панель "Источники" состоит из трех частей:

  1. На панели File Navigator перечислены HTML, JavaScript, CSS и другие файлы, включая изображения, прикрепленные к странице. Здесь также могут отображаться расширения Chrome.
  2. На панели редактора кода отображается исходный код.
  3. Панель "Отладка JavaScript" предназначена для отладки, мы скоро рассмотрим ее.

Теперь вы можете снова щелкнуть тот же переключатель, чтобы скрыть список ресурсов и освободить место для кода.

Консоль

Если мы нажмем Esc , то внизу откроется консоль. Мы можем вводить там команды и нажимать Enter для выполнения.

После выполнения оператора его результат показан ниже.

Например, здесь 1+2 приводит к 3 , а hello("debugger") ничего не возвращает, поэтому результат не определен:

Точки останова

Давайте посмотрим, что происходит в коде страницы примера. В hello.js щелкните строку номер 4. Да, именно на 4-й цифре, а не на коде.

Поздравляем! Вы установили точку останова. Также нажмите на номер строки 8 .

Это должно выглядеть так (синее место, где вы должны щелкнуть):

точка останова — это точка кода, в которой отладчик автоматически приостанавливает выполнение JavaScript.

Пока код приостановлен, мы можем проверить текущие переменные, выполнить команды в консоли и т. д. Другими словами, мы можем отладить его.

Мы всегда можем найти список точек останова на правой панели. Это полезно, когда у нас много точек останова в разных файлах. Это позволяет нам:

  • Быстро перейдите к точке останова в коде (щелкнув ее на правой панели).
  • Временно отключите точку останова, сняв с нее флажок.
  • Удалите точку останова, щелкнув правой кнопкой мыши и выбрав Удалить.
  • …И так далее.

Щелкните правой кнопкой мыши по номеру строки, чтобы создать условную точку останова. Он срабатывает только тогда, когда данное выражение истинно.

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

Команда отладчика

Мы также можем приостановить код, используя в нем команду отладчика, например:

Это очень удобно, когда мы работаем в редакторе кода и не хотим переключаться в браузер и искать скрипт в инструментах разработчика, чтобы установить точку останова.

Остановитесь и осмотритесь

В нашем примере функция hello() вызывается во время загрузки страницы, поэтому самый простой способ активировать отладчик (после установки точек останова) — перезагрузить страницу. Итак, давайте нажмем F5 (Windows, Linux) или Cmd + R (Mac).

Поскольку точка останова установлена, выполнение приостанавливается на 4-й строке:

Пожалуйста, откройте информационные раскрывающиеся списки справа (помечены стрелками). Они позволяют вам проверить текущее состояние кода:

Watch — показывает текущие значения для любых выражений.

Вы можете нажать плюс + и ввести выражение. Отладчик покажет его значение в любой момент, автоматически пересчитав его в процессе выполнения.

Стек вызовов — показывает цепочку вложенных вызовов.

В настоящий момент отладчик находится внутри вызова hello(), вызываемого скриптом в index.html (там нет функции, поэтому он называется «анонимным»).

Если щелкнуть элемент стека (например, «анонимный»), отладчик перейдет к соответствующему коду, и все его переменные также могут быть проверены.

Область действия — текущие переменные.

Local показывает локальные переменные функции. Вы также можете увидеть их значения, выделенные прямо над источником.

Global содержит глобальные переменные (из любых функций).

Там также есть это ключевое слово, которое мы еще не изучали, но скоро займемся этим.

Отслеживание выполнения

Теперь пришло время отследить сценарий.

Для этого есть кнопки в верхней части правой панели. Давайте привлечем их.

– «Возобновить»: продолжить выполнение, горячая клавиша F8.

Возобновляет выполнение. Если дополнительных точек останова нет, выполнение просто продолжается, и отладчик теряет управление.

Вот что мы можем увидеть после клика по нему:

Выполнение возобновилось, достигло другой точки останова внутри say() и остановилось там. Взгляните на «Стек вызовов» справа. Он увеличился еще на один звонок. Сейчас мы внутри say().

– «Шаг»: выполнить следующую команду, горячая клавиша F9.

Выполнить следующий оператор. Если мы нажмем ее сейчас, появится предупреждение.

Нажимая эту кнопку снова и снова, вы будете последовательно выполнять все операторы скрипта.

– «Перешагнуть»: запустить следующую команду, но не заходить в функцию, горячая клавиша F10 .

Аналогична предыдущей команде «Шаг», но ведет себя по-другому, если следующим оператором является вызов функции. То есть: не встроенная, как alert , а наша собственная функция.

Команда «Шаг» входит в нее и приостанавливает выполнение на первой строке, а «Шаг через» невидимо выполняет вызов вложенной функции, пропуская внутренности функции.

Затем выполнение приостанавливается сразу после этой функции.

Это хорошо, если нам не интересно видеть, что происходит внутри вызова функции.

– «Войти», горячая клавиша F11 .

Похоже на "Шаг", но ведет себя по-другому в случае асинхронных вызовов функций. Если вы только начинаете изучать JavaScript, то можете не обращать внимания на разницу, так как у нас пока нет асинхронных вызовов.

В будущем просто обратите внимание, что команда «Шаг» игнорирует асинхронные действия, такие как setTimeout (запланированный вызов функции), которые выполняются позже. «Шаг внутрь» входит в их код, ожидая их, если это необходимо. Дополнительные сведения см. в руководстве по DevTools.

– «Выйти»: продолжить выполнение до конца текущей функции, горячая клавиша Shift + F11.

Продолжить выполнение и остановить его на самой последней строке текущей функции. Это удобно, когда мы случайно вошли во вложенный вызов с помощью , но он нас не интересует, и мы хотим как можно скорее продолжить его завершение.

– включить/отключить все точки останова.

Эта кнопка не перемещает выполнение. Просто масса вкл/выкл для точек останова.

– включить/отключить автоматическую паузу в случае ошибки.

Если этот параметр включен и инструменты разработчика открыты, ошибка скрипта автоматически приостанавливает выполнение. Затем мы можем проанализировать переменные, чтобы увидеть, что пошло не так. Поэтому, если наш скрипт умирает с ошибкой, мы можем открыть отладчик, включить эту опцию и перезагрузить страницу, чтобы увидеть, где он умирает и каков контекст в этот момент.

Щелкните правой кнопкой мыши строку кода, чтобы открыть контекстное меню с отличной опцией «Продолжить здесь».

Это удобно, когда мы хотим переместиться на несколько шагов вперед к строке, но нам лень устанавливать точку останова.

Ведение журнала

Чтобы вывести что-то на консоль из нашего кода, есть функция console.log.

Например, это выводит значения от 0 до 4 на консоль:

Обычные пользователи не видят этот вывод, он находится в консоли. Чтобы увидеть его, либо откройте панель «Консоль» инструментов разработчика, либо нажмите клавишу ESC, находясь на другой панели: консоль откроется внизу.

Если в нашем коде достаточно журналов, мы можем видеть, что происходит, по записям без отладчика.

Обзор

Как мы видим, есть три основных способа приостановить выполнение скрипта:

  1. Точка останова.
  2. Инструкции отладчика.
  3. Ошибка (если инструменты разработчика открыты и кнопка включена).

Во время паузы мы можем выполнять отладку — проверять переменные и отслеживать код, чтобы увидеть, где выполнение идет не так, как надо.

Информации из этой главы достаточно, чтобы начать отладку, но позже, особенно если вы много работаете с браузером, перейдите туда и просмотрите более продвинутые возможности инструментов разработчика.

О, а еще вы можете нажимать на разные места инструментов разработчика и просто смотреть, что появляется. Вероятно, это самый быстрый способ изучить инструменты разработчика. Не забывайте про правый клик и контекстные меню!

Вы можете устранять проблемы с браузером Chrome, такие как зависшие вкладки и сообщения об ошибках. Используйте журналы отладки, чтобы помочь вам. Эти журналы не создаются автоматически. Сначала необходимо включить ведение журнала.

Включить ведение журнала

Примечание. В инструкциях предполагается, что браузер Chrome установлен по умолчанию.

  1. Закройте все запущенные экземпляры Chrome.
  2. Нажмите правой кнопкой мыши на ярлык Chrome.
  3. Выберите свойства.
  4. В конце строки Target: добавьте флаги командной строки: --enable-logging --v=1
    С этим флагом примера это должно выглядеть так: chrome.exe --enable-logging --v=1
  5. Нажмите "ПрименитьОК".
  6. Запустите Chrome с помощью ярлыка.
  1. Закройте все запущенные экземпляры Chrome.
  2. Запустите терминальное приложение.
  3. В терминале выполните команду:
    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1
  4. Нажмите Enter.
  1. Закройте все запущенные экземпляры Chrome.
  2. Запустите эмулятор терминала.
  3. В терминале запустите Chrome с флагом:
    --enable-logging --v=1
  4. Нажмите Enter.

Журналы отладки хранятся в каталоге данных пользователя как chrome_debug.log. Файл перезаписывается каждый раз при перезапуске Chrome. Итак, если у вас есть проблема с браузером, проверьте журнал перед перезапуском Chrome. Вы можете предотвратить перезапись файла, переместив его на рабочий стол.

Расположение каталога зависит от операционной системы. Дополнительные сведения см. в разделе Каталог данных пользователя.

Читать журналы

Инструменты, такие как Sawbuck для Microsoft® Windows® или Console для Apple® Mac® (расположенные в разделе Приложения > Утилиты > Консоль), могут помочь вам прочитать журналы и найти источник проблемы. Эти инструменты представляют журналы в графическом пользовательском интерфейсе, который можно легко просматривать, фильтровать и искать.

Вы также можете открыть файл в текстовом редакторе и использовать приведенную ниже информацию для выявления проблем.

На что обращать внимание

Первое, что нужно найти в файле chrome_debug.log, — это ключевое слово ERROR. Однако, в зависимости от проблемы, это может быть не основной причиной. Например, если пользователь сообщает о чрезмерно длительном времени запуска, вы можете увидеть повторяющиеся строки в начале журнала отладки или большое количество идентификаторов процессов (PID) или идентификаторов потоков (TID).

Каждая строка файла журнала начинается в формате метки времени со следующими элементами:

Например: [7352:11760:0809/012714:VERBOSE1:resource_loader.cc(630)]

PROCESS_ID: идентификатор процесса, который выполняется в данный момент.

THREAD_ID: процесс внутри PID.

ММДД: текущий месяц и день. В приведенном выше примере это 9 августа.

ВРЕМЯ: Текущее время в 24-часовом формате ЧЧ:ММ:СС, что поможет вам сузить область поиска до времени возникновения проблемы.

LOGGING_LEVEL: текущий уровень ведения журнала. Обычно это VERBOSE1, установленный в командной строке. Вы также можете увидеть вхождения ERROR.

SOURCE_CODE_FILE_NAME(LINE_NUMBER): имя файла исходного кода, вызвавшего регистрируемое событие.

Инструменты разработчика Google Chrome — отличный способ отладки веб-приложений, особенно когда речь идет о JavaScript. Консоль позволяет просматривать любые ошибки, возникающие при выполнении кода на странице, к которой вы пытаетесь получить доступ, а также просматривать исходный код файлов HTML и CSS.

Вы также можете полностью просмотреть скрипты JavaScript. Существует даже возможность более удобного изменения кода, если исходный файл был минимизирован в целях оптимизации.

Однако иногда вам может понадобиться проверить, как выглядит ваш веб-сайт или веб-приложение, если у пользователей отключен JavaScript. Если вы не хотите устанавливать сторонние надстройки для браузера, вы можете отключить их в инструментах разработчика Chrome.

Отключить JavaScript в Chrome вручную на панели настроек

Во-первых, вы можете открыть панель настроек и вручную найти параметр "Отключить JavaScript".

Откройте инструменты разработчика на вкладке «Желаемое»

Чтобы открыть инструменты разработчика, сначала активируйте нужную вкладку. Имейте в виду, что каждая вкладка — это отдельный процесс в Chrome, а это значит, что вам придется открывать инструменты разработчика вручную на каждой вкладке.

  1. Нажав три точки в правой части окна Chrome и выбрав в меню Дополнительные инструменты > Инструменты разработчика.
  1. С помощью сочетания клавиш Ctrl + Shift + I. F12 также работает, если вам нужна более короткая горячая клавиша.

Откройте панель настроек инструментов разработчика

  1. Нажмите на значок шестеренки, как показано на изображении ниже.
  1. Используйте горячую клавишу F1. Сначала убедитесь, что ваш раздел инструментов разработчика активен, щелкнув где-нибудь; в противном случае F1 откроет страницу справки Google Chrome.

Отключите JavaScript, установив флажок «Отключить JavaScript»

Открыв панель настроек, убедитесь, что в левом меню выбрана вкладка "Настройки". В вашем распоряжении длинный список опций, и тот, который нам нужен, находится прямо внизу.

Поэтому обязательно прокручивайте вниз, пока не увидите подменю «Отладчик». После этого все, что вам нужно сделать, это установить флажок «Отключить JavaScript».

Отключить JavaScript в Chrome через меню команд

Второй метод, который можно использовать для отключения JavaScript, – это меню команд — специальный инструмент, который позволяет пользователям искать определенные настройки с помощью панели поиска. Конечно, вы должны знать, что искать в меню команд, поэтому этот метод предназначен для более опытных пользователей.

  1. Откройте инструменты разработчика на нужной вкладке. Этот шаг аналогичен предыдущему методу.
  2. Выбрав Инструменты разработчика, нажмите Ctrl + Shift + P в Windows/Linux или Command + Shift + P в Mac. Откроется командное меню и связанная с ним панель поиска.
  3. Введите код JavaScript, чтобы отобразить соответствующие настройки.
  4. Нажмите в списке параметр «Отключить JavaScript».

После этого соответствующая страница больше не будет интерпретировать скрипты JavaScript. Помните, что это будет работать только на текущей вкладке, и изменение не сохранится, если вы закроете вкладку и снова откроете ее.

Статьи DelftStack написаны такими же фанатами программного обеспечения, как и вы. Если вы также хотите внести свой вклад в DelftStack, написав платные статьи, вы можете посетить страницу «Написать для нас».


сообщить об этом объявлении

Читайте также: