Kuinka esikatsella verkkosivustoasi eri laitteilla Google Chromen avulla

Kun luot verkkosivustoa, haluat sen olevan responsiivinen ja mukautuvan eri näyttökokoihin. Yksi tapa testata tätä on käyttää Google Chromen sisäänrakennettuja kehittäjätyökaluja.

Chromen DevToolsin avulla voit korjata verkkosivustosi eri puolia. Tämä sisältää HTML-lähdekoodin ja CSS: n muuttamisen ja esikatselun. Sen avulla voit myös korjata asiakaspuolen JavaScript-koodia ja tarkastella verkkoliikennettä.

DevToolsilla on myös mahdollisuus esikatsella verkkosivustoasi eri laitteilla. Tämä sisältää erilaisia ​​mobiililaitteita, iPadeja, tabletteja ja paljon muuta.

Jos haluat avata Laite-työkalupalkin Google Chromessa, sinun on avattava Chrome Developer Tools -ikkuna:

1. Avaa verkkosivusto.
2. Napsauta sivua hiiren kakkospainikkeella ja napsauta Tarkastaa.
3. Chrome DevTools -ikkuna avautuu. Se voi avautua selaimen reunaan tai alaosaan tai uutena ikkunana.
4. Ikkunan vasemmassa yläkulmassa on kaksi kuvaketta. Napsauta kuvaketta, joka näyttää useita erikokoisia laitteita.
5. Näyttö muuttuu näyttämään, miltä verkkosivusto näyttäisi mobiililaitteella.

Kuinka vaihtaa eri laitteiden välillä

Käytä laitteen työkalupalkin yläosassa olevaa pudotusvalikkoa vaihtaaksesi eri laitteiden välillä.

1. Työkalupalkin yläreunassa näkyy, minkä tyyppisellä laitteella katselet verkkosivustoasi tällä hetkellä. Napsauta avattavaa valikkoa valitaksesi luettelosta toinen laite.
2. Sen sijaan, että valitsisit olemassa olevan laitteen, voit tarkastella verkkosivustoa responsiivisessa tilassa. Napsauta avattavaa valikkoa ja valitse Responsiivinen vaihtoehto.
3. Pudotusvalikon viereen voit myös valita laitteen mukautetun leveyden ja korkeuden.
4. Sen sijaan, että kirjoittaisit leveyden ja korkeuden, voit myös napsauttaa ja vetämällä ikkunan kulmia säätääksesi kokoa.

Kuinka lisätä mukautettu laite

Jos haluat tallentaa mukautetun leveyden ja korkeuden, voit lisätä mukautetun laitteen. Laitteen työkalupalkki näyttää sitten uuden laitteesi laitteiden avattavassa valikossa.

1. Napsauta avattavaa valikkoa, jossa on lueteltu kaikki laitteet.
2. Klikkaa Muokata.
3. Varmista Asetukset-sivupalkin alla, että sinulla on Laitteet välilehti valittuna. Täällä voit myös tarkastella luetteloa muista laitteista, joista voit valita.
4. Klikkaa Lisää mukautettu laite.
5. Anna laitteelle nimi, leveys ja korkeus. Varmista, että valitset myös laitetyypin, kuten onko kyseessä mobiili- vai pöytäkone. Jos laajennat Käyttäjäagentin asiakasvinkit -vaihtoehto, voit lisätä muita tietoja, kuten laitteen mallin, merkin tai version.
6. Klikkaa Lisätä.
7. Palaa pudotusvalikkoon, jossa on lueteltu kaikki laitteet. Näet uuden mukautetun laitteesi luettelossa.
8. Voit muokata näitä tietoja myöhemmin uudelleen palaamalla mukautetun laitteen sivulle. Klikkaa muokata -painiketta laitteesi nimen vieressä aloittaaksesi muokkaamisen.

On erittäin hyödyllistä esikatsella verkkosivustoasi eri laitteilla ja erikokoisilla näytöillä useista syistä.

Ensinnäkin voit testata verkkosivustosi suorituskykyä eri laitteilla. Joillakin matkapuhelimilla saattaa olla suurempi verkkonopeus tai prosessorin kuristus kuin toisilla.

Laitteen työkalurivin avulla voit vaihtaa verkon eri nopeusvaihtoehtojen välillä. Tämän avulla voit testata palvelimelle tulevien puhelujen nopeutta tai tietojen lataamista ja renderöintiä verkkosivustollasi.

Lisäksi voit myös tarkastella, miltä suunnittelu näyttää tietyllä laitteella käyttöliittymän näkökulmasta. Jos käytät CSS-mediakyselyt, voit käyttää tätä työkalua tarkistaaksesi, että ne toimivat odotetulla tavalla.

Voit käyttää Google Chromen DevTools-ikkunaa testataksesi, kuinka verkkosivustosi mukautuu eri näyttökokoihin ja varmistaaksesi, että verkkosivustosi on reagoiva. Voit myös käyttää sitä testaamaan verkkosivustosi suorituskykyä ja sitä, toimivatko mediakyselysi odotetulla tavalla.

Voit käyttää Google Chromen DevToolsia myös muihin tarkoituksiin. Voit käyttää sitä CSS-ongelmien korjaamiseen vaihtamalla CSS: ää Elementti-ikkunan Tyylit-välilehdellä. Näin voit tarkastella CSS-muutoksia välittömästi, mikä voi nopeuttaa koodauksen työnkulkua.

Kuinka käyttää Google Chromea CSS-virheenkorjaukseen

Lue Seuraava