Elke internetgebruiker heeft zijn eigen favoriete sites waarop hij geld uitgeeft lange tijd. En alleen de lui dachten er niet aan om te kijken hoe het was gemaakt en waaruit het bestond. Het is onmogelijk om al deze vragen te beantwoorden, aangezien er veel manieren zijn om een website te maken, maar kijken naar de commando's en codes waaruit deze bestaat is mogelijk en voor iedereen openbaar beschikbaar.
Een andere vraag is of iemand die niet bij het programmeren betrokken is, de symbolen waaruit de code bestaat, zal begrijpen. Maar uit de voorbeelden die hieronder zullen worden gegeven, geen enkele Google-gebruiker Chrome zal het kunnen zien individuele elementen sites.
Hoe u de broncode van een html-pagina in een Google-browser kunt bekijken
Om de paginacode in Chrome te kunnen bekijken, moet u naar de site waarin u geïnteresseerd bent gaan en de volgende stappen uitvoeren:
Deze twee items verschillen in functionaliteit en informatie voor de gebruiker, programmeur of hacker. 
Wat is het verschil tussen de paginacode en alleen de opdracht “Code bekijken”?
Als u elk van deze functies analyseert, kunt u een afzonderlijk artikel schrijven. Voor programmeurs is dit verschil aanzienlijk en zij begrijpen in welke gevallen het nodig is om “View code” te gebruiken en in welke gevallen “View page code” in de browser Google Chrome.
Maar om het voor de gemiddelde gebruiker uit te leggen, kunnen deze functies worden onderverdeeld in de volgende doeleinden:
- “Paginacode bekijken” is alleen nodig om de hoofdcombinatie van de pagina te zien. Kortom, dit is de structuur van de site (zonder extra modellen als CSS-bestanden en andere toevoegingen die in de map van de maker van de site zijn achtergebleven). Deze structuur niet geschikt om te creëren eigen pagina door "kopiëren en plakken", maar u kunt dan wel zien wat de programmeur precies heeft gedaan en in welke volgorde, zodat de site in de Google Chrome-browser zo'n extern ontwerp heeft.
- “Code bekijken” geeft een gedetailleerde structuur weer, waarbij alle betrokken gebieden op de pagina worden gemarkeerd. Als u de muisaanwijzer op een specifieke lijstcode plaatst, wordt het element op de site waartoe het behoort gemarkeerd.
- Het bekijken van de paginacode wordt geopend in een aparte browser zonder de mogelijkheid om deze te bewerken. Dat wil zeggen, het is alleen geschikt voor het kopiëren en lezen van sitecode. Maar dit is niet minder nuttige functie.
- “Bekijk code” is veranderlijk en u kunt elk element bewerken op een manier die voor u handig is. Natuurlijk zullen al deze wijzigingen “leven” totdat de pagina wordt vernieuwd, maar soms is het leuk om door die instellingen te gaan en te begrijpen waarom deze of gene waarde nodig is, en wat er zal gebeuren als je deze wijzigt. U moet er niet van uitgaan dat u door dergelijke acties uzelf of de site schade toebrengt - deze wijzigingen hebben alleen invloed op de code van uw Google Chrome en gaan niet online.
We overwegen de vraag hoe we de elementcode moeten bekijken
Als we zo'n vraag zouden beantwoorden, dan is de enige optie die zichzelf voorstelt een voorbeeld. Omdat het in één artikel erg moeilijk is om iemand te worden die dit onderwerp begrijpt (webontwikkelaar), maar het is veel gemakkelijker om met een voorbeeld te laten zien dat de vraag wordt opgelost.
De functionaliteit van de elementcode is erg breed, dus we nemen een van de woorden op de site Google-browser Chroom. We wilden nadenken over wat trefwoorden(in de code wordt dit geschreven als “trefwoorden”) die voor onze site zijn gebruikt. Om dit te doen, voeren we het volgende algoritme uit:
Andere manieren om deze functie in de Google Chrome-browser te gebruiken
Over het algemeen moet u, als u de vraag blijft beantwoorden hoe u naar de code van een element moet kijken en waarom dit nodig is, de functies ervan opsommen. Dankzij de mogelijkheid om de code van een element van elke site in de Google Chrome-browser te bekijken, kunnen we namelijk:
- Bekijk de structuur van de site, beginnend bij head (“site header”) en eindigend met end (de laatste opdracht van elk programma);
- Bekijk alle functies van de site, namelijk: links naar andere sites, extra modules van externe sites en de aanwezigheid van ingebouwde tellers voor het verzamelen van diverse informatie;
- Ontdek of kopiëren van de site verboden is of niet;
- De code registreert alle links naar andere pagina's van de site, evenals hun ontwerp en de daaropvolgende acties nadat erop is geklikt.
Dit is zeker geen eindige lijst. Maar er moet aan worden herinnerd dat u zonder speciale kennis de code kunt "lezen". Google-pagina's Chrome is bijna onmogelijk en de verkregen gegevens voor de gemiddelde gebruiker praktisch niet nodig.
Het item “Bekijk elementcode” werkt niet
Er moet meteen worden gezegd dat elke site dat zal hebben vrije toegang naar elementcodes. Dat wil zeggen dat zelfs de populairste en duurste sites openstaan voor het bekijken van hun code. Als het item in de Google Chrome-browser niet actief is of een fout genereert, heeft dit daarom de volgende mogelijke redenen:
- Gebruikersprofiel is beschadigd;
- De aanwezigheid van malware op de computer;
- Blokkeren door een bepaalde extensie om de prestaties te verbeteren (zelfs dit kan gebeuren).
Een beschadigd gebruikersprofiel repareren
Maken nieuw profiel, moet u de oude van uw computer verwijderen. Om dit te doen doen wij het volgende:
- Sluit Google Chrome en start het ingebouwde programma Windows-browser Ontdekkingsreiziger.
- Kom binnen adresbalk het volgende commando: %LOCALAPPDATA%\Google\Chrome\User Data\.
- Wanneer de map wordt geopend, zoekt u naar de map “Default” en voegt u “Backup” aan de naam toe, zodat deze er als volgt uitziet: “Backup Default”.
- Nu wordt na het opnieuw opstarten van de Chrome-browser een nieuw profiel aangemaakt.
Wij verwijderen malware of de restanten daarvan
Als het nieuwe profiel ons geen toegang geeft tot de pagina-elementcode en we de fout nog steeds zien, moeten we het volgende doen:
- Open de opdrachtregel Windows-tekenreeks(“Run”) en voer daar de opdracht “cmd” in.
- Voer de volgende opdracht in de regel in: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”.
- Nadat u de actie heeft bevestigd, voert u dit in: RD /S /Q “%WinDir%\System32\GroupPolicy”.
- Nu “gpupdate /force” (zonder aanhalingstekens).
Als alles correct is gedaan, dan na het opnieuw opstarten Google-computer Chrome opent de code van de elementen en de browser werkt normaal.
U moet snel alle wijzigingen op de site zelf zien, zonder dat dit invloed heeft op de bestanden en code van de site die op internet zijn geplaatst. Veranderen bijvoorbeeld kleurenschema een willekeurig blok, verplaats een verschoven element, enz.
Hiervoor gebruiken veel webmasters lokaal Denwer-servers of OpenServer, actief volledige kopie website op uw computer. Deze methode is universeel en geschikt voor professionals; het kan worden gebruikt om het werk te controleren verschillende scripts en plug-ins, experimenteer met het wijzigen van het ontwerp en bewerk alle sitebestanden, en breng na het testen de juiste wijzigingen rechtstreeks naar de site over.
Voor gebruikers die verre van webmasterkunst zijn, raad ik aan om voor deze doeleinden een browser te gebruiken. Omdat ik Chrome gebruik, zal ik instructies geven met schermafbeeldingen voor deze specifieke browser. Naar analogie kunt u werken met Opera, Yandex.Browser, Mozilla Firefox en andere browsers. Het principe van hun tools is vergelijkbaar;
Instructie 1: hoe u de volledige HTML-code van een site in een browser kunt bekijken
Open de gewenste webpagina van uw site. Klik met de rechtermuisknop op het vereiste element. Er verschijnt een contextueel vervolgkeuzemenu van de browser met beschikbare opdrachten:
Figuur 1. Bekijk alle HTML-code van een webpagina in Chrome-browser
Belangrijk: De opdrachten in het vervolgkeuzemenu kunnen bijvoorbeeld verschillen actieve elementen(links, afbeeldingen, video's) en inactief (tekst, achtergrond, divs):
Figuur 2. Vervolgkeuzemenu Chrome-browser
Dus als u de gewenste opdracht niet kunt vinden, klikt u gewoon op rechter knop muis op een andere plaats of gebruik browsersneltoetsen.
Laten we terugkeren naar figuur 1, dat blijkt vereiste commando om alle HTML-code van de originele webpagina te bekijken, heet dit " Paginacode bekijken". Klik op de opdracht en deze wordt geopend nieuwe inzet Met volledige code bronwebpagina, een groot pluspunt van alles is dat weergave beschikbaar is met syntaxisaccentuering:
Figuur 3. Codefragment van deze site
Deze tool is erg handig voor het vinden en bewerken van de elementen die u zoekt.
Alternatieve manieren om alle HTML-code van een webpagina te bekijken
Voor meer snelle toegang, kunt u deze tool op andere manieren aanroepen
- In Figuur 1 zien we dat ook deze opdracht beschikbaar via sneltoets
+ ; - Plak view-source:site in de adresbalk van de browser in plaats van mijn domein, voer uw adres in;
Beide methoden zijn universeel en zouden in alle browsers moeten werken.
In eerste instantie zal het voor sommigen lijken dat dit helemaal niet het geval is het juiste gereedschap, maar het bekijken van de volledige HTML-code van een site is geweldig om binnen de code te zoeken noodzakelijke elementen, dit kunnen links, tags, metatags, attributen en andere elementen zijn.
Sneltoetscombinatie
Figuur 3. Zoeken op sitecode
Nadat u een verzoek in het zoekformulier heeft ingevoerd, gaat het scherm naar het eerste gevonden element. Met behulp van de pijlen kunt u ertussen bewegen en het gewenste element selecteren:
Figuur 4. Zoeken op HTML-sitecode
Instructie 2: hoe u de HTML- en CSS-code van een site bekijkt en bewerkt in de Google Chrome-browser
Nu het belangrijkste deel, waarin ik laat zien hoe je de HTML- en CSS-code van een website in een browser kunt bewerken. Breng vervolgens de wijzigingen over naar de browser.
Soortgelijk bruikbaar gereedschap altijd beschikbaar in uw browser, experimenteer met andere opdrachten die het bewerken van uw site eenvoudiger maken.
Vaardigheid wijziging bron Pagina's – nuttige vaardigheid voor de gevorderde internetgebruiker. Door HTML-code te vervangen, kunt u wijzigen webpagina openen zoals u wilt. In dit artikel vertellen we het je hoe u de paginacode kunt wijzigen in Google Chrome. In andere browsers gebeurt alles echter op dezelfde manier, dus er zouden geen problemen moeten zijn.
Wat is de HTML-code van de pagina?
Elke pagina die u in uw browser opent, heeft zijn eigen code in de taal HTML-opmaak. Deze code vertegenwoordigt tags en tekst. Tags zijn unieke labels die de browser vertellen hoe dit of dat deel van de site moet worden weergegeven. Tekst is de inhoud van de pagina, wat de gebruiker ziet. Ook kunnen CSS-stijlen aan de pagina worden gekoppeld, waardoor deze wordt ingesteld verschijning pagina-elementen. Naar wijzig de broncode van de site je hoeft HTML en CSS niet grondig te kennen, en je zult het snel zelf zien.
Waarom een webpagina wijzigen?
U kunt de gegevens op de site vervangen, de tekst van het bericht wijzigen of een nep-screenshot maken. Houd er rekening mee dat alle wijzigingen alleen voor u zichtbaar zijn en verdwijnen wanneer u de pagina opnieuw laadt. Ook zullen de gewijzigde gegevens niet reëel zijn. Als ik bijvoorbeeld geen 10 dollar heb, en ik verander het in 100, dan heb ik geen geld meer. Dit is slechts de weergave van de pagina door de browser. Voorbeeld:
Na:
Ik neem bijvoorbeeld dezelfde site en wijzig de vorige aankondiging van het artikel “” Opening Startpagina in Google Chrome. Ik klik met de rechtermuisknop op het element dat ik wil wijzigen, bijvoorbeeld de titel van de aankondiging en selecteer ‘Code bekijken’.
Ga in het geopende venster naar het tabblad Elementen en bekijk de HTML-code van de pagina. Daarin moeten we de tekst vinden waarin we geïnteresseerd zijn. (rood onderstreept)
Nu zal ik de oude tekst verwijderen en een nieuwe schrijven.
Dat is alles, de titel van de aankondiging is gewijzigd. Nu zal ik de aankondiging zelf, tags en categorie wijzigen.
U kunt nog een afbeelding invoegen door het src-attribuut in de img-tag te wijzigen.
" Hetzelfde item bevindt zich ook in het contextmenu, dat u kunt vinden als u met de rechtermuisknop op de tekst klikt Pagina's. U kunt ook de sneltoets CTRL+U gebruiken. Mozilla FireFox maakt geen gebruik van externe programma's - origineel code Pagina's met syntaxisaccentuering wordt in een apart browservenster geopend.
IN internet browser Verkenner, klik op het gedeelte 'Bestand' in het menu en selecteer 'Bewerken in Kladblok'. In plaats van de naam Kladblok kan er een andere naam worden geschreven, deze heeft u in de browserinstellingen toegewezen om het origineel te bekijken code A. Bij klikken Pagina's met de rechtermuisknop verschijnt een contextmenu, waarin ook een item staat waarmee u de bron kunt openen code Pagina's in extern programma- "HTML bekijken- code A".
IN Opera-browser open het menu, ga naar de sectie "Pagina" en u krijgt de mogelijkheid om het item "Bron" te selecteren in de subsectie "Ontwikkelingstools" code"of het item "Origineel code kader." Deze selectie wordt hot toegewezen CTRL-toetsen+ U en CTRL + SHIFT + U respectievelijk. In een contextmenu gebonden aan een klik Pagina's klik met de rechtermuisknop, er is ook een item “Initial code" Opera-bron Pagina's in een extern programma dat is toegewezen in het besturingssysteem of in de browserinstellingen voor het bewerken van HTML-bestanden.
De Google Chrome-browser heeft dat ongetwijfeld de beste organisatie het origineel bekijken code A. Door met de rechtermuisknop te klikken, kunt u Weergave selecteren code A Pagina's"en dan wordt de broncode met syntaxisaccentuering op een apart tabblad geopend. Of u kunt in hetzelfde menu de regel “Beeld” selecteren code element” en op hetzelfde tabblad worden twee extra frames geopend waarin u HTML en CSS kunt inspecteren code element Pagina's. De browser reageert op de cursor die over lijnen beweegt code en het markeren van elementen op de pagina die overeenkomen met dit HTML-gedeelte code A.
Wij hebben vrijgelaten nieuw boek"Contentmarketing in in sociale netwerken: Hoe je in de hoofden van je abonnees kunt kruipen en ze verliefd kunt maken op je merk.”
De broncode van de site is een set HTML-opmaak, CSS-stijlen En JavaScript-scripts, die de browser ontvangt van de webserver.
Meer video's op ons kanaal - leer internetmarketing met SEMANTICA
Het kan worden vergeleken met een reeks bevelen die door een commandant aan soldaten worden gegeven. Stel je voor dat het publiek de baas niet ziet of hoort. Vanuit hun oogpunt voert het leger zelfstandig acties uit. In ons geval is de commandant de browser, zijn de commando's de broncode en zijn de marcherende soldaten het eindresultaat.
De site wordt opgeslagen op een webserver, die de pagina op verzoek van de gebruiker verzendt. Een verzoek is het typen van een URL in de adresbalk, het klikken op een link of het klikken op een verzendknop op een formulier. Het maakt niet uit in welke taal de webpagina's zijn geschreven, of ze deze nu bevatten softwaregedeelte. Het eindresultaat van elk server-side algoritme is een set HTML-tags en tekst.
De paginabroncode is een set gegevens die het volgende omvat:
- html-opmaak;
- stylesheet of bestandslink;
- programma's geschreven in JavaScript of links naar bestanden met code.
Deze drie secties worden door de browser verwerkt. Voor de server is dit simpelweg de tekst die moet worden verzonden als reactie op het verzoek.
Waarom we misschien de broncode moeten bestuderen
Alles wat we zien, kunnen we analyseren en toepassen om bepaalde problemen op te lossen die zich voordoen tijdens het werken met de site, vooral bij het optimaliseren ervan. Door naar de broncode te kijken, kunnen we:
- Bekijk de metatags van uw site of die van iemand anders om deze te analyseren.
- Zie de aan- of afwezigheid van bepaalde elementen op de site: tellers, identificatiecodes in diverse systemen, bepaalde scripts en andere dingen.
- Ontdek de parameters van de elementen: maten, kleuren, lettertypen.
- Vind het pad naar foto's en andere elementen op de pagina.
- Verken links op de pagina.
- Vind problemen met de code die het proces van website-optimalisatie verstoren: die niet worden behandeld in aparte bestanden stijlen, scripts, ongeldige code.
Dit zijn de basisfuncties, maar door de code te kunnen lezen, kun je in feite veel meer over de pagina te weten komen.
Hoe u de broncode van een site kunt bekijken
Het zal niet mogelijk zijn om dit volledig te doen in de vorm waarin het vanuit de browser op de server wordt geplaatst. Maar u kunt alle markeringen zien door met de rechtermuisknop op de pagina te klikken. Hier en verderop Google-voorbeeld Chroom.
Selecteer de optie ‘Paginacode bekijken’ en bekijk de volledige lijst op een apart tabblad.
Het is gewoon tekst die je moet analyseren om te begrijpen. Maar u kunt interactieve code verkrijgen met behulp van de ontwikkelaarstools.
Hoe u de broncode van een websitepagina kunt vinden
Klik op het menupictogram in de browser. Meestal bevindt het zich aan de rechterkant en ziet het eruit als drie stippen of strepen.
In hoofdstuk extra gereedschap selecteer "Ontwikkelaarstools".
Er wordt een venster geopend met de actieve status van de code. Dit betekent dat wanneer u op de markering klikt, de elementstijl ernaast verschijnt en de geselecteerde blokken op de pagina worden gemarkeerd.
Op het tabblad “Bron” kunt u de inhoud van sommige bestanden bekijken: scripts, lettertypen, afbeeldingen.
Op het tabblad ‘Beveiliging’ kunt u het certificaat van de site controleren.
Op het tabblad ‘Audits’ kunt u de bron controleren die op de hosting is geplaatst.
Als de locatie van het paneel aan de rechterkant lastig is, kunt u op de drie stippen klikken en deze wijzigen door het gewenste item te selecteren.
Hoe u metatags kunt bekijken
Elk HTML-document bevat structuurtags. Hier zijn er een aantal:
- Html – het hele document.
- Hoofd – sectie van serviceheaders.
- Titel – paginatitel (weergegeven op het tabblad).
- Hoofdtekst – de hoofdtekst van het document.
- H1-H6 – paginatekstkoppen.
- Artikel – artikel.
- Sectie - sectie.
- Menu – menu.
- Div – blok.
- Spanwijdte – snaar.
- P – paragraaf.
- Tafel – tafel.
Elementen zijn ontworpen om secties op een pagina logisch af te bakenen; ze zijn ontworpen met behulp van stijlen. Ze bevatten tekst die op de een of andere manier zichtbaar is op de pagina. Maar in tag Hoofd er is service-informatie. Om dit aan te geven worden metatags gebruikt. Alles wat erin staat, is bedoeld voor de server en zoekmachines.
De inhoud ervan kan op geen enkele andere manier worden achterhaald.
Laten we aandacht besteden aan de Link-tag. Met zijn hulp worden links naar externe opgenomen bestanden gespecificeerd. Indien gewenst kunt u de inhoud bekijken en op schijf opslaan. Om dit te doen, verplaatst u de aanwijzer naar het adres en drukt u op RMB. Selecteer "Openen in nieuw tabblad".
Wordt geopend in een nieuw tabblad opgegeven bestand, die u kunt bekijken of opslaan.
Hoe u de broncode van een pagina kunt bekijken om fouten in een script te debuggen
In dit geval is het het handigst om de pagina te openen lokaal apparaat. Als u alleen opmaak, stijlen en scripts hoeft te corrigeren, kunt u dit rechtstreeks vanuit de map doen. De HTML-code wordt op dezelfde manier bekeken. Hier zijn de fouten JavaScript-code is te zien op het tabblad “Console”. Hier ziet u de beschrijving van de fout en het regelnummer waar deze is opgetreden.
De syntaxis is direct in de code te zien. Dit is waar het tabblad ‘Bron’ voor is.
Hoe u de code van een specifiek element kunt bekijken
Voor grote pagina's Met grote hoeveelheid elementen zijn moeilijk te vinden vereiste code gedurende de hele opmaak. In dit geval moet u gebruiken speciaal elftal contextmenu. Beweeg de muis over het fragment en druk op RMB. Selecteer de opdracht “Code bekijken”.
Hetzelfde venster wordt geopend, maar met de focus op het geselecteerde object.
Samenvatting
We hebben je verteld wat de broncode van de pagina is. Het is voldoende om de basiskennis van HTML en CSS onder de knie te krijgen en te gebruiken handig gereedschap ontwikkelaar, kunt u uw eigen HTML-documenten debuggen.
Als u de code van bronnen op internet bekijkt, kunt u niet alleen van leren eigen ervaring, maar gebruik ook echte werkvoorbeelden. En voor SEO-specialisten zullen metatags nuttig zijn, waarvan de informatie veel over de site kan vertellen.
