Как заменить Javascript рабочего сайта локальным Javascript?

Question

На моем производственном веб-сайте я скомпилировал 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».

Есть идеи?

Answer 1

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

1. Загрузите и установите Fiddler , если вы используете Windows.
2. Включите его, чтобы перехватывать http-трафик [IE / Chrome делает это по умолчанию, Firefox - включите его через надстройку над ним, установите]
3. Загрузите страницу, о которой идет речь.
4. Найдите файл, который вы хотите заменить, в списке http-трафика слева и щелкните по нему.
5. Справа находится вкладка Автоответчик. щелкните по нему.
6. Установите флажок, чтобы «включить автоматические ответы»
7. Нажмите кнопку Добавить ..
8. 2-й выпадающий справа, выберите опцию "найти файл"
9. Найдите файл в диалоговом окне и нажмите «Сохранить»
10. Повторяйте шаги 4-9, пока вы не замените все файлы, которые хотите заменить
11. Обновите окно браузера, и ваши новые js-файлы будут запущены

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

Вы можете установить Charles , если вы используете Mac / Linux. (не бесплатно, есть пробная версия) Шаги похожи, но не одинаковы.

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

Answer 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/.

Answer 3

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

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

Этот скрипт tampermonkey может заменить любой файл 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'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);

Answer 4

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

http://url_of_dev.com? Отлаживать = верно

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

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

Answer 5

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

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

Answer 6

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

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

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

Удачи!