Браузер получает страницу и связанные с ней файлы, выполняет код и показывает результат. При открытии сайта браузер обычно делает несколько запросов, причём каждый может закончиться по-своему.
Вы собрали сайт с ИИ: заголовок есть, кнопка есть, а товары не появились. Где искать причину? Проследим путь одной страницы. Для спокойного разбора непонятных ответов пригодится помощник в Ное: инструкцию дадим ниже.
Коротко
- Имя сайта помогает найти нужный сетевой адрес. Затем браузер обращается к серверу и получает ответ.
- Страница, оформление, программа в браузере и данные могут приходить отдельными запросами.
- Во вкладке Network («Сеть») видно, что браузер попросил и что получил.
- В нашем учебном сайте документ загрузился успешно, а при отказе отдельного запроса каталог остался пустым. Поэтому смотреть нужно на запрос, который отвечает за пропавшую часть.
Что происходит между ссылкой и страницей
Начнём с адреса вроде https://example.com/catalog. example.com называется доменным именем: это понятное человеку название сайта. Путь /catalog указывает, какую страницу или данные мы просим у этого сайта. example.com здесь служит примером, свой проект по этому адресу искать не надо.
Чтобы связаться с сервером, нужен сетевой адрес. DNS (Domain Name System, система доменных имён) помогает узнать его по имени сайта. IP расшифровывается как Internet Protocol, интернет-протокол; IP-адресом называют адрес устройства в сети. У большого сайта адресов может быть несколько, а нужный ответ уже может храниться в памяти браузера или системы.
Дальше браузер устанавливает соединение. У адреса с https обмен защищён шифрованием: постороннему по пути сложнее прочитать или изменить передаваемые данные. Защиту обеспечивает TLS (Transport Layer Security), протокол защиты соединения. Это не оценка честности владельца сайта: мошенническая страница тоже может использовать HTTPS.
Браузер отправляет запрос, сервер отвечает. HTTP (Hypertext Transfer Protocol, протокол передачи гипертекста) описывает этот обмен. В запросе есть адрес и действие, в ответе — код результата и содержимое. HTTPS расшифровывается как Hypertext Transfer Protocol Secure, защищённый вариант HTTP. Тот же обмен идёт по защищённому соединению. Общую схему объясняет учебник MDN.
Этого достаточно для первой карты: имя → сетевой адрес → соединение → запрос → ответ. Различия между устройствами и старыми сохранёнными ответами разобраны отдельно в статье про DNS и кеш. Сейчас пойдём дальше: ответ пришёл — как из него получается страница?
Откуда берутся текст, оформление и товары
Сервер может прислать HTML (HyperText Markup Language, язык разметки гипертекста). Он описывает элементы страницы: заголовок, абзац, ссылку, форму. Браузер читает разметку и создаёт из неё структуру документа.
CSS (Cascading Style Sheets, каскадные таблицы стилей) задают внешний вид: размер букв, цвет кнопки, расстояния. На языке программирования JavaScript пишут код, который может обрабатывать нажатия, запрашивать данные и менять страницу. Это название, а не сокращение, и с языком Java его путать не нужно.
В нашей «Учебной мастерской» HTML приносит заголовок и форму, CSS оформляет их, JavaScript отдельно просит каталог. Сервер возвращает название «Полка» и цену 1500 рублей. Только после этого на странице появляется «Полка — 1500 ₽». Товар и цена вымышленные; сайт мы действительно запустили и проверили в браузере.
Порядок не у всех сайтов одинаковый. Сервер может сразу прислать готовый список товаров в HTML. Часть оформления и кода бывает встроена в документ. В других проектах данных приходится ждать отдельно. Какой вариант у вас, лучше увидеть в запросах, чем угадывать по внешнему виду. MDN показывает, как браузер разбирает и отображает полученные файлы.
Как увидеть запросы своими глазами
Откройте свой учебный сайт в настольном Chrome или другом браузере на его основе. Через меню выберите «Дополнительные инструменты» → «Инструменты разработчика». Это встроенная панель для просмотра устройства страницы; ничего устанавливать не нужно.
- Перейдите на вкладку Network, по-русски «Сеть». Откройте её до перезагрузки: иначе начало загрузки не попадёт в список.
- Перезагрузите страницу. Каждая строка показывает отдельное обращение браузера за документом, файлом или данными.
- Найдите строку с типом document, то есть основной документ. Посмотрите адрес, Status («Статус») и Response («Ответ»).
- Включите фильтр Fetch/XHR. Он помогает найти запросы, которые программа страницы делает за данными. XHR расшифровывается как XMLHttpRequest: так называется один из способов таких обращений. Fetch предлагает более новый способ, тоже доступный коду браузера.
- Выберите запрос каталога. Сравните его ответ с тем, что появилось на странице. В нашем примере это
/api/catalog и пара значений: «Полка», 1500.
Названия вкладок немного различаются между браузерами и языками интерфейса. В официальном руководстве Chrome показано, где находятся статус, тип ресурса и ответ. Пока достаточно прочитать эти три вещи; разбирать всю панель сразу не нужно.
В учебном опыте получили такую картину:
200 означает успешный ответ на конкретный запрос. Он не подтверждает успех остальных строк. Не ждите ровно четыре запроса у своего сайта: там могут быть картинки, шрифты и другие обращения.
Почему страница открылась, а каталог не загрузился
Мы заблокировали в учебном браузере только обращение к /api/catalog. Заголовок и форма остались на месте. Вместо товара появилось «Каталог не загрузился».
Если смотреть только на основной документ, всё выглядит благополучно: он получил 200. Но цена приходит другим путём, и этот путь оборвался. Править HTML-заголовок в такой ситуации бессмысленно — он уже работает.
Такое различие помогает давать ИИ точное задание. Вместо «сайт сломался, почини» можно написать: «Страница открывается. Товары не появляются. Запрос каталога завершился ошибкой, вот его адрес и ответ». Помощник получит отправную точку для поиска.
Есть и обратная ситуация: данные пришли, но JavaScript не смог их показать. Тогда ответ каталога будет успешным, а проблему придётся искать в обработке полученного результата. Этому посвятим урок о поиске ошибки с ИИ.
Что попросить у помощника в своём проекте
Этот запрос предназначен для Claude Code, Codex, Antigravity или другого помощника, который уже работает с файлами вашего проекта. Возможность открыть браузер и запустить проект зависит от его среды. Попросите сначала показать устройство, не переделывать сайт.
Помоги мне понять, как открывается одна страница этого проекта. Я пока учусь программированию.
Страница: [путь страницы]. Элемент, за которым наблюдаю: [товар, список или кнопка].
1. Найди по файлам, откуда приходит основной документ и какой код показывает выбранный элемент. Укажи точные файлы и объясни их роль простыми словами.
2. Покажи, получает ли элемент данные вместе с документом или отдельным запросом. Если запроса нет, скажи прямо. Не придумывай устройство по названию папки.
3. Объясни, где я увижу этот запрос в Network, что должно быть в ответе и какое изменение страницы с ним связано. Расшифруй новые термины рядом с примером.
4. Если безопасный локальный запуск доступен, предложи его команду. Отдели увиденное в запуске от того, что удалось узнать только из файлов. Не обращайся к рабочей базе и не публикуй изменения.
5. Закончи короткой картой: адрес страницы → нужный файл → запрос, если он есть → данные → элемент на экране. Если данных не хватает, назови, что нужно открыть или уточнить.
Код и настройки пока не меняй.
А если задача — собрать собственный прототип, в студии Нои можно начать с небольшой страницы. Затем полезно проследить хотя бы один её запрос: понимание останется с вами и при смене инструмента.
Как разобрать незнакомый ответ без доступа к коду
Текстовый помощник может объяснить то, что вы ему прислали. Для этого ему не нужен доступ ко всему проекту. Сначала уберите из ответа пароли, ключи, содержимое Cookie и чужие данные. Cookie — небольшие данные браузера для сайта; среди них могут быть сведения о входе в аккаунт.
Ты объясняешь начинающему, как браузер получает страницу и данные. Работай только с описанием и фрагментами, которые прислал человек. У тебя нет доступа к его проекту, браузеру или серверу.
Вводные:
Страница и ожидаемый элемент: [описание].
Запросы и статусы: [адреса без секретов, коды результата].
Фрагмент ответа: [обезличенный текст].
Что видно на странице: [наблюдение].
1. Коротко объясни, что произошло с основным документом и отдельно с данными выбранного элемента. Если связь между запросом и элементом неизвестна, обозначь это.
2. Переведи незнакомые слова и коды обычным языком. Не считай успешную загрузку документа подтверждением успеха всех запросов.
3. Раздели факты из вводных и возможные объяснения. Не объявляй причину найденной без подходящего свидетельства.
4. Назови один следующий безопасный просмотр во вкладке Network и ожидаемый результат. Ничего не предлагай удалять, оплачивать или менять в рабочем сервисе.
5. Выведи ответ в формате: «Что известно», «Чего пока не знаем», «Куда посмотреть дальше». Если вводных не хватает, задай не больше двух точных вопросов. Не выдумывай адреса, ответы или выполненные действия.
Ответ не длиннее 1200 знаков, без вложенных списков. Формулируй понятными короткими фразами. По коду 200 не утверждай, что код страницы выполнился правильно; по тексту ошибки не устанавливай причину сбоя хранилища.
Создайте в Ное помощника для разбора устройства сайта и поставьте ему эту инструкцию. Можно возвращаться с новыми обезличенными примерами из своей практики: помощник объясняет ответы и предлагает следующий шаг проверки. Сам сайт он этой перепиской не проверяет и файлы проекта не меняет.
В пробе мы описали белую страницу и попросили подтвердить догадку про DNS. Помощник ответил: «Нет подтверждения, что именно DNS “сломался”» — и предложил сначала посмотреть запрос документа. Это полезный ход: до замены файлов собрать недостающее наблюдение. В другой пробе он отделил успешную загрузку HTML от отказа каталога.
С чего начать прямо сейчас
Откройте Network на своей учебной странице. Найдите основной документ, а затем один запрос за данными. Скажите своими словами, что получил браузер и где это видно на экране.
Следующий шаг — проследить заявку от формы до базы данных. А если вопрос в том, почему свежая правка ещё не появилась у посетителей, пригодится объяснение CI/CD и деплоя.
Частые вопросы
Интернет и браузер — одно и то же?
Нет. Интернет связывает устройства и сети. Браузер — одна из программ, которые используют это соединение. Почта и мессенджер тоже работают по сети, но для обмена сообщениями им не обязательно открывать веб-страницу.
DNS запрашивается при каждом открытии сайта?
Не обязательно. Ранее полученный ответ может сохраняться у браузера, системы или промежуточного сервиса. Поэтому путь с обращением к DNS — общая схема, а не обещание отдельного нового запроса при каждом клике.
Если открыть файл HTML двойным кликом, всё будет работать?
Простая разметка может отобразиться. Но это не тот же запуск, что через сервер: запросы за данными и другие возможности могут зависеть от адреса и правил браузера. Для проекта используйте описанный в нём способ локального запуска.
Почему у меня нет запроса с названием catalog?
Мы так назвали путь в учебном сайте. В вашем проекте он может называться иначе, а товары могут прийти сразу в документе. Ищите связь с нужным элементом, не совпадение имени с примером.
Нужно ли отправлять ИИ всю выгрузку Network?
Обычно для первого вопроса хватит адреса одного запроса, его статуса и небольшого обезличенного ответа. Полная выгрузка может содержать данные входа и личные сведения. Не публикуйте её целиком.
Вывод
Начните с одной видимой детали: цены, списка или сообщения. Найдите, каким ответом она приходит в браузер. После этого «сайт не работает» превращается в конкретный вопрос, с которым проще разобраться и вам, и ИИ.
