Công cụ dành cho thành phần web trong Chrome với OffiDocs

SỰ MIÊU TẢ:

Run the Chrome online web store extension Web Component DevTools using OffiDocs Chromium online.

Công cụ dành cho nhà phát triển dành cho Thành phần Web và Thư viện Thành phần Web DevTools Thành phần Web hướng tới tất cả các nhà phát triển làm việc với Thành phần Web.

Công cụ được cung cấp sẽ tạo bảng điều khiển Chrome Devtools mới, cho phép xem nhanh các thành phần tùy chỉnh trên trang hiện tại và cho phép sửa đổi các thuộc tính và thuộc tính của các thành phần nói trên.

DevTools Thành phần Web sử dụng Bản kê khai thành phần tùy chỉnh (https://github.

com/webcomComponents/custom-elements-manifest) để phân tích Thành phần Web.

Tính năng: DevTools Thành phần Web cung cấp các tính năng nâng cao cho nhà phát triển, ngay từ giao diện người dùng của trình duyệt, ví dụ: - Liệt kê các thành phần tùy chỉnh trên trang và các iframe có thể truy cập bên trong trang - Lọc các thành phần tùy chỉnh trên danh sách - Kiểm tra và sửa đổi các thuộc tính của phần tử tùy chỉnh - Kiểm tra và sửa đổi các thuộc tính (thậm chí cả đối tượng và mảng) của phần tử tùy chỉnh - Quan sát các sự kiện được gửi đi - Gọi các hàm của phần tử tùy chỉnh và ghi lại các giá trị trả về - Xem mã nguồn của các thành phần web trên trang - Tương tác trực tiếp với các thành phần web thông qua bảng điều khiển Tại sao? Trong quá trình phát triển Thành phần Web, cho dù có thư viện như Lit hay không có bất kỳ loại thư viện nào, sẽ có những tình huống mà bạn có thể muốn kiểm soát nhiều hơn một chút đối với các thành phần của mình so với những gì mà các công cụ phát triển trình duyệt thông thường cung cấp cho bạn.

Ví dụ: bạn có thể muốn: Chuyển đổi các thuộc tính của phần tử Chuyển đổi các thuộc tính của phần tử Giám sát khi các sự kiện được gửi đi từ phần tử Gọi các hàm Và khi bạn đang làm việc với Thành phần Web, Shadow DOM thường xuất hiện, khiến việc này khá khó khăn tìm đường dẫn đến phần tử.

Và ngay cả khi bạn có đường dẫn, bạn vẫn phải viết document.

querySelector("chuỗi chọn của tôi > tên phần tử").

setAttribution("my-attr", "foo") mỗi lần bạn muốn sửa đổi một giá trị khá cồng kềnh.

Đối với trường hợp sử dụng này, Công cụ dành cho thành phần web đã được tạo: Để cho phép nhà phát triển dễ dàng sửa đổi các thuộc tính, thuộc tính và do đó, trạng thái của phần tử của chúng ngay từ cửa sổ devtools chỉ bằng một nút bấm.

Sự cố: Mọi sự cố bạn gặp phải khi sử dụng DevTools phải được gửi tới Kho lưu trữ GitHub (https://github.

com/Matsuuu/web-thành phần-devtools/vấn đề).

Thông tin thêm:

- Được cung cấp bởi Matsuuu
- Đánh giá trung bình : 5 sao (thích nó)
- Nhà phát triển Địa chỉ email này đã được bảo vệ từ spam bots. Bạn cần kích hoạt Javascript để xem nó.

Web Component DevTools web extension integrated with the OffiDocs Chromium online