Google Chrome ei ole suunniteltu vain tavallisille internetin käyttäjille, vaan myös verkkokehittäjille, jotka usein luovat verkkosivustoja, suunnittelevat blogeja jne. Google Chromen ^{(Google Chrome)}Tarkastuselementti-^{(Inspect Element )} tai Tarkastus^{(Inspect )} -vaihtoehto auttaa käyttäjiä löytämään tietoja verkkosivustosta, joka on piilotettu näkyvistä. . Tässä on joitain vinkkejä Google Chrome -selaimen Inspect Elementin^{(Inspect Element)} käyttämiseen Windows PC :lle .

Tarkista Google Chromen elementti

1] Find hidden JavaScript/Media files

Monet sivustot näyttävät ponnahdusikkunoita, jos vierailija pysyy verkkosivulla yli 15 tai 20 sekuntia. Tai monta kertaa kuva, mainos tai kuvake avautuu napsautettuaan jotain satunnaisesti. Löytääksesi nämä piilotetut tiedostot verkkosivulta, voit käyttää Inspect Elementin ^{(Inspect Element)}Lähteet^(Sources) - välilehteä . Sen vasemmalla puolella näkyy puunäkymä, jota voi tutkia.

2] Get HEX/RGB color code in Chrome

Joskus saatamme pitää väristä ja haluamme selvittää sen värikoodin. Löydät helposti tietyllä verkkosivulla käytetyn HEX- tai RGB -värikoodin käyttämällä ^(RGB)Google Chromen^{(Google Chrome)} alkuperäistä vaihtoehtoa . Napsauta^{(Right-click)} väriä hiiren kakkospainikkeella ja napsauta Tarkista^(Inspect) . Suurimman osan ajasta saat värikoodin oikealla puolella muiden CSS -tiedostojen kanssa . Jos et näe sitä, saatat joutua käyttämään ilmaista värinvalitsinohjelmistoa.

VINKKI^(TIP) : Tutustu myös näihin Color Picker -verkkotyökaluihin^{(Color Picker online tools)} .

3] Hanki web-sivujen suorituskyvyn parantamisvinkkejä^{(3] Get web page performance improvement tips)}

Kaikki rakastavat päästä verkkosivustolle, joka avautuu nopeasti. Jos suunnittelet verkkosivustoasi, sinun tulee aina pitää tämä mielessä. Sivun latausnopeuden tarkistamiseen ja optimointiin on monia työkaluja. Google Chromessa^{(Google Chrome)} on kuitenkin myös sisäänrakennettu työkalu, jonka avulla käyttäjät voivat saada vinkkejä verkkosivuston latausnopeuden parantamiseen. Voit käyttää näitä työkaluja siirtymällä Tarkastukset^(Audits) - välilehteen ja varmistamalla, että Verkon käyttö^{(Network Utilization)} , Web-sivun suorituskyky^{(Web Page Performance)} ja Lataa sivu uudelleen ja Tarkastus latauksen aikana^{(Reload Page and Audit on Load)} on valittu. Napsauta sitten Suorita^{(Run )} - painiketta. Se lataa sivun uudelleen ja näyttää sinulle tietoja, joita voidaan käyttää nopeuttamaan sivua. Voit esimerkiksi saada kaikki resurssit, joilla ei ole välimuistin vanhenemista, JavaScriptjotka voidaan yhdistää yhdeksi tiedostoksi ja niin edelleen.

4] Tarkista reagointikyky^{(4] Check responsiveness)}

Verkkosivun tekeminen responsiivisiksi on erittäin tärkeää nykyään. On olemassa lukuisia työkaluja, jotka voivat tarkistaa, onko sivustosi täysin reagoiva vai ei. Tämä Google Chromen^{(Google Chrome)} työkalu auttaa käyttäjiä kuitenkin tietämään, onko sivusto responsiivinen vai ei , sekä tarkistaa, miltä se näyttäisi tietyllä mobiililaitteella. Avaa mikä tahansa verkkosivusto, avaa Tarkasta elementti^{(Inspect Element )} -välilehti, napsauta mobiilipainiketta^{(mobile )} , aseta resoluutio tai valitse haluamasi laite verkkosivun testaamiseksi.

5] Muokkaa live-sivustoa^{(5] Edit live website)}

Oletetaan, että olet luomassa verkkosivua, mutta olet hämmentynyt väriteemasta tai navigointivalikon koosta tai sisällöstä tai sivupalkin suhteesta. Voit muokata live-sivustoasi käyttämällä Google Chromen ^{(Google Chrome)}Tarkastuselementti^{(Inspect Element)} - vaihtoehtoa . Vaikka et voi tallentaa muutoksia live-sivustolle, voit saada tehdä kaikki muokkaukset, jotta voit käyttää niitä edelleen. Voit tehdä tämän avaamalla Tarkastele elementtiä^{(Inspect Element)} , valitsemalla HTML -ominaisuuden vasemmalta puolelta ja tekemällä tyylimuutokset oikealla puolella. Jos teet muutoksia CSS :ään , voit napsauttaa tiedostolinkkiä, kopioida koko koodin ja liittää sen alkuperäiseen tiedostoon.

Inspect Element of Google Chrome on jokaisen verkkokehittäjän todellinen kumppani. Sillä ei ole väliä, oletko kehittämässä yksisivuista tai dynaamista verkkosivustoa, voit varmasti käyttää näitä vinkkejä.

Tips on using the Inspect Element of Google Chrome browser

Google Сhrome is dеsigned not just for regular internet users but also for web developers, who often create a website, desіgn 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 ei vastaa. Käynnistetäänkö uudelleen nyt?

• Kuinka korjata tiedostojen latausvirheet Google Chrome -selaimessa

• Kuinka muuttaa oletustulostusasetuksia Google Chromessa

• Profiilin tuhoaminen selaimen sulkemisessa Google Chromessa

• Anna Assistant on täydellinen ääniavustaja Google Chromelle

• Vieritettävän välilehtinauhan ottaminen käyttöön tai poistaminen käytöstä Google Chromessa

• Kuinka ottaa Commander-ominaisuus käyttöön ja käyttää sitä Google Chromessa

• Kuinka poistaa automaattinen sisäänkirjautuminen käytöstä Google Chromessa

• Välilehtihakukuvakkeen ottaminen käyttöön tai poistaminen käytöstä Google Chromessa

• Tab Manager -laajennukset parantamaan tuottavuutta Google Chromessa

• Lataa viralliset Google Chrome -teemat selaimellesi

• Poista profiilinhallinta käytöstä Google Chromessa Windows 11/10:ssä

• Kuinka estää käyttäjiä asentamasta laajennuksia Google Chromeen

• Korjaa epäselvä tiedosto Avaa -valintaikkuna Google Chromessa ja Microsoft Edgessä

• Kuinka ottaa uusi Material Design UI käyttöön Google Chrome -selaimelle

• Parhaat YouTube-laajennukset Google Chromelle käyttökokemuksen parantamiseksi

• Tumman tilan poistaminen käytöstä tai käyttöönotto Google Chromessa Windows 10:ssä

• Google Chrome avautuu automaattisesti, kun tietokone käynnistetään

• Välilehtien vierityspainikkeiden ottaminen käyttöön tai poistaminen käytöstä Google Chromessa

• Kuinka poistaa Global Media Control -painike Google Chromen työkalupalkista