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

Tổng quan

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

  • Bạn có mã nguồn cho trang web 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 để có thể truy cập vào trang web tại localhost:8080.
  • Bạn đã mở localhost:8080 trong Google Chrome và đang sử dụng DevTools để thay đổi CSS của trang web.

Khi bạn bật không gian làm việc, các thay đổi về CSS mà bạn thực hiện trong DevTools 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 đó có thể chuyển đổi mã nguồn của bạn từ một định dạng dễ 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ã được tối ưu hoá trở lại mã nguồn ban đầu nhờ bản đồ nguồn.

Cộng đồng DevTools nỗ lực hỗ trợ các chức 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 vấn đề khi sử dụng một không gian làm việc với khung mà bạn chọn hoặc bạn sử dụng được sau khi định cấu hình tuỳ chỉnh, hãy bắt đầu một chuỗi tin nhắn 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 DevTools.

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

Tính năng ghi đè cục bộ là một tính năng khác của DevTools tương tự như workspace. Sử dụng tính năng 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 về phần phụ trợ hoặc khi bạn muốn thử nghiệm các thay đổi đối với một trang và bạn cần xem các 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 của mình 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ới 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ụ: đến ~/Desktop.

  2. Khởi động 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 bạn 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 vào tệp này thông qua một 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 Sources (Nguồn) > Workspace (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 đã nhân bản. Bạn có thể thực hiện việc này theo một số cách:

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

  3. Trong lời nhắc ở trên cùng, hãy nhấp vào Allow (Cho phép) để cấp cho DevTools 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, bạn sẽ thấy một dấu chấm màu xanh lục bên cạnh index.html, script.js và styles.css. Những dấu chấm màu xanh lục này có nghĩa là DevTools đã thiết lập mối liên kết giữa các tài nguyên mạng của trang và các tệp trong devtools-workspace-demo.

Thẻ Workspace (Không gian làm việc) hiện hiển thị mối liên kết giữa các tệp cục bộ và tệp mạng.

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.

    Xem styles.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 DevTools, hãy nhấp vào thẻ Elements (Thành phần).

  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 DOM Tree (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.

    Đặ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 Styles (Kiểu) có nghĩa là mọi thay đổi bạn thực hiện đều được liên kết vớ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 bạn yêu thích.

  6. Tải lại. Tải lại trang. Màu của phần tử <h1> vẫn được đặt thành màu bạn thích. Điều này hoạt động vì khi bạn thực hiện thay đổi và DevTools đã 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 sẽ 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 trong bảng điều khiển Phần tử

  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 (có nội dung là Workspaces Demo) rồi thay thế nội dung đó bằng I ❤️ Cake.

    Cố gắng 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 trình chỉnh sửa văn bản. Thay đổi bạn vừa thực hiện không xuất hiện.

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

Không bắt buộc: Lý do 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 (Phần tử) đại diện cho DOM của trang.
  • Để hiển thị một trang, trình duyệt sẽ tìm nạp HTML qua mạng, phân tích cú pháp HTML rồi chuyển đổi HTML đó thành một cây gồm các nút DOM.
  • Nếu trang có JavaScript, thì JavaScript đó có thể thêm, xoá hoặc thay đổi các 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 cần 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 với HTML mà trình duyệt đã tìm nạp.
  • Điều này khiến DevTools khó có thể phân giải vị trí lưu thay đổi được thực hiện trong bảng điều khiển Elements (Phần tử) vì DOM chịu ảnh hưởng của HTML, JavaScript và CSS.

Tóm lại, Cây DOM !== HTML.

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 trong bảng điều khiển Nguồn.

  1. Chuyển đến Sources (Nguồn) > Page (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 (Mac) hoặc Control+S (Windows, Linux, ChromeOS) để lưu thay đổi.

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

    Thay đổi HTML trong 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 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 mình. Có một cách để 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 tổ hợp phím Command+Shift+P (máy Mac) hoặc Control+Shift+P (máy chạy Windows, Linux, ChromeOS). Command Menu (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ổ DevTools, bạn sẽ thấy một thẻ Quick Source (Nguồn nhanh).

    Mở thẻ Quick Source (Nguồn nhanh) thông qua Command Menu (Trình đơn lệnh).

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

  4. Nhấn tổ hợp phím 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.

    Mở tập lệnh thông qua hộp thoại Open File (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ẻ Quick Source (Nguồn nhanh).

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

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

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

Đường liên kết trên trang hiện đượ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 như vậy đều đượ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ụ của Chrome cho nhà phát triển để thay đổi CSS và gỡ lỗi JavaScript.