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.
247
num = 5, console.log(arguments[0], num), falsepara atualizar e registrar o valor dentro dafoofunção.Respostas:
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.
fonte
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:
fonte
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/
fonte
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.
fonte
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:
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.
fonte
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.
fonte
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
fonte
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.fonte
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/
fonte
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.
fonte
Eu estava procurando uma maneira de alterar o script e depurar esse novo script. A maneira que eu consegui fazer isso é:
Defina o ponto de interrupção na primeira linha do script que você deseja alterar e depurar.
Recarregue a página para que o ponto de interrupção seja atingido
Cole seu novo script e defina nele os pontos de interrupção desejados
Ctrl + s, e a página será atualizada, fazendo com que o ponto de interrupção na primeira linha seja atingido.
F8 para continuar e agora seu script recém-colado substitui o original, desde que nenhum redirecionamento e recarregamento seja feito.
fonte
O Chrome DevTools possui um painel Snippets, no qual você pode criar e editar o código JavaScript como faria em um editor e executá-lo. Abra o DevTools, selecione o painel Origens e selecione a guia Snippets.
https://developers.google.com/web/tools/chrome-devtools/snippets
fonte
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.
fonte