Lưu các thay đổi bạn thực hiện trong Công cụ cho nhà phát triển vào tệp nguồn trên máy tính bằng cách thiết lập không gian làm việc. Bạn có thể tự động kết nối thư mục không gian làm việc với Công cụ cho nhà phát triển bằng cách phân phát tệp cấu hình hoặc có thể thêm vị trí không gian làm việc theo cách thủ công trong bảng điều khiển Nguồn.
Tổng quan
Kết nối tự động (hoặc thủ công) với thư mục không gian làm việc 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 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:PORT. Máy chủ này cũng phân phát một tệp JSON đơn giản có siêu dữ liệu (sẽ được mô tả sau). - Bạn đã mở
localhost:PORTtrong Google Chrome và đang sử dụng Công cụ cho nhà phát triển để thay đổi CSS của trang web.
Khi bạn kết nối một thư mục không gian làm việc, những thay đổi mà bạn thực hiện trong bảng điều khiển Nguồn đối với các tệp CSS, HTML và JavaScript sẽ được lưu vào mã nguồn trên máy tính của bạn. Tuy nhiên, Công cụ cho nhà phát triển không lưu các thay đổi đối với DOM mà bạn thực hiện trong bảng điều khiển Elements (Phần tử).
Hơn nữa, Công cụ cho nhà phát triển thường có thể liên kết mã được tối ưu hoá với mã nguồn ban đầu của bạn nhờ sự trợ giúp của bản đồ nguồn.
Tạo siêu dữ liệu cho một mối kết nối
Để cho phép Công cụ cho nhà phát triển tự động khám phá thư mục không gian làm việc của bạn, hãy tạo một UUID phiên bản 4 ngẫu nhiên và đưa UUID đó vào tệp JSON sau:
{
"workspace": {
"uuid": "UUID",
"root": "path/to/project/root/folder"
}
}
Sau đó, hãy đặt tệp JSON vào path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.
Cuối cùng, hãy chạy máy chủ HTTP cục bộ và nhớ phân phát cả tệp JSON.
Ngoài ra, bạn có thể bỏ qua bước này và thiết lập kết nối thư mục theo cách thủ công.
Kết nối một thư mục trong không gian làm việc
Cách kết nối thư mục:
- Trong Chrome, hãy chuyển đến trang được lưu trữ trên máy của bạn (trong ví dụ này là tại
localhost:8000) rồi mở Công cụ cho nhà phát triển. Trong phần Nguồn > Workspace, hãy nhấp vào Kết nối bên cạnh thư mục của bạn.
Khi được nhắc, hãy nhấp vào Chỉnh sửa tệp để cho phép Công cụ cho nhà phát triển truy cập vào thư mục của bạn.
Sau khi kết nối, bạn có thể mở thư mục trong thẻ Không gian làm việc.
Thẻ Không gian làm việc cho bạn thấy một dấu chấm màu xanh lục bên cạnh các tệp HTML, CSS và JavaScript. Những dấu 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 thư mục.
Lưu thay đổi vào thư mục nguồn
Bạn có thể lưu các thay đổi đối với mọi tệp CSS, HTML và JavaScript trong thư mục không gian làm việc đã kết nối.
Lưu các thay đổi đối với CSS
Cách lưu các thay đổi đối với CSS:
- Mở tệp CSS trong thư mục không gian làm việc đã kết nối trong Sources (Nguồn) > Workspaces (Không gian làm việc).
Thay đổi CSS.
Lưu thay đổi, ví dụ: bằng cách nhấn Ctrl / Cmd + S và xem thay đổi được áp dụng trong tệp nguồn. Bảng điều khiển Sources (Nguồn) sẽ cho bạn thấy một dấu chấm màu xanh lục bên cạnh tên tệp.
Để tìm hiểu quy trình, hãy xem video sau:
Lưu các thay đổi vào HTML
Cách lưu các thay đổi vào HTML:
- Mở tệp HTML từ thư mục không gian làm việc đã kết nối trong Nguồn > Không gian làm việc.
Thay đổi HTML.
Lưu thay đổi, ví dụ: bằng cách nhấn Ctrl / Cmd + S và xem thay đổi được áp dụng trong tệp nguồn. Bảng điều khiển Sources (Nguồn) sẽ cho bạn thấy một dấu chấm màu xanh lục bên cạnh tên tệp.
Hãy tải lại trang để thấy thay đổi có hiệu lực.
Để tìm hiểu quy trình, hãy xem video sau:
Tại sao bạn không thể thay đổi HTML trong bảng điều khiển Elements (Phần tử)?
- Cây 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, sau đó chuyển đổi HTML thành một cây 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 bằng 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 Công cụ cho nhà phát triển khó giải quyết được vị trí cần lưu thay đổi được thực hiện trong bảng điều khiển Phần tử, vì DOM chịu ảnh hưởng của HTML, JavaScript và CSS.
Nói ngắn gọn, Cây DOM !== HTML.
Lưu các thay đổi vào JavaScript
Cách lưu các thay đổi đối với JavaScript:
- Mở một tệp JavaScript trong thư mục không gian làm việc đã kết nối trong Sources (Nguồn) > Workspaces (Không gian làm việc).
Thay đổi JavaScript.
Lưu thay đổi, ví dụ: bằng cách nhấn Ctrl / Cmd + S và xem thay đổi được áp dụng trong tệp nguồn. Bảng điều khiển Sources (Nguồn) sẽ cho bạn thấy một dấu chấm màu xanh lục bên cạnh tên tệp.
Nếu máy chủ HTTP cục bộ của bạn theo dõi các thay đổi đối với tệp nguồn trực tiếp và tự động tải lại trang, thì bạn sẽ thấy các thay đổi được áp dụng sau khi lưu các thay đổi đó trong Công cụ cho nhà phát triển. Nếu không, hãy triển khai lại máy chủ cục bộ.
Để tìm hiểu quy trình, hãy xem video sau:
Xoá kết nối thư mục không gian làm việc
Để xoá kết nối thư mục không gian làm việc, trong phần Sources (Nguồn) > Workspace (Không gian làm việc), hãy nhấp chuột phải vào thư mục, chọn Remove from workspace (Xoá khỏi không gian làm việc) trong trình đơn thả xuống rồi nhấp vào Remove (Xoá).
Kết nối thư mục không gian làm việc theo cách thủ công
Mở Công cụ cho nhà phát triển trên trang được lưu trữ trên máy của bạn.
Trong Sources (Nguồn) > Workspace (Không gian làm việc), hãy nhấp vào Add folder manually (Thêm thư mục theo cách thủ công). Sau đó, chọn một thư mục chứa các tệp nguồn.
Sau đó, hãy làm theo bước 3 và 4 trong phần Kết nối một thư mục không gian làm việc.
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ì sang một định dạng được tối ưu hoá để chạy nhanh nhất có thể. Kết nối thư mục không gian làm việc thường có thể liên kết mã được tối ưu hoá với mã nguồn ban đầu của bạn nhờ 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 chức 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 không gian làm việc với khung mà bạn chọn hoặc bạn có thể sử dụng không gian làm việc sau khi định 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 những người còn lại trong cộng đồng Công cụ cho nhà phát triển.
Các bước tiếp theo
Bạn có thể quản lý tất cả thư mục đã thiết lập 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.
Xem thêm
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ó phần tương tự như tính năng cho phép bạn mô phỏng nội dung trên web hoặc tiêu đề của yêu cầu. Bằng cách này, bạn có thể thoải mái thử nghiệm các thay đổi đối với một trang mà không cần đợi phần phụ trợ bắt kịp. Khi bạn sử dụng tính năng ghi đè cục bộ, các thay đổi sẽ được giữ nguyên khi tải trang nhưng không liên kết với mã nguồn của trang.