Bộ công cụ Nhà phát triển tối thượng dành cho Thiết kế và Phát triển Web

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.

Tất cả Yêu thích Kiểm tra Chụp ảnh Đo lường index.popup_tab_analyse
CSS Inspector
Kiểm tra hoạt ảnh
Sao chép dưới dạng Tailwind
Chỉ chế độ Outline
Trình trợ giúp Tailwind
Trình tạo Outline trang
Trình phát hiện thành phần
Di chuyển phần tử
Xóa/Ẩn phần tử
Xuất phần tử
Sao chép thành phần
Chụp màn hình
Trích xuất hình ảnh
SVG Grabber
Thay thế hình ảnh
Trình tạo mã QR
Cách bắt đầu

Bắt đầu sử dụng DevSuite Pro chỉ trong vài cú nhấp chuột

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.

Thêm tiện ích vào Chrome

  1. Mở Cửa hàng Chrome trực tuyến và tìm kiếm tiện ích "DevSuite Pro".
  2. 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.

Mở trang web và khởi chạy công cụ

  1. Truy cập bất kỳ trang web nào, sau đó nhấp vào biểu tượng DevSuite Pro trên thanh công cụ hoặc sử cả dụng thanh nổi trên trang.
  2. Chọn bất kỳ công cụ nào từ lưới. Các công cụ như CSS Inspector, Thước kẻ hoặc Trình chọn màu sẽ kích hoạt ngay lập tức trên trang hiện tại.
Tính năng tiện ích

Các tính năng chính của DevSuite Pro

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.

CSS Inspector

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 →

Trình kiểm tra phần tử

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 →

Thước kẻ và Đường dẫn

Đ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 →

Trình chọn màu (Color Picker)

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

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 →

Trình kiểm tra phản hồi

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 →
Khám phá thêm các công cụ chi tiết:
Trình kiểm tra CSS MIỄN PHÍ

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/Ẩn phần tử MIỄN PHÍ

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…

Trình tạo mã QR MIỄN PHÍ

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 trang MIỄN PHÍ

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 MIỄN PHÍ

Đ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ó.

Trình kiểm tra SEO MIỄN PHÍ

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.

Bộ chọn màu MIỄN PHÍ

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.

Bảng màu MIỄN PHÍ

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.

Trình ghi Console MIỄN PHÍ

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).

Hiệu suất trang MIỄN PHÍ

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 JSON MIỄN PHÍ

Đị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 (&lt; &gt…

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).

64 Image &harr; Base64 MIỄN PHÍ

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.

JWT Debugger MIỄN PHÍ

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…

UUID Generator MIỄN PHÍ

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.

Hash Generator MIỄN PHÍ

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.

Password Generator MIỄN PHÍ

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 CORS MIỄN PHÍ

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.

Tìm Ảnh Lỗi MIỄN PHÍ

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 XML MIỄN PHÍ

Đị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.

Định Dạng SQL MIỄN PHÍ

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…

Giá cả và Gói dịch vụ

Giá cả đơn giản và minh bạch

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ơ bản

Hoàn hảo để trải nghiệm DevSuite Pro. Không yêu cầu thẻ tín dụng.

$0

Miễn phí mãi mãi
Bắt đầu miễn phí
  • 43 công cụ dành cho nhà phát triển miễn phí
  • CSS Inspector và Trình chọn màu
  • Chụp ảnh màn hình
  • Giao diện thanh nổi
  • Tất cả các cập nhật miễn phí trong tương lai

Hàng tháng Phổ biến nhất

Truy cập đầy đủ vào tất cả hơn 64 công cụ chuyên nghiệp. Thanh toán hàng tháng.

$2.99

mỗi tháng
Bắt đầu gói hàng tháng
  • Tất cả hơn 64 công cụ dành cho nhà phát triển
  • Truy cập đầy đủ vào các công cụ Pro
  • Lên đến 3 thiết bị
  • Hỗ trợ ưu tiên
  • Hủy bất cứ lúc nào

Một lần Giá trị tốt nhất

Thanh toán một lần, sử dụng mãi mãi. Truy cập đầy đủ vào tất cả hơn 64 công cụ Pro mà không mất phí đăng ký.

$29.99

thanh toán một lần
Mua một lần, sử dụng mãi mãi
  • Tất cả hơn 64 công cụ dành cho nhà phát triển
  • Truy cập đầy đủ vào các công cụ Pro
  • Lên đến 3 thiết bị
  • Hỗ trợ ưu tiên
  • Không có phí định kỳ luôn
DevSuite Pro FAQ section background
Câu hỏi thường gặp

Các câu hỏi thường gặp từ người dùng DevSuite Pro

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.

Làm cách nào để cài đặt DevSuite Pro?

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.

Sự khác biệt giữa các công cụ Miễn phí và Pro là gì?

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.

Tại sao công cụ không hoạt động trên một số trang web?

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.

Các thay đổi tôi thực hiện trên trang có phải là vĩnh viễn không?

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.

Làm cách nào để kích hoạt giấy phép Pro của tôi?

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.

Làm cách nào để di chuyển hoặc ẩn thanh nổi?

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.

DevSuite Pro có thu thập dữ liệu duyệt web không?

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.

Tôi có thể sử dụng DevSuite Pro trong Firefox không?

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.