Hogyan lehet megnyitni az oldal forráskódját. Az oldal forráskódjának megtekintése és az elem kódja

Valaki először úgy tűnik, hogy ez nem a szükséges eszköz, de a teljes HTML webhelykód nézete nagyszerűen keresi a szükséges elemek kódját, lehet linkek, címkék, meta-címkék, attribútumok és egyéb elemek.

Forró kulcsok kombinációja + Nyissa meg a keresőmezőt, a Chrome böngészőben, amely a jobb oldalon jelenik meg:

3. ábra: Kódkeresési webhely

Miután felkéri a keresési űrlapot, a képernyő az első talált elemre lép, a nyilak segítségével mozoghat, és kiválaszthatja a szükséges:

4. ábra: HTML webhelykód általi keresése

2. utasítás: HTML és CSS webhelykód megtekintése és szerkesztése a Google Chrome böngészőben

NOWYA fontos részamelyben megmutatom, hogyan szerkesztheti a HTML és a CSS webhelykódot a böngészőben. Miután az átviteli változtatásokat a böngészőre változtatja.

Itt van egy hasznos eszköz mindig elérhető a böngészőben, kísérletezzen más parancsokkal, hogy megkönnyíti a webhely szerkesztését.

" Ugyanaz az elem van kontextus menüMelyik, ha jobb gombbal a szövegre kattint oldalak. Használhat kombinációt kulcsok Ctrl + U. Mozilla Firefox. Nem használ külső programokat - az eredeti a kód oldalak A szintaxis kiemelését külön böngészőablakban nyitják meg.

Megfigyelőben Internet böngésző. Kattintson a Fájl rész menüpontra, és válassza a Szerkesztés a Notepad programban. A Névjegyzék neve helyett egy másik írható, a böngészőbeállításokhoz a forrás megtekintéséhez van hozzárendeléséhez a kódde. Kattintás oldalak A jobb egérgomb csökkenti a helyi menüt, amelyben van olyan elem, amely lehetővé teszi a forrás megnyitását a kód oldalak ban ben külső program - "HTML megtekintése a kódde".

BAN BEN böngésző opera. Nyissa meg a menüt, menjen az "oldal" részre, és lehetősége lesz kiválasztani a "Forrásfejlesztés" alfejezet kiválasztását a kód"Vagy pont" forrás a kód Freum. Ez a választás a CTRL + U és a CTRL + SHIFT + U hot billentyűkkel rendelkezik. A helyi menüben kattintva kapcsolódik oldalak Jobb egérgombbal is van egy tétel "forrás) a kód" Opera forráskód oldalak A külső programban, amelyet az operációs rendszerhez vagy a HTML fájlok szerkesztéséhez rendelnek meg.

A Google Chrome böngésző kétségtelenül a legjobban megtekintheti a forrás megtekintését a kódde. Kattintson a jobb gombbal, kiválaszthatja a "Nézet a kódde oldalak"És akkor a szintaxis háttérvilágítású forrása külön lapon nyílik meg. Választhat ugyanazon a menü karakterláncban a kódés az elem "és ugyanazon a lapon megnyílik két további keretet, amelyben ellenőrizheti a HTML és a CSS-t a kód Elem oldalak. A böngésző válaszol a kurzor mozgára a sorokban a kóda, kiemelve a HTML e szakaszának megfelelő elemeket a kódde.

Tehát ma számos hasznos pénzeszközt fogunk megfontolni a webes varázslók számára, akik megkönnyítik az életet a webhely elhelyezésekor. Kezdjük a konzollal a Google Chrome webmesterekhez. És olyan kérdésekre megyünk, amelyek leggyakrabban a web-mesterből származnak a webhely elrendezése során.

Annak érdekében, hogy a konzolba, nyissa meg webhelyét a Google Chrome, a jobb gombbal bárhol a weblapon, és válassza ki a „View oldal kódja” a kontextus legördülő menüből, vagy egy adott tételt a tanulmány szerint kiválasztja a " Kódelem megtekintése. "

A tetején több fül is szerepel. Ma beszélünk az "Elements" lapról , amelyen a weblap elemei megvilágított címkékkel, tulajdonságokkal, a fészkelő elemek kiválasztásával, az elem hierarchiájának ábrázolása a domfaban (az alján lévő tipp, a gyökér szülőtől az aktuális vizsgálatig) Az elemek szerkesztése, a tulajdonságaik listája, figyelembe vesszük a keresést az elemek szerint, és az elemekkel kapcsolatos CSS stílusok stb.

Hogyan tekinthető meg az egyes elemekhez kapcsolódó összes stílus megtekintése? Melyiket alkalmazzák most? Milyen fájlokat találnak?

Szóval semmi sem könnyebb! Nyissa meg a Google Chrome böngésző, nyissa honlapunkon - a forrása a kérdésre, kattintson a kívánt elemre jobb egérgombbal, ha az látható összefüggésben az oldalt, és válassza ki az elemet „View tételkód” a Kontextus menü.

Az alábbiakban van egy konzolunk a bal "elemek" kiemelt lapjával, és mindegyikhez csatlakozik a jobb oldalon lévő elemstílusokhoz, ahol: Számított stílusok. - Ezek közös "összefoglaló" stílusok, amelyeket a CSS-szabályok és a felhasználói böngésző beállításainak (környezeti környezetének) elemeihez rendelnek, és a fül minimalizálása.

De érdekel a Stílusok lap, amely alatt telepítve van, amelyben az elemhez rendelt minden stílus, valamint a fájlok, ahol ezek a szabályok megadják ezt az elemet típus, azonosító, osztály, név, tulajdonság, attribútum, stb. . Ugyanakkor, ha a CSS-szabályt keresztezi, azt jelenti, hogy korábban felülbírálta / tovább (ami megkönnyíti, hogy a CSS-szabályok, amelyek a CSS-szabályok prioritás, és érvényesek ebben az esetben az elemre.

A konzol alján van egy karakterlánc, amely a dokumentum hierarchiájában található elemet mutatja, könnyen lehetővé teszi, hogy megtekinthesse a szülőelemek teljes listáját a gyökérből a kiválasztott elemre. Valami hasonló "kenyér morzsák".

A HTML-címke az oldal kontextusában nem látható? Vagy meg kell találnia az összes címkét, például egy adott osztály, név, tulajdonság, típuson?

Nyissa meg a webhelyet a Google Chrome-ban, kattintson a Kattintson a jobb gombbal, hívja a helyi menüt, válassza ki « Az oldalkód megtekintése » . Kattintson egyszerre a "Ctrl + F" billentyűzet gombra, megadjuk a szükséges kifejezést ( például: osztály \u003d "padding ") És az eredmények listáján haladunk, egyidejűleg az oldal jobb oldalán található szükséges elemekhez kapcsolódó összes stílust átnézve.

A dinamikusan betöltött elem (elemek) HTML kódjának megtekintése (például: AJAX)

Várjuk az oldal letöltését a Google Chrome-ban. Végezzük el a szükséges intézkedéseket az AJAX működéséhez. Kattintson a Jobb egérgombbal kattintson jobb gombbal a letöltött adatokra, válassza ki a "Elem-kód megtekintése" elemet a helyi menüben, megvizsgáljuk a bal oldali elemek fülén lévő konzol eredményét.

View CSS stílusváltozások valós időben

By the way, az is kényelmes megfigyelni, ha szükséges: Milyen stílusokat rendelnek hozzá a RAID elemeihez, például görgetés közben a galériák és más időzítő események görgetésekor. A JavaScript segítségével hozzárendelt valós idejű stílus jelenik meg az ingatlanban. stílus. Kiválasztott elem az ablakban az "Elements" lapon.

Interaktív megtekintés A CSS-szabályok hatása a HTML-címke képviseletére

A Google Chrome interaktív konzolt biztosít a CSS stílusokhoz. És ez azt jelenti, hogy nem csak azt jelenti, hogy melyik stílusra vonatkozik az elemre, hanem az egérmutatót egy adott CSS tulajdonságokra, kapcsolja be a jobb oldali felbukkanó kullancs használatával, vagy tiltsa le a zászlót, és A kapott eredmény megtekintése az oldalon.

Módosítsa a RAID HTML elemeinek benyújtási struktúráját (jobb a böngészőben)

Tehát, hogy feltárja a webdokumentum struktúráját a Google Chrome-ban, már megtanultunk, most már röviden szerkesztjük a RAID elemeit. Menjen a konzolra bármilyen módon kényelmes számunkra. Megtaláljuk a kívánt elemet az "Elements" lapon, kattintson rá a jobb egérgombbal, így hívja a pop-up kontextus menüt:

• Adja hozzá az attribútumot. - Adja hozzá a megadott elem attribútumát. Amint a kurzor aktívvá válik, indítsa el a kívánt tulajdonságot. például: Írjon név \u003d "itemimage", amelyet azonnal hozzáadunk az elemünkhöz.
• Az attribútum szerkesztése. - Ha rákattint a jobb gombbal az attribútumra az elemhez, elérhetővé válik szerkesztés.tulajdonság.. Kattintson, szerkeszthető.

Példa a használatra:elfelejtettük az Asteristers alatt tárolt jelszót a Google Chrome-ban (ha a jelszó mentésre került ezen a böngészőben). Kattintson a jobb egérgombbal kattintson a jobb egérgombbal a jelszó bemenetre, kattintson a "Nézet gombra Elemkód» , A bal oldali konzolban a lapon Elemekkattintson az attribútum típusa \u003d "Jelszó" jobb egérgombbal kattintva az egérre Szerkesztés.tULAJDONSÁG,megváltoztatjuk az attribútumot típus \u003d "jELSZÓ " a típus \u003d "szöveg "És itt már a csillagok helyett a legtöbb jelszó van a csillagok helyett.

• Szerkesztés.hTML. - kattintson a jobb egérgombbal a konzol elemére Elemek, választ Szerkesztés.html,módosítsa a kódot a tetszéshez.
• MásolatmintHTML. - Másolja a további kutatáshoz szükséges HTML-részt, mondjuk, a notebookban vagy más célokra, ahol pontosan ugyanazt az elrendezést kell alkalmazni. Időt takarítunk meg.
• MásolatXPath. - A szerkezet XPath ábrázolása a szülőelem gyökeréből a dedikált elemre.
• Töröl.csomópont. - ha meg kell távolítania a jelenlegi dedikált elemet és az összes leányvállalatokat a kontextusból weboldalakés nézze meg az eredményt.
• Szó.betakar. - Hozzon létre egy weboldalt a konzol kontextusában Elemek olvashatóbb.

A következő cikkekben továbbra is figyelembe veszik a pénzeszközöket egy webmester számára, és különösen megismerkedünk a webes mester többi eszközével Google Chrome.és fontolja meg a JavaScript hibák hibakeresését különböző böngészőkből

Minden internet-felhasználónak kedvenc helyei vannak, amelyeken sokáig töltötte. És csak a lusta nem gondolt arra, hogy meglátta, hogyan jött létre, és mit tartalmaz. Válaszoljon mindezekre a kérdésekre, mivel sokféle módon lehet létrehozni egy webhelyet, de látni ezeket a csapatokat és kódokat, amelyekből áll - mindenki számára lehetséges és elérhető.

Egy másik kérdés az, hogy egy személy megérti, hogy ki nem vesz részt a kódot alkotó karakterek programozásában. De azokra a példáktól, amelyek elrejtenek, a Google Chrome bármely felhasználója alatt lesz képes látni az egyes webhelyek egyedi elemeit.

Hogyan tekintheti meg a HTML oldalak forráskódját a böngészőben a Google-tól

Mit láthatott a Chrome-ben lévő oldalkódnak az Ön által érdekelt webhelyre kell mennie, és végezze el a következő műveleteket:

Ezek közül kettő ezek közül kettő különbözik a funkcionalitásukkal és a felhasználó, a programozó vagy a hacker információival.

Mi a különbség az oldalkód és csak a "View Code" parancs között

Mindegyik funkció megtekintése különálló elemet írhat. A programozók számára ez a különbség elengedhetetlen, és megértik, hogy milyen esetekre van szükség a "View Code" használatához, és milyen "oldalnézetben" google böngésző Króm.

De magyarázza a rendszeres felhasználót, megoszthatja ezeket a funkciókat a következő célokra:

1. "Az oldalkód megtekintése" csak az oldal fő kombinációjának megtekintéséhez szükséges. Alapvetően ez a webhely szerkezete (további modellek nélkül CSS-fájlok és egyéb addelections, amely a webhely-készítő mappában maradt). Ez a szerkezet Nem alkalmas a létrehozásra saját oldal "Másolás - betét", de lehetővé teszi, hogy lássa, mi a programozó, és milyen sorrendben, hogy a webhely a Google Chrome böngészőben ilyen külső kialakítással rendelkezzen.
2. A "View Code" részletes struktúrát jelenít meg az oldalra érintett területek elosztásával. Ha egy adott lista kódot hoz létre - egy elemet oszt ki a helyszínen, amelyhez tartozik.
3. Az oldalkód megtekintése egy külön böngészőben nyílik meg anélkül, hogy képes lenne szerkeszteni. Ez csak a webhelykód másolására és olvasására alkalmas. De ez nem kevésbé hasznos funkció.
4. "Kód megtekintése" módosítás, és módosíthatja az elemet, mivel kényelmes lesz az Ön számára. Természetesen - ezek az összes változás "él", amíg az oldal frissül, de néha szórakoztató, hogy mászni a beállításokat, és egyszerűen megértse, miért szükséges, és mi fog történni, ha megváltozik. Nem feltételezheti, hogy az ilyen cselekedetek önmagukban vagy webhelyen - ezek a változások csak a Google Chrome kódjában érvényesek, és nem megy online.

Tekintsük meg az elem kódjának megismerését

Ha valóban válaszol egy ilyen kérdésre, akkor csak egy lehetőség példaként. Mivel az egyik cikk olyan személyré válik, aki megérti ezt a témát (webfejlesztő) nagyon nehéz, de megmutatja a példát, hogy kimerüljön - hogy sokkal könnyebb legyen.

Az elemkód funkcionalitása nagyon széles, ezért az egyik szót a Google Chrome böngésző webhelyén vesszük. Azt akartuk, hogy melyik kulcsszavak (A kódban a webhelyünkre "kulcsszavak" -ként lesz regisztrálva. Ehhez hajtsa végre a következő algoritmust:

A funkció használatának módja a Google Chrome böngészőben

Általánosságban elmondható, hogy továbbra is reagál az elem kódjának, és miért van szükség, azt át kell adni a funkcióira. Nevezetesen, köszönhetően, hogy a Google Chrome böngésző bármely webhelyének elemét megtekintheti, mi:

• Lásd a webhely szerkezetét a fej ("webhely sapka") és a végső vég (végső parancs bármely program);
• Az összes webhely funkció megtekintése, nevezetesen: más webhelyekhez kapcsolódó hivatkozások, külső oldalak további moduljai és a beépített mérők jelenléte különböző információk gyűjtése érdekében;
• Megtudja, hogy a webhelyről történő másolás tilos-e vagy sem;
• A kódban minden más webhelyoldalra való hivatkozás kerül rögzítésre, valamint a tervezési és későbbi intézkedésekre, miután rákattintott rájuk kattintva.

Ez nem véges lista. De emlékeztetni kell arra, hogy különleges tudás nélkül - "Olvassa el" kódot google oldalak A Chrome szinte lehetetlen, és az így kapott adatok gyakorlatilag nem szükségesek a szokásos felhasználó.

Elem "Az elemkód megtekintése" nem működik

Azonnal meg kell mondania - minden webhely lesz nyílt hozzáférésű Az elemek kódjaihoz. Ez is, még a legnépszerűbb és drága webhelyek is nyitottak lesznek a kód megtekintéséhez. Ezért, abban az esetben, ha a Google Chrome böngészője nem aktív vagy kiadott hiba a következő lehetséges okokból:

• A felhasználói profil sérült;
• A rosszindulatú szoftverek jelenléte a számítógépen;
• A termelékenység növelése érdekében egy meghatározott kiterjesztéssel blokkolja (még ez is).

Javítsa ki a sérült felhasználói profilt

Készíteni Új profilEl kell távolítania a régiet a számítógépről. Ehhez hajtsa végre a következőket:

1. Zárja be a Google Chrome-t és indítsa el a beépített beépített böngészőablakok Felfedező.
2. A következő parancsot a címsorba adjuk meg:% localappdata% \\ Google \\ Chrome \\ felhasználói adatok \\.
3. Amikor megnyílik a könyvtár, az "Alapértelmezett" mappát keresjük, és hozzáadjuk a "Biztonsági mentés" nevét, hogy a következők: "Backup alapértelmezett".
4. Most a böngésző krómjának bevezetése után új profil jön létre.

Távolítsa el a rosszindulatú szoftvert vagy annak maradványait

Ha egy új profil nem nyitotta meg az oldalelem oldalához való hozzáférést, és még mindig látjuk a hibát, a következő lépéseket:

1. Nyisd ki parancs sor Windows ("Run"), és írja be a "CMD" parancsot.
2. Adja meg a következő parancsot a sorban: RD / S / Q "% WINDIR% \\ SYSTEM32 \\ GROUPPOLICEUSERS".
3. Miután megerősítette az akciót, hajtsa végre ezt: Rd / S / Q "% windir% \\ System32 \\ grouppolicy".
4. Most "gpupdate / erő" (kancsók nélkül).

Ha mindent helyesen végeztünk, akkor újraindítás után google számítógép A Chrome megnyitja az elemek kódját és a böngésző munkaképességét általában.