Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Executar snippets de código em qualquer página

Fragmentos são scripts pequenos que você pode criar e executar dentro do painel Sources do Chrome DevTools. É possível acessar e executá-los em qualquer página. Ao executar um snippet, ele é executado no contexto da página atualmente aberta.

Se você usa pequenos utilitários ou scripts de depuração repetidamente em diversas páginas, considere salvar os scripts como snippets. Você também pode usar snippets como uma alternativa para bookmarklets.

TL;DR

  • Snippets são scripts pequenos que você pode executar em qualquer página (parecidos com os bookmarklets).
  • Execute partes de snippets no Console com o recurso "Evaluate in Console".
  • Lembre-se de que recursos populares do painel Sources, como pontos de interrupção, também funcionam com snippets.

Criar snippet

Para criar um snippet, abra o painel Sources, clique na guia Snippets, clique com o botão direito no Navigator e selecione New.

criar snippet

Insira seu código no editor. Quando tiver mudanças não salvas, o nome do seu script terá um asterisco próximo a ele, como na imagem abaixo. Pressione Command+S (Mac) ou Ctrl+S (Windows, Linux) para salvar as alterações.

snippet não salvo

Executar snippet

Existem três maneiras de executar um snippet:

  • Clique com o botão direito no nome do arquivo do fragmento (no painel à esquerda que lista todos os fragmentos) e selecione Run.
  • Clique no botão Run (botão run snippet 
).
  • Pressione Command+Enter (Mac) ou Ctrl+Enter (Windows, Linux).

Para avaliar uma parte do snippet no Console, destaque essa parte, clique com o botão direito em qualquer lugar no editor e selecione Evaluate in Console ou use o atalho de teclado Command+Shift+E (Mac) ou Ctrl+Shift+E (Windows, Linux).

avaliar no console

Visualizar modificações locais

Para visualizar uma comparação das modificações que fez em um snippet, clique com o botão direito no editor (com o snippet em exibição) e selecione Local modifications

modificações locais

Uma nova guia chamada History é exibida na gaveta do Console.

histórico do snippet

Cada timestamp representa uma modificação. Expanda o quilate próximo a uma marcação de data e hora para visualizar uma comparação das modificações nesse momento. O link revert remove o histórico de revisão. A partir de 27 de junho de 2016, os links apply revision content e apply original content parecem não funcionar como devem.

Definir pontos de interrupção

Assim como com outros scripts, você pode definir pontos de interrupção em snippets. Consulte Adicionar pontos de interrupção para saber como adicionar pontos de interrupção pelo painel Sources.