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

本文目录

1. VSCODE 可无缝调试浏览器了!
2. vscode怎么让侧边预览放在扩展屏
3. 如何在vscode中调用浏览器运行html
4. 前端需要编译器吗vscode这个不是编译器吗
5. vscode怎么运行javascript
6. HBuilderx跟VSCode链接到了,怎么获取值
7. VSCode中代码在浏览器中打开及实时刷新

一、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中调用浏览器运行html

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

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

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

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

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

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

四、前端需要编译器吗vscode这个不是编译器吗

1、电脑中有浏览器（最好是Chrome浏览器，自带的IE不好用）和VSCode编辑器就行了，浏览器用来看前端代码效果，VSCode用来写代码，在VSCode中写完代码就能在浏览器中及时查看到效果，可以把VSCcode编辑器理解成比较好用的记事本

2、当初在黑马学习的第一课就说以后就用谷歌。对我的回答是否满意如果满意帮忙采纳下吧

五、vscode怎么运行javascript

1、直接按F5可以调试的方法或者点击运行按钮（可以直接运行html文件或者js文件）

在launch.json文件中的配置如下：

"name":"谷歌浏览器",//运行html文件，用谷歌浏览器打开

"name":"nodeLauch",//单独调试js，即可以直接运行js

"program":"${file}",//这个配置成你要调试的文件、${file}当前打开的文件

2、第二种方法Ctrl+Shift+B快捷键运行html文件，在Tasks.json中配置如下：

"command":"C:/Users/shannonliang/AppData/Local/Google/Chrome/Application/chrome.exe"

3、如果第二种方法，不想每次都按这个快捷键，请参考npm配置node服务方法：

六、HBuilderx跟VSCode链接到了,怎么获取值

先安装插件，然后进行调试即可，具体操作按下列步骤进行。

1、在vscode扩展中安装插件：Vue.js Extension Pack，安装后vscode代码层级区分明显。2、调试时谷歌浏览器需要安装vue（即vue devtools 5.1.0）。扩展程序——加载已解压的扩展程序——找到解压的vue devtools 5.1.0文件夹确定即可。3、使用HBuilderX打包使用vscode进行代码编写及调试，命令yarn build生成的dist文件夹复制到HBuilderX项目下进行打包。

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

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

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

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

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

关于vscode谷歌浏览器调试到此分享完毕，希望能帮助到您。