Инструменты разработчика

Чтение — около 7 минут· без учёта практики

В предыдущем уроке мы подключили общий файл стилей ко всем страницам сайта Тони. Ошибка в CSS не выводит сообщения на странице: браузер молча пропускает неверное объявление или не находит файл, и элемент остаётся без части оформления. Найти причину помогают инструменты разработчика (англ. Developer Tools, DevTools) — панель, встроенная в браузер.

Открывать её вы уже умеете из урока учебника HTML «Создание первой страницы»: щёлкните правой кнопкой мыши по элементу страницы и выберите «Просмотреть код» (Inspect) или нажмите F12 (на macOS — Cmd+Option+I). Теперь разберём, что в этой панели относится к CSS.

Элемент и его стили

Панель открывается на вкладке «Элементы» (Elements). Слева — дерево HTML-элементов страницы, справа — вкладки с информацией о выбранном элементе. Если открыть панель командой «Просмотреть код», выбранным сразу окажется элемент, по которому вы щёлкнули. Выбрать другой можно щелчком по строке в дереве.

Попробуйте на примере ниже. В его стилях нарочно допущены две ошибки. Щёлкните правой кнопкой мыши по заголовку в окне результата и выберите «Просмотреть код»: панель покажет элемент <h1> из этого примера.

Осмотр стилей: попробуйте сами

Откройте инструменты разработчика на заголовке и на абзаце результата. На вкладке «Стили» (Styles) найдите перечёркнутые объявления. На этой же вкладке в правиле для заголовка h1 исправьте значение middle на center, а в правиле для абзаца p — название свойства colr на color.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Осмотр стилей</title>
    <style>
      h1 {
        color: saddlebrown;
        text-align: middle; /* недопустимое значение */
      }
      p {
        color: red;
        colr: dimgray; /* опечатка в названии свойства */
        color: dimgray; /* это объявление записано позже и заменяет color: red */
      }
    </style>
  </head>
  <body>
    <h1>Привет! Меня зовут Тони</h1>
    <p>Я карликовый пинчер, и у меня есть свой сайт.</p>
  </body>
</html>

Вкладка Styles

На вкладке «Стили» (Styles) перечислены все правила, которые подходят выбранному элементу, — сверху те, что важнее. Каждое правило показано с селектором и блоком объявлений, как в CSS-файле. Справа от правила указан его источник: имя файла и номер строки, например style.css:7. Щелчок по нему открывает файл на нужной строке.

В списке также встречаются:

  • element.style — встроенные стили из атрибута style выбранного элемента. Если атрибута нет, блок пустой;
  • стили браузера (user agent stylesheet) — оформление по умолчанию, которое браузер задаёт сам: например, крупный жирный шрифт и отступы заголовков. Именно их вы видели на странице без подключённого файла;
  • унаследованные стили (Inherited from …) — свойства, которые элемент получил от родителя. Наследование мы разберём в отдельном уроке.

Перечёркнутые объявления

В этом примере рассмотрим две причины перечёркивания объявления. Отличить их помогает значок предупреждения:

  • Объявление заменено другим. Оно записано верно, но для того же свойства действует другое объявление: в примере у абзаца color: red перечёркнуто, потому что ниже в том же правиле записано color: dimgray. Как браузер выбирает между правилами, мы подробно разберём в уроке о каскаде.
  • Объявление ошибочное. Рядом с ним стоит жёлтый значок предупреждения. Наведите на него указатель — появится причина: «неизвестное название свойства» (Unknown property name) у colr или «недопустимое значение» (Invalid property value) у text-align: middle. Такое объявление браузер пропустил, как мы обсуждали в уроке «Введение в CSS».

Не всякое объявление без видимого эффекта перечёркивается. Некоторые свойства записаны верно, но не действуют при текущем способе расположения элемента. Chrome отмечает такие неактивные свойства бледным текстом и значком подсказки: наведите на него указатель, чтобы узнать причину.

Вкладка Computed

Вкладка «Вычисленные» (Computed) показывает итоговые значения свойств выбранного элемента — то, что браузер в результате применил, с учётом всех правил и стилей браузера. Найти свойство помогает поле фильтра: введите, например, color. Цвет может отображаться в другом формате, чем в CSS: например, saddlebrown — как rgb(139, 69, 19). Это один и тот же цвет; формат отображения зависит от настроек DevTools и самого цвета. Стрелка рядом со свойством раскрывает правила, которые его задавали, со ссылками на источник.

Вверху вкладки нарисована схема из вложенных прямоугольников — размеры содержимого и отступы элемента. Она пригодится в уроках о блочной модели и размерах элементов.

Загрузился ли файл стилей

Если на вкладке Styles нет правил из вашего файла, сначала проверьте, выбран ли нужный элемент: правила могут просто не подходить ему по селектору. Затем проверьте загрузку файла на вкладке «Сеть» (Network):

  1. Откройте вкладку «Сеть» (Network) в инструментах разработчика. Убедитесь, что запись запросов включена: круглая кнопка записи вверху панели красная. Если она серая, нажмите её.
  2. Обновите страницу (F5, на macOS — Cmd+R): запросы записываются, пока открыты инструменты разработчика и включена запись, даже если выбрана другая вкладка.
  3. Очистите поле фильтра и нажмите в строке фильтров кнопку CSS, чтобы оставить в списке только таблицы стилей.
    Проверка: в списке есть строка style.css.

Красная строка означает ошибку запроса, а не обязательно отсутствие файла: возможны также блокировка запроса, ошибка сервера или соединения. Посмотрите колонку «Статус» (Status): 404 при работе через сервер или ERR_FILE_NOT_FOUND при открытии страницы с диска означают, что файл не найден. В этом случае наведите указатель на имя файла: подсказка покажет полный адрес, по которому браузер его искал. По этому адресу видно, какая часть пути в <link> неверна. Та же ошибка появляется на вкладке «Консоль» (Console) — сообщение Failed to load resource или ERR_FILE_NOT_FOUND.

Если файла нет в списке, выберите фильтр Все (All), снимите другие фильтры и снова обновите страницу с включённой записью. Если запроса по-прежнему нет, проверьте подключение: элемент <link> в <head> должен содержать rel="stylesheet" и href с путём к файлу.

Проверьте себя

Выберите ответ — объяснение появится сразу. Ответ можно менять.

1. Как открыть инструменты разработчика сразу на нужном элементе страницы?
Показать ответ

Щёлкнуть по элементу правой кнопкой мыши и выбрать «Просмотреть код» — Панель откроется на вкладке «Элементы», и элемент, по которому вы щёлкнули, будет уже выбран.

2. На вкладке Styles объявление colr: dimgray; перечёркнуто, рядом — жёлтый значок предупреждения. Что это значит?
Показать ответ

Браузер не знает такого свойства и пропустил объявление — Значок предупреждения отмечает ошибочное объявление. Подсказка у значка — Unknown property name: в названии свойства опечатка.

3. В правиле записано p { color: red; color: dimgray; }. Какое объявление Chrome покажет перечёркнутым без значка предупреждения?
Показать ответ

color: red — Оба объявления верные, но для одного свойства действует записанное позже — color: dimgray. Первое заменено.

4. Вы изменили цвет заголовка на вкладке Styles, и он стал правильным. Что произойдёт после обновления страницы?
Показать ответ

Вернётся прежний цвет: правка в инструментах разработчика временная — Без дополнительной настройки сохранения браузер снова применит исходные стили. Чтобы исправление сохранилось, внесите его в файл в VS Code.

5. Где посмотреть, какой цвет в итоге получил элемент, если для него подходят несколько правил?
Показать ответ

На вкладке Computed — Computed показывает итоговые значения свойств, а стрелка рядом со свойством раскрывает правила, которые его задавали.

6. Страница игрушек без оформления, на вкладке Styles нет правил из style.css. На вкладке Network запрос style.css завершился с 404 или ERR_FILE_NOT_FOUND. Что проверить в первую очередь?
Показать ответ

Путь в атрибуте href элемента <link> — Эти ошибки означают, что файл не найден по указанному адресу. Подсказка у имени файла покажет, где браузер его искал; со страниц из pages путь начинается с ../.

Задание

Ожидаемый результат: главный заголовок выровнен по центру, подпись к фото серая, страница «Мои игрушки» оформлена так же, как остальные. На вкладке Styles нет объявлений со значком предупреждения, а на вкладке Network файл style.css загружается на каждой странице без ошибки.

Скачайте задание

css/style.css
CSS
/* Общие стили сайта Тони */
body {
  background-color: linen;
}

h1 {
  color: saddlebrown;
  text-align: middle;
}

h2 {
  color: #8B4513;
}

figcaption {
  colr: dimgray;
}

footer {
  background-color: hsl(30, 50%, 90%);
  text-align: center;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
    <title>Сайт Тони</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
          <li><a href="pages/signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1 id="top">Привет! Меня зовут Тони</h1>
      <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
      <p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
      <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      <ul>
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
        <li><a href="#schedule">Мой режим дня</a></li>
        <li><a href="#walks">Где я гуляю</a></li>
        <li><a href="#song">Песня для прогулок</a></li>
      </ul>
      <section>
        <h2 id="toy" class="section-title">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption>Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2>Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands" class="section-title">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <section>
        <h2 id="schedule">Мой режим дня</h2>
        <table>
          <caption>Режим дня Тони</caption>
          <thead>
            <tr>
              <th scope="col">Время</th>
              <th scope="col">Будни</th>
              <th scope="col">Выходные</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">07:00</th>
              <td>Прогулка, 20 минут</td>
              <td>Сплю</td>
            </tr>
            <tr>
              <th scope="row">08:00</th>
              <td colspan="2">Завтрак</td>
            </tr>
            <tr>
              <th scope="row">13:00</th>
              <td>Жду хозяина и сплю</td>
              <td>Прогулка в парке, 1 час</td>
            </tr>
            <tr>
              <th scope="row">19:00</th>
              <td colspan="2">Ужин</td>
            </tr>
            <tr>
              <th scope="row">21:00</th>
              <td colspan="2">Вечерняя прогулка</td>
            </tr>
          </tbody>
        </table>
      </section>
      <section>
        <h2 id="progress">Мои успехи</h2>
        <p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
        <p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
      </section>
      <section>
        <h2 id="walks">Где я гуляю</h2>
        <p>Я люблю гулять в сквере у дома.</p>
        <p>
          <a href="pages/walks.html" target="walk">Маршрут</a> |
          <a href="assets/tony.png" target="walk">Фото с прогулки</a>
        </p>
        <iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
        <h3>Видео с прогулки</h3>
        <p>Субтитры помогут, если вы смотрите видео без звука.</p>
        <video width="180" height="320" poster="assets/walk.jpg" controls>
          <source src="assets/walk.mp4" type="video/mp4">
          <track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
          <p><a href="assets/walk.mp4">Скачать видео</a></p>
        </video>
        <h3>Как я лаю</h3>
        <p>Так я разговариваю с хозяином — у нас целый диалог!</p>
        <audio controls>
          <source src="assets/bark.mp3" type="audio/mpeg">
          <p><a href="assets/bark.mp3">Скачать запись</a></p>
        </audio>
      </section>
      <section>
        <h2 id="song">Песня для прогулок</h2>
        <p>Хозяин включает эту песню, когда мы выходим гулять.</p>
        <iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
        <p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
      </section>
      <section>
        <h2>Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
        <figure>
          <blockquote>
            <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
          </blockquote>
          <figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
        </figure>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/signup.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Запишитесь на совместную прогулку с карликовым пинчером Тони.">
    <title>Запись на прогулку с Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Запись на прогулку</h1>
      <p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
      <p><a href="../index.html#walks">Где мы гуляем</a></p>
      <form>
        <fieldset>
          <legend>О вас</legend>
          <p>
            <label for="owner">Ваше имя</label>
            <input type="text" id="owner" name="owner" autocomplete="name" required>
          </p>
          <p>
            <label for="email">Электронная почта</label>
            <input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required>
          </p>
        </fieldset>
        <fieldset>
          <legend>Ваша собака</legend>
          <p>
            <label for="breed">Порода</label>
            <input type="text" id="breed" name="breed" list="breeds">
            <datalist id="breeds">
              <option value="Карликовый пинчер"></option>
              <option value="Такса"></option>
              <option value="Йоркширский терьер"></option>
              <option value="Беспородная"></option>
            </datalist>
          </p>
          <p>
            <label for="dogs">Сколько собак придёт</label>
            <input type="number" id="dogs" name="dogs" min="1" max="3" value="1">
          </p>
        </fieldset>
        <fieldset>
          <legend>Когда гулять</legend>
          <p>
            <label for="date">Дата</label>
            <input type="date" id="date" name="date" required>
          </p>
          <label><input type="radio" name="time" value="morning" checked> Утром</label>
          <label><input type="radio" name="time" value="evening"> Вечером</label>
        </fieldset>
        <fieldset>
          <legend>Прогулка</legend>
          <p>
            <label for="leader">Ведёт прогулку</label>
            <input type="text" id="leader" name="leader" value="Тони" readonly>
          </p>
          <p>
            <label for="route">Маршрут</label>
            <select id="route" name="route">
              <optgroup label="В городе">
                <option value="square">Сквер у дома</option>
                <option value="pond" selected>Пруд с утками</option>
              </optgroup>
              <optgroup label="За городом">
                <option value="forest">Лес</option>
                <option value="river" disabled>Берег реки — закрыт до весны</option>
              </optgroup>
            </select>
          </p>
          <p>
            <label for="wishes">Пожелания</label><br>
            <textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
          </p>
        </fieldset>
        <fieldset>
          <legend>Что взять с собой</legend>
          <label><input type="checkbox" name="take" value="ball"> Мячик</label>
          <label><input type="checkbox" name="take" value="rope"> Канат</label>
        </fieldset>
        <p>
          <button type="submit">Записаться на прогулку</button>
          <button type="reset">Очистить форму</button>
        </p>
      </form>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/toys.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Любимые игрушки Тони и правила игры в канат.">
    <title>Игрушки Тони</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <section>
        <h2 id="album">Мой фотоальбом</h2>
        <ul>
          <li>
            <figure>
              <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
              <figcaption>Я в детстве</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
              <figcaption>С плюшевой белкой</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
              <figcaption>В худи для холодной погоды</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
              <figcaption>Шлейка надета — идём гулять!</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
              <figcaption>Смеюсь над шуткой хозяина</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
              <figcaption>После прогулки</figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/walks.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом.">
    <title>Где гуляет Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <h1>Мой маршрут</h1>
    <ol>
      <li>Сквер у дома.</li>
      <li>Пруд с утками.</li>
      <li>Поляна для игры с канатом.</li>
    </ol>
  </body>
</html>

Если какую-то ошибку найти не получается, нажмите в редакторе «Показать решение» и сравните исправленные файлы со своими. В следующем уроке мы вернёмся к своему my-site и будем выбирать элементы разными селекторами, проверяя результат на вкладке Styles.