Novidades do DevTools (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

Confira mais uma edição das notas de lançamento do DevTools. Assista o vídeo abaixo ou continue lendo para saber as novidades do Chrome DevTools no Chrome 59.

Destaques

Novos recursos

Cobertura de código CSS e JS

Encontre códigos CSS e JS não usados com a nova guia Cobertura. Ao carregar ou executar uma página, a guia informa quanto código foi usado em comparação com o que foi carregado. É possível reduzir o tamanho das páginas enviando apenas o código necessário.

Guia "Cobertura"

Ao clicar em um URL, o arquivo é mostrado no painel Origens com um detalhamento das linhas de código executadas.

Um detalhamento da cobertura de código no painel "Origens"

Cada linha de código é codificada por cores:

  • Verde significa que essa linha de código foi executada.
  • Vermelho sólido significa que ele não foi executado.
  • Uma linha de código vermelha e verde, como a linha 3 na captura de tela acima, significa que apenas parte do código nessa linha foi executada. Por exemplo, uma expressão ternária como var b = (a > 0) ? a : 0 é colorida em vermelho e verde.

Para abrir a guia Cobertura:

  1. Abra o Command Menu (link em inglês).
  2. Comece a digitar Coverage e selecione Mostrar cobertura.

Capturas de tela de página inteira

Confira o vídeo abaixo para saber como fazer uma captura de tela do topo até a parte de baixo da página.

Bloquear solicitações

Quer saber como sua página se comporta quando um script, uma folha de estilo ou outro recurso não está disponível? Clique com o botão direito do mouse na solicitação no painel Rede e selecione Bloquear URL da solicitação. Uma nova guia Bloqueio de solicitações aparece no painel, permitindo que você gerencie as solicitações bloqueadas.

URL de solicitação de bloqueio

Pular async await

Até agora, tentar percorrer um código como o snippet abaixo era um problema. Você estaria no meio de test(), passando por cima de uma linha, e seria interrompido pelo código setInterval(). Agora, quando você percorre códigos assíncronos como test(), o DevTools percorre da primeira à última linha de forma consistente.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

P.S.: quer melhorar suas habilidades de depuração? Confira estes documentos novos:

Mudanças

Menu de comandos unificado

Ao abrir o Menu de comandos agora, observe que o comando é precedido por um caractere maior que (>). Isso acontece porque o Menu de comandos foi unificado com o menu Abrir arquivo, que é Command+O (Mac) ou Control+O (Windows, Linux).

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.