Начало работы с инструментами разработчика Google Chrome
Откройте Google Chrome. Создайте новую вкладку и введите в адресную строку mdn (Mozilla Developer Network), перейдя по первой ссылке. Перейдите в Настройки, затем Дополнительные инструменты, и выберите Инструменты разработчика. Откроется окно с меню Элементы, Консоль, Источники, Сеть и другими. Размер окна можно изменить или закрепить его справа.
Исследование структуры HTML и JavaScript-кода
Вкладка Элементы отображает структуру HTML-документа: теги <html>, <head>, <body> и другие. Внутри <body> могут находиться <ul>, <header>, <main>, <footer> и т.д. Теги <script> содержат JavaScript-код. В некоторых он встраивается непосредственно в HTML, в других атрибут src указывает на внешний JavaScript-файл. URL из атрибута src можно скопировать и открыть в новой вкладке для просмотра содержимого файла.
Изучение загруженных файлов с помощью вкладки «Сеть»
Вкладка Сеть отображает все загруженные файлы. Нажмите кнопку обновления страницы. Таблица содержит имя файла, код состояния сервера (200 — успешная загрузка), тип файла (SVG, stylesheet, script, PNG, font и др.) и размер. Файлы из кэша можно отключить для просмотра загрузки. Сортировка возможна по размеру или типу.
Кликнув на файл CSS, вы увидите его содержимое. Кнопка «Pretty print» форматирует код. Аналогично можно просмотреть JavaScript-файлы. Имена некоторых файлов (например, main.js) могут содержать случайно сгенерированные номера для загрузки новой версии при каждом изменении. При отключенном кэше файлы загружаются повторно при обновлении страницы; при включенном — берутся из памяти.
Рассмотрим JavaScript-файл (например, main.js). После форматирования видны функции, условные операторы (if, else), тернарный оператор, объявления переменных, объектные литералы.
Анализ JavaScript-файлов на сайте React
Введите react в поисковой строке. В инструментах разработчика отфильтруйте список загруженных файлов по HTML-документам и найдите react.js.org. В конце HTML-документа найдите теги <script>, указывающие на JavaScript-файлы с автоматически генерируемыми именами. Просмотрите один из этих файлов. Код может быть оптимизирован и минифицирован, что снижает читаемость, но уменьшает размер файла. Вкладка «Headers» содержит информацию о файле, включая заголовки запроса и ответа.
Каждый веб-сайт посылает браузеру файлы: JavaScript, CSS, изображения, HTML-документ. Браузер отвечает за рендеринг и выполнение JavaScript-кода. JavaScript встроен в браузер и выполняется автоматически. Инструменты разработчика позволяют исследовать загруженные файлы и их содержимое.