大家好，感谢邀请，今天来为大家分享一下vscode谷歌浏览器插件的问题，以及和vscode设置谷歌浏览器的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

本文目录

1. VSCode如何设置,才能在VSC里打开php文件到浏览器
2. 浏览器中间接运行typescript,并实现实时刷新(vscode)
3. 如何在vscode中调用浏览器运行html
4. Visual Studio Code设置在浏览器中查看html页面
5. VSCode中代码在浏览器中打开及实时刷新
6. VSCODE 可无缝调试浏览器了!
7. vscode怎么让侧边预览放在扩展屏

一、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文件了。

四、Visual Studio Code设置在浏览器中查看html页面

1、Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件，在浏览器中查看html页面。

2、首先打开程序，编写好一个html程序。

3、然后点击左侧第五行的扩展，或者使用快捷键ctrl+shift+X打开扩展栏。

4、在扩展栏的搜索栏中输入“open in browser”，然后就可以找到open in browser这款插件，插件右下角会显示安装字样。因为这里我已经安装了，所以没有显示安装。

5、安装完成后，可以查看一下文档，里面有插件使用的快捷键。在默认浏览器中显示是Alt+B；在其他浏览器中显示是Shift+Alt+B。

6、回到开始创建的html文档，可以使用快捷键运行。也可以对着html文档右键单击，在弹出的窗口中选择使用默认浏览器打开或者其他浏览器打开。

7、如果是选择在其他浏览器中打开，中间的命令框会显示可以使用的浏览器，选择自己需要的浏览器名称即可，这里我们使用chrome试试。

8、可以看到成功在浏览器中运行了程序。

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

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

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

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

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

六、VSCODE 可无缝调试浏览器了!

1、 2021-07-16微软发布了一篇博客专门介绍了这个功能，VSCODE牛逼！

2、在此之前，你想要在 vscode内调试 chrome或者 edge需要借助于 Chrome Debugger或者 the Microsoft Edge Debugger extension这两款 vscode扩展。

3、并且更重要的是，其仅能提供最基本的控制台功能，其他的诸如 network，element是无法查看的，我们仍然需要到浏览器中查看。

4、更新之后，我们可以直接在 vscode中 open link in chrome or edge，并且「直接在 vscode内完成诸如查看 element，network等几乎所有的常见调试需要用到的功能」。

5、使用方式非常简单，大家只需要在前端项目中按 F5触发调试并进行简单的配置即可。这里给大家贴一份 lauch.json配置，有了它就可以直接开启调试浏览器了。

6、原理其实和 chrome debugger扩展原理类似。也是基于 Chrome的 devtool协议，建立「websocket链接。通过发送格式化的 json数据进行交互」，这样 vscode就可以动态拿到运行时的一些信息。比如浏览器网络线程发送的请求以及 DOM节点信息。

7、你可以通过「chrome devtool protocol」拿到很多信息，比如上面提到的 network请求。

8、由于是 websocket建立的双向链接，因此在 VSCODE中改变 dom等触发浏览器的修改也变得容易。我们只需要在 VSCODE（websocket client）中操作后通过 websocket发送一条 JSON数据到浏览器（websocket server）即可。浏览器会根据收到的 JSON数据进行一些操作，从效果上来看「和用户直接在手动在浏览器中操作并无二致。」

9、值得注意的，chrome devtool protocol的客户端有很多，不仅仅是 NodeJS客户端，Python，Java，PHP等各种客户端一应俱全。

七、vscode怎么让侧边预览放在扩展屏

使用：htm文件中右键，点击右键菜单的view in browser，即可打开浏览器运行；

alt+shift+b，切换不同浏览器运行；

使用：htm文件中右键，点击右键菜单的view in browser，即可打开浏览器运行；

但这两种插件，预览时需要另外跳转到谷歌浏览器，打开一个标签页，调试时跳来跳去，不太方便。

3.推荐使用Live Server Preview，

这个插件不用另外打开浏览器；它是直接在Vscode里面预览html的，并且是自动实时更新的，不用不停地Ctrl+S保存查看

使用：F1->弹出一个窗口输入live，然后右边出现预览窗口

关于vscode谷歌浏览器插件的内容到此结束，希望对大家有所帮助。