浅析VSCode中Open with live server

一、使用方式

在html文件中右键,选择"open with live server"
VSCode界面示意图

二、原理和功能

1.打开的是哪个浏览器

打开的浏览器是电脑的默认浏览器,默认浏览器可以在浏览器的"设置"中自行设置

2.原理

在主机的5500端口开一台内置的小服务器,并且将当前VSCode打开的文件夹中的所有文件作为这台服务器的根资源进行使用
VSCode右下角显示的端口号 在浏览器中打开的文件地址栏显示

127.0.0.1表示本主机,冒号后面写主机号
查看当前服务器端口

3.报错

打开html文件之后,会发现浏览器报错:找不到favicon.ico,这说明根目录下没有图标文件,只需要在根目录下放一个名为favicon.ico的文件表示浏览器图标即可
报错示意图 浏览器图标 设置好的图标示意图 将该文件放在根目录下示意图

相关推荐
Codiggerworld2 小时前
Vim 实战:在 VS Code、JetBrains、终端里玩转 Vim
编辑器·vim·excel
AD钙奶-lalala4 小时前
Android Studio新建项目默认不使用Compose模版
android·ide·android studio
专注VB编程开发20年8 小时前
开发VS2026插件最佳方案:老式VSIX EnvDTE
ide·c#·visual studio
专注VB编程开发20年8 小时前
VS2026最新ide插件VisualStudio.Extensibility进程外 OOP 新模型
ide·c#·visual studio
互联网散修9 小时前
鸿蒙实战:图片编辑器——文字功能完全实现
华为·编辑器·harmonyos·图片编辑添加文字
在水一缸10 小时前
深度解析:基于 3D Gaussian Splatting 技术的编辑器实践与原理
计算机视觉·3d·编辑器·aigc·3d建模·nerf·3d编辑器
稷下元歌10 小时前
7天学会plc加机器视觉关于运动控制部份,配套视频在bib
开发语言·c++·git·vscode·python·docker·pip
专注VB编程开发20年10 小时前
VisualStudio.Extensibility跨进程插件是防卡死IDE?
ide·visual studio
wenzhangli71 天前
AI-IDE 关键技术解析:从自然语言到企业级智能开发平台的架构演进
ide·人工智能·架构
${王小剑}1 天前
在pycharm中配置pyside6
ide·python·pycharm