La pàgina web que està llegint es compon, entre altres coses, amb el codi font. Aquesta és la informació que el vostre navegador descarrega i tradueix el que està llegint ara mateix.
La majoria dels navegadors web proporcionen la possibilitat de veure el codi font d'una pàgina web sense necessitat de programari addicional, independentment del tipus de dispositiu que utilitzeu.
Alguns fins i tot ofereixen una funcionalitat i estructura avançades, cosa que facilita la lectura de codi HTML i d'altres programes a la pàgina.
Per què voldreu veure el codi font?
Hi ha diverses raons per les quals és possible que vulgueu veure el codi font d'una pàgina. Si sou un desenvolupador web, potser t'agradaria fer una ullada sota les cobertes a l'estil o la implementació d'un altre programador. Potser vostè està en garantia de qualitat i està tractant d'esbrinar per què una determinada part d'una pàgina web es representa o es comporten de la manera en què és.
També podria ser un principiant que intenta aprendre a codificar les vostres pròpies pàgines i cerqueu alguns exemples del món real. Per descomptat, és possible que no caiguis en cap d'aquestes categories i simplement vull veure la font de la curiositat.
A continuació s'enumeren les instruccions sobre com veure el codi font al navegador que trieu.
Google Chrome
S'està executant a: Chrome OS, Linux, MacOS, Windows
La versió d'escriptori de Chrome ofereix tres mètodes diferents per visualitzar el codi font d'una pàgina, la primera i la més senzilla mitjançant la següent drecera de teclat: CTRL + U ( COMMAND + OPTION + U en macOS).
Quan es prem, aquesta drecera obre una nova pestanya del navegador que mostra HTML i un altre codi per a la pàgina activa. Aquesta font està codificada per colors i estructurada de manera que simplifica la compartimentació i trobeu el que cerqueu. També podeu entrar-hi introduint el text següent a la barra d'adreces de Chrome, que s'afegeix al costat esquerre de l' URL de la pàgina web i que fa clic a la tecla Enter : view-source: (és a dir, vista-origen: https: // www .).
El tercer mètode és a través de les eines de desenvolupador de Chrome, que us permeten aprofundir en el codi de la pàgina i ajustar-lo a prova de la prova i el desenvolupament. La interfície d'eines del desenvolupador es pot obrir i tancar amb aquesta drecera de teclat: CTRL + SHIFT + I ( COMMAND + OPTION + I a MacOS). També podeu iniciar-los tenint la següent ruta d'accés.
- Feu clic al botó del menú principal de Chrome, situat a l'extrem superior dret i representat per tres punts alineats verticalment.
- Quan aparegui el menú desplegable, moveu el cursor del ratolí sobre l'opció Més eines .
- Quan aparegui el submenú, feu clic a Eines per a desenvolupadors .
Android
Veure la font d'una pàgina web a Chrome per a Android és tan senzill com afegir el següent text al capdavant de la seva adreça (o URL) i enviar-lo: view-source:. Un exemple d'això seria font de vista: https: // www. . HTML i un altre codi de la pàgina en qüestió es mostraran instantàniament a la finestra activa.
iOS
Tot i que no hi ha cap mètode natiu per visualitzar el codi font amb Chrome al vostre iPad, iPhone o iPod touch, el més senzill i efectiu és utilitzar una solució de tercers, com ara l'aplicació de View Source.
Disponible per a $ 0.99 a l'App Store, View Source us demana que introduïu l'URL de la pàgina (o copieu-lo / enganxeu-lo des de la barra d'adreces de Chrome, que de vegades és la ruta més senzilla de fer) i així és. A més de mostrar HTML i un altre codi font, l'aplicació també conté pestanyes que mostren actius de pàgina individuals, el Model d'objectes de document (DOM), així com la mida de la pàgina, les galetes i altres detalls interessants.
Microsoft Edge
S'està executant a: Windows
El navegador Edge us permet visualitzar, analitzar i fins i tot manipular el codi font de la pàgina actual a través de la interfície d' Eines per a desenvolupadors . Per accedir a aquest útil conjunt d'eines, podeu utilitzar un d'aquests accessos de teclat: F12 o CTRL + U. Si preferiu el mouse, feu clic al botó del menú de Edge (tres punts situat a la part superior dreta) i seleccioneu l'opció F12 Developer Tools de la llista.
Una vegada que les eines dev es publiquen per primera vegada, Edge afegeix dues opcions addicionals al menú contextual del navegador (accessible fent clic amb el botó dret a qualsevol lloc dins d'una pàgina web): Inspeccioneu l'element i la font de vista , aquesta última que obre la part del depurador del dev interfície d'eines amb codi font.
Mozilla Firefox
S'està executant a: Linux, MacOS, Windows
Per veure el codi font d'una pàgina a la versió d'escriptori de Firefox, podeu prémer CTRL + U ( COMMAND + U en macOS) al vostre teclat, que obrirà una nova pestanya que contindrà HTML i un altre codi per a la pàgina web activa.
Si escriviu el següent text a la barra d'adreces de Firefox, directament a l'esquerra de l'URL de la pàgina, provocarà que la mateixa font es mostri a la pestanya actual: view-source: (és a dir, vista-origen: https: // www). .
Una altra manera d'accedir al codi font d'una pàgina és a través de les eines de desenvolupador de Firefox, accessibles seguint els passos següents.
- Feu clic al botó del menú principal, situat a l'extrem superior dret de la finestra del vostre navegador i representat per tres línies horitzontals.
- Quan aparegui el menú emergent, feu clic a la icona "Eines" del desenvolupador .
- El menú contextual del desenvolupador web ara hauria de ser visible. Seleccioneu l'opció Origen de la pàgina .
Firefox també us permet veure el codi font d'una part determinada d'una pàgina, cosa que facilita l'aïllament dels problemes. Per fer-ho, primer ressalteu la zona amb la qual us interessi el vostre ratolí. A continuació, feu clic amb el botó secundari del mouse (ratolí) i seleccioneu Vista de la font de selecció al menú contextual del navegador.
Android
Veure el codi font a la versió d'Android de Firefox es pot aconseguir prefixant l'URL de la pàgina web amb el text següent: view-source:. Per exemple, per veure l'origen HTML, hauríeu d'enviar el text següent a la barra d'adreces del navegador: vista-origen: https: // www. .
iOS
El mètode recomanat per visualitzar el codi font de la pàgina web al vostre iPad, iPhone o iPod touch és a través de l'aplicació de View Source, disponible a l'App Store per un valor de 0,99 dòlars. Encara que no estigui integrat directament amb Firefox, podeu copiar i enganxar fàcilment un URL des del navegador a l'aplicació per donar a conèixer el codi HTML i altre associat a la pàgina en qüestió.
Apple Safari
S'està executant a iOS i MacOS
iOS
Tot i que Safari per a iOS no inclou la possibilitat de veure el origen de la pàgina de manera predeterminada, el navegador s'integra perfectament amb l'aplicació de View Source, disponible a l'App Store per un valor de 0,99 dòlars.
Després d'instal·lar aquesta aplicació de tercers, torneu al navegador Safari i toqueu el botó Compartir, que es troba a la part inferior de la pantalla i que es representa amb un quadrat i una fletxa amunt. El Full d'Accions de iOS ara hauria de ser visible, superposant la meitat inferior de la finestra del Safari. Desplaceu-vos cap a la dreta i seleccioneu el botó Mostra el codi font .
Ara s'hauria de mostrar una representació estructurada i codificada de color del codi font de la pàgina activa, juntament amb altres pestanyes que us permetran veure els actius de la pàgina, les seqüències d'ordres i més.
MacOS
Per veure el codi font d'una pàgina a la versió d'escriptori de Safari, primer heu d'habilitar el vostre menú Desenvolupar . Els passos següents us guiaran per activar aquest menú amagat i mostrar la font HTML d'una pàgina.
- Feu clic a Safari al menú del navegador, situat a la part superior de la pantalla.
- Quan aparegui el menú desplegable, seleccioneu l'opció Preferències .
- Les preferències de Safari ara haurien de ser visibles. Feu clic a la icona Avançada , situada a l'extrem dret de la fila superior.
- Cap a la part inferior de la secció avançada hi ha una opció anomenada Mostra el menú Desenvolupar a la barra de menú , acompanyada d'una casella buida. Feu clic a aquesta casella una vegada per col·locar una marca de verificació i tanqueu la finestra Preferències fent clic al vermell "x" que es troba a l'extrem superior esquerre.
- Feu clic al menú Desenvolupar , situat a la part superior de la pantalla.
- Quan aparegui el menú desplegable, seleccioneu Mostra el origen de la pàgina . També podeu utilitzar la següent drecera de teclat: COMMAND + OPTION + U.
Òpera
S'està executant a: Linux, MacOS, Windows
Per veure el codi font de la pàgina web activa al navegador d'Opera utilitzeu la següent drecera de teclat: CTRL + U ( COMMAND + OPTION + U en macOS). Si preferiu carregar la font a la pestanya actual, escriviu el text següent a l'esquerra de la URL de la pàgina dins de la barra d'adreces i premeu Retorn : vista-origen: (és a dir, vista-origen: https: // www. ).
La versió d'escriptori d'Opera també us permet veure fonts HTML, CSS i altres elements mitjançant l'ús de les eines de desenvolupament integrades. Per iniciar aquesta interfície, que per defecte apareixerà al costat dret de la finestra del navegador principal, premeu la tecla de drecera següent: CTRL + SHIFT + I ( COMMAND + OPTION + I a macOS).
El conjunt d'eines del desenvolupador de l'Opera també és accessible tenint en compte els passos següents.
- Feu clic al logotip de l'Opera, situat a l'extrem superior esquerre de la finestra del vostre navegador.
- Quan aparegui el menú desplegable, moveu el cursor del ratolí sobre l'opció Més eines .
- Feu clic al menú Mostra el desenvolupador .
- Feu clic novament al logotip de l'Opera.
- Quan aparegui el menú desplegable, moveu el cursor per sobre del desenvolupador .
- Quan aparegui el submenú, feu clic a Eines per a desenvolupadors .
Vivaldi
Hi ha diverses maneres de veure l'origen de la pàgina al navegador Vivaldi. El més simple és mitjançant la drecera de teclat CTRL + U , que presenta el codi de la pàgina activa en una nova pestanya.
També podeu afegir el text següent a la part frontal de l'URL de la pàgina, que mostra el codi font a la pestanya actual: vista-origen:. Un exemple d'això seria font de vista: http: // www. .
Un altre mètode és a través de les eines de desenvolupament integrades del navegador, accessibles mitjançant la combinació CTRL + SHIFT + I oa través de l' eina de desenvolupadors al menú Eines del navegador, que es troba fent clic al logotip 'V' a l'extrem superior esquerre. L'ús de les eines de dev permet una anàlisi molt més profund de la font de la pàgina.