Google Chrome является одним из популярных веб-браузеров для веб-разработки благодаря своим расширенным возможностям. Инструменты разработчика Chrome могут быть очень полезны при отладке. Большинство из нас уже знают, что мы можем редактировать живой CSS с помощью Chrome Dev Tools, но есть и другие советы, которыми мы поделимся с вами сегодня.
Советы по разработке инструментов Chrome
В Chrome Dev Tools есть много неизвестных и скрытых трюков, и мы рассмотрим наиболее полезные из них. Чтобы открыть инструменты разработчика в Chrome, нажмите F12 на клавиатуре и попробуйте следующие приемы.
1. Найти и открыть любой файл
Когда мы занимаемся веб-разработкой, мы имеем дело со многими HTML, CSS, JS и другими файлами. Когда мы хотим что-то отладить, мы открываем инструменты Chrome Dev. Вы можете быстро найти и найти нужный файл, чтобы упростить свою работу. Просто нажмите Ctrl + P и начните вводить имя файла. Это поможет вам найти конкретный файл из списка файлов.
2. Поиск в исходном файле
В предыдущем трюке мы узнали, как искать определенный файл. Вы можете даже искать определенную строку во всех загруженных файлах. Нажмите Ctrl + Shift + F , чтобы найти строку в файлах. Он также поддерживает регулярные выражения.
3. Перейти к определенной строке
После того как вы открыли любой исходный файл и хотите перейти к определенной строке, нажмите Ctrl + G , введите номер строки и нажмите ввод.
4. Выбор элементов DOM на вкладке консоли
Dev Tools также позволяет выбирать элементы в консоли.
- $ () – Возвращает первое вхождение соответствующего селектора CSS.
- $$ () – . Возвращает массив элементов, соответствующих данному CSS-селектору.
Для получения дополнительных команд консоли перейдите к этому сообщению.
5. Используйте несколько кареток
Иногда вы хотите установить несколько карет в разных местах, и вы можете легко сделать это с помощью инструментов Chrome Dev, удерживая клавишу Ctrl и щелкая там, где вы хотите разместить их. Затем начните писать, и вы увидите, что находится в разных местах, выбранных.
6. Сохранить журнал
Сохранение журнала помогает сохранить журнал даже после загрузки страницы. Установите флажок рядом с Сохранить журнал в журнале консоли, и журнал будет сохранен. Это показывает журнал перед страницей в выгруженном и полезно для расследования ошибок.
7. Использовать встроенный код для улучшения
В Chrome Dev Tools есть встроенный код, называемый pretty print «{}». Инструмент разработчика показывает свернутый код и не так легко читается. Нажмите на красивую кнопку печати, которая показана внизу слева в открытом исходном файле, чтобы показать исходный файл в удобочитаемом формате.
8. Ваш сайт подходит для мобильных устройств? Проверьте это здесь
Chrome Dev Tools также позволяет нам проверять, является ли сайт мобильным или нет. Вы можете проверить, как ваш сайт выглядит на разных устройствах. Перейдите к инструментам Chrome Dev и на вкладке Эмуляция вы можете зарегистрировать различные устройства. Выберите нужное устройство и проверьте, как ваш сайт выглядит на этом устройстве.
Для получения дополнительной информации посмотрите следующее видео.
9. Эмулировать датчики и географическое местоположение
Вы даже можете эмулировать сенсоры, такие как сенсорный экран и акселерометры. Вы даже можете подражать географическому положению. Для этого перейдите в раздел Эмуляция -> Датчики.
10. Выбрать следующее вхождение текущего слова
Если вы хотите заменить слово Во всем его вхождении, выберите слово и нажмите Ctrl + D , чтобы выбрать следующее вхождение выбранного слова. Вы можете редактировать это слово во всех его вхождениях за один раз.
11. Изменить формат цвета
Просто используйте Shift + Click в окне предварительного просмотра цвета, чтобы изменить параметры форматирования rgba, шестнадцатеричное и hsl.
12.Добавить изменения в локальные файлы через рабочую область
Мы можем редактировать исходные файлы и вносить некоторые изменения в CSS, Java Script и другие файлы в инструментах Chrome Dev. Чтобы добавить эти изменения в локальные файлы, нет необходимости копировать и вставлять изменения из рабочей области в файлы на диске. Инструменты Chrome Dev позволяют сопоставлять файлы и обновлять локальный файл с изменениями, которые вы сделали в инструментах разработчика. Чтобы сделать это, щелкните правой кнопкой мыши исходный файл с левой стороны на вкладке Источники и выберите Добавить папку в рабочую область.
Для получения дополнительной информации о рабочих пространствах посетите Chrome.com.