Thêm tiện ích vào Chrome
- Mở Cửa hàng Chrome trực tuyến và tìm kiếm tiện ích "DevSuite Pro".
- Nhấp vào "Thêm vào Chrome", sau đó xác nhận bằng cách nhấp vào "Thêm tiện ích" trong cửa sổ bật lên.
Hơn 64 công cụ mạnh mẽ để kiểm tra, đo lường, chụp ảnh, phân tích và thiết kế trang web trực tiếp trong trình duyệt của bạn.
Bắt đầu rất đơn giản. Cài đặt tiện ích, mở bất kỳ trang web nào và truy cập hơn 64 công cụ dành cho nhà phát triển từ cửa sổ bật lên hoặc thanh công cụ nổi. Không cần cấu hình.
DevSuite Pro cung cấp hơn 64 công cụ dành cho nhà phát triển để kiểm tra trang web, đo lường, thiết kế và phân tích. Tăng tốc quy trình làm việc của bạn với các tính năng mạnh mẽ được tích hợp trực tiếp vào trình duyệt của bạn.
Di chuột qua bất kỳ phần tử nào để xem ngay các kiểu CSS của nó và chỉnh sửa trực tiếp, giúp việc gỡ lỗi và điều chỉnh thiết kế theo thời gian thực trở nên dễ dàng.
Tìm hiểu thêm →Nhấp vào bất kỳ phần tử nào để kiểm tra các thuộc tính, kích thước, khoảng cách, phông chữ và màu sắc của nó. Hiểu ngay cấu trúc trang mà không cần mở DevTools của trình duyệt.
Tìm hiểu thêm →Đo khoảng cách, kiểm tra căn chỉnh và thêm thước kẻ cũng như đường dẫn chính xác từng pixel vào bất kỳ trang web nào để đảm bảo thiết kế của bạn được căn chỉnh hoàn hảo.
Tìm hiểu thêm →Chọn màu từ bất kỳ phần tử nào trên trang và sao chép các giá trị HEX, RGB hoặc HSL vào khay nhớ tạm của bạn chỉ bằng một cú nhấp chuột.
Tìm hiểu thêm →Chụp ảnh màn hình toàn trang hoặc vùng hiển thị của bất kỳ trang web nào và tải xuống ngay lập tức — lý tưởng để chia sẻ thiết kế và báo cáo lỗi.
Tìm hiểu thêm →Xem trước trang web ở các kích thước màn hình và độ phân giải thiết bị khác nhau để kiểm tra thiết kế phản hồi mà không cần rời trình duyệt.
Tìm hiểu thêm →Kiểm tra và chỉnh sửa CSS theo thời gian thực
Trình kiểm tra CSS là công cụ miễn phí mạnh mẽ cho phép bạn di chuột qua bất kỳ phần tử nào trên trang web để xem ngay…
Gỡ lỗi và điều khiển hoạt ảnh CSS theo thời gian thực
Trình kiểm tra hoạt ảnh cho bạn toàn quyền kiểm soát mọi hoạt ảnh và chuyển đổi CSS trên bất kỳ trang web nào.
Chuyển đổi CSS của bất kỳ phần tử nào thành các lớp Tailwind
Sao chép dưới dạng Tailwind kết nối thiết kế trực quan với mã Tailwind CSS.
Hiển thị cấu trúc bố cục trang hoàn chỉnh
Chế độ đường viền thêm đường viền có mã màu vào mọi phần tử HTML trên trang, cho bạn cái nhìn X-quang về cấu trúc…
Nhận các lớp Tailwind được phân loại cho bất kỳ phần tử nào
Trợ giúp Tailwind kiểm tra bất kỳ phần tử nào và tạo ra bản phân tích chi tiết, có phân loại các lớp Tailwind CSS phù…
Chế độ xem cây HTML trực quan trên bất kỳ trang nào
Trình hiển thị trang hiển thị cấu trúc DOM hoàn chỉnh dưới dạng lớp phủ cây trực quan ngay trên trang.
Phát hiện các component React, Vue, Angular và Svelte
Trình phát hiện component tự động nhận dạng framework frontend và hiển thị cây component hoàn chỉnh.
Kéo và thả để di chuyển bất kỳ phần tử nào
Di chuyển phần tử cho phép bạn nhấp vào bất kỳ phần tử nào và kéo nó đến vị trí mới.
Xóa hoặc chuyển đổi hiển thị của bất kỳ phần tử nào
Xóa/Ẩn phần tử cho phép bạn xóa hoặc tạm ẩn bất kỳ phần tử nào chỉ với một cú nhấp.
Xuất bất kỳ phần tử nào dưới dạng HTML, CSS hoặc JSON
Xuất phần tử cho phép bạn nhấp vào bất kỳ phần tử nào và xuất cấu trúc hoàn chỉnh của nó trong ba định dạng.
Tạo component React, Vue và Svelte từ bất kỳ phần tử nào
Sao chép mã component chuyển đổi bất kỳ phần tử nào thành tệp component sạch, sẵn sàng cho sản xuất.
Chụp vùng hiển thị hoặc toàn bộ trang
Chụp ảnh màn hình chất lượng cao của bất kỳ trang web nào ở hai chế độ — vùng hiển thị hoặc toàn trang.
Xem, chọn và tải xuống tất cả hình ảnh từ bất kỳ trang nào
Trích xuất hình ảnh quét bất kỳ trang web nào và hiển thị mọi hình ảnh trong thư viện có thể duyệt.
Tìm, xem trước và tải xuống mọi SVG trên bất kỳ trang nào
Trình lấy SVG phát hiện mọi SVG trên trang web — phần tử SVG nội tuyến, tệp .svg bên ngoài, sprite SVG và URI dữ liệu SVG.
Thay thế bất kỳ hình ảnh nào trên trang bằng hình của bạn
Thay thế hình ảnh cho phép bạn nhấp vào bất kỳ hình ảnh nào và thay thế bằng hình của bạn — tải lên tệp hoặc dán…
Tạo mã QR ngay lập tức cho bất kỳ URL hoặc văn bản nào
Trình tạo mã QR tạo mã QR có thể quét cho URL trang hiện tại tự động hoặc cho bất kỳ văn bản tùy chỉnh nào.
Thước, đường dẫn và phép đo chính xác pixel trên bất kỳ trang nào
Thước trang thêm thước và đường dẫn kéo theo kiểu Photoshop vào bất kỳ trang web nào.
Xem trước nhiều thiết bị đồng thời
Trình xem đáp ứng hiển thị trang hiện tại ở nhiều kích thước viewport cạnh nhau.
Đo khoảng cách pixel chính xác giữa hai phần tử bất kỳ
Đo khoảng cách cho phép bạn nhấp vào hai phần tử và thấy ngay khoảng cách chính xác giữa chúng.
Hiển thị ngữ cảnh xếp chồng và các lớp z-index
Trình kiểm tra Z-Index tiết lộ thứ tự xếp chồng hoàn chỉnh của mọi phần tử trên trang.
Kiểm tra bố cục CSS Grid và Flexbox với lớp phủ trực quan
Trình hiển thị Grid/Flex phát hiện mọi vùng chứa CSS Grid và Flexbox và hiển thị cấu trúc của chúng dưới dạng lớp phủ…
Mô phỏng điểm nóng sự chú ý của người dùng
Trình mô phỏng bản đồ nhiệt tạo bản đồ nhiệt dự đoán sự chú ý cho bất kỳ trang nào dựa trên các mẫu nghiên cứu…
Xóa có chọn lọc bộ nhớ đệm, cookie, localStorage và sessionStorage
Xóa nhanh và có chọn lọc các loại dữ liệu duyệt web cụ thể cho trang hiện tại.
Phát hiện mọi công nghệ đằng sau bất kỳ trang web nào
Stack công nghệ quét bất kỳ trang web nào và xác định toàn bộ stack công nghệ của nó.
Kiểm toán SEO toàn diện: Thẻ Meta, Tiêu đề, OpenGraph và hơn thế
Trình kiểm tra SEO cung cấp kiểm toán SEO tức thì, toàn diện cho bất kỳ trang web nào.
Kiểm toán WCAG tự động: Tương phản, Alt text, ARIA và hơn thế
Trình kiểm tra khả năng tiếp cận chạy kiểm tra WCAG 2.1 Level AA tự động trên bất kỳ trang nào.
Nhấp vào bất kỳ văn bản nào trên trang để chỉnh sửa ngay
Trình chỉnh sửa văn bản trực tiếp làm cho mọi phần tử văn bản trên trang có thể chỉnh sửa chỉ với một cú nhấp.
Thay đổi bất kỳ phông chữ nào toàn cục hoặc theo phần tử
Thay đổi phông chữ cho phép bạn thay thế bất kỳ phông chữ nào bằng phông khác từ thư viện Google Fonts.
Khám phá mọi phông chữ được sử dụng trên bất kỳ trang nào
Liệt kê tất cả phông chữ quét trang và hiển thị danh mục đầy đủ của mọi họ phông chữ được sử dụng.
Công cụ nhỏ giọt chính xác cho giá trị HEX, RGB và HSL
Bộ chọn màu cung cấp công cụ nhỏ giọt chính xác pixel để chọn màu từ bất kỳ phần tử nào.
Trích xuất bảng màu hoàn chỉnh từ bất kỳ trang nào
Bảng màu quét mọi phần tử và trích xuất tập hợp đầy đủ các màu được sử dụng, sắp xếp theo tần suất.
Áp dụng chế độ tối ngay lập tức trên bất kỳ trang nào
Bắt buộc chế độ tối áp dụng bảng màu tối cho bất kỳ trang web nào không cung cấp tùy chọn này.
Bật hoặc tắt JavaScript ngay lập tức cho tab hiện tại
Bật/Tắt JavaScript vô hiệu hóa hoặc kích hoạt lại JavaScript cho tab hiện tại chỉ với một cú nhấp.
Xem, chỉnh sửa, thêm và xóa cookie
Trình chỉnh sửa Cookie hiển thị tất cả cookie cho domain hiện tại trong bảng rõ ràng, có thể sắp xếp.
Xem đầu ra console trong bảng nổi — không cần DevTools
Trình ghi Console ghi lại tất cả đầu ra console và hiển thị trong bảng nổi ngay trên trang.
Giám sát tất cả yêu cầu mạng theo thời gian thực
Giám sát mạng ghi lại và hiển thị mọi yêu cầu mạng do trang hiện tại thực hiện theo thời gian thực.
Xem và chỉnh sửa localStorage và sessionStorage
Trình chỉnh sửa bộ nhớ cục bộ cung cấp giao diện bảng rõ ràng để quản lý localStorage và sessionStorage.
Quét mọi liên kết trên trang và tìm liên kết hỏng
Kiểm tra liên kết hỏng quét mọi liên kết trên trang và xác định liên kết hỏng (404, hết thời gian, lỗi).
Bảng điều khiển hiệu suất tức thì: thời gian tải, thống kê DOM và tài nguyên
Hiệu suất trang cung cấp tổng quan hiệu suất tức thì của bất kỳ trang web nào.
Định dạng, Rút gọn & Kiểm tra JSON Chỉ với Một Cú Click
Công cụ Định dạng JSON giúp trình bày đẹp, rút gọn và kiểm tra JSON ngay trong trình duyệt của bạn.
Mã hóa Chuỗi Sang & Từ Base64 Tức thì
Công cụ Mã hóa/Giải mã Base64 chuyển đổi văn bản sang Base64 và Base64 trở lại văn bản ngay trong trình duyệt của bạn…
Mã hóa & Giải mã Chuỗi URL Chỉ Với Một Click
Công cụ Mã hóa/Giải mã URL chuyển đổi chuỗi URL sang và từ dạng mã hóa phần trăm (percent-encoded).
Mã hóa & Giải mã Thực thể HTML Tức thì
Công cụ Mã hóa Thực thể HTML chuyển đổi các ký tự đặc biệt (< > & " ') thành các thực thể HTML tương ứng (< >…
Escape & Unescape Chuỗi cho Code
Escape/Unescape Dấu Gạch chéo Ngược chuyển đổi chuỗi sang và từ dạng đã escape (\n \t \r \" \' \\ và escape Unicode).
Chuyển đổi hình ảnh sang và từ Base64 Data URI
Image ↔ Base64 chuyển đổi file hình ảnh (PNG, JPG, SVG, WebP, GIF) thành data URI mã hóa Base64 và ngược lại.
Giải mã JSON Web Token tức thì
JWT Debugger giải mã và kiểm tra JSON Web Token — phân tích header, payload và signature, hiển thị các claim, và cảnh…
Tạo hàng loạt định danh UUID v4
UUID Generator tạo ra các định danh UUID v4 mạnh về mặt mật mã học bằng API crypto của trình duyệt.
Tính hash MD5, SHA-1, SHA-256, SHA-384, SHA-512
Hash Generator tính toán các hash mật mã học (MD5, SHA-1, SHA-256, SHA-384, SHA-512) của bất kỳ đoạn văn bản nào.
Tạo mật khẩu mạnh về mặt mật mã học
Password Generator tạo ra mật khẩu ngẫu nhiên, mạnh mẽ bằng API ngẫu nhiên mật mã học của trình duyệt.
Kiểm Tra Regular Expression Trực Tiếp Với Tô Sáng Kết Quả Khớp
Regex Tester đánh giá regular expression trên văn bản thử nghiệm theo thời gian thực.
Chuyển Đổi Giữa Unix, ISO Và Ngày Giờ Dễ Đọc
Timestamp Converter chuyển đổi giữa Unix timestamp (giây, mili giây, micro giây, nano giây), ISO 8601, RFC 2822, và các…
So Sánh Hai Khối Văn Bản Theo Từng Dòng
Diff Tool so sánh hai khối văn bản và tô sáng các dòng được thêm, xóa, và không đổi với đầu ra mã màu.
Kiểm Tra Tỷ Lệ Tương Phản WCAG Của Hai Màu Bất Kỳ
Contrast Checker tính toán tỷ lệ tương phản WCAG 2.1 giữa hai màu và chấm điểm theo các ngưỡng AA/AAA cho cả văn bản…
Chuyển Đổi HEX, RGB, HSL, HSV & OKLCH Tức Thì
Color Format Converter chuyển đổi bất kỳ màu nào giữa HEX, RGB, HSL, HSV, và OKLCH.
Trích Xuất Bảng Màu Chủ Đạo Từ Bất Kỳ Hình Ảnh Nào
Trích Xuất Màu Từ Ảnh phân tích bất kỳ tệp hình ảnh nào (kéo thả, dán, hoặc nhấp để tải) và trả về tối đa 16 màu chủ…
Lấy CSS Selector & XPath Cho Bất Kỳ Phần Tử Nào
Tìm Đường Dẫn DOM cho phép bạn di chuột qua bất kỳ phần tử nào trên trang để xem CSS selector duy nhất, selector rút…
Kiểm Tra Yêu Cầu Xuyên Nguồn Gốc & Xem Header CORS
Kiểm Tra CORS xác định xem một yêu cầu xuyên nguồn gốc từ trang của bạn có được máy chủ đích cho phép hay không. Chạy…
Ghi Lại Khung WebSocket Theo Thời Gian Thực
Kiểm Tra WebSocket ghi lại mọi khung WebSocket — gửi đi và nhận về — trên tất cả kết nối của trang.
Quét Toàn Trang Tìm Ảnh Lỗi Tức Thì
Tìm Ảnh Lỗi quét mọi thẻ <img> và background-image CSS trên trang, phát hiện ảnh tải lỗi (404, lỗi CORS, canvas bị…
Tự Động Điền Form Bằng Dữ Liệu Test Thực Tế
Form Filler điền vào mọi trường form đang hiển thị trên trang bằng dữ liệu test thực tế — tên, email, số điện thoại…
Chuyển Đổi Giữa CSV và JSON Theo Cả Hai Chiều
CSV ↔ JSON Converter xử lý trọn vẹn việc chuyển đổi qua lại giữa hai định dạng dạng bảng phổ biến nhất.
Định Dạng, Xác Thực & Xem XML Với Syntax Highlighting
XML Formatter định dạng đẹp, nén gọn và xác thực XML ngay trong trình duyệt.
Làm Đẹp & Định Dạng Câu Lệnh SQL
SQL Formatter chuyển các câu lệnh SQL bị nén hoặc lộn xộn thành các truy vấn dễ đọc, có thụt lề.
Lưu Trang Web Thành File PDF Sạch Đẹp
Convert to PDF lưu trang web hiện tại thành file PDF thông qua hộp thoại in của trình duyệt, sau khi áp dụng các style…
Chọn gói dịch vụ tốt nhất cho quy trình làm việc của bạn. Bắt đầu miễn phí, nâng cấp bất cứ lúc nào.
Các câu hỏi phổ biến về các tính năng và cách sử dụng tiện ích DevSuite Pro. Nếu bạn có câu hỏi, câu trả lời có thể nằm ở bên dưới.
Truy cập Cửa hàng Chrome trực tuyến, tìm kiếm "DevSuite Pro", nhấp vào "Thêm vào Chrome" và xác nhận bằng cách chọn "Thêm tiện ích". Sau khi cài đặt, biểu tượng tiện ích sẽ xuất hiện trên thanh công cụ trình duyệt của bạn. Nhấp vào nó để truy cập hơn 64 công cụ dành cho nhà phát triển ngay lập tức.
Các công cụ miễn phí (hơn 43 công cụ) dành cho tất cả mọi người mà không cần giấy phép. Các công cụ Pro có biểu tượng PRO màu vàng và yêu cầu giấy phép Pro đang hoạt động để sử dụng. Bạn có thể thấy công cụ nào là miễn phí hoặc Pro trong cửa sổ bật lên — các công cụ miễn phí sẽ không có biểu tượng khóa, trong khi các công cụ Pro sẽ có màu hơi xám cho đến khi bạn kích hoạt giấy phép của mình.
Một số trang web có Chính sách bảo mật nội dung (CSP) nghiêm ngặt nhằm chặn một số hành động của các tiện ích trình duyệt. Điều này đặc biệt phổ biến trên các trang web ngân hàng và chính phủ. Ngoài ra, các trang nội bộ của Chrome (chrome://) không cho phép các tiện ích chạy tập lệnh nội dung.
Không. Tất cả các thay đổi được thực hiện bởi các công cụ như Di chuyển phần tử, Trình chỉnh sửa văn bản trực tiếp, Xóa/Ẩn phần tử và CSS Inspector chỉ là tạm thời. Chúng chỉ ảnh hưởng đến những gì bạn thấy trong trình duyệt của mình vào lúc này. Làm mới trang sẽ đưa mọi thứ trở lại trạng thái ban đầu.
Mở cửa sổ bật lên DevSuite Pro, nhấp vào biểu tượng Cài đặt ở góc trên bên phải. Cuộn xuống phần giấy phép, dán mã giấy phép của bạn vào trường nhập và nhấp vào Kích hoạt. Nếu mã hợp lệ, biểu tượng sẽ thay đổi từ FREE sang PRO và tất cả các công cụ pro sẽ được mở khóa ngay lập tức.
Bạn có thể di chuyển thanh nổi bằng cách đi tới Cài đặt và chọn một vị trí thanh bên khác — Trên, Dưới, Trái hoặc Phải. Bạn cũng có thể ẩn hoàn toàn thanh nổi bằng cách tắt nút chuyển "Hiển thị thanh nổi trên các trang" trong Cài đặt hoặc nhấn Ctrl+Shift+X bất kỳ lúc nào.
Không. DevSuite Pro không thu thập, theo dõi hoặc truyền tải bất kỳ dữ liệu duyệt web nào của bạn. Tất cả các cài đặt được lưu trữ cục bộ trong trình duyệt của bạn. Yêu cầu bên ngoài duy nhất được gửi trong quá trình kích hoạt mã giấy phép để xác minh mã của bạn với máy chủ của chúng tôi.
Có! DevSuite Pro có sẵn trên cả Cửa hàng Chrome trực tuyến và Tiện ích bổ sung Firefox. Nó hoạt động trên Chrome, Edge, Brave và các trình duyệt dựa trên Chromium khác, cũng như Firefox.