Edycja JavaScript za pomocą narzędzi programistycznych Chrome

94

Próbuję edytować javascript w witrynie za pomocą narzędzi programistycznych Chrome. Przeczytałem około 30 relacji o tym, jak to zrobić, a także obejrzałem kilka filmów. Faktem jest, że kiedy przechodzę do zakładki źródeł i otwieram plik, który chcę edytować, nie mogę nic z tym zrobić. Czy brakuje mi jakiegoś kroku?

Potrafię tworzyć punkty przerwania, przechodzić itp. Po prostu nie mogę edytować. Czy ta funkcja została niedawno usunięta?

javascript google-chrome web-developer-toolbar

— Cooperia
źródło

1

Mogę wykonywać połączenia w konsoli. Po prostu nie mogę edytować rzeczy.

— Cooperia

1

Możesz przesłonić lokalne funkcje i zmienne, ale nie ma możliwości zapisania zmian w pliku za pomocą narzędzi programistycznych. Nadal potrzebujesz do tego zewnętrznego edytora.

— Geuis

1

Właściwie mogę edytować pliki css, ale nie mogę edytować skryptu osadzonego w pliku php. >.>

— cooperia

1

Cóż, mogę robić, co chcę z Operą. Problem rozwiązany.

— Cooperia

1

@cooperia umieść swój kod js w pliku * .js, a następnie będziesz mógł edytować i uruchamiać go w czasie rzeczywistym w chrome.

— Mahn

104

Wiem, że to pytanie jest nieaktualne, ale właśnie miałem podobny problem i znalazłem rozwiązanie.

Jeśli masz wstępnie upiększony plik, Chrome nie pozwoli na edycję. Wyłączyłem go i mogłem edytować. Chcesz się założyć, że to / był twój problem.

— raddevon
źródło

4

tak, to pomogło, dziękuję @raddevon, mogę je teraz edytować, ale na stronie nie dzieje się żaden efekt

— Bolas

2

Dla innych, którzy szukają tego tematu: Prettify ustawiłem na OFF, ale nadal nie mogłem edytować. Ponowne włączenie i wyłączenie pomogło. (Dzięki IT Crowd za tę radę;))

— Drkawashima

3

Kontynuacja: Nie. Okazuje się, że mam ten sam problem co @raddevon. Być może błąd w chrome. Możesz edytować i zapisywać skrypt, a także osiągać w nim punkty przerwania podczas debugowania. Ale skrypt, który faktycznie działa, jest nadal oryginalną, nieedytowaną wersją. Przykład: Edytowałem skrypt, skomentowałem każdą linię, ale nadal mogłem uruchomić skrypt, trafić w punkty przerwania w wierszach itp. Więc edytowana wersja nawet nie działa, jest po prostu wyświetlana ... Oczywiście ponownie uruchamiam skrypt na wiele różnych sposobów bez żadnego efektu

— Drkawashima,

4

Na marginesie, jeśli upiększasz, a następnie kopiujesz i wklejasz z powrotem do oryginalnego pliku, będzie to wstępnie zdefiniowany oryginalny plik, który można edytować.

— Eoin

2

@Eoin Wonderful! To całkowicie załatwiło sprawę. Dzięki funkcji „Zastąpienia lokalne” działa to doskonale. Dzięki za podpowiedź :-)

— Xan-Kun Clark-Davis

52

Możesz edytować javascript w narzędziach programistycznych na karcie „Źródła”, ALE pozwoli on edytować javascript tylko w jego własnym pliku. Skrypt osadzony w pliku HTML (lub PHP) pozostanie tylko do odczytu.

— welah
źródło

4

Używam Chrome na Linuksie i nadal nie mogę edytować javascript, nawet jeśli jest to pojedynczy plik .js.

— roopunk

2

Niezwykle interesująca uwaga: Włączanie / wyłączanie Pretty Print (ikona „{}”) umożliwi edycję osadzonego pliku js, ale zmiany nie zostaną wprowadzone, więc nadal nie jest to to, czego szukamy. (Chrome 29)

— Patrick,

To właśnie musiałem wiedzieć. Dziękuję Ci.

— geeves

29

Ma pewne ograniczenia:

musi być plikiem JS. nie można osadzać tagów na stronie html.
nie można jej upiększać.

— gcb
źródło

Jeśli po zastosowaniu się do powyższych wskazówek i zmian w zakładce Źródła po prostu nie przyniosą efektu, spróbuj kliknąć prawym przyciskiem myszy edytowany plik w widoku drzewa po lewej stronie i wybierz „Zapisz”. Może pojawić się okno dialogowe z prośbą o zapisanie pliku lokalnego, ale możesz po prostu anulować. Dopiero w tym momencie historia edycji Chrome w końcu pokazuje, że edycja utknęła.

— Erhhung

Szalałem, ponieważ ten nowy plik miał osadzony plik js, ale nie mogłem go edytować ... nie rozumiałem dlaczego ... dziękuję #gcb i #welah

— carinlynchin

Czy można usunąć plik JS z listy w Sourceszakładce Narzędzia programistyczne?

— techie_28

@ techie_28 nie jestem pewien, otwórz kolejne pytanie. Ale napisałbym do tego szybkie rozszerzenie.

— gcb

13

Nie wiem, czy potrzebujesz tego, aby zapisać na stałe, ale jeśli chcesz tylko tymczasowo zmodyfikować js:

Mogę skopiować ten javascript, który chcę zmodyfikować, do edytora tekstu, edytować go, a następnie wkleić w konsoli, a on przedefiniuje wszelkie funkcje lub cokolwiek, co muszę przedefiniować.

na przykład, jeśli strona zawiera:

<script>
var foo = function() { console.log("Hi"); }
</script>

Mogę przenieść zawartość między skryptem, edytować ją, a następnie wprowadzić do debugera, na przykład:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

i będzie działać dla mnie.

Lub jeśli masz ochotę

function foo() {
    doAThing();
}

Możesz po prostu wejść

function foo() {
    doSomethingElse();
}

i foo zostaną przedefiniowane.

Prawdopodobnie nie jest to najlepsze obejście, ale działa. Będzie działać do momentu ponownego załadowania strony.

— byronaltice
źródło

5

Wyszukałem „chrome dev tool edit javascript”. Ta strona jest pierwszym wynikiem wyszukiwania. Ale jest zbyt przestarzały, to mi nie pomaga.

Używam przeglądarki Chrome 73, ta wersja przeglądarki Chrome ma opcję „Włącz lokalne zastąpienia”. Korzystając z tej funkcji, mogłem edytować javascript, uruchamiać i debugować.

— wafe
źródło