Är du nyfiken på vad en webbsida 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 självstudien visar vi 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.
Källkoden läses av webbläsare och översätts till den grafiska webbsidan du ser på skärmen. Förutom att definiera utseendet och känslan för 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 en webbsidas HTML-källkod, 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 stil- och skriptelement 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 layouter.
I vissa fall kan användare också vilja se källkoden för att felsöka fel 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å en Windows-dator
Operativsystemet Windows är ett av Chromes mest kompatibla system. Chrome är byggt ovanpå Chromium-projektet med öppen källkod, till vilket Microsoft är en stor bidragsgivare. Denna kompatibilitet sträcker sig till HTML-sfären, 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ända utvecklarverktyg
För att inspektera källkoden för en webbsida med hjälp av utvecklarverktyg 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 docka bredvid webbsidan du tittar på.
- Klicka på fliken ”Element” längst upp i rutan. Detta kommer att visa HTML-källkoden för webbsidan.
- Du kan nu granska källkoden för sidan. För att komprimera ett element, klicka på triangeln bredvid dess taggnamn. För att se mer information om en komponent, högerklicka på den och välj ”Inspektera.”
Tänk på 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 mer utmanande att läsa.
Hur man visar HTML-koden för en webbsida i Chrome på en Mac
Om du är en webbutvecklare är det viktigt att du kan se HTML-koden för en webbsida. Detta låter dig se hur sidan är uppbyggd och felsöka eventuella problem som kan uppstå. Lyckligtvis är det enkelt att göra 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 ruta öppnas längst ned på skärmen som visar HTML-koden.
- Du kan också klicka på specifika element i HTML-koden för att se hur de är utformade på sidan. Till exempel kan du se vilka CSS-stilar som tillämpas på ett element genom att välja det och sedan klicka på fliken ”Styles” i rutan som öppnas.
- För att stänga rutan, klicka på ”X” i det övre högra hörnet.
Alternativt kan du använda Chrome Developer Tools för att visa källkoden.
- Öppna Google Chrome och navigera till webbsidan som du vill inspektera.
- Klicka på menyikonen (tre punkter) i webbläsarens övre högra hörn och välj Fler verktyg och utvecklarverktyg från rullgardinsmenyn.
- Panelen Utvecklarverktyg öppnas längst ned på skärmen. Välj ”Element” överst i rutan.
- 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 vilken webbsida som helst i Chrome på en Mac. Detta kan vara användbart när du försöker felsöka webbutvecklingsproblem eller vill ta en närmare titt på hur en viss webbplats är uppbyggd.
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:
Justerar webbadressen
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 i adressfältet för att starta redigeringsläget.
- Flytta markören till framsidan av URL:en.
- Skriv ”View-source” och tryck sedan på ”Go”-knappen. HTML-koden för webbsidan kommer att visas i Chrome.
Använda utvecklarverktyg
Chrome Developer Tools är också tillgängliga på iOS, men en annan uppsättning steg krävs för att starta det jämfört med datorer.
- Tryck på de tre prickarna i det övre högra hörnet på 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 på 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ölj dessa steg för att visa HTML-koden för en webbsida i Chrome på din Android-telefon:
- Öppna Chrome på din Android.
- Skriv ”view-source:” följt av webbadressen till sidan du vill ha 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 efter önskemål. Tänk på att den här metoden bara fungerar om webbplatsen du försöker visa tillåter åtkomst till källkoden. Om det inte gör det kommer du inte att kunna se något annat än ett felmeddelande.
Hur man visar 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 ”view-source:” följt av webbadressen till sidan du vill visa. Om du till exempel vill se källkoden för www.alphr.com måste du skriva ”view-source:www.alphr.com” i Chromes adressfält.
- Tryck på ”Go”-knappen.
Detta bör läsa in 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 laddar en sida i sin webbläsare.
Även om 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.
Tänk också på att även om det kan vara till hjälp att titta på HTML-koden i vissa fall, kommer ändringar som görs i koden inte att återspeglas på den aktiva webbsidan. Endast ändringar publicerade av webbplatsens administratör kommer att vara synliga för besökarna.
Har du provat att visa HTML-koden för en webbsida med någon av metoderna som diskuteras i denna handledning? Hur gick det?
Låt oss veta i kommentarsfältet.