前端项目vben-admin老师是如何在webstorm上打上debugger的，前面看到老师在浏览器里打debugger?

Question

前端老师是如何在webstorm上打上debugger的，前面看到老师在浏览器里打debugger，后面就在webstrom里debugger了，而且也能console.log()

Answer 1

Sam 2024-04-29 19:58:30

同学你好，纯前端代码（指运行在浏览器中的Javascript代码）必须在浏览器中进行debug，这是由于前端JS代码依赖于宿主环境进行编译和运行，这部分代码是无法在 Webstorm 中进行调试的。能够在 Webstorm 中调试的 JS 代码是 Node.js 编写的代码，能够在 Webstorm 中调试是由于 Webstorm 集成了 Node.js 环境，并提供了 Node debug 工具，所以可以定位到具体的代码行，并且可以进行步进等操作。

目前前端代码中工程部分，如 Webpack、Vite 等是通过 Node 编写的，所以可以使用 Webstorm 调试，而 Vue 代码则需要在浏览器中调试。

• 提问者 979811597 #1

  好的，谢谢老师，我是说vben这个框架默认忽略所有debug，如何去掉这个限制呢？

Answer 2

扬_灵 2024-04-21 18:38:12

同学你好，webstorm提供了debug的能力，你可以参考一下这篇文档https://blog.csdn.net/weixin_39417324/article/details/132213950， 如果想要在浏览器中debug可以在控制台source中找到对应加载的资源文件打断点然后重新刷新页面就可以进行调试模式了。

• 提问者 979811597 #1

  老师我是说vben这个框架默认忽略所有debug，如何去掉这个限制呢？