Edycja w debugerze Chrome


247

Jak „dynamicznie” edytować kod JavaScript w debugerze Chrome? To nie jest dla mnie, więc nie mam dostępu do pliku źródłowego. Chcę edytować kod i zobaczyć, jakie efekty mają na stronie, w tym przypadku zatrzymując animację w kolejce kilka razy.


5
Możesz użyć Opery. Opera umożliwia edycję plików JS. Po miękkim przeładowaniu strony zmiany zostaną zastosowane. Kliknij prawym przyciskiem myszy> Źródło> Wprowadź zmiany> Zastosuj zmiany.
XP1

To niesamowity samouczek dla debugera Chrome. Pokazuje bardzo proste kroki wprowadzania zmian w skryptach w debuggerze.
SaganRitual

1
Możesz także „wstrzyknąć” kod za pomocą warunkowego punktu przerwania . W podanym przykładzie użyj num = 5, console.log(arguments[0], num), falsedo aktualizacji i zarejestrowania wartości wewnątrz foofunkcji.
mem

Odpowiedzi:


80

Możesz użyć wbudowanego debugera JavaScript w Narzędziach dla programistów Chrome na karcie „Skrypty” (w późniejszych wersjach jest to karta „Źródła”), ale zmiany, które zastosujesz w kodzie, są wyrażane tylko w momencie, gdy przechodzi przez nie wykonanie. Oznacza to, że zmiany w kodzie, który nie działa po wczytaniu strony, nie będą miały wpływu. W przeciwieństwie do np. Zmian w kodzie znajdującym się w najechaniu myszką obsługi , które można testować w locie.

Jest film z wydarzenia Google I / O 2010 przedstawiającego inne możliwości Narzędzi Chrome dla programistów.


26
W późniejszych wersjach Chrome ikony kart zniknęły, a karta „Skrypty” została przemianowana na „Źródła” - więc znalezienie debuggera w javascript może nie być oczywiste. Więcej informacji tutaj stackoverflow.com/questions/12113769/...
chrisjleu

9
Nie ma takiej metody. Nie mogę również modyfikować kodu w zakładce Źródła.
Melab

17
Debuger Chrome nie pozwala na lokalną modyfikację javascript. Fałszywe.
omikes

1
@oMiKeY Co to jest fałsz? Chrome z pewnością pozwala modyfikować skrypt w debuggerze.
JLRishe,

6
@oMiKeY możesz zmodyfikować, jeśli skrypt nie jest
prettified

284

Natknąłem się na to dzisiaj, kiedy bawiłem się z czyjąś stroną internetową.

Uświadomiłem sobie, że mogę dołączyć punkt przerwania w debuggerze do jakiegoś wiersza kodu przed tym, co chciałem dynamicznie edytować. A ponieważ punkty przerwania pozostają nawet po ponownym załadowaniu strony , mogłem edytować zmiany, które chciałem, gdy byłem zatrzymany w punkcie przerwania, a następnie pozwalałem na załadowanie strony.

Tak szybko, aby obejść, a jeśli to działa w twojej sytuacji:

  1. Dodaj punkt przerwania we wcześniejszym punkcie skryptu
  2. Odśwież stronę
  3. Edytuj zmiany w kodzie
  4. CTRL+ s(zapisz zmiany)
  5. Anuluj debuger

1
Dzięki! Okazało się, że zadziałało to, gdy trzeba wprowadzić zmiany w anonimowej funkcji, która została wywołana tuż przy ładowaniu strony.
Peter

1
Argh, ponieważ próbowałem tego wcześniej i to nie zadziałało i chociaż, o rany, jak mi tego brakowało. Ale tak, nie działa dla mnie.
Jamie Hutber,

8
Kluczowe dla mnie było wiedzieć, że zmiany należy zapisać (krok 4). Dzięki!
Sergey Goliney,

3
Dla mnie nie działa na javascript w plikach HTML. Ponadto, jeśli dodałeś folder do obszaru roboczego, wybierz lokalny plik js, kliknij prawym przyciskiem myszy i zamapuj ten plik na dito sieci.
oo

1
Więc nie ma żadnego sposobu modyfikowania skryptów w plikach HTML?
Warrior

13

Oto czego szukasz:

1.- Przejdź do zakładki Źródło i otwórz plik javascript

2. - Edytuj plik, kliknij go prawym przyciskiem myszy, a pojawi się menu: kliknij Zapisz i zapisz lokalnie.

Aby wyświetlić różnicę lub przywrócić zmiany, kliknij prawym przyciskiem myszy i wybierz opcję Modyfikacje lokalne ... Zobaczysz różnice w stosunku do oryginalnego pliku, jeśli rozwiniesz pokazany znacznik czasu.

Bardziej szczegółowe informacje tutaj: http://www.sitepoint.com/edit-source-files-in-chrome/


5

Całkiem proste, przejdź do zakładki „skrypty”. I wybierz żądany plik źródłowy i kliknij dwukrotnie dowolny wiersz, aby go edytować.


4
Byłoby wspaniale, gdybyś mógł zapisać zmiany na dysku w przypadku pliku: // URL
Jim Blackler

3
Tak właśnie zrobiłem, ale zmiany nie zostały odzwierciedlone na stronie, jak można się spodziewać. Muszę zmienić $ (selektor) .fadeIn () ... na $ (selektor) .stop (prawda, prawda) .fadeIn () ... Wiesz? I chcę zobaczyć, jak to się dzieje na stronie.
Tom

1
Cholera, masz rację. Teraz zastanawiam się, dlaczego Chrome pozwala nam edytować cokolwiek, jeśli nie ma żadnego efektu.
gnur

„Zapisz jako ...” zapisuje tylko plik na komputerze. Nie stosuje zmian po ponownym załadowaniu strony. Jeśli chcesz zastosować zmiany do plików JS w celu debugowania, możesz użyć Opery.
XP1


3

Ponieważ jest to dość popularne pytanie dotyczące edycji JS na żywo, chcę wskazać kolejną przydatną opcję. Jak opisał svjacob w swojej odpowiedzi:

Uświadomiłem sobie, że mogę dołączyć punkt przerwania w debuggerze do jakiegoś wiersza kodu przed tym, co chciałem dynamicznie edytować. A ponieważ punkty przerwania pozostają nawet po ponownym załadowaniu strony, mogłem edytować zmiany, które chciałem, gdy byłem zatrzymany w punkcie przerwania, a następnie pozwalałem na załadowanie strony.

Powyższe rozwiązanie nie działało dla mnie dla dość dużego JS (pakiet webpack - wersja zminimalizowana 3,21 MB, 130k wierszy kodu w wersji prettified) - chrome zawiesił się i poprosił o ponowne załadowanie strony, które cofnęło wszelkie zapisane zmiany. W tym przypadku najlepszym rozwiązaniem był Fiddler, w którym można ustawić opcję AutoRespond w celu zastąpienia dowolnego zasobu zdalnego dowolnym plikiem lokalnym z komputera - szczegółowe informacje można znaleźć w pytaniu SO .

W moim przypadku musiałem również dodać nagłówki CORS do skrzypka, aby skutecznie udawać odpowiedź.


2

Jeśli jego javascript, który działa po kliknięciu przycisku, wystarczy dokonać zmiany w sekcji Źródła> Źródła (w narzędziach programistycznych w chrome) i naciśnięcie Ctrl + S, aby zapisać . Robię to cały czas.

Jeśli odświeżysz stronę, zmiany w javascript znikną, ale Chrome nadal będzie pamiętał twoje punkty przerwania.


2

Teraz Google Chrome wprowadził nową funkcję. Korzystając z tej funkcji możesz edytować kod w przeglądarce Chrome. (Trwała zmiana lokalizacji kodu)

W tym celu naciśnij F12 -> zakładka Źródło - (prawa strona) -> System plików - w tym miejscu wybierz lokalizację kodu. a następnie przeglądarka Chrome poprosi o pozwolenie, a po tym kod zostanie zatopiony w kolorze zielonym. i możesz zmodyfikować swój kod, który będzie również odzwierciedlał twoją lokalizację kodu (oznacza to, że zmieni się na stałe)

Dzięki


2

Podobnie jak odpowiedź @mark, możemy utworzyć fragmenty w Chrome DevTools, do overridedomyślnego JavaScript. Wreszcie możemy zobaczyć, jakie efekty mają na stronie.

Wizerunek


1

oto delikatne wprowadzenie do debugera js w chrome, które napisałem. Może pomoże innym w szukaniu informacji na ten temat: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/


1
To dobry opis. Niestety, nie mówi nic o edycji JS w debuggerze, co jest zadaniem, o którym mowa.
Bruno Bronosky,

Nie zgadzać się. Na końcu podam przykład, w jaki sposób „„ dynamicznie ”edytować kod JavaScript w debuggerze Chrome”, który jest częścią pytania.
meeech

1
meeech, chyba że nie rozumiem twojego postu, demonstrujesz, jak ocenić JS na konsoli. Różni się to od edycji funkcji, więc gdy funkcja zostanie wywołana w przyszłości, zachowuje się inaczej.
Bruno Bronosky

Słusznie. Zrozumiałem, że edycja oznacza zmianę wokół wartości strony aktywnej i pomyślałem, że napisanie pomogłoby, ponieważ gdy już znajdziesz ją w konsoli, możesz bawić się wartościami i dowolną inną rzeczą w kontekście wykonania.
meeech

1
tak, mówię, robiłem dokładnie to, co opisujesz przez wiele lat. Właśnie w końcu się denerwowałem, że nie byłem w stanie uzyskać dobrej pętli sprzężenia zwrotnego do zmiany procedur obsługi zdarzeń. Zwłaszcza te, które uruchamiają się podczas ładowania strony. Jak omawialiśmy z AaronLS w komentarzach do odpowiedzi gnur, czasami edycja w DevTools> Źródła> Źródła działa, a innym razem nie. Ale kiedy to działa, jest całkiem słodkie!
Bruno Bronosky

1

możesz dynamicznie edytować pliki javascrpit w debuggerze Chrome na karcie Źródła , jednak zmiany zostaną utracone, jeśli odświeżysz stronę, aby wstrzymać ładowanie strony przed wprowadzeniem zmian, musisz ustawić punkt przerwania, a następnie ponownie załadować stronę i edytuj zmiany, a na końcu wyłącz debuger, aby zobaczyć, jak zmiany zaczną obowiązywać. Debuger Chrome


musisz pozostawić otwartą konsolę, aby chrom zatrzymał się w
punktach

nie działa. Przeładowuję za pomocą F5 i zatrzymuje się, zmieniam plik, następnie kontynuuję działanie i pojawia się ten sam błąd, który właśnie naprawiłem. Jest to plik js obok strony głównej.,
darkgaze

1

Szukałem sposobu na zmianę skryptu i debugowanie tego nowego skryptu. Udało mi się to zrobić:

  1. Ustaw punkt przerwania w pierwszym wierszu skryptu, który chcesz zmienić, i debuguj.

  2. Załaduj stronę ponownie, aby został osiągnięty punkt przerwania

  3. Wklej nowy skrypt i ustaw w nim pożądane punkty przerwania

  4. Ctrl + s, a strona zostanie odświeżona, co spowoduje trafienie w punkt przerwania w pierwszym wierszu.

  5. F8, aby kontynuować, a teraz nowo wklejony skrypt zastępuje oryginalny, o ile nie zostaną wykonane żadne przekierowania i przeładowania.



0

Możesz użyć opcji „Zastąpienia” w Chrome, aby zachować zmiany w javascript między ładowaniami stron, nawet jeśli nie hostujesz oryginalnego źródła.

  1. Utwórz folder w obszarze Narzędzia dla programistów> Źródła> Zastąpienia
  2. Chrome poprosi o pozwolenie na folder, kliknij Zezwalaj
  3. Edytuj plik w menu Źródła> Strona, a następnie zapisz (ctrl-s). Fioletowa kropka oznacza, że ​​plik jest zapisywany lokalnie.

Podkarta Zastępuje w Narzędziach Chrome dla programistów

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.