1 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Проще всего увидеть использование HTTP API прямо в браузере. Для удобства разработки и тестирования браузеры включают в себя<strong>панель разработчика</strong>- с ее помощью можно полностью проанализировать страницу, процессы, происходящие внутри и HTTP-запросы.</p>
1
<p>Проще всего увидеть использование HTTP API прямо в браузере. Для удобства разработки и тестирования браузеры включают в себя<strong>панель разработчика</strong>- с ее помощью можно полностью проанализировать страницу, процессы, происходящие внутри и HTTP-запросы.</p>
2
<p>В этом уроке мы обсудим, как работать с этой панелью и узнавать полезную информацию.</p>
2
<p>В этом уроке мы обсудим, как работать с этой панелью и узнавать полезную информацию.</p>
3
<p>Чтобы открыть панель разработчика у себя в браузере, воспользуйтесь<a>статьей</a>. В этом курсе мы будем пользоваться панелью браузера Chrome:</p>
3
<p>Чтобы открыть панель разработчика у себя в браузере, воспользуйтесь<a>статьей</a>. В этом курсе мы будем пользоваться панелью браузера Chrome:</p>
4
<p>Остальные браузеры работают почти идентично, поэтому будет несложно повторять то же самое в других браузерах.</p>
4
<p>Остальные браузеры работают почти идентично, поэтому будет несложно повторять то же самое в других браузерах.</p>
5
+
<h2>Chrome DevTools</h2>
5
<p>Здесь нас интересует вкладка<em>Network</em>. На ней отображаются все запросы, которые выполняет браузер в процессе загрузки страницы. Также здесь показаны картинки, шрифты, файлы стилей, JavaScript и HTML самой страницы:</p>
6
<p>Здесь нас интересует вкладка<em>Network</em>. На ней отображаются все запросы, которые выполняет браузер в процессе загрузки страницы. Также здесь показаны картинки, шрифты, файлы стилей, JavaScript и HTML самой страницы:</p>
6
<p>На каждый из загружаемых ресурсов можно нажать. Появится еще несколько вкладок с информацией, какой HTTP-запрос был отправлен и какой HTTP-ответ был получен. Здесь можно увидеть все заголовки и превью загруженного ресурса:</p>
7
<p>На каждый из загружаемых ресурсов можно нажать. Появится еще несколько вкладок с информацией, какой HTTP-запрос был отправлен и какой HTTP-ответ был получен. Здесь можно увидеть все заголовки и превью загруженного ресурса:</p>
7
<p>В этой же вкладке появляются запросы к HTTP API, которые выполняются на странице, использующей API.</p>
8
<p>В этой же вкладке появляются запросы к HTTP API, которые выполняются на странице, использующей API.</p>
8
<p>Чтобы отделить запросы к HTTP API от всего остального, на вкладке<em>Network</em>нужно нажать кнопку<em>Fetch/XHR</em>. Тогда в списке загружаемых ресурсов останутся ресурсы с типом<em>xhr</em>. Это и есть запросы к HTTP API.</p>
9
<p>Чтобы отделить запросы к HTTP API от всего остального, на вкладке<em>Network</em>нужно нажать кнопку<em>Fetch/XHR</em>. Тогда в списке загружаемых ресурсов останутся ресурсы с типом<em>xhr</em>. Это и есть запросы к HTTP API.</p>
9
<p>Возьмем для примера форму входа. Когда пользователь авторизуется на сайте, то сайт выполняет запрос (или несколько запросов) к API. Можете самостоятельно проверить, как это работает:</p>
10
<p>Возьмем для примера форму входа. Когда пользователь авторизуется на сайте, то сайт выполняет запрос (или несколько запросов) к API. Можете самостоятельно проверить, как это работает:</p>
10
<ol><li>Перейдите на сайт<a>https://frontend-chat-ru.hexlet.app/</a></li>
11
<ol><li>Перейдите на сайт<a>https://frontend-chat-ru.hexlet.app/</a></li>
11
<li>Откройте панель разработчика, перейдите на вкладку<em>Network</em>и нажмите<em>Fetch/XHR</em></li>
12
<li>Откройте панель разработчика, перейдите на вкладку<em>Network</em>и нажмите<em>Fetch/XHR</em></li>
12
<li>Введите данные для входа: имя admin и пароль admin</li>
13
<li>Введите данные для входа: имя admin и пароль admin</li>
13
<li>Изучите запросы, посмотрите на URL, HTTP-заголовки, HTTP-метод, код ответа и отправленные данные -<em>тело запроса</em></li>
14
<li>Изучите запросы, посмотрите на URL, HTTP-заголовки, HTTP-метод, код ответа и отправленные данные -<em>тело запроса</em></li>
14
</ol><p>Точно таким же образом можно изучать любой сайт.</p>
15
</ol><p>Точно таким же образом можно изучать любой сайт.</p>