Hoe kin it Boarne koade fan in webside sjen yn Alle Browser

De webside dy't jo lêze is makke, ûnder oaren, boarne koade. Dat is de ynformaasje dy't jo webblêder ynlade en oersetten yn wat jo no lêze.

De measte webbrowsers biede de mooglikheid om de boarne koade fan in webside te sjen mei gjin ekstra software nedich, lykas hokker type fan apparaat jo binne.

Guon sels biede ekstra funksjonaliteit en struktuer oan, en makket it makliker om HTML en oare programmearringsskoade op 'e side te fertsjinjen.

Wêrom wolle jo de Boarne koade sjen?

Der binne ferskillende redenen wêrom't jo in boarne koade fan in side sjen wolle. As jo ​​in webûntwikkelder binne, miskien jo graach in pyk ûnder de dekken te nimmen by in bepaalde styl of útfiering fan in oare programm. Miskien binne jo yn kwaliteitssoarch en besykje te lêzen wêrom in bepaald diel fan in webside rendering of behannelje hoe't it is.

Jo kinne ek in beginner wêze, dy't besykje te learen hoe jo jo eigen siden te bepalen en sykje op guon echte wrâldbeispiele. Fansels is it mooglik dat jo net yn ien fan sokke kategoryen falle en gewoan de boarne sjen wolle fan skerpe nijsgjirrigens.

Hjirûnder steane ynstruksjes oer hoe jo de boarne koade te besjen yn jo browser fan kar.

Google Chrome

Laad op: Chrome OS, Linux, MacOS, Windows

De buroblêd ferzje fan Chrome biedt trije ferskillende metoaden foar it besjen fan in side-boarne koade, de earste en meast ienfâldich troch te brûken mei de folgjende toetsebining: CTRL + U ( COMMAND + OPTION + U op macOS).

As jo ​​drukke, iepenet dizze fluchtoets in nije blêdbalke mei HTML en oare koade foar de aktive side. Dizze boarne is kleurskodearre en strukturearre op in manier dy't makket it ienfâldiger om kompartearjen te finen en te finen wat jo sykje. Jo kinne dêr dan ek trochgean mei de folgjende tekst yn Chrome's adresbalke, befeilige oan 'e lofter side fan' e URL fan 'e webside en beskoart de Enter- toets: werje source: (bgl. Wer-boarne: https: // www .).

De tredde metoade is fia Chrome's ûntwikkelders ark , sadat jo in djipper dûbel yn 'e koade fan' e side meitsje kinne, en ek it toetsen te meitsjen foar testen en ûntwikkeling. De ynterface foar it ûntwikkelwurkynwurk kin iepenje en sluten wurde troch dizze toetseboerdskeksel te brûken: CTRL + SHIFT + I ( COMMAND + OPTION + I op macOS). Jo kinne se ek starte mei de folgjende paad.

  1. Klik op de haadmenu Chrome fan Chrome, yn 'e boppeste rjochtshoeke en fertsjintwurdige troch trije vertike-alignige punten.
  2. As it dellûk menu ferskynt, ferpleatse jo mûsoanwizer oer de mear tools- opsje.
  3. As it submenu ferskynt, klikje op Developer-ark .

Android
It werjaan fan de boarne fan in webside yn Chrome foar Android is sa maklik as de folgjende tekst oan 'e foarkant fan' e adres (of URL) te ferpleatse en it yntsjinjen: werjefte source:. In foarbyld dêrfan soe sicht-boarne wêze: https: // www. . HTML en oare koade fan 'e side yn' e fraach wurde fuortendaliks werjûn yn it aktive finster.

iOS
Wylst gjin natuermethoden binne foar it besjen fan boarne koade brûkend Chrome op jo iPad, iPhone of iPod touch, de simpelste en effektyfste is om in oplossing fan tredde partijen te brûken lykas de View Source app.

Beskikber foar $ 0.99 yn 'e App Store, sjogge Boarne jo nei de URL's fan' e side (of kopiearje of paste it fan 'e adresbalke fan Chrome, dy't somt it ienfâldige paad is te nimmen) en dat is it. Neist it sjen fan HTML en oare boarne koade, hat de app ek ljeppers dy 't yndividuele sideaksjes, it Document Object Model (DOM), en ek de sidegrutte, cookies en oare ynteressante details sjen.

Microsoft Edge

Running on: Windows

De Edge-blêder lit jo de boarne koade fan de hjoeddeiske siden besjen, analysearje en sels trochgeane troch har interface fan Developer Tools . Om tagong te krijen ta dizze handige toolset kinne jo ien fan dizze toetseboerd fluchtoetsen brûke: F12 of CTRL + U. As jo ​​de mûs yn foarkar foarkomme, klikje op Menu's knop knop (trije punten lizze yn 'e boppeste rjochtshoeke) en kieze de opsje F12 Developer Tools út' e list.

Nei't de dev-ynstruminten foar it earst útfiert wurde, addt Edge oan twa opsjes opnij yn it kontekstmenu fan it blêder (berikber troch rjochts te klikken oeral yn in webside): Selektearje elemint en werje source , de lêste dy't de Debugger- diel fan 'e dev iepent ynterface foar ynstruminten populêr mei boarne koade.

Mozilla Firefox

Running on: Linux, macOS, Windows

Om in side 's boarne koade te besjen yn' e buroblêd ferzje fan Firefox kinne jo op jo toetseboerd CTRL + U ( COMMAND + U ) drukke, dy't in nije ljepper iepenet mei HTML en oare koade foar de aktive webside.

As jo ​​de folgjende tekst yn 'e adresbalke ynfierje, fuortendaliks nei links fan' e side, sil de selde boarne dúdlik meitsje yn 'e aktive ljepper ynstelle: view-source: (ie, sjoch-boarne: https: // www.) .

In oare manier om tagong te krijen ta in side fan 'e side is fia Firefox's ûntwikkelders, tagonklik mei de folgjende stappen.

  1. Klik op de haadmenu knop, lizze yn 'e boppeste rjochthoeke fan jo blêder finster en fertsjintwurdige troch trije horizontale rigels.
  2. As it pop-out-menu ferskynt, klikje jo op 'e knop " Untwikkel ".
  3. It kontekstmenu fan 'e web ûntwikkelders moat no sichtber wêze. Selektearje de side- boarne opsje.

Firefox lit jo ek boarne koade foar in bepaalde diel fan in side sjen, en makket it maklik om problemen te isolearjen. Om dat te dwaan, markearje earst it gebiet dat jo belangend binne mei jo mûs. Druk dêrnei op 'e rjochter klik en kieze seleksje fan' e boarne út it kontekstmenu fan 'e browser.

Android
Besjoch boarne koade yn 'e Android ferzje fan Firefox is berikber mei it prefixearjen fan de URL fan' e webside mei de folgjende tekst: view-source :. Om bygelyks de HTML-boarne wer te jaan, kinne jo de folgjende tekst yn 'e adresbalke ynbliuwe: besjen-boarne: https: // www. .

iOS
Us oanbefellende metoade foar it besjen fan webside fan webside op jo iPad, iPhone of iPod touch is troch de View Source app, beskikber yn it App Store foar $ 0.99. Wylst jo net direkt mei Firefox yntegrearre wurde, kinne jo maklik kopiearje en in URL fan de blêder ynstelle yn 'e app om de HTML-adres en oare koade te ferbinen mei de side yn' e fraach.

Apple Safari

Running op iOS en macOS

iOS
Hoewol Safari foar iOS net befettet de mooglikheid om side-boarne standert te begjinnen, makket de browser earder flugge yntegreare mei de View Source app - beskikber yn it App Store foar $ 0.99.

Nei it ynstallearjen fan dizze applikaasje fan tredden gean werom nei de Safari-blêder en knap de knop Share op 'e boaiem fan it skerm en fertsjintwurdige troch in fjouwerkante en in pylk op. It iOS Share Sheet moat no sichtber wêze, de leechste helte fan jo Safari-finster oerlizze. Rôlje nei rjochts en selektearje de knop ' View Source' .

In kleurskodearre, strukturearre fertsjintwurdiging fan 'e boarne koade aktive side moat no werjûn wurde, lykas oare ljepblêden dy't jo siden befetsje, skripts en mear sjen kinne.

macOS
Om boarne koade fan in side te sjen yn 'e buroblêd ferzje fan Safari, moatte jo earst it Untwikselmenu ynskeakelje. De ûndersteande stappen spylje jo troch dit ferburgen menu te aktivearjen en de HTML-boarne fan 'e side werjaan.

  1. Klik op Safari yn it blêdermenu, boppe-oan it skerm.
  2. As it dellûk menu ferskynt, selektearje de opsjeFoarkarren.
  3. Safari's Foarkarren moatte no sichtber wêze. Klikje op it Avansearre ikoan, lizzend oan de fierrige kant fan 'e toprige.
  4. Nei de boaiem fan 'e Avansearre haadstik is in opsje markearre Untwikkelmenu yn de menubalke , mei bepaald troch in lege checkbox. Klik op dizze fakje ien kear om in markearring yn it plak te pleatsen, en slute it finstere finster troch te klikken op 'e reade' x 'fûn yn' e boppeste linke hoeke.
  5. Klikje op it Untwikselmenu, boppe-op it skerm.
  6. As it dellûk menu ferskynt, selektearje Side-side-boarne sjen litte . Jo kinne ek de folgjende toetskombinaasje brûke: COMMAND + OPTION + U.

Opera

Running on: Linux, macOS, Windows

Om it boarne koade fan 'e aktive webside te besjen yn' e Opera-blêder brûke de folgjende toetskombinaasje: CTRL + U ( COMMAND + OPTION + U op macOS). As jo ​​foarkar leverje de boarne yn de aktive ljepper ynstelle, typ de folgjende tekst nei links fan 'e URL's yn' e adresbalke en klikke op Enter : besjen-boarne: (bgl. Besjen-boarne: https: // www. ).

De buroblêd ferzje fan Opera lit jo ek HTML-boarne, CSS en oare eleminten sjen troch har yntegreare ûntwikkelders ark te brûken . Om dizze interface te starten, dy't standert op 'e rjochterkant fan jo wichtige blêder finster ferskynt, drukke de folgjende toetskombinaasje: CTRL + SHIFT + I ( COMMAND + OPTION + I op macOS).

Opera's ûntwikkelerswurkset is ek tagonklik troch te nimmen fan de neikommende stappen.

  1. Klik op it Opera logo, lizzend yn 'e boppeste linkhoeke fan jo blêder finster.
  2. As it dellûk menu ferskynt, ferpleatse jo mûsoanwizer oer de mear tools- opsje.
  3. Klikje op Untwikkel menu sjen litte .
  4. Klik op it Opera logo opnij.
  5. As it dellûk menu ferskynt, ferpleatse jo rinner oer Developer .
  6. As it submenu ferskynt, klikje jo op Developer Tools .

Vivaldi

Der binne meardere wizen om side-boarne te besjen binnen de browser fan Vivaldi. De ienfâldige is fia de CTRL + U toetseboerd fluchtoets, dy't koade fan 'e aktive side yn in nije ljepper presintearret.

Jo kinne ek de folgjende tekst oan 'e foarkant fan' e URL fan de side taheakje, dy't de boarne koade werjûn yn 'e presintaasjebalke: view-source:. In foarbyld dêrfan soe sicht-boarne wêze: http: // www. .

In oare metoade is fia de yntegrale ynstellingen fan de browser, tagonklik troch te drukken op de CTRL + SHIFT + I- kombinaasje of troch de opsje Developer Tools yn it menu 's Extras fan' e blêder 'fûn troch te klikken op it' V '-logo yn' e boppe linker hoeke. Mei help fan de dev-arken soarget foar in folle mear ynterfaasje fan 'e boarne fan' e side.