如何在VSCode中将html文件打开到浏览器

这篇具有很好参考价值的文章主要介绍了如何在VSCode中将html文件打开到浏览器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


一、介绍

近期在学习前端内容,遇到了这个问题,来总结记录并分享一下。

html文件一般可右击选择打开方式,通过浏览器打开
我平时用idea也可以直接在右上角点击浏览器按钮打开(这也是我想用idea来写html的原因)
但大家都在用VSCode,所以肯定有它的强大之处,不然也不会这么受欢迎。
在vscode中,想要将html文件打开到浏览器有两种方式,一个是debug模式一个是下载插件。
接下来就看以下这两种方式。

二、打开方式

前提,已安装浏览器,推荐谷歌的Chrome浏览器,调试界面以及性能都是杠杠的

1. VSCode自带工具打开

VSCode自带的调试工具就可以打开html到浏览器
首先你要写一个html页面,可在文本编辑器中写好后改后缀为html
也可直接在VSCode中创建的空的html文件中输入html弹出快捷创建方式,选择html:5即可创建模板
vscode中的html文件在浏览器运行,前端,vscode,html,ide
然后编写简单的几条信息,用于展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML网页学习</h1>
    <p>使用html来实现网页的界面显示信息,编写一篇文章</p>
    床前明月光
    <!-- 换行 -->
    <br>
    十步杀一人
</body>
</html>

在VSCode中打开此html(html文件右键使用VSCode打开即可)
在VSCode中选择左边的debug图标,然后选择蓝色框的Run and Debug按钮,再选择浏览器即可打开
如图
vscode中的html文件在浏览器运行,前端,vscode,html,ide
打开的界面如下
vscode中的html文件在浏览器运行,前端,vscode,html,ide
此时在VSCode中会出现一个调试bug的一排按钮,有拖动、暂停、停止、重启等,如下
vscode中的html文件在浏览器运行,前端,vscode,html,ide

2. 使用插件(Live Server)打开

在VSCode中左侧栏选择俄罗斯方块(Extensions或者Ctrl+shift+X)打开插件安装界面
在搜索框中输入Live Server
vscode中的html文件在浏览器运行,前端,vscode,html,ide
install安装即可,我这里是已经安装好的界面
然后到html中鼠标右键选择Open with Live Server或者直接快捷键Alt+L然后Alt+O即可打开
vscode中的html文件在浏览器运行,前端,vscode,html,ide
再或者直接访问默认的地址即默认本机地址加端口号加文件名如http://127.0.0.1:5500/test.html
只需将test换成你的html文件名即可
vscode中的html文件在浏览器运行,前端,vscode,html,ide

注:如果html文件中有代码改动,在浏览器页面刷新即可,不用关闭重新打开文章来源地址https://www.toymoban.com/news/detail-717419.html


到了这里,关于如何在VSCode中将html文件打开到浏览器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 打开IE浏览器就会跳转到Microsoft Edge微软浏览器如何解决

    某件事情必须要用到IE浏览器 一打开IE浏览器时却老是会跳转到Microsoft Edge浏览器,不知道如何解决 1、因为微软已将开发重心放在基于Chromium的新版Edge浏览器上,而传统的InternetExplorer则逐渐被淘汰。 2、也就是说,如果当前使用的是IE浏览器,可以考虑切换到新版Edge浏览器,

    2024年02月11日
    浏览(83)
  • prt文件用什么软件打开(免费手机prt文件浏览器)

    prt格式文件是一种CAD文件的一种格式,对于机械设计小伙伴来说并不陌生,然而让很多机械设计小伙伴烦恼的是,很多人并不知道prt文件怎么打开,prt文件用什么软件打开。今天小编就来为大家推荐一款手机prt文件浏览器,不仅不用下载任何软件,还能在手机端随时随地查看

    2024年02月08日
    浏览(45)
  • Vue实现下载文件而非浏览器直接打开

    对于一个txt文本、图片、视频、音频等浏览器可以直接使用浏览器进行预览的文件, 使用传统的a标签加download属性进行下载是行不通的,会在浏览器直接打开,因此需要搞一个新的方式进行下载。 实现思路 这里使用Vue自定义指令,对文件链接进行处理,将链接转化为blob进行

    2023年04月16日
    浏览(45)
  • 通过Blob流在浏览器中打开pdf文件

    ** **

    2024年02月09日
    浏览(48)
  • selenium如何接管(控制)已打开Chrome浏览器

    一、目标 使用selenium接管已经打开的Chrome浏览器,并以百度网站为例,输出“百度一下”标签元素。 注: 我的终端是windows系统,适用于windows系统 二、实现步骤 1. 首先用cmd命令切换到终端安装Chrome的路径 下面是我的终端chrome安装路径,不同终端安装可能不一样, 若是不一

    2024年02月11日
    浏览(71)
  • 如何利用 Playwright 对已打开的浏览器进行爬虫

    之前写过一篇关于如何利用 Selenium 操作已经打开的浏览器进行爬虫的文章 如何利用 Selenium 对已打开的浏览器进行爬虫! 最近发现很多人都开始摒弃 Selenium,全面拥抱 Playwright 了,那如何利用 Playwright 进行爬虫,以应对一些反爬严格的网站呢? 对 Playwright 不了解的小伙伴,

    2024年01月19日
    浏览(38)
  • 如何利用 Selenium 对已打开的浏览器进行爬虫

    大家好! 在对某些网站进行爬虫时,如果该网站做了限制,必须完成登录才能展示数据,而且只能通过短信验证码才能登录 这时候,我们可以通过一个已经开启的浏览器完成登录,然后利用程序继续操作这个浏览器,即可以完成数据的爬取了 具体操作步骤如下: 1-1 安装依

    2024年02月09日
    浏览(45)
  • selenium如何打开浏览器,等待用户输入完成后,再运行

    在使用 Selenium 打开浏览器后等待用户输入完成,可以使用 Python 编写一个简单的脚本来实现。首先,确保你已经安装了 Selenium 和对应的浏览器驱动程序。 以下是一个使用 Selenium 在 Chrome 浏览器中等待用户输入完成后再执行的示例脚本: 在这个示例中,脚本会打开一个指定的

    2024年02月14日
    浏览(39)
  • 如何在VSCode内嵌浏览器实时预览Vue项目

    安装以下两个插件:just heml preview 和 Browser Preview just heml preview:使用ctrl + shift + p 打开命令 然后输入:just preview 即可打开 输入本地项目地址:localhost:4000 最后可按照vscode正常分屏方式分屏(右上角有pc端和移动端) Browser Preview:现已不再维护 安装成功后左边会出现一个类似

    2024年01月22日
    浏览(72)
  • 如何在Firefox火狐浏览器点击链接打开新标签页、搜索、和书签

    打开Firefox火狐浏览器设置 在Firefox的地址栏输入 about:config 按回车键后,打开了一个警告页面,单击“接受风险并继续”即可,如下图所 在新标签页打开网页上的链接(点击链接打开新标签页) 在窗口中输入 browser.urlbar.openintab 双击显示的值更改为 true 在新标签中打开搜索结

    2024年02月05日
    浏览(80)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包