ff怎么调试js

在使用 Firefox（FF）调试 JavaScript 时，可以利用其内置的开发者工具（Developer Tools）。以下是一些基础概念和相关操作：

一、基础概念

开发者工具：Firefox 内置的一套用于分析和调试网页的工具集合。
控制台（Console）：用于查看错误信息、警告以及执行 JavaScript 代码片段。
源代码面板（Debugger）：可以查看网页中加载的 JavaScript 文件，并进行断点调试。

二、相关优势

实时查看和修改代码效果。
准确找到代码中的错误位置。
方便地查看变量的值和函数的调用栈。

三、类型

主要的调试类型包括错误调试、性能调试和逻辑调试。

四、应用场景

适用于各种需要排查 JavaScript 问题的网页开发和维护场景。

五、常见问题及解决方法

无法看到错误信息
- 确保控制台已打开。
- 检查是否有浏览器插件干扰。

断点不生效
- 确认代码已正确加载。
- 检查是否在有效的代码行设置断点。

以下是一个简单的示例，展示如何在 FF 中调试一段 JavaScript 代码：

假设我们有以下 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="myButton">点击我</button>

  <script>
    document.getElementById('myButton').addEventListener('click', function () {
      let num = 10;
      let result = num / 0; // 这里会报错
      console.log(result);
    });
  </script>
</body>

</html>

在 FF 中打开这个页面，点击按钮后会报错。

调试步骤：