如何在 VScode 的开发人员工具中在控制台上获取 JS 的输出答案

【问题标题】：How to get output of JS on console in developers tools in VScode如何在 VScode 的开发人员工具中在控制台上获取 JS 的输出
【发布时间】：2019-06-09 13:28:42
【问题描述】：

我正在vscode 中学习 javascript，并使用 liveServer 扩展来让我的 html 和 js 在 chrome 上运行……我在“inspect element->console”中看到了我的 js 输出，效果很好……现在我已经看到 chrome 开发人员工具集成在 vscode 中，您可以从帮助中在 vscode 中打开它们，然后选择开发人员工具......但问题是我没有在那里得到我的 js 输出......怎么做......我正在从 youtube 上的教程中学习——“https://www.youtube.com/watch?v=W6NZfCO5SIk”，他正在做我想要的时间戳 16:11（可变部分）的确切事情。

我已经尝试更改 liveserver 的端口并将默认浏览器设置为 null 最终打开边缘浏览器。

当我使用实时服务器扩展时，这一切都会发生。

我希望我的 js 输出在 console 上，但我明白了：

[Extension Host] [32mServing "c:\VCodeCpp\" at http://127.0.0.1:5500[39m
workbench.main.js:238 [Extension Host] [36mReady for changes[39m-------

当更改 js 文件中的某些内容时，它会说

[Extension Host] [36mChange detected[39m c:\VCodeCpp\index.js----------

虽然chrome 的输出非常好

【问题讨论】：

标签： google-chrome visual-studio-code chrome-debugging chrome-devtools-protocol

【解决方案1】：

听起来您在使用实时服务器扩展时走在了正确的轨道上，从我在您链接的视频中可以看出，您所指的是 Debugger for Chrome Visual Studio 代码扩展。

这可以在搜索后在扩展面板的 Visual Studio 代码中下载 "debugger for chrome"

通过该链接或直接在 VS Code 中下载如果您将它与 Web 服务器一起使用，您只需首先将调试器链接到服务器所在的端口，您应该会在 chrome-tools 中看到输出。

按照本指南 Getting started with Chrome Tools 在 VS 代码中

我希望这会有所帮助，因为我仍然是回答 SO 的新手，但这看起来我可以做出可靠的尝试。

【讨论】：

感谢您的回答，但我无法链接它...我在 vscode 中的调试器正在侦听的端口上运行 chrome，但仍然无法获得输出...或者可能是我做错了，所以如果你能一步一步地指导我......那真的很好......{我已经为 chrome 安装了调试器}
抱歉，我没有在客户端 JavaScript 上使用它，因此无法提供更多帮助。我会说如果你有一个附加到 HTML 的脚本，你可以打开 HTML 页面，单击检查源/f12 打开 Devtools，然后单击源查看附加到文件的 JavaScript，单击源，如果你有 debugger;打开 devtools 的脚本中的语句，您可以在 JavaScript 代码执行中查看。我希望我能提供更多帮助，但是我只将 devtools 附加到我的 node.js 文件以进行服务器端调试。

【解决方案2】：

除了启用“debugger for chrome”扩展之外，请在 VS Code 的“DEBUG CONSOLE”选项卡中检查 Javascript console.log () 输出，而不是在通常的“TERMINAL”选项卡中。您可能必须按 F5 才能显示输出。

这种“排序”方法对我有用——但它并不完全可靠：我没有得到我期望的所有输出。不过，我认为它“应该”是这样工作的。

【讨论】：