如何运用浏览器进行各种调试？（网络、内存、控制台等调试用法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console Debug Example</title>
</head>
<body>
  <button id="clickButton">Click Me!</button>
  <script>
    document.getElementById('clickButton').addEventListener('click', function() {
      // 没有任何输出
      console.log(message); // Error: message is not defined
    });
  </script>
</body>
</html>

操作：

打开浏览器开发者工具，切换到 Console 面板。
点击按钮，你会在控制台看到 ReferenceError: message is not defined 错误信息。
修复方法：定义 message 变量，解决错误。

let message = "Button Clicked!";
console.log(message);

2. 元素 (Elements) 面板

场景：查看并修改页面布局

问题：页面的 div 元素不居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elements Debug Example</title>
  <style>
    #box {
      width: 300px;
      height: 300px;
      background-color: lightblue;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>

操作：

打开浏览器开发者工具，切换到 Elements 面板。
右键点击 #box 元素，选择“检查”。
在 Styles 面板中查看 CSS，调整 margin 或 position 来修改布局。

调试方法：

问题：#box 元素不居中。
解决方法：在 Elements 面板中修改 #box 的 CSS 样式，将 margin 修改为 auto，或者使用 display: flex 来居中。

#box {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

3. 源代码 (Sources) 面板

场景：设置断点调试 JavaScript 代码

问题：点击按钮后没有触发预期的操作。你可以通过断点来调试代码，检查哪里出了问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Source Debug Example</title>
</head>
<body>
  <button id="clickButton">Click Me!</button>
  <script>
    document.getElementById('clickButton').addEventListener('click', function() {
      // 假设你调试此处，代码不生效
      console.log("Button clicked!");
      alert("Button was clicked!");
    });
  </script>
</body>
</html>

操作：

打开 Sources 面板，在 JavaScript 代码中点击行号设置断点。
点击按钮，代码将暂停在断点处，你可以查看变量的值和堆栈信息。
调试方法：通过逐步执行代码，查看是否触发了预期的函数。

修复：假设某个条件判断未正确设置，可以在调试过程中修改代码来修复。

4. 网络 (Network) 面板

场景：查看 API 请求和响应

问题：页面加载慢，API 请求没有成功。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Network Debug Example</title>
</head>
<body>
  <button id="loadData">Load Data</button>
  <div id="result"></div>
  <script>
    document.getElementById('loadData').addEventListener('click', function() {
      fetch('https://jsonplaceholder.typicode.com/invalidEndpoint')  // Invalid API endpoint
        .then(response => response.json())
        .then(data => document.getElementById('result').textContent = data.title)
        .catch(err => console.error("API Error:", err));
    });
  </script>
</body>
</html>

操作：

打开 Network 面板，点击“Load Data”按钮。
观察请求是否成功，查看请求的响应状态。
调试方法：你会看到一个 404 错误（请求的 API 地址不存在），你可以检查 API 请求的 URL 并修正。

修复：更新 API 地址为有效的地址。

fetch('https://jsonplaceholder.typicode.com/posts/1')

5. 性能 (Performance) 面板

场景：分析页面的加载性能

问题：页面加载速度慢，用户体验差。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Performance Debug Example</title>
</head>
<body>
  <button id="loadData">Load Data</button>
  <div id="content"></div>
  <script>
    document.getElementById('loadData').addEventListener('click', function() {
      let i = 0;
      while (i < 10000000) { // 这将阻塞 UI 线程
        i++;
      }
      document.getElementById('content').textContent = "Data Loaded!";
    });
  </script>
</body>
</html>

操作：

打开 Performance 面板，点击录制按钮，点击“Load Data”按钮。
停止录制，查看分析报告，识别出 UI 卡顿的原因。
调试方法：在性能分析报告中，发现主线程被阻塞，可以优化 while 循环，改用异步方法（如 setTimeout 或 requestIdleCallback）。

6. 内存 (Memory) 面板

场景：检测内存泄漏

问题：页面长时间运行后，性能逐渐下降，内存占用过高。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Memory Debug Example</title>
</head>
<body>
  <button id="addItem">Add Item</button>
  <div id="items"></div>
  <script>
    const items = [];
    document.getElementById('addItem').addEventListener('click', function() {
      const newItem = { name: "Item" + (items.length + 1) };
      items.push(newItem);  // 模拟内存泄漏
    });
  </script>
</body>
</html>

操作：

打开 Memory 面板，点击 "Heap snapshot"。
点击“Add Item”按钮多次，生成多个对象。
调试方法：分析内存快照，查看是否存在内存泄漏（即对象未被正确释放）。解决方法是确保对象不被无意义地存储，及时清理不再使用的对象。

7. 应用 (Application) 面板

场景：查看和管理浏览器存储

问题：用户登录信息未正确存储。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Application Debug Example</title>
</head>
<body>
  <button id="saveLogin">Save Login</button>
  <script>
    document.getElementById('saveLogin').addEventListener('click', function() {
      localStorage.setItem('user', JSON.stringify({ name: 'John', loggedIn: true }));
    });
  </script>
</body>
</html>