VS Code 是一款功能强大的开发工具，而内置浏览器是其中一个非常实用的功能。通过内置浏览器，你可以在同一个编辑器窗口内编辑代码、预览效果、以及调试程序。在本文中，我们将从多个方面来深入了解 VS Code 内置浏览器。
一、内置浏览器的基本使用
1、默认情况下，VS Code 内置浏览器是不开启的，需要在设置中启用。启用方式如下：
"embeddedPreview.showOnStartup": true2、启用后，在编辑器中预览 html 文件时，会默认在编辑器下方打开内置浏览器视图。你可以通过拖动视图边框来调整浏览器的大小，方便查看。
3、当浏览器视图打开时，你还可以通过右上角的按钮来关闭和刷新浏览器。
二、内置浏览器的高级使用
1、内置浏览器还可以作为调试工具来使用。在编辑器中按下 F5 键会打开调试视图，在下拉列表中选择“启用内置浏览器”，即可在内置浏览器中单步执行代码并查看变量。这对于前端开发者来说是一个非常实用的功能。
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}"
},
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "firefox",
"request": "launch",
"name": "Launch Firefox Nightly",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "edge",
"request": "launch",
"name": "Launch Microsoft Edge",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "opera",
"request": "launch",
"name": "Launch Opera",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "pwa-msedge",
"request": "launch",
"name": "Launch Microsoft Edge with PWABuilder",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "pwachrome",
"request": "launch",
"name": "Launch Chrome with PWABuilder",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "firefox",
"request": "launch",
"name": "Launch Firefox Nightly with Debugging Support",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"firefoxExecutable": "${input:firefox}"
}
],
"inputs": [
{
"id": "firefox",
"type": "command",
"command": "extension.firefoxScopes",
"args": {
"includeDefaultScopes": true
},
"description": "Enter the path to a Firefox Nightly build"
}
]2、内置浏览器还支持与外部浏览器进行同步浏览，你可以在设置中选择浏览器，然后通过点击右键选择“通过浏览器查看”来打开外部浏览器。此时，当你在外部浏览器中切换到其他页面时，内置浏览器也会同步跳转到相应的页面。这一点对于网站前后端开发的同步工作非常有用。
"embeddedPreview.syncWithOutWebView": true三、插件扩展
1、如果你需要使用完整的前端开发工具链来完成项目，可以安装对应的插件。例如，在 VS Code 中安装 Live Server 插件，可以通过在编辑器中右键选择“通过 Live Server 打开”。这时，浏览器就会自动打开你的项目，而且可以自动刷新。
2、另外还有一些常用的前端插件，例如 HTML CSS Support、Auto Close Tag、Prettier 等，这些插件可以方便你的编码和格式化工作。
四、总结
在本文中，我们从多个方面深入了解了 VS Code 内置浏览器的使用和扩展。通过内置浏览器，你可以在同一个编辑器窗口内编辑代码、预览效果、以及调试程序。另外还可以通过插件扩展实现与完整前端开发工具链的无缝对接，这对于前端开发者来说是一个非常实用的功能。
原创文章，作者：EPXS，如若转载，请注明出处：https://www.506064.com/n/143121.html
微信扫一扫 
支付宝扫一扫 