Soạn thảo lệnh Giao thức Chrome Devtools (CDP) hiệu quả bằng trình chỉnh sửa lệnh mới

Hadrien Jaubert
Hadrien Jaubert

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 (API) từ xa cho phép các 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ể xây dựng các tiện ích của Chrome sử dụng CDP.

Ví dụ: đây là lệnh CDP có thể chèn một quy tắc mới với ruleText đã cho trong biểu định kiểu có styleSheetId cho trước, tại vị trí do location chỉ định.

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

Thẻ ngăn Giám sát giao thức cung cấp cho bạn cách gửi yêu cầu CDP và xem tất cả các yêu cầu CDP và phản hồi mà Công cụ cho nhà phát triển gửi và nhận.

Thanh dòng lệnh ở cuối màn hình Giao thức.

Trước đây, rất khó để tạo lệnh theo cách thủ công, đặc biệt là một lệnh có nhiều tham số. Bạn không chỉ cần chú ý đến dấu ngoặc mở và đóng và dấu ngoặc kép mà còn phải nhớ các tham số của lệnh và sau đó, bạn sẽ phải tra cứu tài liệu về CDP.

Để giải quyết vấn đề này, Công cụ cho nhà phát triển đã ra mắt một trình chỉnh sửa CDP mới 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 các tham số lệnh. Giảm nhu cầu xem 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 nguyên mẫu bằng cách sửa đổi lệnh CDP nhanh hơn.

Bây giờ, hãy xem trình chỉnh sửa mới này mang lại những lợi ích gì và cách tận dụng!

Tính năng tự động hoàn thành

Trình đơn thả xuống tự động hoàn thành.

Giờ đây, tính năng tự động hoàn thành sẽ hỗ trợ thanh nhập lệnh. Công cụ 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 thuận tiện đố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, giờ đây, bạn có thể dễ dàng chỉnh sửa các giá trị của các tham số gốc. Để mở trình chỉnh sửa, hãy nhấp vào biểu tượng Mở bảng điều khiển bên trái. bên cạnh 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ị cho bạn các tham số tương ứng. Bạn không cần tra cứu tài liệu để biết tham số đi kèm với lệnh nào. Hơn nữa, trình chỉnh sửa sẽ hiển thị các tham số theo thứ tự nhất định: các tham số bắt buộc xuất hiện 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 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ố thành không xác định, hãy nhấp vào nút Đặt lại về giá trị mặc định.

Nút + và 'Đặt lại về giá trị mặc định'.

Tham số enum và enum

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 lựa chọn các giá trị tiềm năng (đối với enum) hoặc tuỳ chọn đơn giản (true hoặc false) cho boolean. Tính năng này làm 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à đơn giản.

Trình đơn thả xuống boolean và enum.

Tham số mảng

Đối với tham 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 +.

Nút + thêm một mục mảng.

Để xoá từng mặt hàng trong mảng, hãy nhấp vào nút thùng rác bên cạnh các mặt hàng. Bạn cũng có thể xoá tất cả tham số khỏi mảng bằng nút chặn. Trong trường hợp này, tham số mảng được đặt lại thành [].

Nút "Xoá thông số" và "Đặt lại về mặc định".

Tham số đối tượng

Khi bạn nhập lệnh chấp nhận các thông 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ể trực tiếp chỉnh sửa các giá trị của chúng. Cách này áp dụng cho tất cả các loại tham số lồng nhau.

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

Có bao giờ bạn không chắc chắn về mục đích của một tham số hoặc lệnh không? 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, kèm theo một đường liên kết đến tài liệu trực tuyến.

Chú giải công cụ mang tính mô tả xuất hiện khi bạn di chuột lên một lệnh.

Được 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 liệu giá trị của một tham số có thuộc đúng loại hay không và phải chờ để đọc phản hồi lỗi, thì trình chỉnh sửa mới này dành cho bạn. Cột này cho bạn thấy lỗi theo thời gian thực nếu thông số này không chấp nhận giá trị bạn đã nhập.

Biểu tượng lỗi bên cạnh một thông số có giá trị không chính xác.

Gửi lại lệnh

Nếu cần chỉnh sửa tham số của lệnh 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 trên 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.

Trình đơn thả xuống của một lệnh trong lưới dữ liệu có tuỳ chọn "Chỉnh sửa và gửi lại".

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 Sao chép. ở ngoà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 một lệnh trực tiếp vào thanh nhập dữ liệu, lệnh đó sẽ liền mạch được điền sẵn 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 Công cụ cho nhà phát triển đằng sau thiết kế của 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ể sử dụng trình chỉnh sửa mới để xem các tham số cùng với tài liệu, đồng thời cung cấp cho bạn cách gửi lệnh CDP dễ dàng hơn.

Tải 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 cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua 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 phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để lại bình luận về tính năng mới trong video trên YouTube của Công cụ cho nhà phát triển hoặc video trên YouTube.