Google Chrome е предназначен не само за обикновени интернет потребители, но и за уеб разработчици, които често създават уебсайт, проектират блогове и т.н. Опцията Inspect Element или Inspect на Google Chrome помага на потребителите да намерят информация за уебсайт, който е скрит от погледа . Ето няколко съвета за използване на елемента Inspect^{(Inspect Element)} на браузъра Google Chrome^{(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 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 на Google Chrome . Въпреки че не можете да запазите промените на жив уебсайт, можете да извършите цялото редактиране, за да можете да го използвате допълнително. За да направите това, отворете Inspect Element , изберете свойството HTML от лявата страна и направете промени в стила от дясната страна. Ако направите някаква промяна в CSS , можете да щракнете върху връзката към файла, да копирате целия код и да го поставите в оригиналния файл.

Inspect Element на Google Chrome е истински спътник на всеки уеб разработчик. Няма значение дали разработвате уебсайт с една страница или динамичен уебсайт, със сигурност можете да използвате тези съвети.

Tips on using the Inspect Element of Google Chrome browser

Goоgle Chrome is designed nоt just for regular internet users but also for web developers, who often create a websіte, dеsign 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 не реагира, да стартирате отново сега?

• Как да коригирате грешки при изтегляне на файлове в браузъра Google Chrome

• Как да промените настройките за печат по подразбиране в Google Chrome

• Как да унищожите профил при затваряне на браузъра в Google Chrome

• Anna Assistant е перфектен гласов асистент за Google Chrome

• Google Chrome срещу Firefox Quantum за компютър с Windows

• Разширения на диспечера на раздели за повишаване на производителността в Google Chrome

• Как да деактивирате функцията за автоматично влизане в Google Chrome

• Разширенията на Google Chrome не работят на Windows 11/10

• Как да проверите скоростта на вашата интернет връзка с Google Chrome

• Как да активирате или деактивирате иконата за търсене на раздели в Google Chrome

• Как да активирате и деактивирате именуване на прозорци в Google Chrome

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

• Google Chrome доставя функция за онлайн пазаруване, за да правите поръчки с едно докосване

• Google Chrome чака кеша - какво да правя!?

• Вашият часовник е напред или Вашият часовник изостава грешка в Google Chrome

• Google Chrome за ограничаване на абонаментите за насочени известия до 90 дни

• Деактивирайте Мениджъра на профили в Google Chrome на Windows 11/10

• ERR_NAME_NOT_RESOLVED, код на грешка 105 в Google Chrome

• Изтеглянията на Google Chrome блокират на 100%