大家好,今天小编来为大家解答以下的问题，关于vscode启动谷歌浏览器调试，vscode如何用谷歌浏览器预览运行html文件这个很多人还不知道，现在让我们一起来看看吧！

本文目录

1. VSCode中代码在浏览器中打开及实时刷新
2. VSCode如何设置,才能在VSC里打开php文件到浏览器
3. 浏览器中间接运行typescript,并实现实时刷新(vscode)
4. 如何在vscode中调用浏览器运行html

一、VSCode中代码在浏览器中打开及实时刷新

1、在vscode扩展中搜索“view in browser”插件并点击安装，点击资源管理器选中当前文件右键选择“View In Browser”即可在默认浏览器中打开页面。

2、以上两种方法实现的效果和原理相同，都可后台运行，按下快捷键“control+c”退出当前运行进程。

3、装Live HTML Previewer插件，点击页面左下角Preview Available。

4、注意：有了livereload可以不需要装“view in browser”插件。

二、VSCode如何设置,才能在VSC里打开php文件到浏览器

VSCode通过以下设置能在VSC里打开php文件到浏览器，方法如下：

准备材料：VisualStudio Code1.2

1、首先要想调试php代码，必须得先有php的相关编译器，只有安装了php的系统下，才能进行调试的。这里点击菜单栏的查看，选择扩展进入。

2、接着左侧栏就会出现扩展安装的窗口，在搜索栏填php，就会出现很多与php相关的插件了。这里我就直接选择了php debug，php的调试工具。

3、然后点击打开文件夹，把自己的工程目录设置为活动文件夹即可。

5、点击调试或者按F5键启动调试即可。

6、调试过程中会遇到.net的环境变量设置问题，这里不设置好这个变量，是不能进行调试的，所以，点击获取dotnet sdk开发包并安装。

7、安装完成后点击我的电脑，属性。

10、把dotnet的安装路径复制进去就可以的了。

11、最后再次进行调试，就可以看到结果的了。

三、浏览器中间接运行typescript,并实现实时刷新(vscode)

1、 vscode插件，实现html文件的实时刷新，只要我们保存了文件，live server就会刷新页面

2、在html文件中右键，点击“open with live server”

3、大家都知道，不论是node还是浏览器都是无法运行ts文件的，需要手动的将ts文件转换成js文件，这就需要一个转换的包了：typerscript，建议全局安装

4、右键侧边栏的ts文件，点击打开终端

5、然后终端就会进入ts的检测模式了

6、现在再修改ts文件，一保存，就会自动重新编译，ts文件发生变化，生成的js文件相应发生变化，live server发现了变化，浏览器也会随之变化，这样形成了实时刷新

7、结束终端的命令是：CTRL+ c，光标要先点一下控台，不然没用，一次ctrl+c不行，就多摁几遍

四、如何在vscode中调用浏览器运行html

1、打开vscode编辑器，点击编辑器主界面左上侧第五个小图标——‘扩展’按钮；

2、进入扩展搜索右拉框，在应用商店搜索框中输入“view in browser”会自动进行搜索；

3、等待几秒钟时间，扩展就会陆续出现，在view in browser选项右下角会出现“安装”小按钮；点击安装即可。安装完后会提示重新加载，点击重新加载即可；

4、点击左侧第一个图标按钮，回到资源管理器，选择你想要查询的html文件；

5、右键点击html文件，就会出现view in browser选项；

6、点击view in browser选项，就能预览html文件了。

文章分享结束，vscode启动谷歌浏览器调试和vscode如何用谷歌浏览器预览运行html文件的答案你都知道了吗？欢迎再次光临本站哦！