Hoe te vinden welk bestand de code bevat. Hoe de paginacode snel in de browser te openen, zelfs als kopiëren niet is toegestaan

1. Naamsvermelding verwijderen (link hieronder - Blogger Technologies)
   We vinden Attribution1 in de widget-zoekblogsjabloon (lijst met widgets) en verwijderen de code samen met de sectie naar analogie met de oude Blogger-sjabloon (zie hierboven 1).
2. Verwijder de link uit de widget "Misbruik melden". Dit is de ReportAbuse1-widget. We vinden in de zoektocht naar widgets:
   De hele code ziet er als volgt uit:
   

   
   
   
   
   

3. We controleren de blogpostpagina met opmerkingen en verwijderen links naar analogie met de oude blogsjablonen (zie hierboven - punt 8).
4. Verwijder links van blogberichten die zijn ingesloten in berichtafbeeldingen (zie punt 5).

Elke internetgebruiker heeft zijn favoriete sites waar hij lang op doorbrengt. En alleen de lui dachten niet te zien hoe het is gemaakt en waaruit het bestaat. Het zal niet mogelijk zijn om al deze vragen te beantwoorden, aangezien er veel manieren zijn om een ​​site te maken, maar kijken naar de commando's en codes waaruit deze bestaat is mogelijk en voor iedereen beschikbaar.

Een andere vraag is of een persoon die niet bezig is met programmeren, enkele symbolen zal begrijpen waaruit de code bestaat. Maar uit de voorbeelden die hieronder worden getoond, kan elke Google Chrome-gebruiker individuele elementen van de sites bekijken.

Hoe de broncode van een html-pagina in een Google-browser te bekijken

Om de paginacode in Chrome te kunnen bekijken, moet je naar de site gaan waarin je geïnteresseerd bent en deze stappen volgen:

Deze twee punten verschillen in hun functionaliteit en informatie-inhoud voor de gebruiker, programmeur of hacker.

Wat is het verschil tussen de paginacode en alleen de opdracht "Code weergeven"?

Als u elk van deze functies analyseert, kunt u een apart artikel schrijven. Voor programmeurs is dit verschil significant en zij begrijpen in welke gevallen het nodig is om “View Code” te gebruiken en in welke “View Page Code” in de Google Chrome browser.

Maar om de gemiddelde gebruiker uit te leggen, kunnen deze functies worden onderverdeeld in de volgende doeleinden:

1. "Paginacodeweergave" is alleen nodig om de hoofdcombinatie van de pagina te zien. Dit is in feite 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 zijn achtergebleven). Deze structuur is niet geschikt om je eigen pagina te maken door te kopiëren en plakken, maar je kunt wel zien wat de programmeur precies deed en in welke volgorde, zodat de site in de Google Chrome-browser zo'n extern ontwerp had.
2. "Code weergeven" toont een gedetailleerde structuur die alle gebieden op de pagina benadrukt die van invloed zijn. Als u de muisaanwijzer op een specifieke lijstcode plaatst, wordt het item gemarkeerd op de site waartoe het behoort.
3. 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 de sitecode. Maar het is een even handige functie.
4. "Bekijk Code" is aanpasbaar en u kunt elk element bewerken op een manier die bij u past. Natuurlijk blijven al deze wijzigingen "leven" totdat de pagina is vernieuwd, maar soms is het leuk om door die instellingen te bladeren en gewoon te begrijpen waar deze of gene waarde voor is en wat er zal gebeuren als je deze wijzigt. U moet er niet vanuit gaan dat u hierdoor uzelf of de site schaadt - deze wijzigingen hebben alleen invloed op de code van uw Google Chrome en gaan niet online.

Gezien de vraag hoe de elementcode moet worden bekeken:

Als we zo'n vraag moeten beantwoorden, dan suggereert alleen een variant met een voorbeeld zich. Omdat het heel moeilijk is om in één artikel iemand te worden die dit onderwerp begrijpt (webontwikkelaar), maar het is veel gemakkelijker om met een voorbeeld te laten zien zodat de vraag is opgelost.

De functionaliteit van de elementcode is erg breed, daarom nemen we een van de woorden op de Google Chrome-browserwebsite. We wilden nagaan welke trefwoorden (in de code zal het worden geschreven als "trefwoorden") werden gebruikt voor onze site. Om dit te doen, voeren we het volgende algoritme uit:

Andere manieren om deze functie in de Google Chrome-browser te gebruiken

In het algemeen, als je de vraag blijft beantwoorden hoe je naar de code van het element moet kijken en waarom het nodig is, moet je de functies ervan opsommen. Dankzij de mogelijkheid om de code van een element van een site in de Google Chrome-browser te bekijken, kunnen we namelijk:

• Zie de sitestructuur beginnend bij head ("siteheader") 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;
• Zoek uit 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 daaropvolgende acties nadat erop is geklikt.

Dit is verre van een volledige 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.

"Bekijk elementcode" item werkt niet

Het moet meteen gezegd worden dat elke site open toegang heeft tot de elementcodes. Dat wil zeggen, zelfs de meest populaire en dure sites zullen open staan ​​om hun code te bekijken. Daarom, als het item in de Google Chrome-browser niet actief is of een fout geeft, heeft dit de volgende mogelijke redenen:

• Het gebruikersprofiel is beschadigd;
• De aanwezigheid van malware op de computer;
• Blokkeren door een bepaalde extensie om de prestaties te verhogen (zelfs dit kan zijn).

Een beschadigd gebruikersprofiel repareren

Om een ​​nieuw profiel aan te maken, moet u het oude van uw computer verwijderen. Ga hiervoor als volgt te werk:

1. Sluit Google Chrome en start de ingebouwde Windows Explorer-browser.
2. Voer de volgende opdracht in de adresbalk in: %LOCALAPPDATA%\Google\Chrome\User Data\.
3. Wanneer de map wordt geopend, zoekt u naar de map "Standaard" en voegt u "Back-up" toe aan de naam om het volgende te krijgen: "Back-upstandaard".
4. Nu, na een nieuwe lancering van de Chrome-browser, wordt er een nieuw profiel gemaakt.

Malware of zijn overblijfselen verwijderen

Als het nieuwe profiel ons geen toegang gaf tot de code van het pagina-element en we nog steeds de fout zien, moeten we het volgende doen:

1. Open de Windows-opdrachtprompt (Uitvoeren) en typ "cmd" erin.
2. Voer de volgende opdracht in de regel in: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".
3. Na het bevestigen van de actie rijden we hierin: RD / S / Q "% WinDir% \ System32 \ GroupPolicy".
4. 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.

Of je het nu leuk vindt of niet, vroeg of laat zul je je WordPress-bestanden moeten openen en bewerken om aan je behoeften te voldoen. Er is ook de mogelijkheid om programmeurs aan te trekken, maar elk zo'n verzoek kost je geld, in de meeste gevallen behoorlijk geld voor eenvoudig werk dat weinig tijd kost. Om uw geld te besparen, dat kan worden besteed aan het promoten van uw site, en niet aan een programmeur, zal ik u leren hoe u snel de juiste secties code in plug-in- of themabestanden kunt vinden.

Waarom moet je snel zoeken in php, CSS, html-bestanden?

De meesten van jullie, die dit artikel hebben gelezen, weten al waarom ze zo'n functie nodig hebben, door alle bestanden tegelijkertijd te doorzoeken, maar als je toevallig de rechtbank bent binnengekomen, zal ik je typische voorbeelden geven die bij dit onderwerp passen.

Mogelijk moet u het volgende vinden:

• Klassen. Wanneer je besluit een klasse te repareren of anders aan te passen, moet je de plaats vinden waar deze wordt gebruikt. Zullen het CSS-bestanden zijn of andere .
• Functies bewerken. Als je besluit een functie te repareren, is het geweldig dat je deze in functiebestanden kunt vinden, maar dan moet je uitzoeken waar deze in andere bestanden wordt aangeroepen.
• Het onderwerp verwijderen van . Niet onbelangrijk is de vermindering van het aantal databasequery's, dat WordPress een zeer groot aantal genereert, bijvoorbeeld door ingebouwde functies aan te roepen .

Al uw andere problemen met betrekking tot het vinden van elementen in een onbekend bestand zullen worden opgelost door de onderstaande gids.

Hoe zoek ik naar secties code in bestanden?

Om te beginnen, moeten we de snelle en handige Notepad++-editor downloaden en installeren, die via deze link kan worden gedownload.

Na de installatie gaan we naar de editor en openen we de bestanden die we nodig hebben. Ik zal de Twenty Fourteen-themabestanden nemen, maar je kunt je eigen bestanden gebruiken.

Om alle themabestanden te openen, moet u ze allemaal selecteren en naar het editorvenster slepen.

De bestanden zijn verplaatst, in het algemeen hadden we dit niet kunnen doen, maar in de toekomst zal het sneller zijn om ze te bewerken.

Bestanden in de editor? Ok, nu bellen we het zoekvak door op de toetsen te drukken Shift+Ctrl+F we zullen het volgende zien:

In het voorbeeld heb ik de naam van de klasse aangegeven om de auteur van het artikel in publicaties aan te geven, dit kan nodig zijn bij het maken van dubbele pagina's.

Geef in het veld "Map" de map op met het thema waarin onze bestanden zich bevinden. Klik daarna op de knop "Alles zoeken".

Als de parameter correct is ingevoerd, ziet u onderaan het scherm een ​​lijst met bestanden waarin deze klasse wordt gebruikt en regels code om snel te zoeken.

In mijn geval zijn dit twee bestanden op het adres dat in het groen is aangegeven. De klasse zelf is rood gemarkeerd, die kan worden gevonden door horizontaal te scrollen.

Na het bepalen van de bestandsdirectory en de regel waarin de parameter wordt gebruikt, kunt u doorgaan met bewerken.

Laten we voor de duidelijkheid ook een "kwaadaardige" tag definiëren blog info, die, wanneer aangeroepen, query's naar de database maakt.

U zult waarschijnlijk verbaasd zijn over het aantal oproepen naar deze functie, die gemakkelijk statisch kan worden gemaakt zonder de motor te vertragen.

En dat minstens 8 aanroepen naar de database, van elke pagina die wordt geladen, elke gebruiker kan worden vermeden als de sjablooncode correct wordt gecorrigeerd.

Als u problemen ondervindt, schrijf dan in de opmerkingen, we zullen proberen te helpen, of als u een snellere manier weet om naar de benodigde informatie in bestanden te zoeken, zal ik ook graag kennis maken.

Als je door talloze sites op internet bladert, kun je degene vinden die we erg leuk vinden. Er rijzen meteen een aantal vragen. Is de site gemaakt met behulp van zelfgeschreven code of een soort CMS? Wat zijn zijn CSS-stijlen? Wat zijn de metatags? Enzovoort.

Er zijn veel tools die kunnen worden gebruikt om informatie over de paginacode van een site te extraheren. Maar we hebben altijd de rechtermuisknop bij de hand. We zullen het gebruiken, met behulp van het voorbeeld van mijn site.

Hoe paginacode bekijken?

Om de broncode van een webpagina te bekijken, moet u de muiscursor over een willekeurig deel van de webpagina bewegen (behalve afbeeldingen en links). Klik daarna op de rechtermuisknop. Er wordt een venster voor ons geopend met verschillende opties (in verschillende browsers kunnen ze enigszins verschillen). In de Google Chrome browser zijn dit bijvoorbeeld de commando's:

• rug;
• vooruit;
• herladen;
• opslaan als;
• zegel;
• vertalen naar het Russisch;
• pagina code weergave;
• bekijk de code.

We moeten klikken op pagina code weergave, en de html-code van de sitepagina wordt voor ons geopend.

Paginacode bekijken: waar moet je op letten?

De HTML-paginacode is dus een genummerde lijst met regels, die elk informatie bevatten over hoe deze site is gemaakt. Om dit enorme aantal tekens en speciale tekens snel te leren begrijpen, moet u onderscheid maken tussen verschillende delen van de code.

De coderegels in de head-tag bevatten bijvoorbeeld informatie voor zoekmachines en webmasters. Ze worden niet weergegeven op de site. Hier kunt u zien voor welke zoekwoorden deze pagina wordt gepromoot, hoe de titel en beschrijving zijn geschreven. U kunt hier ook een link vinden, door erop te klikken, waarmee we meer te weten komen over de Google-lettertypefamilie die op de site wordt gebruikt.

Als de site gemaakt is op CMS WordPress of Joomla, dan zal dit hier ook zichtbaar zijn. Dit gebied geeft bijvoorbeeld informatie weer over een WordPress-thema of een Joomla-sitesjabloon. U kunt het zien door de inhoud van de blauw gemarkeerde links te lezen. Eén link toont het websitesjabloon.

Bijvoorbeeld:

//fonts.googleapis.com/css?family=Bron+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

We zullen de CSS-lettertypestijlen van de pagina zien. In dit geval wordt het lettertype gebruikt. Dit is hier te zien - font-familie: 'Source Sans Pro'.

Deze site is geoptimaliseerd met behulp van de Yoast SEO-plug-in. Dit is te zien aan dit becommentarieerde gedeelte van de code:

Deze site is geoptimaliseerd met de Yoast SEO-plug-in v3.4.2 — https://yoast.com/wordpress/plugins/seo/

Alle informatie in de body-tag wordt door de browser op het beeldscherm weergegeven. Hier zien we de html-code van de pagina en helemaal onderaan staat de Yandex Metrics-scriptcode. Het is verpakt in een tag met commentaar en de tekst:

/Yandex.Metrika-teller

Opsommen

Na een nogal oppervlakkige analyse van de code van de hoofdpagina van de site te hebben uitgevoerd, kunnen we concluderen dat met behulp van welke tools deze pagina is gemaakt. We zagen erop:

• CMS-WordPress;
• Google-lettertype Source Sans Pro;
• WordPress-thema - Sydney;
• Yoast-plug-ins
• teller Yandex-statistieken.

Nu is het principe van het analyseren van de html-code van een sitepagina vrij duidelijk. Het is niet nodig om de onderzochte pagina open te houden in de browser. U kunt de paginacode op uw computer opslaan met de toetsencombinaties ctrl + a, ctrl + c, ctrl + v. Plak het in een teksteditor (bij voorkeur Notepad++) en sla het op met de html-extensie. U kunt het dus op elk moment dieper bestuderen en meer nuttige informatie voor uzelf vinden.

We hebben een nieuw boek uitgebracht, "Social Media Content Marketing: Hoe kom je in het hoofd van abonnees en laat ze verliefd worden op je merk."

De broncode van een site is een verzameling 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 commando's die door de commandant aan de soldaten worden gegeven. Stel je voor dat het publiek de baas niet ziet of hoort. Vanuit hun oogpunt voeren de militairen zelfstandig acties uit. In ons geval is de commandant de browser, de commando's de broncode en de marcherende soldaten het eindresultaat.

De site wordt opgeslagen op een webserver die op verzoek van de gebruiker de pagina verstuurt. 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 webpagina's zijn geschreven, of ze een softwareonderdeel bevatten. Het eindresultaat van elk algoritme aan de serverzijde is een set html-tags en tekst.
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 afgehandeld door de browser. Voor de server is dit gewoon 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 eigen site of die van iemand anders voor hun analyse.
• Zie de aan- of afwezigheid van bepaalde elementen op de site: tellers, identificatiecodes in verschillende systemen, bepaalde scripts, en meer.
• Ontdek de parameters van elementen: maten, kleuren, lettertypen.
• Vind het pad naar foto's en andere elementen op de pagina.
• Onderzoek links van de pagina.
• Zoek problemen met de code die het site-optimalisatieproces verstoren: stijlen die niet zijn verplaatst naar afzonderlijke bestanden, scripts, ongeldige code.

Dit zijn de belangrijkste kenmerken, maar door de code te kunnen lezen, kunt u veel meer over de pagina te weten komen.

Hoe de broncode van een site te bekijken

Geheel in de vorm waarin het op de server staat, kan dit niet vanuit de browser. Maar u kunt de volledige opmaak zien door met de rechtermuisknop op de pagina te klikken. Hier en hieronder op het voorbeeld van Google Chrome.

Selecteer de optie "Paginacode bekijken" en krijg de volledige lijst in een apart tabblad.

Het is gewoon tekst die je moet ontleden om het te begrijpen. Maar u kunt interactieve code krijgen met behulp van ontwikkelaarstools.

Hoe de broncode van een webpagina te vinden

Klik op het menupictogram in de browser. Meestal is het aan de rechterkant en ziet het eruit als drie stippen of strepen.

Selecteer in het gedeelte met extra hulpprogramma's "Ontwikkelaarstools".

Er wordt een venster geopend met de actieve status van de code. Dit betekent dat wanneer u op de opmaak ernaast klikt, de stijl van het element wordt weergegeven en dat 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" is verificatie van het sitecertificaat beschikbaar.

Het tabblad "Audits" helpt u bij het controleren van de bron die op de hosting is geplaatst.

Als de locatie van het paneel aan de rechterkant onhandig is, kunt u op de drie stippen klikken en deze wijzigen door het gewenste item te selecteren.

Metatags bekijken

Elk html-document bevat structuurtags. Hier zijn er een paar:

1. html is het hele document.
2. Head - sectie van serviceheaders.
3. Titel – titel van de pagina (weergegeven op het tabblad).
4. Hoofdtekst - de hoofdtekst van het document.
5. H1-H6 - koppen van de paginatekst.
6. Artikel - artikel.
7. Sectie - sectie.
8. Menukaart - menukaart.
9. Afd. - blok.
10. Span is een tekenreeks.
11. P - paragraaf.
12. Tafel - tafel.

Elementen zijn ontworpen om secties van een pagina logisch af te bakenen en worden naar behoefte opgemaakt. Ze bevatten tekst die op de een of andere manier zichtbaar is op de pagina. Maar de Head-tag bevat service-informatie. Metatags worden gebruikt om het te specificeren. Alles wat erin staat is bedoeld voor de server en zoekmachines.

De inhoud ervan kan op geen enkele andere manier bekend worden.

Laten we aandacht besteden aan de Link-tag. Het wordt gebruikt om links naar externe include-bestanden te specificeren. Indien gewenst kunt u de inhoud bekijken en op schijf opslaan. Om dit te doen, plaatst u de muisaanwijzer op het adres en klikt u met de rechtermuisknop. Selecteer "Open in nieuw tabblad".

Het opgegeven bestand wordt geopend in een nieuw tabblad, dat u kunt bekijken of opslaan.

Hoe de broncode van een pagina te bekijken om een ​​script te debuggen

In dit geval is het het handigst om de pagina op de lokale computer te openen. Als u alleen de opmaak, stijlen en scripts hoeft te corrigeren, kunt u dit rechtstreeks vanuit de map doen. Html-code wordt op dezelfde manier bekeken. Maar JavaScript-codefouten zijn te zien op het tabblad "Console". Toont de beschrijving van de fout en het regelnummer waarop deze is opgetreden.

De syntaxis is direct in de code te zien. Dit is het tabblad Bron.

Hoe de code van een specifiek element te bekijken

Voor grote pagina's met veel elementen is het moeilijk om in alle opmaak de juiste code te vinden. In dit geval moet u een speciale opdracht uit het contextmenu gebruiken. Beweeg de muis over het fragment en druk op RMB. Selecteer de opdracht Bekijk code.

Hetzelfde venster wordt geopend, maar met de focus op het geselecteerde object.

Overzicht

We hebben je verteld wat de broncode van een pagina is. Het is voldoende om de elementaire kennis van HTML en CSS onder de knie te krijgen, en met behulp van handige ontwikkelaarstools kunt u uw eigen html-documenten debuggen.

Als u door de code van bronnen op internet bladert, leert u niet alleen van uw eigen ervaring, maar kunt u ook echt werkende voorbeelden gebruiken. En voor seo-specialisten zijn metatags handig, de informatie die veel over de site kan zeggen.