Novidades do DevTools (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub Falha

Esta é mais uma edição das notas da versão do DevTools. Assista ao vídeo (em inglês) abaixo ou continue lendo para conhecer 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 utilizados na nova guia Cobertura. Quando você carrega ou executar uma página, a guia informa quanto código foi usado em relação à quantidade carregado. Para reduzir o tamanho das suas páginas, envie apenas o código. de que precisa.

Guia "Cobertura"

Clique em um URL para revelar o arquivo no painel Origens com um detalhamento. quais linhas de código são executadas.

Um detalhamento da cobertura de código no painel Origens

Cada linha de código é codificada por cores:

  • Um verde constante significa que a 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 dessa linha foi executado. Por exemplo, um ternário expressão var b = (a > 0) ? a : 0 é exibida em vermelho e verde.

Para abrir a guia Cobertura, faça o seguinte:

  1. Abra o Menu de comando.
  2. Comece a digitar Coverage e selecione Mostrar cobertura.

Capturas de tela de página inteira

Confira o vídeo abaixo para aprender a fazer uma captura de tela do topo da página até o final.

Bloquear solicitações

Quer saber como sua página se comporta quando determinado script, folha de estilo ou outro recurso não está disponível? Clique com o botão direito do mouse na solicitação na coluna Network e selecione Bloquear URL de solicitação. Uma nova guia Bloqueio de solicitações é exibido na gaveta, que permite gerenciar as solicitações bloqueadas.

Bloquear URL de solicitação

Passar pelo async await

Até agora, tentar percorrer códigos como o snippet abaixo era uma dor de cabeça. Você estaria no meio de test(), pulando uma linha e depois o código setInterval() apareceria para você. Agora, quando você passar código assíncrono como test(), o DevTools avança da primeira até a última linha com consistência.

  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 aprimorar suas habilidades de depuração? Confira estes novos documentos:

Mudanças

Menu de comando unificado

Ao abrir o Menu de comando, observe que o comando tiver um caractere maior que (>) no início. Isso porque o comando O menu foi unificado com o menu Abrir arquivo, que é Command + O (Mac) ou Control + O (Windows e Linux).

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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