vs code实现调试运行html文件

最新推荐文章于 2025-03-24 18:14:01 发布
最新推荐文章于 2025-03-24 18:14:01 发布
阅读量5.5k 收藏 7
点赞数 2
分类专栏： HTML/CSS/MD 文章标签： html vscode 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45717425/article/details/118903364
版权

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），根据自己的需求选择运行环境并选中，即可在不同的浏览器环境中看到运行结果。
在这里插入图片描述
7.方法3：安装html preview相关的插件并在vs code中实现预览（不建议）
在这里插入图片描述

使用VS Code进行HTML测试
DpgrMl的博客
09-24 374
Visual Studio Code（VS Code）是一个功能强大的代码编辑器，它提供了丰富的功能和插件来帮助开发人员编写和测试HTML代码。点击VS Code底部栏中的"Go Live"按钮（绿色的圆形图标），Live Server将自动打开一个新的浏览器窗口，并在其中显示您的HTML页面。首先，您需要从VS Code的官方网站（https://code.visualstudio.com/）下载并安装适用于您的操作系统的最新版本。使用VS Code的编辑器功能，编写您想要测试的HTML代码。
vscode # 调试html文件
skysys的研究小屋
07-22 390
通过file协议的时候加载其他资源会有跨域限制 VSCode有一个插件“Live Server" 这样可以以localhost的方式避免被跨域限制
vs code 调试html
找个地方……
03-20 7980
这篇文章基于vs cdoe 的typescript 配置, 相关文件结构和ts的配置请参照vs cdoe 的typescript 配置这里的的html调试是基于goole chrome, 如果没有， 请先安装， 关于chrome的安装这里就不做描述了修改main.ts的代码为:function greeter( person ) { return "Hello " + person}let ...
VSCode配置html运行环境
最新发布
qq_38683187的博客
03-24 1437
这里有15个有助于写html的插件，最后两个插件是AI模型，不论是html还是其他高级语言，都能用到。适用于VS Code的中文（简体）语言包。安装完毕之后，点击右下角的“Change Language and Restart”按钮，重新启动服务。自动重命名标签示例：假如你有如下的html代码： 当你修改 标签为 时， 标签会自动变为 。同样，如果你修改 为 ， 也会自动变为 它为HTML文件中的CSS类名和 id 提供智能提示和自动补全功能。它是一个内置的代码片段扩展，它提供了一系列常用
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...
用VSCode运行调试html
晨之清风
09-25 4494
用VSCode运行调试html
vscode使用教程python-VsCode使用教程
weixin_37988176的博客
11-01 478
一、关于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网页（使用本机 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
visual studio code 编译运行html css js文件的教程
08-19
### 编译和运行HTML文件 1. **创建HTML文件**： 在VS Code中，点击左上角的"文件"菜单，选择"新建文件"，然后保存为`.html`扩展名的文件。 2. **编写HTML代码**： 输入HTML结构，例如： ```html <!DOCTYPE ...
VS Code中Python代码调试
weixin_46161645的博客
09-10 4005
Python扩展通过支持多种类型的Python应用调试。简短了解基本调试，见。此外也查看。两个手册展示了像设置断点和步入代码核心技能。学习通用的调试特性，像检查变量、设置断点和其他不依赖语言的活动，回顾。本文主要讲述Python特定的调试配置，包含特定应用类型和远程调试必要的步骤。
VS code 运行&调试opencv C++配置
热门推荐
To Be Continue
10-06 2万+
VS code 运行&amp;amp;amp;amp;调试opencv C++配置 文章目录VS code 运行&amp;amp;amp;amp;调试opencv C++配置1 新建opencv_test.cpp测试代码2 配置launch.json3.tasks.json 之前一直在windows上用Visual studio配置opencv，现在经常使用Ubuntu系统，也需要编写opencv C++代码。当然使用Qt creator配置o...
使用Visual Studio Code调试基于ActionScript的LayaAir HTML5游戏的例子.zip
02-14
然后，通过VSCode的调试面板创建一个新的启动配置，指定运行或调试的命令行参数。例如，我们可能需要指定编译后的HTML5输出目录以及启动浏览器的命令。 调试ActionScript代码时，我们可以利用VSCode的强大断点功能...
vscode快速调试html,vscode怎样调试html
weixin_35387135的博客
06-07 4080
vscode怎样调试html发布时间：2020-12-09 11:00:35来源：亿速云阅读：79作者：小新小编给大家分享一下vscode怎样调试html，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！vscode如何调试html？使用Debugger for Chrome进行调试首先下载对应的插件Ctrl+Shift+x打开插件商店，搜索chrome即可看到该插件，点击安装->...
VS CODE 调试HTML
mlikai123的专栏
07-06 676
作者：IT知元 原文：https://www.itzhi365.com/tech-goods/tech-goods-7.html 安装扩展，在扩展商店搜索Debugger for Chrome 配置调试文件launch.json 点击左侧调试菜单，在下拉框中选择Add Configuration，然后选择Chrome launch.json配置文件内容如下: { "v...
vscode调试html文件
akfs51578的博客
12-19 896
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页面
weixin_42715225的博客
07-17 2042
前言 当我们使用vscode编辑器编辑完一个html页面时，想看下呈现的网页时，可以通过vscode编辑器完成这一过程 使用 vscode安装HTML Snippets插件 操作如下所示: ##### vscode安装View In Browser插件 操作如下所示: ##### 创建index.html文件 操作如下所示: ##### 编辑index.html 快捷生成html的基本信息 操作如下所示： ###### 编辑网页文本文字尺寸为5 操作如下所示: ###### web页面浏览器展示 操作如下所
Vscode运行chrome插件调试HTML代码插件配置
qq_39315954的博客
04-23 3946
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "使用本机 C...
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（安装推荐） ...
VS Code如何运行HTML代码
庸人方自扰，自在就好
12-02 4369
1、打开“扩展”，搜索“open in browser”，安装，如下图： 2、在HTML文件中单击右键，点击“Open In Default Browser”（通过默认浏览器打开）或者“Open In Other Browser”（通过其它浏览器打开），如下图： 3、查看效果，如下图： 大功告成！ ...
vs code 怎么运行html文件
03-17
### 如何在 VS Code 中预览或运行 HTML 文件 要在 VS Code 中预览或运行 HTML 文件，可以通过多种方式实现。以下是几种常见的方法： #### 方法一：使用 Live Server 插件 Live Server 是一款非常流行的插件，能够帮助开发者快速启动本地服务器并实时预览 HTML 文件的变化。安装该插件后，只需右键点击目标 `.html` 文件，在弹出菜单中选择 **"Open with Live Server"** 即可自动打开默认浏览器并加载文件[^4]。 #### 方法二：通过快捷键运行 HTML 文件 如果已经安装了支持 HTML 预览的相关扩展（例如 `HTML Preview` 或其他类似工具），可以直接按下组合键 **Ctrl+Alt+H** 来查看当前编辑的 HTML 文件效果[^1]。此功能适用于某些特定扩展，具体取决于所使用的版本及其配置情况。 #### 方法三：手动设置外部浏览器作为默认程序 除了利用内置的功能外，还可以自定义命令来调用系统上的任意一种主流网络浏览软件（如 Chrome、Firefox 等）。这通常涉及修改用户的环境变量路径以及调整 VS Code 的 launch.json 设置文件内容如下所示： ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Current File in Browser", "url": "${file}", "webRoot": "${workspaceFolder}" } ] } ``` 上述 JSON 片段展示了如何创建一个新的调试会话用于开启指定链接地址指向本机正在处理中的文档实例[^5]。 综上所述，无论是借助第三方插件还是依靠原生能力都可以轻松完成这项任务；对于初学者而言推荐优先考虑前者因为其简单易懂而且兼容性强。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Polaris_T

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

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

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

打赏作者

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

抵扣说明：

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

余额充值