CC-Viewer

🌐 เว็บไซต์และทัวร์ฟีเจอร์: weiesky.github.io/cc-viewer — รองรับ 18 ภาษา.

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

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

วิธีใช้งาน

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

ตรวจสอบให้แน่ใจว่าติดตั้ง 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 มีเวอร์ชันไคลเอนต์ให้บริการด้วย: ลิงก์ดาวน์โหลด

การอัปเกรดเป็น 1.7.0 (รูปแบบ log v2)

ตั้งแต่เวอร์ชัน 1.7.0 เป็นต้นไป log จะถูกจัดเก็บในรูปแบบไดเรกทอรีต่อเซสชัน (wire-format v2) แทนไฟล์ .jsonl เดี่ยว ๆ ซึ่งใช้พื้นที่ดิสก์น้อยลงประมาณ 90% ไฟล์ .jsonl v1 ที่มีอยู่เดิมจะไม่ถูกแก้ไขหรือลบ กล่องโต้ตอบ log จะแสดงเซสชัน v2 เป็นค่าเริ่มต้น และมีรายการเล็ก ๆ ชื่อ “ดู log รุ่นเก่า (v1)” (แสดงตราบเท่าที่ยังมีไฟล์เก่าอยู่) ซึ่งเปิดมุมมอง v1 ที่สามารถดู ย้ายข้อมูล หรือลบได้ เมื่อเริ่มทำงาน cc-viewer จะเสนอการย้ายข้อมูลด้วยคลิกเดียวเมื่อพบ log รุ่นเก่า (แนะนำอย่างยิ่งเมื่อสนทนาต่อจากบทสนทนาเก่าด้วย claude -c ซึ่งครึ่งแรกอยู่ในไฟล์เก่า) คุณยังสามารถย้ายข้อมูลจากเทอร์มินัลได้ด้วย:

ccv convert <project>   # ย้ายข้อมูลหนึ่งโปรเจกต์
ccv convert --all       # ย้ายข้อมูลทุกโปรเจกต์
ccv verify <v1-file>    # ตรวจสอบไฟล์ v1 เทียบกับเซสชันที่แปลงแล้ว

หากเซสชันไม่ผ่านการตรวจสอบ golden ระบบจะพักไว้ใน sessions-quarantine/ เพื่อตรวจสอบ แทนที่จะทำให้การย้ายทั้งหมดล้มเหลว — เซสชันอื่น ๆ ยังคงย้ายตามปกติ

โหมด Logger

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

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

จะเปิดโพรเซส log โดยอัตโนมัติ และบันทึก log คำขอไปยังไดเรกทอรีต่อเซสชันภายใต้ ~/.claude/cc-viewer/yourproject/sessions/ (wire-format v2)

เริ่มโหมด 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 ของปลั๊กอินต่อไปได้

พรอมต์ระบบเฉพาะโมเดล

โมดัล แก้ไขพรอมต์ระบบ (เมนูแฮมเบอร์เกอร์ → แก้ไขพรอมต์ระบบ) ถูกแบ่งเป็นแท็บ:

แท็บ ค่าเริ่มต้น ยังคงพฤติกรรมแบบดั้งเดิม: เขียนไฟล์ CC_SYSTEM.md (เขียนทับ) หรือ CC_APPEND_SYSTEM.md (ต่อท้าย) ลงในเวิร์กสเปซปัจจุบัน และจะถูกฉีดเป็น --system-prompt-file / --append-system-prompt-file ในการเปิด ccv ครั้งถัดไป
แท็บโมเดล: คลิก + เพิ่มโมเดล พิมพ์ชื่อ เช่น opus หรือ Gemini3 แล้วเลือกขอบเขต — ส่วนกลาง (~/.claude/cc-viewer/system_prompt/ ใช้กับทุกเวิร์กสเปซ) หรือ เวิร์กสเปซ (<project>/system_prompt/) แต่ละแท็บมีสวิตช์ ต่อท้าย/เขียนทับ และตัวอย่าง Markdown ของตัวเอง
รายการจะถูกเก็บเป็นไฟล์ชื่อตัวพิมพ์ใหญ่: OPUS_SYSTEM.md (เขียนทับ) หรือ OPUS_APPEND_SYSTEM.md (ต่อท้าย) การจับคู่เป็นแบบคลุมเครือ — ใช้สตริงย่อยแบบไม่สนตัวพิมพ์เล็ก-ใหญ่ของรหัสโมเดลที่แปลงมาจากการตั้งค่าที่มีผลอยู่ในปัจจุบัน (การแมปโมเดลของ proxy profile บุคคลที่สามที่เปิดใช้งาน > ตัวแปรสภาพแวดล้อม ANTHROPIC_MODEL/CLAUDE_MODEL ตอนเปิด > model ใน settings.json; หากไม่มีสัญญาณการตั้งค่าจะไม่ฉีดรายการใด ๆ) ดังนั้น opus จึงจับคู่กับ claude-opus-4-8[1m] ได้ไม่ว่าจะเป็นเวอร์ชันใด การจับคู่ระดับเวิร์กสเปซชนะระดับส่วนกลาง; ภายในขอบเขตเดียวกันชื่อที่ยาวที่สุดจะชนะ; รายการที่จับคู่ได้จะแทนที่ไฟล์ค่าเริ่มต้นทั้งหมดสำหรับการเปิดครั้งนั้น ข้อจำกัดที่ทราบ: การสลับ proxy profile ระหว่างเซสชันจะจับคู่ใหม่หลังรีสตาร์ตเซสชัน claude เท่านั้น; แฟล็ก --model ที่ส่งผ่านอาร์กิวเมนต์เพิ่มเติมจะไม่ถูกนำมาพิจารณา
การบันทึกแท็บว่างจะลบรายการนั้น การสลับโมเดลระหว่างเซสชันจะมีผลในการเปิดใหม่ครั้งถัดไป ตั้งค่า CCV_DISABLE_AUTO_SYSTEM_PROMPT=1 เพื่อปิดการฉีดอัตโนมัติทั้งหมด คุณสามารถ commit <project>/system_prompt/ เพื่อแชร์พรอมต์กับทีม หรือเพิ่มลงใน .gitignore เพื่อเก็บไว้เป็นส่วนตัว

โหมด 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 เป็นแนวสำรอง

License

MIT

FilesExpand file tree

README.th.md

Latest commit

History