Hur man visar HTML-källan i Google Chrome

Oavsett om du är en webbdesigner som felsöker din webbplats källkod eller bara är nyfiken på hur en webbplatss kod ser ut, kan du se 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 där du vill se 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 expanderad och oformaterad.

Om du letar efter ett specifikt element eller en del i HTML-källan är det tråkigt och krångligt 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 Utvecklarverktyg i Chrome och är ett mycket renare tillvägagångssätt för att visa källkoden. HTML är lättare att läsa här tack vare den extra formateringen och möjligheten att komprimera element som du inte är intresserad av att se.

Öppna Chrome och gå till sidan du vill inspektera; tryck sedan på Ctrl + Shift + i. En dockad ruta öppnas bredvid webbsidan du tittar på.

Klicka på den lilla grå pilen bredvid ett element för att utöka det ytterligare.

Om du inte vill se hela sidans kod som standard, utan istället inspektera ett specifikt element i HTML-koden, 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 dockningspositionen 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), välj sedan antingen lossa i ett separat fönster, docka till vänster, docka till botten eller docka till höger.

Det är allt som behövs. När du är klar med att titta på koden stänger du antingen fliken Visa källa eller klickar på ”X” i rutan Utvecklarverktyg för att återgå till din webbsida.