Xuất bản: Ngày 22 tháng 10 năm 2025
Chrome sẽ ngừng cung cấp tính năng chỉnh sửa trực tiếp các nguồn JavaScript. API này sẽ được chuyển sang một cờ thử nghiệm trong Chrome 142 và chúng tôi dự định sẽ xoá hoàn toàn API này trong Chrome 145 (tháng 2 năm 2026). Chúng tôi không xoá các tính năng mạnh mẽ khác liên quan đến tệp nguồn, chẳng hạn như Local Overrides (Ghi đè cục bộ), Workspaces (Không gian làm việc) hoặc Snippets (Đoạn mã). Các tính năng này sẽ tiếp tục được hỗ trợ đầy đủ.
Nhóm Công cụ của Chrome cho nhà phát triển không ngừng nỗ lực để cung cấp cho nhà phát triển những công cụ mạnh mẽ và đáng tin cậy. Trong quá trình này, đôi khi chúng tôi cần phải ngừng cung cấp những tính năng không còn hiệu quả. Chúng tôi đã cân nhắc kỹ lưỡng trước khi đưa ra quyết định này. Quyết định này dựa trên chi phí bảo trì quá cao, mức sử dụng thấp và sự tồn tại của các lựa chọn thay thế hiện đại vượt trội của tính năng này. Chúng tôi biết rằng những thay đổi đối với bất kỳ quy trình làm việc nào cũng có thể gây gián đoạn. Vì vậy, bài đăng này nhằm mục đích giải thích rõ ràng lý do chúng tôi đưa ra những thay đổi này.
Tính năng chỉnh sửa trực tiếp là gì?
Tính năng chỉnh sửa trực tiếp cho phép bạn thay thế nội dung của một tệp kịch bản trong thời gian chạy, ngay lập tức. Điều này vẫn xảy ra ngay cả khi tập lệnh bị tạm dừng tại một điểm ngắt. Bạn có thể sửa đổi mã JavaScript trong bảng Sources (Nguồn) và áp dụng thay đổi bằng cách lưu tệp (Command+S / Ctrl+S). Sau đó, trình gỡ lỗi sẽ vá các hàm đã được xác định tại thời gian chạy. Nếu hàm đã sửa đổi nằm trên ngăn xếp lệnh gọi, thì hàm đó cũng sẽ được khởi động lại.
Mục tiêu là cung cấp một cách để kiểm thử những thay đổi nhỏ mà không cần tải lại toàn bộ trang. Nếu không, thao tác này sẽ xoá trạng thái của ứng dụng. Theo cách này, mục tiêu của nó tương tự như những gì Hot Module Replacement (HMR) đạt được trong các ngăn xếp phát triển hiện đại.
Tại sao chúng tôi xoá nội dung này?
Trải nghiệm chỉnh sửa trực tiếp luôn là một thách thức. Lối tắt liên quan (Command+S / Ctrl+S) thường được liên kết với việc lưu tệp, nhưng không có tác dụng phụ nào khác, điều này có thể gây bất ngờ. Khi thất bại, thông tin phản hồi có thể không rõ ràng: DevTools có thể hiển thị một thông báo cảnh báo như "LiveEdit failed: Functions that are on the stack (currently being executed) can not be edited" (LiveEdit không thành công: Không thể chỉnh sửa các hàm trên ngăn xếp (hiện đang được thực thi)), điều này có thể bị bỏ qua, khiến nhà phát triển không chắc chắn liệu thay đổi của họ có được áp dụng hay không.
Tình trạng này còn tệ hơn khi tính năng chỉnh sửa trực tiếp tương tác với các tính năng khác của Công cụ cho nhà phát triển liên quan đến tệp nguồn. Ví dụ: việc chỉnh sửa trực tiếp nội dung của một Đoạn mã DevTools có thể khiến DevTools nhầm lẫn khi tham chiếu đến danh tính của nguồn đoạn mã, dẫn đến việc phiên bản mới xuất hiện dưới dạng tệp chỉ đọc. Khi tính năng Không gian làm việc được bật, Công cụ cho nhà phát triển có thể quan sát các thay đổi về nguồn trong hệ thống tệp và áp dụng những thay đổi này một cách liền mạch cho trang đang hoạt động. Hành vi này có thể là điều người dùng mong đợi hoặc khiến họ bất ngờ, tuỳ thuộc vào môi trường của người dùng và chế độ thiết lập chuỗi công cụ.
Vấn đề ban đầu mà tính năng chỉnh sửa trực tiếp cố gắng giải quyết (thực hiện các thay đổi mà không làm mất trạng thái ứng dụng) hiện đã được giải quyết hiệu quả hơn bằng tính năng Thay thế mô-đun nóng (HMR). HMR là một tính năng tiêu chuẩn trong các khung phát triển Web hiện đại như React, Angular hoặc Vue. Thao tác này đạt được hiệu quả tương tự trong không gian người dùng và ở mức độ trừu tượng cao hơn. Việc chỉnh sửa trực tiếp trong Công cụ cho nhà phát triển có thể gây trở ngại cho hoạt động này, dẫn đến hành vi không mong muốn và có lỗi.
Những vấn đề này khiến người dùng gặp khó khăn trong quá trình trải nghiệm. Ngoài ra, theo số liệu thống kê về mức sử dụng của chúng tôi, tính năng này chưa trở thành một phần cốt lõi trong quy trình làm việc của hầu hết các nhà phát triển. Số lượng người dùng tương tác với tính năng này rất thấp và có xu hướng giảm.
Chi phí bảo trì cao và độ phức tạp về kỹ thuật
Việc thay thế mã trên một trang đang hoạt động không đơn giản về việc xác định ngữ nghĩa hợp lý, mà còn trong quá trình triển khai. Điều này gây ra chi phí kỹ thuật đáng kể cho công cụ JavaScript V8 và Công cụ của Chrome cho nhà phát triển, đòi hỏi phải cân nhắc kỹ lưỡng trên nhiều phần của V8. Nếu không cẩn thận, việc chỉnh sửa trực tiếp có thể dẫn đến các sự cố khó tái tạo và khó gỡ lỗi. Ví dụ: nếu phiên bản mới của một hàm chứa số lượng biểu thức chính quy, đối tượng hoặc hàm cố định khác với phiên bản trước, thì cấu trúc dữ liệu theo dõi các hàm cố định này cần được điều chỉnh cẩn thận.
Gánh nặng bảo trì này làm chậm quá trình triển khai các tính năng mới của JavaScript và khiến các tài nguyên không được dùng để cải thiện các tính năng của Công cụ cho nhà phát triển được sử dụng rộng rãi hơn.
Độ phức tạp này cũng dẫn đến nhiều trường hợp không được hỗ trợ, bao gồm:
- Chỉnh sửa một hàm nằm trên ngăn xếp lệnh gọi nhưng không phải là khung trên cùng.
- Chỉnh sửa các hàm hoặc trình tạo không đồng bộ.
- Chỉnh sửa mã cấp cao nhất của một mô-đun ES.
Phương án thay thế
Như đã đề cập trước đó, Hot Module Replacement (HMR) là một lựa chọn thay thế phổ biến hơn và vượt trội hơn so với tính năng chỉnh sửa trực tiếp ở một số khía cạnh chính:
- Tính năng chỉnh sửa trực tiếp sẽ thay thế các phần của phiên bản cũ hơn của trang đang hoạt động ở cấp mã nguồn. Mặt khác, HMR sẽ thay thế phiên bản cũ hơn ở cấp độ trừu tượng mà khung Web dự định, tăng cơ hội di chuyển chính xác trạng thái thành phần và ứng dụng trong quá trình cập nhật trực tiếp.
- HMR hoạt động trên mã nguồn do bạn tạo. Bạn chỉnh sửa các tệp gốc (ví dụ: TypeScript, JSX) trong trình chỉnh sửa và công cụ xây dựng sẽ xử lý nội dung cập nhật trong trình duyệt, trong khi tính năng chỉnh sửa trực tiếp chỉ ảnh hưởng đến các tệp nguồn đã triển khai. Trong nhiều trường hợp, đây là đầu ra bản dựng do chuỗi công cụ tạo ra.
- Ứng dụng này mạnh mẽ và được tích hợp tốt. HMR là một phần cốt lõi của chuỗi công cụ phát triển hiện đại, mang đến trải nghiệm đáng tin cậy với thông tin phản hồi rõ ràng khi các bản cập nhật thành công hoặc không thành công.
Việc xoá tính năng chỉnh sửa trực tiếp không ảnh hưởng đến 2 tính năng mạnh mẽ khác trong Công cụ cho nhà phát triển của Chrome:
- Tính năng Ghi đè cục bộ cho phép bạn chặn một yêu cầu mạng và phân phát một tệp cục bộ thay thế. Đây là lựa chọn lý tưởng để tạo mẫu các thay đổi trên một trang web sản xuất đang hoạt động mà bạn không có quyền truy cập vào mã nguồn. Các thay đổi vẫn giữ nguyên khi bạn tải lại trang.
- Không gian làm việc biến Công cụ cho nhà phát triển thành một trình chỉnh sửa mạnh mẽ hơn bằng cách tạo mối liên kết hai chiều giữa bảng Sources (Nguồn) và các tệp dự án cục bộ của bạn. Khi bạn lưu một thay đổi trong Công cụ cho nhà phát triển, thay đổi đó sẽ được lưu trực tiếp vào hệ thống tệp của bạn. Sau đó, điều này có thể kích hoạt quy trình HMR hoặc tải lại trực tiếp của máy chủ phát triển.
Kết luận
Chúng tôi sẽ loại bỏ tính năng chỉnh sửa trực tiếp vì chi phí bảo trì cao và mức sử dụng thấp khiến tính năng này không còn phù hợp. Hệ sinh thái phát triển web hiện đại đã cung cấp một giải pháp vượt trội hơn nhiều trong tính năng Thay thế mô-đun nóng.
Bằng việc ngừng cung cấp tính năng này, chúng tôi có thể tập trung nỗ lực kỹ thuật vào những phần có tác động lớn hơn của Chrome DevTools. Tiến trình gỡ bỏ như sau:
- Trong tương lai gần: Tính năng này sẽ được chuyển sang một thử nghiệm trong Chrome 142, có sẵn dưới dạng một cờ Chrome (chrome://flags/#devtools-live-edit).
- Chrome 145 (tháng 2 năm 2026): Tính năng này và cờ Chrome tương ứng sẽ bị xoá hoàn toàn.
Chúng tôi rất mong nhận được ý kiến phản hồi của bạn về thay đổi này. Thêm ý kiến nhận xét của bạn về vấn đề phản hồi.