前言

要在VS Code中启动Chrome或Microsoft Edge中调试任何Web程序，您只需按F5或选择菜单"运行"->"启动调试"来启动会话。

你可以选择在Chrome、Edge或Node.js中进行调试。

Edge DevTools

如果选择了Edge进行调试，你会发现调试工具条上多出了一个名为“Open Browser Devtools”的按钮。

点击按钮，如果是首次执行，VS Code会提示安装Microsoft Edge DevTools for Visual Studio Code扩展：

然后，你就可以打开Edge DevTools，可以看到，与浏览器的开发者工具类似，"Elements"选项卡用于检查DOM，"Network"选项卡用于查看在浏览器中运行的Web程序的网络请求:

高级设置

打开扩展设置，可以看到有一个Headless选项，选中它（需重启VS Code）:

再次启动调试，你会发现Edge DevTools中多了一个浏览器页面。

现在，你就可以在不离开VS Code的情况下更改代码或者CSS，直接看到修改效果：

结论

在VS Code中直接调试Web程序，感觉是不是很酷！

如果你觉得这篇文章对你有所启发，请关注我的个人公众号”My IO“，记住我！

在VS Code中直接调试Web程序，是怎样一种体验？相关推荐

在VS Code中执行SQL查询，是怎样一种体验？
上次,我们演示了"如何使用Nuget包XPlot.Plotly.Interactive在.NET Interactive notebook中绘制图表". 这次,我们使用Nuget包 ...
在VS2010中F5调试Silverlight程序时，提示“无法启动调试,找不到Microsoft Internet Explorer”...
在VS2010中F5调试Silverlight程序时,提示"无法启动调试,找不到Microsoft Internet Explorer". 原因:是因为注册表中的IE项出了问题所 ...
Web Template Studio 发布！在 VS Code 中轻松创建 Web 应用
作为一个 Web 应用开发者,Scaffolding Tool(脚手架工具)一定是在创建项目时的重要工具.许多开发者会习惯于使用基于 CLI 的脚手架工具来创建 Web 应用,也有许多开发者喜欢使用类 ...
在 Tomcat 中部署 Java Web 程序 ( jar cvf *.war */. ) war 包
本文基本转自:http://www.blogjava.net/ocean07000814/articles/331694.html 主要讲的是在 Tomcat 中部署 Java Web 应用程序.因为 ...
程序调试篇 | 如何在Pycharm中高效调试Python程序，高效找bug！！！
1.首先使用Pycharm打开你要调试的程序 2.步骤详解如下图
python程序代码大全-调试Python程序代码的几种方法总结
程序能一次写完并正常运行的概率很小,基本不超过1%.总会有各种各样的bug需要修正.有的bug很简单,看看错误信息就知道,有的bug很复杂,我们需要知道出错时,哪些变量的值是正确的,哪些变量的值是错误 ...
python程序-调试Python程序代码的几种方法总结
程序能一次写完并正常运行的概率很小,基本不超过1%.总会有各种各样的bug需要修正.有的bug很简单,看看错误信息就知道,有的bug很复杂,我们需要知道出错时,哪些变量的值是正确的,哪些变量的值是错误 ...
利用JCreator调试web程序
使用eclipse,idea等等工具开发java时,都比较笨重,因此,笔者想着精简的原则,尝试使用Jcreator开展调试,查阅了部分网友的材料,加上自己的琢磨,现将心得和大家分享下. 当前环境:JC ...
android+模拟器上gdb,使用gdb在Android Emulator中进行调试c程序
1.下载Android Debugging Utilities 2.启动Android Emulator模拟器 $ emulator @1.5_R2 3.把gdb和调试文件以及源代码放到模拟器上 $ ...

在VS Code中直接调试Web程序，是怎样一种体验？

前言

Edge DevTools

高级设置

结论

在VS Code中直接调试Web程序，是怎样一种体验？相关推荐

最新文章

热门文章