Как открыть консоль в Chrome

Обновлено: 03.07.2024

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

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

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

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

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

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

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

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

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

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

На панели File Navigator перечислены HTML, JavaScript, CSS и другие файлы, включая изображения, прикрепленные к странице. Здесь также могут отображаться расширения Chrome.
На панели редактора кода отображается исходный код.
Панель "Отладка 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, находясь на другой панели: консоль откроется внизу.

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

Обзор

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

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

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

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

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

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

Как открыть консоль в браузере по умолчанию

Поскольку существует всего четыре разных браузера с долей рынка более 5% (Chrome, Safari, Edge и Firefox), мы покажем вам несколько способов открытия консоли в каждом из них. Но имейте в виду, что в каждом браузере элементы и ошибки, как правило, имеют цветовую кодировку и маркировку по-разному.

Как открыть консоль в Google Chrome

В Chrome есть три разных способа открыть встроенную консоль.

Независимо от того, какую сборку Chrome вы используете, вы можете использовать один из этих ярлыков, чтобы открывать и закрывать встроенную консоль:

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

Если вы хотите сфокусироваться на определенном элементе, вы можете просто выделить его с помощью мыши, а затем щелкнуть правой кнопкой мыши > Проверить. Откроются вкладки «Элементы» и «Стили» консоли, что позволит вам сосредоточиться на нужном элементе.

< /p>

Проверка элемента с помощью консоли Google Chrome

Однако вы также можете получить доступ к консоли через меню графического интерфейса Google Chrome. Для этого просто нажмите кнопку действия в правом верхнем углу и выберите Дополнительные инструменты > Инструменты разработчика.

Инструменты разработчика

Если вы хотите работать максимально эффективно, вот список сочетаний клавиш Chrome Console, которые вы можете использовать.

Как открыть консоль в Google Microsoft Edge

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

Этот инструмент регистрирует информацию, связанную с посещаемой веб-страницей. Вы найдете информацию, связанную с Javascript, сетевыми запросами и ошибками безопасности.

Простой способ открыть консольный инструмент в Microsoft Edge — использовать предопределенное сочетание клавиш (клавиша F12).

Но вы также можете сделать это через меню графического интерфейса, нажав кнопку действия (в верхнем левом углу) > Дополнительные инструменты > Инструменты разработчика.

< /p>

Открытие инструментов разработчика в Edge через меню графического интерфейса

Как и в других браузерах, Microsoft Edge также позволяет проверять определенные элементы с помощью встроенной консоли. Для этого просто выберите и щелкните элемент правой кнопкой мыши и выберите "Проверить элемент".

< /p>

Проверка элемента в Microsoft Edge

Вот список с некоторыми полезными сочетаниями клавиш, которые вы можете использовать во встроенной консоли Microsoft Edge:

< /tr>

Как открыть консоль в Mozilla Firefox

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

Это обеспечивает более продуктивный подход для пользователей со вторыми экранами, но может мешать пользователям, которым необходимо работать с одним маленьким экраном. (Если вы находитесь в этом сценарии, вы можете использовать сочетание клавиш Alt + Tab для переключения между Firefox и соответствующей консолью браузера.

Чтобы открыть встроенную консоль браузера в Mozilla Firefox, у вас есть три варианта:

Можно использовать универсальное сочетание клавиш – Ctrl + Shift + J (или Cmd + Shift + J на Mac)
Вы можете открыть его из меню действий — щелкнув меню действий > Веб-разработчик > Консоль браузера.

Или вы можете принудительно открыть консоль браузера, запустив Firefox из командной строки и передав аргумент ‘-jsconsole’:

Примечание: Firefox также включает в себя веб-консоль, которая очень похожа на консоль браузера, но применяется к одной вкладке контента, а не ко всему браузеру.

Как открыть консоль в Google Safari

В отличие от любого другого браузера, который мы рассматривали до сих пор, консоль ошибок в Safari по умолчанию отключена.Из-за этого вам нужно будет сделать дополнительный шаг, чтобы включить его в своем браузере.

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

Включение консоли в Safari

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

< бр />

Показать консоль ошибок в Safari

Имейте в виду, что Safari динамически отображает консоль ошибок. Если при открытии консоли окно маленькое, вы увидите его в совершенно другом окне.

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

< бр />

Открытие консоли ошибок в Safari

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

Как просмотреть журнал консоли в мобильном Chrome?

Чтобы получить к нему доступ, откройте инструменты разработчика Chrome в меню "Дополнительные инструменты". Внутри него вам нужно открыть представление «Удаленные устройства» из меню «Дополнительные инструменты». В представлении будут перечислены все подключенные устройства Android и запущенные экземпляры эмулятора, каждый со своим собственным списком активных веб-представлений.

Как получить доступ к консоли Chrome?

Чтобы открыть консоль разработчика в Google Chrome, откройте меню Chrome в правом верхнем углу окна браузера и выберите Дополнительные инструменты > Инструменты разработчика. Вы также можете использовать Option + ⌘ + J (в macOS) или Shift + CTRL + J (в Windows/Linux).

Как использовать инструменты разработчика Chrome на Android?

Шаг 1. Найдите свое устройство Android

Откройте экран параметров разработчика на Android. …
Выберите «Включить отладку по USB».
На компьютере для разработки откройте Chrome.
Убедитесь, что флажок Обнаружить USB-устройства установлен. …
Подключите устройство Android напрямую к компьютеру для разработки с помощью USB-кабеля.

Как открыть консоль JavaScript в мобильном Chrome?

Включите режим разработчика, выбрав "Настройки" > "О телефоне", а затем семь раз коснувшись номера сборки.
Включите отладку по USB в параметрах разработчика.
На рабочем столе откройте DevTools, щелкните значок "Дополнительно", затем "Дополнительные инструменты" > "Удаленные устройства".
Отметьте параметр «Обнаружение USB-устройств».
Откройте Chrome на телефоне.

Как вы проверяете в Chrome Mobile?

Как открыть консоль отладки в Chrome?

Чтобы открыть окно консоли разработчика в Chrome, используйте сочетание клавиш Ctrl Shift J (в Windows) или Ctrl Option J (в Mac). Кроме того, вы можете использовать меню Chrome в окне браузера, выбрать параметр «Дополнительные инструменты», а затем выбрать «Инструменты разработчика».

Почему журнал консоли не работает в Chrome?

Я зашел в "Настройки" > "Настройки" и нажал [Восстановить настройки по умолчанию и перезагрузить]. Просто запомните, какие у вас были настройки. Я столкнулся с той же проблемой. Решение для меня состояло в том, чтобы отключить Firebug, потому что Firebug перехватывал журналы в фоновом режиме, в результате чего журналы не отображались в консоли Chrome.

Как открыть DevTools в мобильном Chrome?

Откройте экран параметров разработчика на Android. Выберите «Включить отладку по USB».
…
Основной процесс:

Подключите устройство Android.
Выберите свое устройство: «Дополнительные инструменты» > «Проверить устройства» * в инструментах разработки на ПК или Mac.
Авторизируйтесь на своем мобильном телефоне.
Удачной отладки!

Как отлаживать Android?

На устройстве выберите «Настройки» > «О программе». Коснитесь номера сборки семь раз, чтобы открыть «Настройки» > «Параметры разработчика». Затем включите параметр «Отладка по USB».

Как найти инструменты разработчика в Chrome Mobile?

Использование имитации устройства в Chrome DevTools для просмотра на мобильных устройствах

Откройте DevTools, нажав F12.
Нажмите на доступную «Панель инструментов переключения устройств». (…
Выберите устройство, которое хотите имитировать, из списка устройств iOS и Android.
После выбора нужного устройства отображается мобильное представление веб-сайта.

Как отлаживать приложения Android в Chrome?

Отладка на устройствах Android 4+ с помощью Chrome

Включите меню параметров разработчика Android. На устройстве Android 4+ перейдите в меню «Настройки». …
Включите отладку по USB на устройстве Android. …
Включите обнаружение USB в Chrome. …
Подключите Android-устройство к компьютеру. …
Откройте страницу для отладки. …
Проверить страницу.

Как использовать инструмент проверки в Chrome?

Один из самых простых способов проверить конкретный веб-элемент в Chrome — просто щелкнуть правой кнопкой мыши по этому конкретному элементу и выбрать параметр "Проверить". Щелкнув параметр «Проверить» в контекстном меню, вы напрямую откроете инструменты разработчика, включая редактор, консоль, источники и другие инструменты.

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

Содержание

Что такое консоль разработчика?

Консоль разработчика — это встроенная среда разработки с набором инструментов, которые можно использовать для создания, отладки и тестирования приложений прямо в браузере. Он записывает (или регистрирует) информацию, связанную с веб-страницей, такую как сетевые запросы, HTML, CSS, JavaScript, предупреждения и ошибки. Скриншоты с предупреждениями в консоли разработчика могут быть чрезвычайно полезны для службы поддержки Elfsight, если они решают вашу проблему с нашими виджетами.

Как открыть консоль в разных браузерах

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

Как открыть консоль разработчика в Chrome

Чтобы открыть панель разработчика в Google Chrome, нажмите на значок с тремя точками в правом верхнем углу окна браузера, выберите Дополнительные инструменты, где вы найдете Инструменты разработчика в раскрывающемся списке. список.

Еще один вариант — использовать горячую клавишу инструментов разработчика Chrome: F12 (в Windows/Linux) и Option + ⌘ + J (в macOS).

Вы увидите консоль внизу или справа на странице Chrome. Выберите вариант «Консоль» и начните проверять производительность вашего кода.

Далее, узнав, как открыть консоль разработчика в Chrome, вы познакомитесь с процессом открытия инструментов разработчика в разных браузерах.

Вы можете использовать консоль Opera для проверки, редактирования и отладки HTML, CSS и JavaScript. Для работы с ним вам потребуется использовать следующее сочетание клавиш: Ctrl+Shift+C, чтобы открыть Консоль инструментов разработчика, или Ctrl+Shift+I, чтобы сначала открыть инструменты разработчика, а затем выбрать Консоль.

< бр />

Консоль Mozilla можно активировать, нажав Веб-разработчик в правом верхнем меню, а затем выбрав Консоль браузера. Кроме того, вы можете использовать сочетание клавиш инструментов разработчика Firefox, то есть Ctrl+Shift+J.

Чтобы открыть консоль в Safari, необходимо включить меню разработчика. Для этого перейдите в настройки Safari («Меню Safari» > «Настройки») и выберите вкладку «Дополнительно».

Далее вы откроете консоль разработчика в Safari, нажав «Разработка» > «Показать консоль Javascript». Вы также можете воспользоваться сочетанием клавиш Option + ⌘ + C. Вкладка консоли откроется автоматически, вам не нужно будет ее выбирать.

Вы можете открыть консоль браузера Edge, щелкнув Инструменты разработчика F12 в раскрывающемся меню или нажав F12. Вы также можете щелкнуть правой кнопкой мыши любой элемент веб-страницы и выбрать "Проверить элемент".

Консоль разработки IE можно открыть так же, как и консоль Edge. Нажмите «Инструменты разработчика F12» в раскрывающемся меню или просто нажмите клавишу F12. Сделав это, вы успешно получите доступ к консоли Internet Explorer и сможете приступить к ее изучению.

Основные вкладки в инструментах разработчика

Ниже приведен краткий обзор основных вкладок консоли, расположенных в инструментах разработчика. Мы рассмотрели их все на примере веб-браузера Google Chrome.

Вкладка "Элементы"

Панель "Элементы" — отличный инструмент для тех, кто хочет проверить производительность CSS и HTML своей веб-страницы. Вы можете щелкнуть правой кнопкой мыши любой элемент страницы, выбрать «Проверить элемент» и просмотреть атрибуты элемента, выделенные в коде.

Консоль

Вкладка «Консоль» в инструментах разработчика Chrome служит для отображения работы скриптов на веб-странице. Это интерпретатор командных строк, который вы можете использовать для запуска механизма сценариев и ввода команд для выполнения сценариев. Если наша служба поддержки попросит вас сделать снимок экрана консоли, им понадобится изображение, сделанное на вкладке консоли.

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

Вы можете использовать вкладку "Источники" в Chrome DevTools для редактирования JavaScript и CSS, просмотра файлов, создания фрагментов JavaScript и их дальнейшего использования. Кроме того, эта вкладка может помочь в отладке кода JavaScript.

Вкладка "Сеть"

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

Вкладка "Эффективность"

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

Вкладка "Память"

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

Панель приложений

С помощью вкладки "Приложение" вы можете отлаживать прогрессивные веб-приложения; проверять и управлять хранилищем, базами данных и кэшем; проверять и удалять файлы cookie; и проверьте Ресурсы.

Безопасность

Вкладка "Маяк"

Lighthouse – это автоматизированный инструмент для улучшения качества веб-приложений. Он напрямую интегрирован в Chrome DevTools. Он предлагает аудиты производительности, специальные возможности, прогрессивные веб-приложения, SEO и многое другое.

Типичные консольные предупреждения и ошибки в работе виджетов Elfsight

Иногда в работе виджетов Elsfight что-то идет не так. Не пугайтесь, если увидите в консоли какие-либо предупреждения или ошибки красного цвета. Если вы знаете причину, по которой они произошли, вы, вероятно, сможете все исправить самостоятельно. Ниже вы найдете список распространенных сбоев, которые вы можете увидеть в консоли.

Это две ошибки, касающиеся всех наших виджетов:

ВИДЖЕТ НЕ НАЙДЕН — возможно, вы случайно удалили виджет в аккаунте. Проверьте это.

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

Что касается Карт Google, ошибки обычно возникают, если что-то не так с ключом API.

ExpiredKeyMapError: срок действия ключа API истек или он не распознан. В большинстве случаев вы должны создать новый. Если вы получаете эту ошибку сразу после создания нового ключа API, вам нужно либо подождать от 1 до 8 минут, либо отдельно включить Places API.

RefererNotAllowedMapError: URL-адрес Elfsight, загружающий Maps JavaScript API, не может быть реферером. Вам следует проверить настройки реферера вашего ключа API в консоли Google Cloud Platform. При использовании нашего виджета вам необходимо добавить нас в качестве реферера. Вот статья, как это сделать правильно.

ClientBillingNotEnabledMapError: для использования виджета Google Maps вам потребуется платежный аккаунт.Этот сбой произошел из-за того, что вы не активировали биллинг в своем проекте. Решение состоит в том, чтобы включить выставление счетов в Google Cloud Project, связанном с этим идентификатором клиента. Вы можете сделать это здесь.

BillingNotEnabledMapError: при использовании Карт Google вам необходимо включить выставление счетов.

Если вы используете Elfsight YouTube Video Gallery, вам не придется беспокоиться о большинстве проблем, перечисленных ниже. Однако есть две общие проблемы, которые могут возникнуть и в нашем виджете.

quotaExceeded — YouTube использует квоты для людей, чтобы получить доступ к своему контенту и загрузить его на веб-сайты или в приложения. После превышения квоты YouTube вы заметите, что ваша Галерея YouTube случайно перестает работать или работает медленно на веб-сайте. Решение может быть следующим:

Получите новый ключ API, если вы сами загружаете контент YouTube;
Свяжитесь с нашей службой поддержки по адресу [email protected], если вы используете Elfsight YouTube Gallery, что намного проще.

videoNotFound — это предупреждение может появиться, если URL-адрес, который вы вставили для ссылки на видео YouTube, неверен. Иногда пользователи вставляют ссылку на страницу с видео, но это не фактическое местоположение видео, что приводит к ошибке. Проверьте все и вставьте ссылку на исходное видео.

Если Facebook Feed или Instagram перестали работать, вы можете проверить, что происходит, в консоли разработчика. Поскольку оба этих популярных приложения работают на основе Facebook API, следующие объяснения ошибок могут работать одинаково для каждого из двух.

err_ssl_protocol_error при использовании виджета Facebook или Instagram Feed на вашем веб-сайте может быть вызван различными причинами. Чтобы решить эту проблему, вы можете попробовать установить правильную дату и время, очистить данные браузера Chrome или очистить состояние SSL. Кроме того, если Facebook Graph API выдает ошибки, вы можете использовать fbtrace_id, чтобы узнать больше о них. Однако, если ничего из вышеперечисленного не помогло, вы всегда можете обратиться в нашу службу поддержки.

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

Запрашиваемая вами страница не может быть отображена прямо сейчас. Это может означать, что ваше приложение Facebook находится в режиме разработки. Вы не получите это сообщение об ошибке, если являетесь пользователем Elfsight Facebook Feed, однако, если вы видите это сообщение, обратитесь в нашу службу поддержки.

Исключение OAuthException в Instagram, в частности, означает, что статус входа или токен доступа были отозваны, просрочены или недействительны по какой-либо причине. В этом случае обратитесь в нашу службу поддержки, разработчики Elfsight получат новый токен доступа или просмотрят субкод, если он есть.

Наиболее распространенные ошибки консоли

Как опытный веб-разработчик, вы, вероятно, видели эти ошибки чаще, чем хотели бы. Их можно увидеть в Chrome, когда вы читаете свойство или вызываете метод неопределенного объекта. Вы можете протестировать и отловить эти конкретные ошибки в консоли разработчика Chrome и Safari.

Если вы не профессиональный программист, вы можете пропустить это правило.

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

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

Вот как вы должны устранять наиболее распространенные ошибки консоли JavaScript. Мы будем выполнять этот список по мере того, как мы и наши клиенты сталкиваемся с любыми другими проблемами.

Заключение

Консоль разработчика — отличный инструмент, который позволяет каждому программисту получить доступ к огромному количеству данных о своем веб-сайте. Его не очень сложно открыть и начать использовать этот инструмент, однако это займет некоторое время и усилия, просто наберитесь терпения.

С какими ошибками вы сталкивались? Поделитесь своим опытом в комментариях ниже, мы будем рады обсудить это с вами!

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

Запуск консоли в режиме фокуса	Ctrl + Shift + J
Переключение на консоль	td>	Ctrl + 2
Показать или скрыть консоль на другой вкладке DevTools	Ctrl + ` (обратная галочка)
Выполнить (однострочная команда)	Ввести
Разрыв строки без выполнения (многострочная команда)	Shift + Enter или Ctrl + Enter
Очистить консоль от всех сообщений	Ctrl + L
Фильтровать журналы (установить фокус на поле поиска)	Ctrl + F
Принять предложение автозаполнения (когда он находится в фокусе)< /td>	Ввод или Tab
Предыдущее/следующее предложение автодополнения	Клавиша со стрелкой вверх/Клавиша со стрелкой вниз