Google Chrome: Jak edytować pliki JavaScript / CSS i przeglądać zmiany bez ponownego ładowania?

Chcę wprowadzać zmiany za pośrednictwem karty źródeł Inspect Elementsi chcę szybko wyświetlić podgląd bez odświeżania przeglądarki.

Czy istnieje sposób, aby to zrobić?

Na przykład w JavaScript mam zmienną:

var abc = 'xyz';

Ale poprzez kartę Źródła dostałem się do mojego pliku skryptu i zmieniłem kod:

var abc = 'hello world';

Czy teraz, jeśli spróbuję alert(abc), pokaże najnowsze zmiany? Nie chcę odświeżać, aby zobaczyć tę zmianę.

Czy istnieje jakaś możliwość lub wtyczka, która może to zrobić? Ponieważ czasami jest to oszczędność czasu. Na przykład za każdym razem, gdy testuję, muszę wykonać wiele kroków, aby zobaczyć jakąś wartość lub odpowiedź. Tak więc, aby dokonać drobnej zmiany, muszę ją zmienić w oryginalnym pliku i odświeżyć ponownie, aby go zobaczyć. W ten sposób zawsze muszę przejść przez cały proces, który marnuje dużo czasu.

— użytkownik2899728
źródło

Można używać Chrome Developer Tools (naciśnij F12lub Ctrl+ Shift+ I) do debugowania kodu JavaScript i manipulować przy starcie. Następnie możesz ustawić punkty przerwania w kodzie, badać obiekty, bawić się wartościami, wywoływać funkcje z konsoli i nie tylko. Wszystko bez konieczności zmiany fizycznych plików źródłowych lub ponownego ładowania okna.

Zaktualizuj następujący komentarz PO:

Oto szybki i brudny przykład tworzenia nowej funkcji w locie, a następnie wywoływania jej w konsoli. Pierwsza linia dodaje funkcję (dodanie samej funkcji nie zwraca niczego znaczącego, więc otrzymujesz „niezdefiniowany” wynik). Następnie nazywam tę nową funkcję, która zgodnie z oczekiwaniami pojawia się w oknie alertu (nie pokazanym na zrzucie ekranu) i zwraca wartość 17.

Możesz zrobić to samo i zwracać wartości obliczone z bieżącej strony w jej bieżącym stanie. Jeśli umieściłeś punkt przerwania w swoim kodzie, możesz użyć konsoli do zbadania obiektów i wartości lub wykonać do nich zmiany w czasie wykonywania. BTW, dotyczy to również DOM , więc możesz manipulować kodem HTML również przez konsolę.

— Atzmon
źródło

Dzięki za wiadomość. Próbowałem twojej metody, ale to nie zadziałało. Dodałem funkcję poprzez zakładkę źródła i

— wywołałem

Zaktualizowałem swoją odpowiedź powyżej, przykładowy zrzut ekranu i wyjaśnienie.

— Atzmon

Wiem, że można zaktualizować funkcję za pomocą konsoli. Ale chcę zmienić z istniejącego źródła na karcie źródła lub w inny sposób. Ponieważ czasami mam bardzo złożone i długie funkcje, których normalnie nie można wkleić w konsoli. Czy jest na to lepszy sposób?

— user2899728

Tak. Zakładając, że twój javascript znajduje się w zewnętrznych plikach (nie osadzonych kawałków skryptu w HTML), umieść punkt przerwania przed częścią, którą chcesz zmienić, a następnie, gdy debugger trafi na ten punkt przerwania, po prostu zmień źródło w zakładce Źródła i kontynuuj debugowanie. Twój nowy kod zostanie uruchomiony. Należy pamiętać, że nie zmienia to rzeczywistych plików kodu (zmiany zostaną usunięte po odświeżeniu lub zamknięciu Chrome).

— Atzmon