Need help? Chat now!

Hostwinds Blog

Resultados da busca por:


Algumas dicas para o novato do Google Chrome DevTools Imagem em destaque

Algumas dicas para o novato do Google Chrome DevTools

por: Hostwinds Team  /  agosto 31, 2019


O que há para dizer sobre o Google no momento presente? A maioria dos fatos sobre o Google já foi, bem, googled por muitos. Consequentemente, um pedaço decente das informações sobre o Google já circulou o mundo muitas vezes por enquanto.

Não se preocupe, pouparemos de você os fatos aleatórios do Google, por exemplo, como foi inicialmente chamado de "Backrub".Como alternativa, vamos examinar algo sobre o Google, ou melhor o navegador do Google Chrome, que é um pouco menos conhecido: o livre ferramentas de codificação incorporadas na essência do Chrome.

Estamos nos referindo ao que é conhecido como Ferramentas de desenvolvedor do Google Chrome. Essas ferramentas permitem que alguém teste, depure ou solucione problemas de todo o código no local. DevTools Chrome, como são comumente chamados, são um recurso fantástico para desenvolvedores de software.

Você pode se surpreender com o quanto se pode realizar usando esses utilitários gratuitos. Hoje, abordaremos apenas algumas das vantagens que as Ferramentas do desenvolvedor do Google Chrome têm a oferecer.

Observe: Este é um resumo muito condensado e não cobre tudo.Não vamos nem arranhar a superfície em relação à miríade de opções que você tem disponível ao usar DevTools Chrome.

Ok, pessoal, embora este seja um breve resumo, ainda temos muito chão para cobrir.Vamos começar a abrir uma janela do Google Chrome e abrindo nossos DevTools Chrome!

Como abrir o Google Chrome DevTools

Em primeiro lugar, vamos tirar isso do caminho: Google Chrome DevTools é totalmente ótimo.Isso é verdade por muitas razões, sendo uma como essas ferramentas são fáceis de acessar.

O seguinte representa as várias maneiras de abrir o Chrome DevTools:

Sua primeira opção: Clique nas elipses verticais à direita do seu navegador >> Clique em "Mais ferramentas" >> Clique em "Ferramentas do desenvolvedor".

Sua segunda opção: Clique com o botão direito na página >> Clique no elemento "Inspecionar"

Sua terceira opção, edição de teclas de atalho: Digite "Ctrl" + "Shift" + "i" no seu teclado

(Para Macintosh: "cmd" + "opt" + "i")

Quarta opção de bônus, edição de teclas de atalho: Digite F12 no seu teclado.

Hooray! Estamos no negócio, amigos!

Agora, antes de começarmos nosso tutorial, você tem alguma chance ciente de que Chrome Devpools foi brevemente discutido em uma postagem anterior do blog do hostwinds sobre temas infantis do WordPress?

Se não, hoje é seu dia de sorte! Temos os links para as Partes 1 e 2 de nossa série de blogs de temas infantis WordPress aqui:

Temas infantis do WordPress e por que usá-los

Hostwinds How-to's: Como fazer um tema infantil do WordPress

Nota: Exploraremos o Chrome DevTools passando do painel mais à esquerda na parte superior da janela para o painel mais à direita.

Introdução ao Chrome DevTools

Vamos seguir em frente, equipe.Não há tempo para piadas de pai e trocadilhos de hoje!

Espere, falamos muito cedo! Sempre reservamos tempo para piadas e trocadilhos piegas. No entanto, permita-nos direcionar sua atenção para o ícone do cursor no canto superior esquerdo da janela do DevTools.

Ícone do Cursor

Vendo como o ícone do cursor foi criado naquela série de blog do WordPress Child Theme, continuamos trazendo, por que as palavras picadas quando podemos puxar essa citação?

"[...] Se você clicar com o botão direito em qualquer página da Web, clique em" Inspecionar ", em seguida, clique no pequeno ícone do cursor no canto esquerdo das ferramentas do desenvolvedor, você pode clicar em qualquer elemento na sua página para ver o pedaçode código criado. "

P.S. Esse é um trecho da Parte 2 da série de blogs de temas infantis do WordPress.

O que é isso?Estamos conectando a série WordPress blog inteiramente demais neste momento?Faremos o nosso melhor para tonificar de volta se movendo para a frente ... mas sem promessas.Eu estava apenas brincando!Somos apenas bobo.

No Exemplo 1, estamos usando o ícone do cursor para encontrar o código responsável pelo "meu blog".Estamos mudando o texto para "minha turnê!"

No Exemplo 2, usamos o ícone do cursor para encontrar o código responsável pelo "Hello World!"Estamos mudando o texto para "Oi World!"

Para o próximo! À direita, vamos.

Modo Dispositivo

O ícone do modo de dispositivo permite que você veja como seu site funcionará em vários dispositivos.

Depois de clicar no menu suspenso "Responsive", você pode clicar, por exemplo, "iPad" ou "iPhone X" para ver o que seu site será parecido em um iPad ou iPhone X, respectivamente.Seu site é responsivo em todos os dispositivos?Esta ferramenta lhe dará a resposta.

Compreendendo os painéis do Chome DevTools

Para o evento principal!

Espere, primeiro plugues desavergonhados:

Você é novo no desenvolvimento de software? Em caso afirmativo, aqui estão alguns posts do blog Hostwinds que o ajudarão a começar com um pouco de informações HTML e CSS:

Hostwinds HTML Hype

Hostwinds HTML Hype - Parte 2: Tag Talk

Hostwinds CSS Chat

"Elementos" painel, aqui chegamos!

Elements

Na guia Elementos, vá em frente e passe o mouse sobre qualquer linha de código. Você vê a caixa azul transparente correspondente que aparece ao redor da linha de código e O elemento na página afetada por essa linha de código?Essa é a beleza deste painel.Você pode identificar qual o pedaço de código afeta o quê.O HTML vemos aqui é chamado de 'código-fonte'.

No painel Elementos, podemos alterar ou editar seu HTML ou CSS. A melhor parte é esta: podemos ver as mudanças como se estivessem vividas em nosso site. Para afirmar que diferentemente, depois que você alterar o código e push enter, seu navegador simulará imediatamente o resultado dessa mudança como se estivesse ao vivo no seu site.

Confira o painel "estilos" que abre quando você clica no painel de elementos.Esta seção exibe o CSS que complementa o HTML coletivo do seu site.Editar / modificar as propriedades CSS aqui (da mesma forma que você fez seu HTML) para ver como essa alteração aparecerá ao vivo no site.

Enquanto estamos no painel Estilos, role para baixo até o final. Observe os tipos de bonecas russas na forma de retângulos de cores diferentes.

Esses retângulos representam algo sobre cada um dos seus elementos, conforme descrito abaixo:

Retângulo Azul Transparente = O próprio elemento

Retângulo Verde Transparente = O preenchimento ao redor do elemento

Retângulo Amarelo Transparente = O tamanho da fronteira do elemento

Retângulo Laranja Transparente = A margem em torno do elemento

Como experimento, vá em frente e clique no ícone do cursor novamente e paira sobre várias áreas em sua página. Observe como as cores puras que cercam várias partes do seu site correspondem às cores dos retângulos que acabamos de falar.

Agora clique no ": HPV" Ícone na barra de navegação na parte superior do painel de estilos.Aqui você tem um atalho que permite adicionar imediatamente um "foco", "pairar", etc., efeito para o (s) seletor (s) de CSS de sua escolha.

Se olharmos para o direito de elementos, veremos "console".

Console

A seção "Console" permite digitar comandos javascript para testá-los.Mais uma vez, seu navegador exibirá o resultado hipotético desse comando como se estivesse ao vivo.

Que alívio ter a opção de testar suas funções JavaScript sem alterar seu site real de qualquer maneira!A seção Console também é útil quando você depura seu código.Se algo no seu site não estiver funcionando corretamente, este painel fornece diagnósticos sobre o que pode potencialmente ser o problema.Além disso, possíveis correções para o problema são exibidas aqui.

Dica para aprofundar seu conhecimento sobre este importante painel: Procure as funções "console.log ()" e "Time ()".

Aqui vamos nós novamente, movendo-se para a direita.Olá, "Fontes" painel!

Fontes

"Fontes" ajuda a digitalizar por bugs em JavaScript e, posteriormente, fazer alterações em seu JS, bem como seu CSS.Esta seção permite que você defina pontos de interrupção para identificar exatamente onde ocorreu o bug.Você também pode navegar convenientemente pelos arquivos do seu site aqui.

Agora que limpamos todos os buggies em nosso código, vamos rever as informações de tempo de carregamento do nosso site clicando na guia "Rede".

Rede

"Rede" gera uma análise detalhada sobre como suas páginas da web estão sendo carregadas.Para ser mais específico, esta área oferece estatísticas sobre o tempo de carregamento de cada elemento individual, um por um.

É chamado de "Rede", porque quando você considera quanto tempo leva para cada elemento carregar, você pode descobrir o que está causando uma questão de rede se surgir.

Por favor, mova-se conosco para a direita e clique em "Desempenho".

atuação

Seu painel de desempenho exibe um resumo do desempenho de tempo de execução do seu site, incluindo informações de renderização e script.Para esse fim, algumas definições parecem estar em ordem aqui.

Definição de Renderização: Quando seu site "renderiza", ele mostra seu visualizador o resultado do front-end de todas as informações que foram colocadas juntas (incluindo código, itens em um banco de dados, etc.) para fazer sua página da web.Quão rápido o seu site renderiza informações é avaliada no painel de desempenho.

Definição de script: O script é quando você faz algo automático através de algum código ou função.Por exemplo, digamos que você faça, então seu site de blog hipotético registra automaticamente quando você publicou cada postagem do blog.Uma linguagem de script faria o "script" que tornaria este processo automático, aliviando-o de manualmente exibindo o tempo que você publicou cada blog.

Se você clicar no botão "Record", receberá uma visão geral da memória, número do documento, etc.

O que vem a seguir, você pergunta?Ainda mais explicações das guias DevTools!Para "memória".

Aprofundando nossa compreensão dos painéis DevTools

A seção "Memória" é onde fica emocionante e interativo.

Memória

Este painel pode ajudá-lo a detectar possíveis problemas de memória.Isso mostra quanto a cada componente do seu site está ocupando memória.Você pode visualizar a memória em seu site com o botão azul "pegar um instantâneo".

O que é isso?Você está ansioso para saber o que o próximo painel faz, então você quer seguir para a direita?Você entendeu.À direita, vamos!

Inscrição

Este painel é sobre armazenamento. Ou seja, quanto armazenamento está sendo usado por seus bancos de dados, aplicativos, cookies, etc. Seu site está paralisado e lento porque você está armazenando muito? Este painel o ajudará com esses tipos de perguntas.

À direita disso, temos "segurança".

Segurança

Como você pode ter adivinhado, esta seção fornece uma avaliação do nível de segurança atualmente estabelecido para o seu site.Em outras palavras, oferece informações sobre como é seguro o seu site neste momento.Por exemplo, este painel irá alertá-lo se o URL do seu site não tiver os "s" em "https".

Estamos quase prontos!Agora vamos auditar a funcionalidade do nosso site.

Auditorias

A área "Audits" representa uma auditoria de páginas e aplicativos em seu site.Esta auditoria permitirá que você saiba se suas páginas da Web estão carregando corretamente.O painel de auditorias é útil para fins de SEO e para verificar o desempenho geral do seu site.

Se você olhar bem à direita da janela, verá um ícone de reticências laterais. Clique aqui para ver ainda mais ferramentas! Por falar nisso, há muito mais que você pode fazer com o Chrome DevTools, mas estamos sem tempo hoje. Assim, isso é tudo para nosso rápido tutorial.

Surpresa! Guardamos as piadas engraçadas até o fim, só para você

É chegado o momento de concluirmos, queridos amigos. Esta é a melhor maneira de resumir este artigo: As Ferramentas do desenvolvedor do Google Chrome são mágica! Espere, há mais alguma coisa a acrescentar?

* Pensando ... pensando ... pensando *

Ai sim!Nós prometemos a você piadas e trocadilhos de pai, então adivinhe o que?Você está recebendo uma piada de pai brega e um trocadilho bem aqui, pessoal! Nunca fazemos promessas vazias aqui na Hostwinds.

Piada de papai fedorento e Pun All in One: Parabéns por completar nosso tutorial Chrome DevTools. Nós lhe daremos uma medalha de ouro para atravessar a linha de chegada, mas Metal CHROME pode ser mais apropriado!

Uau, aquele foi difícil. De qualquer forma, esperamos que você tenha gostado desta pequena visão geral de alguns recursos, dicas e sugestões do Chrome DevTools. Clique com o botão direito no seu site para brincar com as encantadoras Ferramentas do desenvolvedor do Google Chrome hoje mesmo!

Escrito por Hostwinds Team  /  agosto 31, 2019