Edycja w debugerze Chrome

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.

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.

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

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/

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

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ź.

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.

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

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

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/

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ć.

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.

Chrome DevTools ma fragmenty panel , w którym możesz tworzyć i edytować kod JavaScript, tak jak w edytorze, i wykonywać go. Otwórz DevTools, następnie wybierz panel Źródła, a następnie wybierz kartę Snippets.

https://developers.google.com/web/tools/chrome-devtools/snippets

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.