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

相关推荐
BIBI20492 小时前
Windows 下彻底删除 VsCode
windows·vscode
程序猿小D2 小时前
第11节 Node.js 模块系统
服务器·前端·node.js·编辑器·vim
湮雨塵飛2 小时前
ESP32开发之LED闪烁和呼吸的实现
vscode·嵌入式硬件·esp32·freertos·呼吸灯
HealthScience5 小时前
实现Cursor + Pycharm 交互
java·ide·intellij-idea
xiaobobo33306 小时前
解决vscode打开一个单片机工程文件(IAR/keil MDK)因无法找到头文件导致的结构体成员不自动补全问题。
vscode·stm32·无法找到头文件·结构体成员不补全
BIBI20496 小时前
VsCode 安装 Cline 插件并使用免费模型(例如 DeepSeek)
vscode·deepseek·cline
码码哈哈爱分享12 小时前
Cursor 编辑器介绍:专为程序员打造的 AI 编程 IDE
人工智能·编辑器
xiezhr13 小时前
阿里也出手了!灵码AI IDE问世
ide·开发工具·通义灵码
Huazzi.19 小时前
【Vim】高效编辑技巧全解析
linux·编辑器·vim
chenzhanpeng_20 小时前
vscode 配置 QtCreat Cmake项目
ide·vscode·qt·编辑器·qt6.3