Как я могу редактировать JavaScript в своем браузере, как я могу использовать Firebug для редактирования CSS / HTML?

Question

В файлах JSP у меня есть довольно сложный Javascript. На рабочей машине мы видим очень странную ошибку, которую мы не смогли понять. Нам никогда не удавалось воспроизвести его в локальной среде или среде разработки. Это может быть связано с javascript, но я не нашел хорошего способа сделать это: используйте мой браузер, чтобы посетить страницу (на рабочем сайте), а затем используйте инструменты браузера для редактирования javascript, который запускается на этой странице, включая при перезагрузке страницы.

Я всегда могу сделать это, чтобы настроить CSS и т. Д., Но, как указывают эти вопросы, не очевидно, как настроить JS на стороне клиента:

• Лучший способ зафиксировать ошибки JavaScript на производстве?
• Как редактировать Javascript в браузере?
• Как редактировать JavaScript в Firebug?
• Как я могу отредактировать файл js, отправленный сервером, прежде чем он попадет в мой браузер?
• Как заменить Javascript рабочего сайта локальным Javascript?
• с firefox w / firebug, как я могу написать javascript в браузере и также использовать объекты файла .js?

Однако эти ответы мне не помогают, потому что:

• «Execute JS» (аддон Firefox), похоже, не работает (не делает больше, чем консоль в Chrome уже может),
• «Чарльз» мог бы работать, если бы я использовал отдельные файлы js, но мой javascript встроен в JSP

Кажется, что Как изменить код JavaScript на лету в браузере в режиме отладки? - это самое близкое к тому, о чем я говорю, но этот парень не может говорить о том, что он сделал, потому что это было для его работодателя.

Спасибо за вашу помощь! Райан

Answer 1

Проблема с редактированием JavaScript, как вы можете CSS и HTML, заключается в том, что нет чистого способа распространения изменений. JavaScript может изменять DOM, отправлять запросы Ajax и динамически изменять существующие объекты и функции во время выполнения. Итак, после загрузки страницы с помощью JavaScript она может полностью измениться после запуска JavaScript. Браузер должен отслеживать каждую модификацию вашего кода JavaScript, чтобы при редактировании JS он откатывал изменения на чистую страницу.

Но вы можете динамически изменять JavaScript несколькими другими способами:

• JavaScript-инъекции в адресной строке: javascript: alert (1);
• Через консоль JavaScript (есть встроенная в Firefox, Chrome и более новые версии IE
• Если вы хотите изменить файлы JavaScript, когда они передаются в ваш браузер (то есть захватить их в пути и изменить их), то я не могу предложить большую помощь. Я бы предложил использовать прокси-сервер для отладки: http://www.fiddler2.com/fiddler2/

Первые две опции хороши тем, что вы можете изменять любые переменные и функции JavaScript, которые в настоящее время доступны. Однако вы не сможете изменить код и запустить его с «только что обслуженной» страницей, как при использовании третьего варианта.

Кроме этого, насколько мне известно, в браузере нет редактируемого и запускаемого редактора JavaScript. Надеюсь, это поможет,

Answer 2

Я знаю, что вы можете изменить файл JavaScript при использовании Google Chrome.

1. Откройте Chrome Inspector, перейдите на вкладку «Сценарии».
2. Нажмите раскрывающееся меню и выберите файл javascript, который вы хотите редактировать.
3. Дважды щелкните в текстовом поле, введите то, что вы хотите, и удалите все, что вы хотите.
4. Тогда все, что вам нужно сделать, это нажать Ctrl + S, чтобы сохранить файл.

Предупреждение: если вы обновите страницу, все изменения вернутся к исходному файлу. Я рекомендую скопировать / вставить код в другое место, если вы хотите использовать его снова.

Надеюсь, это поможет!

Answer 3

Я бы хотел вернуться к Скрипач .После того, как вы поиграли с этим некоторое время, это, безусловно, лучший способ редактировать любые веб-запросы на лету.Будучи JavaScript, POST, GET, HTML, XML, что угодно и что угодно.Это бесплатно, но немного сложнее в реализации.Вот мое руководство:

Чтобы использовать Fiddler для управления JavaScript (на лету) с Firefox, выполните следующие действия:

1) Загрузите и установите Fiddler

2) Загрузите и установите расширение Fiddler: " 3 дополнения для подсветки синтаксиса "

3) Перезапустите Firefox и включите " FiddlerHook"extension

4) Откройте Firefox и активируйте кнопку панели инструментов FiddlerHook : View > Toolbars > Customize...

5) Нажмите кнопку инструмента Fiddler и дождитесь запуска фиддлера.

6) Укажите в браузере тестовые URL-адреса Fiddler:

Echo Service:  http://127.0.0.1:8888/
DNS Lookup:    http://www.localhost.fiddler:8888/

7) Добавьте Fiddler Rules , чтобы перехватывать и редактировать JavaScript перед тем, как перейти к браузеру / серверу.В Fiddler нажмите: Rules > Customize Rules.... [CTRL-R] Запустится ScriptEditor.

8) Отредактируйте и добавьте следующих правил :

---

a) Чтобы приостановить JavaScript, чтобы разрешить редактирование, добавьте под функцией " OnBeforeResponse ":

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

b) Чтобы приостановить HTTP POST, чтобы разрешить редактированиепри использовании глагола POST отредактируйте « OnBeforeRequest »:

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

c) Чтобы приостановить запрос файла XML, чтобы разрешить редактирование, отредактируйте " OnBeforeRequest":

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

---

[9] TODO: отредактируйте выше CustomRules.js, чтобы разрешить отключение (ac) .

10) Загрузка браузера теперь останавливается на каждом найденном JavaScript и отображает красную метку паузы для каждого скрипта.Чтобы продолжить загрузку страницы, нужно нажать зеленую кнопку «Выполнить до завершения» для каждого сценария.(Именно поэтому мы хотели бы реализовать [9].)

Answer 4

Firefox Developer Edition (59.0b6) имеет Scratchpad (Shift + F4), где вы можете запустить javascript

Answer 5

Я бы все еще рекомендовал Firebug.Он не только может отлаживать JS в ваших JSP-файлах, он может улучшить отладку с помощью таких дополнений, как JS Deminifier (если ваш рабочий JS минимизирован), FireQuery, FireRainbow и т. Д.

Существует такжеFirebug lite, который представляет собой не что иное, как букмарклет.Он позволяет вам делать ограниченные вещи, но все еще полезен.

Chrome как встроенная консоль разработчика, которая позволит вам изменять javascript.

Используя эти инструменты, вы сможете внедрить свои собственныеJS тоже.