Repeater-zone.ru

ПК Репитер
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Отладка JavaScript программы в браузере. Инструменты Разработчика

Отладка JavaScript программы в браузере. Инструменты Разработчика

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

В каждом современном браузере есть свои инструменты, и хотя они могут отличаться интерфейсом или некоторыми специфическими возможностями, основной функционал для отладки программы у них схожий. Поэтому понимание процесса отладки в рамках даже одного браузера позволит сформировать общее представление об отладке в других браузерах. Полную документацию по Инструментам Разработчика для браузера Firefox можно найти в документации MDN, а для браузера Chrome (на английском) в документации Chrome DevTools.

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

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

Переключение темы интерфейса

Горячие клавиши

В настройках есть список горячих клавиш — советуем с ними ознакомиться, знание этих комбинаций очень ускорит работу.

Горячие клавиши

Расположение панелей

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

Кнопка управления расположением панелей

Панель Elements

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

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

Панель Elements показывает разметку страницы точно так же, как она рендерится в браузере. Можно визуально менять наполнение сайта посредством изменения html/css кода в панели элементов. Как вы, наверное, заметили (а может и нет), в левом окошке отображается html–документ, в правом – css. Проводя нехитрые манипуляции с данными можно изменить наполнение и дизайн открытой страницы. Например, можно поменять текст в окне, если редактировать его в теле html, а также изменить шрифт страницы поменяв его значение в поле css. Но это не сохранит введенных данных, а поможет просто визуально оценить примененные изменения. Помимо этого, можно просмотреть код конкретного элемента страницы. Для этого нужно райткликнуть его и выбрать команду «Посмотреть код».

В панели Elements есть одна очень прекрасная функция. Можно посмотреть, как бы выглядела открытая страница на каком-нибудь девайсе с другим расширением экрана. Кликом по иконке телефона слева от вкладки Elements вызывается окно, в котором можно менять размер предполагаемого экрана, таким образом эмулируя тот или иной девайс и контролировать отображение страницы на нем. Выглядит это так:

Эмулятор девайсов

Эмулятор девайсов

При клике на кнопку Select Model выпадет дропдаун с огромнейшим выбором девайсов. Выбираете что вам нужно – и вуаля! Страница отображена так, как если бы это был девайс. Таким образом панель Elements можно использовать не только для просмотра или редактирования страницы, но и для эмуляции устройств отображения. Все унифицировано и доступно в Хроме!

4. Мониторинг событий

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

    Команда monitorEvents($(‘selector’)) позволяет организовать мониторинг всех событий, связанных с элементом, которому соответствует селектор. При возникновении события делается запись в консоли. Например, команда monitorEvents($(‘#firstName’)) позволит логировать все события, связанные с элементом, идентификатор которого – firstName.

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

У веб-браузеров есть две стороны использования. С одной стороны, обычные пользователи Интернета для просмотра веб-страниц, а с другой стороны, разработчики для разработки приложений, которые работают. Google Chrome предлагает разработчикам встроенные инструменты для анализа приложений и устранения проблем. Когда вы используете Google Chrome, вы можете найти эти инструменты, нажав «CTRL + Shift + I» (Windows) или «CMD + opt + I» (Mac) на клавиатуре. Это откроет консоль разработчика, состоящую из различных инструментов.

Читать еще:  Скачать драйвера для HP Probook 4540S

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

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

1. Проверка элемента на веб-странице

Это позволяет нам быстро выбрать любой элемент на веб-странице. Допустим, вы хотите проверить раздел страницы и не можете найти код этого раздела. Что вы можете сделать, так это нажать «CTRL + Shift + I» на клавиатуре, чтобы открыть инструменты разработчика, и щелкнуть значок маленькой стрелки, как показано ниже.

Включение инструмента выделения

Включение инструмента выделения

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

2. Режим устройства

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

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

Проверить отзывчивость и включить режим кадра

Проверить отзывчивость и включить режим кадра

3. Панель «Элементы»

С помощью этой панели вы можете предварительно просмотреть изменения кода любой страницы в процессе разработки. Он позволяет вам вносить изменения в код HTML и CSS. Допустим, вы хотите увидеть размер изображения «Google» на главной странице Google. Просто щелкните его правой кнопкой мыши и выберите опцию «Осмотреть». На вкладке «Элементы» вы можете увидеть HTML, соответствующий выбранному элементу на странице. На правой боковой панели, на вкладке «Стили», вы можете просмотреть CSS-код выбранного элемента HTML.

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

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

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

4. Панель консоли

Это консоль JavaScript, которая предоставляет диагностическую информацию журнала для процесса разработки. Здесь вы можете писать команды JavaScript. Например, если вы хотите найти тег body, вы можете просто ввести «document.body» и нажать Enter. Вы получите свои результаты.

Запуск команд в консоли

Запуск команд в консоли

5. Панель источников

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

Читать еще:  Не меняется разрешение экрана в Windows 7

Панель исходного кода в Инструментах разработчика Chrome

Панель исходного кода в Инструментах разработчика Chrome

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

6. Сетевая панель

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

Допустим, вы работаете над каким-то проектом и хотите проверить скорость страницы. Что вам нужно сделать, так это перейти по URL-адресу, по которому вы хотите проверить скорость. Нажмите «CTRL + Shift + I», чтобы открыть инструменты разработчика, и перейдите на вкладку «Сеть». Прямо сейчас вы ничего не увидите. Но когда вы обновите страницу, вы увидите статистику страницы, как показано ниже. Это поможет вам проанализировать, какой элемент на странице загружается долго, и вы сможете работать над оптимизацией скорости.

Состояние сети в инструментах разработчика Chrome

Состояние сети в инструментах разработчика Chrome

7. Панель производительности

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

Теперь нажмите кнопку записи и начните запись, запись будет продолжаться. Когда это будет сделано, вы можете проверить память сверху. Это даст вам размер JavaScript, количество документов, узлов и т. Д.

Результаты производительности в инструментах разработчика Chrome

Результаты производительности в инструментах разработчика Chrome

8. Панель памяти

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

9. Панель приложения

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

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

Локальное хранилище приложения

Локальное хранилище приложения

10. Панель безопасности

Эта панель покажет вам, насколько безопасна ваша веб-страница, или, если есть какие-либо ошибки, она сообщит вам об этом. Допустим, вы разрабатываете веб-сайт и делаете его безопасным. Но по какой-то причине сертификат SSL недействителен, или при настройке SSL возникли проблемы. Эта панель сообщит вам, что нужно исправить, и покажет вам статус SSL (HTTPS) или нет SSL (HTTP). Другими словами, безопасный или небезопасный.

Панель безопасности в инструментах разработчика Chrome

Панель безопасности в инструментах разработчика Chrome

Читать еще:  Ошибка инициализации приложения Adobe Flash Player

11. Аудиторская комиссия

На этой панели вы можете проверить производительность, передовой опыт веб-разработки, SEO и т. Д. Перейдите в инструменты разработчика и перейдите на вкладку «Аудит». Нажмите «Выполнить аудит» и запустите аудит на веб-странице. Chrome будет использовать расширение Lighthouse для аудита веб-страницы и после аудита покажет вам результаты выполненного аудита.

Lighthouse Audit работает в Chrome

Lighthouse Audit работает в Chrome

Настройки инструментов разработчика

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

Настройка консоли инструментов разработчика в Chrome

Настройка консоли инструментов разработчика в Chrome

Вывод

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

Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).

Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:

Теперь консоль можно активировать нажатием клавиш Cmd + Opt + C . Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.

Как открыть консоль разработчика в Яндекс Браузере

В Яндекс Браузере представлено несколько инструментов для разработки и отладки приложений, однако они все равно объединены в один интерфейс в виде консоли. Это значительно упрощает их запуск и использование, так как все под рукой и не нужно запускать каждый элемент отдельно.

Есть несколько вариантов открытия консоли разработчика в Яндекс Браузере.

Вариант 1: Вызов через главное меню Яндекс Браузера

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

  1. В верхней части интерфейса браузера кликните по кнопке открытия главного меню. Она отмечена на скриншоте ниже.
  2. Выберите там пункт “Дополнительно”.
  3. Затем переключитесь в “Дополнительные инструменты” и там уже выберите подходящий под свои нужды инструменты — “Просмотр кода страницы”, “Инструменты разработчика” или “Консоль JavaScript”.

Вариант 2: Использовать для вызова горячие клавиши

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

  • Ctrl+U — открытие инструмента просмотра исходного кода страницы;
  • Ctrl+Shift+I — открытие инструмента разработчика;
  • Ctrl+Shift+J — открытие консоли JavaScript.

Вариант 3: Вызов инструмента просмотра кода

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

  1. Выделите на странице тот элемент, код которого вам хотелось бы исследовать более подробно.
  2. Нажмите правой кнопкой мыши по выделенному элементу и выберите в контекстном меню пункт “Исследовать элемент” или воспользуйтесь сочетанием клавиш Ctrl+Shift+I.

Еще как вариант быстрый доступ к инструментам разработчика в Яндекс Браузере можно получить, нажав клавишу F12.

Как видите, нет ничего сложного в открытии инструментов разработчика в Яндекс Браузере.

голоса
Рейтинг статьи
Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector