Современные браузеры предоставляют встроенные инструменты разработки для JavaScript и других технологий. Среди этих инструментов можно найти консоль, которая похожа на интерфейс оболочки, а также инструменты для проверки DOM, отладки и анализа сетевой активности.
Консоль можно использовать для регистрации информации как части процесса разработки JavaScript. Также консоль позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в контексте страницы. По сути, консоль предоставляет возможность писать код JavaScript и при необходимости управлять им.
Данное руководство научит работать с консолью JavaScript в браузере и ознакомит с другими встроенными инструментами разработки, которые могут вам пригодиться.
Работа с консолью JavaScript в браузере
Большинство современных веб-браузеров, поддерживающих HTML и XHTML, по умолчанию предоставляют доступ к консоли разработчика, где вы можете работать с JavaScript в интерфейсе, подобном оболочке терминала. В этом разделе вы узнаете, как получить доступ к консоли в Firefox и Chrome.
Браузер Firefox
Чтобы открыть Web Console в браузере FireFox, откройте меню ☰ в верхнем правом углу.
Нажмите кнопку Developer. Она откроет меню Web Developer, где вы сможете выбрать Web Console.
Консоль откроется в нижней части окна браузера.
Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+K в Linux и Windows или Command+Option+K в macOS.
Браузер Chrome
Чтобы найти JavaScript Console в браузере Chrome, откройте меню в правом верхнем углу окна (кнопку с тремя точками по вертикали). Выберите More Tools → Developer Tools.
На экране появится панель. Выберите Console в верхнем меню, чтобы получить доступ к консоли JavaScript Console.
Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+J в Linux и Windows или Command+Option+J в macOS.
Работа с консолью JavaScript
В консоль можно вводить код JavaScript.
Для примера попробуйте написать простое предупреждение, которое будет выводить строку Hello, World!:
alert("Hello, World!");
Нажмите Enter. В браузере появится всплывающее окно:
Hello, World!
Обратите внимание: консоль также распечатает результат вычисления выражения, которое будет читаться как undefined.
Консоль может также логировать данные JavaScript с помощью console.log.
Чтобы отобразить строку «Hello, World!» в консоли, введите:
console.log("Hello, World!");
Hello, World!
Также консоль может обрабатывать математические вычисления:
console.log(2 + 6);
8
Попробуйте ввести более сложный пример:
console.log(34348.2342343403285953845 * 4310.23409128534);
148048930.17230788
Также консоль может работать с несколькими строками и переменными:
let d = new Date();
console.log("Today's date is " + d);
Today's date is Mon Jul 03 2017 16:06:51 GMT+0300
Если вам нужно изменить команду, которую вы ранее вводили в консоль, нажмите клавишу со стрелочкой вверх ↑ на клавиатуре. Это позволит вам отредактировать команду и запустить ее снова.
Окружение JavaScript Console подобно оболочке терминала, что позволяет протестировать код в режиме реального времени.
Работа с HTML-файлами
В консоли можно работать в контексте HTML-файла или страницы с динамической визуализацией. Это дает возможность поэкспериментировать с кодом JavaScript в контексте HTML, CSS и JavaScript.
Имейте в виду: как только вы перезагрузите страницу, измененную в консоли, она вернется к прежнему состоянию, поэтому обязательно сохраняйте все изменения, которые нужно оставить.
Создайте простой HTML-файл index.html.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>
Сохраните файл и откройте его в браузере. На экране появится страница с заголовком Today’s Date.
Теперь откройте консоль и используйте JavaScript, чтобы изменить страницу. Вставьте в HTML заголовок.
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
В консоли появится:
Today's date is Mon Jul 03 2017 16:15:55 GMT+0300
Страница будет выглядеть так:
Today's date is Mon Jul 03 2017 16:15:55 GMT+0300
Затем можно изменить стиль страницы, например, цвет фона:
document.body.style.backgroundColor = "pink";
"pink"
Также можно изменить цвет текста на странице:
document.body.style.color = "white";
"white"
Создайте новый элемент с помощью тега <p>:
let p = document.createElement("P");
Затем можно создать текст и добавить его в абзац:
let t = document.createTextNode("Paragraph text.");
Добавьте текст в переменную р:
p.appendChild(t);
Затем вставьте переменную р в элемент <p>.
document.body.appendChild(p);
Теперь страница выглядит так:
Today's date is Mon Jul 03 2017 16:26:58 GMT+0300
Paragraph text.
Консоль позволяет поэкспериментировать с отображением и внешним видом HTML-страниц. Однако при этом важно помнить, что сам документ HTML не меняется при работе с ним в консоли. Как только вы перезагрузите страницу, она примет свой прежний вид.
Работа с другими инструментами разработки
В данном разделе вы ознакомитесь с другими встроенными инструментами разработки, которые можно использовать в браузерах.
Инструмент DOM (Document Object Model)
Во время загрузки любой страницы браузер создает объектную модель документа, или DOM страницы.
DOM – это дерево объектов, которое отображает иерархию HTML-элементов страницы. Дерево DOM можно просмотреть в панели Inspector в Firefox и в панели Elements в Chrome.
Эти инструменты позволяют проверять и редактировать элементы DOM, а также искать объекты HTML, связанные с конкретной страницей. DOM может показать, имеет ли фрагмент текста или изображение атрибут ID, и может определить значение этого атрибута.
Кроме того, в боковой панели или под панелью DOM можно найти стили CSS, которые используются в документе HTML или таблице стилей.
Чтобы отредактировать DOM в реальном времени, дважды кликните по выбранному элементу. Для примера можете попробовать превратить тег <h1> в <h2>.
Опять же, после обновления страница примет прежний вид.
Вкладка Network
Вкладка Network позволяет мониторить и записывать сетевые запросы. В этой вкладке показаны сетевые запросы браузера, в том числе запросы для загрузки страницы, время обслуживания запросов и сведения о каждом из них. Эти данные можно использовать для оптимизации производительности загрузки страницы и отладки запросов.
Использовать вкладку Network можно вместе с консолью JavaScript. Например, вы можете начать отладку страницы с помощью консоли, а затем открыть вкладку Network и просмотреть сетевую активность, не перезагружая страницу.
Дополнительные рекомендации по работе с сетевыми данными вы найдете в мануалах браузеров:
Отзывчивый дизайн
Сайты с отзывчивым дизайном быстро адаптируют свой вид и функции на различных устройствах: мобильных телефонах, планшетах, настольных компьютерах и ноутбуках. Размер экрана, плотность пикселей и ответ на прикосновения – факторы, которые следует учитывать при разработке адаптивных сайтов. Также принципы отзывчивого дизайна важно учитывать для того, чтобы веб-сайт был доступным и производительным вне зависимости от устройства, на котором его открывают.
Современные браузеры (в том числе Firefox и Chrome) предоставляют модели соблюдения принципов отзывчивого дизайна при разработке сайтов и приложений. Эти модели эмулируют поведение того или иного устройства, что позволяет протестировать и проанализировать все функции сайта.
Больше об этом можно узнать в руководствах браузеров:
- Responsive Design Mode в Firefox
- Device Mode в Chrome
Заключение
В этом руководстве представлен краткий обзор работы с консолью JavaScript в современных веб-браузерах. Также здесь можно найти информацию о других полезных инструментах разработки.
Читайте также: