Sut i Gweld Côd Ffynhonnell Tudalen We ym mhob Porwr

Mae'r dudalen we rydych chi'n ei ddarllen yn cynnwys, ymysg pethau eraill, cod ffynhonnell. Dyna'r wybodaeth y mae eich porwr yn ei lawrlwytho ac yn cyfateb i'r hyn rydych chi'n ei ddarllen ar hyn o bryd.

Mae'r rhan fwyaf o borwyr gwe yn galluogi'r gallu i weld cod ffynhonnell tudalen we heb unrhyw feddalwedd ychwanegol sydd ei angen, ni waeth pa fath o ddyfais rydych chi'n ei wneud.

Mae rhai hyd yn oed yn cynnig ymarferoldeb a strwythur uwch, gan ei gwneud yn haws peruse HTML a chod rhaglennu arall ar y dudalen.

Pam Fyddech Chi Eisiau Gweler y Cod Ffynhonnell?

Mae yna sawl rheswm pam efallai y byddwch am weld cod ffynhonnell tudalen. Os ydych chi'n ddatblygwr gwe, efallai yr hoffech chi edrych arno o dan y gorchuddion yn arddull neu weithrediad rhaglennydd arall. Efallai eich bod chi mewn sicrwydd ansawdd ac yn ceisio canfod pam bod rhan benodol o dudalen we yn rendro neu'n ymddwyn fel y mae.

Gallech hefyd fod yn ddechreuwr yn ceisio dysgu sut i godio eich tudalennau eich hun ac yn chwilio am rai enghreifftiau o'r byd go iawn. Wrth gwrs, mae'n bosibl na fyddwch yn dod i mewn i unrhyw un o'r categorïau hyn a dim ond eisiau gweld ffynhonnell allan o chwilfrydedd.

Mae'r rhestr isod yn gyfarwyddiadau ar sut i weld cod ffynhonnell yn eich porwr o ddewis.

Google Chrome

Yn rhedeg ar: Chrome OS, Linux, macOS, Windows

Mae fersiwn bwrdd gwaith Chrome yn cynnig tri gwahanol ddull ar gyfer gweld cod ffynhonnell y dudalen, y cyntaf a'r mwyaf symlaf trwy ddefnyddio'r llwybr byr bysellfwrdd canlynol: CTRL + U ( COMMAND + OPTION + U ar macOS).

Pan gaiff ei wasgu, mae'r shortcut hwn yn agor tab porwr newydd sy'n dangos HTML a chod arall ar gyfer y dudalen weithredol. Mae'r ffynhonnell hon yn godau lliw ac wedi'i strwythuro mewn modd sy'n ei gwneud hi'n symlach i'w rannu a dod o hyd i'r hyn rydych chi'n chwilio amdano. Gallwch hefyd fynd yno trwy fynd i mewn i'r testun canlynol yn bar cyfeiriad Chrome, wedi'i atodi ar ochr chwith URL y dudalen we, a tharo'r Allwedd Enter : ffynhonnell weld: (hy, ffynhonnell weld: https: // www .).

Y trydydd dull yw drwy offer datblygwyr Chrome, sy'n eich galluogi i gymryd plymio dyfnach i mewn i gôd y dudalen yn ogystal â thweak it on-the-fly at ddibenion profi a datblygu. Gellir agor a chau rhyngwyneb offer y datblygwr trwy ddefnyddio'r llwybr byr bysellfwrdd hwn: CTRL + SHIFT + I ( COMMAND + OPTION + I ar macOS). Gallwch hefyd eu lansio trwy gymryd y llwybr canlynol.

  1. Cliciwch ar y botwm prif ddewislen Chrome, sydd wedi'i lleoli yn y gornel dde ar y dde ac wedi'i gynrychioli gan dri dotiau wedi'u halinio'n fertigol.
  2. Pan fydd y ddewislen yn disgyn, trowch eich cyrchwr llygoden dros yr opsiwn Offer Mwy .
  3. Pan fydd yr is-ddewislen yn ymddangos, cliciwch ar offer Datblygwr .

Android
Mae edrych ar ffynhonnell tudalen gwe yn Chrome ar gyfer Android mor syml â gosod y testun canlynol i flaen ei gyfeiriad (neu URL) a'i chyflwyno: ffynhonnell weld:. Enghraifft o hyn fyddai ffynhonnell y golwg: https: // www. . Bydd HTML a chod arall o'r dudalen dan sylw yn cael eu harddangos yn syth yn y ffenestr weithredol.

iOS
Er nad oes unrhyw ddulliau brodorol i weld cod ffynhonnell gan ddefnyddio Chrome ar eich iPad, iPhone neu iPod touch, y symlaf a'r mwyaf effeithiol yw defnyddio ateb trydydd parti megis yr app View Source.

Ar gael am $ 0.99 yn yr App Store, mae View Source yn eich annog i fynd i mewn i URL y dudalen (neu gopïo / gludo ef o far cyfeiriad cyfeiriad Chrome, sydd weithiau'n llwybr symlaf i'w gymryd) a dyna'r peth. Yn ogystal â dangos HTML a chod ffynhonnell arall, mae gan yr app hefyd tabiau sy'n dangos asedau tudalen unigol, y Model Object Object (DOM), yn ogystal â maint y dudalen, cwcis a manylion diddorol eraill.

Microsoft Edge

Yn rhedeg ar: Windows

Mae'r porwr Edge yn eich galluogi i weld, dadansoddi a hyd yn oed drin cod ffynhonnell y dudalen gyfredol trwy ei rhyngwyneb Offer Datblygwr . I gael mynediad at yr offeryn handy hwn, gallwch ddefnyddio un o'r llwybrau byr bysellfwrdd hyn: F12 neu CTRL + U. Os byddai'n well gennych chi'r llygoden yn hytrach, cliciwch ar y botwm ddewislen Edge (tri dot yn y gornel dde uchaf) a dewiswch opsiwn Offer F12 Datblygwr o'r rhestr.

Ar ôl i'r offer dev gael ei redeg am y tro cyntaf, mae Edge yn ychwanegu dau ddewis ychwanegol i ddewislen cyd-destun y porwr (yn hygyrch trwy glicio ar y dde yn unrhyw le o fewn gwefan): Archwilio'r elfen a'r Gweld ffynhonnell , yr olaf sy'n agor y rhan Debugger o'r dev rhyngwyneb offer poblog gyda chod ffynhonnell.

Mozilla Firefox

Yn rhedeg ar: Linux, macOS, Windows

I weld cod ffynhonnell tudalen yn y fersiwn bwrdd gwaith o Firefox, gallwch bwyso CTRL + U ( COMMAND + U ar macOS) ar eich bysellfwrdd, a fydd yn agor tab newydd sy'n cynnwys HTML a chod arall ar gyfer y dudalen we weithredol.

Wrth deipio'r testun canlynol i mewn i bar cyfeiriadau Firefox, yn uniongyrchol i'r chwith o URL y dudalen, bydd yr un ffynhonnell i'w ddangos yn y tab cyfredol yn lle hynny: ffynhonnell weld: (hy, ffynhonnell gweld: https: // www.) .

Ffordd arall o gael mynediad at god ffynhonnell tudalen yw drwy offeryn datblygwyr Firefox, sy'n hygyrch trwy gymryd y camau canlynol.

  1. Cliciwch ar y botwm prif ddewislen, a leolir yng nghornel dde uchaf eich ffenestr porwr a'i gynrychioli gan dair llinell lorweddol.
  2. Pan fydd y ddewislen pop-out yn ymddangos, cliciwch ar yr eicon "wrench" Datblygwr .
  3. Erbyn hyn, dylai'r ddewislen cyd - destun Datblygwr Gwe fod yn weladwy. Dewiswch yr opsiwn Ffynhonnell Tudalen .

Mae Firefox hefyd yn gadael i chi weld y cod ffynhonnell ar gyfer rhan benodol o dudalen, gan ei gwneud hi'n hawdd i ynysu materion. I wneud hynny, tynnwch sylw at yr ardal y mae gennych ddiddordeb ynddo gyda'ch llygoden. Nesaf, cliciwch ar y dde, a dewiswch View Source Source o ddewislen cyd-destun y porwr.

Android
Gellir gweld cod ffynhonnell yn y fersiwn Android o Firefox trwy ragddodiad URL y dudalen we gyda'r testun canlynol: ffynhonnell weld:. Er enghraifft, i weld y ffynhonnell HTML ar gyfer cyflwyno'r testun canlynol yn bar cyfeiriad y porwr: ffynhonnell weld: https: // www. .

iOS
Mae ein dull a argymhellir ar gyfer gweld cod ffynhonnell y dudalen we ar eich iPad, iPhone neu iPod Touch trwy'r App View Source, sydd ar gael yn y Siop App am $ 0.99. Er nad yw wedi'i integreiddio'n uniongyrchol ag Firefox, gallwch chi gopïo a gludo URL o'r porwr i'r app er mwyn datgelu'r HTML a chod arall sy'n gysylltiedig â'r dudalen dan sylw.

Safari Afal

Rhedeg ar iOS a macOS

iOS
Er nad yw Safari iOS yn cynnwys y gallu i edrych ar ffynhonnell y dudalen yn ddiofyn, mae'r porwr yn integreiddio yn hytrach na dim ond gyda'r app Ffynhonnell Golygfa - sydd ar gael yn Siop yr App am $ 0.99.

Ar ôl gosod y ffurflen trydydd parti hwn yn ôl i'r porwr Safari a tapiwch y botwm Rhannu, sydd ar waelod y sgrîn ac wedi'i gynrychioli gan sgwâr a saeth i fyny. Erbyn hyn, dylai Taflen Rhannu iOS fod yn weladwy, gan orchuddio hanner isaf eich ffenest Safari. Sgroliwch i'r dde a dewiswch y botwm Gweld Ffynhonnell .

Bellach dylid dangos cynrychiolaeth strwythuredig â chod lliw o god ffynhonnell y dudalen weithredol, ynghyd â thafiau eraill sy'n eich galluogi i weld asedau tudalen, sgriptiau a mwy.

macOS
I weld cod ffynhonnell tudalen yn y fersiwn bwrdd gwaith o Safari, mae'n rhaid i chi gyntaf ei alluogi i ddatblygu ei ddewislen. Mae'r camau isod yn eich cerdded trwy weithredu'r ddewislen cudd hon a dangos ffynhonnell HTML tudalen.

  1. Cliciwch ar Safari yn y ddewislen porwr, sydd ar frig y sgrin.
  2. Pan fydd y ddewislen yn disgyn, dewiswch yr opsiwn Preferences .
  3. Dylai Dewisiadau Safari nawr fod yn weladwy. Cliciwch ar yr eicon Uwch , a leolir ar ochr ddeheuol y rhes uchaf.
  4. Tuag at waelod yr adran Uwch mae opsiwn wedi'i labelu Show Develop menu yn y bar dewislen , ynghyd â blwch gwirio gwag. Cliciwch ar y blwch hwn unwaith i osod marc siec ynddo, a chau'r ffenestr Dewisiadau trwy glicio ar y 'x' coch a geir yn y gornel chwith uchaf.
  5. Cliciwch ar y ddewislen Datblygu , sydd ar frig y sgrin.
  6. Pan fydd y ddewislen i lawr yn ymddangos, dewiswch Dangos Ffynhonnell Tudalen . Gallwch hefyd ddefnyddio'r llwybr byr bysellfwrdd canlynol yn lle hynny: COMMAND + OPTION + U.

Opera

Yn rhedeg ar: Linux, macOS, Windows

I weld y cod ffynhonnell o'r dudalen we weithredol yn y porwr Opera, defnyddiwch y llwybr byr bysellfwrdd canlynol: CTRL + U ( COMMAND + OPTION + U ar macOS). Os byddai'n well gennych lwytho'r ffynhonnell yn y tab cyfredol yn lle hynny, teipiwch y testun canlynol ar ochr chwith URL y dudalen o fewn y bar cyfeiriad a throwch Enter : source source: (hy, source source: https: // www. ).

Mae fersiwn bwrdd gwaith Opera hefyd yn caniatáu i chi weld ffynhonnell HTML, CSS ac elfennau eraill trwy ddefnyddio ei offer datblygwr integredig. I lansio'r rhyngwyneb hwn, a fydd yn ymddangos ar ochr dde ffenestr eich prif borwr, yn ddiofyn, gwasgwch y llwybr byr bysellfwrdd canlynol: CTRL + SHIFT + I ( COMMAND + OPTION + I on macOS).

Mae offeryn datblygwr Opera hefyd ar gael trwy gymryd y camau canlynol.

  1. Cliciwch ar y logo Opera, a leolir yng nghornel chwith uchaf ffenestr eich porwr.
  2. Pan fydd y ddewislen yn disgyn, trowch eich cyrchwr llygoden dros yr opsiwn Offer Mwy .
  3. Cliciwch ar ddewislen datblygwr Show .
  4. Cliciwch ar y logo Opera eto.
  5. Pan fydd y ddewislen yn disgyn, trowch eich cyrchwr dros y Datblygwr .
  6. Pan fydd yr is-ddewislen yn ymddangos, cliciwch ar Offer Datblygwr .

Vivaldi

Mae sawl ffordd o weld ffynhonnell y dudalen o fewn porwr Vivaldi. Y symlaf yw trwy'r llwybr byr bysellfwrdd CTRL + U , sy'n cyflwyno cod o'r dudalen weithredol mewn tab newydd.

Gallwch hefyd ychwanegu'r testun canlynol i flaen URL y dudalen, sy'n dangos y cod ffynhonnell yn y tab presennol: ffynhonnell weld:. Enghraifft o hyn fyddai ffynhonnell y golwg: http: // www. .

Dull arall yw trwy offerynnau integredig y porwr, sy'n hygyrch trwy wasgu'r cyfuniad CTRL + SHIFT + I neu trwy'r opsiwn Offer Datblygwr yn y ddewislen Tools y porwr - canfyddir trwy glicio ar y logo 'V' yn y gornel chwith uchaf. Mae defnyddio offer dev yn caniatáu dadansoddiad llawer mwy manwl o ffynhonnell y dudalen.