Как заменить Javascript на веб-сайте с местным Javascript?

На моем веб-сайте производства я скомпилировал Javascript.

<script src="/js/mycode.min.js"></script>

Было бы очень удобно для отладки, если бы я мог заменить мой браузер на

<script src="http://localhost/js/mycode1.js"></script>
<script src="http://localhost/js/mycode2.js"></script>
...

Я знаю, что могу манипулировать DOM, используя что-то вроде скриптов пользователей Greasemonkey, но я не мог придумать решение, которое предотвратило бы выполнение "mycode.min.js".

Любые идеи?

Ответ 1

Как я это делаю:

  • Загрузите и установите Fiddler, если вы находитесь в окнах.
  • Включить его, чтобы поймать http-трафик [IE/Chrome делает это по умолчанию, Firefox - включить его с помощью добавления на нем)
  • Загрузите эту страницу.
  • Найдите файл, который хотите заменить в списке http-трассировки слева, и нажмите на него.
  • Справа находится вкладка AutoResponder. щелкните по нему.
  • Установите флажок "включить автоматические ответы"
  • Нажмите кнопку "Добавить.."
  • 2-й раскрывающийся список справа, выберите вариант, который говорит "найти файл"
  • Найдите файл в диалоговом окне и нажмите "Сохранить"
  • Повторите шаги с 4 по 9, пока вы не замените все файлы, которые хотите заменить.
  • Обновите окно браузера, и ваши новые js файлы будут запущены.

Вместо замены js файла вы можете заменить файл html и изменить ссылки js на странице.

Вы можете установить Charles, если вы находитесь на mac/linux. (не бесплатно, пробный). Шаги похожи, но не то же самое.

Если вы используете Google Closure для сжатия файлов, вы можете установить их плагин, чтобы сделать исходное сопоставление.

Ответ 2

Как насчет использования субдомена типа http://static.example.com для статических файлов (например,.js файлов) и изменения файла-хоста?

<script type="text/javascript" src="http://static.example.com/js/mycode.min.js"></script>

Добавьте следующую строку в файл хоста (/etc/hosts для Linux, C:\WINDOWS\System32\drivers\etc\host):

static.example.com 127.0.0.1

Конечно, вы должны запустить сервер с файлами из http://static.example.com/ на 127.0.0.1.

Другое решение - использовать (локальный) прокси-сервер, например Privoxy, для перенаправления http://example.com/js/ на http://localhost/js/.

Ответ 3

Чтобы добавить файл NEW, вы можете использовать что-то вроде одного из другого сообщения:

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

Этот tampermonkey script может заменить любой JS файл на веб-странице своим пользовательским из домена:

// ==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 HTML to load...
    console.log('Replace stage 1: target HTML');
    injectScript(document.documentElement.outerHTML); //Run function injectScript with the page HTML as oldPage in the function
}, 1111);

Ответ 4

Предполагая, что ваши скрипты - это просто исходная версия производственного файла, вы можете просто открыть свой любимый отладчик или консоль JS и импортировать свои скрипты:

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

Это приведет к перезаписыванию первоначально определенных функций и переменных. Вам придется вручную перезапустить window.onload. Если у вас есть script, который выполняется сразу или при загрузке, которая сильно изменяется на странице, вы можете выполнить некоторую работу, чтобы вернуть ее в исходное состояние.

Удачи!

Ответ 5

Несмотря на то, что решение epascarello работает, существует более быстрое решение для отладки мини файлов. Рассмотрите возможность использования исходных кодов JavaScript. Современный Firefox и Chrome поддерживают их.

Идея исходной карты - сказать браузеру, где найти неизвестную версию. Когда вы начинаете отладку в своем браузере, инструменты разработчика - браузер загружает неограниченную версию script и показывает вам код с легко читаемым кодом JavaScript (или код, который вы скомпилировали для JavaScript) в отладчике.

Ответ 6

Добавьте что-то в свой URL, чтобы различать контекст dev и prod; пример: http://url_of_prod.com

http://url_of_dev.comhttps://stackoverflow.com/?debug=true

а затем, используйте некоторый javascript, чтобы проверить, включен ли отладчик переменной GET или нет или проверьте URL-адрес с помощью  if (window.location.host.indexOf('url_of_dev) > -1)...

THEN ИСПОЛЬЗУЙТЕ функцию загрузки для загрузки или отсутствия файла, как в этом примере: http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/