前端开发中常用的代码调试工具有以下几种：

1. 浏览器开发者工具（Browser Developer Tools）：
   几乎所有现代浏览器都内置了开发者工具，如Chrome的DevTools、Firefox的Developer Edition等。这些工具提供了丰富的功能，如元素查看、样式编辑、网络请求监控、性能分析、JavaScript调试等。
2. Visual Studio Code（VSCode）：
   VSCode是一款非常流行的代码编辑器，它内置了对JavaScript、TypeScript、HTML和CSS等前端技术的支持。通过安装相应的扩展，如Debugger for Chrome，可以在VSCode中直接调试运行在浏览器中的前端代码。
3. WebStorm：
   WebStorm是一款专为Web开发设计的IDE，它提供了强大的代码编辑、调试和测试功能。WebStorm内置了对多种前端技术的支持，并且与Chrome浏览器紧密集成，方便进行调试。
4. React Developer Tools：
   如果你在开发React应用，那么React Developer Tools是一个非常有用的浏览器扩展。它可以让你检查组件树、查看组件的props和state，以及跟踪组件的渲染性能。
5. Vue.js Devtools：
   对于Vue.js开发者来说，Vue.js Devtools是一个必不可少的工具。它允许你检查和调试Vue组件，查看组件的状态和事件，以及分析应用的性能。
6. Redux DevTools：
   如果你的应用使用了Redux进行状态管理，那么Redux DevTools可以帮助你跟踪应用的状态变化，时间旅行调试，以及查看每个action的详细信息。
7. Postman：
   虽然Postman主要用于API测试，但它也可以用于调试前端应用中的网络请求。你可以使用Postman来模拟不同的HTTP请求，并查看响应数据。
8. Sourcemaps：
   Sourcemaps是一种将压缩或编译后的代码映射回原始源代码的技术。这对于调试经过压缩或转译的前端代码非常有用，因为它允许开发者在浏览器开发者工具中直接查看和调试原始源代码。

这些工具可以帮助前端开发者更高效地定位和解决问题，提高开发效率和质量。