用VSCode运行调试html

最新推荐文章于 2024-04-24 10:06:36 发布
最新推荐文章于 2024-04-24 10:06:36 发布
阅读量3.7k 收藏 18
点赞数 3
分类专栏： Script脚本 文章标签： vscode html ide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chentuo2000/article/details/127039234
版权

陈拓 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.csdn.net/zhuiqiuzhuoyue583/article/details/126610162

晨之清风
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
HTML网站调试技巧与工具推荐与高效开发实践
吃不胖.
10-24 216
Visual Studio Code是一个流行的代码编辑器，它有许多有用的扩展，包括HTML、CSS和JavaScript的代码高亮和自动补全插件，可以快速生成HTML结构和样式，还有内置的调试器，可以方便地调试JavaScript代码。调试HTML网站是开发过程中非常重要的一步，使用合适的工具和技巧可以帮助你更快速和有效地修复问题。Sublime Text是另一个流行的代码编辑器，它有许多有用的插件，如HTML、CSS和JavaScript代码高亮、自动补全等等，还有快捷键和命令面板等等很多便捷的功能。
如何使用VSCode 运行调试插件代码
10-15
主要介绍了如何使用VSCode 运行调试插件代码的相关资料,需要的朋友可以参考下
VScode使用教程（HTML、C++、Python、Java）
liyankang的博客
04-21 2085
vscode使用教程
vscode快速调试html,vscode怎样调试html
weixin_35387135的博客
06-07 3797
vscode怎样调试html发布时间：2020-12-09 11:00:35来源：亿速云阅读：79作者：小新小编给大家分享一下vscode怎样调试html，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！vscode如何调试html？使用Debugger for Chrome进行调试首先下载对应的插件Ctrl+Shift+x打开插件商店，搜索chrome即可看到该插件，点击安装->...
【VSCode运行Python3.6.5项目 无法debug调试的解决办法】
operatevip的博客
10-23 965
通过度娘找到解决方法是：因为新的python插件不支持python3.7以下版本，需要将vscode中python的插件降级，才能对python3.6的项目DEBUG。但试过多个博主推荐的2022.6.0版本以及2021.12的版本都不行，debug时一闪而过就结束了。最近将VSCode升级为1.69.1版本，结果插件全部升级了一遍，导致原来能运行DEBUG的python3.6.5项目只能运行不能DEBUG了。最后，试着继续降级到2021.7的版本终于可以DEBUG python3.6.5的项目。
教你快速使用VSCode编写HTML文件
热门推荐
半生瓜のblog
05-09 4万+
我的小站——半生瓜のblog 教你快速使用VSCode编写HTML文件1.配置2.更改默认打开浏览器 1.配置 首先在官网下载VSCODE并完成安装，[vscode官网]。(https://code.visualstudio.com/) 汉化——打开软件，左侧工具栏最后一个是插件栏，点击去搜索Chinese,选择第一个安装，如图。 安装相关插件——搜索html,安装如下插件，如图。 选择左上角文件，打开文件夹。 然后新建文件，文件后缀是.html。 打开是一片空白，输入一个.
如何在vscode里面快速运行html代码（包含如何在vscode里面编写html代码）
快乐学习
11-16 2万+
​前言： 1.如何在vscode编写html代码在我的另一篇文章当中有详细教程，这是超链接。 2.很多小伙伴编写了html代码后，在vscode里面右键找不到如何去运行代码，或者运行代码的方式很不方便。那么就要在vscode里面下载一个插件，这个插件运行html代码会非常的方便没有下载vscode插件之前，右键是没有这个open in Default Browser，就找不到怎么样运行vscode里面的html代码了。 三、额外知识（vscode选择html代码在哪个浏览器页面运行）
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运行chrome插件调试HTML代码插件配置
qq_39315954的博客
04-23 3820
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "使用本机 C...
在 VS Code 中运行 html 用到的插件
Evelyn_178的博客
07-11 1902
启动一个具有静态和动态页面实时重新加载功能的开发本地服务器，用于实时预览运行效果。使用 open in browser 运行代码时，只要代码有变动，就需要手动刷新重新预览页面运行结果，而 Live Server 可以自动刷新运行结果。运行代码片段或代码文件的多种语言：C、C++、Java、JavaScript, PHP、Python、Perl、Perl 6、Ruby、Go等40多种语言和自定义命令。在默认浏览器或应用程序中打开当前文件，用于运行代码。选择在其他浏览器中运行。选择在默认浏览器中运行。
vscode插件合集（20190814）part2
08-15
vscode最新插件合集（20190814）part1，共2个分包（part1/2），都下载后用命令“copy /b extensions.zip.rm1+extensions.zip.rm2 extensions.zip”合并再解压。 包合以下插件： wholroyd.jinja-0.0.8 daltonjorge....
electron-typescript-webpack-vscodedebug:使用vscode进行调试，使用Electronic＆Typescript
03-04
基于electron-quick-start-typescript项目，增加了webpack配置，设置vscode调试模式。 克隆并运行以快速查看Electron的运行情况。 这是的端口-基于Electron文档中的《的最小的Electron应用程序。 将此应用程序与...
如何使用VSCode愉快的写Python于调试配置步骤
12-25
从我的使用经验出发，可以说VSCode用来写Python真的是再合适不过了，你将体验到丝滑的编程体验和无限扩展的可能。而且，如果你的项目是包含多种语言的，比如Web开发，你不必再开多个编辑器和其他工具，因为这一切都...
vscode代码编辑器-其他
06-12
轻松编辑，构建和调试本质上，Visual Studio Code具有闪电般的快速源代码编辑器，非常适合日常使用。凭借对数百种语言的支持，VS Code可以帮助您通过语法高亮显示，括号匹配，自动缩进，选择框，摘要等即时提高工作...
vscode-monokai-night:完整，黑暗和简约的Monokai风格主题
05-04
物语之夜 一个完整，黑暗和简约的Monokai风格主题。 特征： 完成：每个可主题化的组件均已自定义。 深色：比默认的Monokai... 如果要发出请求，则可以使用调试扩展。 执照 麻省理工学院:copyright:Fabio Spampinato
基于vscode的c++开发(Windows)
最新发布
weixin_45111135的博客
04-24 663
链接器将各个目标文件中的符号引用解析为实际的内存地址，并且将程序所需要的库文件链接到最终的可执行文件中。语法： add_library(libname [SHARED|STATIC|MODULE] [EXCLUDE_FROM_ALL]语法： add_subdirectory(source_dir [binary_dir] [EXCLUDE_FROM_ALL])GCC编译器支持编译go、c、c++等语言。语法： ： project(projectname [CXX] [C] [Java])
VSCode断点调试（ROS）
不知语冰
04-19 730
中打ROS，可以自动补全ROS: Attach 或 ROS: Launch。其中，ROS: Attach 表示对一个可执行节点(node) debug，ROS: Launch 表示对一个launch 文件 debug。剩下的就跟pycharm差不多了，2处进行单步调试，3-4处进行变量监视（右键添加到监视），感觉比起pycharm变量很多不全的…，5处可对变量进行修改和计算，不需要加。，弹出一些模板，点默认gdb即可，会在.vscode文件夹下生成。，6处是程序的调用关系，7处切换终端等。
vscode 打代码光标特效
q4717529的博客
04-15 1029
在设置里面找到settings 进入之后在代码最下方加入此代码。
vscode中使用rust的跳转定义时，rust-analyzer报错“未找到定义”，如何解决？
用沸腾的热血，支付我们的人生吧！
04-23 316
如上图，红色箭头所指的，是我删除的项目，根据这个报错，即我虽然删除了这个项目，但rust-analyzer的某个配置保留了这个项目的路径，导致报错。我遇到的错误是，在编写的rust程序中想要跳转到当前变量或者函数的定义处，但按下F12无法跳转，且提示“未找到xxx定义”。检查程序代码，发现也没有问题，cargo check可以运行，代码没有问题，cargo run可以运行，代码正常运行。于是，我将已经删除的项目对应的路径，也删除，然后将新建的项目路径添加上去，再重新加载，发现rust程序即可以跳转了。
vscode运行HTML
08-11
你可以使用 Visual Studio Code（简称VS Code）来运行HTML文件。下面是运行HTML文件的步骤： 1. 首先，确保你已经安装了VS Code。你可以从VS Code的官方网站（https://code.visualstudio.com/）下载并安装它。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

晨之清风

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

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

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

打赏作者

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

抵扣说明：

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

余额充值