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űparanccsal: CTRL + U (COMMAND + OPTION + U a macOS-on).
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. Akkor is eljuthat hozzá, ha beírja a következő szöveget a Chrome címsorába, amely a weboldal URL-címének bal oldalához van csatolva, és kiválasztja a Belép kulcs: Forrás megtekintése: (vagyis a nézetforrás: https: //www.Go-Travels.com).
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 történik: CTRL + SHIFT + I (COMMAND + OPTION + I a macOS-on). A következő útvonalat is elindíthatja.
-
Válassza a Chrome főmenü gombját, amely a jobb felső sarokban található, és három függőlegesen igazított pont.
-
Ha megjelenik a legördülő menü, vigye az egérmutatót a Több eszköz választási lehetőség.
-
Ha megjelenik az almenü, válassza a lehetőséget Fejlesztői eszközök.
Android
A weboldal forrásának megnézése a Chrome-ban az Androidhoz hasonlóan egyszerű, ha hozzáfűzi a következő szöveget címének (vagy URL-címének) elejére és elküldi azt: Forrás megtekintése:. Erre példa lehet view-source: https: //www.Go-Travels.com . 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 túl az alkalmazásoknak olyan lapok is vannak, amelyek megjelenítik az egyéni oldalelemeket, a Dokumentum objektummodellt (DOM), valamint az oldalméretet, a cookie-kat és más érdekes részleteket.
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 a billentyűparancsok valamelyikét használhatja: 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 F12 fejlesztői eszközök opciót a listából.
Miután a dev eszközöket először futtatta, az Edge két kiegészítő lehetőséget is hozzáad a böngésző helyi menüjéhez (elérhető egy jobb oldali egérgombbal bármely weboldalon belül): Elem vizsgálata és Forrás megtekintése, ez utóbbi megnyitja a Debugger a forráskóddal feltöltött dev eszközök felületének része.
Mozilla Firefox
Futó: Linux, macOS, Windows
Az oldal forráskódjának megtekintéséhez a Firefox asztali verziójában nyomjuk meg a gombot CTRL + U (COMMAND + U a macOS) billentyűzeten, 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ímsorába, közvetlenül az oldal URL-jének bal oldalán, ugyanazt a forrás jelenik meg az aktuális lapon: Forrás megtekintése: ( azaz a nézetforrás: https: //www.dotdash.com ).
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.
-
Válassza ki a főmenü gombot, amely a böngészőablak jobb felső sarkában található és három vízszintes vonal által ábrázolt.
-
Ha megjelenik a kiugró menü, kattintson a Fejlesztő "kulcs" ikon.
-
Most meg kell jelennie a Web Developer helyi menüjének. Válaszd ki a Oldalforrás választási lehetőség.
A Firefox lehetővé teszi az oldal adott részének forráskódját is, így egyszerűen elkülönítheti a problémákat. Ehhez először ki kell emelni az egérrel érdeklő területet. Ezután kattintson jobb gombbal, és válassza ki A kiválasztási forrás megtekintése 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: Forrás megtekintése:. Például a Dotdash HTML forrásának megtekintéséhez a böngésző címsorában a következő szöveget kell elküldenie: view-source: https: //www.dotdash.com .
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 ki a Forrás megtekintése gomb.
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
Az oldal forráskódjának megtekintéséhez a Safari asztali verziójában először engedélyezni kell fejleszt menü. 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.
-
választ Szafari a böngésző menüjében, amely a képernyő tetején található.
-
Ha megjelenik a legördülő menü, válassza a preferenciák választási lehetőség.
-
A Safari beállításainak most láthatónak kell lenniük. Kattintson a Fejlett ikon, amely a felső sor jobb szélén található.
-
A fejlett rész alján egy opció van jelölve Mutassa a Fejlesztés menüt a menüsorban, üres jelölőnégyzet kíséri. Jelölje be ezt a négyzetet egyszer, ha bejelöl egy pipát, majd zárja be a Beállítások ablakot a bal felső sarokban található piros "x" gombra kattintva.
-
Válaszd ki a fejleszt menü, amely a képernyő tetején található.
-
Ha megjelenik a legördülő menü, válassza a lehetőséget Oldalforrás megjelenítése. Használhatja a következő billentyűparancsot is: COMMAND + OPTION + U.
Opera
Futó: Linux, macOS, Windows
Az Opera böngészőben az aktív weboldal forráskódjának megtekintéséhez használja a következő billentyűparancsot: CTRL + U (COMMAND + OPTION + U a macOS-on). Ha inkább be akarja tölteni a forrást az aktuális lapon, írja be a következő szöveget az oldal URL-címének bal oldalán a címsorba és nyomja meg a Írja be: view-source: ( azaz a nézetforrás: https: //www.Go-Travels.com ).
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-on).
Az Opera fejlesztői eszköztára a következő lépésekkel is elérhető.
-
Válassza ki az Opera logót, amely a böngészőablak bal felső sarkában található.
-
Ha megjelenik a legördülő menü, vigye az egérmutatót a Több eszköz választási lehetőség.
-
Kattintson A fejlesztői menü megjelenítése.
-
Válassza ismét az Opera logót.
-
Ha megjelenik a legördülő menü, vigye a kurzort a kurzorra Fejlesztő.
-
Ha megjelenik az almenü, válassza a lehetőséget Fejlesztői eszközök.
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űparancsot, amely az aktív lap egy új lapján megjelenő kódot jeleníti 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: Forrás megtekintése:. Erre példa lehet view-source: http: //www.dotdash.com .
Egy másik módszer a böngésző integrált fejlesztői eszközei segítségével érhető el CTRL + SHIFT + I kombináció vagy a Fejlesztői eszközök opciót a böngészőben Eszközök menü - amelyet a V logó a bal felső sarokban. A dev eszközök használata lehetővé teszi az oldal forrásának sokkal alaposabb elemzését.
