Tiện ích DevTools

Tiện ích Text.js DevTools thêm bảng Text.js bên cạnh Bảng điều khiển. Tiện ích kiểm tra ứng dụng đang render trong console.

• Component: cây React của mỗi gốc console, với props, hook, key và các nút cảnh tx-box / tx-text phía sau chúng, bố trí theo ô.
• Frame: frame hiện tại dưới dạng lưới ô. Di chuột lên một ô để xem component nào đã vẽ ô đó. Nhấp để chọn nút. Nút sẽ sáng lên trong console đang chạy.
• Dòng thời gian: thời gian React, layout, vẽ và mã hóa của từng frame, frame bị bỏ qua so với frame đã xuất, nhịp frame và span %c.
• Điều khiển: tạm dừng và tiếp tục xuất, bật tắt khung dây layout, cố định hoặc điều chỉnh kích thước lưới cho vừa, sao chép frame dưới dạng văn bản.

#Cài đặt

Biên dịch tiện ích từ packages/devtools-extension rồi tải dưới dạng chưa đóng gói:

bun run --cwd packages/devtools-extension build

1. Mở chrome://extensions và bật Chế độ dành cho nhà phát triển.
2. Nhấp Tải tiện ích đã giải nén và chọn packages/devtools-extension/dist.
3. Tải lại ứng dụng và mở DevTools. Bảng Text.js xuất hiện khi trang tạo một gốc console.

Bản dựng cũng tạo release/textjs-devtools-<version>.zip, sẵn sàng cho Cửa hàng Chrome trực tuyến.

#Component

Chọn một component để xem props, hook theo thứ tự gọi (State, Ref, Memo, Effect và các hook khác, kèm giá trị hiện tại) và nút cảnh mà nó render, với vị trí, kích thước và khoảng thụt của hộp tính bằng ô. Di chuột lên một dòng sẽ làm nổi bật nút trong console. Nút chủ hiện hoặc ẩn các phần tử tx-box và tx-text giữa các component.

Cây làm mới sau mỗi commit khi bảng đang mở. Các giá trị là bản tóm tắt để hiển thị, không phải đối tượng trực tiếp.

#Frame

Trình kiểm tra frame vẽ bộ đệm ô của trình render: từng ký tự hiển thị, màu chữ, màu nền và thuộc tính. Di chuột lên một ô sẽ cho biết ký tự và màu sắc của ô, nút cảnh nằm trên cùng theo thứ tự vẽ (tuân theo overflow, độ lệch cuộn và zIndex), cùng các component đã render nút đó. Nhấp sẽ chọn nút trong Component và làm nổi bật nút trong console đang chạy bằng lớp phủ làm nổi bật của chính trình render.

#Dòng thời gian

Mỗi thanh là một frame của trình render:

Frame bị bỏ qua hiển thị mờ: không có gì thay đổi nên không ghi gì vào console. Biểu đồ nhịp frame hiển thị khoảng cách giữa các frame đã xuất so với khoảng tối thiểu 66 ms.

Phép đo thời gian dừng tại console.log(). Định dạng và vẽ thông báo diễn ra bên trong DevTools và trang không thể quan sát, nên dòng thời gian không hiển thị chúng. Các lần render đồng thời có commit giữa các frame tính là commit, không đo thời gian.

#Cách hoạt động

Giống React DevTools, tiện ích cài một hook toàn cục trước khi trang chạy:

globalThis.__TEXTJS_DEVTOOLS_HOOK__

Mỗi gốc console đăng ký với hook khi khởi tạo. Khi không có tiện ích, hook không tồn tại, và gốc chỉ kiểm tra hook một lần, không thực hiện công việc nào theo từng frame. Khi đã cài tiện ích nhưng đóng bảng, mỗi frame tốn một lần đọc thuộc tính. Cây và frame chỉ tính toán khi bảng yêu cầu.

Thông điệp đi theo luồng trang → tập lệnh nội dung → service worker → bảng. Tập lệnh nội dung chạy trên mọi trang để hook tồn tại trước khi ứng dụng khởi động. Đó là quyền truy cập duy nhất mà tiện ích yêu cầu. Tiện ích không tải mã từ xa và không gửi gì ra khỏi máy.

#Quyền riêng tư

Tiện ích không thu thập dữ liệu. Tiện ích không gửi yêu cầu mạng, không lưu trữ gì và không có công cụ phân tích. Cây component, frame và số đo thời gian chỉ truyền giữa trang và bảng DevTools trong cùng trình duyệt, và bị loại bỏ khi bạn đóng DevTools. Sao chép frame ghi văn bản của frame vào bảng nhớ tạm khi bạn nhấp vào.

#Giới hạn

• Chrome và trình duyệt dựa trên Chromium, phiên bản 111 trở lên.
• Ứng dụng khởi động trước khi cài tiện ích cần tải lại.
• Chỉ kiểm tra frame trên cùng của thẻ.
• Thời gian lấy từ performance.now(), với độ phân giải mà trình duyệt giảm xuống còn khoảng 0,1 ms.