Ang web page na binabasa mo ay binubuo ng, bukod sa iba pang mga bagay, source code. Iyan ang impormasyon na ina-download ng iyong browser ng web at isinasalin sa iyong binabasa ngayon.
Ang karamihan sa mga web browser ay nagbibigay ng kakayahang makita ang source code ng isang web page na walang kinakailangang karagdagang software, gaano man anong uri ng device ang iyong nakabukas.
Ang ilan ay nag-aalok din ng mga advanced na pag-andar at istraktura, na ginagawang mas madali ang pag-aralang mabuti ang HTML at iba pang programming code sa pahina.
Bakit Gusto Mong Makita ang Source Code?
Mayroong ilang mga kadahilanan kung bakit maaaring gusto mong makita ang source code ng isang pahina. Kung ikaw ay isang web developer, marahil gusto mong kumuha ng pagsilip sa ilalim ng mga pabalat sa partikular na estilo o pagpapatupad ng isa pang programmer. Siguro ikaw ay nasa katiyakan ng kalidad at sinusubukan mong alamin kung bakit ang isang bahagi ng isang web page ay nagre-render o kumikilos sa paraang ito.
Maaari ka ring maging isang baguhan na sinusubukan mong malaman kung paano i-code ang iyong sariling mga pahina at hinahanap ang ilang mga halimbawa sa real-world. Siyempre, posible na hindi ka mahuhulog sa alinman sa mga kategoryang ito at gusto mong tingnan ang pinagmumulan ng kawalang kuryusidad.
Nakalista sa ibaba ang mga tagubilin kung paano tingnan ang source code sa iyong browser na gusto.
Google Chrome
Tumatakbo sa: Chrome OS, Linux, macOS, Windows
Nag-aalok ang desktop na bersyon ng Chrome ng tatlong magkakaibang pamamaraan para sa pagtingin sa source code ng pahina, ang una at pinakamadali sa pamamagitan ng paggamit ng sumusunod na keyboard shortcut: CTRL + U ( COMMAND + OPTION + U on macOS).
Kapag pinindot, bubukas ang shortcut na ito ng isang bagong tab ng browser na nagpapakita ng HTML at iba pang code para sa aktibong pahina. Ang pinagmulan na ito ay kulay-naka-code at nakabalangkas sa isang paraan na ginagawang mas simple upang kumpahin at hanapin kung ano ang iyong hinahanap. Maaari ka ring makarating doon sa pamamagitan ng pagpasok ng sumusunod na teksto sa address bar ng Chrome, na nakadugtong sa kaliwang bahagi ng URL ng webpage, at pagpindot sa Enter key: view-source: (ie, view-source: https: // www .).
Ang ikatlong paraan ay sa pamamagitan ng mga tool ng nag-develop ng Chrome, na nagbibigay-daan sa iyo upang kumuha ng mas malalim na pagsisid sa code ng pahina pati na rin ang pag-tweak sa on-the-fly para sa mga layunin ng pagsubok at pagpapaunlad. Maaaring buksan at isara ang interface ng mga tool ng developer sa pamamagitan ng paggamit ng keyboard shortcut na ito: CTRL + SHIFT + I ( COMMAND + OPTION + I sa macOS). Maaari mo ring ilunsad ang mga ito sa pamamagitan ng pagkuha ng sumusunod na landas.
- Mag-click sa pindutan ng pangunahing menu ng Chrome, na matatagpuan sa kanang sulok sa itaas at kinakatawan ng tatlong mga tuldok na nakahanay sa patayo.
- Kapag lumilitaw ang drop-down na menu, i-hover ang iyong mouse cursor sa ibabaw ng Higit pang mga opsyon sa tool .
- Kapag lumilitaw ang sub-menu, mag-click sa Mga tool ng Developer .
Android
Ang pagtingin sa pinagmulan ng web page sa Chrome para sa Android ay kasing simple ng pagdagdag ng sumusunod na teksto sa harap ng kanyang address (o URL) at pagsusumite nito: view-source:. Ang isang halimbawa nito ay pagtingin-pinagmulan: https: // www. . Ang HTML at iba pang code mula sa pahinang pinag-uusapan ay agad na ipapakita sa aktibong window.
iOS
Habang walang mga katutubong pamamaraan para sa pagtingin sa source code gamit ang Chrome sa iyong iPad, iPhone o iPod touch, ang pinakasimpleng at pinaka-epektibo ay upang magamit ang isang third-party na solusyon tulad ng View Source app.
Magagamit para sa $ 0.99 sa App Store, tinitingnan ng Tingnan ng Source mong ipasok ang URL ng pahina (o kopyahin / i-paste ito mula sa address bar ng Chrome, na kung minsan ay ang pinakasimpleng landas na dadalhin) at iyan. Bilang karagdagan sa pagpapakita ng HTML at iba pang source code, ang app ay mayroon ding mga tab na nagpapakita ng mga indibidwal na pahina ng mga asset, ang Document Object Model (DOM), pati na rin ang sukat ng pahina, cookies at iba pang kagiliw-giliw na mga detalye.
Microsoft Edge
Pagpapatakbo sa: Windows
Hinahayaan ka ng Edge browser na tingnan, pag-aralan at manipulahin mo pa ang source code ng kasalukuyang pahina sa pamamagitan ng interface ng Mga Tool ng Nag-develop nito. Upang ma-access ang madaling gamitin na toolset maaari mong gamitin ang isa sa mga shortcut sa keyboard na ito: F12 o CTRL + U. Kung gusto mo ang mouse sa halip, mag-click sa pindutan ng menu ng Edge (tatlong tuldok na matatagpuan sa itaas na kanang sulok) at piliin ang opsyon ng Mga Tool ng Developer ng F12 mula sa listahan.
Matapos ang mga tool dev ay tatakbo sa unang pagkakataon, nagdadagdag ang Edge ng dalawang karagdagang mga opsyon sa menu ng konteksto ng browser (mapupuntahan sa pamamagitan ng pag-click sa kanan sa kahit saan sa loob ng isang web page): Tingnan ang elemento at Tingnan ang pinagmulan , ang huli na bubukas ang Debugger na bahagi ng dev mga interface ng tool na populated na may source code.
Mozilla Firefox
Tumatakbo sa: Linux, macOS, Windows
Upang tingnan ang source code ng pahina sa desktop na bersyon ng Firefox maaari mong pindutin ang CTRL + U ( COMMAND + U sa macOS) sa iyong keyboard, na magbubukas ng bagong tab na naglalaman ng HTML at iba pang code para sa aktibong web page.
Ang pag-type ng sumusunod na teksto sa address bar ng Firefox, nang direkta sa kaliwa ng URL ng pahina, ay magdudulot ng parehong mapagkukunan na ipakita sa kasalukuyang tab sa halip: view-source: (ie, view-source: https: // www.) .
Ang isa pang paraan upang ma-access ang source code ng pahina ay sa pamamagitan ng mga tool ng developer ng Firefox, naa-access sa pamamagitan ng pagkuha ng mga sumusunod na hakbang.
- Mag-click sa pindutan ng pangunahing menu, na matatagpuan sa itaas na kanang sulok ng window ng iyong browser at kinakatawan ng tatlong pahalang na linya.
- Kapag lumitaw ang menu ng pop-out, mag-click sa icon ng Developer na "wrench".
- Ang menu ng context ng Web Developer ay dapat na makita ngayon. Piliin ang pagpipiliang Pinagmulan ng Pahina .
Hinahayaan ka rin ng Firefox na tingnan mo ang source code para sa isang partikular na bahagi ng isang pahina, na ginagawang mas madaling ihiwalay ang mga isyu. Upang gawin ito, munang i-highlight ang lugar na interesado ka sa iyong mouse. Susunod, i-right-click at piliin ang View Source Pinagmulan mula sa menu ng konteksto ng browser.
Android
Ang pagtingin sa source code sa bersyon ng Android ng Firefox ay matatamo sa pamamagitan ng prefix ng URL ng web page na may sumusunod na teksto: view-source:. Halimbawa, upang tingnan ang pinagmulan ng HTML para sa nais mong isumite ang sumusunod na teksto sa address bar ng browser: view-source: https: // www. .
iOS
Ang aming inirekumendang paraan para sa pagtingin sa source code ng web page sa iyong iPad, iPhone o iPod touch ay sa pamamagitan ng View Source app, na magagamit sa App Store para sa $ 0.99. Habang hindi isinama nang direkta sa Firefox, maaari mong madaling kopyahin at i-paste ang isang URL mula sa browser papunta sa app upang maibunyag ang HTML at iba pang code na nauugnay sa pahina na pinag-uusapan.
Apple Safari
Tumatakbo sa iOS at macOS
iOS
Bagama't hindi kasama sa Safari para sa iOS ang kakayahang tingnan ang pinagmulan ng pahina bilang default, ang browser ay magkasama sa halip ng walang putol sa app ng View Source - magagamit sa App Store para sa $ 0.99.
Pagkatapos i-install ang third-party na app bumalik sa browser ng Safari at mag-tap sa pindutan ng Ibahagi, na matatagpuan sa ibaba ng screen at kinakatawan ng isang parisukat at isang up arrow. Ang iOS Share Sheet ay dapat na nakikita na ngayon, overlaying ang mas mababang kalahati ng iyong Safari window. Mag-scroll sa kanan at piliin ang pindutan ng View Source .
Ang isang kulay na naka-code, nakabalangkas na representasyon ng source code ng aktibong pahina ay dapat na ipapakita, kasama ang iba pang mga tab na nagbibigay-daan sa iyo upang tingnan ang mga asset ng pahina, mga script at higit pa.
Mac OS
Upang tingnan ang source code ng isang pahina sa desktop na bersyon ng Safari, kinakailangan mo munang paganahin ang menu na Itinayo nito. Ang mga hakbang sa ibaba ay lumalakad sa iyo sa pamamagitan ng pag-activate sa nakatagong menu na ito at pagpapakita ng pinagmulang HTML ng pahina.
- Mag-click sa Safari sa menu ng browser, na matatagpuan sa tuktok ng screen.
- Kapag lumilitaw ang drop-down na menu, piliin ang opsyon na Mga Kagustuhan .
- Ang mga Kagustuhan ng Safari ay dapat na makita ngayon. Mag-click sa Advanced na icon, na matatagpuan sa kanang kanang bahagi ng tuktok na hilera.
- Patungo sa ilalim ng seksyon ng Advanced ay isang opsyon na may label na Ipakita ang Ipakita ang menu sa menu bar , sinamahan ng isang walang laman na checkbox. Mag-click sa kahon na ito nang isang beses upang maglagay ng check mark dito, at isara ang window ng Mga Kagustuhan sa pamamagitan ng pag-click sa pulang 'x' na matatagpuan sa itaas na sulok sa kaliwa.
- Mag-click sa menu ng Paunlad , na matatagpuan sa tuktok ng screen.
- Kapag lumilitaw ang drop-down na menu, piliin ang Ipakita ang Pinagmulang Pahina . Maaari mo ring gamitin ang sumusunod na keyboard shortcut sa halip: COMMAND + OPTION + U.
Opera
Tumatakbo sa: Linux, macOS, Windows
Upang tingnan ang source code mula sa aktibong web page sa Opera browser gamitin ang sumusunod na shortcut sa keyboard: CTRL + U ( COMMAND + OPTION + U sa macOS). Kung mas gusto mong mai-load ang pinagmulan sa kasalukuyang tab sa halip, i-type ang sumusunod na teksto sa kaliwa ng URL ng pahina sa loob ng address bar at pindutin ang Enter : view-source: (ie, view-source: https: // www. ).
Pinapayagan ka rin ng desktop na bersyon ng Opera na tingnan ang HTML source, CSS at iba pang mga elemento sa pamamagitan ng paggamit ng mga pinagsamang mga tool ng developer nito . Upang ilunsad ang interface na ito, na lilitaw ang default sa kanang bahagi ng iyong pangunahing window ng browser, pindutin ang sumusunod na shortcut sa keyboard: CTRL + SHIFT + I ( COMMAND + OPTION + I sa macOS).
Available din ang toolset ng developer ng Opera sa pamamagitan ng pagkuha ng mga sumusunod na hakbang.
- Mag-click sa logo ng Opera, na matatagpuan sa itaas na kaliwang sulok ng window ng iyong browser.
- Kapag lumilitaw ang drop-down na menu, i-hover ang iyong mouse cursor sa ibabaw ng Higit pang mga opsyon sa tool .
- Mag-click sa Ipakita ang menu ng nag-develop .
- Mag-click muli sa logo ng Opera.
- Kapag lumilitaw ang drop-down na menu, i-hover ang iyong cursor sa Developer .
- Kapag lumilitaw ang sub-menu, mag-click sa Mga Tool ng Developer .
Vivaldi
Maraming mga paraan upang tingnan ang pinagmulan ng pahina sa loob ng browser ng Vivaldi. Ang pinakasimpleng ay sa pamamagitan ng shortcut sa keyboard ng CTRL + U , na nagtatanghal ng code mula sa aktibong pahina sa isang bagong tab.
Maaari mo ring idagdag ang sumusunod na teksto sa harap ng URL ng pahina, na nagpapakita ng source code sa tab na kasalukuyang: view-source:. Ang isang halimbawa nito ay pagtingin-pinagmulan: http: // www. .
Ang isa pang paraan ay sa pamamagitan ng pinagsama-samang mga tool ng nag-develop ng browser, mapupuntahan sa pamamagitan ng pagpindot sa kumbinasyon ng CTRL + SHIFT + ko o sa pamamagitan ng pagpipiliang Mga Tool ng Developer sa menu ng Tools ng browser - na natagpuan sa pamamagitan ng pag-click sa logo ng 'V' sa kanang sulok sa kaliwa. Ang paggamit ng mga tool dev ay nagbibigay-daan para sa isang mas malalim na pagtatasa ng pinagmulan ng pahina.