A weblap forráskódjának megtekintése minden böngészőben

Az olvasott weboldal többek között forráskódból áll. Ez az az információ, amelyet a böngésző letölt és fordít, amit most olvasol.

A legtöbb internetes böngésző lehetőséget nyújt arra, hogy egy weboldal forráskódját megnézze, nem szükséges további szoftver, függetlenül attól, hogy milyen típusú eszköz van.

Néhányan még fejlett funkciókat és struktúrát is kínálnak, megkönnyítve a HTML és más programkód megismerését az oldalon.

Miért szeretné megtekinteni a forráskódot?

Számos oka lehet annak, hogy meg szeretné tekinteni az oldal forráskódját. Ha webfejlesztő vagy, akkor talán egy másik programozó különleges stílusát vagy megvalósítását szeretné megnézni. Talán minőségbiztosítási minőségben vagyunk, és megpróbáljuk megállapítani, hogy egy weboldal egy része hogyan teszi vagy viselkedik úgy, ahogy van.

Ön is kezdõ lehet, aki megpróbálja megtanulni saját oldalainak kódolását és valódi példákat keres. Természetesen lehetséges, hogy egyik kategóriájába sem tartozik, és csak a puszta kíváncsiságtól szeretné megnézni a forrást.

Az alábbiakban felsoroljuk a forráskód megtekintésének módját a választott böngészőben.

Google Chrome

Futó: Chrome OS, Linux, macOS, Windows

A Chrome asztali verziója három különböző módszert kínál az oldal forráskódjának megtekintéséhez, az első és a legegyszerűbb a következő billentyűparancs használatával: CTRL + U ( COMMAND + OPTION + U a macOS-ban).

Ha megnyomta ezt a parancsikont, új böngészőlapot nyit meg, amely HTML-kódot és más kódot jelenít meg az aktív oldal számára. Ez a forrás színkódolt és strukturált, így egyszerűbbé teszi a megosztást és megtalálja, amit keres. Az is elérhető, hogy a következő címre írja be a Chrome címsávjába a weboldal URL - címének bal oldalát, és nyomja meg az Enter billentyűt: nézetforrás: (pl. Nézetforrás: https: // www .).

A harmadik módszer a Chrome fejlesztői eszközén keresztül történik, amelyek lehetővé teszik, hogy mélyebben merüljenek az oldal kódjába, és teszteljék és fejlesszék le. A fejlesztői eszközök kezelőfelületének megnyitása és bezárása a billentyűparancs segítségével: CTRL + SHIFT + I ( COMMAND + OPTION + I a macOS-ban). A következő útvonalat is elindíthatja.

1. Kattintson a jobb felső sarokban található Chrome főmenü gombjára, amelyet három függőlegesen igazított pont jelez.
2. Ha megjelenik a legördülő menü, vigye az egérmutatót a Több eszköz opció fölé.
3. Amikor megjelenik az almenü, kattintson a Fejlesztői eszközök elemre.

Android
A weboldal forrásának megtekintése a Chrome Android rendszerben olyan egyszerű, mintha a címét (vagy URL-címét) a következő szöveghez csatolná és elküldte: view-source:. Erre példa lehet nézetforrás: https: // www. . A kérdéses oldal HTML-kódja és egyéb kódja azonnal megjelenik az aktív ablakban.

iOS
Bár a natív módszerek nem tekinthetők meg a forráskód megtekintéséhez a Chrome-on a iPad, az iPhone vagy az iPod touch készüléken, a legegyszerűbb és leghatékonyabb egy olyan harmadik féltől származó megoldás, mint a View Source alkalmazás.

0,99 dollárért az App Store-ban, a View Source megjeleníti az oldal URL-jét (vagy másolja / illessze be a Chrome címsorából, ami néha a legegyszerűbb út). A HTML és más forráskód megjelenítésén kívül az alkalmazásoknak olyan lapok is vannak, amelyek az egyéni oldalelemeket, a dokumentumobjektum-mintát (DOM), valamint az oldalméretet, a cookie-kat és egyéb érdekes adatokat jelenítik meg.

Microsoft Edge

Futás: Windows

Az Edge böngésző lehetővé teszi az aktuális oldal forráskódjának megtekintését, elemzését és manipulálását a Fejlesztői eszközök kezelőfelületén keresztül. A praktikus eszköztár eléréséhez használhatja az alábbi billentyűparancsokat: F12 vagy CTRL + U. Ha inkább az egeret szeretne, kattintson az Edge menügombjára (három pont a jobb felső sarokban), és válassza a listából az F12 Fejlesztői eszközök lehetőséget.

A dev eszközök elsõ futása után az Edge két további opciót ad hozzá a böngészõ helyi menüjéhez (amelyhez a jobb egérgombbal kattintva bárhonnan lehet elérni egy weboldalon): Elemnézet elem és Megtekint forrás , utóbbi, amely megnyitja a dev debugger részét eszközök felülete forráskóddal feltöltött.

Mozilla Firefox

Futó: Linux, macOS, Windows

Az oldal forráskódjának megtekintéséhez a Firefox asztali verziójában megnyomhatja a billentyűzeten a CTRL + U ( COMMAND + U a macOS) billentyűt, amely megnyit egy új lapot, amely HTML-kódot és más kódot tartalmaz az aktív weboldal számára.

A következő szöveg beírása a Firefox címsávjába, közvetlenül az oldal URL-jének bal oldalán, ugyanazt a forrás jelenik meg az aktuális lapon: view-source: (azaz view-source: https: // www.) .

Az oldal forráskódjának elérésének másik módja a Firefox fejlesztői eszközei révén elérhető a következő lépésekkel.

1. Kattintson a főmenü gombra, amely a böngészőablak jobb felső sarkában található, és három vízszintes vonal látható.
2. Amikor megjelenik a kiugró menü, kattintson a Fejlesztő "csavarkulcs" ikonjára.
3. Most meg kell jelennie a Web Developer helyi menüjének. Válassza ki a Page Source lehetőséget.

A Firefox lehetővé teszi egy adott oldalrész forráskódjának megtekintését is, így könnyű elkülöníteni a problémákat. Ehhez először ki kell emelni az egérrel érdeklő területet. Ezután kattintson a jobb egérgombbal, és válassza a View Selection Source lehetőséget a böngésző helyi menüjéből.

Android
A forráskód megtekintése a Firefox Android verziójában elérhető a weboldal URL-jének előszűrésével a következő szöveggel: view-source :. Például, ha meg szeretné tekinteni a HTML-forrást, akkor a következő szöveget beírná a böngésző címsorába: view-source: https: // www. .

iOS
Az iPad, iPhone vagy iPod touch weboldal forráskódjának megtekintésére javasolt módszert a View Source alkalmazással lehet elérni, amely az App Store-ban elérhető 0,99 dollárért. Bár nem közvetlenül integrálódott a Firefoxhoz, egyszerűen másolhat és beilleszthet egy URL-t a böngészőből az alkalmazásba, hogy bemutassa a kérdéses oldalhoz kapcsolódó HTML-kódot és egyéb kódokat.

Apple Safari

Futás iOS és MacOS operációs rendszereken

iOS
Habár az iOS Safari nem tartalmazza alapértelmezés szerint az oldal forrásának megtekintését, a böngésző meglehetősen zökkenőmentesen integrálja a View Source alkalmazást - amely az App Store-ban elérhető 0,99 dollárért.

A harmadik féltől származó alkalmazás telepítése után térjen vissza a Safari böngészőhöz, és érintse meg a Megosztás gombot a képernyő alján, és egy négyzet és egy felfelé mutató nyíllal jelölve. Az iOS Megosztási lapnak most láthatónak kell lennie, a Safari ablak alsó részét felölelve. Görgessen jobbra, és válassza a Nézet forrást .

Mostantól megjelenik az aktív oldal forráskódjának színkódolt, strukturált ábrázolása, valamint más lapok, amelyek lehetővé teszik az oldalelemek, szkriptek és egyebek megtekintését.

Mac operációs rendszer
Egy oldal forráskódjának megtekintéséhez a Safari asztali verziójában először engedélyezni kell a Fejlesztés menüt. Az alábbi lépések az elrejtett menü aktiválásával és az oldal HTML forrásának megjelenítésével járnak.

1. Kattintson a Safari lehetőségre a böngésző menüjében, amely a képernyő tetején található.
2. Amikor megjelenik a legördülő menü, válassza a Beállítások lehetőséget.
3. A Safari beállításainak most láthatónak kell lenniük. Kattintson a Speciális ikonra, amely a felső sor jobb szélén található.
4. A Speciális szakasz alján található egy opció, amely a menüsorban megjelenik a Fejlesztés menü megjelenítése , egy üres jelölőnégyzet segítségével. Kattintson erre a jelölőnégyzetre, hogy bejelölje a jelölőnégyzetet, és zárja be a Beállítások ablakot a piros "x" elemre a bal felső sarokban.
5. Kattintson a Fejlesztés menüre, amely a képernyő tetején található.
6. Amikor megjelenik a legördülő menü, válassza a Oldalforrás megjelenítése lehetőséget . Használhatja a következő billentyűparancsot is: COMMAND + OPTION + U.

Opera

Futó: Linux, macOS, Windows

Az Opera böngésző aktív weboldalának forráskódjának megtekintéséhez használja a következő billentyűparancsot: CTRL + U ( COMMAND + OPTION + U a macOS-ban). Ha inkább szeretné betölteni a forrást az aktuális lapon, írja be a következő szöveget a címsávon belül az oldal URL-címének bal oldalán, és nyomja meg az Enter : view-source: (nézetforrás: https: // www. ).

Az Opera asztali verziója lehetővé teszi a HTML forrás, a CSS és egyéb elemek megtekintését az integrált fejlesztői eszközök használatával . Az interfész elindításához, amely alapértelmezés szerint a fő böngésző ablakának jobb oldalán jelenik meg, nyomja meg a következő billentyűparancsot: CTRL + SHIFT + I ( COMMAND + OPTION + I a macOS-ban).

Az Opera fejlesztői eszköztára a következő lépésekkel is elérhető.

1. Kattintson az Opera logójára, amely a böngészőablak bal felső sarkában található.
2. Ha megjelenik a legördülő menü, vigye az egérmutatót a Több eszköz opció fölé.
3. Kattintson a Fejlesztői menü megjelenítése elemre.
4. Kattintson ismét az Opera logóra.
5. Ha megjelenik a legördülő menü, vigye a kurzort a fejlesztőre .
6. Ha megjelenik az almenü, kattintson a Fejlesztői eszközök elemre.

Vivaldi

A Vivaldi böngészőben többféleképpen is megtekintheti az oldal forrását. A legegyszerűbb a CTRL + U billentyűparancson keresztül, amely egy új lapon lévő aktív oldalról kódot jelenít meg.

A következő szöveget is hozzáadhatja az oldal URL-címének elejére, amely megjeleníti a forráskódot a jelenlegi lapon: view-source:. Erre példa lehet nézetforrás: http: // www. .

Egy másik módszer a böngésző beépített fejlesztői eszközei révén érhető el, amelyek a CTRL + SHIFT + I kombináció vagy a Fejlesztői eszközök opció segítségével érhetők el a böngésző Eszközök menüjében - a bal felső sarokban lévő "V" logóra kattintva. A dev eszközök használata lehetővé teszi az oldal forrásának sokkal alaposabb elemzését.