Вступление
Современные браузеры имеют встроенные средства разработки для работы с JavaScript и другими веб-технологиями. Эти инструменты включают в себя консоль, похожую на интерфейс оболочки, а также инструменты для проверки DOM, отладки и анализа сетевой активности.
Консоль может использоваться для регистрации информации как части процесса разработки JavaScript, а также позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в контексте страницы. По сути, Консоль предоставляет вам возможность писать, управлять и контролировать JavaScript по требованию.
В этом руководстве рассказывается, как работать с Консолью в JavaScript в контексте браузера, и дается обзор других встроенных инструментов разработки, которые вы можете использовать в процессе веб-разработки.
Работа с консолью в браузере
Большинство современных веб-браузеров, поддерживающих основанные на стандартах HTML и XHTML, предоставляют вам доступ к консоли разработчика, где вы можете работать с JavaScript в интерфейсе, похожем на оболочку терминала. Мы рассмотрим, как получить доступ к консоли в Firefox и Chrome.
Fire Fox
Чтобы открыть Web Console в FireFox, вы можете перейти к меню in в верхнем правом углу рядом с адресной строкой.
Оттуда нажмите на кнопку «Разработчик», обозначенную значком гаечного ключа, чтобы открыть меню «Веб-разработчик». С этим открытым, нажмите на элемент меню веб-консоли.
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/firefox-web-console-menu.png [Пункт меню веб-консоли Firefox]
Как только вы это сделаете, в нижней части окна вашего браузера откроется панель:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/firefox-web-console-tray.png [Лоток веб-консоли Firefox]
Вы также можете войти в веб-консоль с помощью сочетания клавиш + CTRL + + + SHIFT + + + K + в Linux и Windows или + COMMAND + + + OPTION + + + K + в macOS.
Теперь, когда мы получили доступ к консоли, мы можем начать работать с ней в JavaScript.
Хром
Чтобы открыть JavaScript Console в Chrome, вы можете перейти в меню в правом верхнем углу окна браузера, обозначенное тремя вертикальными точками в ряд. Оттуда вы можете выбрать Дополнительные инструменты, затем Инструменты разработчика.
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/chrome-developer-tools-menu.png [Пункт меню инструментов разработчика Chrome]
Откроется панель, где вы можете нажать * Консоль * в верхней строке меню, чтобы вызвать консоль JavaScript, если она еще не выделена:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/chrome-console-tray.png [Пункт меню инструментов разработчика Chrome]
Вы также можете войти в консоль JavaScript, используя сочетание клавиш + CTRL + + + SHIFT + + + J + в Linux или Windows, или + COMMAND + + + OPTION + + + J + в macOS, что сразу привлечет внимание к консоли.
Теперь, когда мы получили доступ к консоли, мы можем начать работать с ней в JavaScript.
Работа в консоли
В Консоли вы можете ввести код JavaScript.
Начнем с предупреждения, которое выводит строку + Hello, World! +:
alert("Hello, World!");После того, как вы нажмете клавишу + ENTER + после вашей строки JavaScript, вы должны увидеть следующее всплывающее окно предупреждения в вашем браузере:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-alert.png [Пример предупреждения консоли JavaScript]
Обратите внимание, что консоль также напечатает результат вычисления выражения, который будет читаться как + undefined +, когда выражение явно что-то не возвращает.
Вместо того чтобы получать всплывающие оповещения, по которым нам нужно продолжать нажимать, мы можем работать с JavaScript, зарегистрировав его на консоли с помощью + console.log +.
Чтобы напечатать строку + Hello, World! +, Мы можем набрать в консоли следующее:
console.log("Hello, World!");В консоли вы получите следующий вывод:
OutputHello, World!Мы также можем использовать JavaScript для выполнения математических операций в консоли:
console.log(2 + 6);Output8Вы также можете попробовать более сложную математику:
console.log(34348.2342343403285953845 * 4310.23409128534);Output148048930.17230788Кроме того, мы можем работать с несколькими строками с переменными:
let d = new Date();
console.log("Today's date is " + d);OutputToday's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)Если вам нужно изменить команду, которую вы передали через консоль, вы можете нажать клавишу со стрелкой вверх keyboard на клавиатуре, чтобы получить предыдущую команду. Это позволит вам отредактировать команду и отправить ее снова.
Консоль JavaScript предоставляет вам пространство для тестирования кода JavaScript в режиме реального времени, позволяя вам использовать среду, аналогичную интерфейсу оболочки терминала.
Работа с файлом HTML
Вы также можете работать в контексте файла HTML или динамически отображаемой страницы в консоли. Это дает вам возможность экспериментировать с кодом JavaScript в контексте существующих HTML, CSS и JavaScript.
Помните, что как только вы перезагрузите страницу после ее изменения с помощью консоли, она вернется в свое состояние до внесения изменений в документ, поэтому обязательно сохраните все изменения, которые вы хотели бы сохранить в другом месте.
Давайте возьмем пустой HTML-документ, такой как следующий файл + index.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>Если вы сохраните указанный выше HTML-файл и загрузите его в выбранный вами браузер, вы должны увидеть пустую страницу с заголовком страницы как «+ Today’s Date +».
Затем вы можете открыть Консоль и начать работать с JavaScript, чтобы изменить страницу. Мы начнем с использования JavaScript для вставки заголовка в HTML.
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"На консоли вы получите следующий вывод:
Output"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>"И на этом этапе ваша страница должна выглядеть примерно так:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-plain.png [Пример простой даты JavaScript-консоли]
Мы также можем изменить стиль страницы, например цвет фона:
document.body.style.backgroundColor = "lightblue";Output"lightblue"А также цвет текста на странице:
document.body.style.color = "white";Output"white"Теперь ваша страница будет выглядеть примерно так:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-style.png [Пример стиля консоли JavaScript]
Отсюда вы можете создать элемент параграфа + <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 + будет выглядеть примерно так:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-with-paragraph.png [Консольная дата JavaScript с примером абзаца]
Консоль предоставляет вам пространство для экспериментов с изменением HTML-страниц, но важно помнить, что вы не изменяете HTML-документ, когда делаете что-то на консоли. В этом случае после перезагрузки страницы она вернется к пустому документу.
Понимание других инструментов разработки
В зависимости от того, какие инструменты разработки браузера вы используете, вы сможете использовать другие инструменты, чтобы помочь вам в процессе веб-разработки. Давайте рассмотрим некоторые из этих инструментов.
DOM - объектная модель документа
Каждый раз, когда веб-страница загружается, браузер, в котором она находится, создает D объект O bject M odel или * DOM * страницы.
DOM представляет собой дерево объектов и отображает элементы HTML в иерархическом представлении. Дерево DOM доступно для просмотра на панели * https: //developer.mozilla.org/en-US/docs/Tools/Page_Inspector [Inspector] * в Firefox или на * https: //developers.google.com/web Панель / tools / chrome-devtools / inspect-styles / [Elements] * в Chrome.
Эти инструменты позволяют вам просматривать и редактировать элементы DOM, а также позволяют идентифицировать HTML, связанный с аспектом конкретной страницы. DOM может сообщить вам, имеет ли текстовый фрагмент или изображение атрибут ID, и может позволить вам определить, каково значение этого атрибута.
Страница, которую мы изменили выше, будет иметь вид DOM, похожий на этот, прежде чем мы перезагрузим страницу:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-dom-example.png [Пример DOM JavaScript]
Кроме того, вы увидите стили CSS на боковой панели или под панелью DOM, что позволит вам увидеть, какие стили используются в документе HTML или через таблицу стилей CSS. Вот как выглядит наш пример страницы в стиле тела в Firefox Inspector:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-css-example.png [Пример JavaScript CSS]
Чтобы редактировать узел DOM в реальном времени, дважды щелкните выбранный элемент и внесите изменения. Например, для начала вы можете изменить тег + <h1> + и сделать его тегом + + h2> +.
Как и в случае с консолью, если вы перезагрузите страницу, вы вернетесь в сохраненное состояние документа HTML.
сеть
На вкладке * Network * встроенных инструментов разработки вашего браузера можно отслеживать и записывать сетевые запросы. Эта вкладка показывает вам сетевые запросы, которые делает браузер, в том числе, когда он загружает страницу, сколько времени занимает каждый запрос, и предоставляет сведения о каждом из этих запросов. Это может быть использовано для оптимизации производительности загрузки страницы и проблем с запросами отладки.
Вы можете использовать вкладку Сеть рядом с Консолью JavaScript. То есть вы можете начать отладку страницы с помощью консоли, а затем переключиться на вкладку Сеть, чтобы увидеть сетевую активность без перезагрузки страницы.
Чтобы узнать больше о том, как использовать вкладку Сеть, вы можете прочитать о working с сетевым монитором Firefox или https://developers.google. com / web / tools / chrome-devtools / network-performance / [начало работы с анализом производительности сети с помощью Chrome DevTools].
Адаптивный дизайн
Когда веб-сайты отзывчивы, они разрабатываются и разрабатываются для того, чтобы одновременно выглядеть и функционировать на различных устройствах: мобильных телефонах, планшетах, настольных компьютерах и ноутбуках. Размер экрана, плотность пикселей и поддержка сенсорного ввода - вот факторы, которые следует учитывать при разработке на разных устройствах. Как веб-разработчик, важно помнить о принципах адаптивного дизайна, чтобы ваши веб-сайты были полностью доступны людям независимо от того, к какому устройству у них есть доступ.
И Firefox, и Chrome предоставляют вам режимы для обеспечения того, чтобы принципам адаптивного дизайна уделялось внимание при создании и разработке сайтов и приложений для Интернета. Эти режимы будут эмулировать различные устройства, которые вы можете исследовать и анализировать в процессе разработки.
Подробнее о Responsive Mode Design браузере Firefox или https://developers.google.com/web/tools/chrome-devtools/device- mode / [Device Mode], чтобы узнать больше о том, как использовать эти инструменты для обеспечения более справедливого доступа к веб-технологиям.
Заключение
В этом руководстве представлен обзор работы с консолью JavaScript в современных веб-браузерах, а также некоторая информация о других инструментах разработки, которые вы можете использовать в своем рабочем процессе.
Чтобы узнать больше о JavaScript, вы можете прочитать о типах data или https://www.digitalocean.com/ сообщество / учебные пособия / введение в jquery [jQuery] или https://www.digitalocean.com/community/tutorials/how-to-make-a-bar-chart-with-javascript-and-the-d3 библиотеки [D3].