Chrome Dev Tools - modyfikuj javascript i ładuj ponownie

194

Czy można zmodyfikować JavaScript strony, a następnie ponownie załadować stronę bez ponownego ładowania zmodyfikowanego pliku JavaScript (a tym samym utraty modyfikacji)?

javascript google-chrome-devtools CDT
źródło

Odpowiedzi:

218

Jest to trochę do obejścia, ale jednym ze sposobów na osiągnięcie tego jest dodanie punktu przerwania na początku pliku javascript lub bloku, którym chcesz manipulować.

Następnie, gdy przeładujesz, debugger zatrzyma się na tym punkcie przerwania i możesz wprowadzić dowolne zmiany w źródle, zapisać plik, a następnie uruchomić debuger poprzez zmodyfikowany kod.

Ale jak wszyscy mówili, kolejne ładowanie zniknie - przynajmniej pozwoli ci uruchomić nieco zmodyfikowaną stronę klienta JS.

Ashley Schroder
źródło
10
Okazuje się, że to była odpowiedź, której szukałem. Umieść punkt przerwania w pierwszym wierszu kodu javascript. Następnie, gdy nastąpi przerwa, wklej tam zmodyfikowany kod. Przerwij i to działa!
Nicholas Blasgen,
jak tam edytować lub wklejać kod? Zdecydowanie nie widzę tej funkcji w konsoli Chrome. Mogę edytować JS / HTML z sekcji Elementy, ale to nie ładuje się automatycznie. Ale w miejscu, w którym ustalono punkty przerwania, wydaje się to być tylko do odczytu
Josh Sutterfield
Niestety nadal nie jest to świetne rozwiązanie. Dodany kod nie jest dostępny w konsoli. Np. Dodanie var foo = 'bar'skryptu nie ujawnia foosię w konsoli.
AgmLauncher
co słychać w zewnętrznych skryptach? punkty przerwania wydają się z nich znikać.
OlehZiniak
Działa to tak długo, jak długo chcesz modyfikować skrypty ładowane zewnętrznie, ani Chrome, ani narzędzia do debugowania FireFox nie będą mogły modyfikować wbudowanego javascript, nawet jeśli jego wykonanie zostanie przerwane z punktem przerwania.
Marek
148

Świetna wiadomość, poprawka pojawi się w marcu 2018 r., Zobacz ten link: https://developers.google.com/web/updates/2018/01/devtools

„Lokalne przesłonięcia pozwalają wprowadzać zmiany w DevTools i zachować te zmiany podczas ładowania strony. Wcześniej wszelkie zmiany dokonane w DevTools były tracone podczas ponownego ładowania strony. Lokalne przesłonięcia działają dla większości typów plików

Jak to działa:

  • Ty określasz katalog, w którym DevTools powinien zapisywać zmiany. Kiedy wprowadzasz zmiany w DevTools, DevTools zapisuje kopię zmodyfikowanego pliku w twoim katalogu.
  • Po przeładowaniu strony DevTools obsługuje lokalny, zmodyfikowany plik, a nie zasób sieciowy.

Aby skonfigurować przesłonięcia lokalne:

  1. Otwórz panel Źródła.
  2. Otwórz kartę Zastąpienia.
  3. Kliknij opcję Zastąpienia instalacji.
  4. Wybierz katalog, w którym chcesz zapisać zmiany.
  5. W górnej części okna kliknij Zezwalaj, aby dać DevTools dostęp do odczytu i zapisu do katalogu.
  6. Wprowadź zmiany ”.

AKTUALIZACJA (19 marca 2018 r.): Jest dostępna, szczegółowe wyjaśnienia tutaj: https://developers.google.com/web/updates/2018/01/devtools#overrides

Nico
źródło
12
Wraz z wydaniem Chrome 65 powinna to być nowa akceptowana odpowiedź. (Funkcjonalność była już dostępna w Chrome Canary)
Micros
1
Mam plik „a.js? Ver = 1.2”. Jest on zapisywany w folderze zastępowania jako „a.js” i nie jest ładowany jako zastąpienie. Czy to nie działa, gdy istnieją parametry? Czy jest w pobliżu praca?
Ralf
Działa zgodnie z przeznaczeniem, ale musisz zadbać o jedno. Musisz wyczyścić konfiguracje zastępowania lub usunąć lokalnie zmodyfikowany plik (zapisany w folderze określonym podczas konfigurowania zastąpień), gdy chcesz załadować oryginalny plik js.
Muhammad Murad Haider
61

Zastąp zasób rozszerzenie pozwala dokładnie to zrobić:

  • utwórz regułę pliku dla adresu URL, który chcesz zastąpić
  • edytuj js / css / etc w rozszerzeniu
  • przeładuj tak często, jak chcesz :)
laktak
źródło
1
Czy sztuczka mi podziękowała. Przed tym rozszerzeniem korzystałem z Fiddler dla Windows. W tej chwili mogę debugować zdalne pliki na dowolnej platformie.
Ahmad Alfy
Nie rozumiem oprogramowania, czy ktoś może wyjaśnić, jak dokładnie muszę go skonfigurować?
Czarny
0

Wiem, że nie jest to odpowiedź na dokładne pytanie (Chrome Developer Tools), ale z powodzeniem korzystam z tego obejścia: http://www.telerik.com/fiddler

(całkiem pewne, że niektórzy twórcy stron internetowych już wiedzą o tym narzędziu)

  1. Zapisz plik lokalnie
  2. Edytuj zgodnie z wymaganiami
  3. Zysk!

wprowadź opis zdjęcia tutaj

Pełna dokumentacja: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Wolę zaimplementować go w Chrome jako flagę preserve after reload, nie mogę tego teraz zrobić, fora i grupy dyskusyjne zablokowane w sieci firmowej :)

Mars Robertson
źródło
-8

Tak, po prostu otwórz kartę „Źródło” w narzędziach programistycznych i przejdź do skryptu, który chcesz zmienić. Wprowadź zmiany bezpośrednio w oknie narzędzi deweloperskich, a następnie naciśnij ctrl + s, aby zapisać skrypt - wiedz, że nowe js będą używane, dopóki nie odświeżysz całej strony.

jacksbox
źródło
Jaka wersja Chrome? Tak, możesz „edytować” treść skryptu (ale nie skrypty na samej stronie), ale zmiany nie mają żadnego efektu, a ctrl-s / save jako pozwala tylko zapisać skrypt lokalnie (jako ctrl-jak w okno główne).
davidkonrad
Używam wersji 34 - kiedy edytuję skrypt, np. Dodaję plik console.log do zdarzenia kliknięcia (już powiązanie) i zapisz, konsola generuje następujący komunikat: „Ponowna kompilacja i aktualizacja się powiodła”. - po tym. kiedy wywołuję zdarzenie kliknięcia, otrzymuję dane wyjściowe dziennika w konsoli.
jacksbox
Po ponownym załadowaniu strony wygląda na to, że nie używał lokalnie zmodyfikowanego pliku.
Jake Wilson
32
miałeś mnie na „tak” ... ale potem straciłeś mnie na „dopóki nie odświeżysz całej strony” ....
Cool Blue