Google Chrome предназначен не только для обычных пользователей Интернета, но и для веб-разработчиков, которые часто создают веб-сайты, оформляют блоги и т. д. Опция Inspect Element или Inspect в Google Chrome помогает пользователям найти некоторую информацию о веб-сайте, которая скрыта от просмотра. . Вот несколько советов по использованию Inspect Element браузера Google Chrome для ПК с Windows^{(Windows PC)} .

Осмотрите элемент Google Chrome

1] Find hidden JavaScript/Media files

Многие веб-сайты показывают всплывающие окна, если посетитель остается на веб-странице более 15 или 20 секунд. Или, во многих случаях, изображение, реклама или значок открываются после случайного клика. Чтобы найти эти скрытые файлы на веб-странице, вы можете использовать вкладку « Источники » в ^(Sources)Inspect Element . С левой стороны отображается древовидный список, который можно просмотреть.

2] Get HEX/RGB color code in Chrome

Иногда нам может нравиться цвет, и мы можем захотеть узнать его цветовой код. Вы можете легко найти цветовой код HEX или RGB , используемый на конкретной веб-странице, используя встроенную опцию в Google Chrome . Щелкните правой кнопкой мыши^{(Right-click)} цвет и выберите « Проверить^(Inspect) » . В большинстве случаев вы получите цветовой код справа с другим CSS . Если вы его не видите, возможно, вам придется использовать какое-нибудь бесплатное программное обеспечение для выбора цвета.

СОВЕТ^(TIP) . Также обратите внимание на эти онлайн-инструменты Color Picker^{(Color Picker online tools)} .

3] Получите советы по улучшению производительности веб-страницы^{(3] Get web page performance improvement tips)}

Всем нравится попадать на сайт, который открывается быстро. Если вы разрабатываете свой веб-сайт, вы всегда должны помнить об этом. Существует множество инструментов для проверки и оптимизации скорости загрузки страниц. Тем не менее, Google Chrome также поставляется со встроенным инструментом, который позволяет пользователям получать советы по повышению скорости загрузки веб-сайта. Чтобы получить доступ к этим инструментам, перейдите на вкладку « Аудит^(Audits) » и убедитесь, что выбраны « Использование сети^{(Network Utilization)} » , «Производительность веб-страницы»^{(Web Page Performance)} и « Перезагрузить страницу» и «Аудит при загрузке» . ^{(Reload Page and Audit on Load)}Затем нажмите кнопку «Выполнить»^{(Run )} . Он перезагрузит страницу и покажет вам некоторую информацию, которая может быть использована для ускорения страницы. Например, вы можете получить все ресурсы, у которых нет срока действия кеша, JavaScriptкоторые можно объединить в один файл и так далее.

4] Проверьте отзывчивость^{(4] Check responsiveness)}

В настоящее время крайне важно сделать веб-страницу адаптивной. Существует множество инструментов, которые могут проверить, является ли ваш сайт полностью адаптивным или нет. Однако этот инструмент Google Chrome помогает пользователям узнать, является ли сайт адаптивным или нет , а также проверить, как он будет выглядеть на конкретном мобильном устройстве. Откройте любой веб-сайт, перейдите на вкладку « Проверить элемент^{(Inspect Element )} », нажмите кнопку мобильного^{(mobile )} телефона, установите разрешение или выберите нужное устройство для тестирования веб-страницы.

5] Редактировать живой веб-сайт^{(5] Edit live website)}

Предположим, вы создаете веб-страницу, но вас не устраивает цветовая схема, размер навигационного меню, содержимое или соотношение сторон боковой панели. Вы можете редактировать свой работающий веб-сайт, используя опцию Inspect Element в ^{(Inspect Element)}Google Chrome . Хотя вы не можете сохранить изменения на действующем веб-сайте, вы можете выполнить все правки, чтобы использовать их в дальнейшем. Для этого откройте Inspect Element , выберите свойство HTML слева и внесите изменения в стиль справа. Если вы вносите какие-либо изменения в CSS , вы можете щелкнуть ссылку на файл, скопировать весь код и вставить его в исходный файл.

Inspect Element из Google Chrome — настоящий компаньон каждого веб-разработчика. Неважно, разрабатываете ли вы одностраничный веб-сайт или динамический веб-сайт, вы, безусловно, можете воспользоваться этими советами.

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is desіgned not just for regular internet users but also fоr web develoрers, who often create a webѕite, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome не отвечает, Relaunch сейчас?

• Как исправить ошибки File Download на Google Chrome browser

• Как изменить Default Print Settings в Google Chrome

• Как Destroy Profile на Browser Close в Google Chrome

• Anna Assistant - идеальный voice assistant для Google Chrome

• Great Suspender автоматически приостановит вкладки на Google Chrome

• Как включить новый Material Design UI для Google Chrome browser

• Отключить Profile Manager в Google Chrome на Windows 10

• Как отключить или включить Dark Mode в Google Chrome на Windows 10

• Ваши часы впереди или ваши часы за ошибкой на Google Chrome

• Google Chrome не очистит Browsing History and Data

• Google Chrome Проблемы и проблемы с Windows 10

• Отрегулируйте объем в Google Chrome tabs отдельно с помощью Volume Master

• Google Chrome Расширения не работают на Windows 10

• Как включить или Disable прокручиваемый Tabstrip в Google Chrome

• Как включить или Disable Tab Scrolling Buttons в Google Chrome

• Skype Extension для Google Chrome позволяет получить доступ Skype для Web и больше!

• Как отключить автоматический знак в функции в Google Chrome

• Как включить и отключить Window Naming в Google Chrome

• Best YouTube Расширения для Google Chrome для улучшения опыта