Paano tingnan ang code ng pahina. Ito ang Google Chrome. Paano tingnan ang source code ng isang html page sa isang Google browser

" Ang parehong punto ay nasa menu ng konteksto, na kung i-click mo i-right click teksto ng mouse mga pahina. Maaari mo ring gamitin ang keyboard shortcut na CTRL + U. Ang Mozilla FireFox ay hindi gumagamit ng mga panlabas na programa - orihinal code mga pahina na may syntax highlighting ay bubuksan sa isang hiwalay na browser window.

SA Internet browser Explorer, i-click ang seksyong "File" sa menu at piliin ang "I-edit sa Notepad." Sa halip na ang pangalang Notepad, maaaring magsulat ng ibang pangalan, itinalaga mo ito sa mga setting ng browser upang tingnan ang orihinal code A. Sa pag-click mga pahina gamit ang kanang pindutan ng mouse, lilitaw ang isang menu ng konteksto, na mayroon ding item na nagbibigay-daan sa iyong buksan ang pinagmulan code mga pahina sa panlabas na programa- "Tingnan ang HTML- code A".

SA Opera browser buksan ang menu, pumunta sa seksyong "Pahina" at magkakaroon ka ng pagkakataong piliin ang item na "Source" sa subsection na "Mga Tool sa Pag-unlad" code"o ang item na "Orihinal code frame." Ang pagpipiliang ito ay itinalagang mainit Mga CTRL key+ U at CTRL + SHIFT + U ayon sa pagkakabanggit. Sa isang menu ng konteksto na nakatali sa isang pag-click mga pahina right-click, mayroon ding item na “Initial code" Pinagmulan ng Opera mga pahina sa isang panlabas na programa na itinalaga sa OS o sa mga setting ng browser para sa pag-edit ng mga HTML file.

Browser Google Chrome nang walang pag-aalinlangan ay mayroon ang pinakamahusay na organisasyon tinitingnan ang orihinal code A. Sa pamamagitan ng pag-right click sa iyong mouse, maaari mong piliin ang View code A mga pahina"at pagkatapos ay ang source code na may syntax highlighting ay mabubuksan sa isang hiwalay na tab. O maaari mong piliin ang linyang "View" sa parehong menu code elemento" at sa parehong tab ay magbubukas ng dalawang karagdagang mga frame kung saan maaari mong suriin ang HTML at CSS code elemento mga pahina. Sasagot ang browser sa cursor na gumagalaw sa mga linya code at, pag-highlight ng mga elemento sa page na tumutugma sa seksyong ito ng HTML code A.

Pinangangalagaan ng mga developer ng browser ang kaginhawahan ng mga gumagawa ng mga site na nagbubukas sa parehong mga browser na ito, katulad ng mga webmaster. Nagdagdag sila karaniwang mga tampok mga tool ng developer na nagpapadali sa pagbukas at tingnan ang source code ng pahina ng site sa browser: HTML, CSS, JavaScript (JS), kumuha ng iba't ibang kapaki-pakinabang na data tungkol sa istruktura ng site, i-navigate ito teknikal na pagsusuri. Sa pangkalahatan, makakita ng maraming kapaki-pakinabang na bagay.

Siyempre, ang mga tool na ito ay ginagamit hindi lamang ng mga tagalikha ng website para sa trabaho, kundi pati na rin ordinaryong gumagamit, na pinapayagan ka ng source code na tingnan ang iba't ibang kapaki-pakinabang na data.

Mula sa artikulong ito matututunan mo kung paano tingnan ang source code ng isang pahina ng website sa isang browser (kung paano buksan ang HTML, CSS, JavaScript code site).

Paano magbukas ng source code ng page sa isang browser

Mayroong dalawang paraan upang buksan ang source code ng isang web page sa isang browser:

Paggamit ng mga hot key;
Buksan mula sa menu ng konteksto.

Ctrl+U– isang kumbinasyon ng hotkey upang tingnan ang source code ng buong pahina ng site sa isang hiwalay na bagong window. Standard para sa lahat ng browser: Google Chrome, Opera, Mozilla Firefox, Yandex browser, IE.

Maaari mo ring ipasok ang mga tool ng developer tulad ng sumusunod:

Para mabilis mahanap kinakailangang code, salita o teksto sa pahina, maaari mong gamitin ang karaniwang kumbinasyon ng hotkey sa paghahanap para sa lahat ng browser: Ctrl + G.

Mga tagubilin sa video:

Tingnan ang code ng elemento | galugarin ang elemento | siyasatin ang elemento

Kung biglang kailangan mong tingnan hindi ang buong source code, ngunit ipakita lamang ang isang hiwalay na bahagi nito, ang ilang lugar sa pahina, kung gayon ang nakaraang tool ay hindi gagana. Para sa layuning ito, ang mga tool ng developer ay may isa pang function, na tatalakayin sa ibaba.

Paano tingnan ang code ng isang elemento sa isang pahina:

Maaari mo ring gamitin ang mga keyboard shortcut sa mabilis na pag-access upang siyasatin ang elemento.

Mga Hotkey (mga pindutan):

Google Chrome: Ctrl+Shift+I at Ctrl+Shift+C

Opera: Ctrl+Shift+I at Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I at Ctrl+Shift+C

Yandex browser: Ctrl+Shift+I at Ctrl+Shift+C

Pagkatapos ng mga hakbang na ito, magbubukas ang orihinal na file sa parehong window ng browser. web code mga pahina:

Ang lahat ng HTML code ay nasa malaking kaliwang column. A Mga istilo ng CSS- sa kanan.

Ang bentahe ng pamamaraang ito, siyempre, ay ang gumagamit ay may pagkakataon na baguhin ang source code at i-edit ang mga estilo. Iyon ay, maaari mong i-edit ang mga estilo sa site at makita kung ano ang magiging hitsura nito sa ilang mga estilo, nang hindi kinakailangang agad na gumawa ng mga pagbabago sa mga file na matatagpuan sa mga server ng pagho-host. Upang baguhin o idagdag code ng programa, kailangan mong i-double click sa ang kinakailangang fragment o balangkas. Siyempre, ang pagwawasto ng code sa browser ay hindi gagawin sa mga hosting server. Samakatuwid, sa hinaharap, sa anumang kaso, kakailanganin mong kopyahin ang code na ito at isulat ito sa mga file.

Ang pagtuturo ng video na ito ay naglalarawan nang detalyado at nagpapakita kung paano magtrabaho kasama ang mga tool ng developer:

Ganun lang, online lang, sa iyong browser, maaari mong tingnan ang source code ng page ng site, kumuha ng pangunahing data tungkol sa HTML at CSS code, baguhin at kopyahin ang mga ito, nang hindi kinakailangang i-download ang mga file ng site na ito sa iyong computer .

Sa pamamagitan ng paraan, ang mga walang karanasan na gumagamit ng Internet na nagbago ng code ng pahina at umaasa na mai-save ito ay mabibigo. Pagkatapos ng lahat, pagkatapos i-refresh ang pahina, mawawala ang lahat ng pagbabago dito. Hindi ito sapat para i-hack ang site :)

Paano Tingnan ang Source Code sa Android Phone

Nais ko ring tandaan na ang mga tool ng developer ay magagamit hindi lamang sa desktop na bersyon ng mga browser, iyon ay, sa mga computer at laptop. Sa mga telepono at tablet (Android, iOS) maaari mo ring tingnan ang source code.

Upang gawin ito, idagdag ang view-source prefix sa URL ng page na sinisiyasat:

Halimbawa:

tingnan ang pinagmulan:https://site/turbo-rezhim-opera/

Sa mahabang panahon, ang opsyon na "ipakita ang pinagmulan ng pahina" ay walang silbi at hindi kawili-wili para sa akin. Bye pag-aaral ng HTML sa Codecademy at ang layout ng sarili kong mga website ay hindi naging aking bagong libangan. Dito lumitaw ang tanong: kung saan mahahanap ang mga totoong kaso at humiram mga kawili-wiling solusyon para sa iyong “alkansya”? Ang sagot ay hindi inaasahang simple, tulad ng lahat ng mapanlikhang bagay: tingnan ang source code ng page sa Google Chrome! Ibinabahagi ko sa iyo ang aking mga katamtamang nahanap.

Ano ang source code ng page

Kung ikaw, tulad ko, ay gumagawa pa lamang ng iyong mga unang hakbang sa HTML programming, magandang ideya na alamin kung ano ang source code ng isang page.

Source code, kilala rin bilang HTML page code - text sa Hyper language Markup ng Teksto Wika (HTML). Kabilang dito ang aktwal na nilalaman ng pahina (teksto, mga talahanayan) at mga tag. Ang huli ay kumikilos bilang mga tagubilin para sa browser: kung paano magpapakita ng nilalaman, kung anong uri ng pag-format ang gagamitin, kung saan maglalagay ng hyperlink o media file. Well, para sa amin, mga baguhang programmer, ang source code ay ang pinakamahusay na lugar ng pagsasanay: nakahanap kami ng isang kawili-wiling site at tiktikan ito, i-save ito, at gumamit ng matagumpay na mga fragment. Paano?

Paano tingnan ang source code sa pahina ng browser ng Google Chrome

Hanapin ang page na gusto mo. Halimbawa, interesado ako sa disenyo ng menu ng site. Buksan ang source code sa Google browser Maaaring gawin ang Chrome sa tatlong paraan:

Mag-click sa icon menu sa kanan itaas na sulok browser at piliin ang " Mga karagdagang tool" Sa iba pa, mayroong isang opsyon na "Tingnan ang source code". Sa totoo lang, bihira ko itong gamitin ang pamamaraang ito: maraming hindi kinakailangang paggalaw. Maaari itong gawing mas simple.
Pindutin ang kumbinasyon ng key Ctrl+U– isang bagong window na may source code ay bubukas;
Para sa mga tagahanga ng menu ng konteksto: i-right-click sa pahina at piliin ang opsyong "Tingnan ang code ng pahina".

Nakayanan namin ang gawain ng pagtingin sa HTML code ng pahina sa browser. Lumipat tayo sa pinaka-kagiliw-giliw na yugto.

Paano i-edit at i-save ang source code

Upang matutunan kung paano lumikha ng mga website, hindi sapat na basahin ang HTML code ng ibang tao. Kailangan mong laruin ito, mag-eksperimento, gumawa ng mga pagbabago at suriin ang resulta. Maaari ka ring magsimula sa pamamagitan ng pag-compile ng ilang matagumpay na sample. Paano i-edit at i-save ang source code?

Opsyon 1. "Manu-mano"

Pagkatapos naming buksan ang source code ng pahina, tawagan ang menu ng konteksto at piliin ang opsyong "I-save bilang" at i-save ang file sa hard drive. Ine-edit namin ang file sa Notepad o Notepad, i-save ang mga pagbabago at buksan ito sa pamamagitan ng browser. Ang mga resulta ng aming mga pagbabago (matagumpay at hindi masyadong matagumpay) ay makikita sa window ng browser.

Pagpipilian 2. Para sa mga pro

Kapag "naglalaro" ka ng source code araw-araw, ang proseso ng "save - open - change - save - check" ay nagiging nakakapagod. Para sa aking sarili, nakakita ako ng solusyon sa anyo ng pag-install ng plugin para sa Google Chrome - Firebug Lite. Pinapayagan ka nitong i-edit at i-save ang source code nang hindi umaalis sa window ng browser.

Ctrl+U

Paano ko matitingnan ang source code ng isang elemento?

Mag-right-click sa elemento ng page ng interes.

Google Chrome: "Tingnan ang code ng elemento"

Opera: "Suriin ang elemento"

FireFox: "Pag-aralan ang elemento"

Sa ibang mga browser, maghanap ng menu item na may katulad na kahulugan.

Hi sa lahat!

Lalo kong inilatag ang buong punto sa simula ng artikulo, para sa mga naghahanap ng mabilis na sagot.

Maaaring alam ng marami ang impormasyon, ngunit dahil nagsusulat ako para sa mga baguhang blogger, web programmer at iba pang mga prospector, ang sangguniang artikulong ito ay kailangang-kailangan.

Sa hinaharap, tiyak na pag-aaralan mo ang source code ng mga pahina at indibidwal na elemento.

Tingnan natin tiyak na halimbawa kung paano mo magagamit ang pagtingin sa source code ng isang page.

Halimbawa, gusto naming makita kung ano mga keyword(mga keyword) ay ginagamit para sa tiyak na pahina. Pumunta kami sa web page na interesado kami at pindutin ang Ctrl+U. Ang source code ng page na ito ay magbubukas sa isang hiwalay na window o sa isang hiwalay na tab. Pindutin ang Ctrl+F para maghanap ng code snippet. SA sa kasong ito i-type ang salitang "sa box para sa paghahanap" mga keyword". Awtomatiko kang ire-redirect sa isang piraso ng code na may meta tag na ito at ang hinanap na salita ay mai-highlight.

Sa pamamagitan ng pagkakatulad, maaari kang maghanap at mag-aral ng iba pang mga fragment ng code.

Ang pagtingin sa buong source code ng isang page ay hindi masyadong maginhawa sa karamihan ng mga kaso, kaya posible na tingnan ang code sa lahat ng mga browser indibidwal na elemento o fragment.

Gumamit tayo ng isang partikular na halimbawa ng pagtingin sa code ng isang elemento. Halimbawa, tingnan natin kung mayroon ang link katangian ng nofollow. Mag-right-click sa link na interesado sa amin at sa drop-down na menu ng konteksto, mag-left-click sa item "Tingnan ang code ng elemento" o katulad nito (depende sa iyong browser). Sa ibaba, sa isang espesyal na window para sa pagsusuri ng code, nakakakuha tayo ng katulad.

Nakita namin na ang link code ay naglalaman ng . Nangangahulugan ito na ang PR ay hindi "leak" sa pamamagitan ng link na ito. Pag-uusapan natin ito nang mas detalyado sa mga susunod na artikulo. Ngayon ang mahalagang bagay ay alam mo na ngayon kung paano tingnan ang source code ng page at ang source code ng isang indibidwal na elemento.

Kasanayan baguhin ang source code ng pahina – kapaki-pakinabang na kasanayan para sa advanced na gumagamit ng Internet. Sa pamamagitan ng pagpapalit ng HTML code, maaari mong baguhin buksan ang web page ayon sa gusto mo. Sa artikulong ito sasabihin namin sa iyo paano baguhin ang page code sa Google Chrome. Gayunpaman, sa iba pang mga browser ang lahat ay ginagawa nang katulad, kaya hindi dapat magkaroon ng anumang mga paghihirap.

Ano ang HTML code ng page?

Ang bawat pahinang bubuksan mo sa iyong browser ay may sariling code sa wika HTML markup. Ang code na ito ay kumakatawan sa mga tag at teksto. Ang mga tag ay mga natatanging label na nagsasabi sa browser kung paano ipapakita ito o ang bahaging iyon ng site. Ang teksto ay ang nilalaman ng pahina, kung ano ang nakikita ng gumagamit. Gayundin, maaaring ikonekta ang mga istilo ng CSS sa page, na nakatakda hitsura mga elemento ng pahina. Upang baguhin ang source code ng site hindi mo kailangang malaman nang lubusan ang HTML at CSS, at makikita mo na ang iyong sarili sa lalong madaling panahon.

Bakit baguhin ang isang web page?

Maaari mong palitan ang data sa site, baguhin ang text ng mensahe, o kumuha ng pekeng screenshot. Pakitandaan na ang lahat ng mga pagbabago ay makikita mo lamang at mawawala kapag na-reload mo ang pahina. Gayundin ang binagong data ay hindi magiging totoo. Halimbawa, kung wala akong 10 dolyar, at papalitan ko ito ng 100, wala na akong pera. Ito ay pagpapakita lamang ng pahina ng browser. Halimbawa:

Pagkatapos:

Halimbawa, kukunin ko ang parehong site at babaguhin ang nakaraang anunsyo ng artikulong "" Pagbubukas home page sa Google Chrome. Nag-right-click ako sa elementong gusto kong baguhin, halimbawa, ang pamagat ng anunsyo at piliin ang "Tingnan ang code".

Sa window na bubukas, pumunta sa tab na Mga Elemento at tingnan ang HTML code ng pahina. Dito kailangan nating hanapin ang teksto na interesado tayo. (sinalungguhitan ng pula)