Bài viết phổ biến này đã được cập nhật vào năm 2020. Để biết thêm về cách cải thiện quy trình phát triển của bạn bằng các công cụ, hãy đọc Thông tin cơ bản dành cho nhà phát triển: Công cụ trên SitePoint Premium.
Một ngày điển hình của nhà phát triển web liên quan đến việc tạo các trang web HTML với CSS và JavaScript được liên kết trong trình soạn thảo yêu thích của họ. Quy trình làm việc:
- Mở trang được lưu trữ cục bộ trong trình duyệt.
- Xin thề.
- Mở DevTools để điều tra các vấn đề về bố cục và chức năng.
- Chỉnh sửa các phần tử HTML, thuộc tính CSS và mã JavaScript để khắc phục sự cố.
- Sao chép lại những thay đổi đó vào trình chỉnh sửa và quay lại bước # 1.
Trong khi các công cụ như tải lại trực tiếp đã làm cho quá trình này dễ dàng hơn, nhiều nhà phát triển vẫn tiếp tục chỉnh sửa mã trong cả DevTools và trình chỉnh sửa của họ.
Tuy nhiên, bạn có thể mở và chỉnh sửa tệp nguồn trực tiếp trong Chrome. Bất kỳ thay đổi nào bạn thực hiện đều được lưu vào hệ thống tệp và được cập nhật trong trình chỉnh sửa (giả sử nó làm mới khi xảy ra thay đổi tệp).
Mở Chrome, tải một trang từ máy chủ / hệ thống tệp cục bộ của bạn và mở Những công cụ phát triển từ Thêm công cụ menu hoặc nhấn F12 or Ctrl / Cmd + sự thay đổi + I tùy thuộc vào hệ thống của bạn. Điều hướng đến nguồn tab để kiểm tra trình khám phá tệp:
Bạn có thể mở và chỉnh sửa các tệp CSS và JavaScript trong chế độ xem này, nhưng mọi thay đổi sẽ bị mất ngay khi bạn làm mới trang.
Bước 2: Liên kết một Thư mục với Không gian làm việc
Nhấn vào Hệ thống tập tin tab, sau đó nhấp vào + Thêm thư mục vào không gian làm việc. Bạn sẽ được nhắc định vị thư mục công việc của mình và Chrome sẽ yêu cầu bạn xác nhận rằng bạn Cho phép truy cập. Trình thám hiểm hiển thị các tệp trên hệ thống của bạn có thể được mở bằng một cú nhấp chuột:
Bước 3: Chỉnh sửa và lưu mã của bạn
Bây giờ bạn có thể nhảy vào và chỉnh sửa mã của mình. Các chỉnh sửa chưa được lưu được đánh dấu bằng dấu hoa thị trên tab tệp.
Các thay đổi CSS được cập nhật ngay lập tức nhưng trong trường hợp HTML và JavaScript, thông thường bạn sẽ cần nhấn Ctrl / Cmd + S để lưu tệp vào hệ thống tệp, sau đó làm mới trình duyệt.
Lưu ý rằng bạn cũng có thể nhấp chuột phải vào tab tệp và chọn Lưu thành… để lưu bản sao của tệp ở nơi khác.
Bước 4: Xem lại và hoàn tác thay đổi
Để xem lại các thay đổi, hãy nhấp chuột phải vào tab tệp và chọn Các sửa đổi cục bộ… từ menu ngữ cảnh:
Một chế độ xem khác giống được hiển thị. Biểu tượng mũi tên ở dưới cùng bên trái của ngăn sẽ hoàn tác tất cả các thay đổi và hoàn nguyên tệp về trạng thái ban đầu.
Công cụ dành cho nhà phát triển của Chrome sẽ không bao giờ thay thế hoàn toàn cho trình chỉnh sửa yêu thích của bạn, nhưng nó có thể hữu ích khi bạn thực hiện các thay đổi nhanh chóng hoặc làm việc từ một PC khác mà trình chỉnh sửa của bạn có thể không được cài đặt.
Nguồn: https://www.sitepoint.com/edit-source-files-in-chrome/?utm_source=rss
