Современные браузеры, например Safari, Firefox, Edge, Chrome, Яндекс и другие — имеют встроенные инструменты разработчика (Devtools). С их помощью можно посмотреть исходный код сайта, какая информация хранится в cookie, а какая в local storage. Проверить какие запросы отправляет сайт и какие ответы присылает сервер. И много что ещё.

<aside> 💡 Мы рассмотрим инструменты разработчика на примере Chrome DevTools

</aside>

Как открыть Chrome DevTools?

  1. Первый способ — нажать в браузере правой кнопкой мыши и в открывшемся списке выбрать последний пункт Просмотреть код/Inspect

гиф.gif

  1. Второй способ — воспользоваться горячими клавишами
OS Elements Console Выбор последней панели
Windows or Linux Ctrl + Shift + C Ctrl + Shift + J F12
Ctrl + Shift + I
Mac Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

Запомнить легко:

  1. Тут можно посмотреть как открыть Devtools в разных браузерах (жмак)

Вкладка Elements

2023-08-07_18-13-53.png

Вкладка Elements содержит две кнопки: