O Google Chrome^{(Google Chrome)} foi projetado não apenas para usuários regulares da Internet, mas também para desenvolvedores da Web, que geralmente criam um site, criam blogs etc. A opção Inspecionar elemento^{(Inspect Element )} ou Inspecionar^{(Inspect )} do Google Chrome ajuda os usuários a encontrar algumas informações sobre um site que estão ocultos. . Aqui estão algumas dicas sobre como usar o Inspecionar Elemento^{(Inspect Element)} do navegador Google Chrome para Windows PC .

Inspecionar elemento do Google Chrome

1] Find hidden JavaScript/Media files

Muitos sites mostram pop-ups se o visitante permanecer na página por mais de 15 ou 20 segundos. Ou, muitas vezes, uma imagem, anúncio ou ícone abre após clicar em algum lugar aleatoriamente. Para encontrar esses arquivos ocultos em uma página da Web, você pode usar a guia Fontes de ^(Sources)Inspecionar elemento^{(Inspect Element)} . Ele mostra uma lista de visualização em árvore no lado esquerdo que pode ser explorada.

2] Get HEX/RGB color code in Chrome

Às vezes podemos gostar de uma cor e podemos querer descobrir seu código de cores. Você pode encontrar facilmente o código de cores HEX ou RGB usado em uma determinada página da Web, usando a opção nativa no Google Chrome . Clique com o botão direito do mouse^{(Right-click)} na cor e clique em Inspecionar^(Inspect) . Na maioria das vezes, você obterá o código de cores no lado direito com outro CSS . Se você não o vir, bem, talvez seja necessário usar algum software de seleção de cores gratuito.

DICA^(TIP) : Dê uma olhada nessas ferramentas online Color Picker^{(Color Picker online tools)} também.

3] Obtenha dicas de melhoria de desempenho da página da web^{(3] Get web page performance improvement tips)}

Todo mundo gosta de pousar em um site que abre rápido. Se você está projetando seu site, você deve sempre ter isso em mente. Existem muitas ferramentas para verificar e otimizar a velocidade de carregamento da página. No entanto, o Google Chrome^{(Google Chrome)} também vem com uma ferramenta embutida que permite aos usuários obter dicas para melhorar a velocidade de carregamento do site. Para acessar essas ferramentas, vá para a guia Auditorias^(Audits) e verifique se Utilização de rede^{(Network Utilization)} , Desempenho^{(Web Page Performance)} de página da Web e Recarregar página e Auditoria ao carregar^{(Reload Page and Audit on Load)} estão selecionados. Em seguida, clique no botão Executar^{(Run )} . Ele recarregará a página e mostrará algumas informações que podem ser usadas para tornar a página mais rápida. Por exemplo, você pode obter todos os recursos que não estão com expiração de cache, JavaScriptque podem ser combinados em um arquivo, e assim por diante.

4] Verifique a capacidade de resposta^{(4] Check responsiveness)}

Tornar uma página web responsiva é crucial, hoje em dia. Existem muitas ferramentas que podem verificar se o seu site é totalmente responsivo ou não. No entanto, essa ferramenta do Google Chrome ajuda os usuários a saber se o site é responsivo ou não , além de verificar como ficaria em um determinado dispositivo móvel. Abra qualquer site, acesse a guia Inspecionar elemento , clique no botão ^{(Inspect Element )}móvel^{(mobile )} , defina a resolução ou selecione o dispositivo desejado para testar a página da web.

5] Editar site ao vivo^{(5] Edit live website)}

Vamos supor que você esteja criando uma página da Web, mas está confuso sobre o esquema de cores ou o tamanho do menu de navegação ou o conteúdo ou a proporção da barra lateral. Você pode editar seu site ativo usando a opção Inspecionar elemento^{(Inspect Element)} do Google Chrome . Embora você não possa salvar as alterações em um site ao vivo, você pode realizar toda a edição para poder usá-lo ainda mais. Para fazer isso, abra Inspect Element , selecione a propriedade HTML do lado esquerdo e faça alterações de estilo no lado direito. Se você fizer alguma alteração no CSS , poderá clicar no link do arquivo, copiar o código inteiro e colá-lo no arquivo original.

Inspect Element do Google Chrome é um verdadeiro companheiro de cada desenvolvedor web. Não importa se você está desenvolvendo um site de uma página ou um site dinâmico, você certamente pode usar essas dicas.

Tips on using the Inspect Element of Google Chrome browser

Goоgle Chrome is designed not just for regular internet users but also for web developers, who often create a website, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome não responde, Relaunch agora?

• Como corrigir File Download Erros em Google Chrome browser

• Como mudar o Default Print Settings em Google Chrome

• Como Destroy Profile em Browser Close em Google Chrome

• Anna Assistant é um perfeito voice assistant para Google Chrome

• Fix ERR_SSL_PROTOCOL_ERROR em Google Chrome

• Como Create and Delete Profiles no navegador da Web Google Chrome

• Como impedir que os usuários instalem extensões no Google Chrome

• Fix ERR_SPDY_PROTOCOL_ERROR error em Google Chrome

• Como habilitar ou Disable Tab Scrolling Buttons em Google Chrome

• Google Chrome extensões não trabalhar em Windows 10

• Google Chrome Downloads ficando presos em 100%

• Como verificar o seu Internet Connection Speed usando Google Chrome

• Fix ERR_QUIC_PROTOCOL_ERROR em Google Chrome

• Como habilitar ou Disable rolável Tabstrip em Google Chrome

• Como habilitar e desativar o Window Naming em Google Chrome

• Ajuste o volume em Google Chrome tabs Separadamente usando Volume Master

• Seu perfil não pôde ser aberto corretamente em Google Chrome

• Como habilitar e usar Commander feature em Google Chrome

• Como instalar Google Chrome usando Windows PowerShell