MeowmentDebugTool/Packages/com.bywaystudios.meowmentdebugtool/CONSOLE_QUICK_SETUP.md

Console模块快速设置指南

🚀 5分钟快速设置

步骤1: 创建Console页面GameObject

在UniversalDebugTool的预制件中，创建以下结构：

[添加到ContentContainer下]
└── ConsolePage
    ├── ControlPanel
    │   ├── ClearButton (Button)
    │   ├── LockScrollToggle (Toggle + Label)
    │   ├── Spacer (Empty GameObject + LayoutElement)
    │   ├── InfoToggle (Toggle + Label)
    │   ├── WarningToggle (Toggle + Label)
    │   ├── ErrorToggle (Toggle + Label)
    │   └── FatalToggle (Toggle + Label)
    │
    ├── LogArea
    │   └── LogScrollView (ScrollRect)
    │       └── Viewport
    │           └── Content (VerticalLayoutGroup)
    │
    └── DetailArea
        └── DetailScrollView (ScrollRect)
            └── Viewport
                └── Content
                    └── DetailText (TMP_Text)

步骤2: 配置组件

ConsolePage

• RectTransform: Stretch (全屏)
• 默认禁用（Active = false）

ControlPanel

• Height: 50
• Add Component: HorizontalLayoutGroup
  • Padding: 10, 10, 10, 10
  • Spacing: 10
  • Child Force Expand: 都不勾选

Spacer (占位符)

• Add Component: LayoutElement
  • Flexible Width: 1

LogArea

• Height: 60% (~400)
• Add Component: VerticalLayoutGroup

LogScrollView

• Add Component: ScrollRect
  • Content: LogContent
  • Vertical: ✅
  • Horizontal: ❌
  • Scrollbar Visibility: Auto Hide And Expand Viewport

LogContent

• Add Component: VerticalLayoutGroup
  • Child Alignment: Upper Center
  • Spacing: 2
  • Child Control Size: Height ✅
  • Child Force Expand: Width ✅
• Add Component: ContentSizeFitter
  • Vertical Fit: Preferred Size

DetailArea

• Height: 40% (~200)

DetailScrollView

• 同LogScrollView配置

DetailText

• Font Size: 14
• Color: White
• Alignment: Top Left
• Overflow: Overflow
• Wrapping: Enabled
• Rich Text: ✅

步骤3: 创建日志项预制件

创建一个新的预制件 ConsoleLogItem:

LogItem
├── Toggle (Toggle组件)
│   - Is On: false
│   - Transition: None或Fade
│
├── Background (Image)
│   - Color: (30, 30, 30, 255)
│
└── Label (TextMeshPro)
    - Font Size: 12
    - Color: White
    - Alignment: Middle Left
    - Overflow: Truncate
    - Rich Text: ✅

组件设置：

• RectTransform:
  • Anchor: Stretch Horizontal
  • Height: 25
  • Left: 0, Right: 0
• Toggle:
  • Target Graphic: Background
  • Graphic: Background

步骤4: 配置UniversalDebugTool

在Inspector中找到 [控制台页面] 部分，拖拽对应的对象：

✅ Console Page → ConsolePage
✅ Console Log Scroll Rect → LogScrollView
✅ Console Log Content → LogContent
✅ Console Detail Scroll Rect → DetailScrollView
✅ Console Detail Text → DetailText
✅ Console Clear Button → ClearButton
✅ Console Lock Scroll Toggle → LockScrollToggle
✅ Console Info Filter Toggle → InfoToggle
✅ Console Warning Filter Toggle → WarningToggle
✅ Console Error Filter Toggle → ErrorToggle
✅ Console Fatal Filter Toggle → FatalToggle
✅ Console Log Item Prefab → ConsoleLogItem预制件

步骤5: 测试

// 在游戏开始时调用
UniversalDebugTool.Init();

// 测试日志
Debug.Log("这是一条Info日志");
Debug.LogWarning("这是一条Warning日志");
Debug.LogError("这是一条Error日志");

运行游戏，点击调试工具，切换到"控制台"标签页，应该能看到日志了！

🎨 样式建议

颜色方案（深色主题）

Background: (20, 20, 20)
ControlPanel: (40, 40, 40)
LogItem: (30, 30, 30)
LogItem Selected: (60, 60, 60)
Text: (220, 220, 220)

日志颜色：
Info: White (255, 255, 255)
Warning: Yellow (255, 235, 0)
Error: Red (255, 80, 80)
Fatal: Dark Red (180, 50, 50)

字体大小

ControlPanel按钮: 14
Toggle标签: 12
日志项: 11-12
详情文本: 13-14

间距

ControlPanel Spacing: 10
LogContent Spacing: 2
Padding: 10

⚡ 性能优化提示

1. 限制可见日志项: 调整LogArea高度，减少同时渲染的日志数量
2. 日志项高度: 25-30像素最佳，太高会影响滚动性能
3. 最大日志数: 默认500行，可在ConsoleModule构造函数中修改maxLine
4. 禁用不需要的过滤器: 减少日志显示可以提升性能

🐛 常见问题

Q: 日志不显示？

A: 检查：

1. Console Page是否已添加到pages字典
2. 是否调用了UniversalDebugTool.Init()
3. 日志项预制件是否正确配置

Q: 滚动不工作？

A: 检查：

1. ScrollRect的Content是否正确设置
2. Content是否有VerticalLayoutGroup
3. Content Size Fitter是否启用

Q: 点击日志无反应？

A: 检查：

1. 日志项是否有Toggle组件
2. Toggle的Target Graphic是否设置
3. EventSystem是否存在于场景中

Q: 性能问题？

A: 尝试：

1. 减少maxLine值（默认500）
2. 减少LogArea高度
3. 使用Text而非TextMeshPro（性能更好但效果差）
4. 关闭不需要的日志类型

📱 移动端优化

如果在移动设备上使用：

1. 增大日志项高度（35-40像素）
2. 增大字体（14-16）
3. 减少最大日志数（200-300行）
4. 使用简化的日志格式（去掉帧数显示）

✨ 完成！

现在你已经有一个功能完整的Console控制台了！

测试所有功能：

• ✅ 清除日志
• ✅ 锁定/解锁滚动
• ✅ 过滤不同类型日志
• ✅ 点击查看详情
• ✅ 滚动浏览日志

享受调试吧！ 🎉