A páxina web que estás a ler componse, entre outras cousas, co código fonte. Esta é a información que descargas o teu navegador e tradúcese no que estás a ler agora mesmo.
A maioría dos navegadores web permiten ver o código fonte dunha páxina web sen necesidade de software adicional, independentemente do tipo de dispositivo que estea.
Algúns ata ofrecen funcionalidades avanzadas e estrutura, polo que é máis doado consultar o código de programación HTML e outro na páxina.
Por que quere ver o código fonte?
Hai varias razóns polas que pode querer ver o código fonte dunha páxina. Se é un desenvolvedor web, quizais lle gustaría dar un ollo baixo as portadas a outro estilo ou implementación doutro programador. Quizais estea na garantía de calidade e estea a tentar determinar por que unha certa parte dunha páxina web está a representar ou comportarse do xeito que sexa.
Tamén podería ser un novato que tratase de aprender a codificar as súas propias páxinas e está a buscar algúns exemplos do mundo real. Por suposto, é posible que non caia en ningunha destas categorías e só queira ver a fonte por curiosidade.
A continuación aparecen as instrucións sobre como ver o código fonte no seu navegador.
Google Chrome
Funcionando en: Chrome OS, Linux, MacOS, Windows
A versión de escritorio de Chrome ofrece tres métodos diferentes para ver o código fonte dunha páxina, o primeiro e máis sinxelo empregando o seguinte atallo de teclado: CTRL + U ( COMMAND + OPTION + U en macOS).
Cando se preme, este atallo ábrese unha nova lapela do navegador que mostra HTML e outro código para a páxina activa. Esta fonte é codificada por cores e estruturada dun xeito que simplifica a compartimentación e atopa o que está a procurar. Tamén pode chegar alí introducindo o seguinte texto na barra de enderezos de Chrome, anexa ao lado esquerdo da URL da páxina web e premendo a tecla Enter : view-source: (é dicir, fonte de vista: https: // www .).
O terceiro método é a través das ferramentas de desenvolvedor de Chrome, que permiten facer unha inmersión máis profunda no código da páxina e axustalo en marcha para probas e propósitos de desenvolvemento. A interface de ferramentas para desenvolvedores pódese abrir e pechar usando este atallo de teclado: CTRL + SHIFT + I ( COMMAND + OPTION + I en macOS). Tamén podes poñelos en marcha tomando a seguinte ruta.
- Fai clic no botón de menú principal de Chrome, situado na esquina superior dereita e representado por tres puntos aliñados verticalmente.
- Cando apareza o menú despregable, mova o cursor do rato sobre a opción Máis ferramentas .
- Cando apareza o submenú, faga clic en Ferramentas para desenvolvedores .
Android
Ver a fonte dunha páxina web en Chrome para Android é tan sinxela como anexar o texto seguinte á fronte da súa dirección (ou URL) e envialo: view-source:. Un exemplo diso sería fonte de vista: https: // www. . O código HTML e outro da páxina en cuestión aparecerá instantaneamente na xanela activa.
iOS
Aínda que non hai métodos nativos para ver o código fonte con Chrome no teu iPad, iPhone ou iPod touch, o máis simple e máis efectivo é utilizar unha solución de terceiros, como a aplicación de Ver fonte.
Dispoñible por $ 0.99 na App Store, View Source pídelle que ingrese a URL da páxina (ou copie / pegue desde a barra de enderezos de Chrome, que ás veces é o camiño máis sinxelo) e iso é. Ademais de mostrar HTML e outro código fonte, a aplicación tamén ten pestanas que mostran activos de páxina individuais, o Modelo de obxecto de documento (DOM), así como o tamaño da páxina, as cookies e outros detalles interesantes.
Microsoft Edge
Funcionamento en: Windows
O navegador Edge permítelle ver, analizar e mesmo manipular o código fonte da páxina actual a través da súa interface de Ferramentas para desenvolvedores . Para acceder a este útil conxunto de ferramentas pode usar un destes atallos de teclado: F12 ou CTRL + U. Se prefire o mouse, faga clic no botón do menú de Edge (tres puntos situados na esquina superior dereita) e elixa a opción F12 Developer Tools na lista.
Despois de que as ferramentas dev executáronse por primeira vez, Edge engade dúas opcións adicionais ao menú contextual do navegador (accesible premendo co botón dereito do rato en calquera lugar dentro dunha páxina web): Inspeccione o elemento e a fonte de vista , este último que abre a parte Depurador do dev interface de ferramentas poboada con código fonte.
mozilla Firefox
Funcionando en: Linux, MacOS, Windows
Para ver o código fonte dunha páxina na versión de escritorio de Firefox pode premer CTRL + U ( COMMAND + U en macOS) no teclado, que abrirá unha nova páxina que contén HTML e outro código para a páxina web activa.
Escribir o seguinte texto na barra de enderezos de Firefox, directamente á esquerda do URL da páxina, fará que a mesma fonte apareza na pestana actual: view-source: (ie, view-source: https: // www). .
Outra forma de acceder ao código fonte dunha páxina é a través das ferramentas de desenvolvemento de Firefox, accesibles seguindo os seguintes pasos.
- Fai clic no botón de menú principal situado na esquina superior dereita da xanela do navegador e está representado por tres liñas horizontais.
- Cando apareza o menú emerxente, faga clic no icono da tecla " Desenvolvente ".
- O menú contextual do desenvolvedor web agora debería estar visible. Seleccione a opción Orixe da páxina .
Firefox tamén permite ver o código fonte dunha porción determinada dunha páxina, polo que é fácil illar problemas. Para facelo, primeiro destaque a área coa que estea interesado co rato. A continuación, fai clic co botón dereito e escolle Ver fonte de selección no menú contextual do navegador.
Android
A visualización do código fonte na versión de Android de Firefox pode realizarse prefixando a URL da páxina web co seguinte texto: view-source:. Por exemplo, para ver a fonte HTML para que envíe o seguinte texto na barra de enderezos do navegador: view-source: https: // www. .
iOS
O noso método recomendado para ver o código fonte da páxina web no teu iPad, iPhone ou iPod touch é a través da aplicación de Ver fonte, dispoñible na App Store por US $ 0,99. Aínda que non estea integrado directamente con Firefox, podes copiar e pegar un URL do navegador directamente na aplicación para desvelar o código HTML e outro asociado coa páxina en cuestión.
Apple Safari
Funciona en iOS e MacOS
iOS
Aínda que Safari para iOS non inclúe a capacidade de ver a orixe da páxina de forma predeterminada, o navegador integrarase perfectamente coa aplicación de fonte de vista - dispoñible na App Store por US $ 0,99.
Despois de instalar esta aplicación de terceiros volva ao navegador Safari e toca o botón Compartir, situado na parte inferior da pantalla e representado por unha frecha cadrada e superior. A folla de accións de iOS agora debería estar visible, superponiendo a metade inferior da súa fiestra de Safari. Desprácese cara á dereita e seleccione o botón Ver fonte .
Agora debería mostrarse unha representación estruturada e codificada de cor do código fonte da páxina activa, xunto con outras páxinas que lle permiten ver os recursos da páxina, as secuencias de comandos e moito máis.
macOS
Para ver o código fonte dunha páxina na versión de escritorio de Safari, primeiro debes habilitar o seu menú Desenvolver . Os pasos a seguir permítenos activar este menú oculto e mostrar a fonte HTML dunha páxina.
- Fai clic en Safari no menú do navegador, situado na parte superior da pantalla.
- Cando apareza o menú despregable, seleccione a opción Preferencias .
- As preferencias de Safari agora deberían estar visibles. Fai clic no ícono Avanzado , situado no extremo dereito da fila superior.
- Cara á parte inferior da sección Avanzado hai unha opción chamada Mostrar menú Desenvolvemento na barra de menú , acompañada dunha caixa de verificación baleira. Faga clic nesta caixa unha vez para colocar unha marca de verificación nela e pecha a xanela de Preferencias premendo no "x" vermello que se atopa na esquina superior esquerda.
- Faga clic no menú Desenvolver , situado na parte superior da pantalla.
- Cando apareza o menú despregable, seleccione Amosar fonte de páxina . Tamén pode usar o seguinte atallo de teclado: COMMAND + OPTION + U.
Ópera
Funcionando en: Linux, MacOS, Windows
Para ver o código fonte da páxina web activa no navegador de Opera use o seguinte atallo de teclado: CTRL + U ( COMMAND + OPTION + U en macOS). Se prefire cargar a fonte na pestana actual, escriba o texto seguinte á esquerda do URL da páxina na barra de enderezos e prema Intro : fonte de vista: (ou sexa, fonte de vista: https: // www. ).
A versión de escritorio de Opera tamén permite ver fonte HTML, CSS e outros elementos empregando as súas ferramentas de desenvolvemento integradas. Para iniciar esta interface, que por defecto aparecerá no lado dereito da xanela principal do navegador, prema o seguinte atallo de teclado: CTRL + SHIFT + I ( COMMAND + OPTION + I en macOS).
O conxunto de ferramentas para desenvolvedores de Opera tamén está dispoñible facendo os seguintes pasos.
- Fai clic no logotipo de Opera situado na parte superior esquerda da xanela do navegador.
- Cando apareza o menú despregable, mova o cursor do rato sobre a opción Máis ferramentas .
- Faga clic en Mostrar o menú do programador .
- Fai clic no logotipo de Opera nuevamente.
- Cando apareza o menú despregable, pase o cursor sobre o desenvolvedor .
- Cando apareza o submenú, faga clic en Ferramentas para desenvolvedores .
Vivaldi
Existen varias formas de ver a páxina fonte dentro do navegador Vivaldi. O máis simple é a través do atallo de teclado CTRL + U , que presenta o código da páxina activa nunha nova páxina.
Tamén podes engadir o seguinte texto á parte frontal da URL da páxina, que mostra o código fonte na pestana actual: view-source:. Un exemplo diso sería fonte de vista: http: // www. .
Outro método é a través das ferramentas de desenvolvemento integradas do navegador, accesíbeis premendo a combinación CTRL + SHIFT + I ou a través da ferramenta de desenvolvedores no menú Ferramentas do buscador, atopado premendo no logotipo 'V' na esquina superior esquerda. Usar as ferramentas de dev permite unha análise moito máis aprofundada da fonte da páxina.