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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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 thành bản sao cục bộ của cùng 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 trên máy tính của mình.
  • Bạn đang chạy một máy chủ web cục bộ từ thư mục mã nguồn để có thể truy cập vào trang web lúc localhost:8080.
  • Bạn đã mở localhost:8080 trong Google Chrome và bạn đang sử dụng Công cụ cho nhà phát triển để thay đổi giao diện của trang web Dịch vụ so sánh giá (CSS).

Khi bật không gian làm việc, các 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ác điểm hạn chế

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

Cộng đồng Công cụ cho nhà phát triển nỗ lực hỗ trợ các tính năng mà bản đồ nguồn cung cấp trên nhiều khung và công cụ. Nếu bạn gặp vấn đề khi sử dụng một không gian làm việc có khung mà bạn chọn, hoặc khi bạn khiến nó đang hoạt động sau một số cấu hình tùy 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 những người khác trong cộng đồng Công cụ cho nhà phát triển.

Tính năng có liên quan: Ghi đè cục bộ

Ghi đè cục bộ là một tính năng khác trong Công cụ cho nhà phát triển 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 yêu cầu tiêu đề mà không cần chờ 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 phải xem những thay đổi đó trên toàn bộ trang tải, nhưng bạn không quan tâm đến việc ánh xạ các thay đổi của mình tới mã nguồn của trang.

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

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

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

  1. Sao chép kho lưu trữ minh hoạ này vào một thư mục nào đó trên máy tính của bạn. Ví dụ: để ~/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ì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 và truy cập vào phiên bản được lưu trữ cục bộ của trang web. Bạn phải làm được truy cập qua URL như localhost:8000. Số cổng chính xác có thể khác.

    Trang minh hoạ được lưu trữ cục bộ đã mở trong Chrome.

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 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 điều đó theo một số cách:

    • Kéo và thả thư mục đó vào Editor (Trình chỉnh sửa) trong Sources (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 thư mục rồi chọn thư mục. Chuyển đến thẻ Nguồn rồi đến Không gian làm việ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.

    Nút Cho phép trong lời nhắc.

Trong thẻ Không gian làm việc, giờ đây có một chấm màu xanh lục bên cạnh index.html, script.js và styles.css. Những 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.

Giờ đây, thẻ Không gian làm việc sẽ cho thấy mối liên kết giữa các tệp trên máy và tệp trên mạng.

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

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

    Xem style.css trong trình chỉnh sửa văn bản.

  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ẻ Elements.

  4. Thay đổi giá trị của 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 sắc thành màu bạn thích. Trong ví dụ này, màu được đặt thành xanh lục.

    Đặt thuộc tính màu của phần tử h1 thành màu xanh lục.

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

  5. Mở lại /devtools-workspace-demo/styles.css trong một 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. Hãy 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 hoạt động này bởi 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ộ đã cung cấp 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 trong bảng điều khiển Phần tử

  1. Mở thẻ Elements.

  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ế phần tử này cùng với I ❤️ Cake.

    Đang cố thay đổi HTML từ Cây DOM của bảng điều khiển Phần tử.

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

  4. Tải lại. Hãy tải lại trang. Trang sẽ chuyển về tiêu đề ban đầu.

Không bắt buộc: Lý do tính năng này không hoạt động

  • Cây các nút mà bạn thấy trên bảng điều khiển Elements đạ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, sau đó chuyển đổi HTML vào cây các nút DOM.
  • Nếu trang có bất kỳ JavaScript nào, JavaScript đó có thể thêm, xoá hoặc thay đổi các nút DOM. CSS có thể cũng 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 mà trình duyệt 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 đã được tìm nạp.
  • Điều này khiến Công cụ cho nhà phát triển khó giải quyết khi có thay đổi trong bảng điều khiển Elements cần được lưu 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 từ bảng điều khiển Nguồn

Nếu bạn muốn lưu 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 Sources (Nguồn).

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

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

    Thay đổi HTML từ bảng điều khiển Nguồn.

  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 thay đổi đối với JavaScript. Nhưng đô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 Elements hoặc bảng điều khiển Elements, trong khi thực hiện các thay đổi vào trang web của bạn. Có cách để mở bảng điều khiển Sources (Nguồn) cùng với các bảng điều khiển khác.

  1. Mở thẻ Elements.
  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 Hiển thị nguồn nhanh. Ở cuối cửa sổ Công cụ cho nhà phát triển, giờ đây thẻ Nguồn nhanh.

    Đang mở thẻ Nguồn nhanh thông qua trình đơn Command.

    Thẻ này đang hiển thị nội dung của index.html, đây là thành phần cuối cùng tệp 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 Sources (Nguồn) để bạn có thể chỉnh sửa tệp trong khi các bảng điều khiển khác đang mở.

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

  5. Nhập script, rồi chọn devtools-workspace-demo/script.js.

    Đang mở tập lệnh qua hộp thoại Mở tệp.

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

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

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

  8. Nhấn tổ hợp phím Command+S (máy Mac) hoặc Control+S (Windows, Linux, ChromeOS) để lưu nội dung thay đổi.

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

Đường liên kết trên trang hiện đang được in nghiêng.

Các bước tiếp theo

Bạn có thể thiết lập nhiều thư mục trong một không gian làm việc. Tất cả các thư mục này được liệt kê trong 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.