vue 项目 谷歌浏览器调试debugger 鼠标移上去看不到值

这个问题可能是由于 Vue 项目使用了 Webpack 或者其他打包工具，导致代码经过了压缩和混淆，从而使得调试器无法正确地显示变量的值。

解决这个问题的方法是在调试代码的时候，使用 Chrome 浏览器的开发者工具中的 Sources 面板，找到需要调试的代码文件，然后在需要调试的行上打上断点。当代码执行到这个断点时，停止执行并在调试器中查看变量的值。

如果断点无法生效，可以在代码中添加 `debugger` 语句来强制触发断点，例如：

function foo() {
  const a = 1;
  debugger; // 在这里添加断点
  const b = 2;
  return a + b;
}

当代码执行到 `debugger` 语句时，会立即停止执行并进入调试器，可以查看变量的值以及调用栈等信息。

相关问题

vue项目debugger鼠标悬停无法查看值

如果在 Vue 项目中使用 Chrome 浏览器进行调试时，鼠标悬停无法查看值，可能是因为 Vue 项目中启用了生产环境模式，导致 Vue.js 在构建时移除了源码中的一些调试相关代码。解决方法是将项目切换到开发模式，即在 `package.json` 文件中的 `scripts` 中将 `build` 命令改为 `build:dev` 命令，并在命令行运行 `npm run build:dev` 进行构建。另外，也可以在代码中添加 `debugger` 语句来进行调试。

谷歌浏览器vue调试工具

谷歌浏览器的Vue调试工具是通过安装一个叫做"devtools"的扩展程序来实现的。首先，你需要在谷歌浏览器的扩展程序中打开开发者模式，并加载已解压的扩展程序。然后，选择我们的devtools，路径为devtools-5.3.4\packages\shell-chrome。
除了安装扩展程序，你还可以使用脚手架命令"vue init webpack"来创建一个单页面的Vue项目。
如果你对devtools的源码感兴趣，你可以在Devtools Github上下载devtools的源码，版本为v5.3.4。请注意不要选择beta分支。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue 学习(十一、 状态管理模式-Vuex 和 调试工具-Devtools)](https://blog.csdn.net/Ares5kong/article/details/122732051)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]