Skip to main content

调试提示

调试工作流，包括策略、示例提示、故障排除流程以及深入调试心态的示例。

使用 AI 构建项目既快速又有趣——直到问题出现。错误、意外行为或“AI 表现出异常行为”等情况，都是开发过程中的常见现象。本指南将帮助您在 Lovable 中导航 基于 AI 的调试工作流。我们将介绍如何快速修复简单问题、应对更复杂的 bug、利用 Lovable 的聊天功能进行调试，以及提供系统化的提示模板来彻底解决 bug。与 AI 助手进行调试是一种新技能，但通过结构化和适当的提示，您可以高效解决问题，甚至将这些问题转化为宝贵的学习机会。

高级调试提示​

有时，您需要一个功能强大的提示来深入分析问题或评估项目的整体健康状况。以下是一些结构化的提示示例，适用于深入调试或优化场景。这些提示可以在聊天模式中使用，以获取全面分析，而不立即修改代码。

完整系统审查（代码库审计）​

如果您的项目规模较大，或者您怀疑存在结构问题，进行一次完整的代码库审计提示会非常实用。这要求 AI 分析整个项目，检查代码的整洁性、架构合理性和潜在错位部分，就如同询问：“代码组织是否符合最佳实践？”

示例提示 – 代码库审计：

Perform a comprehensive **audit of the entire codebase** to check if the architecture is clean, modular, and optimized:  

- Identify any files, components, or logic that are in the wrong place or could be better organized. Are there any instances of code that don't belong in their current file (misplaced logic)?  
- Evaluate if we have a clear separation of concerns (e.g., data handling vs UI vs state management). Point out any overly coupled sections of code.  
- Highlight any areas of the code that are overly complex or not following best practices.  
- Provide a report with specific recommendations to improve structure and maintainability, **without making any code changes yet**.   

Break down the suggestions into an ordered list of steps we could take, from most critical to optional enhancements.  

*(This is a read-only analysis; do not modify the code during this audit.)*

这个提示内容较多，但它指导 AI 像代码审查员或架构师一样行动。我们要求它识别错位代码、评估模块化程度，并优先排序修复建议。AI 可能会给出类似响应：

  • "1. 分离 API 调用和组件： ProjectList 组件直接获取数据。建议：将数据获取移至专用钩子或上下文中，以保持组件专注于 UI 逻辑。​
  1. 减少 Task 逻辑中的耦合： 任务完成切换同时更新状态并直接写入 localStorage。这应重构为单一数据来源。​
  2. 组织实用函数： App.tsx 中的实用函数更适合放置在 utils 文件夹中（例如，日期格式化函数）。
  3. …"*

每个建议可能包含解释并引用具体文件。此类报告有助于从全局视角审视项目，尤其是在您专注于特定功能而忽略整体结构时。

避免使用泛化和宽泛的提示
Nothing works, fix it!
让您的提示更详细和具体
Now the screen has gone blank and I am no longer able to make edits.  
Can you check what happened?

获取输出后，您可以选择处理哪些重构任务，甚至通过后续提示让 AI 逐一实施这些推荐。

针对易碎更新的安全方法​

当您要修改的区域较为敏感（如复杂的身份验证流程或核心算法）时，在提示中添加 警示指南 可有效防范潜在问题。这并非直接查找 bug，而是指导 AI 谨慎操作，避免引入新问题。我们曾在提示库部分见过类似示例，下面是一个聚焦于维护原有功能的模式。

示例提示 – 易碎更新指南：

The next change is in a **critical part of the app**, so proceed with **utmost caution**.   

- Carefully examine all related code and dependencies *before* making changes.  
- **Avoid any modifications** to unrelated components or files.  
- If there's any uncertainty, pause and explain your thought process before continuing.  
- Ensure thorough testing after the change to confirm nothing else is affected.  

**Task:** Update the user authentication logic to support OAuth login via Google, on top of existing email/password without breaking either flow.  

*(Be extremely careful and double-check each step during implementation.)*

通过这些斜体指南和粗体警告，您是在设定 AI 的“谨慎模式”。AI 可能会先解释计划，然后逐步实施 OAuth 添加，同时确保 email/password 逻辑保持不变。此提示不会直接提供解决方案，而是影响 AI 的执行方式，以减少引入新 bug 的风险。

这种策略特别适用于 易碎部分，如身份验证、支付处理或数据迁移——这些领域的小错误可能导致重大问题，属于预防性调试措施。

性能优化检查​

如果您的应用功能正常但 运行缓慢 或资源消耗过高，您可以使用提示让 AI 分析性能问题。这可能包括审查数据获取模式、识别渲染低效之处，或建议优化措施（如缓存、备忘化等），就如同询问：“如何提升速度和流畅度？”

示例提示 – 性能审计：

Our app is functional but seems **sluggish**. Please **analyze the project for performance bottlenecks** and suggest optimizations:  

- Check for any unnecessary database or network calls (e.g., duplicate fetches or N+1 query patterns).  
- Identify components that might be re-rendering too often or doing heavy work on the main thread.  
- Look at our use of assets (images, scripts): are there any large bundles or unoptimized assets affecting load time?  
- Suggest improvements like caching frequently used data, using React memo or lazy loading where appropriate, and any other ways to speed up the app.  

Provide the analysis and recommendations in a list. Do not make code changes yet – just tell us what to improve for better performance.

在聊天模式中运行此提示将获得诊断报告。AI 可能回应：

  • "Data fetching: The ProjectList component fetches data on every render. This could be improved by caching or moving the fetch to a higher context so it doesn't repeat unnecessarily​. Consider using a state or context to store projects once fetched.
  • Re-renders: The TaskItem component is not memoized and re-renders every time any parent state changes. If we have many tasks, this can slow down interactions. Suggestion: use React.memo for TaskItem to prevent needless re-renders​.
  • Assets: Noticed an image (logo) that is 2MB. That's quite large; compress or use a smaller resolution for faster loading.
  • Bundle size: All pages are in one bundle. Consider code-splitting (dynamic import() for large modules) so initial load is faster.
  • …"*

这些建议基于常见的性能最佳实践。随后，您可以决定实施哪些优化，例如提示 Lovable：“根据建议，使用 context 为项目数据实现缓存。”通过这些改进，您能提升用户体验，并可能降低资源消耗。

处理持久错误​

如果某些错误反复出现或以变异形式重现，这通常是因为根本原因未被根除。例如，修复一个问题后，潜在问题可能在其他地方以新错误形式显现。以下是应对策略：

  • 询问 AI 之前的尝试。 在多次“尝试修复”后，可能不清楚已执行的操作。使用：“What solutions have we tried so far for this error?” AI 会列出尝试，帮助避免重复。
  • 让 AI 用简单术语解释错误。"Explain in simple terms why this error occurs." 这有助于验证对问题的理解，并发现潜在误区。
  • 考虑备用方案。 询问：“Given this error keeps happening, can we try a different approach to achieve the goal?” AI 可能建议绕过问题区域的替代实现。
  • 回滚和逐步推进。 在极端情况下，回滚到早期版本（Lovable 支持此操作），然后采用更小的变更。您可以告诉 AI：“We're going to undo the last changes and try a more incremental approach。” 这有助于摆脱僵局。

最后，如果某个组件完全失效，请将其隔离：通过提示创建一个最小化版本，然后逐步整合回项目中。这类似于代码重启——有时从头构建部分比修复已损坏的部分更高效。

在整个过程中，与 AI 保持互动对话，将其视为合作伙伴：“We fixed X but now Y is acting up. What's the relationship between X and Y? Could the fix have caused Y's issue?” AI 可能揭示您未察觉的关联。

示例调试流程​

为加深理解，以下是两个常见场景的示例流程：

“陷入错误循环”的情况。​

您发出一个复杂提示，现在应用无法构建，且“尝试修复”失败多次。

流程：

  1. 切换到聊天模式 并粘贴错误消息：“Here's the build error I'm seeing. Can you help me understand what's wrong? [paste error]”
  2. 让 AI 解释问题，如“looks like there's a missing import” 或“the syntax is incorrect.”
  3. 请求具体步骤：“What steps should I take to resolve this? Please be specific about which files to change.”
  4. 验证计划 是否可行，然后切换回默认模式。
  5. 应用修复：“Implement the fix you suggested: add the missing import to Dashboard.tsx.”
  6. 测试构建；如果仍失败，返回聊天模式。
  7. 如果无效，寻求备选：“The fix didn't work. Can we try a different approach?”
  8. 多次失败时，回滚：“Let's revert to the last working version and try a more incremental change.”

此过程强调具体描述错误并确认 AI 理解，而不是盲目重复操作。

“功能不正常”的情况。​

您添加了通知功能，但电子邮件未发送。

流程：

  1. 在聊天模式中描述预期与实际：“I added email notifications for overdue tasks. Expected: an email should be sent when a task passes its due date. Actual: no emails are being sent. Here's the relevant code [paste code].”
  2. 让 AI 追踪逻辑：“Can you walk through this code and identify where the email sending might be failing?”
  3. 检查常见问题，AI 可能建议验证环境变量或服务配置。
  4. 添加调试日志：“Can we add some console logs to track whether the email function is being called and what response we get?”
  5. 分享日志结果：“Here's what the logs show [paste logs]. What does this tell us?”
  6. 实施修复：“Fix the email configuration issue you identified.”

通过明确预期和实际情况，AI 可以有效指导调查。

“UI 元素消失”的情况。​

您重构后，UI 部分完全不见了（一个“失效组件”）。

流程：

  1. 告知 AI：“The project list section is no longer showing up at all. It was working before the last edit.”
  2. AI 可能检查渲染问题，如组件从 JSX 中被移除，并建议重新导入。

或许它会分析：“Is the data still being fetched? Is the component getting the data? Let’s add a console.log in the render to see if it’s receiving props.”

  1. 执行后，如果无日志输出，表示组件未挂载。

于是提示：“Restore the <ProjectList> in the Dashboard page JSX (it was accidentally removed)。” 问题解决。

关键在于沟通组件完全消失的事实，AI 帮助定位原因（如未渲染或渲染为空）。

使用开发工具和控制台日志
My app is not working anymore and the screen is blank.  
Here's the copy/paste from Dev tools console, can you fix the issue?  

Error occurred:  
TypeError: Q9() is undefined  at https://example.lovable.app/assets/index-DWQbrtrQQj.js  
: 435 : 39117 index-DWQbrtrQQj.js:435:35112  
onerror https://example.lovable.app/assets/index-DWQbrtrQQj.js:435

在这些情况下，有效沟通和逐步推进 是关键。发挥 AI 在细节回忆和分析日志方面的优势，同时利用您的全局视野引导过程。

根本原因分析、回滚和渐进增强​

最后几点建议：

根本原因 vs. 症状​

始终探究“为什么会发生”，而非仅问“如何修复”。AI 可助您找到根本原因，确保问题不再复发。例如，快速修复可能掩盖错误，但未解决逻辑缺陷：

 

I see you fixed the null pointer error by adding a check, but why was it null in the first place? Can we address that cause?

这可带来更可靠的解决方案。

明智回滚：​

Lovable 支持回滚到先前版本。如果代码混乱不堪，不要犹豫使用它。通常，回滚后重试更高效。如果回滚，请告知 AI：

 

I reverted the project to before the notifications feature. Let’s implement it again, but more carefully this time.

这样 AI 能理解上下文。

渐进增强：​

添加新功能时，尤其复杂功能，应采用小步可测试的增量方式。这与 AI 协作相得益彰。如果问题出现，您能快速定位源头。将长提示拆分成多个步骤，便于隔离调试。

 
  1. Add failing test cases.
  2. Isolate the problem and analyze dependencies.
  3. Document findings before applying fixes.
Here's the failing console log. Analyze the test case, investigate the error in auth flow, and suggest a solution after understanding the dependencies.

记录过程：​

及时记录（或让 AI 总结），创建修复历史。例如，解决 bug 后提示：

 

Summarize what the issue was and how we fixed it.

AI 总结可保存至 README 或日志，方便未来参考。

知道何时寻求人工帮助：​

如果遇到无法解决的障碍（如 Lovable 平台 bug），请求助社区。先用 AI 收集信息，然后在 Discord 或论坛提问。

社区调试指南​

这份指南在社区 Discord 中共享，可能对您的项目调试有益：

错误修复

修复错误时，仅针对相关代码部分，避免修改无关正常功能。分析错误消息，追踪来源，并实施针对性修复，同时确保与现有代码兼容。在确认前，验证解决方案是否完全解决问题而不引入新 bug。始终保护正常功能，避免重写无关代码。

代码修改方法

修改代码时，仅做必要变更，保留原有变量名、模式和架构。在建议前，分析依赖以防破坏功能。将更改作为最小差异呈现，而非重写。如果有额外改进，单独建议。

数据库集成

建议新结构前，检查现有模式，利用现有表避免重复。确保修改兼容现有查询，并考虑迁移策略。验证关系和完整性。

彻底问题分析

收集所有信息，形成多假设并测试。记录过程，考虑边缘情况。

解决方案验证

测试解决方案，检查副作用和性能。验证边缘情况后确认。

代码一致性

遵循现有风格和模式，保持可读性。

渐进增强

基于现有架构添加功能，确保兼容性。

文档和解释

解释更改原因和方式，添加代码注释。

技术债务意识

透明处理债务，优先长期解决方案。

学习和适应

根据反馈优化，构建项目模型。

防止重复组件

检查现有元素，重用而非创建重复。

死代码消除

主动移除未用代码，验证后清理。

保留正常功能

仅在必要时修改稳定部分，隔离更改。

深入问题解决方法

多角度分析，记录多方案后推荐。

数据库查询验证

先检查现有结构，确保新建议合理。

UI 一致性和主题

遵守设计系统，重用模式。

系统性调试方法

复现问题，测试假设，记录过程。

类型安全和数据验证

维护类型检查，验证数据流。

数据流管理

追踪数据管道，确保同步。

性能优化

主动监控，消除瓶颈。

错误管理和弹性

实施错误边界，提供反馈。

组件架构

清晰定义责任，优化通信。

API 集成和网络管理

验证请求，处理错误，监控性能。