Executar trechos do JavaScript em qualquer página da Web

Se você estiver inserindo o mesmo código na ferramenta Console repetidamente, considere salvar o código como um snippet e, em seguida, executar o snippet. Snippets são scripts que você cria na ferramenta Fontes . Os trechos têm acesso ao contexto JavaScript da página da Web e você pode executar trechos em qualquer página da Web. Os trechos podem ser usados para alterar uma página da Web, como alterar seu conteúdo ou aparência, ou para extrair dados.

A captura de tela a seguir mostra o Microsoft Edge com uma página da Web à esquerda e o DevTools à direita. A ferramenta Fontes está aberta, exibindo o código-fonte do trecho selecionado na guia Trechos . O código do snippet foi executado, fazendo alterações na página da web:

O código-fonte do snippet é mostrado abaixo:

// Change the background color to "dimgrey".
document.body.style.backgroundColor = "dimgrey";

// Add a paragraph at the bottom of the document.
const p = document.createElement("p");
p.textContent = "Hello world";
p.style.color = "white";
p.style.fontSize = "2rem";
document.body.appendChild(p);

// Log a message to the console.
console.log("Hello world");

O código altera a cor da tela de fundo da página da Web para cinza escuro, adiciona uma nova linha de texto na parte inferior da página da Web e registra uma mensagem na ferramenta Console .

Quando você executa um trecho em uma página da Web, o código-fonte do trecho é adicionado à página da Web atual. Para obter mais informações sobre como alterar o código existente de uma página da Web em vez de adicionar um novo código, consulte Substituir recursos da página da Web por cópias locais (guia Substituições).

Inclua todo o seu código em um arquivo

As configurações de segurança da maioria das páginas da Web impedem o carregamento de outros scripts em snippets. Por esse motivo, você deve incluir todo o código em um arquivo.

Abrir a guia Trechos

A guia Snippets é agrupada com a guia Page no painel Navigator , à esquerda da ferramenta Sources .

Para abrir a guia Trechos de Códigos :

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

2. No DevTools, na Barra de Atividades, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais ferramentas ().

   

3. No painel Navegador (à esquerda), selecione a guia Trechos de Códigos . Para acessar a opção Snippets , talvez seja necessário clicar no botão Mais guias ().

Abra a guia Trechos no Menu de Comando

Você também pode abrir a guia Trechos usando o Menu de Comando:

1. Selecione qualquer coisa no DevTools, para que o DevTools tenha foco.

2. Pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando.

3. Comece a digitar "snippets", selecione Mostrar Snippets e pressione Enter para executar o comando:

   

Criar um trecho

Você pode criar um snippet de dentro da ferramenta Snippets ou executando o comando Criar novo snippet no Menu de Comando em qualquer lugar no DevTools.

O painel Snippets classifica seus snippets em ordem alfabética.

Criar um trecho na ferramenta Fontes

Para criar um novo trecho na guia Trechos de Código :

1. Abrir a guia Trechos de Código.

2. Clique em Novo trecho (+).

3. Insira um nome para o trecho e pressione Enter:

   

Criar um trecho no Menu de Comando

1. Concentre o cursor em algum lugar no DevTools.

2. Pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando.

3. Comece a digitar "snippet", selecione Criar novo snippet e pressione Enter:

   

Para renomear o novo trecho, consulte Renomear um trecho, abaixo.

Editar um trecho

Para editar o código-fonte de um trecho:

1. Abrir a guia Trechos de Código.

2. Na guia Trechos de Código , clique no nome do trecho que você deseja editar. O trecho é aberto no Editor de Código:

   

3. Use o Editor de código para adicionar JavaScript ao snippet.

4. Quando um asterisco aparece ao lado do nome do snippet, significa que você tem um código não salvo. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS) para salvar:

   

Permitir colar no editor de snippet

Quando você tenta colar o conteúdo na ferramenta >Fontes Guia >Snippets editor de snippets, em vez de colar, uma caixa de diálogo Você confia neste código? é exibida, com a mensagem: "Não cole o código que você não entende ou não revisou no DevTools. Isso pode permitir que invasores roubem sua identidade ou assumam o controle do seu computador. Digite "permitir colagem" abaixo para permitir a colagem."

Esse aviso ajuda a evitar ataques de script entre sites (auto-XSS) em usuários finais. Para colar código, primeiro digite permitir colar na caixa de texto da caixa de diálogo e clique no botão Permitir . Em seguida, cole o conteúdo. Ou inicie o Edge com o sinalizador abaixo.

Colar na ferramenta Console é semelhante; consulte Permitir colar no console em Executar JavaScript no console.

Desabilitar avisos de auto-XSS iniciando o Edge com um sinalizador de linha de comando

Para evitar os avisos acima e permitir imediatamente a colagem na ferramenta Console e no editor de snippet da ferramenta Fontes, como para testes automatizados, inicie o Microsoft Edge a partir da linha de comando, usando o seguinte sinalizador: --unsafely-disable-devtools-self-xss-warnings O sinalizador se aplica a uma única sessão do Microsoft Edge.

Por exemplo, no Windows:

Edge Estável:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Beta:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Beta\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Desenvolvimento do Edge:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Dev\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Canary:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Executar um trecho

Execute um trecho da ferramenta Fontes

1. Abrir a guia Trechos de Código.

2. Clique no nome do trecho que você deseja executar. O trecho é aberto no Editor de Código:

3. Clique no botão Executar trecho () ou pressione Ctrl+Enter (Windows, Linux) ou Command+Enter (macOS):

   

Executar um trecho no Menu de Comando

1. Concentre o cursor em algum lugar no DevTools.

2. Pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando.

3. Exclua o > caractere e digite o caractere ! seguido pelo nome do trecho que você deseja executar:

   

4. Pressione Enter para executar o snippet.

Renomear um trecho

1. Abrir a guia Trechos de Código.

2. Clique com o botão direito do mouse no nome do snippet e selecione Renomear.

Excluir um trecho

1. Abrir a guia Trechos de Código.

2. Clique com o botão direito do mouse no nome do snippet e selecione Remover.

Salvar um trecho em disco como um arquivo

Por padrão, os snippets só estão disponíveis no DevTools, mas você também pode salvá-los em disco.

1. Abrir a guia Trechos de Código.

2. Clique com o botão direito do mouse no nome do snippet e selecione Salvar como.

   A caixa de diálogo Salvar como é aberta.

3. Selecione uma pasta, digite um nome de arquivo (como Script snippet #1.js) e clique no botão Salvar .

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.