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 de la pàgina, la primera i més senzilla mitjançant l'ús de la següent drecera de teclat: CTRL + U (COMMAND + OPTION + U a 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'uneix al costat esquerre de l'URL de la pàgina web i que seleccioneu Entra clau: Veure la font: (és a dir, font de vista: https: //www.Go-Travels.com).
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 mitjançant aquesta drecera de teclat: CTRL + SHIFT + I (COMMAND + OPTION + I a macOS). També podeu iniciar-los tenint la següent ruta d'accés.
-
Seleccioneu el 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 el Més eines opció.
-
Quan aparegui el submenú, seleccioneu 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: Veure la font:. Un exemple d'això seria font de vista: https: //www.Go-Travels.com . 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 l'extrem superior dret) i seleccioneu Eines de desenvolupament F12 opció 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 d'una pàgina web): Inspeccionar element i Veure la font, aquest últim que obre el Depurador part de la interfície d'eines dev estesa 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 a macOS) al vostre teclat, que obrirà una nova pestanya que conté HTML i un altre codi per a la pàgina web activa.
Si escriviu el text següent a la barra d'adreces de Firefox, directament a l'esquerra de l'URL de la pàgina, provocarà que la mateixa font aparegui a la pestanya actual: Veure la font: ( és a dir, font de vista: https: //www.dotdash.com ).
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.
-
Seleccioneu el botó del menú principal, situat a l'extrem superior dret de la finestra del navegador i representat per tres línies horitzontals.
-
Quan aparegui el menú emergent, feu clic a la icona Desenvolupador icona de "clau".
-
El menú contextual del desenvolupador web ara hauria de ser visible. Seleccioneu el Origen de la pàgina opció.
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ó dret i trieu Mostra la font de selecció des del 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 següent text: Veure la font:. Per exemple, per veure l'origen HTML de Dotdash, enviaríeu el text següent a la barra d'adreces del navegador: font de vista: https: //www.dotdash.com .
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 visualitzar la pàgina de manera predeterminada, el navegador s'integra de manera més fluida amb l'aplicació de Vista d'aplicacions, 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-la Veure la font botó
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'activar la seva Desenvolupar menú. Els passos següents us guiaran per activar aquest menú amagat i mostrar la font HTML d'una pàgina.
-
Selecciona Safari al menú del navegador, situat a la part superior de la pantalla.
-
Quan aparegui el menú desplegable, seleccioneu el Preferències opció.
-
Les preferències de Safari ara haurien de ser visibles. Feu clic al Avançat icona, situada a l'extrem dret de la fila superior.
-
Cap a la part inferior de la secció avançada hi ha una opció etiquetada Mostra el menú Desenvolupar a la barra de menú, acompanyada d'una casella buida. Seleccioneu 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.
-
Seleccioneu el Desenvolupar menú situat a la part superior de la pantalla.
-
Quan aparegui el menú desplegable, seleccioneu Mostra la font 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 a 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 feu clic a Introduïu: vista-font: ( és a dir, font de vista: https: //www.Go-Travels.com ).
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 drecera del teclat 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.
-
Seleccioneu el 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 el Més eines opció.
-
Fer clic a Mostra el menú del desenvolupador.
-
Seleccioneu de nou el logotip de l'Opera.
-
Quan aparegui el menú desplegable, moveu el cursor per sobre Desenvolupador.
-
Quan aparegui el submenú, seleccioneu Eines de desenvolupament.
Vivaldi
Hi ha diverses maneres de veure l'origen de la pàgina al navegador Vivaldi. El més senzill és a través de la CTRL + U drecera de teclat, 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: Veure la font:. Un exemple d'això seria font de vista: http: //www.dotdash.com .
Un altre mètode és a través de les eines integrades del desenvolupador del navegador, accessible prement la tecla CTRL + SHIFT + I combinació o a través de la Eines de desenvolupament opció al navegador Eines menú: es troba seleccionant el V logo a la part superior esquerra. L'ús de les eines de dev permet una anàlisi molt més profund de la font de la pàgina.
