11 dicas para quem usa o Chrome como ambiente de desenvolvimento.
Então, por um motivo ou outro, você decidiu focar no Chrome ao desenvolver. Você abre as ferramentas do desenvolvedor e começa a depurar seu código.
Às vezes, você abre o console para ver a saída do programa ou a guia Elementos para verificar os estilos CSS dos elementos DOM.
Você é realmente bom no Chrome DevTools? Na verdade, as ferramentas de desenvolvedor têm muitos recursos poderosos que facilitam a vida, mas poucas pessoas sabem sobre eles.
Vou falar sobre os mais úteis.
Vamos começar examinando o menu de comandos. O menu de comando no Chrome é como o shell de comando no Linux. Nele, você pode escrever comandos para controlar o Chrome.
Abra as Ferramentas do desenvolvedor do Chrome. Para acessar o menu de comando, use as teclas de atalho:
- Windows ： Ctrl + Shift + P
- macOS ： Cmd + Shift + P
Você também pode abri-lo por meio de uma interface gráfica, como esta:
Nesta área você pode ver uma longa lista de comandos que dão acesso a muitas funções úteis.
Recursos avançados de captura de tela
Você tem que fazer capturas de tela de uma parte da tela com frequência, e não tenho dúvidas de que programas convenientes estão instalados em seu computador para isso. Eles podem:
- tirar uma captura de tela de toda a página, incluindo conteúdo fora da janela de visualização?
- pegar o conteúdo de um único elemento DOM?
Freqüentemente, isso é necessário, mas a maioria das ferramentas do sistema para criar capturas de tela não dá conta dessas tarefas. Felizmente, temos comandos do Chrome dedicados para fazer capturas de tela como esta.
Aqui estão eles:
- Captura de tela Captura de tela em tamanho real
- Captura de tela Captura de tela do nó
Exemplo
Abra qualquer página da web, como os artigos mais populares de JavaScript em Medium: medium.com/tag/javascript .
Abra o menu de comando e execute o comando
Screenshot Capture full size screenshot.
Tiramos um instantâneo de toda a página atual por completo.
A captura de tela original tem boa qualidade, mas aqui eu carreguei uma imagem compactada para economizar sua largura de banda.
Se quiser fazer uma captura de tela de um elemento DOM, você pode usar as ferramentas do sistema, mas elas não conseguirão capturar o elemento perfeitamente. O Chrome tem um comando dedicado para isso
Capture node screenshot.
Primeiro abra a guia Elementos e selecione o elemento desejado. Em seguida, execute o comando.
Aqui está o resultado:
Usando o resultado da última operação no console
Freqüentemente, depuramos o código no console. Digamos que você queira saber como reverter uma string em JavaScript. Você está procurando as informações de que precisa na Internet e se depara com este pedaço de código. Sim, este código inverte a linha. Mas você ainda não está claro como o método funciona , , e que resultado dá a cada um deles. Você pode percorrer esse código passo a passo, escrevendo-o mais ou menos assim: Agora sabemos qual valor cada método retorna. Mas por que escrever tanto? É fácil cometer um erro em uma entrada tão longa e difícil de entender. Deixe-me contar um segredo: há uma variável mágica no console que armazena o resultado da última operação.
'abcde'.split('').reverse().join('')
split()reverse()join()
$_
$_É uma variável especial cujo valor é sempre igual ao resultado da última operação realizada no console. Esse truque torna o processo de depuração muito mais fácil.
Reenviar solicitação XHR
Em projetos de front-end, geralmente você precisa usar XHR para enviar solicitações para receber dados do servidor. E se eu precisar reenviar minha solicitação?
Desenvolvedores inexperientes atualizam a página, mas isso é muito inconveniente. No Chrome, podemos depurar o código diretamente na guia Rede.
- Abra a guia Rede.
- Pressione o botão XHR.
- Selecione a solicitação XHR que deseja reenviar.
- Selecione Reproduzir XHR no menu de contexto para reproduzir a solicitação.
Aqui está um exemplo animado:
Rastrear o status de carregamento da página
Pode levar mais de dez segundos para a página carregar totalmente. Nesses casos, você precisa controlar o processo de carregamento da página em cada momento.
No Chrome DevTools, você pode fazer capturas de tela de uma página enquanto ela está carregando, marcando a caixa
Capture Screenshotsao lado da guia Rede.
Selecione a captura de tela para ver informações sobre as solicitações de rede correspondentes. Essa visualização dará a você uma melhor compreensão das solicitações de rede enviadas ao servidor em momentos específicos.
Copiando Variáveis
Você sabe como copiar o valor de uma variável JavaScript para a área de transferência?
Parece uma tarefa impossível, mas o Chrome oferece uma função especial para resolvê-la
copy.
ECMAScript não contém uma definição para a função de cópia, é uma função do Chrome. Ele pode ser usado para copiar o valor de uma variável JavaScript para a área de transferência.
Copiar uma imagem como URI com o prefixo "data:"
Existem duas maneiras de inserir uma imagem em uma página: você pode criar um link para um arquivo externo ou incorporar uma imagem usando os dados: URL .
Dados: URL ( URL com prefixo
data:) é um esquema que permite que pequenos arquivos sejam incorporados em um documento como elementos embutidos. Costumava ser chamado de "dados: URI", mas o WHATWG descartou esse nome.
Incorporar pequenas imagens diretamente nos dados: o esquema de URL reduz o número de solicitações HTTP para o servidor, o que torna o carregamento da página mais rápido.
Como faço isso no Chrome?
Veja a animação:
Saída de uma matriz de objetos para uma tabela
Digamos que temos uma matriz de objetos:
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]
Perceber essas informações no console é difícil. E se a matriz for mais longa e contiver elementos mais complexos, será ainda mais fácil se perder nela.
Felizmente, o Chrome tem uma função que gera uma série de objetos em uma tabela.
Será útil para você, e mais de uma vez.
Arrastando na guia Elementos
Às vezes, você precisa mover alguns elementos DOM na página para testar a interface do usuário. Na guia Elementos, você pode arrastar qualquer elemento HTML para qualquer lugar no código:
Neste exemplo, arrastei um elemento na guia Elementos e sua posição na página da web também mudou instantaneamente.
Fazendo referência ao item atualmente selecionado no console
$0 É outra variável mágica que contém o elemento selecionado na guia Elementos.
Ativando pseudo classes CSS
As pseudoclasses permitem definir o estilo de um elemento não apenas com base em sua localização na árvore do documento, mas também dependendo de fatores externos, como histórico de navegação (por exemplo : visitado ), estado do conteúdo (por exemplo : verificado em algumas formas), posição do ponteiro o mouse (por exemplo, a pseudoclasse: hover muda o estilo do elemento quando você passa o mouse sobre ele).
Várias pseudo classes podem ser escritas para um elemento. Para facilitar o teste de estilos, as pseudo classes podem ser ativadas diretamente na guia Elementos.
Exemplo
Observe o código da página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 150px;
}
div:hover{
color: red;
}
div:active{
color: blue;
}
div:focus{
color: brown;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>Abrimos a página em um navegador, verificamos como funcionam as pseudo-classes na guia Elementos e fazemos as alterações, se necessário.
Atalho para esconder itens
Ao depurar estilos CSS, geralmente é necessário ocultar um elemento. O Chrome faz isso rapidamente: você só precisa selecionar um item e pressionar uma tecla
H.
Pressione H no teclado.
Esta operação aplica um estilo a um elemento
visibility: hidden !important;.
Armazenando elemento DOM como uma variável global temporária
Se quisermos referenciar rapidamente um elemento DOM no console, podemos fazer assim:
- Selecione um item.
- Abra o menu de contexto com o botão direito do mouse.
- Selecione Armazenar como uma variável global.
