太离谱了，Edge浏览器竟然成了VS Code插件

Edge浏览器

在插件栏搜索【Microsoft Edge Tools for VS Code】，并安装，然后左侧会出现Edge浏览器的图标，点击之后，展开TARGETS下拉菜单，点击【Launch Instance】按钮，就可以出现一个示例项目，同时右侧会紧跟着弹出两个Edge选项卡，一个DevTools用于调试，另一个显示网页。

最离谱的是这个网页上方还有地址栏，输入【bing.com】就可以跳转到网页，网页下方可选屏幕尺寸，预设了一些常见设备，比如iPhone之类的，点击之后，右侧就只有一小条，简直是摸鱼神器，堪称摸鱼界的天花板了。

不过仔细想想也合理，毕竟据说Vscode是用electron做的，所以内置一个浏览器，不是理所当然的么。

开发工具

示例程序

下面回到正题，微软官方提供了许多用于测试的示例项目Demos，其中名为【demo-to-do】的文件夹便是DevTools的测试项目。如果不想克隆整个项目，可在download-directory网站，输入链接https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do并回车，从而将专门用于DevTools的测试项目打包成zip并下载。

此项目中有一个【index.html】的网页文件，右键单击，选择【Open with Edge】->【Open Brower with DevTools】，即可同时打开网页和开发工具。下图中，红框框起的两个按钮，分别用于关闭浏览器或者开发工具，从而节省屏幕。

双击开发工具CSS编辑器中的任意条目，都会打开其对应的CSS源文件，从而快速编辑。当CSS文件被更改后，点击浏览器的刷新按钮就可以更新。

代码调试

如果想调试js代码，则必须安装Node.js，这也几乎是本地调试js代码的必备工具了，对于一个想调试js代码的人来说，并不存在什么问题。

然后点击VS Code左侧的调试按钮，就是有个小Bug趴在三角形上的按钮，进去之后，点击【运行和调试】，选择Node.js作为调试终端。

将示例项目中的【to-do.js】打开，在第112行设置断点，即鼠标放在行号左侧，出现暗红色圆点时点击，使之变红。然后在浏览器窗口的【Add a task】后面随便输入一个待办事项的名称，并回车，从而下方会出现一个待办事项。点击这个待办事项，js代码就会在断点处暂停。这些调试流程对于程序员来说并不新鲜，这里只是介绍一下在VS Code中调试js的基本方法。