Hoe de elementcode te openen. Google Chrome - hulpmiddelen voor webmasters

Elke internetgebruiker heeft zijn eigen favoriete sites waar hij lange tijd doorbrengt. 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 worden gegeven, kan elke Google Chrome-gebruiker individuele elementen van sites bekijken.

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 Google Chrome browser.

Maar voor de gemiddelde gebruiker kunnen deze functies worden onderverdeeld in de volgende doeleinden:

“Paginacode bekijken” is alleen nodig om de hoofdcombinatie van de pagina te zien. In principe is dit de structuur van de site (zonder extra modellen in de vorm van CSS-bestanden en andere toevoegingen die in de map van de maker van de site achterblijven). Deze structuur is niet geschikt om door middel van “copy-paste” uw eigen pagina te maken, maar u kunt wel zien wat de programmeur precies heeft gedaan en in welke volgorde om ervoor te zorgen dat de site in de Google Chrome-browser zo’n extern ontwerp had.
“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 mag er niet van uitgaan dat u door dergelijke acties uzelf of de site op enigerlei wijze 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 veel gemakkelijker is om met een voorbeeld te laten zien dat de vraag wordt opgelost.

De functionaliteit van de elementcode is erg breed, daarom nemen we een van de woorden op de Google Chrome-browserwebsite. We wilden overwegen welke trefwoorden (in de code wordt dit geschreven als “trefwoorden”) voor onze site werden 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 het zonder speciale kennis bijna onmogelijk is om de code van een Google Chrome-pagina te 'lezen' en dat de ontvangen gegevens praktisch niet nodig zijn voor een gewone gebruiker.

Het item “Bekijk elementcode” werkt niet

Het moet meteen gezegd worden dat elke site open toegang zal hebben tot 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

Om een nieuw profiel aan te maken, moet u het oude van uw computer verwijderen. Om dit te doen doen wij het volgende:

Sluit Google Chrome en start de ingebouwde Windows Explorer-browser.
Voer de volgende opdracht in de adresbalk in: %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 Windows-opdrachtregel (“Uitvoeren”) 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, zal Google Chrome na het opnieuw opstarten van de computer de code van de elementen openen en zal de browser normaal werken.

De waarschijnlijkheid dat u naar de initiaal kijkt code web pagina's, ontvangen door de browser als gevolg van een verzoek aan de server, is beschikbaar in vrijwel elke internetbrowser. De toegang tot de overeenkomstige opdracht is ongeveer identiek georganiseerd, maar er zijn aanzienlijke verschillen in de methode en vorm waarin de initiaal wordt gebruikt code .

Instructies

1. Vouw in de Mozilla FireFox-browser het gedeelte 'Weergave' in het menu uit en klik op 'Initieel' code pagina's" Hetzelfde item bevindt zich ook in het contextmenu dat verschijnt als u met de rechtermuisknop op de tekst klikt pagina's. U kunt ook de toetsencombinatie CTRL + U gebruiken. Mozilla FireFox gebruikt geen externe programma's - initiaal code pagina's met syntaxisaccentuering wordt in een apart browservenster geopend.

2. Klik in Internet Explorer op het menu Bestand en selecteer Bewerken in Kladblok. In plaats van de naam Kladblok kan een ander programma worden geschreven dat u in de browserinstellingen hebt toegewezen om de initiaal te bekijken code A. Op klik pagina's met de rechtermuisknop verschijnt een contextmenu, dat ook een item bevat waarmee u de initiaal kunt openen code pagina's in een extern programma – “HTML bekijken- code A".

3. Open in de Opera-browser het menu, ga naar de sectie "Pagina" en u krijgt de kans om het item "Start" te selecteren in de subsectie "Ontwikkelingstools" code"of het item "Initiaal code kader." Aan deze selectie zijn respectievelijk de sneltoetsen CTRL + U en CTRL + SHIFT + U toegewezen. In een contextmenu gebonden aan een klik pagina's klik met de rechtermuisknop, er is ook een item “Initial code" Opera opent source pagina's in een extern programma dat is toegewezen in het besturingssysteem of in de browserinstellingen voor het bewerken van HTML-bestanden.

4. De Google Chrome-browser heeft zonder enige twijfel de beste organisatie voor het bekijken van de initiaal code A. Door met de rechtermuisknop op de pagina te klikken, kunt u ervoor kiezen deze te bekijken code A pagina's"en dan wordt de broncode met syntaxisaccentuering op een apart tabblad geopend. Of misschien geeft u de voorkeur aan de regel "Beeld" in hetzelfde menu code element” en de browser op hetzelfde tabblad opent twee extra frames waarin u HTML en CSS kunt inspecteren code elk onderdeel 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.

5. Vouw in de Apple Safari-browser het gedeelte Weergave uit en selecteer HTML bekijken code A". In het menu dat verschijnt als u met de rechtermuisknop klikt, opent u pagina's, heet het corresponderende item “Bron bekijken”. Aan deze actie zijn de sneltoetsen CTRL + ALT + U toegewezen. Initial code wordt geopend in een apart browservenster.

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. Wijzig bijvoorbeeld het kleurenschema van een blok, verplaats een element dat is verplaatst, enz.

Om dit te doen, gebruiken veel webmasters lokale Denwer- of OpenServer-servers, waarbij een volledige kopie van de site op hun computer wordt uitgevoerd. Deze methode is universeel en geschikt voor professionals; het kan worden gebruikt om de werking van verschillende scripts en plug-ins te testen, te experimenteren met ontwerpwijzigingen en alle sitebestanden te bewerken en na de test de juiste wijzigingen rechtstreeks naar de site over te brengen.

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. De volledige HTML-code van een webpagina bekijken in de Chrome-browser

Belangrijk: De opdrachten in het vervolgkeuzemenu kunnen bijvoorbeeld verschillen voor actieve elementen (links, afbeeldingen, video's) en inactieve elementen (tekst, achtergrond, divs):

Figuur 2. Vervolgkeuzemenu Chrome-browser

Dus als u de gewenste opdracht niet kunt vinden, klikt u gewoon ergens anders met de rechtermuisknop of gebruikt u de sneltoetsen van uw browser.

Laten we terugkeren naar figuur 1, het toont het noodzakelijke commando om alle HTML-code van de bronwebpagina te bekijken, het heet " Paginacode bekijken". Klik op de opdracht, er wordt een nieuw tabblad geopend met de volledige code van de bronwebpagina, een groot pluspunt voor alles - weergave is beschikbaar 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 snellere toegang kunt u deze tool op andere manieren oproepen

In Figuur 1 zien we ook dat dit commando beschikbaar is via een 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 denken sommigen misschien dat dit helemaal geen noodzakelijk hulpmiddel is, maar het bekijken van de volledige HTML-code van een site is geweldig om de benodigde elementen in de code te vinden. Dit kunnen links, tags, metatags, attributen en andere elementen zijn. .

Sneltoetscombinatie +open het zoekvenster, in de Chrome-browser verschijnt dit rechtsboven:

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.

Dit handige hulpmiddel is altijd beschikbaar in uw browser; experimenteer met andere opdrachten waarmee u uw site gemakkelijker kunt bewerken.

Ctrl+U

Hoe kan ik de broncode van een element bekijken?

Klik met de rechtermuisknop op het gewenste pagina-element.

Google Chrome: “Bekijk elementcode”

Opera: “Inspecteer element”

FireFox: “Analyseer element”

Zoek in andere browsers naar een menu-item met een vergelijkbare betekenis.

Hallo allemaal!

Ik heb het hele punt vooral aan het begin van het artikel uiteengezet, voor degenen die op zoek zijn naar een snel antwoord.

De informatie is misschien bij velen bekend, maar aangezien ik schrijf voor beginnende bloggers, webprogrammeurs en andere goudzoekers, is dit referentieartikel een must-have.

In de toekomst zul je zeker de broncode van pagina's en individuele elementen bestuderen.

Laten we eens kijken naar een specifiek voorbeeld van hoe u de broncode van een pagina kunt bekijken.

We willen bijvoorbeeld zien welke zoekwoorden voor een specifieke pagina worden gebruikt. We gaan naar de webpagina waarin we geïnteresseerd zijn en drukken op Ctrl+U. De broncode van deze pagina wordt geopend in een apart venster of op een apart tabblad. Druk op Ctrl+F om naar een codefragment te zoeken. In dit geval typen we het woord “ trefwoorden". Je wordt automatisch doorgestuurd naar een stukje code met deze metatag en het gezochte woord wordt gemarkeerd.

Naar analogie kun je andere codefragmenten zoeken en bestuderen.

Het bekijken van de gehele broncode van een pagina is in de meeste gevallen niet erg handig, daarom is het in alle browsers mogelijk om de code van een individueel element of fragment te bekijken.

Laten we een specifiek voorbeeld gebruiken van het bekijken van de code van een element. Laten we bijvoorbeeld eens kijken of de link een nofollow-attribuut heeft. Klik met de rechtermuisknop op de link die ons interesseert en klik in het vervolgkeuzemenu met de linkermuisknop op het item “Bekijk elementcode” of iets dergelijks (afhankelijk van uw browser). Hieronder, in een speciaal venster voor codeanalyse, krijgen we iets soortgelijks.

We zien dat de linkcode rel=”nofollow” bevat. Dit betekent dat PR niet via deze link zal ‘lekken’. We zullen hier in de volgende artikelen meer in detail over praten. Het belangrijkste is nu dat je nu weet hoe je de broncode van de pagina en de broncode van een afzonderlijk element kunt bekijken.

" 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 gebruikt geen externe programma's - origineel code pagina's met syntaxisaccentuering wordt in een apart browservenster geopend.

Klik in Internet Explorer op het menu Bestand 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. Op klik pagina's met de rechtermuisknop verschijnt een contextmenu, waarin ook een item staat waarmee u de bron kunt openen code pagina's in een extern programma - “HTML bekijken- code A".

Open in de Opera-browser het menu, ga naar het gedeelte "Pagina" en u krijgt de mogelijkheid om "Bron" te selecteren in de subsectie "Ontwikkelingstools" code"of het item "Origineel code kader." Aan deze selecties zijn respectievelijk de sneltoetsen CTRL + U en CTRL + SHIFT + U toegewezen. 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 zonder enige twijfel de beste organisatie om het origineel te 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.