Är du nyfiken på vad en webbplats består av? Vill du veta hur du ändrar teckenstorlek eller färg på din webbplats? Genom att visa HTML-koden för en webbsida kan du göra alla dessa saker och mer.
I den här handledningen kommer vi att visa dig hur du visar HTML-koden för en webbsida i Chrome.
Visa HTML-kod i Chrome
När du skriver i HTML är källkoden den serie av taggar och attribut som används för att definiera strukturen och innehållet på en webbsida.
Webbläsare läser källkoden och översätter den till den grafiska webbsidan du ser på skärmen. Förutom att definiera utseendet på en webbsida kan källkoden också användas för att lägga till interaktivitet, såsom popup-fönster, formulär och rullgardinsmenyer.
Medan den genomsnittliga Internetanvändaren kanske aldrig behöver se HTML-källkoden för en webbsida, finns det flera anledningar till att vissa kanske vill göra det.
För utvecklare kan källkoden vara ett användbart sätt att förstå hur en sida är uppbyggd och bestämma vilka stilelement och skript som används. För designers kan det vara fördelaktigt att se hur andra designers har använt HTML för att skapa effektiva designs.
I vissa fall kan användare också vilja se källkoden för att fixa buggar eller lära sig mer om hur en viss webbplats eller webbapplikation fungerar. Oavsett orsaken är det en relativt enkel process i Chrome att visa HTML-källkoden.
Hur man visar HTML-koden för en webbsida i Chrome på Windows PC
Operativsystemet Windows är ett av de mest stödda systemen för Chrome. Chrome är baserat på Chromium-projektet med öppen källkod, till vilket Microsoft är en stor bidragsgivare. Detta stöd sträcker sig till HTML-området, där den populära webbläsaren tillåter användare att se HTML-koden för vilken webbplats som helst.
Du kan se HTML-koden på två sätt.
Använder Visa sidkälla
Denna metod är enkel:
- Öppna Chrome och navigera till sidan där du vill visa HTML-källkoden.
- Högerklicka på sidan och välj Visa sidkälla, eller tryck på Ctrl + U på tangentbordet för att öppna källkoden på en ny flik.
Källkoden kommer att visas på den nya fliken och du kan bläddra igenom den för att se HTML-kodningen för den sidan.
Användning av utvecklingsverktyg
För att inspektera källkoden för en webbsida med hjälp av utvecklarverktygen i Google Chrome, följ stegen nedan.
- Öppna Google Chrome och navigera till webbsidan du vill inspektera.
- Tryck på Ctrl + Shift + I på ditt tangentbord. Panelen Utvecklarverktyg öppnas i en panel bredvid webbsidan du visar.
- Klicka på fliken “Element” längst upp i panelen. Detta kommer att visa HTML-källkoden för webbsidan.
- Du kan nu granska sidans källkod. Om du vill komprimera ett objekt klickar du på triangeln bredvid dess taggnamn. För att se mer information om en komponent, högerklicka på den och välj “Inspektera.”
Observera att den här metoden är bäst för HTML-sidor; Det är möjligt att se källkoden för andra typer av webbsidor, men formateringen kan vara svårare att läsa.
Så här visar du HTML-koden för en webbsida i Chrome på en Mac
Om du är webbutvecklare är det viktigt att kunna se HTML-koden för en webbsida. Detta gör att du kan se hur sidan är uppbyggd och felsöka eventuella problem som kan uppstå. Lyckligtvis är det enkelt att göra detta i Chrome på en Mac. Följ bara dessa steg:
- Öppna Chrome och navigera till webbsidan där du vill visa HTML-koden.
- Högerklicka på sidan och välj “Inspektera”.
- En ny panel öppnas längst ner på skärmen som visar HTML-koden.
- Du kan också klicka på specifika element i HTML-koden för att se hur de är upplagda på sidan. Du kan till exempel se vilka CSS-stilar som tillämpas på ett element genom att välja det och sedan klicka på fliken “Styler” i panelen som öppnas.
- För att stänga panelen, klicka på “X” i det övre högra hörnet.
Alternativt kan du använda Chromes utvecklarverktyg för att se källkoden.
- Öppna Google Chrome och navigera till webbsidan du vill inspektera.
- Klicka på menyikonen (tre punkter) i det övre högra hörnet av webbläsaren och välj Fler verktyg och utvecklarverktyg från rullgardinsmenyn.
- Panelen Utvecklarverktyg öppnas längst ned på skärmen. Välj “Artiklar” högst upp på panelen.
- Du kommer nu att se HTML-koden för den aktuella sidan som visas i elementpanelen. Du kan använda de olika alternativen i panelen för att inspektera och felsöka koden efter behov.
Med bara några klick kan du enkelt visa HTML-koden för valfri webbsida i Chrome på en Mac. Detta kan vara användbart när du försöker felsöka webbutvecklingsproblem eller om du vill ta en närmare titt på hur en viss webbplatsen är byggd.
Så här visar du HTML-koden för en webbsida i Chrome på iPhone-appen
Om du använder en iPhone kan du visa HTML-koden för vilken sida som helst i Chrome på två sätt:
Justering av URL
Du kan enkelt se HTML-koden för vilken sida som helst genom att göra en liten justering av webbadressen:
- Öppna Chrome och navigera till webbsidan vars HTML-kod du vill visa.
- Tryck en gång på adressfältet för att starta redigeringsläget.
- Flytta markören till framsidan av URL:en.
- Skriv “Visa källa” och tryck sedan på “Go”-knappen. HTML-koden för webbsidan kommer att visas i Chrome.
Användning av utvecklingsverktyg
Chrome Developer Tools är också tillgängligt på iOS, men det kräver en annan uppsättning steg för att starta den jämfört med datorer.
- Tryck på de tre prickarna i det övre högra hörnet av skärmen och välj “Inställningar”.
- Rulla ned och tryck på “Avancerat” och aktivera sedan reglaget bredvid “Utvecklarverktyg.”
- Tryck och håll kvar ett tomt område på sidan och välj sedan “Inspektera element.” Detta öppnar en sidopanel med HTML-koden för den sidan.
Så här visar du HTML-koden för en webbsida i Chrome i Android-appen
När du använder Chrome-appen på din Android-telefon kanske du vill visa HTML-koden för en webbsida. Detta kan vara användbart om du försöker felsöka ett problem med sidan eller vill se hur sidan är uppbyggd. För att visa HTML-koden för en webbsida i Chrome på din Android-telefon, följ dessa steg:
- Öppna Chrome på din Android.
- Skriv “view-source:” följt av webbadressen till sidan du vill visa där du vill visa källkoden. Om du till exempel vill se källkoden för www.google.com skriver du “view-source:www.google.com” i Chromes adressfält.
Detta öppnar HTML-koden för den sidan i Chromes inbyggda gränssnitt för utvecklarverktyg. Därifrån kan du visa och redigera koden som du vill. Observera att den här metoden bara fungerar om webbplatsen du försöker visa tillåter åtkomst till källkoden. Om inte, kommer du inte att kunna se något annat än ett felmeddelande.
Så här visar du HTML-koden för en webbsida i Chrome på en iPad
Chrome på iPad-appen gör det enkelt att visa HTML-koden för alla webbsidor. Följ bara dessa steg:
- Öppna Chrome och skriv “visa källa:” följt av webbadressen till sidan du vill visa. Om du till exempel vill se källkoden för www.alphr.com skriver du “view-source:www.alphr.com” i Chromes adressfält.
- Tryck på “Go”-knappen.
Detta bör ladda sidans källkod i en ny flik i Chrome. Därifrån kan du spara eller dela koden efter behov.
Källkoden är limmet som håller ihop sidorna
HTML är grunden för alla webbplatser. Det ger den struktur och innehåll som besökarna ser när de läser in en sida i sin webbläsare.
Medan det slutliga utseendet på en sida kan bestämmas av CSS eller andra stilspråk, bestämmer HTML-koden sidans grundläggande struktur och innehåll. Vissa ändringar kan eventuellt bryta sidan. Av denna anledning är det viktigt att ha en god förståelse för HTML när du visar eller gör ändringar i källkoden.
Observera också att även om HTML-koden kan vara till hjälp i vissa fall, kommer ändringar som görs i koden inte att återspeglas på den aktiva webbsidan. Endast ändringar som lagts upp av webbplatsens administratör kommer att vara synliga för besökare.
Har du försökt visa HTML-koden för någon webbsida med någon av metoderna som diskuteras i den här handledningen? Hur gick det?
Låt oss veta i kommentarsfältet.
