Wéi Dir de Source Code vun enger Websäit an all Browser gesinn

D'Websäit déi Dir liest, ass ënner anerem Quellcode. Dat ass d'Informatioun vun Äre Browser an d'Iwwersetzer an dat wat Dir Iech elo richteg liesen.

Déi meescht Websäiten bidden d'Fähigkeit fir de Quellcode vun enger Websäit ze gesinn, ouni zusätzlech Software ze kréien, egal wéi een Typ vun Ärem Apparat Dir sidd.

E puer solle souguer fortgeschniddene Funktionalitéit a Struktur erlaben, sou datt et méi einfach HTML an anere Programmiercode op der Säit ze verleeën.

Firwat giff Dir de Source Code gesinn?

Et gi verschidde Grënn, firwat Dir wëllt de Quellcode vun enger Säit kucken. Wann Dir e Web-Entwéckler hutt, da wëllt Dir e Bléck ënner den Deckelen op speziell Stil oder Implementéierung vum anere Programmierer huelen. Vläicht du bass an der Qualitéitssécherung a probéieren ze erméiglechen, firwat ee bestëmmten Deel vun enger Websäit ubitt oder d'Manéier wéi et ass.

Dir kënnt och e Ufänger sinn, fir ze léieren, wéi Dir Är eege Säiten codéiert a gesäit no verschidden echte Beispiller. Natierlech ass et méiglech, datt Dir net an enger vun dëse Kategorien falen an nëmme well d'Quell aus schéi Kuriositéit kucken.

Dir fannt hei drënner Instruktioune wéi Dir Quellcode an Äre Browser vu Choix kuckt.

Google Chrome

Läif op: Chrome OS, Linux, MacOS, Windows

D'Desktop-Version vun Chrome bidd 3 verschidde Methoden fir de Quellcode vun enger Säit ze gesinn, déi éischt a ganz einfachst mat der folgender Tastaturkombinatioun: CTRL + U ( COMMAND + OPTION + U op macOS).

Wann gedréckt ass, ännert dës Ofkierzung eng nei Browserbicher fir HTML an en anere Code fir déi aktive Säit z'änneren. Dëse Quelltext ass a kierzter Kodéierter a strukturéiert ginn an et gëtt méi einfach a kompartéiert a fënnt wat Dir sicht. Dir kënnt och dohin kommen andeems Dir den Text an der Adressbibliothek Chrome dréit, an der linker Säit vun der URL vun der Websäit anzeginn an de Schlëssel dréckt: Sichtquell : (dh Visualisatioun: https: // www .).

Déi drëtt Method ass iwwer Chrome Entwéckler Tools , déi Iech erméiglechen, eng méi déif Taucht an d'Code Page ze halen an och d'Tweak-on-the-Fly fir Testen an Entwécklung ze maachen. D'Interface Tools vum Developpement kënnen opgemaach ginn a geschlossen ginn duerch dës Tastatur kaafen: CTRL + SHIFT + I ( COMMAND + OPTION + I op macOS). Dir kënnt se och lancéieren, andeems Dir de folgende Wee kënnt.

  1. Klickt op den Haaptmenu vum Chrome an der Uewerfläch an déi riets a vertreten duerch dräi vertikal ausgeriicht Punkte.
  2. Gitt d'Lëscht drop zeréck, drénken de Mauszee méi iwwer d'Option méi Tools .
  3. Wann de Ënnerwiel erscheet, klickt op Developer Tools .

Android
Websäit vun der Quellcode am Chrome fir Android ass esou einfach wéi den Text an der Virahnung vun der Adress (oder der URL) ze kréien an ze suivéieren: view-source:. E Beispill fir dëst wier d' Sousquelle: https: // www. . HTML an aner Code vun der gewësser Säit ginn direkt an der aktiver Fënster zougemaach.

iOS
Obwuel et keng native Methoden fir Quellcode ze gesinn, déi Chrome op Ärem iPad, iPhone oder iPod touch benotze sinn, ass déi einfachst a wierksamst, fir eng Drëtt Partei z'erreechen, wéi d'Visual Source App.

Gitt op $ 0.99 am App Store. Source kucken opruffen Iech fir d'URL vun der Säit z'informéieren (oder kopéieren / enchpaken aus Chrome Adressadress, dat ass heiansdo de einfachste Wee fir ze huelen) an dat ass et. Zousätzlech fir HTML an en anere Quellcode ze weisen, huet d'App och Tabs déi eenzel Säitenpaak, de Document Object Model (DOM), wéi och d'Gréisst vun der Säit, Cookien an aner interessant Detailer weisen.

Microsoft Edge

Leeft op: Windows

Den Edge-Browser erlaabt Iech de Sourcecode vun der aktueller Säit duerch seng Developer Tools- Interface kucken, analyséieren a souguer ze manipuléieren. Fir dëse handlichen Toolset ze kréien kënnt Dir eng vun dësen Tastatur Ofkierzungen benotzen: F12 oder STRG + U. Wann Dir d'Maus eidel maacht, da klickt op de Menu um Knäppchen (dräi Punkte läit an der oberer rechter Ecke) a wielt d' F12 Developer Tools Option aus der Lëscht.

Nodeems d'dev-Tools fir d'éischte Kéier ausgefouert ginn, fügt d'Kante zwou zusätzlech Optiounen fir de Kontextmenü vum Browser erof. (Zougäng iwwer all Koppelen innerhalb vun enger Websäit): Element kontrolléieren a Quell kucken , liesen déi den Debugger Deel vun der dev Tools-Interface ass mat Quellcode populär.

Mozilla Firefox

Läif op: Linux, MacOS, Windows

Fir eng Quellcode vun der Säit an der Desktop-Version vum Firefox ze kucken, kënnt Dir op Ctrl + U ( COMMAND + U op macOS) op Ärer Tastatur dréckt, déi e neien Tab vun HTML an en anere Code fir déi aktive Websäit öffne soll.

Den Text an der Adressadressatioun vun Firefox ze schécken, direkt op der Säit lénks vun der URL vun der Säit, mécht déi selwecht Quell un der aktueller Reesebank z'erreechen: Visualisatioun: (dh Visualisatioun: https: // www.) .

Eng aner Manéier fir de Quellcode vun enger Säit ze kréien ass iwwer Firefox d'Entwéckler Tools, déi zougänglech sinn duerch d'Noutwécklung vun den folgenden Schrëtt.

  1. Klickt op den Haaptmenü Knop an der ieweschter Héicht vun Ärem Browserfenster a vertreten duerch dräi horizontalen Linnen.
  2. Wann de Pop-Out-Menü erscheint, klickt op den Developer "Schluss" Symbol.
  3. Den Kontextmenü vum Web Developer soll elo sichtbar sinn. Wielt d' Säitquelloptioun .

Firefox léisst Iech och Quellcode fir e bestëmmten Deel vun enger Säit kucken, fir et einfach ze isoléieren. Fir dat ze maachen, huele mir déi éischt Plaz déi Iech interesséiert mat der Maus. Klickt duerno op der rietser Maustast an kuckt weg d' Auswiel vu Source aus dem Kontextmenü vum Browser.

Android
Gitt Source-Code an der Android-Version vum Firefox erreechbar duerch d'Präfixe vun der URL vun der Websäit mat dem Text: View Source:. Zum Beispill, fir d'HTML Quell ze gesinn fir datt Dir den Text an der Adressebasis vum Browser eroflueden: Sousquelle: https: // www. .

iOS
D'recommandéiert Methode fir d'Websäit Quellcode vun Ärem Websäite op Ärem iPad, iPhone oder iPod touch ze gesinn ass duerch d'View Source App, verfügbar am App Store fir $ 0.99. Obwuel net direkt mat Firefox integréiert sinn, kënnt Dir en URL vum Browser an der App kopéieren an eegen eidel maachen, fir den HTML an aner Code mat der betreffender Säit z'entwéckelen.

Apple Safari

Läschte iOS an MacOS

iOS
Obwuel d'Safari fir iOS net déi Kapazitéit huet fir d'Säitquell vun der Säit ze gesinn, ass de Browser e ganz nahtlos mat der Visual Source App integriert - am App Store verfügbar fir $ 0.99.

Nodeems Dir dës Drëtt Partei app installéiert hutt, de Safari-Browser zréck a klickt op de Share Knop a läit op der ënnescht Säit vum Bildschierm an duerch e Feld an e Pfeil. Den iOS Share Sheet soll elo sichtbar sinn, d'Faarwen vun Ärer Safari-Fenette ze overlayen. Scrollen op déi richteg Säit a wielt déi Schaltfläche " View Source" .

Eng colorcodéiert, strukturéiert Representatioun vum aktuelle Säitenquellcode soll elo mat anere Registerkaarten agefouert ginn, fir datt se Säiten, Skripten a méi.

MacOS
Fir Quelltext vun enger Säit an der Desktop-Version vun Safari kucken ze kënnen, musst Dir fir seng Developpement Menong aktivéieren. D'Schrëtt hei ënnendrënner lafen duerch Aktivatioun vun dësem kache Menü a weisen mat enger HTML-Säit vun der Säit.

  1. Klickt op Safari am Menu vum Browser, deen am Uewerkäerjeng steet.
  2. Wann de Fënster opmaachen ersaat, wielt d'Option Virléiften .
  3. Safari's Präferenzen sollen elo sichtbar sinn. Klickt op d' Advanced " Ikon", op der lénker rietser Säit vun der leschter Zeil.
  4. Géint der Säit vun der erweiterte Rubrik ass eng Optioun markéiert Den Develop Develop menu an der Menübar , accompagnéiert vun engem eidelen Checkbox. Klickt op dës Këscht un, fir e Check markéieren an et ofzehuelen, a schloe d'Fënster vum Preferences unzefänken op de roude "x" fonnt an der ieweschter lénkser Ecke.
  5. Klickt op de Menü " Develop ", deen am Top vun der Écran läit.
  6. Wann de Fënster opmaachen musst, markéieren Page Source Quell . Dir kënnt och d'folgend Tastaturkombinatioun benotzen: COMMAND + OPTION + U.

Oper

Läif op: Linux, MacOS, Windows

Fir Quellcode vun der aktiver Websäit an den Opera-Browser ze gesinn benotzt de folgend Tastaturkombinatioun: CTRL + U ( COMMAND + OPTION + U op MacOS). Wann Dir léiwer d'Quell an der aktueller Reiter liwweren, lueden den Text an der Link vun der URL vun der Säit an der Adressbar an a klickt op Enter : Visualisatioun: (dh Source: https: // www. ).

D'Desktop-Versioun vum Opera erlaabt Iech och HTML-Quell, CSS an aner Elementer anhand vun sengen integréierten Developer-Tools . Fir dës Säit z'änneren, déi standardiséiert op der rietser Säit vun Ärem Haaptfënster ersat gëtt, dréckt d'folgend Tastaturkombinatioun: CTRL + SHIFT + I ( COMMAND + OPTION + I op macOS).

Opera 's Developer-Toolset ass och zougänglech mat den folgenden Schrëtt.

  1. Klickt op de Opera Logo, an der ieweschter lénkser Ecke vun Ärem Browserfenster.
  2. Gitt d'Lëscht drop zeréck, drénken de Mauszee méi iwwer d'Option méi Tools .
  3. Klickt op Developermenü .
  4. Klickt op den Opera Logo erëm.
  5. Wann de Dropdown-Menü ersat gëtt, schwätze de Maus iwwert den Developer .
  6. Wann de Ënnerwiel erscheet, klickt op Developer Tools .

Vivaldi

Et gi verschidde Manéiere fir d'Säitquell am Vivaldi Browser ze gesinn. Déi einfachst ass iwwer d' CTRL + U Tastatur virgeschloen, déi Code aus der aktiver Säit an enger neier Tab.

Dir kënnt och de folgenden Text un der Viraussetzunge vun der Säit URL drécken, déi den Quellcode an dëser Toxette weist: Visualisatioun:. E Beispill fir dëst wier d' Sousquelle: http: // www. .

Eng aner Methode ass duerch d'integréiert Developer-Tools vum Browser, accessibel duerch dréckt der CTRL + SHIFT + I Kombinatioun oder iwwer d'Programm " Developer Tools" am Menü Extras vum Browser - fonnt andeems Dir op 'V' Logo an der ieweschter lénkser Ecke klickt. Mat Hëllef vun den dev-Tools erlaabt eng vill méi detailléiert Analyse vun der Quell vun der Säit.