Dipublikasikan: 22 Oktober 2025
Chrome menghentikan penggunaan fitur pengeditan langsung sumber JavaScript. Fitur ini akan dipindahkan ke belakang tanda eksperimen di Chrome 142 dan kami berencana untuk menghapusnya sepenuhnya di Chrome 145 (Februari 2026). Kami tidak menghapus fitur canggih lainnya yang terkait dengan file sumber seperti Penggantian Lokal, Ruang Kerja, atau Cuplikan, yang akan terus didukung sepenuhnya.
Tim Chrome DevTools terus berupaya menyediakan alat yang canggih dan andal bagi developer. Sebagai bagian dari upaya ini, terkadang kami perlu menghentikan fitur yang tidak lagi berfungsi dengan baik. Keputusan ini tidak diambil dengan mudah dan didasarkan pada biaya pemeliharaan fitur yang sangat tinggi secara tidak proporsional, penggunaan yang rendah, dan keberadaan alternatif modern yang lebih unggul. Kami tahu bahwa perubahan pada alur kerja apa pun dapat mengganggu, dan postingan ini bertujuan untuk menjelaskan alasan kami dengan jelas.
Apa itu pengeditan langsung?
Pengeditan langsung memungkinkan Anda mengganti konten file skrip saat runtime, secara langsung. Fitur ini bahkan berfungsi saat skrip dijeda pada titik henti sementara. Anda dapat mengubah kode JavaScript di panel Sources dan menerapkan perubahan dengan menyimpan file (Command+S / Ctrl+S). Kemudian, debugger akan mem-patch fungsi yang sudah ditentukan saat runtime. Jika fungsi yang diubah ada di stack panggilan, fungsi tersebut juga akan dimulai ulang.
Tujuannya adalah untuk menyediakan cara menguji perubahan kecil tanpa memuat ulang halaman secara penuh, yang akan menghapus status aplikasi. Dengan cara ini, tujuannya mirip dengan yang dicapai Hot Module Replacement (HMR) dalam stack pengembangan modern.
Mengapa kami menghapusnya?
Pengalaman pengguna untuk pengeditan langsung selalu menjadi tantangan. Pintasan terkait (Command+S / Ctrl+S) biasanya dikaitkan dengan penyimpanan file, tetapi tidak dengan efek samping lebih lanjut, yang mungkin mengejutkan. Jika gagal, masukan dapat menjadi tidak jelas: DevTools dapat menampilkan pesan peringatan seperti "LiveEdit gagal: Fungsi yang ada di stack (saat ini sedang dieksekusi) tidak dapat diedit", yang dapat terlewatkan, sehingga membuat developer tidak yakin apakah perubahannya diterapkan.
Situasinya akan lebih buruk saat pengeditan langsung berinteraksi dengan fitur DevTools lainnya yang terkait dengan file sumber. Misalnya, mengedit langsung konten Cuplikan DevTools dapat membingungkan DevTools terkait identitas sumber cuplikan, sehingga versi baru ditampilkan sebagai file hanya baca. Jika fitur Ruang Kerja diaktifkan, DevTools dapat mengamati perubahan sumber di sistem file dan menerapkan perubahan ini dengan lancar ke halaman aktif. Perilaku ini mungkin diharapkan atau mengejutkan, bergantung pada lingkungan pengguna dan penyiapan toolchain mereka.
Masalah awal yang coba diselesaikan oleh pengeditan langsung–melakukan perubahan tanpa kehilangan status aplikasi–kini diselesaikan secara lebih efektif oleh Hot Module Replacement (HMR). HMR adalah fitur standar dalam framework pengembangan Web modern seperti React, Angular, atau Vue. Hal ini mencapai efek yang sama di ruang pengguna dan pada tingkat abstraksi yang lebih tinggi. Pengeditan langsung di DevTools dapat mengganggu hal tersebut, sehingga menyebabkan perilaku yang tidak terduga dan salah.
Masalah ini berkontribusi pada pengalaman pengguna yang sulit. Selain itu, berdasarkan statistik penggunaan kami, fitur ini belum menjadi bagian inti dari alur kerja sebagian besar developer. Jumlah pengguna yang berinteraksi dengan fitur ini sangat rendah, dengan tren menurun.
Biaya pemeliharaan yang tinggi dan kompleksitas teknis
Mengganti kode di halaman aktif tidaklah mudah dalam hal menentukan semantik yang wajar, tetapi juga dalam penerapannya. Hal ini menimbulkan biaya rekayasa yang signifikan pada mesin JavaScript V8 dan Chrome DevTools, sehingga memerlukan pertimbangan yang cermat di banyak bagian V8. Kecuali jika dilakukan dengan sangat hati-hati, pengeditan langsung dapat menyebabkan error yang sulit direproduksi dan sulit di-debug. Misalnya, jika versi baru suatu fungsi berisi jumlah ekspresi reguler, objek, atau literal fungsi yang berbeda dari versi sebelumnya, struktur data yang melacak literal ini harus disesuaikan dengan cermat.
Beban pemeliharaan ini memperlambat penerapan fitur JavaScript baru dan mengalihkan resource dari peningkatan kualitas fitur DevTools yang lebih banyak digunakan.
Kompleksitas ini juga menyebabkan banyak skenario yang tidak didukung, termasuk:
- Mengedit fungsi yang ada di stack panggilan, tetapi bukan frame paling atas.
- Mengedit fungsi atau generator asinkron.
- Mengedit kode tingkat teratas modul ES.
Alternatif
Seperti yang disebutkan sebelumnya, Hot Module Replacement (HMR) adalah alternatif yang lebih populer dan lebih unggul daripada pengeditan langsung dalam beberapa aspek utama:
- Pengeditan langsung menggantikan bagian versi lama halaman aktif di tingkat kode sumber. Di sisi lain, HMR menukar versi lama pada tingkat abstraksi yang dimaksudkan oleh framework Web, sehingga meningkatkan peluang untuk memigrasikan status komponen dan aplikasi dengan benar selama update langsung.
- HMR berfungsi pada kode sumber yang Anda tulis. Anda mengedit file asli (misalnya, TypeScript, JSX) di editor, dan alat build menangani update di browser, sedangkan pengeditan langsung hanya memengaruhi file sumber yang di-deploy, yang dalam banyak kasus adalah output build yang dihasilkan oleh toolchain.
- Fitur ini tangguh dan terintegrasi dengan baik. HMR adalah bagian inti dari rangkaian alat pengembangan modern, yang memberikan pengalaman yang andal dengan masukan yang jelas saat update berhasil atau gagal.
Penghapusan pengeditan langsung tidak memengaruhi dua fitur canggih lainnya di Chrome DevTools:
- Penggantian Lokal memungkinkan Anda mencegat permintaan jaringan dan menyajikan file lokal sebagai gantinya. Fitur ini ideal untuk membuat prototipe perubahan di situs produksi aktif tempat Anda tidak memiliki akses ke kode sumber. Perubahan akan tetap ada saat halaman dimuat ulang.
- Ruang Kerja mengubah DevTools menjadi editor yang lebih canggih dengan membuat binding dua arah antara panel Sources dan file project lokal Anda. Saat Anda menyimpan perubahan di DevTools, perubahan tersebut akan disimpan langsung ke sistem file Anda. Kemudian, hal ini dapat memicu proses HMR atau pemuatan ulang langsung server pengembangan Anda.
Kesimpulan
Kami menghapus pengeditan langsung karena biaya pemeliharaannya yang tinggi dan penggunaannya yang rendah membuatnya tidak berkelanjutan. Ekosistem pengembangan web modern telah memberikan solusi yang jauh lebih unggul dalam Hot Module Replacement.
Dengan menghentikan fitur ini, kami dapat memfokuskan upaya engineering kami pada bagian Chrome DevTools yang lebih berdampak. Linimasa penghapusannya adalah sebagai berikut:
- Dalam waktu dekat: Fitur ini akan dipindahkan ke belakang eksperimen di Chrome 142, tersedia sebagai tanda Chrome (chrome://flags/#devtools-live-edit).
- Chrome 145 (Februari 2026): Fitur dan tanda Chrome yang sesuai akan dihapus sepenuhnya.
Kami menerima masukan Anda tentang perubahan ini. Tambahkan komentar Anda tentang masalah masukan.