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

本文目录

1. VSCODE 可无缝调试浏览器了!
2. VSCode中代码在浏览器中打开及实时刷新
3. 多端APP开发技术
4. 浏览器中间接运行typescript,并实现实时刷新(vscode)
5. 前端开发工具
6. 如何在vscode中调用浏览器运行html

一、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中代码在浏览器中打开及实时刷新

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

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

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

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

三、多端APP开发技术

【这段时间不能出门，打算写个APP来管理学生和课程，经过几天的技术选型确定下来，整理了这份文档供学生学习和参考】

扎实的程序基础+良好的编程思想+掌握必需的技术+熟悉适用的框架+一定的图文处理能力+细致的功能设计+耐心的测试习惯+自律的项目进度管理+连续固定的时间+动人的音乐，这样你就可以愉快的开始独立APP制作了~（^_*)

Taro+TaroUI+DvaJS+TypeScript+Scss

超文本标记语言（HTML，HyperTextMarkupLanguage）用于描述、定义网页内容。

层叠样式表（CSS，CascadingStyleSheets）用于描述网页内容的外观与展示。

JavaScript是在浏览器中运行的编程语言。它可以为你的网站或应用程序添加交互性和其他动态功能。随着Node.js的出现，你也可以在服务器上运行JavaScript。

什么是纯函数_以及为什么要用纯函数?

[翻译]JavaScript中的柯里化（CurryinginJavaScript）

从引用数据，到深拷贝，再到不可变数据。这是调用的进度，也是优化的提升。

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。TypeScript添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性。

SASS是由buby语言编写的一款css预处理语言，它是一款强化CSS的辅助工具，是对CSS的扩展，它在CSS语法的基础上增加了变量(variables)、嵌套(nestedrules)、混合(mixins)、继承(extend)、导入(inlineimports)等高级功能，这些拓展令CSS更加强大与优雅。

SCSS是Sass3引入新的语法，其语法完全兼容CSS3，并且继承了Sass的强大功能。也就是说，任何标准的CSS3样式表都是具有相同语义的有效的SCSS文件。SCSS需要使用分号和花括号而不是换行和缩进。SCSS对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为.scss。

Node.js是一个基于ChromeV8引擎的JavaScript运行时。Node.js使用了一个事件驱动、非阻塞式I/O的模型。

Node是一个让JavaScript运行在服务端的开发平台。对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。

用于方便地搭建响应速度快、易于扩展的网络应用。Node使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

React起源于Facebook的内部项目，是一个用于构建用户界面的JavaScript库，也是Web应用程序的视图层。

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

Taro是一套遵循React语法规范的多端开发解决方案。

可以只书写一套代码，再通过Taro的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native等）运行的代码。

注意：Taro全局版本需要和项目里的版本一致

UnhandledPromiseRejectionWarning:Error:Cannotfindmodule'autoprefixer'

UnhandledPromiseRejectionWarning:Error:Cannotfindmodule'webpack-sources'

Taro1.x版本安装@tarojs/async-await（2.0以上不需要）：

打包文件过大调试方案webpack-bundle-analyzer

安装好Taro，创建项目后，在项目根目录安装taro-ui：

antd是基于AntDesign设计体系的ReactUI组件库，主要用于研发企业级中后台产品。

Rematch：是没有boilerplate的Redux最佳实践

dva首先是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva还额外内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。

Taro+dva+Typescript搭建微信小程序架构

ESLint是一个插件化的javascript代码检测工具。

VScode下搭配ESLint、typescript-eslint的代码检查配方

vscode自带的代码检查不方便，关闭。直接使用eslint，在settings.json中配置：

需要执行命令创建.eslintrc.js文件

typescript-eslint上手VScode下搭配ESLint、typescript-eslint的代码检查配方

2019年最流行的五大JavaScript自动化测试框架

Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。

然后，在微信开发者工具中可以右键cloudfunctions目录进行同步或创建云函数。

注意：上面微信社区提供的示例代码中有BUG，需要改造，方案是可行的。

四、浏览器中间接运行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不行，就多摁几遍

五、前端开发工具

1、为了让入行新人能够更快的掌握Web前端开发，推荐五个优秀的前端开发工具，供小伙伴们参考。

2、全世界最流行的响应式前端框架。基于HTML、CSS、JAVASCRIPT的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格。并兼容大部分jQuery插件。简洁灵活，使得Web开发更加快捷。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

3、CodePen是一个在线的HTML、CSS和JavaScript代码编辑器，能够编写代码并即时预览效果。可以用于在线展示的作品，也可以看到其他人在网页中实现的各种令人惊奇的效果。

4、VScode免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持Win、Mac以及Linux。

5、性能测试：GooglePageSpeedInsights

6、PageSpeed是谷歌的网页测试工具，通相信有接触前端开发的大神们都听说过Google官方的PageSpeedTools，这个网页载入速度检测工具有在线版本也有一个Chrome扩展，叫PageSpeedInsights。PageSpeedInsights的Chrome扩展是由谷歌官方开发的一款可以分析页面载入的各个方面，包括资源、网络、DOM以及时间线等等信息的插件，过检测评分给你优化建议。

7、它是非常强悍的JavaScript编辑器和调试器，可以支持多种AJAX和JavaScript工具箱，包括JavaScript编辑和调试。具有智能代码完成、浏览器兼容性提示、代码错误提示、文档结构树等功能。

8、HTML5：HTML5测试得分能够提示您正常使用的浏览器对于HTML5标准和相关规范的支持情况的指标。

9、前端开发工具数量很多，这里只是推荐了千锋武汉HTML5前端小编觉得比较好的5个前端开发工具。如果你有更好的意见，欢迎给我们留言分享。

六、如何在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文件问题对您有所帮助，还望关注下本站哦！