用VSCode运行调试html

原创 已于 2024-08-24 13:40:08 修改 · 4.6k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #html #ide

于 2022-09-25 16:18:43 首次发布

陈拓 2022/09/22-2022/09/22

1. 安装Live server插件

  • 点击扩展 > 搜索Live server

  • 安装

  • 设置为谷歌浏览器打开（安装完Live server插件以后需要重启一下VSCode）

点击扩展 > 找到Live server插件 > 点击齿轮 > 选择扩展设置

  • 选择默认为谷歌浏览器

  • 编辑html文件
  • 将html文件所在的位置另存为工作区

2. 运行html文件

  • 右击编辑区

  • 点击Open with Live Server

参考文档

  1. VScode下安装Live Server（自动刷新html页面）
    https://blog.youkuaiyun.com/zhuiqiuzhuoyue583/article/details/126610162

vscode # 调试html文件
skysys的研究小屋
07-22 406
通过file协议的时候加载其他资源会有跨域限制 VSCode有一个插件“Live Server" 这样可以以localhost的方式避免被跨域限制
第九讲使用VSCODE调试Electron程序
星火燎猿
08-19 1876
第九讲使用VSCODE调试Electron程序介绍调试主进程调试渲染进 介绍 前面学员反馈说程序执行的时候遇到问题没办法调试，这节课程主要给大家介绍如何利用vscode来调试我们的Electron程序。前面课程我们已经介绍过，Electron程序包括主进程和渲染进程两部组成。开发过程中调试对于开发人员来说是必不可少的，今天我们就来讲一讲如何利用Vscode调试Electron程序，让你在以后的开发中遇到问题能够快速定位并解决问题！ 调试主进程 首先我们打开vscode如下图所示点击左侧虫子一样的图片
VSCode之调试html
热门推荐
12-08 2万+
一、效果目的 1.在VSCode里，直接F5打开html页面，并且可以在编辑器里，进行断点调试js代码； 二、工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件：Debugger for Chrome 如图 这里写图片描述 三、配置文件更改 1.用VSCode装载项目 2.然后按F5，出现这个框 选择 Chrome 3.然后出现个配置的提示，和打开了la...
【一文搞定，从0开始】安装vsCode及创建Html和点击run查看运行出网页
最新发布
mobangde的博客
05-05 1740
【上榜文章，一文搞定】。简洁明了，没有代码基础小白也能看：也细致分享了每一个步骤及快捷方式。
VSCode调试Html网页（使用本机 Chrome调试）
尹章小又的博客
05-29 1万+
VSCode调试Html网页（使用本机 Chrome调试）,调试js，lanch.json配置 第一步：在VSCode中打开你的代码目录 第二步：Debug->Start Debugging->选择Chrome 第三步：编辑launch.json如下： 代码如下： { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of exis
vscode调试html文件
akfs51578的博客
12-19 932
1. vscode调试html文件 1.1. 使用Debugger for Chrome进行调试 1.1.1. 基于本地file配置方式调试 1.1.2. 基于服务端配置方式调试 1.1.2.1. 启动server端 1.1.2.2. 配置vscode 1.2. 使用Nodejs配置调试 1.3. 参考 1. vscode调试html文件 主要说明使用使用Debu...
vscode快速调试html,vscode怎样调试html
weixin_35387135的博客
06-07 4111
vscode怎样调试html发布时间：2020-12-09 11:00:35来源：亿速云阅读：79作者：小新小编给大家分享一下vscode怎样调试html，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！vscode如何调试html？使用Debugger for Chrome进行调试首先下载对应的插件Ctrl+Shift+x打开插件商店，搜索chrome即可看到该插件，点击安装->...
如何通过vscode运行调试javascript代码
10-15
- 要在VSCode中调试HTML中的JavaScript代码，首先需要配置`launch.json`文件。打开配置，添加如下配置： ```json { "version": "0.2.0", "configurations": [ { "name": "Launch Chrome against localhost", ...
Vscode 中调试Django程序
weixin_44741835的博客
04-08 2028
Debug/调试 可以让我们在特定的代码行上暂停程序的运行。当程序暂停时，我们可以查看变量的数值，在“Debug控制台”中运行代码，或利用“Debug”工具提供的其他功能。启动Debugger/调试器会自动文件（未手工保存的代码行）。需要停止之前运行的程序（CTRL+C）。在一个Terminal上保持程序运行，利用里一个Terminal来调试时也是不可以的。运行的程序使用着端口和请求，会忽略所有的debug调试请求.
VSCode调试C++
mijichui2153的博客
04-03 6399
开源、功能强大(高亮/自动补齐都是最基本的功能)；轻量，相对xcode轻量太多；几乎可以用来编写所有的语言、甚至写文档，只要安装对应插件即可；个性化配置程度高；
使用VSCode 断点调试 js项目，html页面
wanglei0832的博客
11-07 5600
一、效果目的 1.在VSCode里，直接F5打开html页面，并且可以在编辑器里，进行断点调试js代码； 二、工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件：Debugger for Chrome 如图 三、配置文件更改 1.用VSCode装载项目 2.然后按F5，出现这个框 选择 Chrome 3.然后出现个配置的提示，和打开了launch.json这...
vs code实现调试运行html文件
Polaris的博客
07-19 5720
1.打开vs code 2.用Ctrl+Shift+X打开扩展栏，在输入框中输入"live server"，在下方显示的所有扩展中选择"Live Server"并安装 3.编辑你的html文件 4.将.html文件所在位置另存为工作区 5.方法1：打开左侧边栏的资源管理器（或者用Ctrl+Shift+E快捷呼出），选中要调试运行的.html文件，单击右键选择"Open with Live Server"即可在显示.html在浏览器中展现的结果 6.方法2：点击“运行”（F5），根据自己的需求选择运行环境
vscode使用教程python-VsCode使用教程
weixin_37988176的博客
11-01 494
一、关于Vscode1.1 VsCode是个啥Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for ...
vscode进行对html的配置及调试
qq_40688442的博客
02-07 1万+
必要插件安装 Open HTML in Default Browser 用默认浏览器打开 HTML 文件 在资源管理器中，HTML 文件右键显示 在浏览器中打开 菜单 在编辑器中，HTML 文件右键显示 在浏览器中打开 菜单 支持语言：英语(en)、简体中文(zh-cn)、繁体中文(zh-tw)、日语(ja) 快捷键支持: ctrl + 1 Open in Browser（安装推荐） ...
VsCode怎么运行html界面
Ice Point.
12-10 6991
一般我们安装完VsCode需要安装很多插件。 若是想在vscode运行我们编好的代码在各浏览器进行运行 那么我们可以安装两个插件： ①：open in browers 使用它的方式有alt+b运行； 或者切换alt+shift+b切换不同浏览器运行； 并且可以运行多个界面 ②view in browers 可以在自己想打开的htm目录中右键，出现view in browser即可运行打开； ...
VSCode配置html运行环境
qq_38683187的博客
03-24 4069
这里有15个有助于写html的插件，最后两个插件是AI模型，不论是html还是其他高级语言，都能用到。适用于VS Code的中文（简体）语言包。安装完毕之后，点击右下角的“Change Language and Restart”按钮，重新启动服务。自动重命名标签示例：假如你有如下的html代码： 当你修改 标签为 时， 标签会自动变为 。同样，如果你修改 为 ， 也会自动变为 它为HTML文件中的CSS类名和 id 提供智能提示和自动补全功能。它是一个内置的代码片段扩展，它提供了一系列常用
使用VSCode 断点调试 js项目，html页面
weixin_30414305的博客
12-15 1549
一、效果目的 1.在VSCode里，直接F5打开html页面，并且可以在编辑器里，进行断点调试js代码； 二、工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件：Debugger for Chrome 如图 三、配置文件更改 1.用VSCode装载项目 2.然后按F5，出现这个框 选择 Chrome 3...
vs code 调试html
找个地方……
03-20 8015
这篇文章基于vs cdoe 的typescript 配置, 相关文件结构和ts的配置请参照vs cdoe 的typescript 配置这里的的html调试是基于goole chrome, 如果没有， 请先安装， 关于chrome的安装这里就不做描述了修改main.ts的代码为:function greeter( person ) { return "Hello " + person}let ...
vscode调试html页面
weixin_42715225的博客
07-17 2067
前言 当我们使用vscode编辑器编辑完一个html页面时，想看下呈现的网页时，可以通过vscode编辑器完成这一过程 使用 vscode安装HTML Snippets插件 操作如下所示: ##### vscode安装View In Browser插件 操作如下所示: ##### 创建index.html文件 操作如下所示: ##### 编辑index.html 快捷生成html的基本信息 操作如下所示： ###### 编辑网页文本文字尺寸为5 操作如下所示: ###### web页面浏览器展示 操作如下所
为什么vscode运行不了HTML文件
04-17
<think>好的，用户现在的问题是如何在VSCode中正确运行HTML文件。根据之前的引用内容，我需要综合已有的解决方案来给出合适的回答。首先，用户提到VSCode报错，可能是在用Node.js运行HTML，但Node.js不支持直接运行HTML，应该用浏览器或者Live Server扩展。 首先，我得明确用户的问题场景：他们可能在尝试用错误的命令（比如node 101.html）导致语法错误，因为Node.js无法解析HTML标签。这时候需要引导他们使用正确的方法，比如直接浏览器打开或者使用Live Preview、Live Server这样的扩展。 接下来，查看引用中的解决方案。引用1指出Node.js不能运行HTML，应该用浏览器。引用2提到安装VSCode Live Preview扩展来预览。引用3是解决Live Server找不到Chrome路径的问题，引用4是关于编码问题，可能暂时不相关，但需要留意。 用户的需求是正确运行HTML文件，所以解决方案应包括几种方法：直接浏览器打开、使用Live Preview、使用Live Server。同时，如果用户遇到Live Server的路径问题，需要包含修改设置的步骤。 需要分步骤说明每个方法，确保结构清晰。比如： 1. 直接浏览器打开：右键文件选择在浏览器打开，或者复制路径到浏览器地址栏。 2. 使用Live Preview扩展：安装步骤，如何使用。 3. 使用Live Server扩展：安装和配置，特别是路径问题的解决方法。 还要注意可能的错误情况，比如Live Server找不到Chrome，这时候需要指导用户修改settings.json中的路径，替换反斜杠为斜杠。 另外，需要提醒用户检查扩展是否安装正确，或者是否有其他配置问题。最后总结不同方法的适用场景，帮助用户选择最合适的方案。 需要确保回答的语言简洁明了，步骤详细，避免使用专业术语过多，让用户容易理解。同时，引用相关的引用来源，比如引用1、2、3中的解决方案，但不要直接复制，而是用自己的话组织内容。</think>在 VSCode 中正确运行 HTML 文件的解决方案如下： --- ### 一、直接通过浏览器运行 1. **右键文件选择浏览器打开** 在 VSCode 资源管理器中右键点击 HTML 文件 → 选择「在默认浏览器中打开」。 2. **手动输入路径访问** 复制 HTML 文件路径（如 `C:/project/index.html`），粘贴到浏览器地址栏中直接访问[^1]。 --- ### 二、使用 VSCode Live Preview 扩展 1. **安装扩展** - 打开 VSCode 扩展市场（`Ctrl+Shift+X`） - 搜索并安装 **Live Preview**（微软官方扩展） 2. **启动预览** - 打开 HTML 文件 → 点击右上角「预览」图标 - 或右键文件 → 选择「Live Preview: Show Preview」 - *优势：无需保存文件即可实时刷新*[^2] --- ### 三、使用 Live Server 扩展 1. **安装扩展** 搜索并安装 **Live Server**（Ritwick Dey 开发）。 2. **运行服务器** - 右键 HTML 文件 → 选择「Open with Live Server」 - 自动启动本地服务器（默认端口 `5500`） 3. **路径报错修复**（若出现 *找不到 Chrome* 错误） - 右键桌面 Chrome 快捷方式 → 属性 → 复制「目标」路径 - 在 VSCode 设置中搜索 `liveServer.settings.AdvanceCustomBrowserCmdLine` - 粘贴路径并替换 `\` 为 `/`，例如： ```json "liveServer.settings.AdvanceCustomBrowserCmdLine": "C:/Program Files/Google/Chrome/Application/chrome.exe" ```[^3] --- ### 四、常见问题排查 | 问题类型 | 解决方案 | |-----------------------|---------------------------------| | 浏览器打开无反应 | 检查文件路径是否含中文/特殊字符 | | Live Server 启动失败 | 关闭防火墙或切换端口（如 `8080`） | | 页面显示乱码 | 在 HTML 中声明 `<meta charset="UTF-8">` 或通过终端命令 `chcp 65001` 切换编码[^4] | --- ### 总结建议 - **轻量调试** → 使用 Live Preview（内嵌预览，适合快速验证） - **完整项目** → 使用 Live Server（模拟真实服务器环境） - **特殊需求** → 手动配置浏览器路径或编码格式
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨之清风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值