Editando no depurador do Chrome

247

Como edito "dinamicamente" o código JavaScript 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 os efeitos que eles têm na página, neste caso, impedindo que uma animação entre na fila várias vezes.

javascript  google-chrome  debugging 
— Tom
fonte
5
Você poderia usar o Opera. O Opera permite a edição de arquivos JS. Depois de recarregar suavemente a página, suas alterações serão aplicadas. Clique com o botão direito do mouse> Origem> Fazer alterações> Aplicar alterações.
— XP1
Este é um tutorial incrível para o depurador do Chrome. Ele mostra as etapas muito simples para fazer alterações no depurador nos seus scripts.
— precisa saber é o seguinte
1
Você também pode "injetar" código via ponto de interrupção condicional . No exemplo dado, use num = 5, console.log(arguments[0], num), falsepara atualizar e registrar o valor dentro da foofunção.
— MEMS
— stackinfostack

Respostas:

80

Você pode usar o depurador JavaScript embutido nas Ferramentas para Desenvolvedor do Chrome, na guia "Scripts" (nas versões posteriores é a guia "Fontes"), mas as alterações aplicadas 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 o carregamento da página não terão efeito. Ao contrário, por exemplo, alterações no código que reside nos manipuladores do mouse , que você pode testar em tempo real.

Há um vídeo do evento Google I / O 2010 apresentando outros recursos das Ferramentas para Desenvolvedor do Chrome.

— Adão
fonte
26
Nas versões posteriores do Chrome, os ícones das guias desapareceram e a guia 'Scripts' foi renomeada para 'Fontes' - portanto, pode não ser óbvio encontrar o depurador javascript. Mais informações aqui stackoverflow.com/questions/12113769/…
— chrisjleu 22/13/13
9
Não existe esse método. Também não consigo modificar o código na guia Fontes.
— MELAB
17
O depurador do Chrome não permite modificações locais do javascript. Falso.
— omikes
1
@oMiKeY O que é falso? O Chrome certamente permite modificar o script no depurador.
— perfil completo de JLRishe
6
@oMiKeY você pode modificar se o script não é enfeitada
— peterchaula
283

Me deparei com isso hoje, quando eu 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 queria editar dinamicamente. E como os pontos de interrupção permanecem mesmo após o recarregamento da página , pude editar as alterações desejadas enquanto pausava no ponto de interrupção e continuei a deixar a página carregar.

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

  1. Adicionar um ponto de interrupção em um ponto anterior do script
  2. Recarregar página
  3. Edite suas alterações no código
  4. CTRL+ s(salvar alterações)
  5. Cancelar a pausa do depurador
— sjacob
fonte
1
Obrigado! Descobri que isso funcionava quando era necessário fazer alterações em uma função anônima de execução automática que era chamada logo após o carregamento da página.
— Peter
1
Argh, porque eu tentei isso mais cedo e não funcionou e, oh, cara, como eu senti falta disso. Mas sim, não funciona para mim.
— Jamie Hutber
8
Para mim, foi crucial saber que as alterações devem ser salvas (etapa 4). Obrigado!
— Sergey Goliney 14/09/16
3
Não funciona em javascript dentro de arquivos html para mim. Além disso, se você adicionou uma pasta à área de trabalho, selecione o arquivo js local , clique com o botão direito do mouse e mapeie esse arquivo para a rede aqui.
— oo
1
Portanto, não há como modificar scripts em arquivos html?
— Warrior
13

Isto é o que você está procurando:

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

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

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

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

— artemisiano
fonte
5

Muito fácil, vá para a guia 'scripts'. E selecione o arquivo de origem desejado e clique duas vezes em qualquer linha para editá-lo.

— gnur
fonte
4
Seria incrível se você pudesse salvar as alterações no disco no caso de arquivo: // URLs
— Jim Blackler 21/02
3
Foi exatamente o que fiz, mas as mudanças não foram refletidas na página, como seria de esperar. Eu preciso alterar $ (seletor) .fadeIn () ... para $ (seletor) .stop (true, true) .fadeIn () ... Sabe? E eu quero poder ver isso acontecer na página.
— Tom
1
Oh droga, você está certo. Agora eu me pergunto por que o Chrome nos permite editar qualquer coisa se ele não tem qualquer efeito ..
— gnur
"Salvar como ..." salva apenas o arquivo no seu computador. Não aplica as alterações após o recarregamento da página. Se você deseja aplicar alterações nos arquivos JS para depuração, você pode usar o Opera.
— XP1
1
— JustGoscha 23/09/12
3

Como essa é uma pergunta bastante popular que trata da edição ao vivo do JS, quero apontar outra opção útil. Conforme descrito por svjacob em sua resposta:

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

A solução acima não funcionou para mim em JS muito grande (pacote webpack - versão reduzida de 3,21 MB, 130k linhas de código na versão pré-certificada) - o Chrome travou e solicitou o recarregamento da página, revertendo as alterações salvas. O caminho a seguir neste caso foi o Fiddler, onde você pode definir a opção AutoRespond para substituir qualquer recurso remoto por qualquer arquivo local do seu computador - consulte esta pergunta para obter detalhes .

No meu caso, eu também tive que adicionar cabeçalhos CORS ao violinista para simular com êxito a resposta.

— dominik
fonte
2

Se o seu javascript executado em um botão clicar, basta fazer a alteração em Fontes> Fontes (nas ferramentas do desenvolvedor no chrome) e pressionar Ctrl + S para salvar . Eu faço isso toda hora.

Se você atualizar a página, suas alterações de javascript desapareceriam, mas o chrome ainda lembrará seus pontos de interrupção.

— developer747
fonte
2

Agora, o google chrome introduziu um novo recurso. Usando este recurso Você pode editar seu código na navegação do Chrome. (Alteração permanente na localização do código)

Para isso, pressione F12 -> Guia Origem - (lado direito) -> Sistema de arquivos -; selecione sua localização do código. e, em seguida, o navegador Chrome solicitará sua permissão e depois esse código será afundado na cor verde. e você pode modificar seu código e ele também refletirá na localização do código (isso significa que será alterado permanentemente)

obrigado

— stackinfostack
fonte
2

Assim como a resposta da @mark, podemos criar um Snippets no Chrome DevTools, para overrideo JavaScript padrão. Finalmente, podemos ver quais efeitos eles têm na página.

Imagem

— vinho kami
fonte
1

aqui está uma introdução suave ao depurador js no chrome que escrevi. Talvez ajude outras pessoas a procurar informações sobre isso: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

— meeech
fonte
1
Essa é uma boa redação. Infelizmente, ele não diz nada sobre a edição de JS no depurador, que é a tarefa em questão.
— de Bruno Bronosky
Discordo. Você vê no final, especificamente, exemplo "como editar dinamicamente" o código JavaScript no depurador do Chrome ", que faz parte da pergunta.
— meeech
1
meeech, a menos que eu esteja entendendo mal a postagem, você demonstra como avaliar o JS no console. Isso é diferente de editar uma função para que, quando a função for chamada no futuro, ela se comporte de maneira diferente.
— Bruno Bronosky
Justo. Entendi que editar significa mudança nos valores da página ao vivo e pensei que a redação ajudaria, já que, quando você o tiver no console, poderá brincar com os valores e qualquer outra coisa js no contexto de execução.
— meeech
1
sim, meu Deus, eu fiz exatamente o que você descreveu por muitos anos. Finalmente fiquei frustrado por não conseguir obter um bom loop de feedback para alterar os manipuladores de eventos. Especialmente aqueles que são acionados durante o carregamento da página. Como AaronLS e eu discutimos nos comentários da resposta do gnur, às vezes a edição em DevTools> Fontes> Fontes funciona e outras vezes não. Mas quando funciona, é muito doce!
— precisa saber é o seguinte
1

você pode editar os arquivos javascrpit dinamicamente no depurador do Chrome, na guia Fontes , no entanto, suas alterações serão perdidas se você atualizar a página, para interromper o carregamento da página antes de fazer as alterações, será necessário definir um ponto de interrupção e recarregar a página e edite suas alterações e, finalmente, despause o depurador para ver suas alterações entrarem em vigor. Depurador do Chrome

— Seif Tamallah
fonte
você tem que manter o console aberto para que o Chrome vai parar em pontos de interrupção, o mais chrome irá ignorar os pontos de interrupção
— Seif Tamallah
não está funcionando. Eu recarrego usando o F5 e ele pára, altero o arquivo, continuo executando e recebo o mesmo erro que acabei de corrigir. É um arquivo js ao lado da página principal.,
— darkgaze
1

Eu estava procurando uma maneira de alterar o script e depurar esse novo script. A maneira que eu consegui fazer isso é:

  1. Defina o ponto de interrupção na primeira linha do script que você deseja alterar e depurar.

  2. Recarregue a página para que o ponto de interrupção seja atingido

  3. Cole seu novo script e defina nele os pontos de interrupção desejados

  4. Ctrl + s, e a página será atualizada, fazendo com que o ponto de interrupção na primeira linha seja atingido.

  5. F8 para continuar e agora seu script recém-colado substitui o original, desde que nenhum redirecionamento e recarregamento seja feito.

— 100r
fonte
0

Você pode usar "Substituições" no Chrome para persistir alterações de javascript entre carregamentos de páginas, mesmo quando você não está hospedando a fonte original.

  1. Crie uma pasta em Ferramentas do desenvolvedor> Fontes> Substituições
  2. O Chrome solicitará permissão para a pasta, clique em Permitir
  3. Edite o arquivo em Fontes> Página e salve (ctrl-s). Um ponto roxo indica que o arquivo foi salvo localmente.

A subguia Substituições nas Ferramentas do desenvolvedor do Chrome

— Mark Foreman
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.