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

Скриншот Chrome DevTools

С помощью 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


Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.

Будьте первым, чтобы комментировать

Оставьте свой комментарий

Ваш электронный адрес не будет опубликован.

*

*

  1. Ответственный за данные: AB Internet Networks 2008 SL
  2. Назначение данных: контроль спама, управление комментариями.
  3. Легитимация: ваше согласие
  4. Передача данных: данные не будут переданы третьим лицам, кроме как по закону.
  5. Хранение данных: база данных, размещенная в Occentus Networks (ЕС)
  6. Права: в любое время вы можете ограничить, восстановить и удалить свою информацию.

bool (истина)