Edycja JavaScript za pomocą narzędzi programistycznych Chrome

Question 1

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?

Question 2

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.

Question 3

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.

Question 4

Ma pewne ograniczenia:

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

Question 5

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.

Question 6

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

Answer 1

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

Answer 2

1

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

Cooperia

Answer 3

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

Answer 4

1

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

cooperia

Answer 5

1

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

Cooperia

Answer 6

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

Answer 7

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

Answer 8

4

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

Bolas

Answer 9

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

Answer 10

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,

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

4

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

roopunk

Answer 15

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,

Answer 16

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

geeves

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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

techie_28

Answer 21

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

gcb

Answer 22

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.

Answer 23

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

Edycja JavaScript za pomocą narzędzi programistycznych Chrome

Odpowiedzi: