Den webbsida du läser består av bland annat källkod. Det är informationen som din webbläsare hämtar och översätter till det du läser just nu.
De flesta webbläsare ger möjlighet att se källkoden på en webbsida utan att behöva ytterligare programvara, oavsett vilken typ av enhet du är på.
Vissa erbjuder även avancerad funktionalitet och struktur, vilket gör det enklare att läsa HTML och annan programmeringskod på sidan.
Varför skulle du vilja se källkoden?
Det finns flera anledningar till varför du kanske vill se en sidas källkod. Om du är en webbutvecklare kanske du vill ta en titt under omslagen på en annan programmerares speciella stil eller implementering. Kanske är du i kvalitetssäkring och försöker att kontrollera varför en viss del av en webbsida gör eller beter sig som det är.
Du kan också vara en nybörjare som försöker lära dig hur du kodar dina egna sidor och letar efter några verkliga exempel. Det är självklart möjligt att du inte hamnar i någon av dessa kategorier och bara vill se källan av ren nyfikenhet.
Nedan följer instruktioner om hur du visar källkoden i din webbläsare.
Google Chrome
Kör på: Chrome OS, Linux, MacOS, Windows
Den stationära versionen av Chrome erbjuder tre olika metoder för visning av en sidas källkod, den första och enklaste med hjälp av följande tangentbordsgenväg: CTRL + U (COMMAND + OPTION + U på macOS).
När du trycker på öppnar den här genvägen en ny webbläsarflik som visar HTML och annan kod för den aktiva sidan. Denna källa är färgkodad och strukturerad på ett sätt som gör det enklare att avdela och hitta det du letar efter. Du kan också komma dit genom att ange följande text i Chrome adressfält, bifogad till vänster om webbsidans webbadress och välja Stiga på nyckel: visa källa: (dvs visningskälla: https: //www.Go-Travels.com).
Den tredje metoden är via Chrome: s utvecklingsverktyg, som gör att du kan ta en djupare dyka in i sidens kod, samt anpassa den till flyget för test och utvecklingsändamål. Utvecklarverktygsgränssnittet kan öppnas och stängas med hjälp av denna tangentbordsgenväg: CTRL + SHIFT + I (COMMAND + OPTION + I på macOS). Du kan också starta dem genom att ta följande sökväg.
-
Välj Krom huvudmenyknapp, som ligger i det övre högra hörnet och representeras av tre vertikalt inriktade prickar.
-
När rullgardinsmenyn visas, håll muspekaren över Fler verktyg alternativ.
-
När undermenyn visas väljer du Utvecklarverktyg.
Android
Att visa en webbas källa i Chrome för Android är lika enkel som att lägga till följande text på framsidan av adressen (eller webbadressen) och skicka in den: visa källa:. Ett exempel på detta skulle vara vy-källa: https: //www.Go-Travels.com . HTML och annan kod från den aktuella sidan visas direkt i det aktiva fönstret.
iOS
Medan det inte finns några inbyggda metoder för att visa källkod med Chrome på din iPad, iPhone eller iPod touch, är det enklaste och mest effektiva att använda en tredjepartslösning, till exempel View Source-appen.
Tillgänglig för $ 0,99 i App Store, uppmanar Vis källa dig att ange sidans webbadress (eller kopiera / klistra in den från Chrome adressfält, som ibland är den enklaste vägen att ta) och det är det. Förutom att visa HTML och annan källkod har appen också flikar som visar enskilda sidoinställningar, dokumentobjektmodellen (DOM), sidformat, cookies och andra intressanta detaljer.
Microsoft Edge
Kör på: Windows
Edge-webbläsaren låter dig visa, analysera och till och med manipulera den aktuella sidans källkod genom verktyget Utvecklarverktyg. För att komma åt den här praktiska verktyget kan du använda en av dessa kortkommandon: F12 eller CTRL + U. Om du föredrar musen istället klickar du på Edge menyknapp (tre prickar i övre högra hörnet) och väljer F12 Utvecklarverktyg alternativet från listan.
Efter att dev-verktygen körs för första gången lägger Edge ytterligare två alternativ till webbläsarens snabbmeny (tillgänglig genom att högerklicka var som helst på en webbsida): Inspektera elementet och Visa källa, den senare som öppnar debugger del av dev tools-gränssnittet befolkade med källkod.
Mozilla Firefox
Kör på: Linux, MacOS, Windows
För att visa en källkod i en skrivbordsversion av Firefox kan du trycka på CTRL + U (COMMAND + U på macOS) på ditt tangentbord, vilket öppnar en ny flik som innehåller HTML och annan kod för den aktiva webbsidan.
Om du skriver följande text i Firefox adressfält, direkt till vänster om sidans webbadress, kommer samma källa att visas i den aktuella fliken istället: visa källa: ( dvs visningskälla: https: //www.dotdash.com ).
Ett annat sätt att komma åt en sids källkod är genom Firefox utvecklingsverktyg, tillgänglig genom att följa följande steg.
-
Välj huvudmenyknappen, som finns i det övre högra hörnet av ditt webbläsarfönster och representeras av tre horisontella linjer.
-
När popup-menyn visas, klicka på Utvecklare "skiftnyckel" -ikonen.
-
Webutvecklarens sammanhangsmeny bör nu vara synlig. Välj Sidkälla alternativ.
Firefox låter dig också visa källkoden för en viss del av en sida, vilket gör det enkelt att isolera problem. För att göra det, markera först det område du är intresserad av med musen. Högerklicka sedan och välj Visa urvalskälla från webbläsarens snabbmeny.
Android
Visning av källkod i Android-versionen av Firefox kan uppnås genom att prefixera webbsidans webbadress med följande text: visa källa:. Om du till exempel vill se HTML-källan för Dotdash kan du skicka följande text i webbläsarens adressfält: vy-källa: https: //www.dotdash.com .
iOS
Vår rekommenderade metod för att visa källkod för webbsidor på din iPad, iPhone eller iPod touch är via appen Visa Källa, tillgänglig i App Store för $ 0.99. Medan det inte är integrerat direkt med Firefox kan du enkelt kopiera och klistra in en webbadress från webbläsaren till appen för att avslöja HTML och annan kod som är kopplad till den aktuella sidan.
Apple Safari
Kör på iOS och macOS
iOS
Även om Safari för iOS inte innehåller möjligheten att visa sidkällan som standard, integrerar webbläsaren ganska sömlöst med View Source-appen, som finns i App Store för $ 0.99.
När du har installerat den här tredje parten, återgår du till Safari-webbläsaren och trycker på Share-knappen, som ligger längst ner på skärmen och representeras av en fyrkant och en uppåtpil. IOS-delbladet ska nu vara synligt, vilket överlagrar den nedre halvan av ditt Safari-fönster. Bläddra till höger och välj Visa källa knapp.
En färgkodad, strukturerad representation av den aktiva sidans källkod ska nu visas tillsammans med andra flikar som låter dig visa sidans tillgångar, skript och mer.
Mac OS
För att visa källkoden för en sida i den skrivbordsversion av Safari måste du först aktivera den Utveckla meny. Stegen nedan går genom att aktivera den här dolda menyn och visa en HTML-källa för en sida.
-
Välj Safari i webbläsarmenyn, högst upp på skärmen.
-
När rullgardinsmenyn visas väljer du Inställningar alternativ.
-
Safariens inställningar bör nu vara synliga. Klicka på Avancerad ikonen, som ligger längst till höger om den övre raden.
-
Mot slutet av avsnittet Avancerat är ett alternativ märkt Visa utveckla menyn i menyraden, tillsammans med en tom kryssruta. Markera den här rutan en gång för att placera en markering i den, och stäng fönstret Inställningar genom att klicka på den röda "x" som finns i övre vänstra hörnet.
-
Välj Utveckla menyn ligger längst upp på skärmen.
-
När rullgardinsmenyn visas väljer du Visa sidkälla. Du kan också använda följande tangentbordsgenväg istället: COMMAND + OPTION + U.
Opera
Kör på: Linux, MacOS, Windows
Om du vill visa källkoden från den aktiva webbsidan i operatorns webbläsare använder du följande tangentbordsgenväg: CTRL + U (COMMAND + OPTION + U på macOS). Om du föredrar att ladda källan i den aktuella fliken istället, skriv följande text till vänster om sidans webbadress i adressfältet och tryck på Ange: Visa-Källa: ( dvs visningskälla: https: //www.Go-Travels.com ).
Den stationära versionen av Opera kan du också visa HTML-källa, CSS och andra element genom att använda dess integrerade utvecklingsverktyg. För att starta det här gränssnittet, som som standard kommer att visas på höger sida av huvudfönstret, trycker du på följande tangentbordsgenväg: CTRL + SHIFT + I (COMMAND + OPTION + I på macOS).
Operans verktygsverktyg är också tillgängligt genom att följa följande steg.
-
Välj Opera-logotypen, som finns i det övre vänstra hörnet i ditt webbläsarfönster.
-
När rullgardinsmenyn visas, håll muspekaren över Fler verktyg alternativ.
-
Klicka på Visa utvecklarmenyn.
-
Välj Opera-logotypen igen.
-
När rullgardinsmenyn visas, håll muspekaren över Utvecklare.
-
När undermenyn visas väljer du Utvecklarverktyg.
Vivaldi
Det finns flera sätt att visa sidkällan i Vivaldi-webbläsaren. Det enklaste är via CTRL + U Tangentbordsgenväg, som presenterar kod från den aktiva sidan i en ny flik.
Du kan också lägga till följande text längst upp på sidans webbadress, som visar källkoden i den aktuella fliken: visa källa:. Ett exempel på detta skulle vara vy-källa: http: //www.dotdash.com .
En annan metod är genom webbläsarens integrerade utvecklingsverktyg, tillgängligt genom att trycka på CTRL + SHIFT + I kombination eller genom Utvecklarverktyg alternativ i webbläsarens Verktyg meny - hittade genom att välja V logotyp i övre vänstra hörnet. Använda dev-verktygen möjliggör en mycket mer djupgående analys av sidans källa.
