Wat te weten
- Klik met de rechtermuisknop op de webpagina en kies Bekijk paginabron .
- Sneltoets: Druk Ctrl + IN (Windows-pc) of Commando + Keuze + IN (Mac).
- Als u de ontwikkelaarstools van Chrome wilt gebruiken, selecteert u Menu (drie punten) > Meer gereedschap > Ontwikkelaarstools .
In dit artikel wordt uitgelegd hoe u toegang krijgt tot de HTML-broncode van een website in de webbrowser Google Chrome, en hoe u de ontwikkelaarstools van Chrome opent en gebruikt. Het bekijken van de broncode van een site is een uitstekende manier voor beginners om HTML te leren.
Bekijk de broncode in Chrome
Dus hoe bekijk je de broncode van een website? Hier vindt u de stapsgewijze instructies om dit te doen met behulp van de Google Chrome-browser.
-
Open de Google Chrome-webbrowser (als je niet hebt Google Chrome geïnstalleerd , dit is een gratis download).
-
Navigeer naar de webpagina die u wilt bekijken .
-
Klik met de rechtermuisknop de pagina en kijk naar het menu dat verschijnt. Vanuit dat menu klikt u op Bekijk paginabron .
-
De broncode voor die pagina verschijnt nu als een nieuw tabblad in de browser.
-
Als alternatief kunt u ook de sneltoetsen van gebruiken Ctrl + IN op een pc om een venster te openen waarin de broncode van een site wordt weergegeven. Op een Mac is deze snelkoppeling Commando + Keuze + IN .
Hilary Allison / Lifewire
hoe u kunt zien wie uw Facebook-profiel stalkt
Gebruik de ontwikkelaarstools van Chrome
Naast het simpeleBekijk paginabronmogelijkheden die Google Chrome biedt, kunt u ook profiteren van hun uitstekende Ontwikkelaarstools om nog dieper in een site te graven. Met deze tools kunt u niet alleen de HTML zien, maar ook de CSS die van toepassing is op de weergave-elementen in dat HTML-document.
Om de ontwikkelaarstools van Chrome te gebruiken:
-
Open Google Chrome .
-
Navigeren naar de webpagina die u wilt bekijken .
-
Selecteer de menu met drie stippen in de rechterbovenhoek van het browservenster.
-
Beweeg de muisaanwijzer over vanuit het menu Meer gereedschap en kies dan Ontwikkelaarstools in het menu dat verschijnt.
-
Er wordt een venster geopend waarin de HTML-broncode aan de linkerkant van het venster wordt weergegeven en de bijbehorende CSS aan de rechterkant.
-
Als alternatief kunt u met de rechtermuisknop klikken een element in een webpagina en selecteer Inspecteren uit het menu dat verschijnt, verschijnen de ontwikkelaarstools van Chrome en wordt het specifieke gedeelte dat u in de HTML hebt gekozen gemarkeerd, met de bijbehorende CSS aan de rechterkant. Het is super handig als u meer wilt weten over een bepaald onderdeel van een site.
hoe foto's van Google Photos naar de computer te downloaden
Is het bekijken van de broncode legaal?
Door de jaren heen hebben veel nieuwe webontwerpers zich afgevraagd of het acceptabel is om de broncode van een site te bekijken en deze te gebruiken voor hun opleiding en uiteindelijk voor het werk dat ze doen. Hoewel het in het groot kopiëren van de code van een site en deze op een website als uw eigen code doorgeeft, zeker niet acceptabel is, is het gebruik van die code als springplank om van te leren feitelijk hoeveel vooruitgang er in deze branche is geboekt.
Zoals we aan het begin van dit artikel al zeiden, zou het vandaag de dag moeilijk zijn om een werkende webprofessional te vinden die niets heeft geleerd door de bron van een site te bekijken! Ja, het inzien van de broncode van een site is legaal. Het is ook veilig om die code te gebruiken als hulpmiddel om iets soortgelijks te bouwen. Door code te nemen zoals het is en het door te geven als je werk, begin je problemen tegen te komen.
Uiteindelijk leren webprofessionals van elkaar en verbeteren ze vaak het werk dat ze zien en waardoor ze worden geïnspireerd. Aarzel dus niet om de broncode van een site te bekijken en deze als leermiddel te gebruiken.
Meer dan alleen HTML
Eén ding om te onthouden is dat bronbestanden erg ingewikkeld kunnen zijn (en hoe complexer de website die u bekijkt, hoe complexer de code van die site waarschijnlijk zal zijn). Naast de HTML-structuur waaruit de pagina bestaat, zal er ook CSS (cascading stylesheets) zijn die de visuele uitstraling van die site dicteert. Bovendien bevatten veel websites tegenwoordig scriptbestanden die samen met de HTML zijn opgenomen.
Er zijn waarschijnlijk meerdere scriptbestanden opgenomen; in feite voeden ze allemaal verschillende aspecten van de site. Eerlijk gezegd kan de broncode van een site overweldigend lijken, vooral als je dit nog niet eerder hebt gedaan. Raak niet gefrustreerd als u niet meteen kunt achterhalen wat er met die site aan de hand is. Het bekijken van de HTML-bron is slechts de eerste stap in dit proces. Met een beetje ervaring zult u beter gaan begrijpen hoe al deze stukjes in elkaar passen om de website te creëren die u in uw browser ziet. Naarmate u meer vertrouwd raakt met de code, kunt u er meer van leren, en het zal u niet zo intimiderend lijken.
kan niet lezen van het bronbestand of de schijfFAQ
- Hoe bewerk ik HTML-code in Chrome?
Open Developer Tools in Chrome door op te drukken Ctrl (of Commando op een Mac) + Shift + ik . Vanaf daar drukt u op Ctrl ( Commando op Mac) + O en selecteer het opgeslagen bronbestand dat u wilt bewerken om het te openen.
- Hoe bekijk ik de paginabroncode in Chrome als Bron weergeven is uitgeschakeld?
Als een website de optie Bron bekijken heeft uitgeschakeld, kunt u mogelijk nog steeds een kijkje onder de motorkap nemen. Selecteer bovenaan het browservenster Weergave > Ontwikkelaar > Bron bekijken , die de broncode van de webpagina zou moeten ophalen.
- Hoe bekijk ik de broncode van een site in Chrome met mijn Android-apparaat?
Navigeer naar de website die u wilt bekijken met de Chrome-app van uw apparaat en selecteer vervolgens de adresbalk van de browser. Verplaats de tekstcursor helemaal naar links (vóór de URL) en typ bekijk-bron en druk vervolgens op Binnenkomen of selecteer Gaan .
