问题标签 [chrome-debugging]

我正在尝试使用 VSC 调试 Vue 应用程序。我有以下launch.json

}

我还在项目的根目录下添加了下面的 vue.config.js 文件

}

要调试 Vue 应用程序，我在终端使用“npm run serve”，单击左侧菜单中的“运行和调试”选项，然后选择我的调试配置，标题为“针对 localhost 启动 Chrome”。

我无法绑定任何断点，即断点是代码中未填充的灰色圆圈。

不知道接下来要尝试什么，在线搜索中没有出现关于可能是什么问题的内容。

从 google devtools 设备当我选择像像素这样的 android 手机时，所有图像都可以完美加载，但由于某种原因，有些图像无法在 iphone 设备上加载：

没有在 chrome devtools iphone 设备上加载图像可能是什么问题？

以前版本的包“angular-devkit/build-angular”：“0.1102.10”，即“0.1102.9”，工作正常，我可以像往常一样访问浏览器中的断点。但是对于“0.1102.10”，它会在“npm start”（成功的“npm install”之后）带来以下错误。

如果我将 'angular-devkit/build-angular' 的版本提升到 '12.2.6'，以匹配其余的 '@angular/XXX' 包，应用程序会运行，但它存在不停止的问题'npm start' 命令在浏览器中的断点。

此外，让我注意到问题是更新到 ng 13。它也运行良好，但不会在浏览器的断点处停止。我使用以下站点https://update.angular.io/?l=3&v=12.0-中提到的以下命令进行了更新13.0

所以我的问题是，我想更新到更现代的 Angular 版本，但是这些现代版本的问题是不能在浏览器的断点处停止（也不是 VS Code）。这个项目从 Angular 6 开始，从那时起我已经能够成功更新 Angular。我认为，这是我在更新时遇到的第一个严重问题。

注意：这是一个 ASP.Net Core / Angular 项目，我使用“dotnet watch run”和“npm install/npm start”运行我的项目。

通过本教程，断点也不适用于 VS Code 中的这个项目： https ://www.c-sharpcorner.com/article/debug-angular-in-vs-code/#:~:text=Debug%20Angular% 20in%20VS%20Code%201%20Create%20an,like%29%203%20Configure%20Debug%20Environment%3B%204%20Start%20Debugging%3B

还要注意：“调试器；” 关键字也没有应有的断点。

以下是一些文件详细信息：

这是我的 Angular.json

这是 package.json

这是launchSettings.json

这是 main.ts

这是 polyfills.ts （删除大部分评论）

这些文件是当应用程序使用断点工作的时候。

使其不起作用的更改是：

• 将“@angular-devkit/build-angular”换成下一个版本。如上所述，在“npm start”时会引发错误
• 将“@angular-devkit/build-angular”换成更高的版本。例如 12.2.6 以匹配其余的 '@angular/XXX' 包。哪个运行但没有断点工作。
• 将所有内容升级到 Angular 的下一个版本，版本 13。使用 'npx @angular/cli@13 update @angular/core@13 @angular/cli@13' 命令。如以下站点 https://update.angular.io/?l=3&v=12.0-13.0所述。它也运行但没有断点工作。

提前致谢。

我最近了解了“eventloop”和“message queue”，现在对事件循环如何帮助执行在堆栈变空后在“message queue”中排队的方法有了很多了解。但是在这里我有一个疑问，在调试 chrome 浏览器的堆栈中可用的方法时，无论如何我们可以确定“消息队列”中存在哪些方法，直到当前调试点，哪些方法将由当前堆栈为空时的事件循环。？如果我的问题有误或我的理解有误，请纠正我，因为我对这些主题不熟悉。

例如：

const sayHello = () => console.log("Hello");

const sayBye = () => console.log("Bye");

设置超时（再见，1000）；

问好（）;

根据我的理解，在上面的示例中，sayHello() 将首先执行，同时 sayBye 函数保留在消息队列中，直到当前堆栈被清空，由事件循环处理。因此，在执行 sayHello() 时，如果我当时在 sayHello()（在 Chrome 浏览器中）中放置一个断点，那么浏览器工具或任何窗口中的任何位置我们都可以看到并可视化 sayBye 保留在'消息队列'？

我们正在将 webpack 构建工具实现到我们的 SPA 项目中（这非常大）。我们正在使用 typescript，bundle 的目标是 ES6 和 ES 模块系统。

我的问题是关于 webpack 生成的源映射及其在调试器中的行为。

我们想要源映射中的原始代码，所以我们在 webpack.config.js 中设置：

在 chrome 调试器中，当我导入任何模块时，我没有得到任何关于它的提示/信息/预览。在下面的示例中，调试器（光标提示）或控制台（参考错误）都无法识别导入的类 Bar。

这种行为正常吗？是否有可能配置 webpack 以生成包含模块信息的源映射？我们的 webpack/tsconfig 配置错了吗？