Chỉnh sửa và lưu tệp trong không gian làm việc

Kayce Basques

Sofia Emelianova

Phần hướng dẫn này giúp bạn có cơ hội thực hành bằng cách thiết lập không gian làm việc để có thể sử dụng trong các dự án của mình. Workspace cho phép bạn lưu những thay đổi mình thực hiện trong DevTools vào mã nguồn được lưu trữ trên máy tính.

Thận trọng: Trước khi bắt đầu xem hướng dẫn này, bạn nên biết cách:

• Sử dụng HTML, CSS và JavaScript để tạo trang web.
• Sử dụng Công cụ cho nhà phát triển để thực hiện các thay đổi cơ bản đối với CSS.
• Chạy máy chủ web HTTP cục bộ.

Tổng quan

Workspace cho phép bạn lưu thay đổi mà bạn thực hiện trong Công cụ cho nhà phát triển vào một bản sao cục bộ của cùng một tệp trên máy tính của bạn. Ví dụ, giả sử:

• Bạn có mã nguồn cho trang web của mình trên máy tính.
• Bạn đang chạy một máy chủ web cục bộ từ thư mục mã nguồn, do đó, bạn có thể truy cập trang web này tại localhost:8080.
• Bạn đã mở localhost:8080 trong Google Chrome và đang sử dụng Công cụ cho nhà phát triển để thay đổi CSS của trang web.

Khi không gian làm việc được bật, những thay đổi về CSS mà bạn thực hiện trong Công cụ cho nhà phát triển sẽ được lưu vào mã nguồn trên máy tính của bạn.

Các điểm hạn chế

Nếu bạn đang sử dụng một khung hiện đại, khung này có thể sẽ chuyển đổi mã nguồn của bạn từ một định dạng mà bạn có thể dễ dàng duy trì thành một định dạng được tối ưu hoá để chạy nhanh nhất có thể. Workspace thường có thể liên kết mã đã tối ưu hoá trở lại mã nguồn ban đầu với sự trợ giúp của bản đồ nguồn.

Cộng đồng Công cụ cho nhà phát triển nỗ lực để hỗ trợ những khả năng do bản đồ nguồn cung cấp trên nhiều khung và công cụ. Nếu bạn gặp sự cố khi sử dụng không gian làm việc theo khung bạn chọn hoặc bạn đã làm cho không gian đó hoạt động sau khi có một số cấu hình tuỳ chỉnh, hãy bắt đầu một chuỗi trong danh sách gửi thư hoặc đặt câu hỏi trên Stack Overflow để chia sẻ kiến thức của bạn với phần còn lại của cộng đồng Công cụ cho nhà phát triển.

Tính năng liên quan: Cơ chế Ghi đè cục bộ

Cơ chế ghi đè cục bộ là một tính năng khác của Công cụ cho nhà phát triển cũng tương tự như không gian làm việc. Sử dụng cơ chế ghi đè cục bộ để mô phỏng nội dung web hoặc tiêu đề yêu cầu mà không cần chờ các thay đổi trong phần phụ trợ hoặc khi bạn muốn thử nghiệm với các thay đổi trên một trang và bạn cần xem những thay đổi đó trên các lượt tải trang, nhưng bạn không quan tâm đến việc liên kết các thay đổi với mã nguồn của trang.

Bước 1: Thiết lập

Hoàn tất hướng dẫn này để có trải nghiệm thực tế về không gian làm việc.

Thiết lập bản minh hoạ

1. Sao chép kho lưu trữ minh hoạ này vào một số thư mục trên máy tính. Ví dụ: với ~/Desktop.

2. Khởi động một máy chủ web cục bộ trong ~/Desktop/devtools-workspace-demo. Dưới đây là một số mã mẫu để khởi động SimpleHTTPServer, nhưng bạn có thể sử dụng bất kỳ máy chủ nào mà mình muốn.

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   Trong phần còn lại của hướng dẫn này, thư mục này sẽ được gọi là /devtools-workspace-demo.

3. Mở một thẻ trong Google Chrome rồi chuyển đến phiên bản trang web được lưu trữ cục bộ. Bạn có thể truy cập công cụ này qua một URL như localhost:8000. Số cổng chính xác có thể khác.

   

Thiết lập Công cụ cho nhà phát triển

1. Mở Công cụ cho nhà phát triển trên trang minh hoạ được lưu trữ cục bộ.

2. Chuyển đến phần Nguồn > Không gian làm việc rồi thiết lập một không gian làm việc trong thư mục devtools-workspace-demo mà bạn đã sao chép. Bạn có thể thực hiện việc đó theo một số cách:

   • Kéo và thả thư mục đó vào Trình chỉnh sửa trong mục Nguồn.
   • Nhấp vào đường liên kết chọn thư mục rồi chọn thư mục.
   • Nhấp vào Thêm thư mục và chọn thư mục.

3. Trong lời nhắc ở trên cùng, hãy nhấp vào Cho phép để cấp cho Công cụ cho nhà phát triển quyền đọc và ghi vào thư mục.

   

Trong thẻ Không gian làm việc, giờ đây sẽ có một chấm màu xanh lục bên cạnh index.html, script.js và styles.css. Các chấm màu xanh lục này có nghĩa là Công cụ cho nhà phát triển đã thiết lập mối liên kết giữa tài nguyên mạng của trang và các tệp trong devtools-workspace-demo.

Bước 2: Lưu thay đổi CSS vào đĩa

1. Mở /devtools-workspace-demo/styles.css trong trình chỉnh sửa văn bản. Hãy lưu ý cách thuộc tính color của các phần tử h1 được đặt thành fuchsia.

   

2. Đóng trình chỉnh sửa văn bản.

3. Quay lại Công cụ cho nhà phát triển, hãy nhấp vào thẻ Phần tử.

4. Thay đổi giá trị thuộc tính color của phần tử <h1> thành màu bạn yêu thích. Cách làm như sau:

   1. Nhấp vào phần tử <h1> trong Cây DOM.
   2. Trong ngăn Styles (Kiểu), hãy tìm quy tắc CSS h1 { color: fuchsia } rồi thay đổi màu thành màu bạn yêu thích. Trong ví dụ này, màu được đặt thành màu xanh lục.

   

   Chấm màu xanh lục bên cạnh styles.css:1 trong ngăn Styles (Kiểu) có nghĩa là mọi thay đổi bạn thực hiện sẽ được ánh xạ tới /devtools-workspace-demo/styles.css.

5. Mở lại /devtools-workspace-demo/styles.css trong trình chỉnh sửa văn bản. Thuộc tính color hiện được đặt thành màu yêu thích.

6. Tải lại trang. Màu của phần tử <h1> vẫn được đặt thành màu bạn yêu thích. Cách này hiệu quả vì khi bạn thực hiện thay đổi và Công cụ cho nhà phát triển đã lưu thay đổi đó vào ổ đĩa. Sau đó, khi bạn tải lại trang, máy chủ cục bộ của bạn đã phân phát bản sao đã sửa đổi của tệp từ ổ đĩa.

Bước 3: Lưu thay đổi HTML vào đĩa

Thử thay đổi HTML từ bảng điều khiển Phần tử

Cảnh báo: Quy trình công việc bạn sắp thử không hoạt động. Chúng tôi đang thử tính năng này để không lãng phí thời gian sau này tìm hiểu lý do tại sao tính năng này không hoạt động.

1. Mở thẻ Phần tử.

2. Nhấp đúp vào nội dung văn bản của phần tử h1 (Workspaces Demo) rồi thay thế nội dung đó bằng I ❤️ Cake.

   

3. Mở /devtools-workspace-demo/index.html trong trình chỉnh sửa văn bản. Thay đổi bạn vừa thực hiện không có ở đó.

4. Tải lại trang. Trang sẽ hoàn nguyên về tiêu đề ban đầu.

Không bắt buộc: Lý do không hiệu quả

Lưu ý: Phần này mô tả lý do khiến quy trình trong phần Thử thay đổi HTML trong bảng điều khiển Phần tử không hoạt động. Bạn có thể bỏ qua phần này nếu không quan tâm đến lý do.

• Cây các nút mà bạn thấy trên bảng điều khiển Phần tử đại diện cho DOM của trang.
• Để hiển thị một trang, trình duyệt tìm nạp HTML qua mạng, phân tích cú pháp HTML rồi chuyển đổi mã đó thành cây nút DOM.
• Nếu trang có bất kỳ JavaScript nào, JavaScript đó có thể thêm, xoá hoặc thay đổi nút DOM. CSS cũng có thể thay đổi DOM thông qua thuộc tính content.
• Cuối cùng, trình duyệt sẽ sử dụng DOM để xác định nội dung sẽ hiển thị cho người dùng trình duyệt.
• Do đó, trạng thái cuối cùng của trang mà người dùng nhìn thấy có thể rất khác so với HTML mà trình duyệt đã tìm nạp.
• Điều này khiến Công cụ cho nhà phát triển khó giải quyết vị trí lưu thay đổi được thực hiện trong bảng điều khiển Phần tử vì DOM bị ảnh hưởng bởi HTML, JavaScript và CSS.

Tóm lại, đó là HTML của Cây DOM !==.

Thay đổi HTML trong bảng điều khiển Nguồn

Nếu bạn muốn lưu nội dung thay đổi đối với HTML của trang, hãy thực hiện việc này trong bảng điều khiển Nguồn.

1. Chuyển đến Nguồn > Trang.
2. Nhấp vào (chỉ_mục). HTML của trang sẽ mở ra.
3. Thay thế <h1>Workspaces Demo</h1> với <h1>I ❤️ Cake</h1>.
4. Nhấn Command+S (Mac) hoặc Control+S (Windows, Linux, ChromeOS) để lưu thay đổi.

5. Tải lại trang. Phần tử <h1> vẫn đang hiển thị văn bản mới.

   

6. Mở /devtools-workspace-demo/index.html. Phần tử <h1> chứa văn bản mới.

Bước 4: Lưu thay đổi JavaScript vào đĩa

Bảng điều khiển Sources (Nguồn) cũng là nơi để thực hiện các thay đổi đối với JavaScript. Tuy nhiên, đôi khi bạn cần truy cập vào các bảng điều khiển khác, chẳng hạn như bảng điều khiển Thành phần hoặc bảng điều khiển Bảng điều khiển, trong khi thực hiện các thay đổi đối với trang web của bạn. Bạn có thể mở bảng điều khiển Nguồn cùng với các bảng điều khiển khác.

1. Mở thẻ Phần tử.
2. Nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS). Trình đơn lệnh sẽ mở ra.

3. Nhập QS, sau đó chọn Show Quick Source (Hiển thị nguồn nhanh). Ở cuối cửa sổ Công cụ cho nhà phát triển hiện có thẻ Nguồn nhanh.

   

   Thẻ này đang hiển thị nội dung của index.html, đây là tệp gần đây nhất mà bạn đã chỉnh sửa trong bảng điều khiển Sources (Nguồn). Thẻ Nguồn nhanh cung cấp cho bạn trình chỉnh sửa từ bảng điều khiển Nguồn để bạn có thể chỉnh sửa tệp trong khi đang mở các bảng điều khiển khác.

4. Nhấn Command+P (Mac) hoặc Control+P (Windows, Linux, ChromeOS) để mở hộp thoại Open File (Mở tệp).

5. Nhập script, sau đó chọn devtools-workspace-demo/script.js.

   

6. Hãy chú ý đường liên kết Edit and save files in a workspace trong bản minh hoạ. Trang này thường xuyên được tạo kiểu.

7. Thêm mã sau vào cuối script.js trong tab Nguồn nhanh.

   document.querySelector('a').style = 'font-style:italic';
   

8. Nhấn Command+S (Mac) hoặc Control+S (Windows, Linux, ChromeOS) để lưu thay đổi.

9. Tải lại trang. Đường liên kết trên trang này hiện đang in nghiêng.

Các bước tiếp theo

Thành công: Xin chúc mừng! Giờ đây, bạn đã biết cách lưu để tìm nguồn những thay đổi bạn thực hiện trong Công cụ cho nhà phát triển đối với trang web được lưu trữ cục bộ.

Bạn có thể thiết lập nhiều thư mục trong một không gian làm việc. Bạn có thể xem tất cả các thư mục đó trong phần Cài đặt > Không gian làm việc.

Tiếp theo, hãy tìm hiểu cách sử dụng Công cụ cho nhà phát triển để thay đổi CSS và gỡ lỗi JavaScript.