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 и укажите номер строки и нажмите enter.
4. Выбор элементов DOM на вкладке «Консоль»
Инструменты Dev также позволяют выбирать элементы в консоли.
- $() – Возвращает первое совпадение соответствующего селектора 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 позволяют сопоставлять файлы и обновлять локальный файл с изменениями, внесенными вами в dev-инструменты. Чтобы сделать это, щелкните правой кнопкой мыши на исходном файле с левой стороны на источники и выберите Добавить папку в рабочее пространство.
Для получения дополнительной информации о рабочих пространствах перейдите на страницу Chrome.com.
