JavaScript с нуля

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

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

Выглядит знакомо, так как эта часть функционала особо не менялась с момента выпуска первого браузера в 1800-х или когда его там выпустили. Если используете Chrome, нажмите Cmd-Opt-I для Mac или F12 (или Ctrl + Shift + I) для Windows.

Нажмите нужные клавиши и посмотрите, что произойдет. Тревожная музыка, сопровождаемая землетрясением и лазерными выстрелами, скорее всего, не зазвучит, но совершенно точно изменится макет страницы браузера. Он покажет нечто загадочное. Обычно это изменение происходит в нижней или правой части экрана, как показано на рис. 30.1.

Рис. 30.1. Браузер с активированными инструментами разработчика внизу экрана

Браузер разделится на две части. Одна из них отвечает за отображение веб-страниц. Мы с ней уже знакомы, и она нам очень нравится. Вторая же — новая часть — предоставляет доступ к информации о странице, отображаемой в данный момент. Ее уже может оценить только разработчик вроде нас с вами. Эта часть и называется инструментами разработчика.

Инструменты разработчика предоставляют следующие возможности:

• Просмотр DOM.

• Отладка JavaScript.

• Проверка объектов и просмотр сообщений через консоль.

• Определение производительности и обнаружение проблем с памятью.

• Просмотр сетевого трафика

…и многое другое!

В целях экономии времени (скоро начнется очередная серия «Игры престолов», и я верю, что в этом эпизоде Нед Старк вернется в виде лютоволка) я сконцентрируюсь на первых трех пунктах, так как они непосредственно относятся к тому, что вы изучаете в этой книге.