vs code实现调试运行html文件

最新推荐文章于 2024-06-24 20:05:23 发布
最新推荐文章于 2024-06-24 20:05:23 发布
阅读量5.1k 收藏 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中实现预览（不建议）
在这里插入图片描述

Polaris_T
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vscode快速调试html,vscode怎样调试html
weixin_35387135的博客
06-07 3886
vscode怎样调试html发布时间：2020-12-09 11:00:35来源：亿速云阅读：79作者：小新小编给大家分享一下vscode怎样调试html，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！vscode如何调试html？使用Debugger for Chrome进行调试首先下载对应的插件Ctrl+Shift+x打开插件商店，搜索chrome即可看到该插件，点击安装->...
在VisualStudio Code中调试html页面（JS,canvas,easeljs)
junxuezheng的博客
07-31 4930
一、 效果目的 在VSCode里，直接F5打开html页面，并且可以在编辑器里编辑代码 二、 工具准备 安装vs code (在官网下载) 安装nodejs : 输入npm install node 安装canvas：输入npm install canvas 安装easeljs：输入 npm install canvas VSCode 上装一个插件：Debugger for Chrome. 三、...
用VSCode运行调试html
晨之清风
09-25 3890
用VSCode运行调试html
VSCode创建并运行html页面（使用Live Server插件）
最新发布
m0_51371779的博客
06-24 609
打开浏览器，输入网址 http://localhost:【端口号】/【html文件名】.html，我这里是http://localhost:5500/testhtml.html，大家根据自己的端口号和html文件名修改网址。在输入框中输入“xxx.html”，其中xxx是html文件的名字，回车。点击扩展按钮，搜索Live server，点击“安装”按钮。在弹出的窗口中选择刚才新建好的文件夹，点击“选择文件夹”在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...
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运行chrome插件调试HTML代码插件配置
qq_39315954的博客
04-23 3846
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "使用本机 C...
visual studio code 编译运行html css js文件的教程
08-19
### 编译和运行HTML文件 1. **创建HTML文件**： 在VS Code中，点击左上角的"文件"菜单，选择"新建文件"，然后保存为`.html`扩展名的文件。 2. **编写HTML代码**： 输入HTML结构，例如： ```html <!DOCTYPE ...
如何通过vscode运行调试javascript代码
10-15
本篇文章将详细介绍如何在VSCode中运行和调试JavaScript代码，分为两种方法：直接在JS文件中编写代码以及在HTML文件中嵌入JavaScript代码。 **方法一：在JS文件中编写JavaScript代码** 1. **环境配置**： - 首先...
VS code 有插件版
08-18
6. **Debugger for Chrome**: 允许直接在VS Code中调试运行在Chrome浏览器上的JavaScript代码，简化前端调试过程。 7. **Python**: 对Python开发的全面支持，包括语法高亮、代码片段、调试和Linter。 8. **Docker*...
使用Visual Studio Code调试基于ActionScript的LayaAir HTML5游戏的例子.zip
02-14
然后，通过VSCode的调试面板创建一个新的启动配置，指定运行或调试的命令行参数。例如，我们可能需要指定编译后的HTML5输出目录以及启动浏览器的命令。 调试ActionScript代码时，我们可以利用VSCode的强大断点功能...
VSCode调试Html中的脚本 vscode前端常用插件推荐，搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for...
12-13 3429
一、背景 使用VisualStudioCode写了一个简单的Html页面，想调试下其中script标签里的javascript代码，网上查了一通，基本都是复制粘贴或者大同小异的文章，就是要安装Debugger for Chrome插件，修改launch.json配置信息，F5启动，这些都照做了，但是仍有两个问题，一个是Html文件里不能打断点，只能在js文件里面打，二...
vscode使用教程python-VsCode使用教程
weixin_37988176的博客
11-01 443
一、关于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界面
Ice Point.
12-10 6204
一般我们安装完VsCode需要安装很多插件。 若是想在vscode运行我们编好的代码在各浏览器进行运行 那么我们可以安装两个插件： ①：open in browers 使用它的方式有alt+b运行； 或者切换alt+shift+b切换不同浏览器运行； 并且可以运行多个界面 ②view in browers 可以在自己想打开的htm目录中右键，出现view in browser即可运行打开； ...
vscode调试html页面
weixin_42715225的博客
07-17 1985
前言 当我们使用vscode编辑器编辑完一个html页面时，想看下呈现的网页时，可以通过vscode编辑器完成这一过程 使用 vscode安装HTML Snippets插件 操作如下所示: ##### vscode安装View In Browser插件 操作如下所示: ##### 创建index.html文件 操作如下所示: ##### 编辑index.html 快捷生成html的基本信息 操作如下所示： ###### 编辑网页文本文字尺寸为5 操作如下所示: ###### web页面浏览器展示 操作如下所
vscode调试html页面，及配置说明
qq_40833722的博客
09-11 1万+
一、效果目的 1.在VSCode里，直接F5打开html页面，并且可以在编辑器里，进行断点调试js代码； 二、工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件：Debugger for Chrome 如图 这里写图片描述 三、配置文件更改 1.我们先随便写一个html页面 2.然后按F5，出现这个框 3.打开了launch.json这个文件 在 这个文件里添...
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
2301_79002390的博客
01-13 2517
4.Easy LESS (用于实现编写less文件后生成css文件和wxss文件)5.LIve Server(实时预览运行效果）（只要代码有变化就可以自动进行更新）6.Open in browser（运行代码在浏览器打开并且查看运行结果）输入“configure language”，然后回车。1.Auto Rename Tag (同步修改前后标签的插件)在“vscode”顶部会出现一个搜索框。如果有不理解的地方可以加关注私信我。----对于字体的修改和自动保存。下一步，下一步，安装。
vs code 调试html
找个地方……
03-20 7848
这篇文章基于vs cdoe 的typescript 配置, 相关文件结构和ts的配置请参照vs cdoe 的typescript 配置这里的的html调试是基于goole chrome, 如果没有， 请先安装， 关于chrome的安装这里就不做描述了修改main.ts的代码为:function greeter( person ) { return "Hello " + person}let ...
vscode调试html怎么连接localhost失败
07-16
要在VS Code中调试HTML文件并连接到localhost，需要进行以下步骤： 1. 确保你的本地开发服务器正在运行并监听正确的端口。例如，如果你使用的是Node.js的Express框架，你需要确保服务器正在监听正确的端口号（默认为3000）。 2. 在VS Code中打开HTML文件，并确保你已经安装了"Debugger for Chrome"扩展。这个扩展可以帮助你与Chrome浏览器进行调试。 3. 在VS Code中打开调试视图（快捷键：`Ctrl + Shift + D`）。 4. 点击调试视图顶部的齿轮图标，选择"Chrome"作为调试环境。如果你没有安装"Debugger for Chrome"扩展，会提示你安装。 5. 点击调试视图左侧的绿色三角形按钮，选择"Launch Chrome against localhost"配置。 6. 在启动配置中，确保以下几点： - "url"属性的值是你要调试的HTML文件的URL路径，例如`http://localhost:3000/index.html`。 - "webRoot"属性的值是你要调试的HTML文件所在的目录路径。 7. 点击绿色三角形按钮开始调试。 8. 这会自动启动Chrome浏览器，并连接到你的本地开发服务器。在浏览器中打开调试工具（快捷键：`Ctrl + Shift + I`），你就可以在VS Code中设置断点、单步调试等操作了。 如果连接localhost仍然失败，可能是以下几个原因： - 确保你的本地开发服务器正在正确的端口上运行，并且该端口没有被其他进程占用。 - 检查防火墙设置，确保允许VS Code和Chrome浏览器访问本地服务器。 - 确保你的HTML文件是从本地服务器上提供的，并且可以通过浏览器访问。 - 如果你在使用自定义的特定端口，请确保调试配置中的URL和实际的服务器URL匹配。 希望这些步骤能帮助你解决问题并成功连接到localhost进行调试。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Polaris_T

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

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

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

打赏作者

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

抵扣说明：

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

余额充值