Onko sinulla kysymys siitä, miten voit tarkastella visuaalisen elementin lähdekoodia Chromebookissa? Voit tehdä tämän käyttämällä Google Chrome -sovelluksen tai minkä tahansa selainsivun erityisiä DevTools-työkaluja. DevTools on luettelo erityisistä kehittäjätyökaluista, jotka on rakennettu Google Chrome -selaimeen. Sen avulla käyttäjät voivat muokata sivuja tien päällä ja seurata mahdollisia ongelmia.
Inspect Elementin käyttäminen Chromebookissa
Chromebookien oletusselaimena on Google, ja kehittäjätyökalujen avaamiseen tällä laitteella tarvitset.
- Avaa haluamasi sivu
- Napsauta sovelluksen oikeassa yläkulmassa olevia 3 pistettä.
- Valitse ”Lisää työkaluja”
- Napsauta ”Kehittäjätyökalut”
Vaihtoehtoisia tapoja käyttää tätä toimintoa on painaa F12-painiketta tai napsauttaa hiiren kakkospainikkeella haluttua kohdetta.
Tämä on yleispätevä ohje, joka koskee useimpia selaimia Windowsissa tai missä tahansa muussa järjestelmässä.
Inspect Elementin käyttö Macissa tai Iphonessa
Onko mahdollista tehdä sama Macilla tai jopa iPhonella? Sinun on vain noudatettava alla olevia yksinkertaisia ohjeita:
Kuinka sitä käytetään Macissa
Jos sinulla on Mac, paras selain on Safari. Kehittäjätyökalujen avaaminen tässä selaimessa on hieman erilainen kuin sama prosessi Chromessa tai Firefoxissa. Sinun täytyy:
- Avaa selain
- Napsauta Safari-välilehden nimeä
- Valitse ”Asetukset”
- Napsauta sitten Advanced-vaihde-kuvaketta, se sijaitsee näytön yläreunassa.
- Rastita ruutu Näytä kehitysvalikko valikkorivillä -kohdan vieressä.
Kun olet tehnyt tämän, Inspect Element on käytettävissä verkkosivuillasi. Voit kutsua sitä myös näppäimillä CMD + Option + I.
Kuinka sitä käytetään iPhonessa
Jos haluat tarkistaa, miltä verkkosivun mobiiliversio näyttää iPhonessa käyttämällä Elementtien tarkastaminen -ominaisuutta, sinun on ensin otettava Web Inspector käyttöön iOS-laitteessasi:
- Siirry kohtaan Asetukset
- Valitse Safari-sovellus
- Vieritä alareunaan ja napsauta ”Lisävalikko”.
- Ota nyt käyttöön valintaruutu ”Web Inspector” -kohdan vieressä.
Sinun on myös otettava käyttöön Macin kehittäjävalikko edellä kuvatulla tavalla. Kun olet ottanut nämä ominaisuudet käyttöön iOS-laitteessasi ja Macissa, sinun pitäisi nähdä Kehittäjä-valikko Macin yläreunassa. Sinun on napsautettava sitä, jotta näet kiinnitetyn iPhonen ja sillä avatun verkkosivun. Kun vaihdat eri sivulle, vaihdat myös Macissa kyseisen sivun Web Inspector -ikkunaa
Mikä on Elemental Panel
Ensimmäinen asia, joka on syytä tietää, on se, mikä elementtipaneeli on. Jos haluat muuttaa sivun ulkoasua tai ulkoisia elementtejä, sinun on muokattava CSS:ää tai HTML:ää. Voit tehdä tämän elementtipaneeliksi kutsutun kehittäjätyökalun avulla. Sen avulla voit tarkistaa ja muuttaa sivusi etupäästä. Joitakin elementtejä, jotka näet siellä, ovat :
- Tietoja kuvasta, kuten sen koko ja lähde.
- CSS-paneeli – tätä vaihtoehtoa käytetään sivun ulkoisen tyylin muuttamiseen. Voit muuttaa parametreja, kuten fontteja, kokoja ja värejä, täällä.
- DOM-tiedot tai DOM-paneeli Tällä vaihtoehdolla voit hallita sivun ulkoasua. Voit muuttaa elementtien sijaintia ja siirtyä täysin HTML-tiedostoihin.
- Konsolipaneelissa esitellään uudet ominaisuudet kehittäjätyökalujen alta
- Elementin tapahtuman kuuntelijat
- HTML-kommentit
- Palaute
Kuvan renderöidyn ja luonnollisen koon tarkastaminen
Hyvin usein haluat tietää tietoja verkkosivulla olevasta kuvasta, voit ”tarkastaa” sen. Näin saat esimerkiksi kuvan koon selville. Tätä varten sinun on vietävä hiiren osoitin kyseisen IMG:n päälle, kun olet DOM-puussa.
Tietyn käytetyn kuvan tarkastaminen lähdejoukosta (srcset)
Sitten voit tarkistaa, mikä kuvan versio ladattiin ja mikä on tarkka srcset-lähde. srcset auttaa selainta pyytämään kuvan pienimmän kokoista versiota, joka on hieman suurempi kuin todellinen kuva. Tätä käytetään, kun halutaan näyttää joukko kuvia, joilla on eri resoluutiot, joista selain voi valita. Valitse ensin IMG-kohde ja tarkista sitten konsolin $0.currentSrc-tieto. Huomaa, että voit lisätä kuvien ominaisuuksia srcsetillä, jos haluat käyttää laitteita, joissa on suurempi DPI.
