Die webblad wat u lees, bestaan onder meer uit bronkode. Dit is die inligting wat jou webblaaier afgelaai en vertaal in wat jy tans lees.
Die meeste webblaaiers bied die vermoë om die bronkode van 'n webblad te sien sonder enige bykomende sagteware wat benodig word, ongeag die tipe toestel waarop jy besig is.
Sommige bied selfs gevorderde funksionaliteit en struktuur aan, wat dit makliker maak om HTML en ander programmeringskodes op die bladsy te sien.
Hoekom sou jy die bronkode wil sien?
Daar is verskeie redes waarom jy dalk die bronkode van 'n bladsy wil sien. As jy 'n webontwikkelaar is, wil jy dalk 'n blik onder die omslag by 'n ander programmeerder se spesifieke styl of implementering kyk. Miskien is jy in gehalteversekering en probeer om vas te stel waarom 'n sekere deel van 'n webblad die manier waarop dit is, verrig of optree.
Jy kan ook 'n beginner wees wat probeer om te leer hoe om jou eie bladsye te kodeer en soek na voorbeelde van die regte wêreld. Natuurlik is dit moontlik dat jy nie in enige van hierdie kategorieë val nie en net bron wil sien uit pure nuuskierigheid.
Hieronder volg instruksies oor hoe om bronkode in u gekose leser te besigtig.
Google Chrome
Hardloop aan: Chrome OS, Linux, MacOS, Windows
Die desktop weergawe van Chrome bied drie verskillende metodes om die bronkode van 'n bladsy te besigtig, die eerste en eenvoudigste deur die volgende sleutelbordkortpaaie te gebruik: CTRL + U ( COMMAND + OPTION + U op macOS).
Wanneer dit ingedruk word, maak hierdie sneltoets 'n nuwe blaaier-oortjie wat HTML en ander kode vir die aktiewe bladsy vertoon. Hierdie bron is gekleurd en gestruktureer op 'n manier wat dit makliker maak om te kompartementeer en te vind waarna u soek. Jy kan ook daarheen kom deur die volgende teks in die Chrome-adresbalk in te voeg, aan die linkerkant van die URL van die webblad toegedraai en die Enter- sleutel te slaan: View-Source: (di, View-Source: https: // www .).
Die derde metode is via Chrome se ontwikkelaar-gereedskap , waardeur jy 'n dieper duik in die kode se kode kan gebruik, asook om dit te toets vir die toets en ontwikkelingsdoeleindes. Die koppelvlak vir ontwikkelaar gereedskap kan oopgemaak en gesluit word deur hierdie sleutelbordkortpaaie te gebruik: CTRL + SHIFT + I ( COMMAND + OPTION + I op macOS). U kan hulle ook begin deur die volgende pad te volg.
- Klik op Chrome se hoofkieslysknoppie, wat in die boonste regterhoek voorkom en verteenwoordig word deur drie vertikaal-uitgelegde kolletjies.
- As die aftrekkieslys verskyn, beweeg jou muiswyser oor die opsie Meer nutsprogramme .
- As die subkieslys verskyn, klik op Ontwikkelaar se gereedskap .
Android
As jy 'n bron van 'n webblad in Chrome vir Android kyk, is dit so eenvoudig om die volgende teks aan die voorkant van die adres (of URL) by te voeg en dit in te dien: View-Source:. 'N voorbeeld van hierdie sou wees sien-bron: https: / / www. . HTML en ander kode van die betrokke bladsy word onmiddellik vertoon in die aktiewe venster.
iOS
Terwyl daar geen inheemse metodes is om bronkode te gebruik met Chrome op jou iPad, iPhone of iPod touch nie, is die eenvoudigste en doeltreffendste om 'n derdeparty-oplossing soos die View Source-program te gebruik.
Beskikbaar vir $ 0.99 in die App Store, vra View Source u om die URL van die bladsy in te voer (of kopieer / plak dit uit Chrome se adresbalk, wat soms die eenvoudigste pad is om te neem) en dit is dit. Benewens HTML en ander bronkode, het die program ook oortjies wat individuele bladsybates, die dokumentobjekmodel (DOM), sowel as bladsygrootte, koekies en ander interessante besonderhede vertoon.
Microsoft Edge
Hardloop aan: Windows
Met die Edge-blaaier kan u die bronkode van die huidige bladsy besigtig, analiseer en selfs manipuleer deur die ontwikkelaar se hulpmiddelkoppelvlak . Om toegang tot hierdie handige gereedskapstel kan u een van hierdie sleutelbordkortpaaie gebruik: F12 of CTRL + U. As jy die muis verkies, klik dan op die menu-knoppie Edge (drie punte in die regter bovenhoek) en kies die opsie F12 Developer Tools uit die lys.
Nadat die dev-gereedskap vir die eerste keer aangebied word, voeg Edge twee bykomende opsies by die konteks kieslys van die blaaier (toeganklik met die regskliek op enige plek binne 'n webblad): Inspekteer element en View-bron , laasgenoemde wat die Debugger- gedeelte van die dev oopmaak gereedskap koppelvlak bevolk met bronkode.
Mozilla Firefox
Hardloop op: Linux, MacOS, Windows
As jy 'n bronkode van 'n bladsy wil sien, kan jy op Ctrl + U ( COMMAND + U op macOS) op jou sleutelbord druk. Dit sal 'n nuwe oortjie met HTML en ander kode vir die aktiewe webblad oopmaak.
As jy die volgende teks in die adresbalk van Firefox, direk aan die linkerkant van die URL van die bladsy, tik, sal dieselfde bron in die huidige oortjie vertoon word: in plaas van: bronkode: .
Nog 'n manier om toegang tot 'n bladsy se bronkode te verkry, is deur Firefox se ontwikkelaar gereedskap, toeganklik deur die volgende stappe te doen.
- Klik op die hoofkieslys knoppie, geleë in die boonste regterkantste hoek van jou blaaier venster en verteenwoordig deur drie horisontale lyne.
- Wanneer die uitkieslys verskyn, klik op die ontwikkelaar se "sleutel" -ikoon.
- Die Webontwikkelaar konteks kieslys moet nou sigbaar wees. Kies die opsie Page Bron .
Met Firefox kan jy ook die bronkode vir 'n spesifieke gedeelte van 'n bladsy besigtig, wat dit maklik maak om probleme op te los. Om dit te doen, beklemtoon eers die area waarin u belangstel met u muis. Klik dan met die rechtermuisknop en kies Kies seleksie bron in die konteks kieslys van die leser.
Android
Kyk bronkode in die Android-weergawe van Firefox is haalbaar deur die URL van die webblad te prefix met die volgende teks: View-Source:. As u byvoorbeeld die HTML-bron wil sien, stuur die volgende teks in die adresbalk van die blaaier: view-source: https: // www. .
iOS
Ons aanbevole metode om die bronkode van die webblad te sien op u iPad, iPhone of iPod touch, is deur die View Source-program beskikbaar in die App Store vir $ 0.99. Alhoewel dit nie direk met Firefox geïntegreer is nie, kan jy maklik 'n URL van die blaaier in die program kopieer en plak om die HTML en ander kode wat verband hou met die betrokke bladsy, bekend te maak.
Apple Safari
Hardloop op iOS en macOS
iOS
Alhoewel Safari vir iOS nie die vermoë bevat om die bladsybron as standaard te sien nie, integreer die blaaier eerder naatloos met die View Source-program - beskikbaar in die App Store vir $ 0.99.
Nadat u hierdie derdeparty-program geïnstalleer het, keer terug na die Safari-blaaier en tik op die Deel-knoppie, onderaan die skerm, en verteenwoordig deur 'n vierkant en 'n pyltjie. Die iOS-aandeelblad moet nou sigbaar wees, en die onderste helfte van jou Safari-venster moet oorlay. Blaai na regs en kies die View Source- knoppie.
'N Gekleurde, gestruktureerde voorstelling van die bronkode van die aktiewe bladsy moet nou vertoon word, saam met ander oortjies wat u toelaat om bladsybates, skrifte en meer te besigtig.
MacOS
Om die bronkode van 'n bladsy in die desktop-weergawe van Safari te sien, moet jy eers sy ontwikkelkieslys aktiveer. Die onderstaande stappe loop u deur hierdie versteekte spyskaart te aktiveer en die HTML-bron van 'n bladsy te vertoon.
- Klik op Safari in die blaaier kieslys, boaan die skerm.
- As die aftrekkieslys verskyn, kies die opsie Voorkeure .
- Safari se voorkeure moet nou sigbaar wees. Klik op die Gevorderde ikoon, geleë aan die heel regterkantste kant van die boonste ry.
- Teen die onderkant van die Gevorderde afdeling is 'n opsie gemerk Wys ontwikkel-kieslys in die menubalk , vergesel van 'n leë boks. Kliek op hierdie boks een keer om 'n vinkje in die blokkie te plaas, en maak die venster Voorkeure toe deur op die rooi 'x' in die boonste linkerhoek te klik.
- Klik op die menu Ontwikkel , aan die bokant van die skerm.
- As die aftrekkieslys verskyn, kies Wys bladsybron . U kan ook die volgende sleutelbordkortpaaie gebruik in plaas van: COMMAND + OPTION + U.
Opera
Hardloop op: Linux, MacOS, Windows
Om die bronkode van die aktiewe webblad in die Opera-blaaier te besigtig, gebruik die volgende sleutelbordkortpaaie: CTRL + U ( COMMAND + OPTION + U op macOS). As u die bron in die huidige oortjie wil laai, tik die volgende teks aan die linkerkant van die URL van die bladsy in die adresbalk en druk Enter : View-Source: (bv. View-Source: https: // www. ).
Die desktop weergawe van Opera laat jou ook toe om HTML-bron, CSS en ander elemente te sien deur die geïntegreerde ontwikkelaar gereedskap te gebruik . Om hierdie koppelvlak te laai, wat gewoonlik aan die regterkant van u hoofleservenster verskyn, druk die volgende sleutelbordkortpaaie: CTRL + SHIFT + I ( COMMAND + OPTION + I op macOS).
Opera se ontwikkelaar gereedskapstel is ook toeganklik deur die volgende stappe te doen.
- Klik op die Opera-logo, in die boonste linkerhoek van jou blaaier.
- As die aftrekkieslys verskyn, beweeg jou muiswyser oor die opsie Meer nutsprogramme .
- Klik op die ontwikkelaar se kieslys .
- Klik weer op die Opera-logo.
- As die aftrekkieslys verskyn, beweeg jou wyser oor Ontwikkelaar .
- Wanneer die subkieslys verskyn, klik op Ontwikkelaarhulpmiddels .
Vivaldi
Daar is verskeie maniere om bladsy-bron in die Vivaldi-blaaier te besigtig. Die eenvoudigste is via die sleutelbordkortpad CTRL + U , wat kode van die aktiewe bladsy in 'n nuwe oortjie aanbied.
U kan ook die volgende teks by die URL van die voorblad van die bladsy, wat die bronkode in die huidige oortjie vertoon: view-source:. 'N voorbeeld van hierdie sou wees sien-bron: http: // www. .
Nog 'n metode is deur die geïntegreerde ontwikkelaar gereedskap van die blaaier, toeganklik deur die Ctrl + SHIFT + I- kombinasie te druk of deur die opsie Ontwikkelaar Tools in die Tools- kieslys van die blaaier te vind. Dit word gevind deur op die 'V'-logo in die linker boonste hoek te klik. Deur die dev-gereedskap te gebruik, word 'n baie meer in-diepte analise van die bron se bron moontlik gemaak.