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.
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ạ
- 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
. 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 độngSimpleHTTPServer
, 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
.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
Mở Công cụ cho nhà phát triển trên trang minh hoạ được lưu trữ cục bộ.
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.
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
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ínhcolor
của các phần tửh1
được đặt thànhfuchsia
.Đóng trình chỉnh sửa văn bản.
Quay lại Công cụ cho nhà phát triển, hãy nhấp vào thẻ Phần tử.
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:- Nhấp vào phần tử
<h1>
trong Cây DOM. - 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
.- Nhấp vào phần tử
Mở lại
/devtools-workspace-demo/styles.css
trong trình chỉnh sửa văn bản. Thuộc tínhcolor
hiện được đặt thành màu yêu thích.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ử
- Mở thẻ Phần tử.
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ằngI ❤️ Cake
.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ó ở đó.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ả
- 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.
- Chuyển đến Nguồn > Trang.
- Nhấp vào (chỉ_mục). HTML của trang sẽ mở ra.
- Thay thế
<h1>Workspaces Demo</h1>
với<h1>I ❤️ Cake</h1>
. - Nhấn Command+S (Mac) hoặc Control+S (Windows, Linux, ChromeOS) để lưu thay đổi.
Tải lại trang. Phần tử
<h1>
vẫn đang hiển thị văn bản mới.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.
- Mở thẻ Phần tử.
- Nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS). Trình đơn lệnh sẽ mở ra.
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.Nhấn Command+P (Mac) hoặc Control+P (Windows, Linux, ChromeOS) để mở hộp thoại Open File (Mở tệp).
Nhập
script
, sau đó chọn devtools-workspace-demo/script.js.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.Thêm mã sau vào cuối script.js trong tab Nguồn nhanh.
document.querySelector('a').style = 'font-style:italic';
Nhấn Command+S (Mac) hoặc Control+S (Windows, Linux, ChromeOS) để lưu thay đổi.
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
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.