Paano Tingnan ang Pinagmulan ng HTML sa Google Chrome

Ano ang Dapat Malaman

• Mag-right-click sa web page at pumili Tingnan ang Pinagmulan ng Pahina .
• Shortcut: Pindutin ang Ctrl + SA (Windows PC) o Utos + Pagpipilian + SA (Mac).
• Upang gamitin ang mga tool ng developer ng Chrome, piliin Menu (tatlong tuldok) > Higit pang mga tool > Mga tool ng developer .

Ipinapaliwanag ng artikulong ito kung paano i-access ang HTML source code ng isang website sa web browser ng Google Chrome, pati na rin ang pag-access at paggamit ng mga tool ng developer ng Chrome. Ang pagtingin sa source code ng site ay isang mahusay na paraan para sa mga nagsisimula upang matuto ng HTML.

Tingnan ang Source Code sa Chrome

Kaya paano mo tinitingnan ang source code ng isang website? Narito ang mga sunud-sunod na tagubilin para gawin ito gamit ang Google Chrome browser.

1. Buksan ang Google Chrome web browser (kung wala ka Naka-install ang Google Chrome , Ito ay libreng download).

2. Mag-navigate sa web page na gusto mong suriin .

3. I-right-click ang pahina at tingnan ang menu na lalabas. Mula sa menu na iyon, i-click Tingnan ang pinagmulan ng pahina .

   

4. Ang source code para sa page na iyon ay lalabas na ngayon bilang bagong tab sa browser.

5. Bilang kahalili, maaari mo ring gamitin ang mga keyboard shortcut ng Ctrl + SA sa isang PC upang magbukas ng window na may ipinapakitang source code ng site. Sa isang Mac, ang shortcut na ito ay Utos + Pagpipilian + SA .

Hilary Allison / Lifewire

kung paano mag-disconnect mula sa xbox live sa xbox one

Gamitin ang Mga Tool ng Developer ng Chrome

Bukod sa simpleTingnan ang pinagmulan ng pahinakakayahan na inaalok ng Google Chrome, maaari mo ring samantalahin ang kanilang mahusay Mga Tool ng Developer upang maghukay ng mas malalim sa isang site. Ang mga tool na ito ay magbibigay-daan sa iyo hindi lamang na makita ang HTML, kundi pati na rin ang CSS na nalalapat upang tingnan ang mga elemento sa HTML na dokumentong iyon.

Upang gamitin ang mga tool ng developer ng Chrome:

1. Bukas Google Chrome .

2. Mag-navigate sa ang web page na gusto mong suriin .

3. Piliin ang menu na may tatlong tuldok sa kanang sulok sa itaas ng window ng browser.

4. Mula sa menu, mag-hover sa ibabaw Higit pang mga tool at pagkatapos ay pumili Mga tool ng developer sa lalabas na menu.

   

5. Magbubukas ang isang window na nagpapakita ng HTML source code sa kaliwa ng pane at ang nauugnay na CSS sa kanan.

6. Bilang kahalili, kung nag-right-click ka isang elemento sa isang web page at piliin Siyasatin mula sa lalabas na menu, lalabas ang mga tool ng developer ng Chrome at iha-highlight ang partikular na bahagi na iyong pinili sa HTML na may kaukulang CSS na ipinapakita sa kanan. Napakalaking tulong kung gusto mong matuto nang higit pa tungkol sa isang partikular na piraso ng isang site.

   kung paano gumaling sa tadhana

Legal ba ang Pagtingin sa Source Code?

Sa paglipas ng mga taon, nagkaroon kami ng maraming mga bagong web designer na nagtatanong kung ito ay katanggap-tanggap na tingnan ang source code ng isang site at gamitin ito para sa kanilang edukasyon at sa huli para sa trabaho na kanilang ginagawa. Bagama't tiyak na hindi katanggap-tanggap ang pagkopya sa code ng isang site at ipasa ito bilang iyong sarili sa isang website, ang paggamit ng code na iyon bilang pambuwelo upang matuto mula sa ay talagang kung gaano karaming mga pagsulong ang nagawa sa industriyang ito.

Tulad ng nabanggit namin sa simula ng artikulong ito, mahihirapan kang makahanap ng isang nagtatrabaho na propesyonal sa web ngayon na walang natutunan sa pamamagitan ng pagtingin sa pinagmulan ng isang site! Oo, legal ang pagtingin sa source code ng site. Ligtas din ang paggamit ng code na iyon bilang mapagkukunan upang bumuo ng katulad na bagay. Ang pagkuha ng code bilang-ito at ipasa ito bilang iyong trabaho ay kung saan ka magsisimulang makatagpo ng mga problema.

kung paano i-off ang overlay ng hindi pagkakasundo

Sa huli, natututo ang mga propesyonal sa web mula sa isa't isa at kadalasang pinagbubuti nila ang gawaing nakikita nila at binibigyang inspirasyon, kaya huwag mag-atubiling tingnan ang source code ng site at gamitin ito bilang tool sa pag-aaral.

Higit pa sa HTML

Ang isang bagay na dapat tandaan ay ang mga source file ay maaaring maging napakakumplikado (at kung mas kumplikado ang website na iyong tinitingnan, mas magiging kumplikado ang code ng site na iyon). Bilang karagdagan sa istruktura ng HTML na bumubuo sa pahina, magkakaroon din ng CSS (cascading style sheet) na magdidikta sa visual na hitsura ng site na iyon. Bukod pa rito, maraming mga website ngayon ang magsasama ng mga script file kasama ng HTML.

Malamang na maraming script file ang kasama; sa katunayan, ang bawat isa ay nagpapagana ng iba't ibang aspeto ng site. Sa totoo lang, ang source code ng isang site ay maaaring mukhang napakalaki, lalo na kung bago ka sa paggawa nito. Huwag mabigo kung hindi mo agad maisip kung ano ang nangyayari sa site na iyon. Ang pagtingin sa pinagmulan ng HTML ay ang unang hakbang lamang sa prosesong ito. Sa kaunting karanasan, magsisimula kang maunawaan nang mas mabuti kung paano magkatugma ang lahat ng mga pirasong ito upang gawin ang website na nakikita mo sa iyong browser. Habang nagiging mas pamilyar ka sa code, matututo ka pa mula rito, at hindi ito mukhang nakakatakot sa iyo.

• Paano ko ie-edit ang HTML code sa Chrome?

  Buksan ang Mga Tool ng Developer sa Chrome sa pamamagitan ng pagpindot Ctrl (o Utos sa isang Mac) + Shift + I . Mula doon, pindutin Ctrl ( Utos sa Mac) + O at piliin ang naka-save na source file na gusto mong i-edit para buksan ito.

• Paano ko titingnan ang source code ng page sa Chrome kung hindi pinagana ang View Source?

  Kung hindi pinagana ng isang website ang opsyon sa View Source, maaari mo pa ring tingnan sa ilalim ng hood. Mula sa tuktok ng browser window pumili Tingnan > Developer > Tingnan ang Pinagmulan , na dapat kunin ang source code ng webpage.

• Paano ko titingnan ang source code ng site sa Chrome gamit ang aking Android device?

  Mag-navigate sa website na gusto mong tingnan gamit ang Chrome app ng iyong device, pagkatapos ay piliin ang address bar ng browser. Ilipat ang text cursor sa kaliwa—sa harap ng URL—at i-type tingnan-pinagmulan , pagkatapos ay pindutin ang Pumasok o pumili Pumunta ka .