问题标签 [chrome-debugging]

将 Angular 升级到版本 8 后，我现在无法在 Visual Studio Code 中运行 Chrome 调试器。

我没有更改类似于以下内容的 launch.json：

我通过以下命令启动 Angular 应用程序

这在升级之前工作了很长时间。我能够启动 Chrome 并在 Angular 中调试不同的组件。现在它所做的只是状态“未验证的断点”

我尝试了以下方法：

• 将 webRoot 文件夹位置更改为不同的可能位置。当我提供应用程序时，我确实注意到输出中有一条新消息。（https://myhost.domain.com:4200/webpack-dev-server/ ℹ ｢wds｣：webpack 输出来自 / ℹ ｢wds｣：404s 将回退到 //index.html）

• 卸载并重新安装 Visual Studio Code 扩展

• 添加 SourceMap：true
• 使用 ng new test-project 创建一个全新的 Angular 项目并尝试调试该项目，它也是这样做的。

这是我的 package.json 的样子：

这是 ng 版本的样子：

我使用 create-react-app 来创建新的反应应用程序。除了在launch.json中添加配置“Chrome-launch”之外，我没有任何改变。调试启动后，它总是需要一些授权。根据我添加到 manifest.json 的 chrome.debugger 文档：

但这并没有帮助。现在我不知道如何通过它。拜托，有人可以给我一个提示如何在没有任何授权的情况下启动 chrome-debugger 吗？我过去多次使用过这个调试器，它从来不需要授权，我不知道发生了什么变化。

浏览器中的行为： launch.json：

清单.json：

包.json：

我正在调查我的 nodejs 脚本中的内存泄漏，通过检查 process.memoryUsage().heapUsed，使用量约为 3000MB。

chrome://inspect 还显示大约 3000MB 的内存使用情况。但是，每次我拍摄堆快照后，保存的堆快照都会减少到 73 MB 左右，process.memoryUsage().heapUsed 也减少到这个数字。

任何人都有关于这是如何发生的理论？

我们的团队在一个 Angular 项目中工作，使用可视化代码作为编辑器。每个团队成员都有通过公共 git 存储库连接的项目的单独副本（同一计算机不同的文件夹）。我们使用 chrome 的调试器调试 Angular 代码。所有成员都使用远程多用户登录在同一个工作站上工作。但一次只有一个人可以使用调试器。

我按照以下教程并在 launch.json 文件中完成了必要的配置

https://briandesousa1.wordpress.com/2018/05/12/using-a-chrome-developer-profile-with-visual-studio-code-debugger/

我的 launch.json 文件如下所示

我们有一个 Angular 应用程序（Angular 8），代码设置在 Ubuntu vm 上。并使用 Visual Studio Code + Remote Development Tool (Microsoft) 进行开发。

虽然开发工作正常，但我在调试应用程序时遇到了问题。

启动.json 配置 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:4200/#", "webRoot": "${workspaceFolder}", "sourceMaps": true, "runtimeArgs": ["--disable-session-crashed-bubble"] }, { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "address": "localhost", "webRoot": "${workspaceFolder}", "sourceMaps": true } ] }

用于端口转发的 vscode 命令： "Forward Port From Active Host"

开发环境的 angular.json 配置 { "dev": { "optimization": false, "outputHashing": "all", "sourceMap": true, "extractCss": true, "namedChunks": true, "aot": true, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": false, "fileReplacements": [ { "replace": "ui/environments/environment.ts", "with": "ui/environments/environment.ts" } ] } }

有了这个，我可以从本地连接到远程，但是，“附加到 Chrome”无法找到文件并产生错误，例如

无法打开“dashboard.man~de6ca691.77f46380879a4a0699b4.js”：无法读取文件（错误：找不到文件（vscode-remote://ssh-remote+angular_serve/kite/angular_proj/dashboard/dashboard.man~de6ca691. 77f46380879a4a0699b4.js))。

这样的远程调试可行吗？我是否缺少任何配置？

当我单击调用堆栈中的不同位置时，Scope 下列出的上下文变量不会改变。我是 JS 新手，熟悉使用 PDB 和 PyCharm for Python 等工具，我可以在调用堆栈的不同位置看到局部变量。有没有一种方便的方法可以在 Chrome 中执行此操作而无需逐个进入每个上下文？

如果我手动运行以下命令，这将有效：

然后我还必须手动在现有会话中打开一个选项卡。然后运行 ​​Selenium 脚本以从手动打开的网页中获取数据。

我想自动化这些步骤并想出了下面的脚本，但不幸的是它不起作用。

有没有办法让脚本在调试模式下打开 chrome，然后打开一个新选项卡，然后使用 selenium webdriver 连接到它？

我最近从 VS 2017 升级到 VS 2019。

在 VS 2017 中，当使用 Chrome 在本地运行 asp.net 应用程序时，我可以在 javascript 代码中放置一个断点，调试器将在断点处停止。这不再适用于 Visual Studio 2019。

我需要做什么才能使用 Chrome 在 Visual Studio 2019 中启用 javascript 调试？我希望能够在 javascript 文件中放置断点并命中它们。

这是我的设置。

1. 我已启用 Javascript 调试。

2. 我在我的 JavaScript 代码中放置了一个断点。此断点位于 *.js 文件中（不在 Razor 视图中）。

3. 断点被忽略。Visual Studio 非常有礼貌地向我显示了一个工具提示，告诉我断点将被忽略。

我正在使用 Google Picker API 在 Google 工作表中开发文件选择器功能。现在我可以显示一个自定义对话框窗口来从我的 Google 驱动器中选择文件，但结果不能完全满足我的需要，我想调试并找出对话框窗口中显示的 HTML 中的任何错误脚本。但是，当我右键单击并在新的弹出窗口中选择检查时，它是灰色且无效的，无法调试。怎么了？我们公司的谷歌经理是否限制用户调试？

这是显示我的问题的屏幕截图：

我正在创建应用程序并在portReact.js上运行它。我想在移动视图中查看我的 React.js 应用程序。如何在 chrome 远程设备中运行 localhost。我可以在 chrome 开发工具上连接远程设备，但我没有在远程设备中运行，抛出错误拒绝连接。localhost5443localhost