Инструменты разработчика могут быть отличным союзником, если вы разработчик. Особенно если ты новенький. Но что такое Инструменты разработчика и как они могут облегчить вашу жизнь?
Это набор инструментов, который дает вам возможность изменять, тестировать или видеть, как работает ваш код.
В каждом браузере есть набор инструментов, но между ними есть небольшие различия. Это причина, по которой мы собираемся сосредоточиться на Google Chrome, а не на других. В этом браузере эти инструменты называются DevTools.
Теперь, когда мы знаем, что такое DevTools, пора узнать, как его использовать и почему. Если вы когда-нибудь использовали DevTools, вам нужно знать, как открыть его в Google Chrome. Вы можете сделать это тремя разными способами:
- Прежде всего, вам нужно перейти в меню, затем выбрать «Дополнительные инструменты» и, наконец, «Инструменты разработчика».
- На клавиатуре вы можете одновременно нажать «Ctrl + CapLock + I (Windows)» или «Cmd + Opcion + I (Mac)».
- Щелкните правой кнопкой мыши и выберите «Проверить».
На снимках экрана ниже вы можете увидеть пример первого варианта.
После того, как вы его откроете, вы найдете 8 частей для проверки веб-сайта:
- Элементы, вы можете проверять и редактировать код в реальном времени как для CSS, так и для HTML. Ваши изменения не будут сохранены, потому что во время обновления или ухода с веб-сайта они вернутся к исходному коду.
Например, вы можете изменить имя класса, добавить новый атрибут или даже изменить его значения.
- Консоль, она предоставляет две функции при тестировании веб-страниц. Первый - это регистрация диагностической информации в процессе разработки, а второй - как оболочка для взаимодействия с кодом JavaScript.
- Источники для быстрой и эффективной отладки кода JavaScript.
- Сеть, эта панель предоставляет информацию о некоторых ресурсах, которые запрашиваются и загружаются по сети в режиме реального времени. Это хороший способ оптимизировать вашу страницу.
- Временная шкала, чтобы предложить обзор времени, затраченного на загрузку и использование вашего Интернета.
- Профиль, он помогает оптимизировать код и понимать, на что тратятся ресурсы.
- Приложение, чтобы проверить все ресурсы.
- Безопасность для устранения проблем с вашим сертификатом.
Все они полезны по нескольким причинам, и, если вы дадите им шанс, вы не сможете работать без них. Мы можем увидеть преимущества Devtools с двух точек зрения:
Если вы используете эти инструменты для проверки кода вашего собственного проекта, вы сразу увидите ошибки или ошибки и попытаетесь найти решение в режиме реального времени, не удаляя код. Более того, если вас не устраивает какая-либо часть вашей сети, вы можете внести в нее изменения, прежде чем их окончательно внедрить. И одна из самых важных вещей - это то, что вы можете видеть, сколько времени требуется для загрузки вашего веб-сайта и какие элементы задерживаются больше всего.
С другой стороны, вы можете открыть Devtools, чтобы увидеть код чужих веб-сайтов. Это действительно практично, если вы хотите узнать, как они создают определенную часть своей сети, или если вам нужно что-то сделать в своей сети, но у вас нет знаний для ее разработки.
В качестве плюса мы увидим несколько интересных трюков, которые, несомненно, сделают работу с Devtools еще лучше:
Если мы нажмем кнопку в верхнем левом углу или выполним команду (CTRL + SHIFT + C), мы также сможем навести указатель мыши на страницу и увидеть теги HTML (которые выделены), их размеры или свойства. нашего CSS, которые применяются к элементу.
Как уже упоминалось, когда мы разрабатываем веб-страницу, очень практично, если мы можем изменить или отредактировать некоторые функции как в HTML, так и в CSS, чтобы получить ожидаемый результат. С помощью Devtools мы также можем проверить, правильно ли применяется метка или правило. Как мы это видим? Атрибут будет отмечен сквозной линией.
В заключение, Devtools - это набор инструментов, у которых вы можете воспользоваться множеством преимуществ. Но важно помнить, что собственный интерфейс браузера запускается из нашей системы, поэтому мы вносим изменения, но временно.
