浅析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的文件表示浏览器图标即可
报错示意图 浏览器图标 设置好的图标示意图 将该文件放在根目录下示意图

相关推荐
我一定会有钱1 小时前
打造完美工作流:Git 配置”一次推送,三端同步”(Gitee/GitCode/GitHub)
开发语言·windows·vscode·搜索引擎·gitlab·github·visual studio code
zhanghaha13144 小时前
HTML系列教程:2_HTML 编辑器(零基础超详细讲解
前端·编辑器·html
呆呆敲代码的小Y5 小时前
Magic Resume 实战:开源 AI 简历编辑器(多模型 + 本地存储)
人工智能·开源·编辑器·magic resume·简历编辑器
csdn_aspnet1 天前
2026 年 9 款最佳开源 AI 编码助手及常见问题解答
vscode·continue·cline·goose·ai编码·aider·opencode
任逍遥20111 天前
免费!VS Code 行为树编辑器 micBT:行为树生成、编辑、推演、调试
vscode·行为树·vscode插件·micbt
拂拉氏1 天前
【知识讲解】 Linux中vim编辑器的学习与使用
linux·编辑器·vim
林三的日常1 天前
【无标题】
java·spring boot·vscode·调试·后端开发
Super 含1 天前
Android 包体积优化(一):APK 到底大在哪里?从 APK 结构到体积分析
android·ide·vscode
冷雨夜中漫步1 天前
IDEA CodeStyle代码风格格式化模板
java·ide·intellij-idea
愚公搬代码1 天前
【愚公系列】《Web应用安全》005-Visual Studio Code编辑器的使用
前端·安全·编辑器