A página da Web que você está lendo é composta, entre outras coisas, por código-fonte. Essa é a informação que seu navegador da Web baixa e traduz para o que você está lendo agora.
A maioria dos navegadores da Web oferece a capacidade de ver o código-fonte de uma página da Web sem precisar de nenhum software adicional, independentemente do tipo de dispositivo em que você esteja.
Alguns até oferecem funcionalidade e estrutura avançadas, facilitando a leitura de HTML e outros códigos de programação na página.
Por que você gostaria de ver o código-fonte?
Existem vários motivos pelos quais você pode querer ver o código-fonte de uma página. Se você for um desenvolvedor da Web, talvez queira dar uma espiada nas capas do estilo ou da implementação específica de outro programador. Talvez você esteja na garantia de qualidade e esteja tentando descobrir por que uma determinada parte de uma página da Web está sendo renderizada ou se comportando da maneira que é.
Você também pode ser um iniciante tentando aprender a codificar suas próprias páginas e procurando alguns exemplos do mundo real. Claro, é possível que você não caia em nenhuma dessas categorias e queira apenas ver a fonte por pura curiosidade.
Abaixo estão listadas instruções sobre como visualizar o código-fonte no navegador de sua escolha.
Google Chrome
Executando em: Chrome OS, Linux, macOS, Windows
A versão para computador do Chrome oferece três métodos diferentes para visualizar o código-fonte de uma página, o primeiro e o mais simples usando o seguinte atalho de teclado: CTRL + U (COMANDO + OPÇÃO + U no macOS).
Quando pressionado, esse atalho abre uma nova guia do navegador, exibindo HTML e outro código para a página ativa. Essa fonte é codificada por cores e estruturada de maneira a simplificar a compartimentação e encontrar o que você está procurando. Você também pode acessá-lo digitando o seguinte texto na barra de endereço do Chrome, anexado ao lado esquerdo do URL da página da Web e selecionando Entrar chave: view-source: (por exemplo, fonte de visualização: https: //www.Go-Travels.com).
O terceiro método é através das ferramentas para desenvolvedores do Chrome, que permitem que você mergulhe mais fundo no código da página, além de ajustá-lo rapidamente para fins de teste e desenvolvimento. A interface de ferramentas do desenvolvedor pode ser aberta e fechada usando este atalho de teclado: CTRL + SHIFT + I (COMANDO + OPÇÃO + I no macOS). Você também pode iniciá-los seguindo o seguinte caminho.
-
Selecione o botão do menu principal do Chrome, localizado no canto superior direito e representado por três pontos alinhados verticalmente.
-
Quando o menu suspenso aparecer, passe o cursor do mouse sobre o Mais ferramentas opção.
-
Quando o submenu aparecer, selecione Ferramentas de desenvolvimento.
Android
A visualização da fonte de uma página da Web no Chrome para Android é tão simples quanto anexar o seguinte texto à frente de seu endereço (ou URL) e enviá-lo: view-source:. Um exemplo disso seria fonte da vista: https: //www.Go-Travels.com . HTML e outro código da página em questão serão exibidos instantaneamente na janela ativa.
iOS
Embora não haja métodos nativos para visualizar o código-fonte usando o Chrome no seu iPad, iPhone ou iPod touch, o mais simples e eficaz é utilizar uma solução de terceiros, como o aplicativo View Source.
Disponível por US $ 0,99 na App Store, o View Source solicita que você insira o URL da página (ou copie / cole na barra de endereço do Chrome, que às vezes é o caminho mais simples). Além de mostrar HTML e outro código-fonte, o aplicativo também possui guias que exibem recursos de páginas individuais, o Document Object Model (DOM), além do tamanho da página, cookies e outros detalhes interessantes.
Microsoft borda
Correndo em: Windows
O navegador Edge permite que você visualize, analise e até mesmo manipule o código-fonte da página atual por meio da interface das Ferramentas do desenvolvedor. Para acessar este prático conjunto de ferramentas, você pode usar um desses atalhos de teclado: F12 ou CTRL + U. Se preferir o mouse, clique no botão de menu do Edge (três pontos localizados no canto superior direito) e escolha o Ferramentas para desenvolvedores F12 opção da lista.
Depois que as ferramentas de desenvolvimento são executadas pela primeira vez, o Edge adiciona duas opções adicionais ao menu de contexto do navegador (acessível clicando com o botão direito em qualquer lugar dentro de uma página da Web): Inspecionar elemento e Ver fonte, o último que abre o Depurador parte da interface das ferramentas de desenvolvimento preenchida com o código-fonte.
Mozilla Firefox
Executando em: Linux, macOS, Windows
Para ver o código-fonte de uma página na versão desktop do Firefox, você pode pressionar CTRL + U (COMANDO + U no macOS) no seu teclado, que abrirá uma nova aba contendo HTML e outro código para a página da web ativa.
Digitar o seguinte texto na barra de endereços do Firefox, diretamente à esquerda da URL da página, fará com que a mesma fonte apareça na guia atual: view-source: ( ou seja, fonte de visualização: https: //www.dotdash.com ).
Outra maneira de acessar o código-fonte de uma página é através das ferramentas de desenvolvedor do Firefox, acessíveis seguindo os seguintes passos.
-
Selecione o botão do menu principal, localizado no canto superior direito da janela do navegador e representado por três linhas horizontais.
-
Quando o menu pop-out aparecer, clique no Desenvolvedor ícone de "chave inglesa".
-
O menu de contexto do Web Developer agora deve estar visível. Selecione os Fonte da página opção.
O Firefox também permite visualizar o código-fonte de uma parte específica de uma página, facilitando o isolamento de problemas. Para fazer isso, primeiro realce a área que você está interessado com o mouse. Em seguida, clique com o botão direito e escolha Ver fonte de seleção no menu de contexto do navegador.
Android
A visualização do código-fonte na versão Android do Firefox é possível, prefixando o URL da página da web com o seguinte texto: view-source:. Por exemplo, para ver o código HTML do Dotdash, você enviaria o seguinte texto na barra de endereços do navegador: view-source: https: //www.dotdash.com .
iOS
O nosso método recomendado para visualizar o código fonte da página da web no seu iPad, iPhone ou iPod touch é através do aplicativo View Source, disponível na App Store por US $ 0,99. Embora não seja integrado diretamente ao Firefox, você pode copiar e colar facilmente um URL do navegador no aplicativo para revelar o código HTML e outro código associado à página em questão.
Apple Safari
Executando no iOS e no MacOS
iOS
Embora o Safari para iOS não inclua a capacidade de visualizar a origem da página por padrão, o navegador se integra de forma bastante integrada ao aplicativo View Source, disponível na App Store por US $ 0,99.
Depois de instalar este aplicativo de terceiros, retorne ao navegador Safari e toque no botão Compartilhar, localizado na parte inferior da tela e representado por um quadrado e uma seta para cima. A folha de compartilhamento do iOS agora deve estar visível, sobrepondo a metade inferior da sua janela do Safari. Role para a direita e selecione o Ver fonte botão.
Uma representação estruturada codificada por cores do código-fonte da página ativa deve agora ser exibida, juntamente com outras guias que permitem visualizar recursos da página, scripts e muito mais.
Mac OS
Para visualizar o código-fonte de uma página na versão para desktop do Safari, você precisa primeiro ativar desenvolve cardápio. As etapas abaixo orientam você ao ativar esse menu oculto e exibir a fonte HTML de uma página.
-
Selecione Safári no menu do navegador, localizado na parte superior da tela.
-
Quando o menu suspenso aparecer, selecione o Preferências opção.
-
As Preferências do Safari agora devem estar visíveis. Clique no Avançado ícone, localizado no lado direito da linha superior.
-
Na parte inferior da seção Avançado, há uma opção chamada Mostrar o menu Desenvolver na barra de menus, acompanhado por uma caixa de seleção vazia. Selecione esta caixa uma vez para colocar uma marca de seleção e feche a janela Preferências clicando no 'x' vermelho encontrado no canto superior esquerdo.
-
Selecione os desenvolve menu, localizado na parte superior da tela.
-
Quando o menu suspenso aparecer, selecione Mostrar a origem da página. Você também pode usar o seguinte atalho de teclado: COMANDO + OPÇÃO + U.
Ópera
Executando em: Linux, macOS, Windows
Para visualizar o código-fonte da página da Web ativa no navegador Opera, use o seguinte atalho de teclado: CTRL + U (COMANDO + OPÇÃO + U no macOS). Se você preferir carregar a fonte na guia atual, digite o seguinte texto à esquerda do URL da página na barra de endereço e pressione Digite: view-source: ( ou seja, fonte de visualização: https: //www.Go-Travels.com ).
A versão desktop do Opera também permite visualizar fontes de HTML, CSS e outros elementos usando suas ferramentas de desenvolvedor integradas. Para iniciar essa interface, que por padrão aparecerá no lado direito da janela principal do navegador, pressione o seguinte atalho de teclado: CTRL + SHIFT + I (COMANDO + OPÇÃO + I no macOS).
O conjunto de ferramentas do desenvolvedor do Opera também pode ser acessado seguindo as etapas abaixo.
-
Selecione o logotipo do Opera, localizado no canto superior esquerdo da janela do seu navegador.
-
Quando o menu suspenso aparecer, passe o cursor do mouse sobre o Mais ferramentas opção.
-
Clique em Mostrar menu do desenvolvedor.
-
Selecione o logotipo do Opera novamente.
-
Quando o menu suspenso aparecer, passe o cursor sobre Desenvolvedor.
-
Quando o submenu aparecer, selecione Ferramentas de desenvolvimento.
Vivaldi
Existem várias maneiras de visualizar a origem da página no navegador Vivaldi. O mais simples é através do CTRL + U atalho de teclado, que apresenta o código da página ativa em uma nova guia.
Você também pode adicionar o seguinte texto à frente do URL da página, que exibe o código-fonte na guia atual: view-source:. Um exemplo disso seria fonte de visualização: http: //www.dotdash.com .
Outro método é através das ferramentas de desenvolvedor integradas do navegador, acessíveis pressionando o botão CTRL + SHIFT + I combinação ou através do Ferramentas de desenvolvimento opção no navegador Ferramentas menu - encontrado selecionando o V logotipo no canto superior esquerdo. Usar as ferramentas de desenvolvimento permite uma análise muito mais aprofundada da origem da página.
