Vinkkejä tarkastuselementin käyttämiseen Google Chrome -selaimessa

Olettaen, että haluat vinkkejä Inspect Element -ominaisuuden käyttämiseen Google Chrome -selaimessa: Napsauta hiiren kakkospainikkeella tarkastettavaa elementtiä ja valitse avattavasta valikosta 'Tarkista'. Voit myös avata Inspectorin käyttämällä pikanäppäintä Ctrl+Shift+I (Windows) tai Cmd+Opt+I (Mac). Kun Inspector on auki, näet sivun HTML-koodin vasemmalla ja CSS-koodin oikealla. Voit tehdä muutoksia HTML- ja CSS-koodiin Inspectorissa ja nähdä, että muutokset tulevat voimaan sivulla välittömästi. Poistuaksesi Inspectorista, napsauta X-painiketta oikeassa yläkulmassa.

Google Chrome ei ole tarkoitettu vain yleisille verkon käyttäjille, vaan myös verkkokehittäjille, jotka luovat usein verkkosivustoja, blogeja jne. Tarkista elementti tai Tarkastaa Google Chrome -vaihtoehto auttaa käyttäjiä löytämään tietoja verkkosivustosta, joka on piilotettu näkymästä. Tässä on joitain vinkkejä Inspect Elementin käyttämiseen Google Chrome -selaimessa Windows PC:lle.

Tarkista Google Chrome -elementti

1] Etsi piilotetut JavaScript-/mediatiedostot

poista käyttäjäprofiili-ikkunat 10

Monet verkkosivustot näyttävät ponnahdusikkunoita, jos vierailija pysyy verkkosivulla yli 15 tai 20 sekuntia. Tai monissa tapauksissa kuva, mainos tai kuvake avautuu vahingossa napsautettuaan jotain. Voit etsiä piilotetut tiedostot verkkosivulta käyttämällä Lähteet Tarkista elementti -välilehti. Vasemmalla näkyy puumainen luettelo, jota voit tutkia.

omenakartat Windows 10: lle

2] Hanki HEX/RGB-värikoodi Chromessa

Joskus saatamme pitää väristä ja haluamme tietää sen värikoodin. Löydät helposti tietyllä verkkosivulla käytetyn HEX- tai RGB-värikoodin käyttämällä Google Chromen sisäänrakennettua vaihtoehtoa. Napsauta väriä hiiren kakkospainikkeella ja valitse Tarkastaa . Useimmissa tapauksissa päädyt värikoodiin oikealla puolella eri CSS: illä. Jos et näe sitä, saatat joutua käyttämään ilmaista värinvalitsinohjelmistoa.

KÄRKI : Katsokaa näitä Online-värinvalitsintyökalut Sama.

3] Hanki vinkkejä verkkosivun suorituskyvyn parantamiseen

Windows 10 maapallokuvake

Kaikki rakastavat vierailla sivustolla, joka avautuu nopeasti. Jos suunnittelet verkkosivustoasi, sinun tulee aina pitää tämä mielessä. Sivun latausnopeuden testaamiseen ja optimointiin on monia työkaluja. Google Chromessa on kuitenkin myös sisäänrakennettu työkalu, jonka avulla käyttäjät voivat saada vinkkejä verkkosivuston latausnopeuden parantamiseen. Pääset käyttämään näitä työkaluja siirtymällä osoitteeseen Tarkastaa välilehti ja varmista Verkon käyttö , Verkkosivun suorituskyky , i Sivun uudelleenlataus ja tarkastus latauksen yhteydessä valittu. Napsauta sitten juosta -painiketta. Se lataa sivun uudelleen ja näyttää sinulle tietoja, joita voidaan käyttää sivun nopeuttamiseen. Voit esimerkiksi saada kaikki resurssit, joiden välimuisti ei ole vanhentunut, JavaScriptin, joka voidaan yhdistää yhdeksi tiedostoksi, ja niin edelleen.

4] Testivaste

Nykyään on erittäin tärkeää tehdä verkkosivuista responsiivinen. On monia työkaluja, jotka voivat tarkistaa, onko sivustosi täysin reagoiva. Tämä Google Chrome -työkalu auttaa käyttäjiä tietää, onko sivusto responsiivinen vai ei ja myös tarkistaa, miltä se näyttää tietyllä mobiililaitteella. Avaa mikä tahansa sivusto, hanki Tarkista elementti -välilehti, napsauta mobiili napsauta painiketta, aseta resoluutio tai valitse haluamasi laite verkkosivun tarkistamiseksi.

poista suojatut käynnistysikkunat käytöstä 10

5] Muokkaa live-sivustoa

Oletetaan, että luot verkkosivua, mutta et tiedä mikä on värimaailma, navigointivalikon koko, sisältö tai sivupalkin kuvasuhde. Voit muokata live-verkkosivustoasi käyttämällä Google Chromen Inspect Element -vaihtoehtoa. Vaikka et voi tallentaa muutoksia live-sivustoon, voit tehdä kaiken muokkauksen, jotta voit käyttää sitä myöhemmin. Voit tehdä tämän avaamalla Tarkastuselementin, valitsemalla HTML-ominaisuuden vasemmalta puolelta ja tekemällä tyylimuutoksia oikealla puolella. Jos teet muutoksia CSS:ään, voit napsauttaa tiedoston linkkiä, kopioida koko koodin ja liittää sen alkuperäiseen tiedostoon.

Google Chromen Inspect Element on jokaisen verkkokehittäjän todellinen kumppani. Suunnitteletpa yksisivuista tai dynaamista verkkosivustoa, voit varmasti hyötyä näistä vinkeistä.