DevLensPro
DevLensPro là một tiện ích mở rộng trình duyệt kết nối trình duyệt của bạn và Claude Code, cho phép các nhà phát triển gỡ lỗi và sửa các thành phần giao diện người dùng ngay lập tức thông qua phân tích do AI cung cấp bằng tương tác Option+Click đơn giản.
https://www.devlens.pro/?ref=producthunt&utm_source=aipure
Thông tin Sản phẩm
Đã cập nhật:Feb 9, 2026
DevLensPro là gì
DevLensPro là một công cụ phát triển mã nguồn mở và miễn phí được thiết kế để hợp lý hóa quy trình gỡ lỗi và phát triển cho các ứng dụng web hiện đại. Nó đóng vai trò là cầu nối thông minh giữa trình duyệt web và Claude Code, cung cấp cho các nhà phát triển một cách liền mạch để xác định, phân tích và sửa các thành phần giao diện người dùng mà không cần chuyển đổi giữa các công cụ khác nhau hoặc viết mô tả lỗi dài dòng. Nền tảng này tích hợp với các ứng dụng React và hỗ trợ cả môi trường phát triển cục bộ và từ xa thông qua giao thức MCP (Model Context Protocol).
Các Tính năng Chính của DevLensPro
DevLensPro là một công cụ gỡ lỗi và phát triển dựa trên AI, tích hợp với Claude Code thông qua một tiện ích mở rộng Chrome. Nó cho phép các nhà phát triển Option+Click vào bất kỳ phần tử nào trong trình duyệt của họ để thu thập ngữ cảnh, ảnh chụp màn hình và thông tin phần tử, sau đó được đồng bộ hóa với Claude Code thông qua giao thức MCP để phân tích và sửa chữa ngay lập tức. Công cụ này hỗ trợ cả quy trình làm việc phát triển cục bộ và từ xa, bao gồm phát hiện thành phần React và hoạt động với Ralph để phát triển tự động.
Chọn phần tử bằng cách trỏ và nhấp: Option+Click vào bất kỳ phần tử nào để thu thập ngay lập tức ngữ cảnh đầy đủ của nó bao gồm CSS, HTML, ảnh chụp màn hình và thông tin thành phần React
Tích hợp giao thức MCP: Tích hợp gốc với Claude Code thông qua Giao thức Ngữ cảnh Mô hình, cho phép giao tiếp WebSocket theo thời gian thực và đồng bộ hóa tác vụ
Quản lý dự án dựa trên URL: Tự động ánh xạ các URL đến các thư mục dự án cục bộ, đảm bảo Claude Code luôn biết cơ sở mã nào cần chỉnh sửa
Kiến trúc ưu tiên quyền riêng tư: Hoạt động 100% cục bộ mà không cần các yêu cầu về đám mây, đảm bảo tất cả dữ liệu vẫn ở trên máy của bạn
Các Trường hợp Sử dụng của DevLensPro
Các phiên gỡ lỗi nhanh: Sửa lỗi CSS và các vấn đề về giao diện người dùng trong khoảng 10 phút bằng cách chỉ vào các phần tử bị hỏng và để Claude áp dụng các bản sửa lỗi ngay lập tức
Phát triển tính năng mới: Xây dựng toàn bộ các tính năng bằng cách sử dụng Ralph bằng cách chỉ vào giao diện người dùng hiện có để lấy ngữ cảnh và để Claude tạo khung mã mới (2-8 giờ cho mỗi tính năng)
Phát triển dự án đầy đủ: Khởi động các dự án mới hoặc xử lý các hoạt động tái cấu trúc phức tạp bằng cách cung cấp cho Claude sự hiểu biết đầy đủ về cơ sở mã thông qua kiểm tra phần tử
Ưu điểm
Quy trình làm việc gỡ lỗi nhanh hơn đáng kể (cải thiện tốc độ 5-10 lần)
Không cần chuyển đổi ngữ cảnh
Thu thập ngữ cảnh phần tử đầy đủ
Tập trung vào quyền riêng tư với phương pháp tiếp cận cục bộ trước tiên
Nhược điểm
Giới hạn ở tiện ích mở rộng trình duyệt Chrome
Yêu cầu tích hợp Claude Code
Mô hình giá dựa trên mã thông báo có thể không phù hợp với tất cả người dùng
Cách Sử dụng DevLensPro
Cài đặt Tiện ích mở rộng Chrome: Tải xuống và cài đặt tiện ích mở rộng DevLensPro Chrome ở Chế độ nhà phát triển
Cài đặt Máy chủ MCP: Chạy lệnh: npx -y @devlenspro/mcp-server install để định cấu hình máy chủ MCP và thiết lập tích hợp với Claude Code
Khởi động Máy chủ MCP: Chạy lệnh: devlens start để khởi chạy máy chủ MCP trên localhost:7007 cho chế độ phát triển cục bộ
Chọn Phần tử: Giữ phím Option và nhấp vào bất kỳ phần tử nào trong trình duyệt của bạn mà bạn muốn Claude phân tích hoặc sửa
Xem xét Ngữ cảnh Đã chụp: DevLensPro chụp chi tiết phần tử bao gồm HTML, CSS, ảnh chụp màn hình, nhật ký bảng điều khiển và thông tin thành phần React
Thêm Mô tả: Nhập mô tả của bạn về sự cố hoặc các thay đổi mong muốn và sử dụng AI Enhance để biết chi tiết nhiệm vụ có cấu trúc
Để Claude Sửa: Claude Code nhận ngữ cảnh thông qua giao thức MCP và tự động định vị mã có liên quan để sửa
Xem xét Thay đổi: Nếu sử dụng tác nhân tự trị Ralph, nó sẽ thực hiện sửa lỗi và tạo PR. Nếu không, hãy xem xét các thay đổi được đề xuất của Claude
Câu hỏi Thường gặp về DevLensPro
DevLensPro là một tiện ích mở rộng của trình duyệt kết nối với Claude Code, cho phép các nhà phát triển gỡ lỗi và sửa các vấn đề về giao diện người dùng bằng cách Option+Click vào các phần tử. Nó chụp ngữ cảnh, ảnh chụp màn hình và dữ liệu phần tử để giúp Claude hiểu và sửa các vấn đề về mã.
Bài viết phổ biến
Các Công Cụ AI Phổ Biến Nhất Năm 2025 | Bản Cập Nhật 2026 từ AIPURE
Feb 10, 2026
Moltbook AI: Mạng xã hội Dành cho AI Thuần túy Đầu tiên của Năm 2026
Feb 5, 2026
ThumbnailCreator: Công cụ AI giải quyết nỗi lo lắng về hình thu nhỏ trên YouTube của bạn (2026)
Jan 16, 2026
Kính thông minh AI 2026: Góc nhìn phần mềm về thị trường AI đeo được
Jan 7, 2026
Công cụ AI Mới nhất Tương tự DevLensPro
Gait
Gait là một công cụ hợp tác tích hợp việc tạo mã hỗ trợ AI với kiểm soát phiên bản, cho phép các nhóm theo dõi, hiểu và chia sẻ bối cảnh mã do AI tạo ra một cách hiệu quả.
invoices.dev
invoices.dev là một nền tảng lập hóa đơn tự động tạo hóa đơn trực tiếp từ các cam kết Git của các nhà phát triển, với khả năng tích hợp cho các dịch vụ GitHub, Slack, Linear và Google.
EasyRFP
EasyRFP là một bộ công cụ tính toán biên được hỗ trợ bởi AI giúp đơn giản hóa các phản hồi RFP (Yêu cầu đề xuất) và cho phép phân loại hình thái thực địa theo thời gian thực thông qua công nghệ học sâu.
Cart.ai
Cart.ai là một nền tảng dịch vụ dựa trên AI cung cấp các giải pháp tự động hóa doanh nghiệp toàn diện bao gồm lập trình, quản lý quan hệ khách hàng, chỉnh sửa video, thiết lập thương mại điện tử và phát triển AI tùy chỉnh với hỗ trợ 24/7.
Công cụ AI Phổ biến Giống DevLensPro
GitHub Copilot Chat
GitHub Copilot Chat là một trợ lý lập trình được hỗ trợ bởi AI cung cấp các tương tác bằng ngôn ngữ tự nhiên, các gợi ý mã theo thời gian thực, và hỗ trợ theo ngữ cảnh trực tiếp trong các IDE được hỗ trợ và GitHub.com.
CopilotForXcode
CopilotForXcode là một Tiện ích mở rộng Trình chỉnh sửa mã nguồn Xcode tích hợp GitHub Copilot, Codeium và ChatGPT để cung cấp các gợi ý mã được hỗ trợ bởi AI, hỗ trợ trò chuyện và chức năng từ prompt đến mã trong Xcode.
BrowserAI
BrowserAI là một thư viện mã nguồn mở cho phép chạy các Mô hình Ngôn ngữ Lớn (LLM) cục bộ trực tiếp trong trình duyệt web với khả năng tăng tốc WebGPU, cung cấp các khả năng AI tập trung vào quyền riêng tư mà không cần cơ sở hạ tầng máy chủ.
OpenAI Codex CLI
OpenAI Codex CLI là một coding agent mã nguồn mở, nhẹ, chạy trong terminal của bạn, cho phép các nhà phát triển dịch ngôn ngữ tự nhiên thành thực thi mã trong khi cung cấp khả năng suy luận ở cấp độ ChatGPT với khả năng chạy mã, thao tác tệp và lặp lại dưới sự kiểm soát phiên bản.