Как заменить 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/