Google Chrome nije dizajniran samo za obične korisnike interneta, već i za web programere, koji često kreiraju web stranicu, dizajniraju blogove itd. Opcija Inspect Element ili Inspect u Google Chromeu^{(Google Chrome)} pomaže korisnicima da pronađu neke informacije o web stranici koja je skrivena od pogleda . Evo nekoliko savjeta o korištenju Inspect Element preglednika Google Chrome za Windows PC .

Pregledajte element Google Chromea

1] Find hidden JavaScript/Media files

Mnoge web stranice prikazuju skočne prozore ako posjetitelj ostane na web stranici dulje od 15 ili 20 sekundi. Ili se mnogo puta otvara slika, oglas ili ikona nakon što se negdje nasumično klikne. Da biste pronašli ove skrivene datoteke na web-stranici, možete koristiti karticu Izvori^(Sources) u Inspect Element . Na lijevoj strani prikazuje popis stabla koji se može istražiti.

2] Get HEX/RGB color code in Chrome

Ponekad nam se boja može svidjeti i možda želimo saznati njen kod boje. Možete jednostavno pronaći HEX ili RGB kod boje koji se koristi na određenoj web stranici, koristeći izvornu opciju u Google Chromeu^{(Google Chrome)} . Desnom tipkom miša kliknite^{(Right-click)} boju i kliknite na Inspect . Većinu vremena dobit ćete kod boje s desne strane s drugim CSS -om . Ako ga ne vidite, možda ćete morati koristiti neki besplatni softver za odabir boja.

SAVJET^(TIP) : Pogledajte i ove online alate za odabir boja^{(Color Picker online tools)} .

3] Dobijte savjete za poboljšanje performansi web stranice^{(3] Get web page performance improvement tips)}

Svi vole doći na web stranicu koja se brzo otvara. Ako dizajnirate svoju web stranicu, uvijek to trebate imati na umu. Postoji mnogo alata za provjeru i optimizaciju brzine učitavanja stranice. Međutim, Google Chrome također dolazi s ugrađenim alatom koji korisnicima omogućuje dobivanje savjeta za poboljšanje brzine učitavanja web stranice. Da biste pristupili ovim alatima, idite na karticu Revizije^(Audits) i provjerite jesu li odabrane Korištenje mreže^{(Network Utilization)} , Izvedba web stranice^{(Web Page Performance)} i Ponovno učitaj stranicu i Revizija pri učitavanju^{(Reload Page and Audit on Load)} . Zatim kliknite na gumb Pokreni^{(Run )} . Ponovno će učitati stranicu i pokazati vam neke informacije koje se mogu koristiti za bržu stranicu. Na primjer, možete dobiti sve resurse za koje nema isteka predmemorije, JavaScriptkoji se mogu kombinirati u jednu datoteku i tako dalje.

4] Provjerite odzivnost^{(4] Check responsiveness)}

U današnje vrijeme ključno je učiniti web stranicu responzivnom. Postoji mnoštvo alata koji mogu provjeriti je li vaša stranica potpuno responzivna ili ne. Međutim, ovaj alat Google Chromea^{(Google Chrome)} pomaže korisnicima da znaju je li stranica responzivna ili ne , kao i provjeri kako bi izgledala na određenom mobilnom uređaju. Otvorite bilo koju web stranicu, preuzmite karticu Inspect Element , kliknite gumb za ^{(Inspect Element )}mobilni uređaj^{(mobile )} , postavite razlučivost ili odaberite željeni uređaj za testiranje web stranice.

5] Uredite web stranicu uživo^{(5] Edit live website)}

Pretpostavimo da stvarate web stranicu, ali ste zbunjeni shemom boja ili veličinom navigacijskog izbornika ili sadržajem ili omjerom bočne trake. Svoju web stranicu uživo možete uređivati ​​pomoću opcije Inspect Element u pregledniku Google Chrome^{(Google Chrome)} . Iako ne možete spremiti promjene na web-stranici uživo, možete izvršiti sve uređivanje kako biste je mogli dalje koristiti. Da biste to učinili, otvorite Inspect Element , odaberite HTML svojstvo s lijeve strane i izvršite promjene stila na desnoj strani. Ako napravite bilo kakvu promjenu u CSS -u , možete kliknuti na vezu datoteke, kopirati cijeli kod i zalijepiti ga u izvornu datoteku.

Inspect Element Google Chromea^{(Google Chrome)} pravi je pratilac svakog web developera . Nije važno razvijate li web stranicu na jednoj stranici ili dinamičnu web stranicu, ove savjete svakako možete koristiti.

Tips on using the Inspect Element of Google Chrome browser

Google Chromе is designed not just for regular internet users but аlso for web devеlopers, 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

• Google Chrome ne reagira, ponovo pokrenuti sada?

• Kako popraviti pogreške pri preuzimanju datoteke u pregledniku Google Chrome

• Kako promijeniti zadane postavke ispisa u Google Chromeu

• Kako uništiti profil na zatvaranju preglednika u Google Chromeu

• Anna Assistant je savršen glasovni asistent za Google Chrome

• Najbolja proširenja za YouTube za Google Chrome za poboljšanje iskustva

• Popravi ERR_SSL_PROTOCOL_ERROR na Google Chromeu

• Kako promijeniti zadanu veličinu fonta u pregledniku Google Chrome

• Google Chrome isporučuje značajku internetske kupovine za narudžbu jednim dodirom

• Kako stvoriti i izbrisati profile u web pregledniku Google Chrome

• Kako omogućiti i koristiti značajku Commander u Google Chromeu

• Kako omogućiti i koristiti popis za čitanje u Google Chromeu

• Kako ukloniti gumb Global Media Control s alatne trake Google Chrome

• Proširenja za Google Chrome ne rade u sustavu Windows 11/10

• Kako provjeriti brzinu internetske veze pomoću Google Chromea

• Podesite glasnoću na karticama Google Chrome zasebno pomoću Volume Mastera

• Kako omogućiti novo korisničko sučelje Material Design za preglednik Google Chrome

• Kako uvesti ili izvesti oznake Google Chromea u HTML datoteku

• Kako onemogućiti značajku automatske prijave u Google Chromeu

• Popravite poruku o pogrešci ERR_CACHE_MISS na Google Chromeu