Không gian làm việc là một tính năng mạnh mẽ cho phép bạn chỉnh sửa trực tiếp các tệp nguồn của trang web trong Công cụ cho nhà phát triển của Chrome, nhờ đó bạn không cần phải liên tục chuyển đổi giữa trình chỉnh sửa mã và trình duyệt.
Tổng quan
Không gian làm việc trong Chrome DevTools liên kết các tệp do một máy chủ web phân phát với các tệp trong một thư mục cục bộ trên máy tính của bạn. Khi bạn bật một không gian làm việc cho một dự án cục bộ, mọi thay đổi bạn thực hiện đối với các tệp trong bảng Nguồn của Công cụ cho nhà phát triển sẽ tự động được lưu vào các tệp dự án cục bộ. Điều này mang đến trải nghiệm chỉnh sửa liền mạch, giúp bạn cảm thấy như đang làm việc trực tiếp trên cơ sở mã của dự án trong khi vẫn hưởng lợi từ thông tin chi tiết theo thời gian thực của Công cụ cho nhà phát triển.
Ưu điểm của tính năng kết nối tự động với không gian làm việc
Tính năng tự động kết nối không gian làm việc giúp cải thiện quá trình thiết lập không gian làm việc bằng cách loại bỏ cấu hình thủ công. Thay vì thêm thư mục dự án vào DevTools theo cách thủ công, máy chủ phát triển cục bộ của bạn có thể cung cấp một tệp devtools.json đặc biệt mà Chrome DevTools tự động phát hiện. Điều này mang lại một số lợi ích như:
- Gỡ lỗi nhanh hơn: Chỉnh sửa tệp trong Công cụ cho nhà phát triển và xem các nội dung cập nhật ngay lập tức mà không cần rời khỏi trình duyệt hoặc lưu theo cách thủ công.
- Thay đổi theo thời gian thực: Các thay đổi sẽ được phản ánh ngay lập tức trong các tệp cục bộ và trình duyệt, giúp cải thiện tốc độ phát triển.
- Không cần thiết lập thủ công: Tự động hoá việc ánh xạ các tệp dự án, giảm thời gian thiết lập, đặc biệt là đối với các dự án mới hoặc khi giới thiệu thành viên mới trong nhóm.
Tính năng tự động kết nối không gian làm việc hoạt động như thế nào?
Tính năng tự động kết nối không gian làm việc hoạt động bằng cách để máy chủ phát triển cục bộ của bạn hiển thị một tệp JSON cụ thể tại một đường dẫn được xác định trước. Khi Công cụ của Chrome cho nhà phát triển đang mở và bạn đang truy cập một trang web được phân phát từ localhost, công cụ này sẽ tự động gửi một yêu cầu đến:
/.well-known/appspecific/com.chrome.devtools.json
Nếu máy chủ của bạn phản hồi bằng một tệp devtools.json hợp lệ, thì DevTools sẽ sử dụng thông tin trong tệp đó để tự động kết nối với các thư mục nguồn của dự án. Tệp devtools.json thường chứa:
{
"workspace": {
"root": "/Users/yourname/path/to/your/project",
"uuid": "a-random-version-4-uuid"
}
}
workspace.root: Đường dẫn tuyệt đối đến thư mục gốc của dự án trên hệ thống tệp cục bộ.workspace.uuid: Giá trị nhận dạng duy nhất (UUID phiên bản 4) cho dự án của bạn. Điều này giúp DevTools phân biệt giữa các dự án.
Sau khi nhận và xử lý tệp này, Công cụ cho nhà phát triển sẽ cung cấp nút Kết nối trong bảng điều khiển Nguồn > Không gian làm việc.
Được thiết kế để phát triển và gỡ lỗi cục bộ
Cơ chế tự động phát hiện không gian làm việc thông qua devtools.json được thiết kế dành riêng cho môi trường phát triển cục bộ và chỉ hoạt động khi ứng dụng của bạn được phân phát từ localhost. Chrome DevTools chỉ gửi yêu cầu /.well-known/appspecific/com.chrome.devtools.json ở chế độ phát triển khi bạn đang gỡ lỗi một dự án cục bộ. Tính năng này không dành cho môi trường sản xuất.
Cấp quyền truy cập vào tệp trên thiết bị
Vì lý do bảo mật, Chrome yêu cầu người dùng cấp quyền rõ ràng để một trang web có thể truy cập vào các tệp trên mạng cục bộ hoặc máy tính của bạn. Khi DevTools cố gắng kết nối với dự án cục bộ của bạn bằng devtools.json, bạn sẽ được nhắc cấp quyền cho Chrome truy cập vào thư mục dự án của bạn. Yêu cầu cấp quyền này tuân thủ các chính sách về Quyền truy cập mạng cục bộ của Chrome. Các chính sách này hạn chế yêu cầu từ mạng công cộng đến các đích đến cục bộ, trừ phi được cấp quyền. Chỉ những bối cảnh an toàn (HTTPS) mới có thể yêu cầu quyền này. Đối với quá trình phát triển cục bộ, điều này thường có nghĩa là localhost được coi là một ngữ cảnh an toàn.
Tạo và phân phát tệp devtools.json
Đối với một dự án giao diện người dùng điển hình chạy trên máy chủ phát triển cục bộ, bạn cần định cấu hình máy chủ để phản hồi yêu cầu /.well-known/appspecific/com.chrome.devtools.json bằng nội dung JSON chính xác.
Sau đây là cách bạn có thể tiếp cận vấn đề này:
- Tạo một UUID: Bạn sẽ cần một UUID phiên bản 4. Bạn có thể tạo một mã bằng cách sử dụng các công cụ trực tuyến hoặc một tập lệnh.
- Xác định thư mục gốc của dự án: Lấy đường dẫn tuyệt đối đến thư mục gốc của dự án.
- Tạo một điểm cuối: Định cấu hình máy chủ phát triển để xử lý các yêu cầu GET đến
/.well-known/appspecific/com.chrome.devtools.json. - Phân phát JSON: Khi điểm cuối này được truy cập, hãy phân phát một phản hồi JSON có tiêu đề
Content-Type: application/jsonvà nội dungdevtools.json.
Đường dẫn workspace.root được chỉ định trong tệp devtools.json phải là đường dẫn tuyệt đối đến thư mục gốc của dự án trên hệ thống tệp cục bộ. Điều này có nghĩa là đường dẫn sẽ thay đổi tuỳ thuộc vào hệ điều hành (ví dụ: /Users/yourname/projects/my-app trên macOS hoặc Linux hoặc C:\Users\yourname\projects\my-app trên Windows) và chế độ thiết lập dự án cụ thể của bạn. Hãy cân nhắc việc thêm tệp này vào danh sách các tệp bị bỏ qua (ví dụ: vào danh sách .gitignore) để tránh kiểm tra tệp này cho môi trường phát hành chính thức.
Điều quan trọng là máy chủ của bạn phải tạo hoặc phân phát đường dẫn này một cách linh hoạt hoặc bạn phải định cấu hình đường dẫn này một cách chính xác cho môi trường phát triển của mình. Hãy cân nhắc việc thêm tệp này vào danh sách tệp bị bỏ qua (ví dụ: vào danh sách .gitignore) để tránh kiểm tra tệp này cho môi trường phát hành chính thức.
Ví dụ
Có nhiều cách để bạn có thể cung cấp tệp devtools.json, tuỳ thuộc vào ngăn xếp công nghệ của dự án.
Node.js và Express
Tập lệnh này chạy một máy chủ Express tối thiểu. Thư mục này phân phát một tệp JSON tại /.well-known/appspecific/com.chrome.devtools.json chứa đường dẫn đến projectRoot.. Thư mục này trỏ đến thư mục nơi máy chủ chạy. Điều chỉnh biến projectRoot để trỏ chính xác đến thư mục gốc thực tế của dự án, không nhất thiết phải là nơi đặt tập lệnh máy chủ.
const express = require('express');
const path = require('path');
const { v4: uuidv4 } = require('uuid');
const app = express();
const port = 3000;
if (process.env.NODE_ENV !== 'production') {
app.get('/.well-known/appspecific/com.chrome.devtools.json', (req, res) => {
const projectRoot = path.resolve(__dirname);
const workspaceUuid = uuidv4();
res.json({
workspace: {
root: projectRoot,
uuid: workspaceUuid,
},
});
});
}
app.listen(port, () => {
console.log(`Development server listening at http://localhost:${port}`);
});
Sử dụng tập lệnh devtools-json-generator
Bạn có thể dùng generate-devtools-json để tạo devtools.json cho bạn.
Để tạo tệp devtools.json trong thư mục hiện tại, hãy chạy:
npx generate-devtools-json
Hoặc, để tạo tệp trong một thư mục cụ thể, hãy truyền thư mục đó làm đối số:
npx generate-devtools-json /path/to/your/project
Tìm hiểu thêm về devtools-json-generator trên trang chủ của dự án.
Các công cụ tích hợp
Một số khung giao diện người dùng và công cụ xây dựng cung cấp các trình bổ trợ hoặc cấu hình để đơn giản hoá quy trình này.
Vite
Đối với các dự án dựa trên Vite (bao gồm cả SvelteKit), vite-plugin-devtools-json là một giải pháp. Thư viện này tự động hoá việc tạo và phân phát tệp devtools.json ngay lập tức.
Để sử dụng, hãy cài đặt trình bổ trợ:
npm install -D vite-plugin-devtools-json
Sau đó, hãy thêm vào vite.config.js (hoặc vite.config.ts):
// vite.config.js
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';
export default defineConfig({
plugins: [
devtoolsJson({
// Optional: specify a custom root path if different from Vite's root
// root: '/path/to/your/project/root',
}),
],
});
Angular
Nếu bạn sử dụng ng serve để chạy dự án Angular cục bộ (và phiên bản @angular/cli của bạn ít nhất là 19.0.0), thì Angular CLI sẽ cung cấp phần mềm trung gian tự động phân phát tệp devtools.json chính xác cho bạn.
Ví dụ: để tạo và chạy một ứng dụng mới:
npm install -g @angular/cli
ng new my-first-angular-app
ng serve
Khi chuyển đến https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json, bạn có thể thấy tệp JSON đã tạo.
Khắc phục sự cố
Bạn có thể giải quyết các vấn đề thường gặp liên quan đến việc kết nối tự động với không gian làm việc bằng cách làm theo các mẹo trong phần này.
Xoá thư mục khỏi không gian làm việc
Nếu một thư mục dự án đã được kết nối tự động, bạn có thể xoá thư mục đó theo cách thủ công khỏi chế độ cài đặt không gian làm việc của Công cụ cho nhà phát triển:
- Mở Công cụ dành cho nhà phát triển của Chrome.
- Chuyển đến thẻ Nguồn.
- Trong bảng điều khiển bên trái, hãy chọn thẻ phụ Không gian làm việc.
- Nhấp chuột phải vào thư mục dự án không mong muốn rồi chọn Xoá khỏi không gian làm việc.
Bỏ qua lỗi 404 trên máy chủ
Nếu không muốn sử dụng tính năng này cho một dự án cụ thể và thấy lỗi 404 cho yêu cầu /.well-known/appspecific/com.chrome.devtools.json trong nhật ký máy chủ, bạn có thể bỏ qua những lỗi này. Yêu cầu này không gây hại nếu tệp không được phân phát. Ngoài ra, bạn có thể định cấu hình máy chủ để phản hồi bằng trạng thái 404 cho đường dẫn cụ thể này mà không cần ghi nhật ký lỗi.
Cách tắt tính năng này trong Công cụ của Chrome cho nhà phát triển
Nếu cần tắt tính năng tự động phát hiện không gian làm việc trong Công cụ của Chrome cho nhà phát triển, bạn cần đặt cờ Chrome thích hợp:
- Mở Chrome rồi chuyển đến biểu tượng
chrome://flags. - Tìm "DevTools Project Settings" (Chế độ cài đặt dự án của Công cụ cho nhà phát triển) rồi đặt thành Disabled (Đã tắt).
- Bạn cũng có thể tìm thấy một cờ liên quan có tên là "DevTools Automatic Workspace Folders" (Thư mục không gian làm việc tự động của Công cụ cho nhà phát triển) và cũng có thể tắt cờ đó.
- Khởi chạy lại Chrome để các thay đổi có hiệu lực.
Tóm tắt
Bằng cách hiểu và sử dụng cơ chế devtools.json, bạn có thể cải thiện đáng kể quy trình phát triển cục bộ bằng Chrome DevTools.