Инструменты для разработки Chrome, учебные пособия, советы, трюки

Google Chrome - один из популярных веб-браузеров для веб-разработки благодаря расширенным функциям. Инструменты разработчика Chrome могут быть очень полезны при отладке. Большинство из нас уже знают, что мы можем редактировать живой CSS с помощью Chrome Dev Tools, но есть еще несколько советов, которые мы поделимся с вами сегодня.

Советы по разработке Google Chrome

Есть много неизвестных и скрытых трюков Chrome Dev Инструменты, и мы будем искать в них самые полезные трюки. Чтобы открыть инструменты разработчика в Chrome, нажмите F12 на клавиатуре и попробуйте следующие трюки.

1. Найти и открыть любой файл

Когда мы занимаемся веб-разработкой, мы имеем дело со многими HTML, CSS, JS и другими файлами. Когда мы хотим отлаживать что-либо, мы открываем инструменты Chrome Dev. Вы можете быстро найти и найти конкретный файл, чтобы упростить вашу работу. Просто нажмите Ctrl + P и начните вводить имя файла. Это поможет вам найти конкретный файл из списка файлов.

2. Поиск в исходном файле

В предыдущем трюке мы узнали, как искать конкретный файл. Вы можете даже искать определенную строку во всех загруженных файлах. Нажмите Ctrl + Shift + F , чтобы найти строку в файлах. Он также поддерживает регулярные выражения.

3. Перейти к определенной строке

После того, как вы открыли какой-либо исходный файл и хотите перейти к определенной строке, нажмите Ctrl + G и укажите номер строки и нажмите enter.

4. Выбор элементов DOM на вкладке Console

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. Alter Color Format

Просто используйте Shift + Click в предварительном просмотре цвета, чтобы изменить изменения в формате rgba, шестнадцатеричное и hsl.

12. Добавление изменений в локальные файлы через рабочее пространство

Мы можем редактировать исходные файлы и вносить некоторые изменения в CSS, Java Script и в другие файлы в инструментах Chrome Dev. Чтобы добавить эти изменения в локальные файлы, здесь не нужно копировать вставки изменений из рабочей области в файлы на диске. Инструменты Chrome Dev позволяют сопоставлять файлы и обновлять локальный файл с изменениями, внесенными вами в dev-инструменты. Чтобы сделать это, щелкните правой кнопкой мыши на исходном файле в левой части вкладки Источники и выберите Добавить папку в рабочее пространство.

Для получения дополнительных сведений о рабочих пространствах перейдите на страницу Chrome.com.