Ferramentas de desenvolvimento do Chrome - Modifique o javascript e recarregue

192

É possível modificar o JavaScript de uma página e recarregá-la sem recarregar o arquivo JavaScript modificado (e, portanto, perdendo modificações)?

javascript google-chrome-devtools

— CDT
fonte

216

Isso é um pouco complicado, mas uma maneira de conseguir isso é adicionando um ponto de interrupção no início do arquivo javascript ou no bloco que você deseja manipular.

Então, quando você recarregar, o depurador fará uma pausa nesse ponto de interrupção e você poderá fazer as alterações desejadas na fonte, salvar o arquivo e, em seguida, executar o depurador através do código modificado.

Mas, como todos disseram, a próxima recarga desaparecerá - pelo menos, vamos executar um lado do cliente JS ligeiramente modificado.

— Ashley Schroder
fonte

10

Acontece que esta foi a resposta que eu estava procurando. Coloque um ponto de interrupção na primeira linha do código javascript. Então, quando a interrupção acontecer, cole seu código modificado lá. Pausar e funciona!

— Nicholas Blasgen

como você edita ou cola código lá? Definitivamente, não vejo essa funcionalidade no console do Chrome. Eu posso editar JS / HTML na seção Elementos, mas isso não é recarregado automaticamente. Mas no local em que os pontos de interrupção são definidos, isso parece ser somente leitura

— Josh Sutterfield

Infelizmente, essa ainda não é uma ótima solução. Qualquer código adicionado não está disponível no console. Por exemplo, adicionar var foo = 'bar'um script não expõe fooao console.

— AgmLauncher

o que há com scripts externos? pontos de interrupção parecem desaparecer deles.

— 27616 OlehZiniak

Isso funciona desde que você deseje modificar scripts carregados externamente, nem o Chrome nem as ferramentas de depuração do FireFox permitirão modificar o javascript embutido, mesmo que sua execução seja interrompida com um ponto de interrupção.

— Marek

146

Boas notícias, a correção está chegando em março de 2018, veja este link: https://developers.google.com/web/updates/2018/01/devtools

"Substituições locais permitem fazer alterações no DevTools e mantê-las durante o carregamento da página. Anteriormente, quaisquer alterações feitas no DevTools eram perdidas quando você recarregava a página. As substituições locais funcionam para a maioria dos tipos de arquivo

Como funciona:

Você especifica um diretório em que o DevTools deve salvar as alterações. Quando você faz alterações no DevTools, o DevTools salva uma cópia do arquivo modificado no seu diretório.
Quando você recarrega a página, o DevTools exibe o arquivo modificado local, e não o recurso de rede.

Para configurar substituições locais:

Abra o painel Origens.
Abra a guia Substituições.
Clique em Substituições de instalação.
Selecione em qual diretório você deseja salvar suas alterações.
Na parte superior da sua janela de exibição, clique em Permitir para dar ao DevTools acesso de leitura e gravação ao diretório.
Faça as alterações. "

ATUALIZAÇÃO (19 de março de 2018): está ao vivo, explicações detalhadas aqui: https://developers.google.com/web/updates/2018/01/devtools#overrides

— Nico
fonte

12

Com o lançamento do Chrome 65, essa deve ser a nova resposta aceita. (A funcionalidade já estava disponível no Chrome Canary)

— Micros

1

Eu tenho um arquivo "a.js? Ver = 1.2". Ele é salvo na pasta de substituição como "a.js" e não é carregado como uma substituição. Não funciona quando existem parâmetros? Existe uma solução alternativa?

— Ralf

Funciona como planejado, mas precisa cuidar de uma coisa. Você precisa limpar as configurações de substituição ou excluir o arquivo modificado localmente (salvo na pasta especificada durante a configuração de substituições) quando desejar carregar seus js originais.

— Muhammad Murad Haider

61

A extensão Substituição de Recurso permite fazer exatamente isso:

crie uma regra de arquivo para o URL que você deseja substituir
edite o js / css / etc na extensão
recarregue quantas vezes quiser :)

— Laktak
fonte

1

Fez o truque para mim, obrigado. Eu costumava usar o Fiddler para Windows antes dessa extensão. No momento, posso depurar arquivos remotos em qualquer plataforma.

— Ahmad Alfy

Eu não entendo o software, alguém pode explicar exatamente como eu tenho que configurá-lo?

— preto

0

Sei que não é a resposta para a pergunta precisa (Ferramentas do desenvolvedor do Chrome), mas estou usando esta solução alternativa com êxito: http://www.telerik.com/fiddler

(alguns desenvolvedores da Web já sabem sobre essa ferramenta)

Salve o arquivo localmente
Edite conforme necessário
Lucro!

Documentos completos: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Eu preferiria implementá-lo no Chrome como uma bandeira preserve after reload, não posso fazer isso agora, fóruns e grupos de discussão bloqueados na rede corporativa :)

— Mars Robertson
fonte

-8

Sim, basta abrir a guia "Origem" nas ferramentas de desenvolvimento e navegar para o script que você deseja alterar. Faça seus ajustes diretamente na janela de ferramentas de desenvolvimento e, em seguida, pressione ctrl + s para salvar o script - saiba que os novos js serão usados até você atualizar a página inteira.

— jacksbox
fonte

Qual versão do chrome? Sim, você pode "editar" o conteúdo de um script (embora não os scripts na própria página), mas as alterações não têm nenhum efeito e ctrl-s / save, pois permite salvar o script localmente (como ctrl-in em a janela principal).

— Davidkonrad

Uso a versão 34 - quando edito um script, por exemplo, adicione um console.log a um evento click (já vinculado) e salve, o console emitirá a seguinte mensagem: "Recompilação e atualização bem-sucedida". - depois disso. quando aciono o evento click, recebo a saída do log no console.

— Jacksbox #

Quando você recarrega a página, ela parece não usar o arquivo modificado localmente.

— Jake Wilson

32

você teve-me em "sim" ... mas depois você me perdeu em "até que você atualizar a página inteira" ....

— Cool Blue