Открой встроенные инструменты браузера, чтобы исследовать, тестировать и диагностировать страницу.
Открыть этот урок в KodokonВ твоём браузере спрятана целая мастерская: уже установленная, бесплатная и такая, которую большинство людей никогда не откроет. Она называется инструменты разработчика, часто сокращённо devtools. Чтобы их открыть, нажми F12 или кликни правой кнопкой в любом месте страницы и выбери "Просмотреть код". На Mac сочетание клавиш - Cmd + Option + I. Сбоку или внизу окна откроется панель с несколькими вкладками.
Первая вкладка, которая в разных браузерах называется Elements или Инспектор, показывает HTML страницы в том виде, в каком он существует прямо сейчас в памяти браузера. Наведи курсор на строку: соответствующая область подсветится на странице. Дважды кликни по тексту: его можно переписать и мгновенно увидеть изменение. Это лучший способ понять, как устроена страница, разбирая чужие.
Вкладка Console - та, в которой ты будешь проводить больше всего времени. Она красным показывает сообщения об ошибках, когда что-то ломается, а ещё принимает команды, которые ты вводишь сам: они выполняются в контексте открытой страницы. Попробуй на любом сайте: набери строку, нажми Enter и посмотри, что получится.
document.title
document.querySelectorAll("a").length
document.body.style.background = "gold"Вкладка Network делает видимым всё, о чём ты узнал в предыдущих уроках. Открой её и перезагрузи страницу клавишей F5: каждый запрос появится отдельной строкой, с адресом, методом, кодом статуса, размером и потраченным временем. Красная строка означает неудавшийся запрос. Именно здесь обнаруживается, например, что изображение не показывается, потому что возвращает 404.