Prehliadač Google Chrome^{(Google Chrome)} je určený nielen pre bežných používateľov internetu, ale aj pre vývojárov webu, ktorí často vytvárajú webovú stránku, navrhujú blogy atď. Možnosť Skontrolovať prvok^{(Inspect Element )} alebo Skontrolovať^{(Inspect )} v prehliadači Google Chrome^{(Google Chrome)} pomáha používateľom nájsť nejaké informácie o webovej lokalite, ktorá je skrytá. . Tu je niekoľko tipov na používanie Inspect Element prehliadača Google Chrome pre Windows PC .

Skontrolujte prvok prehliadača Google Chrome

1] Find hidden JavaScript/Media files

Mnoho webových stránok zobrazuje kontextové okná, ak návštevník zostane na webovej stránke dlhšie ako 15 alebo 20 sekúnd. Alebo sa mnohokrát obrázok, reklama alebo ikona otvorí po náhodnom kliknutí niekam. Ak chcete nájsť tieto skryté súbory na webovej stránke, môžete použiť kartu Zdroje v ^(Sources)Inspect Element . Na ľavej strane zobrazuje stromový zoznam, ktorý je možné preskúmať.

2] Get HEX/RGB color code in Chrome

Niekedy sa nám môže páčiť farba a možno budeme chcieť zistiť jej farebný kód. Pomocou natívnej možnosti v prehliadači Google Chrome^{(Google Chrome)} môžete jednoducho nájsť kód farby HEX alebo RGB použitý na konkrétnej webovej stránke . Kliknite pravým tlačidlom myši^{(Right-click)} na farbu a kliknite na Skontrolovať^(Inspect) . Väčšinu času získate farebný kód na pravej strane s inými CSS . Ak ho nevidíte, možno budete musieť použiť nejaký bezplatný softvér na výber farieb.

TIP : Pozrite si aj tieto online nástroje Color Picker^{(Color Picker online tools)} .

3] Získajte tipy na zlepšenie výkonu webovej stránky^{(3] Get web page performance improvement tips)}

Každý rád pristane na webovej stránke, ktorá sa rýchlo otvára. Ak navrhujete svoje webové stránky, mali by ste to mať vždy na pamäti. Existuje mnoho nástrojov na kontrolu a optimalizáciu rýchlosti načítania stránky. Prehliadač Google Chrome^{(Google Chrome)} však prichádza aj so vstavaným nástrojom, ktorý používateľom umožňuje získať tipy na zlepšenie rýchlosti načítania webových stránok. Ak chcete získať prístup k týmto nástrojom, prejdite na kartu Audity^(Audits) a uistite sa , že sú vybraté položky Využitie siete^{(Network Utilization)} , Výkon webovej stránky^{(Web Page Performance)} a Znovu načítať stránku a Audit pri načítaní . ^{(Reload Page and Audit on Load)}Potom kliknite na tlačidlo Spustiť^{(Run )} . Znova načíta stránku a zobrazí niektoré informácie, ktoré možno použiť na zrýchlenie stránky. Môžete napríklad získať všetky zdroje, ktoré nemajú vypršanie platnosti vyrovnávacej pamäte, JavaScriptktoré možno spojiť do jedného súboru atď.

4] Skontrolujte odozvu^{(4] Check responsiveness)}

Urobiť webovú stránku responzívnu je v dnešnej dobe kľúčové. Existuje množstvo nástrojov, ktoré dokážu skontrolovať, či je vaša stránka úplne responzívna alebo nie. Tento nástroj prehliadača Google Chrome^{(Google Chrome)} však pomáha používateľom zistiť, či stránka reaguje alebo nie , ako aj skontrolovať, ako by vyzerala na konkrétnom mobilnom zariadení. Otvorte ľubovoľnú webovú stránku, získajte kartu Inspect Element , kliknite na tlačidlo mobilu^{(mobile )} , nastavte rozlíšenie alebo vyberte požadované zariadenie na testovanie webovej stránky.

5] Upravte živú webovú stránku^{(5] Edit live website)}

Predpokladajme, že vytvárate webovú stránku, ale nie ste zmätení ohľadom farebnej schémy alebo veľkosti navigačnej ponuky alebo pomeru obsahu alebo bočného panela. Svoju aktívnu webovú stránku môžete upraviť pomocou možnosti Skontrolovať prvok^{(Inspect Element)} v prehliadači Google Chrome^{(Google Chrome)} . Hoci nemôžete uložiť zmeny na živej webovej stránke, môžete vykonať všetky úpravy, aby ste ich mohli ďalej používať. Ak to chcete urobiť, otvorte Inspect Element , vyberte vlastnosť HTML na ľavej strane a vykonajte zmeny štýlu na pravej strane. Ak vykonáte akúkoľvek zmenu v CSS , môžete kliknúť na odkaz na súbor, skopírovať celý kód a vložiť ho do pôvodného súboru.

Inspect Element prehliadača Google Chrome je skutočným spoločníkom každého webového vývojára. Nezáleží na tom, či vyvíjate jednostránkový web alebo dynamický web, tieto tipy určite využijete.

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is designed not just for regular internet υsers but also for web developers, who often create a website, 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

• Prehliadač Google Chrome nereaguje. Chcete ho znova spustiť?

• Ako opraviť chyby sťahovania súborov v prehliadači Google Chrome

• Ako zmeniť predvolené nastavenia tlače v prehliadači Google Chrome

• Ako zničiť profil v zatvorenom prehliadači v prehliadači Google Chrome

• Anna Assistant je perfektný hlasový asistent pre Google Chrome

• Opravte chybu sťahovania skriptu proxy v prehliadači Google Chrome

• Opravte chybu ERR_SPDY_PROTOCOL_ERROR v prehliadači Google Chrome

• Ako povoliť alebo zakázať posúvateľný pás kariet v prehliadači Google Chrome

• Ako opraviť Oj, chyba! chybové hlásenie v prehliadači Google Chrome

• Váš profil sa v prehliadači Google Chrome nepodarilo správne otvoriť

• Ako odstrániť tlačidlo Global Media Control z panela s nástrojmi Google Chrome

• Ako povoliť nové používateľské rozhranie Material Design pre prehliadač Google Chrome

• Najlepšie rozšírenia YouTube pre prehliadač Google Chrome na zlepšenie zážitku

• Ako zakázať funkciu automatického prihlásenia v prehliadači Google Chrome

• Ako povoliť alebo zakázať tlačidlá posúvania kariet v prehliadači Google Chrome

• Ako povoliť a používať funkciu Commander v prehliadači Google Chrome

• Rozšírenia Google Chrome nefungujú v systéme Windows 11/10

• Sťahovanie prehliadača Google Chrome sa zasekáva na 100 %

• Ako zabrániť používateľom v inštalácii rozšírení v prehliadači Google Chrome

• Ako automaticky zapnúť kontrolu pravopisu v prehliadači Google Chrome