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

Советы по инструментам разработки Chrome

В Chrome Dev Tools^{(Chrome Dev Tools)} есть много неизвестных и скрытых приемов, и мы рассмотрим самые полезные среди них. Чтобы открыть инструменты разработчика в Chrome , нажмите F12 на клавиатуре и попробуйте следующие приемы.

1. Найдите и откройте любой файл

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

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

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

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

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

4. Выбор элементов DOM на вкладке « Консоль »^(Console)

Инструменты^{(Dev Tools)} разработчика также позволяют выбирать элементы в консоли.

• $() – возвращает^(Returns) первое вхождение соответствующего селектора CSS .
• $$() – возвращает массив элементов, соответствующих заданному селектору CSS .

Чтобы узнать больше о консольных командах, перейдите к этому сообщению.^{(this post.)}

5. Используйте несколько кареток

Иногда вы хотите установить несколько кареток в разных местах, и вы можете легко сделать это в инструментах Chrome Dev , удерживая клавишу Ctrl^{(Ctrl )} и щелкая там, где вы хотите их разместить. Затем начните писать, и вы увидите, что размещается в различных выбранных местах.

6. Сохранить журнал

Сохранить^(Preserve) журнал помогает сохранить журнал, даже если страница загружена. Установите флажок рядом с параметром « Сохранить журнал»^{(Preserve log )} в журнале консоли^(Console) , и журнал будет сохранен. Это показывает журнал перед выгрузкой страницы и помогает исследовать ошибки.

7. Используйте встроенный редактор кода

В Chrome Dev Tools^{(Chrome Dev Tools)} есть встроенный инструмент для улучшения кода, называемый красивой печатью «{}»^{(pretty print “{}”)} . Инструмент разработчика показывает минимизированный код и не так легко читается. Нажмите^(Click) красивую кнопку печати, которая отображается в левом нижнем углу открытого исходного файла, чтобы отобразить исходный файл в удобочитаемом формате.

8. Подходит ли ваш сайт для мобильных устройств? Проверьте это здесь

Chrome Dev Tools также позволяет нам проверить, является ли веб-сайт удобным для мобильных устройств или нет. Вы можете проверить, как ваш сайт выглядит на разных устройствах. Перейдите к инструментам Chrome Dev и на вкладке ^{(Chrome Dev)}«Эмуляция^{(Emulation )} » вы можете зарегистрировать различные устройства. Выберите нужное устройство и проверьте, как ваш сайт выглядит на этом устройстве.

Для получения дополнительной информации посмотрите следующее видео.

9. Эмулируйте датчики и географическое положение^{(Geographical Location)}

Вы даже можете эмулировать датчики, такие как сенсорные экраны и акселерометры. Вы даже можете эмулировать географическое положение. Для этого перейдите в Emulation -> Sensors.

10. Выберите следующее вхождение текущего слова

Если вы хотите заменить слово In во всех его вхождениях, выделите слово и нажмите Ctrl + D , чтобы выбрать следующее вхождение выбранного слова. Затем вы можете отредактировать это слово во всех его вхождениях за один раз.

11. Изменить цветовой формат

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

12. Добавляйте^(Add) изменения в локальные файлы через рабочую область

Мы можем редактировать исходные файлы и вносить некоторые изменения в CSS , JavaScript и другие файлы в инструментах Chrome Dev . Чтобы добавить эти изменения в локальные файлы, нет необходимости копировать-вставлять изменения из рабочей области в файлы на диске. Инструменты Chrome Dev^{(Chrome Dev)} позволяют сопоставлять файлы и обновлять локальный файл с изменениями, которые вы внесли в инструменты разработчика. Для этого щелкните правой кнопкой мыши исходный файл слева на вкладке « Источники^{(Sources )} » и выберите « Добавить папку в рабочую область».^{(Add Folder to workspace.)}

Надеюсь это поможет.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the populаr web browsers for web development, duе to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Best Google Chrome Tips and Tricks для пользователей Windows PC

• 3 полезных совета и рекомендации по использованию заметок

• Как скачать Font из Website, используя Developer Tools

• Restart Chrome, Edge or Firefox без потери вкладок в Windows 11/10

• Советы по использованию Inspect Element Google Chrome browser

• Как прикрепить сайт на панель задач или Start Menu в Windows 10

• Как отключить вкладки в Chrome, Firefox, Microsoft Edge и Opera

• Какая версия Chrome у меня есть? 6 способов, чтобы выяснить,

• Google Chrome для Mac: как его получить!

• Очистить Site Data для определенного сайта в Chrome or Edge с использованием Developer Tools

• Как разблокировать Adobe Flash Player в Google Chrome

• Как напечатать статью без рекламы во всех основных браузерах

• Включить Flash для Specific Websites в Chrome

• Как отправить текст с компьютера с сообщениями Android

• Как использовать Google Input Tools на моем компьютере Windows 10?

• Как остановить Chrome с просьбой сохранять пароли

• Как мне сделать текст больше в Chrome, Edge, Firefox, а Opera?

• Как пойти инкогнито в Chrome, Firefox, Edge, а Opera

• Как возобновить закрытый Browser Tab в Chrome, Safari, Edge and Firefox

• Как включить не отслеживать в Chrome, Firefox, Edge, а Opera