Como posso editar o javascript no meu navegador Como posso usar o Firebug para editar o CSS / HTML?

Dentro dos ficheiros JSP, tenho um Javascript bastante complicado. Numa máquina de produção, estamos a ver um insecto muito estranho que não conseguimos compreender. Nunca fomos capazes de replicá-lo em um ambiente local ou de desenvolvimento. Isso pode estar relacionado com o javascript, mas ainda não encontrei uma boa maneira de fazer isso: usar o meu navegador para visitar a página (no website de produção) e, em seguida, usar o navegador de ferramentas para editar o javascript que roda nessa página, incluindo recarrega a pagina.

Eu sou sempre capaz de fazer isso para ajustar CSS etc, mas como estas perguntas apontam, não é óbvio como ajustar js cliente-lado:

No entanto, essas respostas não me ajudam porque ...
  • "Execute JS" (Firefox addon) não parece funcionar (não faz mais do que a consola no Chrome já pode fazer), {[[9]} "Charles" pode funcionar se tivesse usado ficheiros js separados, mas o meu javascript está incorporado no JSP

parece como como modificar o código de javascript no navegador em Modo de depuração?É a coisa mais próxima do que estou a falar, mas aquele tipo não é capaz de falar sobre o que fez porque era para o patrão.

Obrigado pela ajuda! Ryan

Author: Community, 2011-07-12
Source

5 answers

O problema com a edição de JavaScript como você pode CSS e HTML é que não há nenhuma maneira limpa de propagar as alterações. JavaScript pode modificar o DOM, enviar solicitações Ajax, e modificar dinamicamente objetos e funções existentes no tempo de execução. Assim, uma vez que você tenha carregado uma página com JavaScript, pode ser completamente diferente após o JavaScript ter corrido. O navegador teria que manter o controle de cada modificação que seu código JavaScript executa para que quando você editar o JS, ele rola para trás o muda para uma página limpa.

Mas, você pode modificar o JavaScript dinamicamente de algumas outras maneiras:

  • injecções de JavaScript na barra de URL: javascript: alert (1);
  • Via um console JavaScript (há um incorporado no Firefox, Chrome, e versões mais recentes do IE
  • Se quiser modificar os ficheiros JavaScript à medida que são servidos ao seu navegador (isto é, agarrá-los em trânsito e modificá-los), então não posso oferecer muita ajuda. Eu sugeriria usar um 'proxy' de depuração: http://www.fiddler2.com/fiddler2/

As duas primeiras opções são óptimas porque pode modificar quaisquer variáveis e funções de JavaScript actualmente no âmbito. No entanto, você não será capaz de modificar o código e executá-lo com uma Página "Just-served" como você pode com a terceira opção.

Para além disso, tanto quanto sei, não há nenhum editor de JavaScript de edição e execução no navegador. Espero que isto ajude.

 25
Author: Chris Laplante, 2011-07-11 22:08:37

Eu sei que você pode modificar um ficheiro javascript ao usar o Google Chrome.

  1. Abra o Inspector cromado, vá para a página "Scripts".
  2. carregue no menu e seleccione o ficheiro javascript que deseja editar.
  3. faça duplo-click no campo de texto, digite o que quiser e apague o que quiser.
  4. então tudo o que tem de fazer é carregar em Ctrl + S para gravar o ficheiro.

Atenção: se actualizar a Página, todas as alterações irão voltar ao original arquivo. Eu recomendo copiar/colar o código em outro lugar se você quiser usá-lo novamente.

Espero que isto ajude!
 24
Author: Jacob, 2013-02-18 04:45:26
Gostava de voltar para Fiddler. Depois de ter jogado com isso por um tempo, é claramente a melhor maneira de editar quaisquer pedidos web on-the-fly. Ser JavaScript, POST, GET, HTML, XML qualquer coisa. É grátis, mas um pouco complicado de implementar. Aqui está o meu HOW-TO: [11]

Para usar o Fiddler para manipular o JavaScript (na altura) com o Firefox, faça o seguinte:

1) Baixar e instalar Fiddler

2) Baixar e instalar o Fiddler extensao: " 3 realce de sintaxe add-ons"

3) Reiniciar o Firefox e activar a extensão "FiddlerHook "

4) abrir o Firefox e activar o botão da barra de ferramentas FiddlerHook : View > Toolbars > Customize...

5) carregue no botão de Ferramenta Fiddler e espere que o fiddler comece.

6) Aponte o seu navegador para os URLs de Teste do Fiddler: 
Echo Service:  http://127.0.0.1:8888/
DNS Lookup:    http://www.localhost.fiddler:8888/

7) adicionar As Regras do Fiddler para interceptar e editar o JavaScript antes de chegar ao servidor. No Fiddler clique: Rules > Customize Rules.... [CTRL-R] Isto vai iniciar o ScriptEditor.

8) Editar e adicionar o a seguir às regras:

A) parar o JavaScript para permitir a edição, adicionar sob a função " Onbeforesponse":

if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "javascript")){
  oSession["x-breakresponse"]="reason is JScript"; 
}

B) parar as publicações de HTTP para permitir a edição ao usar o verbo POST, Editar " OnBeforeRequest":

if (oSession.HTTPMethodIs("POST")){
  oSession["x-breakrequest"]="breaking for POST";
}

C) para pausar um pedido de um ficheiro XML para permitir a edição, editar " Onbeforequest":

if (oSession.url.toLowerCase().indexOf(".xml")>-1){
  oSession["x-breakrequest"]="reason_XML"; 
}

[9] TODO: edite o acima CustomRules.js para permitir a desactivação (A-c).

10) o carregamento do navegador irá agora parar em cada JavaScript encontrado e mostrar uma pausa vermelha marca para cada guião. Para continuar a carregar na página, é necessário carregar o botão verde "executar até a conclusão" para cada script. (E é por isso que gostaríamos aplicar [9].)

 6
Author: not2qubit, 2014-01-16 13:48:35

A Firefox Developer Edition (59.0b6) tem Scratchpad (Shift +F4), onde poderá executar javascript

 2
Author: Mindau, 2018-02-07 11:33:15
Ainda assim, recomendo Firebug. Não só pode depurar JS dentro dos seus ficheiros JSP, como pode melhorar a experiência de depuração com addons como JS Deminifier (se a sua produção JS for minificada), FireQuery, FireRainbow e mais. Há também o Firebug lite que não passa de um marcador de livros. Ele permite que você faça coisas limitadas, mas ainda é útil.

O Chrome como uma consola de desenvolvimento incorporada que lhe permitiria modificar o javascript.

Utilizando estas ferramentas, deverá ser capaz de injectar o seu próprio JS muito.

 -2
Author: Mrchief, 2014-01-16 01:20:12