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 không gian làm việc đó 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ậ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ủa bạn.

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 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ợ các khả 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 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 hỏi mộ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ộ

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 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 các thay đổi đối với một trang và bạn cần xem các thay đổi đó trong các lần tải trang, nhưng không quan tâm đến việc ánh xạ các thay đổi của mình đến 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 số thư mục trên máy tính. Ví dụ: để ~/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 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 có thể truy cập vào đối tượng 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 điều đó 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 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, 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 đặt thuộc tính color của các phần tử h1 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 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 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 Dấu 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 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. 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 thích. Phương pháp 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 trong bảng điều khiển Phần tử

  1. Mở thẻ Thành phần.

  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ế 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. Hãy 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 so 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 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 tới 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 (Mac) hoặc Control+S (Windows, Linux, ChromeOS) để lưu thay đổi.

  5. Tải lại. Hãy tải lại trang. Phần tử <h1> vẫn 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. 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ó 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ẻ Thành phần.
  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ổ DevTools, bạn sẽ thấy một thẻ Quick Source (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, 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, rồi 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ẻ 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. 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 đ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. Bạn có thể xem danh sách tất cả các thư mục này 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.