Giao thức Công cụ của Chrome cho nhà phát triển (CDP) là một giao thức gỡ lỗi từ xa (API) cho phép nhà phát triển giao tiếp với một trình duyệt Chrome đang chạy. Công cụ của Chrome cho nhà phát triển sử dụng CDP để giúp bạn kiểm tra trạng thái của trình duyệt, kiểm soát hành vi của trình duyệt và thu thập thông tin gỡ lỗi. Bạn cũng có thể tạo các tiện ích Chrome sử dụng CDP.
Ví dụ: đây là lệnh CDP chèn một quy tắc mới với ruleText
đã cho trong một tệp định kiểu có styleSheetId
đã cho, tại vị trí do location
chỉ định.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColu
mn: 1
}
}
}
Thẻ ngăn Trình giám sát giao thức cung cấp cho bạn một cách để gửi yêu cầu CDP và xem tất cả yêu cầu và phản hồi CDP mà DevTools gửi và nhận.
Trước đây, bạn khó có thể tạo lệnh theo cách thủ công, đặc biệt là lệnh có nhiều tham số. Bạn không chỉ cần chú ý đến dấu ngoặc đơn mở và đóng cũng như dấu ngoặc kép, mà còn phải nhớ các tham số của lệnh. Điều này khiến bạn phải tra cứu tài liệu về CDP.
Để giải quyết vấn đề này, DevTools đã ra mắt một trình chỉnh sửa CDP mới có các mục tiêu chính là:
- Tự động hoàn thành lệnh. Đơn giản hoá việc nhập lệnh CDP bằng cách cung cấp cho bạn danh sách các lệnh có sẵn thông qua tính năng tự động hoàn thành.
- Tự động điền thông số lệnh. Giảm nhu cầu kiểm tra tài liệu CDP để biết danh sách các tham số lệnh có sẵn.
- Đơn giản hoá việc nhập tham số. Bạn chỉ cần điền giá trị của các thông số mà bạn muốn gửi.
- Chỉnh sửa và gửi lại. Cải thiện tốc độ tạo bản minh hoạ bằng cách sửa đổi lệnh CDP nhanh hơn.
Bây giờ, hãy cùng xem trình chỉnh sửa mới này cung cấp những gì và cách bạn có thể tận dụng trình chỉnh sửa này!
Tính năng tự động hoàn thành
Tính năng tự động hoàn thành hiện hỗ trợ thanh nhập lệnh. Trình chỉnh sửa này giúp bạn viết tên của các lệnh CDP mà bạn có quyền truy cập. Điều này có thể rất hữu ích đối với các lệnh không chấp nhận tham số.
Tham số chuỗi và số
Với trình chỉnh sửa mới này, bạn hiện có thể dễ dàng chỉnh sửa các giá trị của tham số gốc. Để mở trình soạn thảo, hãy nhấp vào biểu tượng bên cạnh mục nhập lệnh.
Sau khi bạn nhập tên lệnh, trình chỉnh sửa sẽ tự động hiển thị các tham số tương ứng. Bạn không cần tra cứu tài liệu để biết tham số nào đi kèm với lệnh nào. Hơn nữa, trình chỉnh sửa hiển thị các tham số theo thứ tự nhất định: các tham số bắt buộc trước (màu đỏ) và các tham số không bắt buộc tiếp theo (màu xanh dương).
Để thêm giá trị vào một tham số không bắt buộc, hãy di chuột qua tên của tham số đó rồi nhấp vào nút +
. Để đặt lại tham số về giá trị không xác định, hãy nhấp vào nút Đặt lại về giá trị mặc định.
Tham số enum và boolean
Khi chỉnh sửa tham số enum hoặc boolean, bạn sẽ thấy một trình đơn thả xuống cung cấp một số giá trị tiềm năng (đối với enum) hoặc tuỳ chọn true hoặc false đơn giản cho boolean. Tính năng này giúp giảm khả năng nhập sai giá trị cho các tham số enum, đồng thời duy trì độ chính xác và tính đơn giản.
Tham số mảng
Đối với các thông số mảng, bạn có thể thêm giá trị vào mảng theo cách thủ công. Di chuột qua hàng của tham số rồi nhấp vào nút +
.
Để xoá từng phần tử của mảng, hãy nhấp vào nút thùng rác bên cạnh các phần tử đó. Bạn cũng có thể xoá tất cả tham số khỏi mảng bằng nút khối. Trong trường hợp này, tham số mảng được đặt lại thành []
.
Tham số đối tượng
Khi bạn nhập một lệnh chấp nhận các tham số đối tượng, trình chỉnh sửa sẽ liệt kê các khoá của đối tượng này và bạn có thể chỉnh sửa trực tiếp các giá trị của các khoá đó. Cách này áp dụng cho tất cả các loại thông số lồng nhau.
Khám phá chức năng của lệnh và tham số trong trình chỉnh sửa
Bạn đã bao giờ không chắc chắn về mục đích của một tham số hoặc lệnh chưa? Giờ đây, bạn có thể di chuột qua một lệnh hoặc tham số và một chú giải công cụ mô tả sẽ bật lên, cùng với đường liên kết đến tài liệu trực tuyến.
Cảnh báo trước khi gửi thông số không chính xác
Trước đây, nếu bạn không biết giá trị của một thông số có đúng loại hay không và phải đợi để đọc phản hồi lỗi, thì trình chỉnh sửa mới này là dành cho bạn. Thông báo này cho bạn biết lỗi theo thời gian thực nếu tham số không thể chấp nhận giá trị bạn đã nhập.
Gửi lại lệnh
Nếu cần điều chỉnh một tham số của lệnh bạn vừa gửi, bạn không cần phải nhập lại tham số đó. Để chỉnh sửa và gửi lại lệnh, hãy nhấp chuột phải vào một mục trong lưới dữ liệu rồi chọn Chỉnh sửa và gửi lại trong trình đơn thả xuống. Thao tác này sẽ tự động mở lại trình chỉnh sửa CDP và điền sẵn lệnh bạn đã chọn.
Sao chép lệnh sang định dạng JSON
Để sao chép lệnh CDP ở định dạng JSON vào bảng nhớ tạm, hãy nhấp vào biểu tượng sao chép ở cuối cùng bên trái của thanh công cụ. Ngoài ra, hãy lưu ý rằng nếu bạn nhập lệnh trực tiếp vào thanh nhập, lệnh đó sẽ được điền liền mạch vào trình chỉnh sửa và ngược lại.
Kết luận
Mục tiêu của nhóm DevTools khi thiết kế trình chỉnh sửa CDP mới này là đơn giản hoá việc nhập lệnh CDP. Bạn cũng có thể dùng trình chỉnh sửa mới để xem các tham số cùng với tài liệu và để gửi lệnh CDP dễ dàng hơn.
Tải các kênh xem trước xuống
Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn sử dụng các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!
Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển
Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.
- Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại crbug.com.
- Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng biểu tượng Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
- Gửi tweet đến @ChromeDevTools.
- Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.