Editando Javascript usando as Ferramentas de Desenvolvedor do Chrome

94

Estou tentando editar javascript em um site usando as ferramentas de desenvolvedor do Chrome. Eu li cerca de 30 relatos sobre como fazer isso e também assisti a alguns vídeos. O fato é que, quando vou para a guia de fontes e abro o arquivo que desejo editar, não consigo fazer nada. Há alguma etapa que estou perdendo?

Posso criar pontos de interrupção, avançar, etc ... Simplesmente não consigo editar. Esta funcionalidade foi removida recentemente?

javascript google-chrome web-developer-toolbar

— Cooperia
fonte

1

Posso fazer chamadas no console perfeitamente. Simplesmente não consigo editar coisas.

— cooperia

1

Você pode substituir funções e variáveis locais, mas não há como salvar alterações em um arquivo a partir das ferramentas de desenvolvimento. Você ainda precisa de um editor externo para isso.

— Geuis

1

Na verdade, posso editar arquivos css, mas não posso editar scripts embutidos em um arquivo php. >.>

— cooperia

1

Bem, posso fazer o que quiser com o Opera. Problema meio resolvido.

— cooperia

1

@cooperia coloque seu código js em um arquivo * .js, então você poderá editá-lo e executá-lo em tempo real no Chrome.

— Mahn

102

Sei que esta pergunta está desatualizada, mas acabei de ter um problema semelhante e encontrei a solução.

Se você tiver o arquivo corrigido, o Chrome não permitirá edições. Desliguei e consegui editar. Disposto a apostar que esse é / era seu problema.

— Raddevon
fonte

4

sim, isso ajudou, obrigado @raddevon, posso editá-los agora mas nenhum efeito acontece na página

— Bolas

2

Para outras pessoas que pesquisam este tópico: Eu tinha configurado como DESLIGADO, mas ainda não consegui editar. Ligar e desligar novamente ajudou. (Agradecimentos ao IT Crowd por esse conselho;))

— Drkawashima,

3

Continuação: Não. Acontece que tenho o mesmo problema que @raddevon. Talvez um bug no cromo. Você pode editar e salvar o script e atingir pontos de interrupção durante a depuração. Mas o script que está realmente em execução ainda é a versão original não editada. Exemplo: Eu editei o script, comentei cada linha, mas ainda poderia executar o script, atingir pontos de interrupção nas linhas etc. Portanto, a versão editada nem mesmo está em execução, está apenas sendo exibida ... É claro que estou reiniciando o script em todos os tipos de maneiras diferentes sem qualquer efeito

— Drkawashima

4

Como uma nota lateral, se você alterar, copie e cole de volta no arquivo original, será um arquivo original fingido que pode ser editado.

— Eoin

2

@Eoin Wonderful! Isso funcionou totalmente. E com a funcionalidade "Substituições locais", isso funciona perfeitamente. Obrigado pela dica :-)

— Xan-Kun Clark-Davis

52

Você pode editar o javascript nas ferramentas do desenvolvedor na guia "Fontes", MAS isso só permitirá que você edite o javascript em seu próprio arquivo. O script embutido em um arquivo HTML (ou PHP) permanecerá somente leitura.

— welah
fonte

4

Estou usando o Chrome no Linux e ainda não consigo editar o javascript, mesmo que seja um único arquivo .js.

— roopunk de

2

Nota ligeiramente interessante: Ativar / desativar o Pretty Print (o ícone "{}") ativará a edição de js incorporados, mas as alterações não terão efeito, então ainda não é o que estamos procurando. (Chrome 29)

— Patrick de

Isso é o que eu precisava saber. Obrigado.

— geeves

29

Possui algumas limitações:

tem que ser um arquivo JS. não podem ser incorporadas tags em uma página html.
não pode ser embelezado.

— gcb
fonte

Se depois de seguir a orientação acima e as alterações na guia Fontes simplesmente não tiverem efeito, tente clicar com o botão direito do mouse no arquivo editado na visualização em árvore à esquerda e selecione "Salvar". Uma caixa de diálogo pode aparecer solicitando que você salve um arquivo local, mas você pode simplesmente cancelar. Somente nesse ponto, o histórico de edição do Chrome finalmente mostra que a edição travou.

— Erhhung

Eu estava ficando louco porque esse novo arquivo tinha js incorporado, mas não consegui editar ... não entendi o porquê ... obrigado #gcb e #welah

— carinlynchin

É possível cancelar a inclusão de um arquivo JS da lista na Sourcesguia Ferramentas do desenvolvedor?

— techie_28

@ techie_28 não tenho certeza, abra outra pergunta. Mas eu escreveria uma extensão rápida para isso.

— gcb

13

Não sei se você precisa salvar permanentemente, mas se precisar modificar apenas temporariamente o js:

Posso copiar aquele javascript que desejo modificar para um editor de texto, editá-lo e, em seguida, colá-lo no console e ele redefinirá quaisquer funções ou o que eu precisar redefinir.

por exemplo, se a página tiver:

<script>
var foo = function() { console.log("Hi"); }
</script>

Posso pegar o conteúdo entre o script, editá-lo e inseri-lo no depurador como:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

e vai funcionar para mim.

Ou se você gosta,

function foo() {
    doAThing();
}

Você pode apenas entrar

function foo() {
    doSomethingElse();
}

e foo será redefinido.

Provavelmente não é a melhor solução, mas funciona. Vai durar até você recarregar a página.

— byronaltice
fonte

4

Eu fiz uma pesquisa "chrome dev tool edit javascript". Esta página é o primeiro resultado da pesquisa. Mas está muito desatualizado, não me ajuda.

Estou usando o Chrome 73, esta versão do Chrome tem a opção "Ativar substituições locais". Usando a função, eu poderia editar um javascript e executar e depurar.

— wafe
fonte