README.th.md

CC-Viewer

เครื่องมือ Vibe Coding ที่สร้างบน Claude Code ซึ่งกลั่นกรองจากประสบการณ์การพัฒนาของผู้เขียนเอง:

1. ยกระดับเพดานความสามารถ — สามารถรัน /ultraPlan และ /ultraReview แบบโลคัล พร้อมหลีกเลี่ยงไม่ให้โค้ดโปรเจกต์ถูกเปิดเผยต่อคลาวด์ของ Claude ทั้งหมด
2. รองรับหลายอุปกรณ์พร้อมกัน — สามารถเขียนโปรแกรมบนอุปกรณ์มือถือ (ภายในเครือข่ายภายใน) เวอร์ชันเว็บปรับตัวเข้ากับสถานการณ์ต่าง ๆ ฝังในส่วนขยายเบราว์เซอร์หรือแบ่งหน้าจอของระบบปฏิบัติการได้ง่าย และยังมีแพ็กเกจติดตั้งแบบเนทีฟให้บริการ
3. บันทึก log อย่างครบถ้วน — ให้ความสามารถดักจับและวิเคราะห์ payload เต็มรูปแบบของ claude code เหมาะสำหรับการบันทึก log, วิเคราะห์ปัญหา, เรียนรู้และศึกษา, และวิศวกรรมย้อนกลับ
4. แบ่งปันประสบการณ์การเรียนรู้ — รวบรวมเอกสารการเรียนรู้และประสบการณ์การพัฒนาไว้มากมาย (ดูได้ที่ไอคอน "?" ตามจุดต่าง ๆ ในระบบ)
5. คงประสบการณ์เดิมไว้ — เพียงเสริมความสามารถของ claude code โดยไม่แก้ไขแกนกลางในเชิงสาระ คงประสบการณ์เนทีฟไว้
6. รองรับโมเดลของบุคคลที่สาม — รองรับ deepseek-v4-*, GLM 5.1, Kimi K2.6 มาพร้อมความสามารถ cc-switch ในตัว สามารถสลับเครื่องมือของบุคคลที่สามได้ตลอดเวลา

English | 简体中文 | 繁體中文 | 한국어 | 日本語 | Deutsch | Español | Français | Italiano | Dansk | Polski | Русский | العربية | Norsk | Português (Brasil) | ไทย | Türkçe | Українська

วิธีใช้งาน

ข้อกำหนดเบื้องต้น

• ตรวจสอบให้แน่ใจว่าติดตั้ง nodejs 20.0.0+ แล้ว; ดาวน์โหลดและติดตั้ง
• ตรวจสอบให้แน่ใจว่าติดตั้ง claude code แล้ว; คู่มือการติดตั้ง

ติดตั้ง ccv

ติดตั้งผ่าน npm

npm install -g cc-viewer --registry=https://registry.npmjs.org

ติดตั้งผ่าน Homebrew (แนะนำสำหรับ macOS / Linux)

brew tap weiesky/cc-viewer
brew install cc-viewer
brew upgrade cc-viewer   # ใช้คำสั่งนี้ในการอัปเกรด — ccv ที่ติดตั้งผ่าน brew ห้ามอัปเกรดด้วย npm install -g

วิธีเริ่มใช้งาน

ccv คือตัวแทนของ claude โดยตรง พารามิเตอร์ทั้งหมดจะถูกส่งต่อให้ claude พร้อมกับเปิด Web Viewer

ccv                    # == claude (โหมดโต้ตอบ)

คำสั่งที่ผู้เขียนใช้บ่อยที่สุดคือ

ccv -c --d             # == claude --continue --dangerously-skip-permissions
                       # ccv ส่งต่อพารามิเตอร์เริ่มต้นทั้งหมดของ claude code คุณสามารถผสมผสานใช้ได้ตามใจชอบ

หลังจากเริ่มโหมดเขียนโปรแกรมแล้ว เว็บเพจจะเปิดขึ้นโดยอัตโนมัติ

cc-viewer มีเวอร์ชันไคลเอนต์ให้บริการด้วย: ลิงก์ดาวน์โหลด

โหมด Logger

หากคุณยังคุ้นเคยกับการใช้เครื่องมือเนทีฟของ claude หรือปลั๊กอินของ VS code โปรดใช้โหมดนี้

ในโหมดนี้ การเริ่ม claude

จะเปิดโพรเซส log โดยอัตโนมัติ และบันทึก log คำขอไปยัง ~/.claude/cc-viewer/yourproject/date.jsonl

เริ่มโหมด logger:

ccv -logger

เมื่อคอนโซลไม่สามารถพิมพ์พอร์ตเฉพาะได้ พอร์ตเริ่มต้นแรกคือ 127.0.0.1:7008 หากมีหลายอินสแตนซ์พร้อมกันจะใช้พอร์ตถัดไปเรื่อย ๆ เช่น 7009, 7010

ถอนการติดตั้งโหมด logger:

ccv --uninstall

การแก้ปัญหาที่พบบ่อย (Troubleshooting)

หากคุณพบปัญหาที่ไม่สามารถเริ่มได้ มีวิธีตรวจสอบขั้นสูงสุดดังนี้: ขั้นที่ 1: เปิด claude code ในไดเรกทอรีใดก็ได้ ขั้นที่ 2: ให้คำสั่งกับ claude code ดังนี้:

我已经安装了cc-viewer这个npm包，但是执行ccv以后仍然无法有效运行。查看cc-viewer的cli.js 和 findcc.js，根据具体的环境，适配本地的claude code的部署方式。适配的时候修改范围尽量约束在findcc.js中。

การให้ Claude Code ตรวจสอบข้อผิดพลาดด้วยตัวเองนั้นมีประสิทธิภาพมากกว่าการปรึกษาใครหรืออ่านเอกสารใด ๆ!

หลังจากดำเนินการคำสั่งข้างต้นเสร็จแล้ว findcc.js จะได้รับการอัปเดต หากโปรเจกต์ของคุณจำเป็นต้องดีพลอยแบบโลคัลบ่อยครั้ง หรือโค้ดที่ fork ออกไปต้องแก้ปัญหาการติดตั้งบ่อย ๆ การเก็บไฟล์นี้ไว้จะมีประโยชน์ ครั้งต่อไปก็คัดลอกไฟล์ไปใช้ได้เลย ในปัจจุบันโปรเจกต์และบริษัทจำนวนมากที่ใช้ claude code ไม่ได้ดีพลอยบน mac แต่ดีพลอยแบบโฮสต์บนเซิร์ฟเวอร์ ผู้เขียนจึงแยก findcc.js ออกมาเป็นไฟล์ต่างหาก เพื่อให้ติดตามการอัปเดตซอร์สโค้ดของ cc-viewer ต่อไปได้สะดวก

หมายเหตุ: แอปพลิเคชันนี้ขัดแย้งกับ claude-code-switch และ claude-code-router เนื่องจากปัญหาการแย่ง proxy ดังนั้นเมื่อใช้งานต้องปิด claude-code-switch และ claude-code-router อย่างแน่นอน ภายใน cc-viewer มีฟังก์ชันการอัปเดต proxy แบบ hot-reload ให้ใช้แทนได้

คำสั่งช่วยเหลืออื่น ๆ

ดู:

ccv -h

โหมดเงียบ (Silent Mode)

โดยค่าเริ่มต้น ccv อยู่ในโหมดเงียบเมื่อห่อหุ้ม claude ทำให้เอาต์พุตของเทอร์มินัลยังคงเรียบร้อยและสอดคล้องกับประสบการณ์เนทีฟ log ทั้งหมดจะถูกจับในเบื้องหลังและสามารถดูได้ที่ http://localhost:7008

หลังจากตั้งค่าเสร็จแล้ว ใช้คำสั่ง claude ตามปกติได้เลย เข้าชม http://localhost:7008 เพื่อดูอินเทอร์เฟซการมอนิเตอร์

คุณสมบัติ

โหมดเขียนโปรแกรม

หลังจากเริ่มใช้งานด้วย ccv คุณจะเห็น:

คุณสามารถดู diff ของโค้ดได้ทันทีหลังจากแก้ไขเสร็จ:

แม้คุณจะเปิดไฟล์และเขียนโปรแกรมด้วยตัวเองได้ แต่ไม่แนะนำให้เขียนเอง นั่นคือการเขียนโปรแกรมแบบโบราณ!

การเขียนโปรแกรมบนมือถือ

คุณยังสามารถสแกน QR เพื่อเขียนโปรแกรมบนอุปกรณ์มือถือได้:

ตอบโจทย์จินตนาการเกี่ยวกับการเขียนโปรแกรมบนมือถือของคุณ นอกจากนี้ยังมีกลไกปลั๊กอิน หากคุณต้องการปรับแต่งให้ตรงกับนิสัยการเขียนโปรแกรมของตัวเอง สามารถติดตามการอัปเดต hooks ของปลั๊กอินต่อไปได้

โหมด Logger (ดูเซสชันที่สมบูรณ์ของ claude code)

• ดักจับคำขอ API ทั้งหมดที่ Claude Code ส่งออกแบบเรียลไทม์ รับรองว่าเป็นข้อความต้นฉบับ ไม่ใช่ log ที่ถูกตัดทอน (สิ่งนี้สำคัญมาก!!!)
• ระบุและทำเครื่องหมายคำขอของ Main Agent และ Sub Agent โดยอัตโนมัติ (ชนิดย่อย: Plan, Search, Bash)
• คำขอของ MainAgent รองรับ Body Diff JSON แสดงผลต่างจากคำขอ MainAgent ก่อนหน้าแบบพับเก็บไว้ (แสดงเฉพาะฟิลด์ที่เปลี่ยน/เพิ่มใหม่)
• แต่ละคำขอแสดงสถิติการใช้ Token แบบ inline (Token อินพุต/เอาต์พุต, การสร้าง/อ่านแคช, อัตราการ hit)
• รองรับ Claude Code Router (CCR) และสถานการณ์พร็อกซีอื่น ๆ — ใช้การจับคู่รูปแบบเส้นทาง API เป็นแนวสำรอง

โหมดบทสนทนา

คลิกปุ่ม "โหมดบทสนทนา" ที่มุมขวาบน เพื่อแยกประวัติบทสนทนาเต็มของ Main Agent ออกเป็นอินเทอร์เฟซแชต:

• ยังไม่รองรับการแสดง Agent Team
• ข้อความของผู้ใช้จัดชิดขวา (ฟองสีฟ้า) คำตอบของ Main Agent จัดชิดซ้าย (ฟองสีเข้ม)
• บล็อก thinking จะพับเก็บโดยค่าเริ่มต้น แสดงผลด้วย Markdown คลิกเพื่อขยายดูกระบวนการคิด; รองรับการแปลด้วยคลิกเดียว (ฟีเจอร์ยังไม่เสถียร)
• ข้อความเลือกของผู้ใช้ (AskUserQuestion) แสดงในรูปแบบถาม-ตอบ
• การซิงค์โหมดสองทิศทาง: เมื่อสลับไปยังโหมดบทสนทนาจะเลื่อนไปยังบทสนทนาที่ตรงกับคำขอที่เลือกโดยอัตโนมัติ; เมื่อสลับกลับไปยังโหมดต้นฉบับจะเลื่อนไปยังคำขอที่เลือกโดยอัตโนมัติ
• แผงการตั้งค่า: สามารถสลับสถานะการพับเก็บเริ่มต้นของผลลัพธ์เครื่องมือและบล็อก thinking ได้
• การเรียกดูบทสนทนาบนมือถือ: ในโหมด CLI บนมือถือ แตะปุ่ม "การเรียกดูบทสนทนา" บนแถบด้านบน จะปรากฏมุมมองบทสนทนาแบบอ่านอย่างเดียวเลื่อนออกมา เพื่อเรียกดูประวัติบทสนทนาที่สมบูรณ์บนมือถือ

การจัดการ log

ผ่านเมนูแบบดรอปดาวน์ของ CC-Viewer ที่มุมซ้ายบน:

การบีบอัด log เกี่ยวกับส่วน log นี้ ผู้เขียนต้องแจ้งว่า ผู้เขียนยืนยันว่าไม่ได้แก้ไขนิยามอย่างเป็นทางการของ anthropic เพื่อรับประกันความสมบูรณ์ของ log อย่างไรก็ตาม เนื่องจาก log แต่ละรายการของ 1M opus ในช่วงหลังมีขนาดใหญ่มาก เพราะผู้เขียนได้ใช้การปรับปรุง log สำหรับ MainAgent บางอย่าง จึงสามารถลดขนาดได้อย่างน้อย 66% โดยไม่ต้องใช้ gzip วิธีการแยกวิเคราะห์ log ที่บีบอัดนี้สามารถสกัดออกมาจากรีโพปัจจุบันได้

ฟังก์ชันที่สะดวกและมีประโยชน์เพิ่มเติม

คุณสามารถระบุตำแหน่ง prompt ได้อย่างรวดเร็วผ่านเครื่องมือในแถบด้านข้าง

---

KV-Cache-Text ที่น่าสนใจ ช่วยให้คุณเห็นสิ่งที่ Claude เห็น

---

คุณสามารถอัปโหลดรูปภาพและบอกความต้องการของคุณได้ ความสามารถในการเข้าใจรูปภาพของ Claude นั้นทรงพลังมาก และอย่างที่คุณรู้ คุณสามารถจับภาพหน้าจอแล้ววางด้วย Ctrl + V ได้โดยตรง เนื้อหาทั้งหมดจะแสดงในบทสนทนา

---

คุณสามารถปรับแต่งปลั๊กอินได้โดยตรง จัดการโพรเซสทั้งหมดของ cc-viewer และ cc-viewer ยังมีความสามารถในการสลับ API ของบุคคลที่สามแบบ hot switch (ใช่ คุณสามารถใช้ GLM, Kimi, MiniMax, Qwen, DeepSeek ได้ แม้ผู้เขียนจะคิดว่าตอนนี้ทั้งหมดยังอ่อนแอมาก)

---

ยังมีฟีเจอร์อีกมากรอให้คุณค้นพบ... เช่น: ระบบนี้รองรับ Agent Team และมี Code Reviewer ในตัว กำลังจะรองรับการนำ Code Reviewer ของ Codex เข้ามาในเร็ว ๆ นี้ (ผู้เขียนแนะนำอย่างยิ่งให้ใช้ Codex รีวิวโค้ดให้ Claude Code)

License

MIT