Bekijk de broncode van een webpagina in elke browser

De webpagina die u leest, bestaat onder andere uit de broncode. Dat is de informatie die uw webbrowser downloadt en vertaalt in wat u nu aan het lezen bent.

De meeste webbrowsers bieden de mogelijkheid om de broncode van een webpagina te bekijken zonder dat er aanvullende software vereist is, ongeacht het type apparaat waarop u zich bevindt.

Sommige bieden zelfs geavanceerde functionaliteit en structuur, waardoor het gemakkelijker wordt om HTML en andere programmacodes op de pagina te lezen.

Waarom zou je de broncode willen zien?

Er zijn verschillende redenen waarom u de broncode van een pagina wilt zien. Als je een webontwikkelaar bent, wil je misschien een kijkje nemen in de covers van de stijl of implementatie van een andere programmeur. Misschien bent u in kwaliteitsborging en probeert u vast te stellen waarom een ​​bepaald deel van een webpagina wordt weergegeven of zich gedraagt ​​zoals het is.

Je kunt ook een beginner zijn die probeert te leren hoe je je eigen pagina's kunt coderen en bent op zoek naar voorbeelden uit de echte wereld. Het is natuurlijk mogelijk dat je niet in een van deze categorieën valt en de bron gewoon uit pure nieuwsgierigheid wilt bekijken.

Hieronder vindt u instructies voor het bekijken van de broncode in uw browser naar keuze.

Google Chrome

Wordt uitgevoerd: Chrome OS, Linux, macOS, Windows

De desktopversie van Chrome biedt drie verschillende methoden voor het bekijken van de broncode van een pagina, de eerste en de eenvoudigste methode met behulp van de volgende sneltoets: CTRL + U (COMMAND + OPTIE + U op macOS).

Wanneer u op deze sneltoets drukt, wordt een nieuw browsertabblad geopend met HTML en andere code voor de actieve pagina. Deze bron heeft een kleurcode en is gestructureerd op een manier die het eenvoudiger maakt om te compartimenteren en te vinden waarnaar u op zoek bent. U kunt ook komen door de volgende tekst in de adresbalk van Chrome in te voeren, die aan de linkerkant van de URL van de webpagina is toegevoegd en de invoeren sleutel: view-source: (dat wil zeggen weergavebron: https: //www.Go-Travels.com).

De derde methode is via de ontwikkelaarstools van Chrome, waarmee u een diepere duik in de code van de pagina kunt nemen en deze tijdens de test kunt aanpassen voor test- en ontwikkelingsdoeleinden. De interface van de ontwikkelaarstools kan worden geopend en gesloten met behulp van deze sneltoets: CTRL + SHIFT + I (COMMANDO + OPTIE + I op macOS). U kunt ze ook starten door het volgende pad te volgen.

1. Selecteer de hoofdmenuknop van Chrome in de rechterbovenhoek en wordt weergegeven door drie verticaal uitgelijnde stippen.

2. Wanneer het vervolgkeuzemenu wordt weergegeven, plaatst u de muisaanwijzer op de Meer tools keuze.

3. Selecteer als het submenu verschijnt Ontwikkelaarstools.

Android

De bron van een webpagina in Chrome voor Android bekijken, is net zo eenvoudig als het toevoegen van de volgende tekst aan de voorzijde van zijn adres (of URL) en het verzenden van het volgende: view-source:. Een voorbeeld hiervan zou zijn view-source: https: //www.Go-Travels.com . HTML en andere code van de betreffende pagina worden direct in het actieve venster weergegeven.

iOS

Hoewel er geen native methoden zijn om de broncode te bekijken met Chrome op uw iPad, iPhone of iPod touch, is het eenvoudig en effectief om een ​​oplossing van derden te gebruiken, zoals de app View Source.

Beschikbaar voor $ 0,99 in de App Store. View Source vraagt ​​je om de URL van de pagina in te voeren (of kopieer en plak het vanuit de adresbalk van Chrome, wat soms het eenvoudigste pad is dat je moet nemen) en dat is het dan. Naast het tonen van HTML en andere broncode, heeft de app ook tabbladen die individuele pagina-items weergeven, het Document Object Model (DOM), evenals pagina-afmetingen, cookies en andere interessante details.

Microsoft Edge

Wordt uitgevoerd: Windows

Met de Edge-browser kunt u de broncode van de huidige pagina bekijken, analyseren en zelfs manipuleren via de interface voor ontwikkelaarstools. Voor toegang tot deze handige toolset kunt u een van deze sneltoetsen gebruiken: F12 of CTRL + U. Als u liever de muis gebruikt, klikt u op de menuknop van Edge (drie stippen in de rechterbovenhoek) en kiest u de F12 Developer Tools optie uit de lijst.

Nadat de dev-hulpmiddelen voor de eerste keer zijn uitgevoerd, voegt Edge twee extra opties toe aan het contextmenu van de browser (toegankelijk door met de rechtermuisknop ergens in een webpagina te klikken): Inspecteer het element en Bekijk de bron, de laatste die de Debugger gedeelte van de dev-tools-interface gevuld met broncode.

Mozilla Firefox

Wordt uitgevoerd: Linux, macOS, Windows

Om de broncode van een pagina te bekijken in de desktopversie van Firefox, kunt u op drukken CTRL + U (COMMAND + U op macOS) op uw toetsenbord, waarmee een nieuw tabblad met HTML en andere code voor de actieve webpagina wordt geopend.

Als u de volgende tekst in de adresbalk van Firefox, direct links van de URL van de pagina, invoegt, wordt dezelfde bron in plaats daarvan weergegeven op het huidige tabblad: view-source: ( d.w.z. kijkbron: https: //www.dotdash.com ).

Een andere manier om toegang te krijgen tot de broncode van een pagina is via de ontwikkeltools van Firefox, toegankelijk via de volgende stappen.

1. Selecteer de knop van het hoofdmenu in de rechterbovenhoek van uw browservenster en wordt weergegeven door drie horizontale lijnen.

2. Wanneer het pop-outmenu verschijnt, klikt u op de Ontwikkelaar "moersleutelpictogram.

3. Het contextmenu van Web Developer moet nu zichtbaar zijn. Selecteer de Pagina bron keuze.

Met Firefox kunt u ook de broncode voor een bepaald gedeelte van een pagina weergeven, waardoor het eenvoudig is om problemen te isoleren. Om dit te doen, markeer eerst het gebied dat u interesseert met uw muis. Klik vervolgens met de rechtermuisknop en kies Bekijk selectiebron vanuit het contextmenu van de browser.

Android

Het bekijken van de broncode in de Android-versie van Firefox is haalbaar door de URL van de webpagina als volgt te voorzien van de volgende tekst: view-source:. Als u bijvoorbeeld de HTML-bron voor Dotdash wilt bekijken, verzendt u de volgende tekst in de adresbalk van de browser: view-source: https: //www.dotdash.com .

iOS

Onze aanbevolen methode om de broncode van webpagina's op uw iPad, iPhone of iPod touch te bekijken, is via de View Source-app, beschikbaar in de App Store voor $ 0,99. Hoewel het niet rechtstreeks is geïntegreerd met Firefox, kunt u eenvoudig een URL vanuit de browser naar de app kopiëren en plakken om de HTML- en andere code te onthullen die aan de betreffende pagina is gekoppeld.

Apple Safari

Werkt op iOS en macOS

iOS

Hoewel Safari voor iOS standaard niet de mogelijkheid biedt om de paginabron te bekijken, integreert de browser vrij naadloos met de View Source-app, beschikbaar in de App Store voor $ 0,99.

Na het installeren van deze app van derden keert u terug naar de Safari-browser en tikt u op de knop Delen, die zich onderaan het scherm bevindt en die wordt weergegeven door een vierkant en een pijl-omhoog. Het iOS-gedeelde blad moet nu zichtbaar zijn en de onderste helft van uw Safari-venster overlappen. Scroll naar rechts en selecteer de Bekijk bron knop.

Een kleurgecodeerde gestructureerde weergave van de broncode van de actieve pagina moet nu worden weergegeven, samen met andere tabbladen waarmee u pagina-items, scripts en meer kunt bekijken.

MacOS

Om de broncode van een pagina in de desktopversie van Safari te bekijken, moet u eerst de broncode ervan inschakelen Ontwikkelen menu. De onderstaande stappen helpen u bij het activeren van dit verborgen menu en het weergeven van de HTML-bron van een pagina.

1. kiezen Safari in het browsermenu bovenaan het scherm.

2. Wanneer het vervolgkeuzemenu verschijnt, selecteert u de voorkeuren keuze.

3. De voorkeuren van Safari moeten nu zichtbaar zijn. Klik op de gevorderd pictogram, uiterst rechts op de bovenste rij.

4. Naar de onderkant van het gedeelte Geavanceerd is een optie met het label Toon Ontwikkelingsmenu in menubalk, vergezeld van een leeg selectievakje. Selecteer dit vak één keer om een ​​vinkje erin te plaatsen en sluit het venster Voorkeuren door op de rode 'x' in de linkerbovenhoek te klikken.

5. Selecteer de Ontwikkelen menu, bovenaan het scherm.

6. Wanneer het vervolgkeuzemenu verschijnt, selecteert u Toon paginabron. U kunt ook de volgende sneltoets gebruiken: COMMAND + OPTIE + U.

Opera

Wordt uitgevoerd: Linux, macOS, Windows

Om de broncode van de actieve webpagina in de Opera-browser te bekijken, gebruikt u de volgende sneltoets: CTRL + U (COMMAND + OPTIE + U op macOS). Als u in plaats daarvan de bron op het huidige tabblad wilt laden, typt u de volgende tekst links van de URL van de pagina in de adresbalk en raakt u Enter: view-source: ( d.w.z. kijkbron: https: //www.Go-Travels.com ).

Met de desktopversie van Opera kun je HTML-broncode, CSS en andere elementen bekijken met behulp van de geïntegreerde ontwikkelaarstools. Om deze interface te starten, die standaard aan de rechterkant van uw hoofdbrowser zal verschijnen, drukt u op de volgende sneltoets: CTRL + SHIFT + I (COMMANDO + OPTIE + I op macOS).

Opera's toolset voor ontwikkelaars is ook toegankelijk via de volgende stappen.

1. Selecteer het Opera-logo in de linkerbovenhoek van uw browservenster.

2. Wanneer het vervolgkeuzemenu wordt weergegeven, plaatst u de muisaanwijzer op de Meer tools keuze.

3. Klik op Toon developer-menu.

4. Selecteer opnieuw het Opera-logo.

5. Wanneer het vervolgkeuzemenu wordt weergegeven, plaatst u uw muisaanwijzer op de voorgrond Ontwikkelaar.

6. Selecteer als het submenu verschijnt Ontwikkelaarstools.

Vivaldi

Er zijn meerdere manieren om de paginabron in de Vivaldi-browser te bekijken. De eenvoudigste is via de CTRL + U sneltoets, die code van de actieve pagina in een nieuw tabblad presenteert.

U kunt ook de volgende tekst toevoegen aan de voorzijde van de URL van de pagina, die de broncode op het huidige tabblad weergeeft: view-source:. Een voorbeeld hiervan zou zijn view-source: http: //www.dotdash.com .

Een andere methode is via de geïntegreerde ontwikkelaarstools van de browser, toegankelijk door op de CTRL + SHIFT + I combinatie of via de Ontwikkelaarstools optie in de browser Hulpmiddelen menu - gevonden door de. te selecteren V logo in de linkerbovenhoek. Het gebruik van dev-tools zorgt voor een veel diepgaandere analyse van de bron van de pagina.