Vihjeitä Google Chrome -selaimen tarkastuselementin käyttämiseen

Google Chrome on suunniteltu paitsi säännöllisille internetin käyttäjille myös web-kehittäjille, jotka luo usein verkkosivuston, suunnittelupalat jne. Tarkastele elementti tai Tarkastele -vaihtoehtoa Google Chrome auttaa käyttäjiä löytämään tietoja verkkosivustosta, joka on piilotettu näkymästä. Seuraavassa on joitakin vinkkejä Google Chrome -selaimen tarkastuselementin käyttämisestä Windows-tietokoneelle.

Tarkastele Google Chromen elementtiä

1] Löydä piilotetut JavaScript- / mediatiedostot

Monet sivustot näyttävät ponnahdusikkunoita, jos kävijä pysyy verkossa sivu yli 15 tai 20 sekuntia. Tai monta kertaa kuva, mainos tai kuvake avautuu napsauttamalla jotain satunnaisesti. Web-sivun piilotettujen tiedostojen löytämiseksi voit käyttää Tarkastuselementin Lähteet -välilehteä.

2] Hanki HEX / RGB-värikoodi Chromessa

Joskus saatamme haluta väri ja saatamme haluta selvittää sen värikoodi. 2] Löydät helposti HEX- tai RGB-värikoodin, jota käytetään tietyssä verkkosivustossa käyttämällä natiivi vaihtoehtoa Google Chromessa. Napsauta hiiren kakkospainikkeella väriä ja napsauta Tarkista

. Useimmissa tapauksissa saat värikoodin oikealla puolella toisella CSS: llä. TIP

: Katso myös nämä värinvalitsimen verkkotyökalut.

3] Hanki verkkosivuston tehokkuusvinkkejä Kaikki rakastavat maata verkkosivustolle, joka avautuu nopeasti. Jos suunnittelet verkkosivustoasi, sinun pitää aina pitää se mielessäsi. On monia työkaluja tarkistaa ja optimoida sivun latausnopeus. Google Chrome sisältää myös sisäänrakennetun työkalun, jonka avulla käyttäjät voivat saada vinkkejä verkkosivujen latausnopeuden parantamiseen. Siirry näihin työkaluihin Tarkastukset -välilehdellä ja varmista, että Verkon käyttöaste , Verkkosivun suorituskyky ja Päivitä sivu ja tarkistus kuormalla valitaan. Napsauta sitten Suorita

-painiketta. Se lataa sivun uudelleen ja näyttää sinulle joitain tietoja, joita voidaan käyttää sivun nopeuttamiseen. Esimerkiksi voit saada kaikki resurssit, joilla ei ole välimuistin päättymistä, JavaScript, joka voidaan yhdistää yhteen tiedostoon jne.

4] Tarkastele reagointikykyä Verkkosivun reagointi on ratkaisevan tärkeää nykyään. On paljon työkaluja, jotka voivat tarkistaa, onko sivustosi täysin reagoiva vai ei. Tämä Google Chrome -työkalu auttaa käyttäjiä tiedustelemaan, onko sivusto reagoiva vai ei, ja tarkistaa, miten se näyttäisi tietylle mobiililaitteelle. Avaa verkkosivusto, saat Tarkasta elementti -välilehden. mobiili

-painike, määritä tarkkuus tai valitse haluamasi laite web-sivun testaamiseksi.

5] Muokkaa live-sivustoa

Oletetaan, että olet luomassa verkkosivua, mutta sekoitat värin järjestelmän tai navigoinnin valikkokoko tai sisältö tai sivupalkin suhde. Voit muokata live-verkkosivustoa käyttämällä Google Chrome -ikkunan Tarkista elementti -vaihtoehtoa. Vaikka et voi tallentaa muutoksia live-sivustolla, voit tehdä kaikki muokkaukset, jotta voit käyttää sitä edelleen. Voit tehdä niin avaamalla Tarkastele elementti, valitsemalla HTML-ominaisuuden vasemmalta puolelta ja tekemällä muokkausmuutoksia oikealla puolella. Jos teet mitään muutoksia CSS: ssä, voit napsauttaa tiedoston linkkiä, kopioida koko koodin ja liittää sen alkuperäiseen tiedostoon.