Principal Chrome Com veure la font HTML a Google Chrome

Com veure la font HTML a Google Chrome



Què saber

  • Feu clic amb el botó dret a la pàgina web i trieu Mostra la font .
  • Drecera: premeu Ctrl + EN (PC amb Windows) o Comandament + Opció + EN (Mac).
  • Per utilitzar les eines per a desenvolupadors de Chrome, seleccioneu Menú (tres punts) > Més eines > Eines per a desenvolupadors .

En aquest article s'explica com accedir al codi font HTML d'un lloc web al navegador web Google Chrome, així com accedir i utilitzar les eines de desenvolupament de Chrome. Veure el codi font d'un lloc és una manera excel·lent perquè els principiants aprenguin HTML.

Veure el codi font a Chrome

Aleshores, com veieu el codi font d'un lloc web? Aquí teniu les instruccions pas a pas per fer-ho amb el navegador Google Chrome.

  1. Obriu el Navegador web Google Chrome (si no en tens Google Chrome instal·lat , aquesta és una descàrrega gratuïta).

  2. Navegueu fins a pàgina web que voleu examinar .

  3. Clic dret la pàgina i mira el menú que apareix. Des d'aquest menú, feu clic Mostra la font .

    Mostra l
  4. El codi font d'aquesta pàgina apareixerà ara com una pestanya nova al navegador.

  5. Alternativament, també podeu utilitzar les tecles de drecera de Ctrl + EN en un ordinador per obrir una finestra amb el codi font d'un lloc mostrat. En un Mac, aquesta drecera és Comandament + Opció + EN .

Hilary Allison / Lifewire

com fer una animada a instagram

Utilitzeu les eines per a desenvolupadors de Chrome

A més del senzillMostra la fontcapacitat que ofereix Google Chrome, també podeu aprofitar la seva excel·lent Eines per a desenvolupadors per aprofundir encara més en un lloc. Aquestes eines us permetran no només veure l'HTML, sinó també el CSS que s'aplica per visualitzar els elements d'aquest document HTML.

Per utilitzar les eines per a desenvolupadors de Chrome:

  1. Obert Google Chrome .

  2. Navega a la pàgina web que voleu examinar .

  3. Seleccioneu el menú de tres punts a l'extrem superior dret de la finestra del navegador.

  4. Des del menú, passa el cursor per sobre Més eines i després tria Eines per a desenvolupadors al menú que apareix.

    Element de menú d
  5. S'obrirà una finestra que mostra el codi font HTML a l'esquerra del panell i el CSS relacionat a la dreta.

  6. Alternativament, si feu clic amb el botó dret un element d'una pàgina web i seleccioneu Inspeccionar al menú que apareix, apareixeran les eines per a desenvolupadors de Chrome i destacaran la part específica que trieu a l'HTML amb el CSS corresponent que es mostra a la dreta. És molt útil si voleu obtenir més informació sobre una part concreta d'un lloc.

    com activar els trucs als simuladors 4
Com inspeccionar un element en un Mac

És legal veure el codi font?

Al llarg dels anys, molts dissenyadors web nous s'han preguntat si és acceptable veure el codi font d'un lloc i utilitzar-lo per a la seva educació i, en última instància, per al treball que fan. Tot i que copiar el codi d'un lloc a l'engròs i fer-lo passar com a propi en un lloc web certament no és acceptable, utilitzar aquest codi com a trampolí per aprendre és en realitat quants avenços es fan en aquesta indústria.

Com hem esmentat a l'inici d'aquest article, us costaria trobar un professional web que treballi avui que no hagi après res veient la font d'un lloc! Sí, veure el codi font d'un lloc és legal. Utilitzar aquest codi com a recurs per crear alguna cosa semblant també és segur. Prendre el codi tal com és i fer-lo passar per la vostra feina és on comenceu a trobar problemes.

Al final, els professionals del web aprenen els uns dels altres i sovint milloren el treball que veuen i en què s'inspiren, així que no dubteu a veure el codi font d'un lloc i utilitzar-lo com a eina d'aprenentatge.

Més que HTML

Una cosa a recordar és que els fitxers font poden ser molt complicats (i com més complex sigui el lloc web que esteu veient, més complex és probable que sigui el codi d'aquest lloc). A més de l'estructura HTML que conforma la pàgina, també hi haurà CSS (fulls d'estil en cascada) que dicten l'aspecte visual d'aquest lloc. A més, molts llocs web d'avui inclouran fitxers de script inclosos juntament amb l'HTML.

com ratllar a Google Docs

És probable que s'incloguin diversos fitxers d'script; de fet, cadascun alimenta diferents aspectes del lloc. Francament, el codi font d'un lloc pot semblar aclaparador, sobretot si sou nou en fer-ho. No us frustreu si no podeu esbrinar què està passant amb aquest lloc immediatament. Veure la font HTML és només el primer pas d'aquest procés. Amb una mica d'experiència, començareu a entendre millor com encaixen totes aquestes peces per crear el lloc web que veieu al vostre navegador. A mesura que us familiaritzeu amb el codi, podreu aprendre més d'ell i no us semblarà tan descoratjador.

PMF
  • Com edito el codi HTML a Chrome?

    Obriu Eines per a desenvolupadors a Chrome prement Ctrl (o Comandament en un Mac) + Maj + I . A partir d'aquí, premeu Ctrl ( Comandament a Mac) + O i seleccioneu el fitxer font desat que voleu editar per obrir-lo.

  • Com puc veure el codi font de la pàgina a Chrome si Visualitza la font està desactivada?

    Si un lloc web ha desactivat l'opció Visualitza la font, és possible que encara pugueu fer una ullada sota el capó. A la part superior de la finestra del navegador, seleccioneu Veure > Desenvolupador > Veure la font , que hauria de mostrar el codi font de la pàgina web.

  • Com puc veure el codi font d'un lloc a Chrome amb el meu dispositiu Android?

    Navegueu fins al lloc web que voleu veure amb l'aplicació Chrome del vostre dispositiu i, a continuació, seleccioneu la barra d'adreces del navegador. Mou el cursor de text a l'extrem esquerre (davant de l'URL) i escriviu Veure la font , després premeu Entra o seleccioneu Vés .

Articles D'Interès

L'Elecció De L'Editor

Com inserir una signatura a Microsoft Word
Com inserir una signatura a Microsoft Word
La signatura electrònica és una pràctica relativament nova. En lloc d'una 'signatura humida' de la vella escola, ara podeu utilitzar signes electrònics, símbols i fins i tot sons per autenticar un document. MS Word, malauradament, no té moltes funcions integrades per generar
Revisió de Sony SRS-X99: portar la lluita multiesala a Sonos
Revisió de Sony SRS-X99: portar la lluita multiesala a Sonos
Sony fa anys que construeix altaveus sense fils, però, sense moltes promocions, han quedat una mica sota el radar. Els seus altaveus mereixen més atenció, però, i el seu darrer esforç, el SRS-X99 és un atordidor,
5 millors jocs de PC amb gràfics alts als quals heu de jugar
5 millors jocs de PC amb gràfics alts als quals heu de jugar
No es poden desactivar els anuncis automàtics de manera programàtica a la pàgina, així que aquí estem!
Desactiveu les previsualitzacions de miniatures a l'Explorador de fitxers al Windows 10
Desactiveu les previsualitzacions de miniatures a l'Explorador de fitxers al Windows 10
Vegeu com desactivar les miniatures de previsualització a l'Explorador de fitxers al Windows 10. Hi ha diversos mètodes que podeu utilitzar per desactivar-les.
Samsung Galaxy Note 9 contra iPhone Xs: per a quin telèfon hauríeu de deixar de banda?
Samsung Galaxy Note 9 contra iPhone Xs: per a quin telèfon hauríeu de deixar de banda?
Tant Samsung com Apple han estat els portadors de grans (i de vegades acalorats) debats en amistats, relacions i oficines durant l'última dècada. De la mateixa manera que un grup creu que manté l'última paraula en els telèfons intel·ligents, la marca rival ho farà
Afegiu el menú contextual Optimize Drives a Windows 10
Afegiu el menú contextual Optimize Drives a Windows 10
Vegeu com afegir 'Optimitza les unitats' al menú contextual de la unitat al Windows 10. Optimitzar la vostra unitat de disc és un procés molt important.
Com canviar de servidor i obtenir un Ping inferior a Apex Legends
Com canviar de servidor i obtenir un Ping inferior a Apex Legends
La velocitat ho és tot a Apex Legends. Podríeu ser el millor jugador del món, amb el PC més ràpid, però si teniu un ping elevat, no us anirà bé. Per alguna raó, no hi ha cap manera òbvia