Содержание
Браузеры
Как было сказано выше, консоль Chrome DevTools присутствует в любом браузере созданном на движке Chromium. А это, на минуточку, подавляющее большинство всех имеющихся браузеров на данный момент.
Opera (+темная тема консоли)
Opera GX (темная тема консоли)
Micosoft Edge (+темная тема консоли)
Добавьте к этому списку любой веб-браузер выпущенный любой другой компанией, и он с 90% вероятностью, будет основан так же на движке Chromium.
Как открыть консоль разработчика
Консоль разработчика можно открыть нажатием клавиши F12 или сочетанием клавиш CTRL+SHIFT+I, в активном окне браузера. Либо через дебри стандартного меню браузера. Так как данное меню у каждого издателя свое, то предыдущий способ более предпочтителен.
Возможности консоли разработчика
Возможности консоли уже далеко выросли за рамки обычной отладки. Это многофункциональный инструмент, со встроенным, отдельным редактором кода. Рассмотрим самые интересные разделы консоли разработчика.
Вкладка Elements. Изменение визуальных свойство страницы. Удаление/изменение/добавление элементов на страницу, изменение стилей, и все это на лету.
Вкладка Colsole. JavaScript-консоль текущей открытой страницы. Позволяет в активном режиме работать с кодом страницы, и внедрять свой код при необходимости.
Вкладка Sources. Отображает все исходные файлы из которых состоит страница. Кроме этого на этой вкладке можно осуществлять полноценную отладку кода по шагам, с просмотром состояния памяти, и с возможностью ее изменения.
Вкладка Application. Доступ к сохраненной веб-приложением информации, такой как куки, локальное хранилище, и данные сессии.
Это основные вкладки с которыми позже нам предстоит иметь дело. Может показаться, что не очень впечатляюще. Но поверьте, с помощью данных вкладок, можно кардинально менять работу веб-приложения. И об этом будет рассказано на страницах этого сайта.
Другие браузеры, такие как FireFox, IE, имеют схожие вкладки в своих консолях, но консоль Chrome DevTools все же удобнее, и функциональнее, на мой взгляд.
