Для чего нужны Chrome DevTools?

Chrome DevTools - это набор инструментов для создания и отладки веб-сайтов, встроенный в Google Chrome. Конечно, мы также можем их использовать в его версии с открытым исходным кодом; Хром.

Доступ к инструментам Chrome для разработчиков можно получить, нажав комбинацию клавиш Ctrl + Shift + I, а также наведя курсор на элемент и щелкнув правой кнопкой мыши на Inspect.

Компоненты

Когда мы открываем Chrome DevTools, мы видим, что появляется uпанель n справа от просматриваемой страницы. Со своей стороны, эта панель eОн разделен на вкладки, соответствующие каждому из инструментов.. В свою очередь инструменты разделены на разделы.
Разделы:

• Элементы: показывает различные компоненты страницы.
• Консоль: позволяет запускать диагностику во время разработки или взаимодействовать с кодом Javascript, как с терминалом Linux.
• Источники: упрощает отладку кода Javascript и работу с локальными файлами.
• Сеть: помогает отслеживать и улучшать производительность страницы.
• Временная шкала: позволяет записывать и исследовать различные события, происходящие во время посещения сайта.
• Приложение: исследует все загруженные ресурсы; Среди прочего, базы данных IndexedDB или Web SQL, локальное и сеансовое хранилище, файлы cookie, кеш приложений, изображения, шрифты и таблицы стилей.
• Безопасность: обнаруживает проблемы безопасности в коде.

Давайте посмотрим, для чего мы можем использовать Chrome DevTools.

Исправьте то, что не работает

Это случалось с каждым разработчиком. Напишите код, проверьте, нет ли ошибок, и все же в момент истины страница не работает должным образом. Инструмент консоли показывает, какая ошибка возникает во время выполнения.

Уменьшить время загрузки

Если страница загружается долго, пользователь устает и переходит на другой сайт. К счастью, эра Flash-сайтов и их анимированных заставок закончилась. В любом случае вкладка Networks в Chrome DevTools упрощает определение того, какие элементы задерживают нагрузку. Можем повторить тест для разных скоростей подключения.

Измените код

На вкладке "Элементы" мы можем просматривать элементы страницы, соответствующий html-код и свойства css. Мы также можем их изменить.

Мы можем редактировать текст страницы с помощью команды

document.designMode = 'on';

Попробуйте разные размеры экрана

Планшеты, смартфоны, смарт-телевизоры, настольные компьютеры. Список устройств, с которыми мы работаем в Интернете, постоянно растет. С помощью Chrome DevTools мы можем проверить, хорошо ли выглядит страница при разных размерах.

Производительность системы

В менеджменте термин бенчмаркинг означает изучение передового опыта тех, кто делает то же самое, что и мы. С помощью Chrome DevTolls, если нам нравится дизайн веб-сайта, мы можем просмотрите HTML-код и таблицы стилей CSS и скопируйте их на наш сайт.

Получение Chrome DevTools

Chrome DevTools доступен в браузерах Google Chrome и Chromium. Chromium находится в репозиториях основных дистрибутивов. Также его можно установить из магазинов. хватка. Что касается Google Chrome, вы можете иди сюда. в формате DEB и RPM