Google Chrome: Como editar arquivos JavaScript / CSS e visualizar alterações sem recarregar?

Question

Eu quero fazer alterações por meio da guia "Fontes" em Inspect Elements e quero ver uma prévia rapidamente sem atualizar o navegador.

Existe uma maneira de fazer isso?

Por exemplo, em JavaScript eu tenho uma variável:

var abc = 'xyz';

Mas, através do separador Origens, cheguei ao meu ficheiro de script e alterei o código:

var abc = 'hello world';

Agora, se eu tentar alert(abc) , as alterações mais recentes serão exibidas? Não quero atualizar para ver essa alteração.

Existe algum tipo de possibilidade ou plug-in que possa fazer isso? Porque às vezes isso economiza muito tempo. Por exemplo, toda vez que eu testo, preciso executar várias etapas para ver algum valor ou resposta. Então, para fazer uma pequena alteração eu tenho que mudar no arquivo original e atualizar novamente para vê-lo e desta forma eu sempre tenho que passar por todo o processo que desperdiça muito tempo.

    

Answer 1

Você pode usar as Ferramentas do desenvolvedor do Chrome (pressione F12 ou Ctrl + Deslocou + I ) para depurar e manipular o código JavaScript em tempo de execução. Você pode então definir pontos de interrupção em seu código, examinar objetos, brincar com valores, chamar funções do console e muito mais. Tudo sem ter que realmente mudar seus arquivos de origem físicos ou recarregar a janela.

Atualize após o comentário do OP abaixo:

Aqui está um exemplo rápido e sujo de criar uma nova função e chamá-la no console. A primeira linha adiciona a função (adicionar a função em si não retorna nada significativo, então você obtém um resultado "indefinido"). Em seguida, chamo essa nova função que, como esperado, exibe uma janela de alerta (não mostrada na captura de tela) e retorna o valor 17.

Vocêpodefazeromesmoeretornarvalorescalculadosdasuapáginaatualemseuestadoatual.Sevocêcolocouumpontodeinterrupçãoemseucódigo,poderáusaroconsoleparaexaminarobjetosevaloresourealizaralteraçõesemtempodeexecução.BTW,issotambémseaplicaao DOM , para que você possa manipular o HTML também no console.