Pesquisa de site

javascript - Editando no depurador do Chrome

Como faço para editar código JavaScript "dinamicamente" no depurador do Chrome? Não é para mim, então não tenho acesso ao arquivo de origem. Quero editar o código e ver quais efeitos ele tem na página, nesse caso, impedir que uma animação seja enfileirada várias vezes.

Resposta #1

Eu me deparei com isso hoje, quando estava brincando com o site de outra pessoa.

Percebi que poderia anexar um ponto de interrupção no depurador a alguma linha de código antes do que eu queria editar dinamicamente. E como os pontos de interrupção permanecem mesmo após um recarregamento da página, pude editar as mudanças que queria enquanto estava pausado no ponto de interrupção e então continuei para deixar a página carregar.

Então, como uma solução rápida, e se funcionar na sua situação:

  1. Adicione um ponto de interrupção em um ponto anterior no script
  2. Recarregar página
  3. Edite suas alterações no código
  4. CTRL + s (salvar alterações)
  5. Despausar o depurador

Resposta #2

Você pode usar "Substituições" no Chrome para persistir alterações em JavaScript entre os carregamentos da página, mesmo quando você não está hospedando o código-fonte original.

(Nas novas versões do Chrome, primeiro você precisará escolher uma pasta para salvar os arquivos de substituição.)

  1. Crie uma pasta em Ferramentas do Desenvolvedor > Fontes > Substituições
  2. O Chrome pedirá permissão para a pasta, clique em Permitir
  3. Edite o arquivo em Sources>Page e depois salve (ctrl-s). Um ponto roxo indicará que o arquivo foi salvo localmente.

Resposta #3

Você pode usar o depurador JavaScript embutido no Chrome Developer Tools na aba "Scripts" (em versões mais recentes é a aba "Sources"), mas as alterações que você aplicar ao código são expressas apenas no momento em que a execução passa por elas. Isso significa que alterações no código que não está sendo executado após a página carregar não terão efeito. Diferente, por exemplo, de alterações no código que reside nos manipuladores mouseover, que você pode testar imediatamente.

Há um vídeo do evento Google I/O 2010 apresentando outras funcionalidades do Chrome Developer Tools.

Resposta #4

Claro! Aqui está a resposta atualizada do Stack Overflow incluindo o feedback:

Substituições do Chrome

  1. Abra o arquivo JS no painel de fontes.

Clique com o botão direito na URL do script src > Revelar no painel de Fontes

  1. Selecione uma pasta para substituições. Clique em Selecionar pasta para substituições e escolha uma pasta local para salvar as substituições de arquivos.

  1. Ativar Substituições Locais. Certifique-se de que "Ativar Substituições Locais" está marcado.

  1. Salve o arquivo para substituições. Clique com o botão direito em qualquer lugar do arquivo JS > Salvar para substituições

Tudo pronto!

Basta editar o arquivo e salvar com CMD/CTRL + S. Agora, sempre que você atualizar a página, ele usará o arquivo modificado (desde que o nome do arquivo permaneça o mesmo).

Você saberá que está funcionando se vir um ponto roxo no ícone do arquivo.

Resposta #5

Isto é o que você está procurando:

1.- Navegue até a guia Fonte e abra o arquivo javascript

2.- Edite o arquivo, clique com o botão direito nele e um menu aparecerá: clique em Salvar e salve-o localmente.

Para visualizar a diferença ou reverter suas alterações, clique com o botão direito e selecione a opção Modificações Locais... no menu. Você verá a diferença das suas alterações em relação ao arquivo original se expandir o carimbo de data/hora exibido.

Mais informações detalhadas aqui: http://www.sitepoint.com/edit-source-files-in-chrome/

Artigos relacionados