{"product_id":"preview-app-trong-claude-code-desktop-xem-kết-quả-trực-tiếp-khong-cần-mở-trinh-duyệt","title":"Preview App trong Claude Code Desktop: Xem kết quả trực tiếp không cần mở trình duyệt","description":"\n\u003cdiv class=\"video-embed\" style=\"position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;margin-bottom:2rem;\"\u003e\n  \u003ciframe src=\"https:\/\/www.youtube.com\/embed\/UCD7Hnx_THQ\" title=\"Preview your running app in Claude Code on desktop\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\"\u003e\u003c\/iframe\u003e\n\u003c\/div\u003e\n\u003cp\u003e\u003cem\u003eVideo chính thức từ kênh Anthropic — \"Preview your running app in Claude Code on desktop\" (1m16s). Demo tính năng preview app trực tiếp trong Claude Code Desktop.\u003c\/em\u003e\u003c\/p\u003e\n\n\u003ch2\u003eVấn đề cũ: Context switching liên tục\u003c\/h2\u003e\n\u003cp\u003eTrước khi có tính năng này, workflow điển hình khi dùng Claude Code để xây app trông như thế này:\u003c\/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eNhờ Claude Code viết component hoặc sửa bug\u003c\/li\u003e\n  \u003cli\u003eClaude chạy \u003ccode\u003enpm run dev\u003c\/code\u003e hoặc dev server tương đương\u003c\/li\u003e\n  \u003cli\u003eBạn phải \u003cem\u003enhớ\u003c\/em\u003e địa chỉ localhost (ví dụ \u003ccode\u003ehttp:\/\/localhost:5173\u003c\/code\u003e)\u003c\/li\u003e\n  \u003cli\u003eMở trình duyệt, gõ địa chỉ, kiểm tra kết quả\u003c\/li\u003e\n  \u003cli\u003eThấy vấn đề, quay lại terminal Claude Code để mô tả\u003c\/li\u003e\n  \u003cli\u003eLặp lại từ bước 1\u003c\/li\u003e\n\u003c\/ol\u003e\n\n\u003cp\u003eVới những vòng lặp nhanh (hot reload mỗi vài giây), việc liên tục chuyển qua lại giữa terminal và trình duyệt tốn thời gian và làm gián đoạn tư duy. Tính năng Preview giải quyết điều này.\u003c\/p\u003e\n\n\u003ch2\u003ePreview hoạt động như thế nào\u003c\/h2\u003e\n\u003cp\u003eKhi Claude Code Desktop phát hiện một dev server đang chạy (dựa trên output terminal như \"Server running on port 3000\" hoặc \"Local: http:\/\/localhost:5173\"), nó tự động hiển thị một panel preview nhúng ngay trong giao diện desktop.\u003c\/p\u003e\n\n\u003cp\u003ePanel này về cơ bản là một browser nhỏ nhúng trong app — bạn thấy app đang chạy, có thể click, cuộn, và tương tác với nó. Khi Claude Code thay đổi code và dev server hot-reload, preview cũng cập nhật tự động.\u003c\/p\u003e\n\n\u003ch3\u003eCác loại dev server được hỗ trợ\u003c\/h3\u003e\n\u003cp\u003ePreview hoạt động với hầu hết các dev server phổ biến:\u003c\/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eVite\u003c\/strong\u003e (React, Vue, Svelte, Vanilla JS) — phổ biến nhất hiện nay\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eNext.js\u003c\/strong\u003e (\u003ccode\u003enext dev\u003c\/code\u003e)\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eCreate React App\u003c\/strong\u003e (\u003ccode\u003ereact-scripts start\u003c\/code\u003e)\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eNuxt.js\u003c\/strong\u003e (\u003ccode\u003enuxt dev\u003c\/code\u003e)\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eSvelteKit\u003c\/strong\u003e (\u003ccode\u003evite dev\u003c\/code\u003e)\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eExpress\/Fastify\u003c\/strong\u003e với static file serving\u003c\/li\u003e\n  \u003cli\u003eBất kỳ server nào expose HTTP trên localhost\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch2\u003eCách dùng Preview trong thực tế\u003c\/h2\u003e\n\n\u003ch3\u003eWorkflow cơ bản\u003c\/h3\u003e\n\u003cp\u003eBạn không cần làm gì đặc biệt để kích hoạt Preview — chỉ cần nhờ Claude Code khởi động dev server như bình thường:\u003c\/p\u003e\n\n\u003cblockquote\u003e\n  \u003cp\u003e\"Tạo cho tôi một landing page React đơn giản với hero section và CTA button. Chạy dev server để tôi xem.\"\u003c\/p\u003e\n\u003c\/blockquote\u003e\n\n\u003cp\u003eClaude Code sẽ tạo code, chạy \u003ccode\u003enpm run dev\u003c\/code\u003e, và ngay lập tức panel Preview xuất hiện bên phải giao diện. Bạn thấy landing page ngay trong cùng cửa sổ với conversation.\u003c\/p\u003e\n\n\u003ch3\u003eVòng lặp chỉnh sửa nhanh\u003c\/h3\u003e\n\u003cp\u003eĐây là nơi Preview thực sự tỏa sáng. Ví dụ một session điển hình:\u003c\/p\u003e\n\n\u003col\u003e\n  \u003cli\u003ePreview hiển thị landing page vừa tạo\u003c\/li\u003e\n  \u003cli\u003eBạn thấy màu button chưa ổn: \"Đổi màu CTA button sang xanh lá #22c55e, bo tròn nhiều hơn\"\u003c\/li\u003e\n  \u003cli\u003eClaude sửa CSS, Vite hot-reload, Preview cập nhật trong vòng dưới 1 giây\u003c\/li\u003e\n  \u003cli\u003eBạn thấy ngay kết quả và tiếp tục: \"Thêm animation fade-in cho hero text\"\u003c\/li\u003e\n  \u003cli\u003eCứ thế tiếp tục — không cần rời khỏi Claude Code Desktop\u003c\/li\u003e\n\u003c\/ol\u003e\n\n\u003ch3\u003eDebug trực tiếp từ Preview\u003c\/h3\u003e\n\u003cp\u003eNếu thấy lỗi render hoặc layout issue, bạn có thể mô tả trực tiếp những gì thấy trong Preview:\u003c\/p\u003e\n\n\u003cblockquote\u003e\n  \u003cp\u003e\"Trong Preview, tôi thấy hero image bị tràn ra ngoài viewport ở bên phải. Sửa lại.\"\u003c\/p\u003e\n\u003c\/blockquote\u003e\n\n\u003cp\u003eVì Claude Code nhìn thấy cùng Preview với bạn (nó có thể chụp screenshot từ panel), nó hiểu chính xác vấn đề mà không cần bạn mô tả chi tiết.\u003c\/p\u003e\n\n\u003ch2\u003ePreview với mobile responsive\u003c\/h2\u003e\n\u003cp\u003eMột tính năng hay là bạn có thể resize panel Preview để kiểm tra responsive design. Kéo edge của panel để thay đổi width, hoặc dùng các preset breakpoint:\u003c\/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eDesktop:\u003c\/strong\u003e 1280px (mặc định)\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eTablet:\u003c\/strong\u003e 768px\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eMobile:\u003c\/strong\u003e 375px (iPhone SE)\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eCustom:\u003c\/strong\u003e Gõ bất kỳ width nào\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003eĐiều này giúp bạn kiểm tra responsive ngay trong vòng lặp phát triển mà không cần dùng DevTools của trình duyệt.\u003c\/p\u003e\n\n\u003ch2\u003eKhi nào Preview không hiện?\u003c\/h2\u003e\n\u003cp\u003ePreview chỉ hiện khi dev server đang thực sự chạy và accessible. Một số lý do Preview có thể không xuất hiện:\u003c\/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003eDev server chưa hoàn tất khởi động (thường mất 2-5 giây cho lần đầu)\u003c\/li\u003e\n  \u003cli\u003ePort conflict (port đã bị chiếm bởi process khác)\u003c\/li\u003e\n  \u003cli\u003eApp crash ngay sau khi start (lỗi runtime)\u003c\/li\u003e\n  \u003cli\u003eBackend API server không có UI (Preview chỉ dành cho web apps)\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003eTrong các trường hợp này, Claude Code sẽ hiển thị lỗi trong terminal và bạn có thể nhờ nó debug.\u003c\/p\u003e\n\n\u003ch2\u003eSo sánh với workflow truyền thống\u003c\/h2\u003e\n\n\u003ctable style=\"width:100%;border-collapse:collapse;margin:1.5rem 0;\"\u003e\n  \u003cthead\u003e\n    \u003ctr style=\"background:#f1f5f9;\"\u003e\n      \u003cth style=\"padding:10px;text-align:left;border:1px solid #e2e8f0;\"\u003eAspect\u003c\/th\u003e\n      \u003cth style=\"padding:10px;text-align:left;border:1px solid #e2e8f0;\"\u003eKhông có Preview\u003c\/th\u003e\n      \u003cth style=\"padding:10px;text-align:left;border:1px solid #e2e8f0;\"\u003eCó Preview\u003c\/th\u003e\n    \u003c\/tr\u003e\n  \u003c\/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eXem kết quả\u003c\/td\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eChuyển sang trình duyệt\u003c\/td\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eNgay trong app\u003c\/td\u003e\n    \u003c\/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eMô tả lỗi\u003c\/td\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eGõ mô tả text\u003c\/td\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eClaude \"thấy\" trực tiếp\u003c\/td\u003e\n    \u003c\/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eTest responsive\u003c\/td\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eCần mở DevTools\u003c\/td\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eResize panel trực tiếp\u003c\/td\u003e\n    \u003c\/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eTốc độ iteration\u003c\/td\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eChậm hơn\u003c\/td\u003e\n      \u003ctd style=\"padding:10px;border:1px solid #e2e8f0;\"\u003eNhanh hơn 2-3x\u003c\/td\u003e\n    \u003c\/tr\u003e\n  \u003c\/tbody\u003e\n\u003c\/table\u003e\n\n\u003ch2\u003eMẹo để dùng Preview hiệu quả nhất\u003c\/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eDùng màn hình rộng hoặc dual monitor:\u003c\/strong\u003e Preview cần không gian để hiển thị đủ lớn. Trên màn hình 27\"+ hoặc dual monitor, bạn có thể để conversation và preview song song thoải mái.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eĐể dev server chạy suốt session:\u003c\/strong\u003e Đừng tắt dev server giữa chừng trừ khi cần. Claude Code quản lý process tự động.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eMô tả vị trí chính xác khi báo lỗi:\u003c\/strong\u003e \"Ở góc trên bên phải của card sản phẩm\" tốt hơn \"cái gì đó bị sai\".\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eDùng Preview để validate trước khi commit:\u003c\/strong\u003e Sau khi Claude hoàn thành feature, kiểm tra kỹ trong Preview trước khi commit và deploy.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003eTính năng Preview là bước tiến quan trọng trong việc biến Claude Code Desktop thành một môi trường phát triển hoàn chỉnh — nơi bạn không chỉ chat về code mà thực sự \u003cem\u003ethấy\u003c\/em\u003e và \u003cem\u003etương tác\u003c\/em\u003e với kết quả ngay lập tức.\u003c\/p\u003e\n","brand":"Minh Tuấn","offers":[{"title":"Default Title","offer_id":47722601775316,"sku":null,"price":0.0,"currency_code":"VND","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0821\/0264\/9044\/files\/preview-app-trong-claude-code-desktop-xem-k_t-qu_-tr_c-ti_p-khong-c_n-m_-trinh-duy_t.jpg?v=1774526772","url":"https:\/\/claude.vn\/products\/preview-app-trong-claude-code-desktop-xem-k%e1%ba%bft-qu%e1%ba%a3-tr%e1%bb%b1c-ti%e1%ba%bfp-khong-c%e1%ba%a7n-m%e1%bb%9f-trinh-duy%e1%bb%87t","provider":"CLAUDE.VN","version":"1.0","type":"link"}