Oavsett om du är webbdesigner som felsöker din webbplats källkod eller bara är nyfiken på hur en webbplats kod ser ut kan du visa HTML-källan direkt i Google Chrome. Det finns två sätt att visa HTML-källan: Visa källa och inspektera med hjälp av utvecklarverktyg.
Visa källa med Visa sidkälla
Starta Chrome och hoppa till webbsidan du vill visa HTML-källkoden. Högerklicka på sidan och klicka på "Visa sidkälla" eller tryck på Ctrl + U för att se sidans källa på en ny flik.
En ny flik öppnas tillsammans med all HTML för webbsidan, helt utökad och oformaterad.
Om du letar efter ett specifikt element eller en del i HTML-källan är det tråkigt och besvärligt att använda Visa källa, särskilt om sidan använder mycket JavaScript och CSS.
Inspektera källan med hjälp av utvecklarverktyg
Den här metoden använder fönstret Developer Tools i Chrome och är en mycket renare metod för att visa källkoden. HTML är lättare att läsa här tack vare den extra formateringen och möjligheten att kollapsa element som du inte är intresserad av att se.
Öppna Chrome och gå till sidan du vill inspektera; tryck sedan på Ctrl + Skift + i. En dockad ruta öppnas bredvid webbsidan du tittar på.
Klicka på den lilla grå pilen bredvid ett element för att expandera det ytterligare.
Om du inte vill se hela sidans kod som standard utan istället inspektera ett visst element i HTML: n högerklickar du på det utrymmet på sidan och klickar sedan på "Inspektera".
När rutan öppnas den här gången går den direkt till den del av koden som innehåller det elementet du klickade på.
Om du vill ändra dockningsläget kan du flytta den till botten, vänster, höger eller till och med lossa den i ett separat fönster. Klicka på menyikonen (tre punkter) och välj sedan antingen lossa i ett separat fönster, docka till vänster, docka till botten respektive docka till höger.
Det är allt som finns i det. När du är färdig med att titta på koden stänger du antingen fliken Visa källa eller klickar på ”X” i fönstret för utvecklarverktyg för att återgå till din webbsida.
