Novidades do DevTools (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub Falha

Esta é outra parcela das notas da versão do DevTools. Assista o vídeo abaixo ou continue lendo para ver 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 com a nova guia Cobertura. Quando você carrega ou executa uma página, a guia informa quanto código foi usado e quanto 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 é revelado no painel Origens com um detalhamento de quais linhas de código foram executadas.

Detalhes sobre a cobertura de código no painel Origens

Cada linha de código é codificada por cores:

  • Verde constante significa que a linha de código foi executada.
  • Vermelho constante significa que ela não foi executada.
  • 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 executada. Por exemplo, uma expressão ternária como var b = (a > 0) ? a : 0 é de cor vermelha e verde.

Para abrir a guia Cobertura, siga estas etapas:

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

Capturas de tela de página inteira

Confira o vídeo abaixo para aprender como fazer uma captura de tela da parte superior até a parte inferior da página.

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 no painel Rede e selecione Bloquear URL de solicitação. Uma nova guia Request block é exibida na gaveta, que permite gerenciar solicitações bloqueadas.

Bloquear URL da solicitação

Pular as etapas de espera assíncrona

Até agora, tentar percorrer o código como o snippet abaixo era uma dor de cabeça. Você estaria no meio de test(), caminhando em uma linha, e seria interrompido pelo código setInterval(). Agora, quando você percorre um código assíncrono como test(), o DevTools segue da primeira à ú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 documentos novos:

Mudou

Menu de comando unificado

Ao abrir o Command Menu agora, observe que seu comando é prefixado por um caractere maior que (>). Isso ocorre porque ele foi unificado com o menu Open File, que é Command+O (Mac) ou Control+O (Windows, 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59