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

相关推荐
花间相见几秒前
【终端效率工具01】—— Yazi:Rust 编写的现代化终端文件管理器,告别繁琐操作
前端·ide·git·rust·极限编程
Webgiserin3 小时前
nvm+vscode配置安装暂记
ide·vscode·编辑器
charlie1145141913 小时前
嵌入式C++工程实践——第13篇:第一次重构 —— enum class取代宏,类型安全的开始
开发语言·c++·vscode·stm32·安全·重构·现代c++
无限进步_4 小时前
【C++】寻找字符串中第一个只出现一次的字符
开发语言·c++·ide·windows·git·github·visual studio
专职4 小时前
cursor中与vim插件冲突时的配置
编辑器·vim·excel
Just right5 小时前
pycharm卡死在Connected to pydev debugger
ide·python·pycharm
传说中胖子6 小时前
Magento服务器VSCode开启XDebug方法
服务器·vscode·php
秉寒-CHO7 小时前
从 PyCharm 到 Cursor:我的 LLM 项目 AI 编程工具链全解析
ide·人工智能·pycharm
无限进步_7 小时前
【C++】私有虚函数与多态:访问权限不影响动态绑定
开发语言·c++·ide·windows·git·算法·visual studio
拆房老料8 小时前
5分钟上手 OnlyOffice 连接器,打通业务系统与文档编辑器
编辑器·开源软件·js