Har du spørgsmål om, hvordan du kan se kildekoden til det visuelle element på din Chromebook? Det kan du gøre ved hjælp af de særlige DevTools i Google Chrome-appen eller på en hvilken som helst browserside. DevTools er en liste over særlige udviklerværktøjer, der er indbygget i Google Chrome-browseren. Det giver brugerne mulighed for at redigere sider på farten og holde styr på eventuelle problemer.
Sådan bruger du Inspect Element på Chromebook
For Chromebooks er standardbrowseren Google, og for at åbne udviklerværktøjerne på denne enhed skal du bruge.
- Åbn den ønskede side
- Klik på de 3 prikker i det øverste højre hjørne af programmet
- Vælg “Flere værktøjer“
- Klik på “Udviklerværktøjer“
Alternative måder at få adgang til denne funktion på er ved at trykke på F12-knappen eller højreklikke på det ønskede element
Dette er en universel instruktion, der gælder for de fleste browsere på Windows eller ethvert andet system.
Sådan bruger du Inspect Element på Mac eller Iphone
Er det muligt at gøre det samme med en Mac eller endda en iPhone? Du skal blot følge et par enkle trin nedenfor:
Sådan bruger du det på Mac
Hvis du har en Mac, er Safari den bedste browser at vælge. Det er lidt anderledes at åbne Developer Tools i denne browser end i Chrome eller Firefox. Du skal gøre følgende:
- Åbn browseren
- Klik på Safari på navnet på fanen
- Vælg “Præferencer“
- Klik derefter på ikonet Avanceret tandhjul, som du finder øverst på skærmen.
- Markér afkrydsningsfeltet ud for Vis menuen Develop i menulinjen
Når du har gjort dette, vil Inspect Element være tilgængeligt på dine websider. Du kan også kalde det med CMD + Option + I.
Sådan bruger du det på iPhone
Hvis du vil kontrollere, hvordan mobilversionen af websiden ser ud på din iPhone ved hjælp af funktionen Inspect Elements, skal du først aktivere Web Inspector for din iOS-enhed:
- Gå til Indstillinger
- Vælg Safari-appen
- Rul til bunden, og klik på “Avanceret menu“
- Nu skal du aktivere afkrydsningsfeltet ved siden af “Web Inspector“
Du skal også aktivere menuen Developer på din Mac som beskrevet ovenfor. Når du har aktiveret disse funktioner på din iOS-enhed og Mac, bør du kunne se menuen Udvikle øverst på din Mac. Du skal klikke på den for at se den vedhæftede iPhone og den webside, der er åbnet på den. Når du skifter til en anden side, skifter du også vinduet Web Inspector for den pågældende side på din Mac
Hvad er Elemental Panel
Den første ting, du skal vide, er, hvad Element Panel er. Hvis du ønsker at ændre designet eller eksterne elementer på siden, skal du redigere CSS eller HTML. Det kan du gøre ved hjælp af et udviklerværktøj kaldet Elementpanelet. Det giver dig mulighed for at kontrollere og ændre din side fra frontend. Nogle af de elementer, du kan se der, er :
- Oplysninger om billedet, f.eks. dets størrelse og dets kilde
- CSS-panel – denne indstilling bruges til at ændre sidens eksterne stil. Du kan ændre parametre som skrifttyper, størrelser og farver her
- DOM-information eller DOM-panel Med denne indstilling kan du styre sidens udseende. Du kan ændre elementernes position og navigere fuldt ud til HTML-filerne
- Konsolpanelet viser de nye funktioner under udviklerværktøjerne
- Hørere til elementbegivenheder
- HTML-kommentarer
- Feedback
Inspektion af et billedes renderede og naturlige størrelser
Meget ofte har du brug for at få oplysninger om et billede på en webside, du kan “inspicere” det. Dette giver dig f.eks. mulighed for at kende billedets størrelse. For at gøre dette skal du føre musemarkøren over den pågældende IMG, mens du er i DOM-træet
Inspektion af et bestemt anvendt billede fra et kildesæt (srcset)
Derefter kan du kontrollere, hvilken version af billedet der blev indlæst, og hvad den nøjagtige srcset-kilde er. srcset vil hjælpe browseren med at anmode om den version af billedet med den mindste størrelse, som er lidt større end det rigtige billede. Dette bruges til at få vist et sæt billeder med forskellige opløsninger, som browseren kan vælge imellem. Vælg først IMG-elementet, og kontroller derefter oplysningerne $0.currentSrc i konsollen. Bemærk, at du kan øge billedernes egenskaber med srcset, hvis du skal bruge enheder med en højere DPI.
