Unsaon Pagtan-aw sa Source Code sa usa ka Web Page sa Matag Browser

Ang web page nga imong gibasa gilangkob, lakip sa ubang mga butang, source code. Kana ang kasayuran nga gi-download sa imong web browser ug gihubad ngadto sa unsay imong gibasa karon dayon.

Kadaghanan sa mga web browser naghatag sa abilidad sa pagtan-aw sa source code sa usa ka web page nga walay gikinahanglan nga software, bisan unsa pa nga matang sa device nga imong gisubay.

Ang uban naghatag pa gani og advanced functionality ug structure, nga naghimo nga mas sayon ​​sa pag-usisa sa HTML ug uban pang code sa programming sa panid.

Nganong Gusto Nimong Makita ang Kodigo sa Tinubdan?

Adunay ubay-ubay nga mga rason kung nganong gusto nimo makita ang source code sa panid. Kon ikaw usa ka web developer, tingali gusto ka nga magsud-ong sa mga cover sa partikular nga style o implementasyon sa laing programmer. Tingali ikaw anaa sa kalidad nga kasigurohan ug naningkamot sa pagtino kung nganong ang usa ka bahin sa usa ka web page naghubad o nagagawi sa paagi nga kini.

Mahimo ka usab nga usa ka sinugdanan nga naningkamot nga makakat-on kon unsaon sa pagsulat sa imong kaugalingon nga mga panid ug nangita alang sa pipila nga mga panig-ingnan sa tinuod nga kalibutan. Siyempre, posible nga dili ka mahulog sa bisan asa niining mga kategoriya ug gusto lang nga makita ang tinubdan nga dili na mausyoso.

Gilista sa ubos ang instruksyon kon unsaon pagtan-aw sa source code sa pagpili sa imong browser.

Google Chrome

Nagpadayon sa: Chrome OS, Linux, macOS, Windows

Ang desktop version sa Chrome nagtanyag sa tulo ka nagkalainlain nga mga pamaagi alang sa pagtan-aw sa source code sa panid, ang una ug labing pinakasimple pinaagi sa paggamit sa mosunod nga keyboard shortcut: CTRL + U ( COMMAND + OPTION + U on macOS).

Sa dihang gipugos, kini nga shortcut magbukas sa usa ka bag-ong tab sa browser nga nagpakita sa HTML ug uban pang mga code alang sa aktibong panid. Kini nga tinubdan nga gisulat sa kolor ug gihan-ay sa usa ka pamaagi nga naghimo nga mas simple nga mag-compartmentalize ug makakaplag unsa ang imong gipangita. Mahimo usab ka makasulod didto pinaagi sa pagsulod sa mosunod nga teksto sa address bar sa Chrome, nga gibutang sa wala nga bahin sa URL sa web page, ug gi-igo ang Enter key: view-source: (ie, view-source: https: // www .).

Ang ikatulong pamaagi mao ang pinaagi sa mga gamit sa developer sa Chrome, nga makapahimo nimo nga mas lawom nga pagsabod sa code sa pahina ingon man usab sa pag-tweak sa on-the-fly alang sa testing ug development purposes. Ang interface sa pag-develop gamiton mahimong maablihan ug sirado pinaagi sa paggamit niining keyboard shortcut: CTRL + SHIFT + I ( COMMAND + OPTION + I sa macOS). Mahimo usab nimo kining ilunsad pinaagi sa pagkuha sa mosunod nga dalan.

  1. I-klik ang button sa main menu sa Chrome, nga nahimutang sa ibabaw nga bahin sa tuo nga bahin ug girepresentahan sa tulo ka vertically-aligned dots.
  2. Sa diha nga makita ang drop-down menu, hover ang imong mouse cursor sa More options tool .
  3. Sa diha nga makita ang sub-menu, i-klik ang Tools sa Developer .

Android
Ang pagtan-aw sa tinubdan sa panid sa web sa Chrome alang sa Android ingon ka yano sama sa pagdugang sa mosunod nga teksto sa atubangan sa iyang adres (o URL) ug pagsumite niini: view-source:. Usa ka pananglitan niini mao ang panglantaw-tinubdan: https: // www. . Ang HTML ug ang uban pang mga code gikan sa panid nga gihangyo dayon ipasundayag sa aktibo nga bintana.

iOS
Samtang wala'y lumad nga mga pamaagi sa pagtan-aw sa source code gamit ang Chrome sa imong iPad, iPhone o iPod touch, ang pinakayano ug labing epektibo mao ang paggamit sa ikatulong partido nga solusyon sama sa View Source app.

Magamit alang sa $ 0.99 sa App Store, View Source moaghat kanimo sa pagsulod sa URL sa panid (o kopyahin / i-paste kini gikan sa address bar sa Chrome, nga usahay mao ang pinakasayon ​​nga dalan nga makuha) ug mao kana. Gawas pa sa pagpakita sa HTML ug uban pang source code, ang app usab adunay mga tab nga nagpakita sa tagsa-tagsa nga mga kabtangan sa panid, ang Document Object Model (DOM), ingon man ang gidak-on sa pahina, cookies ug uban pang makapaikag nga mga detalye.

Microsoft Edge

Gipadagan sa: Windows

Ang Edge browser mopahigayon kanimo sa pagtan-aw, pag-analisar ug pagmaniobra pa sa source code sa kasamtangan nga pahina pinaagi sa interface sa Developer Tools niini. Aron ma access kini nga handset gamiton ang usa sa mga shortcut sa keyboard: F12 o CTRL + U. Kung gusto nimo ang mouse, hinumdumi ang button sa Edge's menu (tulo ka tuldok nga nahimutang sa ibabaw nga tuo nga kilid) ug pilia ang opsyon sa F12 Developer Tools gikan sa lista.

Pagkahuman sa mga tool sa dev nga modagan sa unang higayon, ang Edge nagdugang sa duha ka dugang nga mga kapilian sa menu sa konteksto sa browser (mahimong makuha pinaagi sa pag-klik sa husto sa bisan asa sulod sa usa ka web page): Susiha ang elemento ug View source , ang ulahi nga nagbukas sa Debugger nga bahin sa dev mga himan nga may sulod nga may sulod nga source code.

Mozilla Firefox

Nagpadayon sa: Linux, MacOS, Windows

Aron sa pagtan-aw sa source code sa panid sa desktop version sa Firefox mahimo nimo ipa-CTRL + U ( COMMAND + U on macOS) sa imong keyboard, nga magbukas sa bag-ong tab nga adunay HTML ug uban pang code alang sa aktibong web page.

Ang pag-type sa mosunod nga teksto ngadto sa address bar sa Firefox, direkta sa wala sa URL sa pahina, mag-aghat sa sama nga tinubdan sa pagpakita sa kasamtangan nga tab sa baylo: view-source: (ie, view-source: https: // www.) .

Ang laing paagi sa pag-access sa source code sa panid mao ang pinaagi sa mga tool sa developers sa Firefox, mapahimuslan pinaagi sa pagkuha sa mosunod nga mga lakang.

  1. I-klik ang button sa main menu, nga nahimutang sa ibabaw nga tuo nga kilid sa window sa imong browser ug girepresentahan sa tulo ka pinahigda nga mga linya.
  2. Sa diha nga makita ang pop-out nga menu, i-klik ang icon sa Developer "wrench".
  3. Ang menu sa konteksto sa Web Developer kinahanglan nga makita karon. Pilia ang opsyon sa Paggamit sa Pahina .

Ang Firefox usab nagtugot kanimo sa paglantaw sa source code alang sa partikular nga bahin sa usa ka panid, nga naghimo nga sayon ​​nga ihimulag ang mga isyu. Sa pagbuhat niini, unahon pagpakita ang lugar nga gusto nimo sa imong mouse. Sunod, i-right-click ug pilia ang View Source sa Pinili gikan sa menu sa konteksto sa browser.

Android
Ang pagtan-aw sa source code sa Android nga bersyon sa Firefox mahimong makab-ot pinaagi sa prefix sa URL sa web page nga adunay mosunod nga teksto: view-source:. Pananglitan, sa pagtan-aw sa tinubdan sa HTML nga imong isumiter ang mosunod nga teksto sa address bar sa browser: view-source: https: // www. .

iOS
Ang among girekomendang pamaagi alang sa pagtan-aw sa source code sa web page sa imong iPad, iPhone o iPod touch mao ang pinaagi sa View Source app, nga anaa sa App Store sa $ 0.99. Samtang wala gisagol nga direkta sa Firefox, dali ka makopya ug maka-paste sa usa ka URL gikan sa browser ngadto sa app aron ibutyag ang HTML ug uban pang code nga may kalabutan sa panid nga gipangutana.

Apple Safari

Nagadagan sa iOS ug macOS

iOS
Bisan tuod ang Safari alang sa iOS wala maglakip sa abilidad sa pagtan-aw sa tinubdan sa panid sa default, ang browser naglangkob nga hapsay sa View Source app - nga anaa sa App Store sa $ 0.99.

Human sa pag-instalar niini nga third-party nga app pagbalik sa Safari browser ug i-tap ang Share button, nga nahimutang sa ubos sa screen ug girepresentar sa usa ka square ug usa ka pataas nga arrow. Ang iOS Share Sheet kinahanglan nga makita karon, nga mag-overlay sa ubos nga katunga sa imong Safari window. Pag-scroll sa tuo ug pilia ang button sa View Source .

Ang usa ka coded nga nakahan-ay nga simbolo sa aktibong panid sa code sa panid kinahanglan ipakita karon, uban sa ubang mga tab nga makahimo kanimo sa pagtan-aw sa mga kabtangan sa panid, mga script ug daghan pa.

macOS
Sa pagtan-aw sa source code sa usa ka panid sa desktop nga bersyon sa Safari, una nimo kinahanglan nga mapahigayon ang iyang Develop menu. Ang mga lakang sa ubos naglakaw kanimo pinaagi sa pag-aktibo niining natago nga menu ug pagpakita sa HTML nga tinubdan sa panid.

  1. I-klik ang Safari sa menu sa browser, nga anaa sa ibabaw sa screen.
  2. Sa diha nga makita ang drop-down menu, pilia ang opsyon sa Preferences .
  3. Ang Kagustuhan ni Safari kinahanglan nga makita karon. I-klik ang Advanced icon, nga nahimutang sa layo nga tuo nga bahin sa ibabaw nga linya.
  4. Padulong sa ubos sa Advanced nga seksyon usa ka opsyon nga gi-label nga Show Develop menu sa menu bar , inubanan sa usa ka walay kahon nga checkbox. I-klik kini nga kahon sa usa ka higayon aron ibutang ang marka sa tsek niini, ug isira ang bintana sa Preferences pinaagi sa pag-klik sa pula nga 'x' nga makita sa ibabaw nga bahin sa wala nga bahin.
  5. I-klik ang Develop menu, nga nahimutang sa ibabaw sa screen.
  6. Sa diha nga makita ang drop-down menu, pilia ang Show Source Page . Mahimo usab nimo gamiton ang mosunod nga shortcut sa keyboard: COMMAND + OPTION + U.

Opsiyon

Nagpadayon sa: Linux, MacOS, Windows

Aron makita ang source code gikan sa aktibong web page sa Opera browser gamit ang mosunod nga keyboard shortcut: CTRL + U ( COMMAND + OPTION + U on macOS). Kung gusto nimo ang pag-load sa tinubdan sa kasamtangan nga tab, ibutang ang mosunod nga teksto sa wala sa URL sa sulod sa address bar ug i-hit Enter : view-source: (ie, view-source: https: // www. ).

Ang desktop version sa Opera usab nagtugot kanimo sa pagtan-aw sa HTML nga tinubdan, CSS ug uban pang mga elemento pinaagi sa paggamit sa iyang mga integrated tool sa pag- develop . Aron ilunsad kini nga interface, nga pinaagi sa default makita sa tuo nga bahin sa imong main window browser, i-press ang mosunod nga shortcut sa keyboard: CTRL + SHIFT + I ( COMMAND + OPTION + I sa macOS).

Makita usab ang tool sa developer sa Opera pinaagi sa paghimo sa mosunod nga mga lakang.

  1. I-klik ang logo sa Opera, nga nahimutang sa ibabaw sa wala nga bahin sa window sa imong browser.
  2. Sa diha nga makita ang drop-down menu, hover ang imong mouse cursor sa More options tool .
  3. I-klik ang Show developer menu .
  4. I-klik ang logo sa Opera pag-usab.
  5. Sa diha nga makita ang drop-down menu, ipadala ang imong cursor sa Developer .
  6. Sa diha nga makita ang sub-menu, i-klik ang Tools sa Developer .

Vivaldi

Adunay daghang mga paagi aron makita ang tinubdan sa panid sulod sa Vivaldi browser. Ang pinakayano mao ang pinaagi sa CTRL + U keyboard shortcut, nga nagpresentar sa code gikan sa aktibong panid sa bag-ong tab.

Mahimo usab nimo idugang ang mosunod nga teksto sa atubangan sa URL sa pahina, nga nagpakita sa source code sa karon nga tab: view-source:. Usa ka pananglitan niini mao ang panglantaw-tinubdan: http: // www. .

Ang lain nga pamaagi mao ang pinaagi sa integrated tools sa pag-develop sa browser, nga ma-access pinaagi sa pagputol sa CTRL + SHIFT + ko nga kombinasyon o pinaagi sa Opsyon sa Pag- develop sa Tools sa menu sa Mga Tool sa browser - nga makita pinaagi sa pag-klik sa 'V' logo sa ibabaw nga bahin sa wala. Ang paggamit sa mga himan sa dev nagtugot sa usa ka labi ka lawom nga pagsusi sa tinubdan sa panid.