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

Введение

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

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

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

Работа с Консолью в браузере

Большинство современных веб-браузеров, поддерживающих стандарты HTML и XHTML, предоставляют доступ к консоли разработчика, где вы можете работать с JavaScript в интерфейсе, аналогичном терминальной оболочке. В этом разделе описывается, как получить доступ к консоли в Firefox и Chrome.

Firefox

Для открытия Веб-консоли в Firefox перейдите в меню ☰ в правом верхнем углу рядом с адресной строкой.

Выберите Дополнительные инструменты. После этого нажмите на элемент Инструменты веб-разработчика.

После этого появится лоток внизу окна браузера:

Вы также можете войти в Веб-консоль с помощью комбинации клавиш CTRL + SHIFT + K в Linux и Windows или COMMAND + OPTION + K на macOS.

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

Chrome

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

Это откроет панель, где вы сможете нажать на Консоль в верхней панели меню, чтобы открыть Консоль JavaScript, если она еще не выделена:

Вы также можете войти в Консоль JavaScript, используя комбинацию клавиш CTRL + SHIFT + J в Linux или Windows, или COMMAND + OPTION + J на macOS, что сразу переведет фокус на Консоль.

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

Работа в Консоли

В Консоли вы можете вводить и выполнять код JavaScript.

Начните с предупреждения, которое выводит строку Hello, World!:

alert("Hello, World!");

После нажатия клавиши ENTER после вашей строки JavaScript в вашем браузере появится всплывающее предупреждение:

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

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

Чтобы вывести строку Hello, World!, введите следующее в консоль:

console.log("Hello, World!");

В консоли вы получите следующий вывод:

Output
Hello, World!

Также вы можете выполнять математические операции в консоли:

console.log(2 + 6);

Output
8

Вы также можете попробовать более сложные математические вычисления:

console.log(34348.2342343403285953845 * 4310.23409128534);

Output
148048930.17230788

Кроме того, вы можете работать с несколькими строками, используя переменные:

let today = new Date();
console.log("Today's date is " + today);

Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

Если вам нужно изменить команду, которую вы передали через консоль, вы можете нажать стрелку вверх (↑) на клавиатуре, чтобы получить предыдущую команду. Это позволит вам отредактировать команду и отправить её снова.

Консоль JavaScript предоставляет вам пространство для проверки кода JavaScript в реальном времени, позволяя вам использовать среду, аналогичную интерфейсу терминальной оболочки.

Работа с HTML-файлом

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

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

Возьмите HTML-документ, например, следующий файл index.html, чтобы понять, как использовать Консоль для его модификации. В своем любимом текстовом редакторе создайте файл index.html и добавьте следующие строки 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>

Если вы сохраните указанный выше файл HTML и загрузите его в браузере по вашему выбору, будет отображена пустая страница с заголовком Today's Date.

Откройте Консоль и начните работать с JavaScript для изменения страницы. Начните с использования JavaScript для вставки заголовка в HTML.

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

В Консоли вы получите следующий вывод:

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

Ваша страница должна быть похожа на следующую:

Вы можете изменить стиль страницы, например, цвет фона:

document.body.style.backgroundColor = "lightblue";

Output
"lightblue"

А также цвет текста на странице:

document.body.style.color = "white";

Output
"white"

Теперь ваша страница должна показывать что-то подобное этому:

Отсюда вы можете создать элемент <p> параграфа:

let p = document.createElement("P");

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

let t = document.createTextNode("Paragraph text.");

Добавьте текстовый узел, добавив его к переменной p:

p.appendChild(t);

И, наконец, добавьте p с его параграфом <p> и добавленным текстовым узлом к документу:

document.body.appendChild(p);

После выполнения этих шагов ваша HTML-страница index.html будет включать следующие элементы:

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

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

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

DOM — Document Object Model

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

DOM представляет собой дерево объектов и показывает элементы HTML в иерархическом виде. Дерево DOM доступно для просмотра в панели Inspector в Firefox или панели Elements в Chrome.

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

Страница, которую вы изменили выше, будет иметь вид DOM, подобный следующему, перед перезагрузкой страницы:

Кроме того, вы увидите стили CSS в боковой панели или под панелью DOM, что позволит вам видеть, какие стили используются в HTML-документе или через таблицу стилей CSS. Например, обратите внимание, какие стили body включены в Инспекторе Firefox для вашей примерной страницы:

Чтобы редактировать узел DOM в режиме реального времени, дважды щелкните выбранный элемент и внесите изменения. Например, вы можете изменить тег <h1> и сделать его тегом <h2>.

Как и с Консолью, если вы перезагрузите страницу, вы вернетесь к исходному сохраненному состоянию HTML-документа.

Сеть

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

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

Чтобы узнать больше о том, как использовать вкладку “Сеть”, вы можете прочитать о работе с монитором сети Firefox или начать анализ производительности сети с помощью инструментов разработчика Chrome.

Отзывчивый дизайн

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

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

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

Вывод

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

Чтобы узнать больше о JavaScript, вы можете прочитать о типах данных или о библиотеках jQuery или D3.