实战案例：用提示词调试 JavaScript 代码的步骤

**

在日常开发中，JavaScript 代码出现 bug 是很常见的情况。传统调试方式需要开发者逐行排查代码，花费大量时间。而用提示词调试代码，能借助 AI 工具快速定位问题、找到解决方案，提高调试效率。下面就通过具体实战案例，详细介绍用提示词调试 JavaScript 代码的完整步骤。

1. 准备工作

在开始用提示词调试 JavaScript 代码前，需要做好一些准备工作，确保后续调试过程能顺利进行。

1.1 明确调试目标

首先要清楚知道自己的调试目标是什么。简单来说，就是要明确代码当前存在什么问题，希望通过调试达到怎样的效果。比如，是代码运行后没有输出预期结果，还是直接报错？是特定功能无法实现，还是页面交互出现异常？只有明确了调试目标，后续写提示词时才能更有针对性。

举个例子，假设我们写了一个计算两个数相加的 JavaScript 函数，运行后发现输入 1 和 2，结果却显示为 “12”，而不是预期的 3。那此时的调试目标就是：找出函数中导致计算结果错误的原因，修改代码使函数能正确计算两个数的和。

1.2 整理代码相关信息

明确调试目标后，就要整理和待调试代码相关的所有信息。这些信息包括完整的代码片段、代码的运行环境（比如是在浏览器控制台运行，还是在 Node.js 环境中运行）、代码运行时出现的具体现象（比如报错信息、错误截图，或者没有报错但结果异常的具体表现）。

还是以刚才计算两个数相加的函数为例，需要整理出完整的函数代码：

function add(num1, num2) {

return num1 + num2;

}

let result = add("1", "2");

console.log(result);

同时，要说明代码的运行环境是浏览器控制台，运行后出现的现象是控制台输出 “12”，而不是预期的 3。

1.3 选择合适的 AI 工具

目前市面上有很多支持通过提示词辅助调试代码的 AI 工具，比如 ChatGPT、豆包、CodeGeeX 等。不同的 AI 工具在代码理解能力、调试建议准确性等方面可能存在差异，需要根据自己的使用习惯和调试需求选择合适的工具。

对于 JavaScript 代码调试，大部分主流 AI 工具都能提供较好的支持。如果是日常简单的代码调试，选择自己常用且容易获取的 AI 工具即可；如果是复杂的 JavaScript 项目调试，建议选择对代码上下文理解能力更强、调试经验更丰富的 AI 工具。

2. 撰写基础提示词

准备工作完成后，就进入到提示词撰写环节。基础提示词是向 AI 工具传递调试需求的核心内容，需要包含关键信息，让 AI 能快速理解问题所在。

2.1 基础提示词的核心要素

一个完整的基础提示词应包含以下几个核心要素：

• 代码用途：简要说明待调试代码的功能，让 AI 了解代码的应用场景。

• 完整代码：将整理好的待调试代码完整地呈现给 AI，确保 AI 能看到代码的全貌。

• 问题现象：详细描述代码运行时出现的问题，包括报错信息（如果有）、异常结果等。

• 调试需求：明确告诉 AI 希望它提供怎样的帮助，比如找出问题原因、给出修改建议等。

2.2 基础提示词示例

以之前计算两个数相加的函数调试为例，基础提示词可以这样撰写：

“我有一段 JavaScript 代码，用途是计算两个数的和。完整代码如下：

function add(num1, num2) {

return num1 + num2;

}

let result = add("1", "2");

console.log(result);

这段代码在浏览器控制台运行后，控制台输出的结果是 “12”，而不是我预期的 3。请帮我找出代码中导致结果错误的原因，并给出修改代码的建议，让函数能正确计算两个数的和。”

2.3 撰写基础提示词的注意事项

• 信息准确：在提示词中传递的代码、问题现象等信息必须准确无误，不能有遗漏或错误，否则会误导 AI，影响调试效果。比如，不能少写代码中的关键语句，也不能错误描述运行结果。

• 语言简洁：用简单、直接的语言撰写提示词，避免使用冗长、复杂的表述。AI 对简洁明了的提示词理解起来更高效，能更快给出调试建议。

• 需求明确：清晰表达自己的调试需求，不要让 AI 猜测。比如，明确要求 AI 先分析问题原因，再给出具体的代码修改方案，而不是只让 AI “看看代码有什么问题”。

3. 向 AI 工具提交提示词并获取初步反馈

撰写好基础提示词后，就可以将其提交给选择好的 AI 工具，等待 AI 给出初步反馈。

3.1 提交提示词的操作步骤

不同 AI 工具的提示词提交方式略有不同，但大致流程相似：

1. 打开选择好的 AI 工具界面，找到输入框。

1. 将撰写好的基础提示词复制粘贴到输入框中，检查一遍确保没有格式错误或信息遗漏。

1. 点击 “发送”“提交” 等按钮，将提示词发送给 AI 工具。

以 ChatGPT 为例，打开 ChatGPT 官网，在左侧对话框的输入框中粘贴提示词，然后点击输入框右侧的发送按钮，即可提交提示词。

3.2 等待 AI 工具生成反馈

提交提示词后，AI 工具会根据提示词中的信息进行分析，这个过程需要一定时间，具体时间长短取决于 AI 工具的响应速度、代码复杂度以及提示词的信息量。

在等待过程中，不要频繁重复提交提示词，以免造成 AI 工具响应混乱，同时也避免浪费不必要的资源。一般情况下，简单的 JavaScript 代码调试，AI 工具会在几秒到几十秒内生成反馈；复杂的代码调试，可能需要几分钟时间。

3.3 获取初步反馈并初步分析

当 AI 工具生成初步反馈后，首先要认真阅读反馈内容，了解 AI 对问题的分析和给出的建议。

还是以计算两个数相加的函数调试为例，AI 可能会给出这样的初步反馈：“从你提供的代码和问题现象来看，代码中存在的问题是：调用 add 函数时，传入的参数是字符串类型的 "1" 和 "2"，而 JavaScript 中字符串之间的 "+" 运算符表示字符串拼接，不是数值相加，所以结果会是 "12"。修改建议是：在调用 add 函数前，将传入的字符串参数转换为数值类型，比如使用 Number () 函数进行转换，修改后的代码可以是：

function add(num1, num2) {

return num1 + num2;

}

let result = add(Number("1"), Number("2"));

console.log(result);

这样修改后，函数就能正确计算两个数的和，运行结果会是 3。”

此时，我们需要初步分析 AI 给出的反馈是否合理。比如，检查 AI 指出的问题原因是否符合 JavaScript 的语法规则，给出的修改建议是否能解决当前问题。从上面的反馈来看，AI 指出的字符串拼接问题确实是 JavaScript 中的常见问题，修改建议也符合语法规则，初步判断反馈是合理的。

4. 根据初步反馈优化提示词（若需要）

在获取 AI 的初步反馈后，可能会出现一些情况，需要我们优化提示词，进一步向 AI 传递信息，以获得更准确、更符合需求的调试建议。

4.1 需要优化提示词的常见情况

• AI 未准确理解问题：比如，AI 误解了代码的用途，或者对问题现象的判断出现偏差，导致给出的调试建议与实际问题不相关。

• AI 给出的建议不具体：AI 虽然指出了问题原因，但没有给出具体的代码修改方案，或者修改方案比较模糊，无法直接应用。

• 有额外需求未提及：在初步提示词中，可能遗漏了一些额外的调试需求，比如希望修改后的代码兼容特定浏览器，或者希望代码更简洁等，需要补充这些需求。

4.2 优化提示词的方法

• 补充信息：如果 AI 未准确理解问题，需要在优化后的提示词中补充更多关键信息，比如更详细地说明代码的应用场景、问题出现的特定条件等。

• 明确要求：如果 AI 给出的建议不具体，需要在提示词中明确要求 AI 提供更具体的内容，比如 “请给出完整的修改后代码”“请详细说明每一步修改的原因”。

• 增加需求：如果有额外需求未提及，需要在提示词中清晰地增加这些需求，让 AI 在给出调试建议时考虑到这些因素。

4.3 优化提示词示例

假设在计算两个数相加的函数调试中，AI 虽然指出了问题原因，但只给出了使用 Number () 函数转换参数类型的建议，而我们希望同时了解其他转换参数类型的方法，并且希望修改后的代码能处理参数为 null 或 undefined 的情况。此时，优化后的提示词可以这样撰写：

“感谢你的初步分析。我还想了解除了使用 Number () 函数，还有哪些方法可以将字符串参数转换为数值类型？另外，我希望修改后的代码能处理参数为 null 或 undefined 的情况，比如当参数为 null 或 undefined 时，默认将其视为 0 进行计算。请基于这些需求，进一步优化代码修改建议，并给出完整的修改后代码。”

4.4 再次提交优化后的提示词并获取反馈

将优化后的提示词再次提交给 AI 工具，等待 AI 生成新的反馈。AI 会根据补充的信息和新的需求，对之前的调试建议进行调整和完善。

对于上面的优化提示词，AI 可能会给出这样的反馈：“除了 Number () 函数，还可以使用 parseInt () 函数或 parseFloat () 函数将字符串转换为数值类型。其中，parseInt () 函数用于将字符串转换为整数，parseFloat () 函数用于将字符串转换为浮点数，对于你这个整数相加的场景，这两个函数也适用。

针对处理参数为 null 或 undefined 的需求，可以在函数内部先对参数进行判断和处理。修改后的完整代码如下：

function add(num1, num2) {

// 将参数转换为数值类型，若参数为null或undefined，默认视为0

const n1 = typeof num1 === "number" ? num1 : (num1 === null || num1 === undefined ? 0 : Number(num1));

const n2 = typeof num2 === "number" ? num2 : (num2 === null || num2 === undefined ? 0 : Number(num2));

return n1 + n2;

}

// 测试不同情况

let result1 = add("1", "2");

console.log(result1); // 输出3

let result2 = add(null, 5);

console.log(result2); // 输出5

let result3 = add(undefined, "3");

console.log(result3); // 输出3

这样修改后，代码不仅能正确计算两个数的和，还能处理参数为字符串、null 或 undefined 的情况。”

5. 验证 AI 给出的调试建议

获取到 AI 优化后的调试建议后，不能直接将修改后的代码应用到项目中，还需要对建议进行验证，确保修改后的代码能正确运行，且没有引入新的问题。

5.1 验证的核心步骤

• 复制修改后的代码：将 AI 给出的修改后代码完整地复制下来。

• 在对应环境中运行代码：按照之前整理的代码运行环境，将修改后的代码在相同的环境中运行，比如之前是在浏览器控制台运行，现在依然在浏览器控制台运行。

• 观察运行结果：运行代码后，仔细观察运行结果是否符合预期，是否还存在之前的问题，同时检查是否有新的报错或异常现象出现。

5.2 验证示例

以优化后的计算两个数相加的函数为例，按照以下步骤进行验证：

1. 复制 AI 给出的修改后代码：

function add(num1, num2) {

const n1 = typeof num1 === "number" ? num1 : (num1 === null || num1 === undefined ? 0 : Number(num1));

const n2 = typeof num2 === "number" ? num2 : (num2 === null || num2 === undefined ? 0 : Number(num2));

return n1 + n2;

}

let result1 = add("1", "2");

console.log(result1);

let result2 = add(null, 5);

console.log(result2);

let result3 = add(undefined, "3");

console.log(result3);

1. 打开浏览器（比如 Chrome 浏览器），按 F12 打开开发者工具，切换到 “控制台”（Console）选项卡。

1. 将复制的代码粘贴到控制台输入框中，按回车键运行代码。

1. 观察控制台输出结果：可以看到控制台依次输出 3、5、3，与预期结果一致，且没有出现任何报错信息，说明 AI 给出的调试建议是有效的，修改后的代码能正确运行。

5.3 处理验证过程中出现的问题

如果在验证过程中发现修改后的代码依然存在问题，或者出现了新的问题，需要再次分析问题原因，并根据情况选择以下处理方式：

• 再次优化提示词：如果问题是因为 AI 没有完全理解需求，或者给出的建议存在漏洞，需要再次优化提示词，向 AI 补充更多信息，比如说明验证过程中出现的新问题，让 AI 重新分析并给出更准确的建议。

• 手动调整代码：如果问题比较简单，自己能找到原因，可以基于 AI 的建议手动调整代码，然后再次进行验证。

比如，假设在验证优化后的代码时，发现当传入的参数是字符串 “1.5” 和 “2.3” 时，计算结果是 3.8，而不是预期的 3（假设此时需求变为只计算整数相加）。此时，需要再次优化提示词，告诉 AI“现在我希望函数只计算整数相加，当传入的参数是小数字符串时，也只取整数部分进行计算，比如传入 "1.5" 和 "2.3"，结果应为 3（1+2）。请基于这个新需求，再次修改代码。”

6. 复杂 JavaScript 代码调试案例拓展

前面介绍的是简单 JavaScript 函数的调试案例，在实际开发中，我们还会遇到更复杂的 JavaScript 代码调试场景，比如 DOM 操作相关代码调试、异步代码调试等。下面通过两个复杂案例，进一步介绍用提示词调试 JavaScript 代码的方法。

6.1 DOM 操作相关代码调试案例

6.1.1 案例背景

有一段 JavaScript 代码，用途是通过点击按钮，动态向页面中的 ul 列表添加一个 li 元素，li 元素的内容为 “新列表项”。但点击按钮后，发现 li 元素没有被添加到 ul 列表中，也没有报错信息。

6.1.2 整理代码相关信息

• 完整代码（包含 HTML 和 JavaScript）：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>DOM操作案例</title>

</head>

<body>

<ul id="list"></ul>

<button id="addBtn">添加列表项</button>

<script>

const addBtn = document.getElementById("addBtn");

const list = document.getElementById("list");

addBtn.onclick = function() {

const li = document.createElement("li");

li.innerText = "新列表项";

list.appendChild(li);

}

</script>

</body>

</html>

• 运行环境：Chrome 浏览器，直接打开 HTML 文件运行。

• 问题现象：点击 “添加列表项” 按钮，ul 列表中没有新增 li 元素，浏览器控制台没有报错。

6.1.3 撰写基础提示词并获取反馈

基础提示词：“我有一段包含 HTML 和 JavaScript 的代码，用途是点击按钮向 ul 列表添加 li 元素。完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>DOM操作案例</title>

</head>

<body>

<ul id="list"></ul>

<button id="addBtn">添加列表项</button>

<script>

const addBtn = document.getElementById("addBtn");

const list = document.getElementById("list");

addBtn.onclick = function() {

const li = document.createElement("li");

li.innerText = "新列表项";

list.appendChild(li);

}

</script>

</body>

</html>

这段代码在 Chrome 浏览器中打开运行后，点击 “添加列表项” 按钮，ul 列表中没有新增 li 元素，控制台也没有报错。请帮我找出问题原因，并给出修改建议。”

AI 可能给出的反馈：“从代码来看，逻辑上是正确的，但可能存在 DOM 元素加载顺序的问题。在你的代码中，script 标签放在 body 标签内部的末尾，理论上此时 DOM 元素已经加载完成，但也有可能在某些情况下，JavaScript 代码执行时，按钮或 ul 元素还未完全加载到 DOM 树中，导致获取到的 addBtn 或 list 为 null，从而无法绑定点击事件或执行 appendChild 操作。

验证方法：可以在获取元素后，在控制台打印 addBtn 和 list，查看是否为 null。比如在 script 代码中添加：

console.log (addBtn);

console.log (list);

如果打印结果为 null，说明是 DOM 加载顺序问题。修改建议有两种：

6.1.4 根据 AI 反馈进行修改与验证

6.1.4.1 第一种修改建议：使用 DOMContentLoaded 事件

AI 反馈中提到的第一种修改方法是借助DOMContentLoaded事件，确保 JavaScript 代码在 DOM 完全加载完成后再执行。具体修改后的代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>DOM操作案例</title>

</head>

<body>

<ul id="list"></ul>

<button id="addBtn">添加列表项</button>

<script>

// 等待DOM完全加载完成后执行代码

document.addEventListener('DOMContentLoaded', function() {

const addBtn = document.getElementById("addBtn");

const list = document.getElementById("list");

addBtn.onclick = function() {

const li = document.createElement("li");

li.innerText = "新列表项";

list.appendChild(li);

}

});

</script>

</body>

</html>

修改完成后，按照以下步骤进行验证：

1. 将修改后的代码保存为 HTML 文件，比如命名为dom-test.html。

1. 用 Chrome 浏览器打开该 HTML 文件，页面上会显示一个空的列表和 “添加列表项” 按钮。

1. 点击 “添加列表项” 按钮，观察 ul 列表的变化。此时可以看到，每次点击按钮，ul 列表中都会新增一个内容为 “新列表项” 的 li 元素，与预期效果一致，且浏览器控制台没有报错，说明该修改方法有效。

6.1.4.2 第二种修改建议：将 script 标签放在 body 标签外部底部

第二种修改方法是调整 script 标签的位置，将其放在 body 标签的外部底部，也就是</body>标签之后。修改后的代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>DOM操作案例</title>

</head>

<body>

<ul id="list"></ul>

<button id="addBtn">添加列表项</button>

</body>

<!-- 将script标签放在body标签外部底部 -->

<script>

const addBtn = document.getElementById("addBtn");

const list = document.getElementById("list");

addBtn.onclick = function() {

const li = document.createElement("li");

li.innerText = "新列表项";

list.appendChild(li);

}

</script>

</html>

验证步骤与第一种修改方法相同：

1. 保存代码为 HTML 文件并在 Chrome 浏览器中打开。

1. 点击 “添加列表项” 按钮，发现 ul 列表能正常新增 li 元素，没有出现之前的异常情况，证明该修改方法同样有效。

6.2 异步代码调试案例

6.2.1 案例背景

有一段 JavaScript 异步代码，用途是通过setTimeout模拟异步请求数据，然后将获取到的数据渲染到页面的p标签中。但运行代码后，发现p标签中始终显示的是初始内容 “等待数据加载...”，没有更新为异步获取到的数据。

6.2.2 整理代码相关信息

• 完整代码（包含 HTML 和 JavaScript）：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>异步代码案例</title>

</head>

<body>

<p id="dataText">等待数据加载...</p>

<script>

let data = "";

// 模拟异步请求数据，2秒后获取到数据

setTimeout(function() {

data = "这是异步获取到的数据";

}, 2000);

// 渲染数据到p标签

const dataText = document.getElementById("dataText");

dataText.innerText = data;

</script>

</body>

</html>

• 运行环境：Chrome 浏览器，直接打开 HTML 文件运行。

• 问题现象：页面加载后，p标签一直显示 “等待数据加载...”，2 秒后也没有更新为 “这是异步获取到的数据”，控制台无报错。

6.2.3 撰写基础提示词并获取反馈

基础提示词：“我有一段包含 HTML 和 JavaScript 的异步代码，用途是通过 setTimeout 模拟异步请求数据，然后将数据渲染到 p 标签。完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>异步代码案例</title>

</head>

<body>

<p id="dataText">等待数据加载...</p>

<script>

let data = "";

setTimeout(function() {

data = "这是异步获取到的数据";

}, 2000);

const dataText = document.getElementById("dataText");

dataText.innerText = data;

</script>

</body>

</html>

这段代码在 Chrome 浏览器中运行后，p 标签始终显示 “等待数据加载...”，2 秒后也没有更新数据，控制台没有报错。请帮我分析问题原因，并给出修改代码的建议。”

AI 可能给出的反馈：“这段代码的问题在于 JavaScript 的异步执行机制。setTimeout 函数是异步操作，它会将回调函数（也就是修改 data 值的函数）放入异步任务队列中，等待主线程中的同步代码执行完成后，才会执行异步任务队列中的回调函数。

在你的代码中，同步代码包括：声明 data 变量并赋值为空字符串、获取 p 标签元素、将 p 标签的 innerText 设置为 data（此时 data 还是空字符串）。这些同步代码会先执行，执行完成后，2 秒后异步任务队列中的回调函数才会执行，修改 data 的值为 “这是异步获取到的数据”。但此时渲染数据的代码已经执行过了，所以 p 标签的内容不会更新。

修改建议：将渲染数据的代码放入 setTimeout 的回调函数中，确保在数据获取到之后再执行渲染操作。修改后的代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>异步代码案例</title>

</head>

<body>

<p id="dataText">等待数据加载...</p>

<script>

let data = "";

setTimeout(function() {

data = "这是异步获取到的数据";

// 数据获取到后，执行渲染操作

const dataText = document.getElementById("dataText");

dataText.innerText = data;

}, 2000);

</script>

</body>

</html>

”

6.2.4 验证修改后的代码

按照以下步骤验证修改后的代码：

1. 将修改后的代码保存为 HTML 文件，例如async-test.html。

1. 用 Chrome 浏览器打开该文件，初始时 p 标签显示 “等待数据加载...”。

1. 等待 2 秒后，观察 p 标签的内容变化。可以看到，2 秒后 p 标签的内容成功更新为 “这是异步获取到的数据”，符合预期效果，说明 AI 给出的修改建议正确有效。

7. 提示词调试 JavaScript 代码的常见技巧

在实际使用提示词调试 JavaScript 代码的过程中，掌握一些常见技巧能让调试过程更高效，获取到的调试建议更精准。

7.1 分步骤描述问题

当遇到复杂的代码问题时，不要一次性将所有信息杂乱地堆砌在提示词中，而是分步骤描述问题。比如，先说明代码的整体功能，再分点说明代码的执行流程，最后详细描述出现的问题现象。这样能让 AI 更清晰地理解代码逻辑和问题所在，减少误解。

例如，调试一个包含多个函数调用的 JavaScript 代码时，提示词可以这样开头：“我有一段 JavaScript 代码，用于实现用户登录功能，代码包含三个主要函数：checkUser ()（验证用户名格式）、checkPwd ()（验证密码格式）、login ()（发起登录请求）。代码执行流程是：用户输入用户名和密码后，先调用 checkUser () 和 checkPwd () 进行格式验证，验证通过后调用 login () 发起请求。现在遇到的问题是：当用户名和密码格式都正确时，调用 login () 后没有发起请求，控制台显示‘login is not a function’报错...”

7.2 提供上下文信息

除了待调试的代码片段，尽量提供更多的上下文信息，比如代码所在的项目框架（是 Vue、React 还是原生 JavaScript 项目）、代码与其他模块的依赖关系、代码运行的特定场景（比如只在手机端浏览器出现问题，PC 端正常）等。这些上下文信息能帮助 AI 更全面地分析问题，避免给出不符合项目实际情况的建议。

比如，在调试 React 项目中的 JavaScript 代码时，提示词中可以补充：“这段代码是 React 项目中 Login 组件的部分代码，使用的是 React 18 版本，代码依赖 axios 库发起网络请求，组件通过 props 接收父组件传递的 userInfo 参数...”

7.3 明确排除无关信息

在提示词中，可以明确排除一些无关信息，避免 AI 将注意力放在不必要的地方。比如，代码中有些注释是临时添加的，与当前问题无关，可以在提示词中说明 “代码中的 // TODO: 优化样式相关注释与当前问题无关，可忽略”；或者代码中有些变量名是测试用的，不影响逻辑，可以说明 “变量名 temp1、temp2 是测试用名称，无需关注其命名合理性，重点分析代码逻辑问题”。

7.4 逐步细化需求

如果一开始不确定具体的调试需求，或者 AI 给出的初步反馈不够精准，可以逐步细化需求。比如，第一次提示词只是让 AI “找出代码问题”，获取反馈后，发现 AI 没有考虑代码的性能问题，可以进一步优化提示词：“除了之前指出的功能问题，我还希望你分析代码的性能问题，比如是否存在冗余的循环遍历，是否有可以优化的异步操作，让代码执行速度更快...”

8. 常见问题与解决方案

在使用提示词调试 JavaScript 代码的过程中，可能会遇到一些常见问题，比如 AI 给出的建议无法解决问题、AI 多次误解问题需求等。下面介绍这些常见问题的解决方案。

8.1 AI 给出的建议无法解决问题

8.1.1 问题原因

• AI 对代码的理解存在偏差，没有准确找到问题根源。

• 提示词中遗漏了关键信息，导致 AI 分析不全面。

• 问题本身比较特殊，需要结合特定的技术细节或经验才能解决，AI 现有知识无法覆盖。

8.1.2 解决方案

• 补充关键信息：回顾提示词，检查是否遗漏了代码的关键逻辑、报错信息的完整内容、代码运行的特殊条件等，将这些信息补充到新的提示词中，再次提交给 AI。

• 换角度描述问题：尝试用不同的方式描述问题，比如之前用文字描述报错信息，这次可以将完整的报错截图（用文字描述截图内容）或报错日志复制到提示词中；之前按代码执行顺序描述问题，这次可以按问题出现的时间顺序描述。

• 手动验证 AI 的分析：先手动验证 AI 指出的问题原因是否正确，比如 AI 认为是 “变量未定义导致报错”，可以在代码中添加 console.log 打印该变量，查看是否真的未定义。如果验证发现 AI 的分析错误，将验证结果反馈给 AI，让其重新分析。

8.2 AI 多次误解问题需求

8.2.1 问题原因

• 提示词中的表述模糊，存在歧义，比如 “优化代码” 可以理解为优化性能，也可以理解为优化代码结构，AI 无法确定具体方向。

• 提示词中的专业术语使用不当，导致 AI 误解，比如将 “异步回调” 误表述为 “同步回调”，让 AI 分析方向偏离。

• 代码涉及的领域比较小众，AI 对相关术语或逻辑不熟悉。

8.2.2 解决方案

• 明确术语和定义：在提示词中对模糊的术语进行明确定义，比如 “我提到的‘优化代码’具体指优化代码的执行速度，减少循环次数，不涉及代码结构调整”；“这里的‘回调函数’指的是异步操作完成后执行的函数，不是同步执行的回调”。

• 使用更简单的表述：将复杂的表述替换为更简单、直接的语言，避免使用行业黑话或小众术语。比如，不要说 “代码存在闭包泄漏问题”，可以说 “代码运行一段时间后，浏览器内存占用越来越高，经排查可能与函数内部的闭包有关，请分析是否存在闭包未释放的问题”。

• 分阶段引导 AI：先让 AI 理解代码的基础逻辑，再引导其分析问题。比如，先提交提示词 “请先简要说明这段代码的执行逻辑，确保你理解代码功能”，待 AI 正确描述代码逻辑后，再提交提示词 “现在分析这段代码运行时出现的问题：...”

8.3 AI 给出的代码修改建议存在语法错误

8.3.1 问题原因

• AI 在生成代码时可能出现疏忽，比如遗漏括号、分号，或者使用了已废弃的语法。

• 不同 JavaScript 环境对语法的支持不同，AI 给出的代码可能适用于某个环境，但不适用于当前的运行环境（比如 AI 使用了 ES6 的箭头函数，但当前代码运行在不支持 ES6 的旧版 IE 浏览器中）。

8.3.2 解决方案

• 手动检查语法：将 AI 给出的修改代码复制到代码编辑器中，利用编辑器的语法检查功能（如 VS Code 的语法高亮提示）检查是否存在语法错误，发现错误后手动修正。

• 明确运行环境：在提示词中明确代码的运行环境对语法的要求，比如 “代码需要兼容 IE 11 浏览器，不支持 ES6 及以上语法，请给出符合 ES5 语法的修改建议”；“代码运行在 Node.js 14 环境中，支持 ES6 语法，但不支持 ES2022 的新特性”。

• 要求 AI 验证代码：在提示词中要求 AI 验证修改后的代码语法正确性，比如 “请确保给出的修改代码没有语法错误，最好能说明代码中关键语法的兼容性”。

9. 实际项目中的应用场景

提示词调试 JavaScript 代码不仅适用于简单的代码片段调试，在实际项目中也有很多应用场景，能帮助开发者提高调试效率，解决复杂问题。

9.1 遗留代码调试

很多项目中存在一些遗留的 JavaScript 代码，这些代码可能没有完整的文档，开发者对代码逻辑不熟悉，调试时难以快速定位问题。此时，使用提示词调试能借助 AI 快速理解代码逻辑，分析问题。

比如，项目中有一段 5 年前编写的 JavaScript 代码，用于处理 Excel 文件导入，现在导入某些格式的 Excel 文件时会报错，开发者不熟悉代码中使用的旧版 Excel 处理库。可以将代码和报错信息整理成提示词，让 AI 分析代码逻辑，找出与当前 Excel 格式不兼容的地方，并给出修改建议。

9.2 多环境适配问题调试

JavaScript 代码在不同的运行环境（不同浏览器、不同设备、不同系统）中可能出现适配问题，比如在 Chrome 浏览器中正常运行，在 Safari 浏览器中出现功能异常；在 Windows 系统中正常，在 macOS 系统中报错。调试这类问题时，需要分析不同环境的差异，找出适配问题的根源。

使用提示词调试时，可以在提示词中说明代码在不同环境中的运行情况，比如 “这段 JavaScript 代码在 Chrome 110 版本中正常运行，但在 Safari 16 版本中，点击按钮后没有反应，控制台显示‘Cannot read property 'addEventListener' of null’。请分析 Safari 浏览器与 Chrome 浏览器的差异，找出问题原因并给出适配方案”，AI 会根据不同浏览器的特性差异，给出针对性的调试建议。

9.3 复杂业务逻辑调试

项目中涉及复杂业务逻辑的 JavaScript 代码，比如电商项目中的订单结算逻辑（包含优惠券计算、税费计算、库存检查等多个环节）、金融项目中的金额计算逻辑等，这类代码逻辑复杂，出现问题后难以快速排查。

通过提示词调试，将复杂业务逻辑的代码按模块拆分，分步骤提交给 AI，让 AI 逐一分析每个模块的逻辑是否正确，以及模块之间的交互是否存在问题。比如，先提交订单结算逻辑中优惠券计算模块的代码，让 AI 分析计算逻辑是否正确，再提交税费计算模块的代码，最后提交模块之间的调用代码，逐步定位问题。

9.4 第三方库集成调试

在 JavaScript 项目中，经常需要集成第三方库（如 axios、echarts、lodash 等），集成过程中可能会出现库版本不兼容、调用方式错误、参数传递错误等问题。调试这类问题时，需要熟悉第三方库的使用文档和 API，对于不常用的库，开发者可能需要花费大量时间查阅文档。

使用提示词调试时，可以将集成第三方库的代码、使用的库版本、出现的问题现象整理成提示词，让 AI 结合库的 API 文档分析问题。比如，“我在项目中使用 axios 0.27.2 版本发起 POST 请求，代码如下：axios.post ('/api/login', {user: 'test', pwd: '123'})，运行后控制台显示‘400 Bad Request’，服务器返回‘参数格式错误’。请结合 axios 的 POST 请求参数传递规则，分析问题原因并给出修改建议”，AI 会根据 axios 的 API 特性，指出是否存在参数格式错误、请求头设置问题等。