Jak mogę edytować javascript w przeglądarce, tak jak Mogę używać Firebug do edycji CSS / HTML?

W plikach JSP mam dość skomplikowany Javascript. Na maszynie produkcyjnej widzimy bardzo dziwny błąd, którego nie byliśmy w stanie zrozumieć. Nigdy nie byliśmy w stanie odtworzyć go w środowisku lokalnym lub deweloperskim. Może to być związane z javascript, ale nie znalazłem dobrego sposobu, aby to zrobić: użyj mojej przeglądarki, aby odwiedzić stronę (na stronie produkcji), a następnie użyj narzędzi przeglądarki, aby edytować javascript, który działa na tej stronie, w tym przy przeładowaniach strona.

Zawsze jestem w stanie to zrobić, aby poprawić CSS itp, ale jak te pytania wskazują, nie jest oczywiste, jak poprawić js po stronie klienta:

Jednak te odpowiedzi mi nie pomagają, Bo:

    [[5]} "Execute JS" (Firefox addon) wydaje się nie działać (nie robi więcej niż konsola w Chrome już może zrobić),
  • "Charles" może działać, jeśli użyłbym oddzielonych plików js, ale mój javascript jest osadzony w JSP

It seems like How to modyfikować kod javascript w locie w przeglądarce w trybie debugowania?To najbliższa rzecz, o której mówię, ale ten facet nie jest w stanie mówić o tym, co zrobił, bo to było dla jego pracodawcy.

Dzięki za pomoc! Ryan

Author: Community, 2011-07-12
Source

5 answers

Problem z edycją JavaScript, jak można CSS i HTML jest to, że nie ma czystego sposobu, aby propagować zmiany. JavaScript może modyfikować DOM, wysyłać żądania Ajax i dynamicznie modyfikować istniejące obiekty i funkcje w czasie wykonywania. Tak więc, po załadowaniu strony z JavaScript, może być zupełnie inaczej po uruchomieniu JavaScript. Przeglądarka musiałaby śledzić każdą modyfikację kodu JavaScript, aby podczas edycji JS cofnąć zmiany na czystą stronę.

Ale możesz dynamicznie modyfikować JavaScript na kilka innych sposobów:

  • zastrzyki JavaScript w pasku adresu URL: javascript: alert (1);
  • przez konsolę JavaScript (istnieje jedna wbudowana w Firefoksa, Chrome i nowsze wersje IE
  • Jeśli chcesz zmodyfikować pliki JavaScript tak, jak są one podawane do przeglądarki (tj. chwytając je w Tranzycie i modyfikując je), to nie mogę zaoferować dużej pomocy. Sugerowałbym użycie proxy do debugowania: http://www.fiddler2.com/fiddler2 /

Pierwsze dwie opcje są świetne, ponieważ możesz modyfikować dowolne zmienne i funkcje JavaScript znajdujące się obecnie w zasięgu. Nie będziesz jednak w stanie zmodyfikować kodu i uruchomić go za pomocą strony "just-served", tak jak możesz to zrobić za pomocą trzeciej opcji.

Poza tym, o ile wiem, nie ma edytowania i uruchamiania JavaScript edytor w przeglądarce. Mam nadzieję, że to pomoże,

 25
Author: Chris Laplante,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-11 22:08:37

Wiem, że można zmodyfikować plik javascript podczas korzystania z Google Chrome.

  1. Otwórz Chrome Inspector, przejdź do zakładki "Skrypty".
  2. Naciśnij Menu rozwijane i wybierz plik javascript, który chcesz edytować.
  3. Kliknij dwukrotnie w pole tekstowe, wpisz co chcesz i usuń co chcesz.
  4. Następnie wystarczy nacisnąć Ctrl + S, aby zapisać plik.

Ostrzeżenie: jeśli odświeżysz stronę, wszystkie zmiany powrócą do oryginału plik. Polecam skopiować / wkleić kod gdzie indziej, jeśli chcesz go użyć ponownie.

Mam nadzieję, że to pomoże!

 24
Author: Jacob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-18 04:45:26

Chciałbym wrócić do skrzypka . Po zabawie z tym przez chwilę, jest to oczywiście najlepszy sposób na edycję wszelkich żądań internetowych w locie. Będąc JavaScript, POST, GET, HTML, XML cokolwiek i cokolwiek. Jest darmowy, ale trochę trudny do wdrożenia. Oto mój HOW-TO:

Aby użyć Fiddlera do manipulowania JavaScript (w locie) za pomocą Firefoksa, wykonaj następujące czynności:]}

1) Pobierz i zainstaluj Fiddler

2) Pobierz i zainstaluj rozszerzenie Fiddler: " 3 Dodatki do podświetlania składni "

Firefoksa i włącz rozszerzenie "FiddlerHook "

4) Otwórz Firefoksa i włącz przycisk paska narzędzi FiddlerHook : View > Toolbars > Customize...

5) Kliknij przycisk Fiddler tool i poczekaj na uruchomienie programu fiddler.

6) wskaż swoją przeglądarkę na testowe adresy URL:

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

7) Dodaj Fiddler Rules w celu przechwycenia i edycji JavaScript przed wejściem do przeglądarki/serwera. W Fiddler kliknij: Rules > Customize Rules.... [CTRL-R] Spowoduje to uruchomienie Edytora Skryptów.

8) Edytuj i dodaj następujące zasady :

A) aby zatrzymać JavaScript, aby umożliwić edycję, dodaj pod funkcją " OnBeforeResponse":

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

B) aby wstrzymać posty HTTP, aby umożliwić edycję przy użyciu czasownika POST, edytuj " OnBeforeRequest":

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

C) aby wstrzymać żądanie pliku XML w celu umożliwienia edycji, edytuj "OnBeforeRequest":

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

[9] TODO: Edytuj powyższe CustomRules.js, aby umożliwić wyłączenie (a-c) .

10) Ładowanie przeglądarki zatrzyma się teraz przy każdym znalezionym JavaScript i wyświetli czerwoną pauzę zaznacz za każdy scenariusz. Aby kontynuować ładowanie strony należy kliknąć zielony przycisk "Uruchom do zakończenia" dla każdego skryptu. (Dlatego chcielibyśmy do wdrożenia [9].)

 6
Author: not2qubit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-16 13:48:35

Firefox Developer Edition (59.0b6) posiada Scratchpad (Shift +F4) gdzie można uruchomić javascript

 2
Author: Mindau,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-07 11:33:15

Nadal polecam Firebug. Nie tylko może debugować JS w plikach JSP, może poprawić debugowanie za pomocą dodatków takich jak JS Deminifier (jeśli twój js produkcyjny jest minifikowany), FireQuery, FireRainbow i nie tylko.

Istnieje również Firebug lite, który jest niczym innym jak książką. Pozwala robić ograniczone rzeczy, ale nadal jest przydatny.

Chrome jako konsola deweloperska wbudowana, która umożliwi Ci modyfikację javascript.

Za pomocą tych narzędzi, powinieneś być w stanie wstrzyknąć swój własny JS też.

 -2
Author: Mrchief,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-16 01:20:12