Kuidas vaadata veebibrauseri lähtekoodi igas brauseris

Teie lehel olev veebileht koosneb muuhulgas lähtekoodist. See on teie veebibrauseri teabe allalaaditav teave ja see, mida saate praegu lugeda.

Enamik veebibrauseritest näevad ette võimaluse näha veebisaidi lähtekoodi ilma lisatarkvara nõudmata, olenemata sellest, millist tüüpi seadet olete.

Mõned pakuvad isegi täiustatud funktsioone ja struktuuri, mis muudab lehe HTML-i ja muu programmitöö koodi hõlpsamaks lugeda.

Miks soovite lähtekoodi näha?

On mitmeid põhjuseid, miks võiksite näha lehe lähtekoodi. Kui olete veebiarendaja, võite proovida mõnda teise programmeerija erilist stiili või rakendust katte all. Võib-olla olete kvaliteedi tagamisel ja üritate kindlaks teha, miks teatud osa veebilehest muudab või käitub nii, nagu see on.

Võite olla ka algaja, kes püüab teada saada, kuidas oma lehti kodeerida ja otsida reaalmaailma näiteid. Loomulikult on võimalik, et te ei kuulu ühtegi sellesse kategooriasse ja soovite lihtsalt allikaid tundmatu uudishimu vaadata.

Allpool on toodud juhised selle kohta, kuidas vaadata lähtekoodi valitud brauseris.

Google Chrome

Käimas on: Chrome OS, Linux, macOS, Windows

Chrome'i töölaua versioon pakub kolme erinevat meetodit lehe lähtekoodi vaatamiseks, kõige esimene ja kõige lihtsam järgmisel kiirklahvil: CTRL + U ( COMMAND + OPTION + U on MacOS).

Kui seda nuppu vajutatakse, avaneb see otsetee uus brauseri vahekaart, mis kuvab aktiivse lehe HTML-i ja muud koodi. See allikas on värviline ja struktureeritud viisil, mis muudab lihtsamaks selle, et jagada ja leida seda, mida otsite. Samuti võite seal tulla, sisestades Chrome'i aadressiribale järgmise teksti, mis on lisatud veebi lehe URL-i vasakule küljele ja klõpsates sisestusklahvi : vaatamisallikas (st vaate lähte: https: // www .)

Kolmas meetod on Chrome'i arendaja tööriistade abil , mis võimaldavad teil lehe koodis sügavuti sukelduda ja testimiseks ja arendamiseks otsekohe kohandada. Arendaja tööriistade liidest saab selle klaviatuuri otseülekande abil avada ja sulgeda: CTRL + SHIFT + I ( COMMAND + OPTION + I macOS-is). Võite neid ka käivitada, võttes järgmise tee.

  1. Klõpsake Chrome'i peamenüü nuppu, mis asub paremas ülanurgas ja esindatud kolme vertikaalselt joondatud punktiga.
  2. Kui ilmub rippmenüü, hõljutage hiirekursorit valikul Rohkem tööriistu .
  3. Kui alammenüü kuvatakse, klikkige arendaja tööriistadel .

Android
Veebilehe allika vaatamine Chrome'is Android-i jaoks on sama lihtne, kui lisada sellele aadressile (või URL-ile) järgmine tekst ja esitada see: vaatamisallikas:. Selle näiteks võiks olla vaatamisallikas: https: // www. . HTML-i ja muud koodi asjaomasele lehele kuvatakse aktiivses aknas koheselt.

iOS-i
Ehkki teie iPadis, iPhone'is või iPod touchis Chrome'i lähtekoodi vaatamiseks lähtekoodi ei leidu, on kõige lihtsam ja tõhusam kasutada kolmanda osapoole lahendust, näiteks rakendust View Source (Kuva lähtekood).

App Store'is on saadaval $ 0,99, View Source näitab, et sisestate lehe URL-i (või kopeerige / kleepige see Chrome'i aadressiribalt, mis on mõnikord kõige lihtsam viis) ja see ongi. Lisaks HTML-i ja muu lähtekoodi näitamisele on rakendusel ka vahelehed, mis näitavad üksiku lehe vara, dokumendiobjekti mudeli (DOM), lehekülje suurust, küpsiseid ja muid huvitavaid üksikasju.

Microsoft Edge

Running on: Windows

Edge-brauser võimaldab teil vaadata, analüüsida ja isegi muuta praeguse lehe lähtekoodi oma arendaja tööriistade liidese kaudu. Selle käepärase tööriistariba avamiseks võite kasutada üht neist kiirklahvidest: F12 või CTRL + U. Kui soovite selle asemel hiire eelistada, klõpsake servase menüünupul (kolm paremas ülanurgas asuvat punkti) ja valige loendist F12 arendusvahendite valik.

Pärast Dev-tööriistade esmakordset käivitamist lisab Edge brauseri kontekstimenüüsse kaks lisavõimalust (saate seda teha, kui klõpsate hiire parema nupuga kõikjal veebisaidil): kontrollige elementi ja vaadake allikat , viimane, mis avab Dev eraldaja osa lähtekoodi asustatud tööriistade liides.

Mozilla Firefox

Käimas on: Linux, macOS, Windows

Lehe lähtekoodi vaatamiseks Firefoxi töölauaversioonis saate oma klaviatuuril vajutada klaviatuuril CTRL + U ( COMMAND + U macOS), mis avab uue vahekaardi, mis sisaldab aktiivset veebi lehte HTML-i ja muud koodi.

Järgmise teksti sisestamine Firefoxi aadressiribale, otse lehe URL-i vasakul, põhjustab sama allika kuvamise praeguse vahekaardi asemel: View-source: (st vaatlusallikas: https: // www.) .

Teine võimalus lehe lähtekoodi avamiseks on läbi Firefoxi arendaja tööriistade, millele on juurdepääs järgmiste sammude abil.

  1. Klõpsake peamenüü nuppu, mis asub teie brauseriakna paremas ülanurgas ja kujutab endast kolme horisontaalset joont.
  2. Kui ilmub hüpikmenüü, klõpsake ikoonil arendaja "mutrivõtmed".
  3. Veebiarenda kontekstimenüü peaks nüüd olema nähtav. Valige lehe allika valik.

Firefox lubab teil vaadata lehe teatud osa lähtekoodi, muutes probleemide isoleerimise lihtsaks. Selleks esmalt esile tõstke hiirega huvitav piirkond. Seejärel paremklõpsake ja valige brauseri kontekstimenüüst Vaata valikulist allikat .

Android
Firefoxi Android-versiooni lähtekoodi vaatamine on saavutatav veebilehe URL-i esmase lisamisega järgmise tekstiga: view-source:. Näiteks HTML-allika vaatamiseks, mille soovite lisada brauseri aadressiribale järgmise teksti: View-source: https: // www. .

iOS-i
Soovitatav viis veebi lehe lähtekoodi vaatamiseks oma iPadis, iPhone'is või iPod touchis on rakenduse View Source abil saadaval $ 0,99 eest App Storeis. Kuigi see ei ole otseselt Firefoxiga integreeritud, saate hõlpsalt URL-i brauserist rakendusse kopeerida ja kleepida, et levitada vastava lehega seotud HTML-i ja muud koodi.

Apple Safari

Töötab iOS-i ja macOS-i puhul

iOS-i
Kuigi Safari iOS-i jaoks ei hõlma vaikemaksega lehe allika kuvamist, on brauser integreerunud pigem sujuvalt rakenduse View Source abil - saadaval $ 0,99 eest App Storeis.

Pärast selle kolmanda osapoole rakenduse tagasipöördumist Safari brauserile ja koputage nuppu Jaga, mis asub ekraani alaosas ja mida tähistab ruudu ja üles nool. IOS-i jagamisleht peaks nüüd olema nähtav, kattes Safari akna alumises osas. Kerige paremale ja valige vaate Allikas nupp.

Nüüd kuvatakse aktiivse lehe lähtekoodi värviliselt kodeeritud kujundus koos muude vahekaartidega, mis võimaldavad teil vaadata lehe vara, skripte jms.

macOS
Safari töölaua versiooni lehe lähtekoodi vaatamiseks peate kõigepealt oma Arenduste menüü lubama. Allpool toodud sammud viivad läbi selle peidetud menüü aktiveerimise ja lehe HTML-i allika kuvamise.

  1. Klõpsake brauseri menüüs Safari brauseri menüüs, mis asub ekraani ülaosas.
  2. Kui ilmub rippmenüü, valige suvand Preferences ( eelistused ).
  3. Safari eelistused peaksid nüüd olema nähtavad. Klõpsake ikooni Advanced , mis asub ülemise rea paremas servas.
  4. Laiendatud jaotiste põhja on valiku menüükäsk Näita menüüd "Arendada" , millele on lisatud tühi ruut. Klõpsake seda kasti üks kord, et asetada märk sisse ja sulgeda eelistuste aken, klõpsates vasakus nurgas oleval punasel "x".
  5. Klõpsake ekraani ülaosas asuvat menüüd Arenda .
  6. Kui ilmub rippmenüü, valige Näita lehe allikaid . Selle asemel saab kasutada ka järgmist kiirklahvi: COMMAND + OPTION + U.

Opera

Käimas on: Linux, macOS, Windows

Opera brauseri aktiivsele lehele lähtekoodi vaatamiseks kasutage järgmist kiirklahvi: CTRL + U ( COMMAND + OPTION + U on MacOS). Kui eelistate praeguse vahekaardi allika laadimist, siis tippige aadressiriba lehe URL-i vasakul asuvat teksti ja vajutage Enter : view-source: (st vaatamisallikas: https: // www. )

Opera töölauaversioon võimaldab teil ka HTML-allika, CSS-i ja muude elementide vaatamist integreeritud arendaja tööriistade abil . Sellise liidese käivitamiseks, mis vaikimisi kuvatakse teie peamise brauseri akna paremas servas, vajutage järgmiste kiirklahvide abil: CTRL + SHIFT + I ( COMMAND + OPTION + I macOS-is).

Opera arendaja tööriistakomplekt on kättesaadav ka järgmiste sammude abil.

  1. Klõpsake Opera logo, mis asub teie brauseriakna ülemises vasakus nurgas.
  2. Kui ilmub rippmenüü, hõljutage hiirekursorit valikul Rohkem tööriistu .
  3. Klõpsake käsku Kuva arendaja menüü .
  4. Klõpsake Opera logo uuesti.
  5. Kui ilmub rippmenüü, hõljutage kursorit arendaja poole .
  6. Kui alammenüü kuvatakse, klõpsake arendaja tööriistadel .

Vivaldi

Vivaldi brauseri lehe allika vaatamiseks on mitu võimalust. Lihtsaim on CTRL + U klaviatuuri otsetee, mis kuvab aktiivsele lehele uue kaardi koodi.

Samuti saate lisada järgmise teksti lehe URL-i esiküljele, mis kuvab lähtekoodi käesoleval kaardil: vaatamisallikas:. Selle näide on vaat-allikas: http: // www. .

Teine meetod on brauseri integreeritud arendaja tööriistade abil, mida saab kasutada, vajutades CTRL + SHIFT + I kombinatsiooni või brauseri menüü Tööriistad abil Arendustööriistade valikut - leitud klõpsates vasakus nurgas oleval V-kujulisel kujul. Dev tööriistade kasutamine võimaldab lehe allika põhjalikumat analüüsi.