昨天一切正常，但今天不工作/代码没有按预期工作

或者

调试

调试过程是怎样的？这是什么？

调试过程包括我们在任何地方停止脚本的执行，查看变量、函数中的内容，分析并移动到其他地方；我们正在寻找那些行为偏离正确行为的地方。

将考虑使用Chrome的示例，但您可以在任何其他浏览器甚至IDE中调试代码。

打开开发者工具。通常它们是通过按钮F12或菜单Инструменты→打开的Инструменты Разработчика。选择一个选项卡Sources

数字表明：

1. 连接到页面的文件层次结构（js、css 等）。在这里您可以选择任何脚本进行调试。
2. 代码本身。
3. 用于控制的附加功能。

在左侧的第 2ЛКМ部分中，您可以单击任意一行，从而设置断点（breakpoint - breakpoint）。这是调试器一旦到达它就会自动停止执行JavaScript的地方。断点的数量没有限制。你可以到处放很多东西。在上图中用绿色标记。

在停止的代码中，可以查看变量的当前值，执行各种命令等。

在选项卡中，Breakpoints您可以：

• 暂时关闭断点
• 如果不需要，删除断点
• 通过单击文本快速跳转到代码中断点所在的位置。

开始调试

在这种情况下，因为 由于该函数在页面加载时立即执行，因此重新加载它足以激活调试器。否则，要激活，您需要执行将执行所需代码部分的操作（单击按钮、用数据填充输入、移动鼠标​​和其他操作）

在这种情况下，重新加载页面后，执行将“冻结”在第 4 行：

• Watch 选项卡- 显示任何变量和表达式的当前值。在任何时候，您都可以点击此处+，输入任何变量的名称并实时查看其值。例如, dataor nums[0], or you can and nums[i],item.test.data.name[5].info[key[1]]等等。

• 调用堆栈选项卡- 调用堆栈，导致当前代码位置的所有嵌套调用。目前，调试器位于第getSum4 行的函数中。

• 范围变量选项卡- 变量。目前，第 4 行以下的行尚未执行，sum因此output等于undefined。

Local函数变量显示在： 通过 var 和 parameters 声明。B Global- 全局变量和函数。

过程

对于过程本身，使用控件（见上图，用绿色矩形突出显示）

( F8) — 继续执行。从当前时刻继续执行脚本。如果没有其他断点，则调试结束，脚本继续运行。否则，工作会在下一个断点处中断。

( F10) - 在不进入函数内部的情况下迈出一步。那些。如果当前行有一些函数，而不仅仅是一个有值的变量，那么当这个按钮被点击时，调试器将不会进入其中。

( F11) - 迈出一步。但与前一个不同的是，如果有一个嵌套调用（例如，一个函数），那么它就进入其中。

( Shift+F11) - 执行命令直到当前函数结束。如果您不小心进入嵌套调用并且需要在不结束调试的情况下快速退出它，则很有用。

- 禁用/启用所有断点

— 启用/禁用错误自动停止。如果启用，那么在代码出错的情况下，它会自动停止脚本，您可以在调试器中查看变量的当前值，分析并采取纠正措施。

...

因此，在当前代码中，您可以看到输入参数的值：

• data = "23 24 11 18"- 由空格分隔的数据行
• nums = (4) ["23", "24", "11", "18"]- 从输入变量中获得的数组。

如果我们按F102 次，我们将在第 7 行；在选项卡Watch、Scope>Local和包含代码本身的页面中，我们将看到变量sum已被初始化且值为 0。

如果我们现在按F11，我们将进入闭包函数nums.forEach

通过按 nowF10直到循环结束，可以观察 和 的值num在循环的每次迭代中如何不断变化sum。因此，我们可以逐步跟踪在我们感兴趣的任何阶段更改任何变量和值的整个过程。

进一步按下F10会将代码行移动到第 11、12 行，最后是第 15 行。

此外

• 如果直接在代码中写入关键字，则可以在没有任何断点的情况下强制停止debugger：

  function getSum(data) {
    ...
    debugger; // <-- отладчик остановится тут
    ...
  }
  

• 如果单击 ПКМ带有断点的行，这将允许您微调需要在该标记处停止的条件。比如上面的函数，你只需要sum超过20就停止。

  

  如果您只需要在某个值处停止而不是总是（特别是在循环的情况下），这将很有用。

有关Chrome等工具功能的更多信息，请参见此处。

可选2

页面/元素上发生的事件可以触发强制调试。如果您不知道处理函数的位置，这将很有用。

Chrome示例：

单击F12，转到选项卡Sources，在控制功能中我们会看到选项卡Event Listener Breakpoints，您可以在其中将任何事件分配为触发器，脚本执行将在该触发器停止。在下图中，项目事件上的项目被选中onchange。

对于火狐：

如果函数是内联的，例如

<input type="checkbox" onchange="testFunction(this);" />

то можно зайти в Инспектор, найти тот самый элемент, в котором прописано событие и обнаружить рядом значок em:

Кликнув на него, как утверждает developer.mozilla.org/ru/docs можно увидеть строчки:

где можно увидеть события, навешанные на элемент, скрипт, строку, возможность нажать на паузу и т.д.

В других случаях, а также если кнопка паузы не обнаружена, то на вкладке Debugger(отладчик) надо найти стрелку, при наведении на которую будет написано "Events". Там должно быть событие выделенного элемента.

А вот таких полезных вкладок как у Chrome к сожалению у Firefox там нет.

开发者控制台

如果代码“顽皮”且无法运行，我们会打开任何浏览器中可用的开发人员工具。通常它们是通过按钮F12或菜单Инструменты→打开的Инструменты Разработчика。选择一个选项卡Console

它的行为与在IDE中大致相同——以红色显示：

• 错误原因
• 错误的全文
• 有错误的脚本名称
• 同一脚本中的行号

当您从控制台单击脚本的名称时，您将立即移动到另一个带有此脚本的选项卡，您可以在该位置再次查看和分析原因：

不懂英文？

打开任何在线翻译器并复制错误文本，将大写字母替换为小写字母：

未捕获的语法错误：意外的标记）

Непонятная синтаксическая ошибка: неожиданный токен(символ) )

他直接用俄语说：语法错误。所以你需要朝指定的方向看。

祖父的方式

尽管有下面描述的方法，但应立即注意，有一些很棒的工具可以帮助您更快地检测和修复错误。其中之一是集成开发环境 (IDE)。您可以在问题中阅读更多相关信息：

预防、发现和消除错误的方法有哪些？

关于方式。

即使在没有智能开发环境的情况下也使用了该方法本身，他们只是在记事本中编写代码。现在它也可以工作了，尽管有了智能开发环境和调试器，这不是最快和最有效的方法。用过alert。

动作算法：

1. alert('ЛЮБАЯ_ТЕСТОВАЯ_ФРАЗА')例如，你写在脚本的中间，下面的所有内容都有注释！页面重新加载。
2. 如果alert没有出现，那么错误就更高了。上面我们删写了，下面什么都评论！
3. 如果出现铭文，则问题较低。删掉写在下面
4. 重复步骤 2 和/或 3，直到我们找到错误。

例子：下面的代码没有运行

var test1 = 1;
var test2 == 2;
var result = test1 + test2;
alert(result);

我们希望看到 3，但我们什么也没看到。所以某处存在语法错误。说得alert再高一点，下面都是注释！

var test1 = 1;
var test2 == 2;
alert('работает или нет?');
/*
var result = test1 + test2;    
alert(result);
*/

不起作用。让我们把它放得更高。

var test1 = 1;
alert('работает или нет?');
/*
var test2 == 2;        
var result = test1 + test2;    
alert(result);
*/

铭文出现。所以问题出在下面一行。如果你仔细观察，你会发现他们不小心把等号而不是赋值号。

var test2 == 2; 
           ^------- лишний знак    

定影。

инструменты/ресурсы для отладки, рекомендую:

• http://pythontutor.com/
• https://repl.it/languages

逐步调试，并且您始终可以看到环境中发生的事情（尽管原则上这是上面扩展的 Chrome 调试示例的模拟）