Ako otvoriť zdrojový kód stránky. Ako zobraziť zdrojový kód stránky a kód prvku

Niekto sa zdá byť, že to nie je potrebný nástroj, ale pohľad na celý kód stránky HTML je skvelý pre vyhľadávanie v kódexe potrebných položiek, môže to byť odkazy, tagy, meta-tagy, atribúty a iné prvky.

Kombinácia horúcich kľúčov + Otvorte vyhľadávacie pole, v prehliadači Chrome sa zobrazí vpravo:

Obrázok 3. Stránky vyhľadávania kódu

Potom, čo ste vyzvaní na formulár formulára, obrazovka sa presunie na prvý nájdený prvok, pomocou šípok môžete pohybovať a vybrať potrebné:

Obrázok 4. Vyhľadávanie podľa kódu stránky HTML

Inštrukcia 2: Ako zobraziť a upraviť kód stránky HTML a CSS v prehliadači Google Chrome

Teraz dôležitá časťV ktorom ukážem, ako môžete upraviť kód stránky HTML a CSS v prehliadači. Po tomto prenose zmeny prehliadača.

Tu je užitočný nástroj je vždy k dispozícii vo vašom prehliadači, experimentujte s inými príkazmi, ktoré uľahčia úpravu stránky.

" Rovnaká položka je v obsahové menuktoré ak kliknite pravým tlačidlom myši stránka. Môžete použiť kombináciu kľúče CTRL + U. Mozilla Firefox. Nepoužíva externé programy - originál kód stránka Highlight Syntax sa otvorí v samostatnom okne prehliadača.

V pozorovači Internet Explorer. Kliknite na ponuku Sekcia súborov a vyberte položku Upraviť v Poznámkový blok. Namiesto názvu Názov NotePAD môže byť napísaný iný, priraďujete sa do nastavení prehliadača, aby ste zobrazili zdroj kódale. Kliknúť stránka Pravé tlačidlo myši klesne kontextové menu, v ktorom je tiež položka, ktorá vám umožní otvoriť zdroj kód stránka v externý program - "Zobraziť HTML kódale".

V opera prehliadača. Otvorte ponuku, prejdite na časť "Stránka" a budete mať možnosť vybrať si podsekcie "Vývoj zdroja" kód"Alebo bod" zdroj kód Freas. Tento výber je priradený klávesmi HOT CTRL + U a CTRL + SHIFT + U, resp. V kontextovom menu viazané na kliknutie stránka Kliknite pravým tlačidlom myši, tiež existuje položka "zdroj kód" Opera Zdrojový kód stránka V externom programe, ktorý je priradený k OS alebo v nastaveniach prehliadača na úpravu HTML súborov.

Prehliadač Google Chrome bez akýchkoľvek pochybností má najlepšiu organizáciu zdroja prezerania kódale. Kliknite pravým tlačidlom myši, môžete zvoliť "Zobraziť kódale stránka"A potom sa otvorí zdroj podsvietenia syntaxe na samostatnej karte. Môžete si vybrať v rovnakom menu reťazec "Zobraziť kóda prvok "a na tej istej karte otvoria dve ďalšie rámce, v ktorých môžete skontrolovať HTML a CSS kód Element stránka. Prehliadač bude reagovať na pohyb kurzora na riadkoch kóda, zvýraznenie položiek na stránke zodpovedajúcej tejto časti HTML kódale.

Takže dnes budeme zvážiť niekoľko užitočných fondov pre webové ruky, ktorí uľahčujú život pri pokládke stránky. Začnime s konzolou pre webových majstrov v prehliadači Google Chrome. A pôjdeme na otázky, ktoré najčastejšie vznikajú z webového majstra počas rozloženia lokality.

Aby ste sa dostali do konzoly, otvorte svoje stránky v prehliadači Google Chrome, kliknite pravým tlačidlom myši kdekoľvek na webovej stránke a vyberte možnosť "Zobraziť kód stránky" v kontextovej rozbaľovacej ponuke, alebo na konkrétnej položke pre štúdium výberom " Zobraziť kódový prvok. "

Na vrchole budete zobraziť niekoľko kariet. Dnes budeme hovoriť o karte "Prvky" , na ktorom prvky webovej stránky s osvetlenými značkami, vlastnosťami, výberom hniezdiacich prvkov, reprezentáciou hierarchie elementu v strome domu (Tip v spodnej časti, od koreňového rodiča na aktuálnu štúdiu), schopnosť \\ t Upraviť prvky, zoznam ich vlastností, zvážte vyhľadávanie podľa položiek, ktoré budeme získané s sledovaním štýlov CSS súvisiacich s prvkami atď.

Ako zobraziť všetky štýly súvisiace s konkrétnym prvkom? Ktorý sa teraz aplikuje? Aké súbory sa nachádzajú?

Takže, nie je nič jednoduchšie! Otvorte svoj prehliadač Google Chrome, otvorte naše stránky - zdroj otázok kliknite na požadovaný prvok s pravou tlačidlom myši, ak je viditeľný v kontexte stránky, a vyberte položku "Zobraziť kód položky" obsahové menu.

Nižšie máme konzolu s zvýrazneným kartu ľavého "prvkov" a všetky spojené s štýlmi prvkov vpravo, kde: Vypočítané štýly. - Toto sú spoločné "súhrnné" štýly, ktoré boli priradené k prvku z pravidiel CSS a nastavenia používateľského prehliadača (jeho prostredie prostredia) a karta je minimalizovaná.

Máme však záujem o kartu štýlov, nasadené pod ním, v ktorom všetky štýly priradené k položke, ako aj súbory, kde sú tieto pravidlá špecifikované pre túto položku podľa typu, ID, triedy, názvu, majetku, atribútu atď. . Zároveň, ak sa prekročí pravidlo CSS, znamená to, že bolo predpísané skôr / Ďalej (čo uľahčuje sledovanie, čo z pravidiel CSS je prioritou a uplatňuje sa v tomto prípade na položku).

V spodnej časti konzoly je reťazec, ktorý zobrazuje prvok v hierarchii dokumentov, ľahko vám umožňuje zobraziť celý zoznam rodičovských prvkov z koreňa do vybratej položky. Niečo ako "chlieb omrvinky".

HTML tag nie je viditeľný v kontexte stránky? Alebo je potrebné nájsť všetky tagy, napríklad na špecifickú triedu, meno, majetok, typ?

Otvorte stránku v prehliadači Google Chrome, kliknite pravým tlačidlom myši, Zavolajte na kontextové menu, vyberte položku « Zobraziť kód stránky » . Kliknite na tlačidlo klávesnice "Ctrl + F" v rovnakom čase zadáme frázu, ktorú potrebujete ( napr.: trieda \u003d "vypchávka ") A pohybujeme sa na zoznam našich výsledkov, súčasne hľadáte všetky štýly spojené s potrebnými prvkami na pravej strane stránky.

Ako prezerať HTML kód prvku (prvkov) naložených dynamicky (napríklad: AJAX)

Čakáme na stiahnutie stránky v prehliadači Google Chrome. Vykonávame potrebné kroky na prácu AJAX. Kliknite pravým tlačidlom myši na prevzaté dáta, v kontextovej ponuke vyberte výsledok v konzole na karte Prvky na ľavej strane.

Zobrazenie zmien štýlu CSS v reálnom čase

Mimochodom, je tiež vhodné pozorovať v prípade potreby: Aké štýly sú priradené k prvku RAID, napríklad pri rolovaní galérií a iných časovačov. Všetky štýly v reálnom čase priradené prostredníctvom Javascriptu sa zobrazia v nehnuteľnosti. Štýl. Vybraná položka v okne na karte "Prvky".

Interaktívne prezeranie vplyvu pravidiel CSS na reprezentáciu HTML Tag

Google Chrome poskytuje interaktívnu konzolu pre štýly CSS. A to znamená, že môžete nielen zobraziť, ktoré štýly sa vzťahujú na prvok, ale a prineste kurzor myši na špecifické CSS vlastnosti, zapnite pomocou kontextu zaškrtnutí doprava, alebo ho vypnúť odstránením vlajky a Zobrazenie výsledného výsledku na stránke.

Zmeňte štruktúru predloženia HTML prvkov RAID (priamo v prehliadači)

Takže, aby sme preskúmali štruktúru webového dokumentu v prehliadači Google Chrome, už sme sa naučili, teraz zvážte stručne úpravu prvkov RAID. Choďte do konzoly akýmkoľvek spôsobom vhodným pre nás. Požadovanú položku na karte "Prvky" nájdeme, kliknite na ňu pravým tlačidlom myši, čím sa volajú kontextové menu kontextu:

• Pridajte atribút. - Pridá atribút pre zadanú položku. Akonáhle sa kurzor stane aktívnym, začnite určiť požadovanú vlastnosť. napríklad: Napíšte Názov \u003d "ItemImage", ktorý bude okamžite pridaný k nášmu prvku.
• Upraviť atribút. - Ak kliknete na atribút kliknutím pravým tlačidlom myši na položku, bude k dispozícii upraviť.atribút.. Kliknite na položku Upraviť.

Príklad použitia:zabudli sme heslo uložené pod asteristom v prehliadači Google Chrome (ak bolo heslo uložené v tomto prehliadači). Kliknite pravým tlačidlom myši na prvok s vstupom hesla, kliknite na "Zobraziť Kód prvok» , v konzole na ľavej strane na karte Prvkykliknite na typ atribútu \u003d "Heslo" Kliknite pravým tlačidlom myši, ľavým tlačidlom myši na myš Upraviť.atribút,zmeníme atribút typ \u003d "heslo » na typ \u003d "text "A tu už máme najviac heslo vo forme textu namiesto hviezd.

• Upraviť.html - Kliknite pravým tlačidlom myši na prvku v konzole Prvky, Vyberte si Upraviť.html,zmeňte kód podľa svojich predstáv.
• KópiaakoHtml - Skopírujte HTML časť, ktorú potrebujete pre ďalší výskum, povedzte, v notebooku, alebo na iné účely, kde musíme aplikovať presne rovnaké usporiadanie. Ušetríme čas.
• KópiaXpath. - Kopíruje reprezentáciu štruktúry xpath z koreňa rodičovského prvku na vyhradený prvok.
• Vymazať.uzol. - Ak potrebujete odstrániť súčasný špecializovaný prvok a všetky jej dcérske spoločnosti z kontextu internetové stránkya vidieť výsledok.
• Slovo.obal. - Uskutočnite zobrazenie webovej stránky v kontexte konzoly Prvky Čitateľnejšie.

V nasledujúcich článkoch budeme pokračovať v zvážení finančných prostriedkov pre webový master, a najmä, budeme zoznámiť s ostatnými kartami nástrojov pre webový master Google Chrome.a tiež zvážiť ladenie Javascript Nástroje z rôznych prehliadačov

Každý internetový užívateľ má svoje obľúbené stránky, na ktorých strávi dlhú dobu. A len leniví nemyslel na vidieť, ako to bolo vytvorené a čo pozostáva z. Odpoveď Všetky tieto otázky nebudú fungovať, pretože existuje mnoho spôsobov, ako vytvoriť stránku, ale vidieť tie tímov a kódy, z ktorých sa skladá - je možné a prístupné pre každého.

Ďalšou otázkou je, či človek pochopí, kto nie je zapojený do programovania niečo z týchto znakov, ktoré tvoria kód. Ale z príkladov, ktoré budú skryté pod ľubovoľným používateľom prehliadača Google Chrome bude môcť vidieť jednotlivé prvky stránok.

Ako zobraziť zdrojový kód stránok HTML v prehliadači z Google

Čo by ste mohli vidieť kód stránky v Chrome musí ísť na stránku, ktorú máte záujem, a vykonávať nasledujúce akcie:

Dve z týchto položiek sa medzi sebou líšia s ich funkčnosťou a informáciami o užívateľovi, programátorovi alebo hackerovi.

Aký je rozdiel medzi kódom stránky a len príkazom "Zobraziť kód"

Prezeranie každej z týchto funkcií môže byť napísaná samostatná položka. Pre programátorov je tento rozdiel nevyhnutný a chápeme, v ktorých prípadoch je potrebné použiť "Zobraziť kód", a v "stránke Zobraziť stránke" v prehliadač Google Chróm.

Ale vysvetlenie pre bežného používateľa môžete tieto funkcie rozdeliť na nasledujúce účely:

1. "Zobraziť kód stránky" je potrebné len vidieť hlavnú kombináciu stránky. V podstate je to štruktúra stránky (bez ďalších modelov vo forme CSS súborov a iných addlections, ktoré zostali v priečinku Stvoriteľa stránky). Táto štruktúra nie je vhodný na vytvorenie vlastná stránka Podľa "kopírovania - vložka", ale to vám umožní vidieť, čo programátor urobil a v akom poradí tak, že stránka v prehliadači Google Chrome mal taký externý dizajn.
2. "Zobraziť kód" zobrazuje podrobnú štruktúru s prideľovaním všetkých oblastí, ktoré sú ovplyvnené na stránke. Ak prinesiete na konkrétny kód zoznamu - prideľuje položku na stránke, ku ktorej patrí.
3. Prezeranie kódu stránky sa otvorí v samostatnom prehliadači bez možnosti ich upravovať. To znamená, že je vhodný len na kopírovanie a čítanie kódu stránky. Ale toto nie je menej užitočným znakom.
4. "Zobrazenie kód" Zmena a môžete upraviť ľubovoľnú položku, pretože bude pre vás vhodná. Samozrejme - tieto všetky zmeny budú "žiť", kým sa stránka nebude aktualizovať, ale niekedy je zábavné vyliezť na nastavenia a jednoducho pochopiť, prečo je to potrebné, a čo sa stane, ak sa zmení. Nemali by ste predpokladať, že takéto akcie, ktoré ste ublížite, alebo site - tieto zmeny sú platné len v kóde vášho Google Chrome a nejde online.

Zvážte otázku, ako vidieť kód prvku

Ak naozaj odpovedáte na takú otázku, potom len možnosť. Vzhľadom k tomu, že jeden článok sa stal osobou, ktorá pochopí túto tému (web developer) je veľmi ťažké, ale ukázať príklad, ktorý má byť vyčerpaný - aby bolo oveľa jednoduchšie.

Funkčnosť prvku kódu je veľmi široká, takže berieme jednu zo slov na stránke prehliadača prehliadača Google Chrome. Chceli sme zvážiť čo kľúčové slová (V kóde, bude zaregistrovaný ako "Kľúčové slová") boli použité pre naše stránky. Ak to chcete urobiť, vykonajte nasledujúci algoritmus:

Ďalšie spôsoby, ako používať túto funkciu v prehliadači Google Chrome

Všeobecne platí, že naďalej reaguje na otázku, ako vidieť kód položky a prečo je to potrebné, malo by sa previesť na jeho funkcie. SmeD vďaka schopnosti vidieť kód prvku akéhokoľvek lokality v prehliadači Google Chrome, môžeme:

• Pozrite si štruktúru stránky, ktorá sa vychádza z hlavy ("Site Cap") a koncový koniec (koniec príkazu akéhokoľvek programu);
• Zobraziť všetky funkcie stránky, menovite: Odkazy na iné stránky, ďalšie moduly z externých stránok a prítomnosť vstavaných metrov na zhromažďovanie rôznych informácií;
• Zistite, či je kopírovanie z lokality zakázané alebo nie;
• V kóde sa zaznamenávajú všetky odkazy na iné stránky stránok, ako aj ich dizajn a následné akcie po kliknutí na ne.

Toto nie je konečný zoznam. Treba však pripomenúť, že bez špeciálnych znalostí - "Prečítajte si" kód stránky Google Chróm je takmer nemožné a výsledné údaje sú prakticky potrebné obvyklým používateľom.

Položka "Zobraziť kód položky" nefunguje

By mali okamžite povedať - každé stránky bude otvorený prístup K kódom prvkov. To znamená, že aj najobľúbenejšie a drahé stránky budú otvorené pre zobrazenie svojho kódu. Preto v prípade, že položka v prehliadači Google Chrome nie je aktívna alebo vydaná chyba má nasledujúce možné dôvody:

• Používateľský profil je poškodený;
• Prítomnosť škodlivého softvéru na počítači;
• Blokovanie špecifickým rozšírením na zvýšenie produktivity (aj to môže byť).

Opravte poškodený užívateľský profil

Vytvoriť nový profilZ počítača musíte odstrániť starý. Urobte to:

1. Zatvorte Google Chrome a spustite vstavaný windows prehliadača Prieskumník.
2. Do adresára zadáme nasledujúci príkaz:% LOUCKAPPDATA% \\ t
3. Keď sa adresár otvorí, hľadáme priečinok "Predvolené" a pridajte do svojho mena "Backup" tak, že nasledujúce sú: "Predvolené nastavenie zálohovania".
4. Teraz po novej spustení prehliadača Chrome bude vytvorený nový profil.

Odstráňte škodlivý softvér alebo jeho zvyšky

Ak nový profil neotvoril prístup na stránku prvku stránky a stále sa zobrazí chyba, nasledujúce kroky:

1. Otvorené príkazový riadok Windows ("RUN") a zadajte príkaz "CMD".
2. Zadajte nasledujúci príkaz v riadku: RD / S / Q "% windir% system32 Grouppolyusers".
3. Po potvrdení akcie, riadite toto: RD / S / Q "% WINDIR% System32 Grouppolicy".
4. Teraz "gpupdate / sila" (bez džbánov).

Ak sa všetko urobilo správne, potom po reštarte google Computer Chrome otvorí kód prvkov a pracovná kapacita prehliadača bude normálne.