pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

DevTools, ferramentas do seu navegador – Dicas e macetes

| 0 Comentários

O Desenvolvimento de um site sempre nos exige um número grande de ferramentas para facilitar nossas vidas. Dessa forma apresento algumas dicas de uma ferramenta que está no seu navegador Chrome. Se você é um desenvolvedor web certamente já usou a Dev Tools. Mas tenho certeza que ao menos duas das dicas abaixo você não conhece.

Editando seu CSS diretamente no navegador

Você certamente já editou seu HTML e CSS na guia Elements. Através dessa guia você só consegue alterar os valores individualmente dos elementos. Outra alternativa é você editar seu CSS pela guia Sources como se estivesse em um editor.

Editando seu arquivo de CSS pelo chrome

Forçando o estado de um elemento

No Chrome é possível forçar os seguintes estados: active, focus, hover ou visited.

Imagine a seguinte situação: você quer inspecionar um elemento para ver as regras CSS que estão associadas a esse elemento, porém essas regras só aparecem no estado hover do elemento. Como você pode passar o mouse sobre um elemento e ao mesmo tempo estar interagindo com a ferramenta do desenvolvedor(Dev Tools)?

Isso é possível fazer da seguinte forma: Inspecione o elemento; na aba Elements perceba que à direita você tem uma guia chamada de Styles. Clique no ícone da pequena seta no interior de uma caixa tracejada (Veja imagem abaixo). Agora escolha o estado que deseja inspecionar.

Forçando estado hover, active, focus no navegador

Pesquisa em todos os arquivos carregados

Dica de ouro… CTRL + SHIFT + F

Esta dica é para fazer uma pesquisa nos arquivos HTML , CSS e JS carregados pelo site (até os que foram carregados em tempo de execução). Por exemplo: digamos que você quer encontrar uma função JavaScript, porém você não sabe em qual arquivo externo a função está. Ao invés de abrir esses arquivos e procurar a função manualmente use a pesquisa Global. Todos os arquivos que foram baixados juntos à página atual aberta serão pesquisados.

Pesquisar todos arquivos carregados no Chrome

Analisar carregamento da página

Na aba Audits você pode analisar como uma página é carrega. A ferramenta fornece sugestões de otimizações para diminuir o tempo de download da sua página. Ele irá gerar um relatório mostrando que parte do seu site deve ser otimizado.

Para uma visão mais aprofundada, recomendo a instalação da extensão feita pelo Google PageSpeed Insights.

Analisar velocidade de carregamento pelo navegador

CSS e Javascript Minificado

Pretty print CSS e JavaScript permite que você converta aquele código JavaScript ou CSS minificado a partir de uma página da web em uma forma mais legível de entender.

Caso queira também pode salvar o arquivo modificado em seu computador. É só clicar com o botão direito sobre o arquivo modificado e ir em Save As

codigo javascript minificado

Quebra de linha no console

Pressionando CTRL + SHIFT no console do Chrome você apenas fará uma quebra de linha. Diferentemente de pressionar somente o enter, este executa algum comando ou funções no console. Uma vez que você digitou um bloco de texto, pressione a tecla Enter no final do comando e ele é executado.

Inserindo quebra de linha no console

Guarde seus Snippets no navegador

Pensando em guardar algum trecho de código usado com frequência?, No chrome isso é possível. Vá até a guia Sources e depois em Snippets.

No lado esquerdo você cria seus arquivos e no lado direito você escreve seus códigos. Para fazer seu código ser executado clique com o botão direito sobre o arquivo e vá em run. A função do exemplo abaixo ao ser executada mostra a largura e a altura do viewPort da janela do navegador.

Rodando snippets no navegador

ALT + Clique

Esta dica é interessante quando você for inspecionar o código HTML. Pressione ALT e clique ao mesmo tempo sobre a seta de uma div ou seta de um elemento HTML , isso vai expandir todos os seus elementos filhos.

Expandir HTML

Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Deixe uma resposta

Campos obrigatórios *.



*

Topo