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

相关推荐
sunoo-22927 分钟前
【嵌入式 ARM 学习第十二天】SPI 裸机驱动 + I2C 触摸屏驱动 + 三大串行协议深度对比
arm开发·笔记·vscode·学习·imx6ull
kiss strong1 小时前
idea显示前进后退按钮
java·ide·intellij-idea
ShuiShenHuoLe3 小时前
Visual Studio 2022 Community 下载指南
ide·visual studio
Sunny_GMF4 小时前
所见即所得编辑器原理实战:源码与渲染永不失真的三层一致性设计(Markdown/CodeMirror 装饰)
microsoft·编辑器·ai编程·harmonyos
一路向北he14 小时前
trae或者vscode定义了文件,但是文件不亮是灰的
ide·vscode·编辑器
bro_Java6661 天前
《栈与队列:数据结构的“双生花”》
java·数据结构·编辑器
u0111026751 天前
网页图片编辑器如何添加文字:字体、换行与导出一致性
图像处理·人工智能·ai作画·编辑器
Pointer Pursuit1 天前
编辑器Vim
linux·编辑器·vim
VIP_CQCRE1 天前
在 OpenCode IDE 中接入 Ace Data Cloud:让 VS Code、Cursor、Windsurf 都能调用统一 AI Coding 能力
vscode·ai编程·开发工具·opencode·acedatacloud
sunburn-1 天前
Java 排序算法详细教学:从冒泡排序到快速排序
java·开发语言·数据结构·ide·算法