Как посмотреть ошибки в консоли браузера: краткий мануал

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

Алгоритм запуска консоли (инспектора) одинаков во всех браузерах. Есть два способа: первый — запуск с помощью специальной клавиши на клавиатуре, второй — через функцию «Просмотр кода страницы / элемента».

Например, если вы используете клавишу F12 в Chrome, откроется дополнительное окно с консолью.

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

Второй способ — просмотреть код текущей страницы: для этого необходимо щелкнуть правой кнопкой мыши любой элемент сайта и в появившемся меню выбрать пункт «Просмотреть код». Обратите внимание, что это имя параметра в Google Chrome; в других браузерах он может быть другим. Например, в Яндексе функция называется «Element Explorer».

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

В результате перед нами снова появится окно, в котором будет открыта основная вкладка с кодом страницы. Мы поговорим об этом подробнее, а пока давайте посмотрим, как запускается консоль в браузере Safari на устройствах Mac.

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

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

Теперь вы можете запустить консольное окно: просто используйте комбинацию клавиш «Cmd + Opt + C».

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

Используем DevTools на практике

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

Давайте посмотрим на некоторые вкладки DevTools. И первое — это режим мобильной эмуляции. Несмотря на настольный браузер, ваша страница будет выглядеть так, как если бы вы посетили ее с мобильного устройства. Вторая вкладка — Элементы. Продемонстрируйте структуру HTML-страницы. С его помощью браузер видит веб-страницу после всего, что с ней сделал Javascript. И Сеть — это сетевые запросы страницы (список веб-ресурсов, загружаемых страницей для отображения отображаемого контента).

Панель «Элементы» содержит дерево элементов. Здесь вы можете открывать теги, просматривать их содержимое, при этом текущий выбранный тег будет выделен в документе. Вы также можете просматривать различные атрибуты, такие как «Класс» или «Размер».

Загрузите фото в Instagram со своего компьютера

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

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

Скачать видео из Instagram Stories

С помощью DevTools задача загрузки видео из Instagram Stories теряет свою святость. Все до безобразия элементарно. Перейдите на вкладку «Сеть». Для удобства выберите Медиа-фильтр. Он покажет аудио и видео файлы, запрошенные страницей. А потом запускаем понравившееся видеоизображение с прямой ссылкой на место его хранения. Что ж, тогда давайте откроем его в новой вкладке и выберем место для его нового хранилища (например, на вашем диске).

Скачивание аудио с музыкальных сайтов

Вы также можете прикоснуться к своим музыкальным файлам с помощью DevTools. Механика аналогична описанной выше.

Скачать фото из Instagram

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

Второй способ — через вкладку «Сеть». Перейдите на вкладку, установите фильтр Img и обновите страницу. Кстати, изображения можно сортировать по размеру, изображения содержимого обычно самые большие на странице. Аналогично щелкните файл правой кнопкой мыши и выберите «Сохранить как» в наиболее удобном для вас месте.

Удаление блоков контента

Бывает, что вы хотите посмотреть какой-то контент, но сайт не позволяет сделать это без регистрации. И снова привет DevTools. Обычно содержимое покрывается твердым или прозрачным слоем. Откройте Инструменты разработчика, определите в своем коде блочный элемент, охватывающий необходимый фрагмент контента, и нажмите «Удалить элемент.

Разблокировка модулей ввода

Часто всевозможные государственные учреждения, разрабатывая свои различные электронные формы для заполнения Javascript, препятствуют нашему любимому Copy / Paste (вставка и выделение текста). В этом случае вам снова придется прибегнуть к использованию DevTools.В инструментах разработки перейдите в Настройки. Прокрутите вниз до поля «Отладчик» и установите флажок «Отключить JavaScript». Теперь вы можете ввести текст.

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

Веб-страницы для печати

По общему признанию, все меньше и меньше сайтов требуют использования костылей, описанных ниже, но они все же происходят периодически. Однако мы выбираем нужный нам сайт, удаляем ненужные элементы и части кода (рекламу, контакты, ссылки и т.д.) во вкладке Elements через инструмент разработчика с помощью Delete elements. Так что давайте все это напечатаем и радуемся жизни.

Узнайте сохраненный пароль

Как узнать сохраненный пароль, если браузер автоматически заменил его в приватном режиме? Вы можете ввести пароли через настройки и найти все концы. Но мы не ищем легкого пути. Свяжитесь с DevTools. Выберите поле с паролем правой кнопкой, затем просмотрите код, после чего появится довольно типичная картинка.

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

Скачивание видео из ВКонтакте

Приведенный ниже рецепт немного сложнее, чем был в случае с Instagram Stories ранее, но тоже вполне земной. Перейдем к мобильной версии ресурса (на самом деле они две разные, чем десктопная версия сайта). Откройте инструмент разработчика, перейдите на вкладку «Сеть», выберите «Еще» в фильтрах и включите воспроизведение видео.

Затем в списке появится ссылка на воспроизводимое видео, затем следуйте миниатюре: щелкните правой кнопкой мыши, откройте новую вкладку и сохраните ее в своем любимом месте на вашем компьютере.

Какие вкладки есть в консоли и за что они отвечают

Консоли каждого браузера содержат почти одинаковые вкладки с одинаковыми функциями, поэтому давайте рассмотрим каждый из блоков на примере веб-браузера Google Chrome.

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

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

Как открыть мобильную версию сайта Chrome

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

Как изменить разрешение окна браузера Chrome

И еще один вариант, который может быть полезен, — изменить положение панели консоли. Чтобы использовать его, вам нужно нажать кнопку с многоточием вверху справа и изменить ориентацию в строке «Dock Side». Доступные позиции: справа, слева, снизу, в отдельном окне.

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

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

Elements

Вкладка

Основной компонент для верстальщиков. Включает всю информацию об открытой HTML-странице. Здесь мы можем не только увидеть текущие теги и атрибуты, но и изменить их: в этом случае автоматически изменится дизайн на странице. Если обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и других элементов: для этого в правой части раздела находятся вкладки «Стили», «Расчет», «Макет», «Слушатели событий», «Точки останова DOM», «Свойства» и «Доступность.

Console

Плата консоли в хроме

Еще одна важная вкладка для верстальщиков — Console. В нем мы можем найти информацию о текущих ошибках на сайте, увидеть исполняемый код JavaScript, если он отображается в консоли с помощью метода console.log, и многое другое.

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

Как очистить консоль в Chrome

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

Sources

Вкладка

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

Сама плата, как видите, разделена на 3 части. Первый содержит дерево иерархии файлов, связанных с сайтом. Второй — просмотреть содержимое этих файлов и отладить их. Для его запуска нужно использовать последнее окно.

Network

Вкладка сети в Chrome

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

Performance

Вкладка

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

Memory

Карта памяти Chrome

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

Application

Вкладка Chrome приложения

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

Основная особенность этой опции — очистка файлов cookie. Если вам нужно выполнить эту процедуру, просто откройте раздел «Cookies» слева и щелкните значок отказа справа. Файлы cookie для выбранной ссылки будут удалены.

Security

Вкладка безопасности Chrome

В разделе «Безопасность» отображается информация о защищенном протоколе. В противном случае будет сообщено, что эта страница небезопасна. Также вы можете получить дополнительную информацию о:

  • проверка сертификата — если сайт подтвердил свою TLS-идентичность;
  • tls-соединения — если на сайте используются современные защищенные протоколы;
  • безопасность вторичных источников.

Lighthouse

Хромированная фара

Последний раздел — это инструмент управления с открытым исходным кодом. Это позволяет разработчикам улучшить производительность и доступность своих веб-сайтов.

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

В Chrome

Чтобы изменить расположение инструментов разработчика в Chrome, нажмите на три точки вверху:

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

Интерфейс Firefox

Чтобы переместить инструменты разработчика в Firefox, нажмите на три точки вверху:

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

Sources и Network

Отличный способ отслеживать все входящие и исходящие запросы и результат их выполнения. На вкладке «Источники» мы можем увидеть все загруженные дополнительные файлы, а именно изображения и скрипты. Самый простой способ получить желаемое изображение, соблюсти его размер, сохранить на своем компьютере. Вы также можете открывать там файлы JavaScript. Щелкнув правой кнопкой мыши по желаемому файлу, можно выбрать пункт «Открыть ссылку в новой вкладке», а с новой страницы сохранить файл, нажав комбинацию ctrl + s .

Сеть — более сложная функция, вот список всех запросов и связанных ответов от сервера. Обратите внимание, что есть еще фильтр — все, кроме Keep Log, это очень важно!

Мониторинг сети в панели разработчика Google Chrome

Ваш вид этого раздела может немного отличаться, может быть включен обзор (соответствующий значок с графиками), который я обычно отключаю. В левом столбце — запросы, в правом — ответы. Опять же, ответы разделены на подразделы. Первый запрос всегда идет к исполняемому файлу (указан URL-адрес), если вы закроете правый столбец, вы можете увидеть детали запроса, то есть: метод запроса, как долго он был выполнен (что укажет, как Хорошо, что сеть и сайт работают нормально, размер файла можно снова открыть, щелкнув еще раз на интересующий файл для анализа.

Во вкладке заголовка у нас есть тип нашего запроса (файл, метод, ip и статус ответа), заголовок ответа и заголовок запроса. Заголовок запроса — это то, что ваш браузер отправляет на сервер, он не только запрашивает страницу, но и отправляет существующие файлы cookie, предпочтительный язык страницы, если файлы gzip сжаты, полное имя и версию браузера, а также страница, с которой вы отправляете запрос… Хочу отметить, что пока вы изучаете CURL в PHP в будущем, вы также можете отправлять все эти данные! Заголовки ответа находятся в разделе «Ответ». Помните теорию работы PHP, отправленные данные делятся на 2 блока, сначала отправляются заголовки, затем контент, когда контент отправляется, заголовки не могут быть отправлены. В заголовках сервер отправляет файлы cookie, если их нужно изменить, кодировку страницы, версию сервера (что является уязвимостью и должно быть скрыто, как это происходит на веб-сайте school-php.com, ya ru, google.ru и т д.), дату файла (чтобы не загружать его повторно, если с момента последнего обращения к нему браузера не было изменений).

Хочу подробнее остановиться на дате обновления файла, бывает, что файл хоть и был изменен, но браузер еще не проверяет его версию, а только загружает старую версию, сохраненную в кеше. Чтобы очистить кеш браузера клиента, просто измените имя файла из scripts.js? V = 1 в scripts.js? V = 2. Как видите, мы только что изменили данные, передаваемые GET, и почти у всех будет загружен новый скрипт (не на 100%, но достаточно приемлемый для большинства сайтов). Но после смены запятой в скрипте при разработке не так удобно запускать и редактировать html с подключением того же js файла, тут на помощь разработчику приходит еще один важный чекбокс «Отключить кеш», если он включен , то все файлы не будут кэшироваться и каждый раз будут загружаться новые! Мы разрабатываем сайт с этим флажком и при загрузке новой версии скриптов все пользователи меняют только версию? V = 3.

Console

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

Без него жизнь не сладка ни одному программисту, в этом блоке записываются абсолютно все ПРЕДУПРЕЖДЕНИЯ и ОШИБКИ. Убедитесь, что отображаются все ошибки, выполнив следующие проверки: щелкните значок фильтра в этом разделе и выберите вкладку «все», т.е просмотрите все ошибки.
Журналы сохраняются на этой странице с момента открытия консоли, а не с загрузки страницы. Поэтому, если вы загрузите страницу, а затем откроете консоль, вы не увидите никаких ошибок, хотя на странице есть ошибки! Поэтому давайте сначала откроем консоль, а затем перезагрузим эту страницу! Теперь справа от ошибки будет указан файл, в котором произошла ошибка, а также сама строка. Хочу отметить, что ошибки различных плагинов и расширений, установленных для Google Chrome, в том числе вирусов (они также регистрируются как плагин или расширение), тоже попадают в консоль).

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

Панель элементов

Панель инструментов — это наиболее часто используемый инструмент. Это позволяет вам управлять DOM, редактируя веб-страницу.

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

Sources

Здесь отображается HTML-код веб-страницы. В Chrome это выглядит так:

В Firefox:

Styles

Здесь отображаются все настройки CSS для элементов HTML. В Chrome это выглядит так:

В Firefox:

Вы можете изменить стили выбранного элемента, написав новый код в любом из селекторов CSS.

Я добавил новый размер шрифта для выбранного абзаца.


Как правильно перенаправить с HTTP на HTTPS?

Подсветка и выбор элемента

Чтобы выбрать конкретный элемент, щелкните значок выбора элемента или используйте сочетание клавиш Ctrl + Shift + C.

В Chrome это выглядит так:

В Firefox:

Когда селектор активен, элементы, на которые вы наводите курсор, будут выделены. Если щелкнуть элемент, он будет выбран в инспекторе.

Изменение классов и атрибутов

В Chrome щелчок правой кнопкой мыши по элементу вызовет опцию «Изменить как HTML» или «Добавить атрибут.

Если вы выбрали Добавить атрибут, вы можете ввести требуемый атрибут.

Если вы выберете «Изменить атрибут», элемент будет преобразован в текстовую область для редактирования.

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

В Firefox это работает точно так же.

Редактирование содержимого HTML-элементов

Для этого просто дважды щелкните текст в элементе. Затем откроется поле ввода с содержимым элемента.

Затем вам нужно установить новые значения и нажать Enter.

Удаление и скрытие элементов DOM

В Chrome щелкните правой кнопкой мыши элемент, который хотите скрыть или удалить. Затем будут отображены соответствующие параметры.

После этого элемент будет удален из DOM, и веб-страница будет отображаться без него.

В Firefox аналогичная опция называется «Удалить узел». И нет возможности скрыть элемент.

Просмотр веб-страницы на экранах различных размеров

В Chrome и Firefox есть инструменты для отображения веб-страницы на экранах разных размеров.

Размер экрана Chrome

Чтобы включить отзывчивый просмотр в Chrome, щелкните панель инструментов «Переключить устройство» в левой части верхней панели.

Размер экрана Firefox

Чтобы активировать отзывчивый просмотр в Firefox, нажмите «Режим адаптивного дизайна» в правой части верхней панели.

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

Доступные вкладки и их использование

  • Вкладка «Элементы». Показывает окончательный HTML-код страницы, отличный от оригинала. Любые HTML-элементы, созданные или измененные JavaScript при загрузке страницы, будут отражены в окончательном HTML-коде. Исходный код останется без изменений.

    ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

    • Найдите измененные теги. На этой вкладке вы можете найти теги Floodlight и теги мест размещения, реализованные на странице, и проверить, изменились ли они. Мы рекомендуем выполнять поиск по запросу double, поскольку URL-адреса в тегах Менеджера кампаний 360 содержат строку doubleclick (имя домена). Найдя тег, сравните его с тегом, экспортированным из пользовательского интерфейса в разделе «Управление трафиком».
    • Устранение проблем с CSS. На вкладке «Элементы» справа отображаются различные атрибуты CSS, которые определяют, как и где будет отображаться выбранный элемент HTML.
    • В разделе «Расчетный стиль» перечислены все правила CSS, которые применяются к выбранному элементу (независимо от того, установлены ли они в CSS администратором сайта или основаны на настройках браузера по умолчанию для этого типа элемента HTML).
    • В разделе «Стили» отображаются только правила CSS, установленные администратором сайта. Каждый подраздел соответствует разделу кода страницы, в котором было написано правило CSS для воздействия на выбранный элемент HTML. Если вы обнаружите правило, которое вызывает сбой страницы, вы можете щелкнуть ссылку в правом верхнем углу соответствующего подраздела, чтобы загрузить строку или документ, содержащий правило.

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

  • Вкладка Ресурсы позволяет вам проверить таблицу различных ресурсов, которые были загружены вместе с рассматриваемой страницей. К ним относятся изображения, HTML-документы, файлы JavaScript и многое другое. Эта вкладка полезна для устранения неполадок в Менеджере кампаний 360, поскольку она позволяет искать все ресурсы на странице, а не только саму страницу.

    ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

    Искать теги, не зарегистрированные на странице. На вкладке «Элементы» вы можете увидеть окончательный HTML-код страницы, но этого может быть недостаточно для написания кода на странице, чтобы теги размещения работали. Поэтому самый простой и надежный способ найти реализованный тег места размещения — это выполнить поиск на вкладке «Ресурсы.

  • Вкладка «Сеть» представляет собой встроенный анализатор прокси, который позволяет отслеживать HTTP-трафик страницы во время и после загрузки страницы.

    ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

    • Убедитесь, что теги Floodlight и теги мест размещения активированы. Анализатор прокси — незаменимый инструмент для проверки и устранения неполадок. Обычно, если тег не срабатывает, он не может отслеживать или возвращать креатив, как ожидалось. Точно так же, если вызов отправлен правильно (без нарушений синтаксиса, в правильном формате), он будет принят нашим сервером независимо от того, как реализован тег (хотя это может учитывать характер содержимого страницы). Используйте вкладку «Сеть», чтобы определить, работает ли тег места размещения или тег Floodlight. Если тег срабатывает, убедитесь, что синтаксис вызова соответствует URL-адресу, содержащемуся в неизмененной версии тега.
    • Контроль времени ожидания. Помимо отслеживания звонка, на вкладке «Сеть» вы можете увидеть, сколько времени требуется, чтобы получить ответ на конкретный запрос. Это полезно для контроля задержки, особенно для динамических тегов Floodlight. Если Floodlight вызывает слишком долгую задержку вашей страницы, вызовы отслеживания по выровненным пикселям могут помочь выявить причину проблемы. Маловероятно, что эта задержка вызвана самим тегом Floodlight. Скорее всего, это связано с одним из выровненных пикселей в теге.
  • Вкладка «Сценарий» предназначена для отладки кода JavaScript. Это незаменимый инструмент для веб-разработчиков, но он не используется для тестирования или устранения неполадок Campaign Manager 360.

  • На вкладке «Временная шкала» отображается история HTTP-трафика и загрузки памяти. Как и вкладка «Сеть», она помогает определить причины задержки. Это единственное приложение, связанное с Менеджером кампаний 360.

  • Вкладка Профили — это инструмент, который веб-разработчики могут использовать для оптимизации использования ЦП в веб-приложениях. Эта вкладка не используется вместе с Менеджером кампаний 360.

  • Вкладка «Аудит» позволяет анализировать страницы по мере их загрузки и предлагать варианты оптимизации, чтобы сократить время загрузки и улучшить воспринимаемую (и фактическую) отзывчивость. Эта вкладка не используется вместе с Менеджером кампаний 360.

  • Вкладка Консоль автоматически обнаруживает ошибки в коде страницы. После использования вкладки «Сеть» вы определили, что тег не срабатывает, вкладка «Консоль» поможет вам понять, почему это происходит.

    ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

    Исправление синтаксических ошибок. Если тег не срабатывает, проверьте вкладку «Консоль» на наличие ошибок, обнаруженных Chrome. Основные ошибки, на которые следует обратить внимание, следующие:

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

    • NS_IMAGELIB. Эта ошибка может возникнуть, если URL-адрес с параметром src в теге Iframe реализован как изображение. В этом случае тег места размещения или тег Floodlight могут не работать должным образом. Хотя в случае с Floodlight конверсию можно засчитать и в случае ошибки. Однако если эта ошибка возникла в теге Floodlight, ни один из сторонних пикселей, реализованных в этом теге, не сработает.
    • Небезопасный JavaScript пытается получить доступ к фрейму с URL-адресом. Это сообщение безопасности можно игнорировать, поскольку оно просто предупреждает о встраивании тегов iFrame из других доменов на страницу. Это сообщение будет отображаться только для пользователей, которые выбрали очень высокий уровень безопасности. Однако это не повлияет на то, как теги Floodlight (или пиксели выравниваются.
    • Ресурс интерпретируется как ‘_blank_’, но передается с типом MIME «.» («Ресурс был интерпретирован как _blank_, но отправлен с типом MIME». «) Это указывает на проблему с форматом файла. MIME — это идентификатор формата файла в Интернете. Эта ошибка может возникать, когда ресурс загружается вместе с файлом расширение (например, если файл формата JPEG, он имеет расширение .gif).
    • Типа ошибка не обнаружена. Указывает, что в одном из HTML-элементов страницы возникла ошибка TypeError. Как правило, это указывает на ошибку в коде одной из функций JavaScript.
    • Синтаксическая ошибка не обнаружена. Указывает на синтаксическую ошибку в одном из элементов HTML на странице. Обычно это указывает на неправильное использование символов <«/ — * ^ #.
Источники

  • https://timeweb.com/ru/community/articles/kak-ispolzovat-konsol-brauzera-dlya-vyyavleniya-oshibok
  • https://vc.ru/dev/229737-devtools-dlya-chaynikov
  • https://www.internet-technologies.ru/articles/rabota-s-instrument-razrabotchika-chrome-i-firefox.html
  • https://support.google.com/campaignmanager/answer/2828688?hl=ru
  • https://bugza.info/instrumenty-testirovshhika-panel-razrabotchika-chrome/

Оцените статью
Блог о JavaScript