问题标签 [chrome-debugging]

我正在开发 VueJS / Express 应用程序，进入比以前更高级的 Web 开发。我使用VSCode，并在同一个项目中开发后端和前端。我可以将 VSCode 调试器用于后端工作，并将 Chrome 调试器用于前端。

VSCode 效果很好。故事结束。

Chrome 功能强大，但很古怪。我最终调试了 Chrome 调试器正在发生的事情。再加上难以理解的 Vue 内部结构，它们总是弹出来，增加了另一个必须通过（或忽略）的级别。但是我遇到的最大问题是我无法检查组件脚本中的实例变量，只能检查断点所在函数的本地变量。这将我的过程减少为执行大量一次性 console.log() 语句，人们只是在寻找对“this.[anything]”实例变量的快速检查。

我已经忍受了几个月，但最近做了一些重构，它减慢了我的进度，所以我想看看是否有办法克服这个障碍并加快我的调试过程。

有人有建议吗？有没有办法设置 Chrome 以启用检查对象变量？Vue前端开发有没有更高效的调试方法或工具？

除此之外，将前端和后端代码组合到一个项目中非常棒。VSCode 摇滚。

当我的 JS 代码在旧 ipad 上运行时，我正在尝试调试内存不足问题

有没有办法在 Chrome 开发工具中设置模拟内存限制，这样当它被破坏时我会得到内存不足异常等？

使用 Chrome 开发工具，在特定手机/平板电脑（无响应）上的常规视图和横向视图之间切换，应用程序重新加载组件和 app.component.ts（构造函数和 ngOnInit）

问题- 这是预期的行为吗？我在 1 天前没有注意到这一点，它只会在手机/平板电脑上触发重新加载，而不是在 devtools 的响应视图中。

仅供参考- 我刚刚打开并运行了另一个项目，它也在这样做。

这是否意味着在实际的手机/平板电脑上，当用户从垂直模式切换到横向模式时，组件和项目将被重新加载，还是我在项目或 Chrome 中搞砸了？

任何调试帮助将不胜感激

我查看了如何在 Chrome 中分析网络工作者？等等，但那里的建议是针对旧版本的 chrome，现在似乎已经过时了。

如何在 chrome >86 中分析网络工作者的内存（拍摄快照并比较它们）？

我开发了一个包含 10 多个外部 javascript 依赖项的网页。

网页将加载一个文件（通过 AJAX）并做一些工作。

但是，当页面加载文件时，页面完全卡住了。我在文件中找不到任何异常的东西，所以它一定是脚本问题。但是由于页面卡住了，我找不到错误位置。

如何使用我的 Chrome DevTools 来定位错误？

我有一个 vue-js 应用程序，其中包含多个名为 的组件index.vue，其中一些是嵌套的，同时加载。当我在其中一个文件中的 Chrome 检查器中设置断点时index.vue，调试器会正确停止，但会打开错误的index.vue文件。它似乎与 Webpack sourcemaps 配置有关，因为关闭此文件在调试器中正确打开。

我是 Visual Studio Code 的新手。

我的 javascript 发生错误。在控制台中它说：

但在下面：

我在 Visual Studio Code 中安装了 Chrome 调试器。

但是，当我打开 Chrome 浏览器时，当程序运行时，我查看开发人员工具中的控制台，它会告诉我发生恶意错误的文件和行号。

为什么它没有在 Visual Studio Code 中显示？

如何让它在 Visual Studio Code 中显示？

I am following this example to learn more about Memory Snapshots.

The example mentions, that hoovering over an allocated object should show the object instance, e.g.

This would be super convenient, but it does not work for me.

Am I missing something, or is there some setting to activate this feature?

Notes:

• I am using Chrome Version 89.0.4389.82 64-bit (also tried 91.0.4439.0)
• Hoovering over variables in the Sources tab works
• I have already tried Restore defaults and reload in the Settings (still not working)
• A workaround for now is to right-click on the variable and select Store as global variable. Then we can see the object instance in the console.

我一直在按照以下步骤在 chrome 中进行调试：

1. ALT+ shift+D
2. Windows+ R- 粘贴打开调试窗口的命令
3. ALT+ shift+D在新窗口中打开新选项卡，应在源部分放置 Blazor 文件，但它们不是。

在上述场景中，我尝试使用Ctrl+启动应用程序。F5当我F5在 3) 处启动应用程序时出现错误：截图

我已经配置"inspectUri"在launchSettings.json

在启动应用程序之前，我尝试关闭所有其他 chrome 实例（任务管理器中也没有 chrome 进程）

我使用 VSCode 有一段时间了，由于某种原因 Chrome 调试器不与我合作。附上案例视频：

案件视频

同样，这是我的 launch.json 文件：