Серьезные браузеры — Google Chrome, Apple Safari, Mozilla Firefox и Microsoft Edge (бывший Internet Explorer) — не только отображают страницы. Они дают разработчикам доступ к богатой и интересной функциональности, позволяющей разобраться в том, что именно происходит на отображаемой странице. Эта возможность реализована в так называемых инструментах разработчика, которые встроены в браузер и позволяют работать с HTML, CSS и JavaScript всяческими изощренными способами.
Рассмотрим здесь эти инструменты и узнаем, как с их помощью облегчить себе жизнь.
Поехали!
Я ИСПОЛЬЗУЮ GOOGLE CHROME
В следующих примерах я буду использовать браузер Google Chrome. Хотя в любом браузере есть аналогичные функции, интерфейс и шаги, которые необходимо выполнить, будут различаться. Просто помните об этом, а также обратите внимание, что версия Chrome может быть новей, чем та, которая используется в этой главе.
Знакомство с инструментами разработчика
Начнем с азов. Когда вы переходите на веб-страницу, браузер загружает тот документ, который ему велено загружать:
Выглядит знакомо, так как эта часть функционала особо не менялась с момента выпуска первого браузера в 1800-х или когда его там выпустили. Если используете Chrome, нажмите Cmd-Opt-I для Mac или F12 (или Ctrl + Shift + I) для Windows.
Нажмите нужные клавиши и посмотрите, что произойдет. Тревожная музыка, сопровождаемая землетрясением и лазерными выстрелами, скорее всего, не зазвучит, но совершенно точно изменится макет страницы браузера. Он покажет нечто загадочное. Обычно это изменение происходит в нижней или правой части экрана, как показано на рис. 30.1.
Рис. 30.1. Браузер с активированными инструментами разработчика внизу экрана
Браузер разделится на две части. Одна из них отвечает за отображение веб-страниц. Мы с ней уже знакомы, и она нам очень нравится. Вторая же — новая часть — предоставляет доступ к информации о странице, отображаемой в данный момент. Ее уже может оценить только разработчик вроде нас с вами. Эта часть и называется инструментами разработчика.
Инструменты разработчика предоставляют следующие возможности:
• Просмотр DOM.
• Отладка JavaScript.
• Проверка объектов и просмотр сообщений через консоль.
• Определение производительности и обнаружение проблем с памятью.
• Просмотр сетевого трафика
…и многое другое!
В целях экономии времени (скоро начнется очередная серия «Игры престолов», и я верю, что в этом эпизоде Нед Старк вернется в виде лютоволка) я сконцентрируюсь на первых трех пунктах, так как они непосредственно относятся к тому, что вы изучаете в этой книге.
Просмотр DOM
Первый инструмент разработчика, который мы рассмотрим, позволяет просматривать и даже манипулировать содержимым DOM. Запустив Chrome, пройдите по ссылке http://bit.ly/kirupaDevTool.
НЕТ БРАУЗЕРА? БЕЗ ПРОБЛЕМ!
Если у вас нет браузера под рукой или вы просто не можете получить доступ к этой ссылке, не волнуйтесь. Я буду объяснять, что происходит на каждом этапе пути, чтобы вы не остались в стороне.
При загрузке этой страницы вы увидите цветной фон и отображенный на нем текст:
Если вы обновите эту страницу, то увидите уже другой цвет фона. Как можно догадаться, при каждой загрузке страницы генерируется случайный цвет фона.
Первое, что мы сделаем с этим примером, — это проверим DOM и посмотрим, что здесь происходит. Убедитесь, что инструменты разработчика видимы и при этом выбрана вкладка Elements:
Здесь вы увидите текущее представление разметки страницы. Говоря более конкретно, это представление вашей DOM. Важность этого отличия в том, что это представление демонстрирует текущую версию того, как выглядит страница. Любые особенности, которые могли привнести в DOM браузер или JavaScript, будут здесь отображены.
Результат команды View source (просмотр исходного кода) в нашем примере будет выглядеть примерно так:
Random
Color
Generator
Команда View source просто выводит представление разметки, хранящейся в HTML-странице. Иначе говоря, View source предоставляет вам (устаревшую) версию разметки, существующую на сервере, но не версию DOM.
Если вы используете инструмент разработчика для просмотра представления DOM, то увидите это представление на основе текущей версии страницы:
Random
Color
Generator
Если присмотреться, то можно заметить едва уловимые различия в представлении некоторых элементов. Самое серьезное различие — это выделенный стиль background-color в элементе body, который есть только в представлении DOM, но не традиционном представлении исходного кода (View source). Причина в том, что есть JavaScript, который динамически устанавливает встроенный стиль в элементе body. Следующая врезка поясняет, почему так происходит.
Отличие представления DOM от View Source
Причина связана с тем, что представляет DOM. Еще раз повторю, что DOM — это результат завершения работы вашего браузера и JavaScript. Она показывает вам самое свежее представление, которое имитирует то, что видит браузер.
View Source — это просто статическое представление документа в том виде, в котором он находится на сервере (или на вашем компьютере). Оно не отображает текущих изменений выполняемой страницы, которые отражены в представлении DOM. Если вы взглянете на наш JavaScript код, то увидите, что я установил динамическое получение backgroundColor элементом body:
let bodyElement = document.querySelector("body");
bodyElement.style.backgroundColor = getRandomColor();
Когда этот код запускается, он изменяет DOM, чтобы установить свойство backgroundColor в элементе body. Используя View Source, вы бы никогда не увидели этого. Вообще никогда. Вот почему представление DOM из инструментов разработчика — ваш самый лучший друг.
Пример, выделяющий различия между исходником и DOM, был весьма прост. Чтобы увидеть реальную пользу представления DOM, стоит поэкспериментировать с переподчинением элементов, а также их созданием и удалением. Таким образом, вы отлично поймете различия между просмотром исходника и инспектированием DOM. Некоторые из примеров в прошлых главах, касающиеся управления DOM, могут быть полезны для аналогичных проверок.
Отладка JavaScript
Следующим важным инструментом разработчика является отладка. Не уверен, что использовал подходящее выражение, но инструменты разработчика позволяют проверить код вдоль и поперек, чтобы выяснить, есть ли в нем неполадки и в чем они. Этот процесс по-другому называется отладкой.
В панели инструментов разработчика перейдите на вкладку Sources:
Sources дает доступ ко всем файлам вашего документа. Вы видите сырое содержимое этих файлов, а не сгенерированную версию DOM, которая, как вы помните, ваш лучший друг.
Убедитесь, что в представлении дерева слева выбран файл randomColorGenerator.htm. Это гарантия того, что содержимое этого файла будет отображено справа и вы сможете его просмотреть. Промотайте вниз до тега script, содержащего две строки кода, которые вы видели ранее. Судя по нумерации строк, указанной в столбце слева, наши строки идут под номерами 20 и 21.
Нужно проверить, что происходит, когда код в строке 21 начинает выполнение. Чтобы это сделать, нужно сообщить браузеру о необходимости остановиться перед началом выполнения кода этой строки. Делается это с помощью установки так называемой точки останова (прерывания). Щелкните на ярлык строки 21 в столбце слева, чтобы установить точку останова.
Так вы выделите строку 21:
Теперь точка останова установлена. В следующем шаге браузер должен наткнуться на эту точку или, говоря более мягко, достиг точки прерывания. В нашем случае достаточно нажать F5, чтобы обновить страницу.
Если все сработало ожидаемым образом, то вы увидите загрузку страницы, которая внезапно остановится, выделив строку 21:
Сейчас вы находитесь в режиме отладки. Точка останова, которую вы установили на строке 21, была достигнута, и вся страница с визгом остановила свою загрузку. Браузер попадает в режим приостановки анимации, и у вас есть возможность разобраться со всем происходящим на странице. Это как если бы остановилось время и только вы имели возможность двигаться, изучать и изменять окружение. Если об этом еще не сняли кино, то кто-нибудь обязательно должен этим заняться.
Находясь в этом режиме, вернитесь к строке 21 и наведите курсор на переменную bodyElement. При наведении вы увидите подсказку, содержащую различные свойства и значения, существующие в этом конкретном объекте:
Можно взаимодействовать с этой справкой, делать прокрутку по объектам и даже углубиться в сложные объекты, содержащие в себе другие объекты. Так как bodyElement по сути является JavaScript/DOM-представлением элемента body, то вы увидите множество свойств, с которыми косвенно столкнулись при рассмотрении HTMLElement несколько глав назад.
Справа от представления исходного кода видно, с каких еще ракурсов его можно изучить:
Не стану объяснять возможности всех этих категорий, но просто скажу, что с их помощью можно изучать текущее состояние всех переменных и объектов JavaScript.
Помимо этого, точка останова предоставляет очень полезную возможность проследовать по коду так же, как это делает браузер. Мы остановились на строке 21. Чтобы проследовать далее, щелкните по кнопке Step into function call справа:
Помните, что вы сейчас находитесь на этой строке:
bodyElement.style.backgroundColor = getRandomColor();
Щелкните по указанной кнопке и посмотрите, что произойдет. Вы окажетесь внутри randomColor.js, где была определена функция getRandomColor. Нажмайте на Step into function call, чтобы двигаться по коду и проходить каждую строку функции getRandomColor. Обратите внимание, что теперь вы видите, как объекты в памяти браузера обновляются по мере выполнения кода при вашем продвижении от строки к строке. Если вы устали от этого, сделайте шаг назад, щелкнув на кнопку Step out of current function (она расположена справа от предыдущей кнопки), которая выведет вас из этой функции. В нашем случае выход произойдет обратно на строку 21 в randomColorGenerator.htm.
Если вы просто хотите запустить приложение, не продолжая прогулку по коду, то щелкните на кнопке Play, расположенной несколькими пикселями левее кнопки Step into:
Когда вы нажмете Play, код продолжит выполнение. Если у вас где-то еще определена точка останова, то она также сработает. При остановке на каждой такой точке можно совершать шаг внутрь, выход или просто возвращаться к выполнению, нажав Play. Так как мы установили только одну точку останова, то нажатие Play приведет к выполнению кода до завершения и появлению случайного цвета фона для элемента body:
Чтобы удалить точку останова, еще раз щелкните на номер строки, для которой ее определяли. В данном случае если вы нажмете на ярлык строки 21, то точка останова будет отключена и можно выполнять приложение, не попадая в режим отладки.
На этом заканчивается наша быстрая экскурсия, посвященная использованию функции отладки. Еще раз повторюсь: я показал все достаточно поверхностно. Ресурсы в конце главы помогут продвинуться дальше.
Знакомство с консолью
Еще один важный инструмент отладки — это консоль. Она позволяет совершать несколько действий — видеть сообщения, журналируемые кодом, а также передавать команды и проверять любой объект, находящийся в текущей области видимости.
Чтобы вызвать ее, просто перейдите на вкладку Console:
Не пугайтесь пустоты, которую видите, лучше просто насладитесь этой свободой и свежим воздухом.
Инспектирование объектов
Там, где находится ваш курсор, напечатайте window и нажмите Enter:
Вы увидите интерактивный список всех элементов, находящихся в объекте window. Можно ввести любое действующее имя объекта или свойства, и если он окажется в области видимости, то к нему можно обратиться, изучить его значение или даже выполнить его:
Это ни в коем случае не песочница «только для чтения». Здесь легко можно учинить всяческие беспорядки. Например, если набрать document.body.remove() и нажать Ввод, то весь ваш документ просто исчезнет. Если вы случайно удалили body, тогда просто обновите страницу, чтобы вернуться к предыдущему состоянию. Инструменты разработчика работают напрямую с представлением страницы в оперативной памяти и не производят запись в исходный код. Поэтому ваши эксперименты без ущерба для всех останутся в промежуточной реальности.
Консоль позволяет проверять или вызывать любой объект, существующий в любой области, где в данный момент выполняется приложение. Если не установлено точек останова, тогда запуск консоли переводит вас в глобальное состояние.
Журналирование сообщений
Мы уже почти закончили с темой инструментов разработчика. В финале рассмотрим возможность консоли журналировать сообщения из кода. Помните, как мы уже делали нечто подобное?
function doesThisWork() {
console.log("It works!!!");
}
Это «нечто» мы делали, когда использовали инструкцию alert для вывода значения или подтверждения выполнения кода. Что ж, теперь можем перестать это делать. Консоль предоставляет нам гораздо менее раздражающий способ вывода сообщений, без прерывания всего процесса всплывающими диалоговыми окнами. Вы можете использовать функцию console.log для вывода нужной информации в консоль:
function doesThisWork() {
console.log("It works!!!")
}
еще раз об области видимости и состоянии
Я уже несколько раз упоминал о том, что консоль позволяет проверять текущую область видимости. По сути, все то, что мы обсуждали в главе 8 «Область видимости переменных», также относится и к поведению консоли.
Предположим, вы установили точку останова на следующей выделенной строке:
let oddNumber = false;
function calculateOdd(num) {
if (num % 2 == 0) {
oddNumber = false;
} else {
oddNumber = true;
}
}
calculateOdd(3);
Когда код при выполнении достигает этой точки, значение oddNumber по-прежнему остается false. Строка, на которой произошло прерывание, еще не была выполнена, и вы можете проверить это, протестировав значение oddNumber в консоли. А теперь предположим, что вы выполняете код, достигаете точки останова и совершаете шаг к следующей строке.
В этот момент значение oddNumber уже установлено как true. Теперь консоль будет отражать уже новое значение, так как именно оно определено для переменной oddNumber согласно представлению в оперативной памяти. Главный вывод здесь в том, что представление в консоли напрямую связано с той частью кода, на которой вы в данный момент фокусируетесь. Это становится особенно заметно, когда вы шагаете по коду и области видимости сменяются часто.
При выполнении этого кода вы увидите указанные вами данные в консоли:
Далее вы увидите, что в некоторых случаях я начну использовать console.log вместо alert.
КОРОТКО О ГЛАВНОМ
Если вы еще не использовали инструменты разработчика, то настоятельно рекомендую выделить время на ознакомление с ними. JavaScript — это один из тех языков, где проблемы могут возникнуть даже тогда, когда все вроде бы в порядке. В очень простых примерах, которые вы встретите в книге, обнаружить ошибки легко. Но когда вы сами начнете работать над крупными и более сложными приложениями, наличие правильных инструментов для определения неполадок сэкономит вам много времени и усилий.
Чтобы узнать больше об инструментах разработчика (или Dev Tools, как их называют крутые ребята), обратитесь к следующим ресурсам:
• Обзор Chrome Dev Tools: http://bit.ly/kirupaChromeDevTools
• Обзор IE/Edge F12 Dev Tools: http://bit.ly/kirupaIEDevTools
• Обзор Firefox Dev Tools: http://bit.ly/kirupaFFDevTools
• Обзор Safari Web Inspector: http://bit.ly/kirupaSafariDevTools