Como replace o Javascript do site de produção com o Javascript local?

No meu site de produção, eu compilei o Javascript.

 

Seria muito conveniente depurar se eu pudesse fazer o meu navegador replace isso com

   ... 

Eu sei que eu poderia manipular o DOM usando algo como userscripts do Greasemonkey, mas não consegui chegar a uma solução que impedisse a execução do “mycode.min.js”.

Alguma ideia?

A maneira que eu faço isso:

  1. Baixe e instale o Fiddler se você estiver no Windows.
  2. Habilite-o para capturar o tráfego http [IE / Chrome faz isso por padrão, o Firefox – habilitá-lo através do add nele instala]
  3. Carregue a página em questão.
  4. Encontre o arquivo que você deseja replace na lista de tráfego http à esquerda e clique nele.
  5. À direita, há uma guia AutoResponder. Clique nisso.
  6. Clique na checkbox de seleção para “ativar respostas automáticas”
  7. Clique no botão Adicionar ..
  8. A segunda lista suspensa à direita, escolha a opção que diz “encontrar um arquivo”
  9. Localize o arquivo na checkbox de diálogo e clique em salvar
  10. Repita as etapas de 4 a 9 até replace todos os arquivos que deseja replace
  11. Atualize a janela do navegador e seus novos arquivos js estão em execução

Em vez de replace o arquivo js, ​​você pode replace o arquivo html e alterar os links js na página.

Você pode instalar o Charles se você estiver em um mac / linux. (não é livre, tem julgamento) Os passos são semelhantes, mas não são os mesmos.

Se você estiver usando o Google Closure para compactar arquivos, poderá instalar o plug-in deles para fazer o mapeamento de origem .

Que tal usar um subdomínio como http://static.example.com para arquivos estáticos (por exemplo, arquivos .js) e alterar o hostfile?

  

Adicione a seguinte linha ao hostfile ( /etc/hosts para Linux, C:\WINDOWS\System32\drivers\etc\host ):

 static.example.com 127.0.0.1 

Claro que você tem que executar um servidor com os arquivos de http://static.example.com/ em 127.0.0.1 .

Outra solução é usar um servidor proxy (local) como o Privoxy para redirect http://example.com/js/ para http://localhost/js/ .

Para adicionar um novo arquivo você pode usar algo como uma das outras postagens:

 document.body.appendChild(document.createElement("script").src = "http://example.com/addThisJSFile.js"); 

Este script tampermonkey pode replace qualquer arquivo JS em uma página da Web por um personalizado de um domínio:

 // ==UserScript== // @name ReplaceJS // @namespace http://example.com/ // @version 1.0.0 // @description Replace javascript files on any webpage! // @author Mr.Sonic Master // @match * // @run-at document-start // ==/UserScript== var newJSFile = "http://example.com/newJSFile.js"; //The JS file to load in replacment od old JS file var oldJSFile = "oldJSFile.replaceThis.js"; //The old JS file as it is named in inspect element (make sure its spelled EXACTLY the same) var pattern = new RegExp(oldJSFile, "i"); //Create the RegExp pattern with the /i switch to make it case-insensitive function injectScript(originalPage) { //Function injectScript replaces the file console.log('Replace stage 2: Replace text matching', oldJSFile, 'with', newJSFile); var moddedPage = originalPage.replace(pattern, newJSFile); //Modify the HTML code that we got, replacing the old JS file with the new one document.open(); console.log('Replace stage 3: Write new HTML to page...'); document.write(moddedPage); //Write to the page the new HTML code document.close(); } setTimeout(function() { //Wait a bit for the page's HTML to load... console.log('Replace stage 1: target HTML'); injectScript(document.documentElement.outerHTML); //Run function injectScript with the page's HTML as oldPage in the function }, 1111); 

Supondo que seus scripts sejam simplesmente a versão bruta do arquivo de produção, você pode simplesmente abrir seu debugger favorito ou console JS e importar seus scripts:

 document.body.appendChild(document.createElement("script")).src = "http://localhost/js/mycode1.js"; 

Isso replaceá as funções e variables ​​definidas originalmente. Você terá que re-executar manualmente o window.onload . Se você tiver um script que seja executado imediatamente ou em um carregamento que mude muito na página, talvez você tenha algum trabalho a fazer para recuperá-lo para o estado original.

Boa sorte!

Embora a solução do epascarello funcione, há uma solução mais rápida para a debugging de arquivos minificados. Considere o uso de mapas de origem JavaScript . O Firefox e o Chrome modernos os suportam.

A ideia do mapa de origem é dizer navegador onde encontrar a versão não-minada. Quando você inicia a debugging nas ferramentas do desenvolvedor do navegador – o navegador carrega a versão não-minificada do script e mostra o código JavaScript de fácil leitura (ou o código que você compilou para o JavaScript) no depurador.

Adicione algo ao seu URL para distinguir entre o seu contexto dev e prod; exemplo: http://url_of_prod.com

http://url_of_dev.com?debug=true

e, em seguida, use algum javascript para verificar se a debugging da variável GET está ON ou NÃO ou verifique a URL com
if (window.location.host.indexOf (‘url_of_dev’)> -1) …

ENTÃO USE uma function load para carregar ou não seu arquivo, como neste exemplo: http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/