Har du frågor om hur du kan visa källkoden för det visuella elementet på din Chromebook? För att göra detta kan du använda de speciella DevTools i Google Chrome-appen eller på vilken webbläsarsida som helst. DevTools är en lista över särskilda utvecklarverktyg som är inbyggda i webbläsaren Google Chrome. Den gör det möjligt för användare att redigera sidor i farten och hålla koll på eventuella problem.
Så här använder du Inspect Element på Chromebook
För Chromebooks är standardwebbläsaren Google, för att öppna utvecklarverktygen på den här enheten behöver du.
- Öppna den sida du vill ha
- Klicka på de tre prickarna i det övre högra hörnet av programmet.
- Välj “Fler verktyg“
- Klicka på “Utvecklingsverktyg“
Alternativa sätt att komma åt denna funktion är att trycka på F12-knappen eller högerklicka på önskat objekt.
Detta är en universell instruktion som gäller för de flesta webbläsare i Windows eller andra system.
Så här använder du Inspect Element på Mac eller Iphone
Är det möjligt att göra samma sak med en Mac eller till och med en iPhone? Du behöver bara följa några enkla steg nedan:
Hur du använder den på Mac
Om du har en Mac är Safari den bästa webbläsaren. Att öppna Utvecklingsverktyg i denna webbläsare skiljer sig något från samma process i Chrome eller Firefox. Du måste:
- Öppna webbläsaren
- Klicka på Safari på fliknamnet
- Välj “Inställningar“
- Klicka sedan på ikonen Avancerat kugghjul, som finns högst upp på skärmen.
- Markera rutan bredvid Visa menyn Utveckla i menyraden
När du har gjort detta kommer Inspect Element att vara tillgängligt på dina webbsidor. Du kan också kalla det med CMD + Option + I.
Så här använder du den på iPhone
Om du vill kontrollera hur mobilversionen av webbsidan ser ut på din iPhone med hjälp av funktionen Inspektera element måste du först aktivera Web Inspector för din iOS-enhet:
- Gå till Inställningar
- Välj appen Safari
- Rulla till botten och klicka på “Avancerad meny“.
- Aktivera nu kryssrutan bredvid “Web Inspector“.
Du måste också aktivera menyn Utvecklare på din Mac enligt instruktionerna ovan. När du har aktiverat dessa funktioner på din iOS-enhet och Mac bör du kunna se menyn Utveckla högst upp på din Mac. Du måste klicka på den för att se den bifogade iPhone och webbsidan som öppnas på den. När du växlar till en annan sida växlar du också fönstret Web Inspector för den sidan på din Mac
Vad är Elemental Panel
Det första du behöver veta är vad Element Panel är. Om du vill ändra designen eller några externa element på sidan måste du redigera CSS eller HTML. Du kan göra detta med hjälp av ett utvecklarverktyg som kallas Elementpanelen. Med den kan du kontrollera och ändra din sida från front-end. Några av de element som du kan se där är :
- Information om bilden, t.ex. dess storlek och källa.
- CSS-panel – det här alternativet används för att ändra sidans externa stil. Här kan du ändra parametrar som typsnitt, storlekar och färger.
- DOM-information eller DOM-panel Med det här alternativet kan du styra sidans utseende. Du kan ändra elementens position och navigera helt och hållet till HTML-filerna.
- Konsolpanelen presenterar de nya funktionerna under utvecklarverktygen.
- Elements händelselyssnare
- HTML-kommentarer
- Feedback
Inspektera en bilds renodlade och naturliga storlek
Ofta behöver du veta information om en bild på en webbsida, du kan “inspektera” den. På så sätt kan du till exempel få reda på bildens storlek. För att göra detta måste du föra muspekaren över IMG:n medan du befinner dig i DOM-trädet.
Inspektion av en särskilt använd bild från en källuppsättning (srcset)
Då kan du kontrollera vilken version av bilden som laddades och vilken exakt srcset-källa som användes. Med hjälp av srcset kan webbläsaren begära den version av bilden med den minsta storleken, som är något större än den verkliga bilden. Detta används för att visa en uppsättning bilder med olika upplösningar som webbläsaren kan välja mellan. Välj först IMG-objektet och kontrollera sedan informationen $0.currentSrc i konsolen. Observera att du kan öka bildernas egenskaper med srcset om du behöver använda enheter med högre DPI.
