前端的 Python 入门指南（六）：调试方式和技巧对比

《前端的 Python 入门指南》系列文章：

• （一）：常用语法和关键字对比
• （二）：函数的定义、参数、作用域对比
• （三）：数据类型对比 - 彻底的一切皆对象实现和包装对象异同
• （四）：参数传递方式对比 - 值与引用传递 vs 可变不可变数据
• （五）：面向对象特性之继承实现的方式对比 - 基于原型链和基于类各有什么优缺点
• （六）：调试方式和技巧对比
• （七）：异步场景的实现方案对比 - 内置+显示事件循环 + async+await

调试是编程中不可或缺的一部分，掌握高效的调试方法能让开发过程更加顺畅。对于前端开发者来说，JavaScript 的调试工具可能已经非常熟悉，比如 Chrome DevTools 的断点调试、console.log 输出等。而 Python 也提供了一套丰富的调试工具和方法，能够满足开发者在不同场景下的需求。

本文将对比 JavaScript 和 Python 的调试方式及技巧，帮助前端开发者在 Python 开发中快速找到调试的"感觉"。

---

1. 打印调试：console.log vs print

JavaScript 的 console.log

在 JavaScript 开发中，console.log 是最常用的调试方式之一，用于将变量、对象、运行状态输出到控制台。

const data = { key: "value" };
console.log("Debug data:", data);  // Debug data: { key: "value" }

优点：

• 快速、简便，适合定位简单问题。
• 浏览器的开发者工具支持更高级的 console 方法，如 console.table, console.group。

---

Python 的 print

Python 中的 print 是类似的调试方式，可以输出变量或运行状态。

data = {"key": "value"}
print("Debug data:", data)  # Debug data: {'key': 'value'}

优点：

• 简单易用，适合初学者和快速验证代码。

• Python 的 f-string 提供了格式化输出的便利：

  value = 42
  print(f"Debug value: {value}")  # Debug value: 42

对比总结：

• 两者都非常简单，但 console.log 提供了一些更高级的功能（如分组、折叠输出），而 Python 的 print 倾向于直接、清晰的调试输出。

---

2. 断点调试：DevTools vs pdb

JavaScript 的断点调试

在前端开发中，浏览器开发者工具（DevTools） 提供了强大的断点调试功能，允许开发者在代码中设置断点，逐行查看变量的值和运行状态。

使用示例：

1. 在 DevTools 中打开 Sources 面板。
2. 找到需要调试的文件，点击行号设置断点。
3. 切换到控制台，查看变量或执行表达式。

JavaScript 中的 debugger 语句：

也可以在代码中显式设置断点：

function add(a, b) {
    debugger;  // 浏览器会暂停在这一行
    return a + b;
}
add(2, 3);

---

Python 的断点调试（pdb 和 breakpoint）

Python 提供了内置的调试工具 pdb（Python Debugger），功能类似于 DevTools，但是基于命令行的。

使用示例：

1. 在代码中插入 breakpoint() 或 import pdb; pdb.set_trace()：

   def add(a, b):
       breakpoint()  # 启动调试器
       return a + b
   
   add(2, 3)

2. 运行代码后，调试器会暂停在 breakpoint() 处。

3. 输入调试命令，如：

   • n（next）：执行下一行代码。
   • c（continue）：继续运行程序。
   • p（print）：打印变量值。

---

对比总结

特性	JavaScript（DevTools）	Python（pdb）
易用性	图形界面，适合新手	基于命令行，需要记住调试命令
功能	支持断点、逐行调试、查看调用栈和变量	支持断点、变量查看、动态修改代码
直观程度	图形界面直观、交互友好	命令行操作直观性稍差
适用场景	前端开发，浏览器中调试 HTML/CSS/JS	服务器端脚本或本地 Python 程序调试

---

3. 高级调试技巧

JavaScript 高级调试

1. 条件断点 ：

   在 DevTools 中右键点击断点，可以设置条件断点。例如，当变量 x > 10 时暂停：

   let x = 0;
   for (let i = 0; i < 20; i++) {
       x += i;
       // 条件断点：x > 10 时暂停
   }

2. 性能调试 ：

   使用 DevTools 的 Performance 面板分析代码运行性能，找出性能瓶颈。

3. 监视变量变化 ：

   在控制台中使用 watch 监视特定变量的值。

---

Python 高级调试

1. 调试外部库 ：

   使用 pdb.set_trace() 可以在第三方库的代码中插入断点，分析其运行行为。

2. 集成开发环境（IDE）调试 ：

   许多 Python IDE（如 PyCharm、VS Code）提供了图形化的断点调试功能，与 JavaScript 的 DevTools 类似。

3. 调试异步代码 ：

   使用 asyncio 和 pdb 结合，可以调试异步任务：

   import asyncio
   
   async def main():
       breakpoint()  # 在这里设置断点
       print("Hello, Async!")
       await asyncio.sleep(1)
   
   asyncio.run(main())

4. 日志调试 ：

   使用 Python 的内置 logging 模块替代 print，可以更系统地记录调试信息。

   import logging
   logging.basicConfig(level=logging.DEBUG)
   logging.debug("Debug message")

---

4. 日志调试：控制台日志 vs logging

JavaScript 的日志调试

除了 console.log，JavaScript 还提供了其他日志方法：

• console.warn：输出警告信息。
• console.error：输出错误信息。
• console.group：分组显示日志。

示例：

console.group("Debug Info");
console.log("Normal log");
console.warn("Warning log");
console.error("Error log");
console.groupEnd();

---

Python 的日志调试

Python 提供了强大的 logging 模块，支持多种日志级别和输出格式：

示例：

import logging
logging.basicConfig(level=logging.DEBUG)

logging.debug("Debug message")
logging.info("Info message")
logging.warning("Warning message")
logging.error("Error message")

日志级别：

• DEBUG: 调试信息。
• INFO: 普通运行信息。
• WARNING: 警告信息。
• ERROR: 错误信息。

---

5. 调试工具对比总结

特性	JavaScript	Python
打印调试	console.log, 支持分组、表格、折叠	print, 使用简单，但无高级功能
断点调试	DevTools 图形界面，交互直观	基于命令行的 pdb，或使用 IDE 提供的图形界面
高级功能	条件断点、性能调试、实时监控	支持日志、异步调试、外部库调试
日志调试	console.warn, console.error	logging，支持多级日志管理

---

6. 总结与建议

对于前端开发者，调试 Python 的方式可能最初会显得不够直观，但随着深入了解，你会发现 Python 的调试工具同样高效且灵活。以下是一些建议：

1. 入门阶段 ：
   • 使用简单的 print 调试。
   • 在代码中插入 breakpoint() 逐步熟悉 Python 的调试模式。
2. 进阶阶段 ：
   • 学习并熟悉 pdb 的常用命令，快速定位问题。
   • 使用 logging 替代 print，更系统地记录和分析问题。
3. 高级阶段 ：
   • 在 IDE 中充分利用图形化断点调试功能。
   • 学习调试异步代码和外部库，提高调试复杂场景的能力。

掌握这些调试技巧(✿◕‿◕) ，你会发现 Python 的开发调试过程不仅高效，而且乐趣无穷！(•̀ᴗ•́)و