Data publikacji: 22 października 2025 r.
Chrome wycofuje funkcję edycji na żywo źródeł JavaScriptu. W Chrome 142 zostanie przeniesiona za flagę eksperymentalną, a w Chrome 145 (w lutym 2026 r.) planujemy ją całkowicie usunąć. Nie usuwamy innych zaawansowanych funkcji związanych z plikami źródłowymi, takich jak lokalne zastąpienia, obszary robocze czy fragmenty kodu, które będą nadal w pełni obsługiwane.
Zespół narzędzi deweloperskich w Chrome nieustannie pracuje nad udostępnianiem programistom wydajnych i niezawodnych narzędzi. W ramach tych działań czasami musimy wycofać funkcje, które nie spełniają już swojej roli. Decyzja ta nie została podjęta pochopnie. Jest ona spowodowana nieproporcjonalnie wysokimi kosztami utrzymania tej funkcji, jej niską popularnością i istnieniem lepszych, nowocześniejszych alternatyw. Wiemy, że zmiany w dowolnym przepływie pracy mogą być uciążliwe, dlatego w tym poście wyjaśniamy nasze powody.
Czym była edycja na żywo?
Edytowanie na żywo umożliwia zastępowanie treści pliku skryptu w czasie działania programu. Działało to nawet wtedy, gdy skrypt był wstrzymany w punkcie przerwania. Możesz zmodyfikować kod JavaScript w panelu Źródła i zastosować zmianę, zapisując plik (Command+S / Ctrl+S). Debuger będzie wtedy poprawiał funkcje, które zostały już zdefiniowane w czasie działania. Jeśli zmodyfikowana funkcja znajdowała się na stosie wywołań, zostanie ona również ponownie uruchomiona.
Chodziło o umożliwienie testowania niewielkich zmian bez ponownego wczytywania całej strony, co w przeciwnym razie spowodowałoby wyczyszczenie stanu aplikacji. W ten sposób jego cel był podobny do tego, co w nowoczesnych środowiskach programistycznych osiąga funkcja Hot Module Replacement (HMR).
Dlaczego usuwamy tę funkcję?
Korzystanie z edycji na żywo zawsze było trudne. Powiązany skrót (Command+S / Ctrl+S) jest zwykle powiązany z zapisywaniem pliku, ale nie z dalszymi efektami ubocznymi, co może być zaskakujące. Gdy to się nie uda, komunikat zwrotny może być niejasny: narzędzia deweloperskie mogą wyświetlić ostrzeżenie, np. „LiveEdit failed: Functions that are on the stack (currently being executed) can not be edited” (Edycja na żywo nie powiodła się: nie można edytować funkcji, które są na stosie (aktualnie wykonywane)), które można przeoczyć, przez co deweloper nie ma pewności, czy jego zmiana została zastosowana.
Sytuacja staje się jeszcze gorsza, gdy edycja na żywo wchodzi w interakcję z innymi funkcjami Narzędzi deweloperskich związanymi z plikami źródłowymi. Na przykład edytowanie na żywo treści fragmentu kodu w Narzędziach deweloperskich może wprowadzić Narzędzia deweloperskie w błąd w odniesieniu do tożsamości źródła fragmentu kodu, co spowoduje, że nowa wersja będzie wyświetlana jako plik tylko do odczytu. Gdy funkcja obszarów roboczych jest włączona, Narzędzia deweloperskie mogą obserwować zmiany w systemie plików i bezproblemowo stosować je na stronie na żywo. To zachowanie może być oczekiwane lub zaskakujące w zależności od środowiska użytkownika i konfiguracji jego łańcucha narzędzi.
Pierwotny problem, który próbowano rozwiązać za pomocą edycji na żywo – wprowadzanie zmian bez utraty stanu aplikacji – jest teraz skuteczniej rozwiązywany przez Hot Module Replacement (HMR). HMR to standardowa funkcja nowoczesnych platform do tworzenia stron internetowych, takich jak React, Angular czy Vue. Działa w przestrzeni użytkownika i na wyższym poziomie abstrakcji. Edytowanie na żywo w Narzędziach deweloperskich może zakłócać działanie tej funkcji, co może powodować nieoczekiwane i nieprawidłowe zachowania.
Te problemy utrudniają korzystanie z aplikacji. Potwierdzają to też nasze statystyki użytkowania. Funkcja nie stała się podstawowym elementem pracy większości deweloperów. Liczba użytkowników korzystających z tej funkcji jest bardzo mała i wykazuje tendencję spadkową.
Wysokie koszty utrzymania i złożoność techniczna
Zastępowanie kodu na opublikowanej stronie nie jest proste ani pod względem określania rozsądnej semantyki, ani pod względem implementacji. Wymaga to znacznych nakładów pracy inżynierskiej w przypadku mechanizmu JavaScript V8 i Narzędzi deweloperskich w Chrome, a także starannego rozważenia wielu aspektów V8. Jeśli nie zachowasz ostrożności, edytowanie na żywo może spowodować awarie, które trudno odtworzyć i zdiagnozować. Jeśli na przykład nowa wersja funkcji zawiera inną liczbę literałów wyrażeń regularnych, obiektów lub funkcji niż wcześniejsza wersja, struktura danych, która śledzi te literały, musi zostać starannie uzgodniona.
Obciążenie związane z konserwacją spowalnia wdrażanie nowych funkcji JavaScript i odciąga zasoby od ulepszania częściej używanych funkcji Narzędzi deweloperskich.
Ta złożoność doprowadziła też do wielu nieobsługiwanych scenariuszy, w tym:
- Edytowanie funkcji, która znajduje się na stosie wywołań, ale nie jest ramką najwyższego poziomu.
- Edytowanie funkcji asynchronicznych lub generatorów.
- Edytowanie kodu najwyższego poziomu modułu ES.
Alternatywy
Jak już wspomnieliśmy, zastępowanie modułów na gorąco (HMR) jest popularniejszą alternatywą i przewyższa edycję na żywo w kilku kluczowych aspektach:
- Edycja na żywo zastępuje części starszej wersji opublikowanej strony na poziomie kodu źródłowego. Z drugiej strony HMR zastępuje starszą wersję na poziomie abstrakcji przeznaczonym dla platformy internetowej, co zwiększa szansę na prawidłowe przeniesienie stanu komponentu i aplikacji podczas aktualizacji na żywo.
- HMR działa na podstawie napisanego przez Ciebie kodu źródłowego. Edytujesz oryginalne pliki (np. TypeScript, JSX) w edytorze, a narzędzie do kompilacji obsługuje aktualizację w przeglądarce. Edycja na żywo wpływa tylko na wdrożone pliki źródłowe, które w wielu przypadkach są danymi wyjściowymi kompilacji wygenerowanymi przez łańcuch narzędzi.
- Jest solidny i dobrze zintegrowany. HMR to podstawowy element nowoczesnego łańcucha narzędzi deweloperskich, który zapewnia niezawodne działanie i jasne informacje zwrotne o tym, czy aktualizacje się powiodły.
Usunięcie edytowania na żywo nie ma wpływu na 2 inne przydatne funkcje w Narzędziach deweloperskich w Chrome:
- Lokalne zastąpienia umożliwiają przechwytywanie żądań sieciowych i zamiast nich udostępnianie plików lokalnych. Jest to idealne rozwiązanie do prototypowania zmian w działającej witrynie produkcyjnej, w której nie masz dostępu do kodu źródłowego. Zmiany są zachowywane po ponownym wczytaniu strony.
- Obszary robocze przekształcają Narzędzia deweloperskie w bardziej zaawansowany edytor, tworząc dwukierunkowe powiązanie między panelem Źródła a lokalnymi plikami projektu. Gdy zapiszesz zmianę w Narzędziach deweloperskich, zostanie ona zapisana bezpośrednio w systemie plików. Może to spowodować uruchomienie procesu HMR lub ponownego wczytywania na serwerze deweloperskim.
Podsumowanie
Usuwamy edytowanie na żywo, ponieważ wysokie koszty utrzymania i niskie wykorzystanie tej funkcji sprawiają, że jest ona nieopłacalna. Nowoczesny ekosystem tworzenia stron internetowych zapewnia znacznie lepsze rozwiązanie w postaci wymiany modułów na gorąco.
Wycofanie tej funkcji pozwoli nam skupić się na bardziej istotnych częściach Narzędzi deweloperskich w Chrome. Harmonogram usuwania wygląda następująco:
- W najbliższej przyszłości: funkcja zostanie przeniesiona do eksperymentu w Chrome 142 i będzie dostępna jako flaga Chrome (chrome://flags/#devtools-live-edit).
- Chrome 145 (luty 2026 r.): funkcja i odpowiednia flaga Chrome zostaną całkowicie usunięte.
Chętnie poznamy Twoją opinię o tej zmianie. Dodaj komentarze do problemu z opinią.