一种基于VSCode的html页面本地调试方法技术

本发明专利技术提供了一种基于VSCode的html页面本地调试方法，包括以下步骤：S1、创建一个根目录A，将各个需要调试的项目全部放在A下；S2、在根目录中创建配置文件config.json，config.json中进行参数配置；S3、根据步骤S2中配置的参数，开发调试插件T。本发明专利技术有益效果：开发人员只需要将所有需要调试的前端项目都统一放在A根目录下，新增代码配置文件config.js，安装插件T，右键点击菜单open in browser,便可以在浏览器中展示此页面，顺利实现本地调试。现本地调试。现本地调试。

【技术实现步骤摘要】
一种基于VSCode的html页面本地调试方法


[0001]本专利技术属于计算机网络
，尤其是涉及一种基于VSCode的html页面本地调试方法。

技术介绍

[0002]随着网络的发展，网页已经成为人们日常生活中不可或缺的一部分，而前端开发人员在本地调试网页的过程中，需要调用后端服务的接口，或者获取js、css等资源，这就必须要面临的一个问题——跨域。跨域就是一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同，跨域问题的出现是出于浏览器的同源策略限制，它会阻止一个域的javascript脚本和另外一个域的内容进行交互，也就是说我们无法加载其他环境的js、css文件，也无法访问其接口。
[0003]因为同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略，所以为了避免跨域问题，目前本地调试主要方式为node代理。即使用node启动一个代理服务器，客户端发送请求到代理服务器，代理服务器去目标服务器请求数据，目标服务器将数据返回给代理服务器，代理服务器再将数据返回给客户端。即将接口代理到指定环境中进行调试。这个方式需要掌握node的前端人员升级项目，进行配置；这就需要开发人员在环境上耗费一定的经历，无法单纯的关注业务开发，而且每个项目都需要重复以上工作，大大增加了人力成本。
[0004]虽然React、Vue、Angular等前端主流框架让前端开发、调试、打包等变得非常简单，其脚手架可以帮助我们快速搭建项目实现零配置原型开发，但是，仍然有很多传统项目还在使用原生的html、javascript、css进行开发，这些项目本地调试依然很麻烦。所以，在使用原生技术并且项目比较多的情况下，我们需要一种方法，来简化调试方式，减少人力投入。
[0005]开发工具是开发人员必备的软件，目前前端开发中最受欢迎的一款软件开发工具是VSCode(VisualStudioCode)，是由微软研发的一款免费、开源的跨平台代码编辑器。VSCode有一个突出的优势，就是拓展性非常好，开发者可以根据自身项目需求和个人习惯开发插件发布到插件市场，也可以直接安装插件市场中存在的任意插件。

技术实现思路

[0006]有鉴于此，本专利技术旨在提出一种基于VSCode的html页面本地调试方法，对项目进行简单的配置，然后开发一个VSCode调试插件，通过此插件启动本地node服务，然后在浏览器中打开需要调试的页面，实现html页面的本地调试。
[0007]为达到上述目的，本专利技术的技术方案是这样实现的：
[0008]一种基于VSCode的html页面本地调试方法，包括以下步骤：
[0009]S1、创建一个根目录A，将各个需要调试的项目全部放在A下；
[0010]S2、在根目录中创建配置文件config.json，config.json中进行参数配置；
[0011]S3、根据步骤S2中配置的参数，开发调试插件T。
[0012]进一步的，在步骤S2中，在根目录中创建配置文件config.json，config.json中配置以下参数：BASE_URL、PROXY_API、HOST、PORT，BASE_URL为目标服务器地址，PROXY_API是由需要代理的接口前缀组成的一个数组。
[0013]进一步的，在本地调试过程中，将PROXY_API中的api前缀代理到BASE_URL配置的环境上去，HOST和PORT作为node服务的ip和端口号，用来本地调试过程中在此环境中访问页面，通过代理的方式，在本地调试时访问目标环境的接口。
[0014]进一步的，在步骤S3中，利用插件T获取config.json中的配置项，设置代理，启动本地node服务并在浏览器中成功加载html页面，利用Express来构建插件T。
[0015]进一步的，还需要对插件设置一个名为open in browser的资源管理器上下文菜单，安装插件以后，选中需要调试的html文件，通过右键菜单open in browser来激活注册事件并执行注册事件绑定的方法，来进行本地调试。
[0016]进一步的，插件T中注册事件绑定的方法业务逻辑为：
[0017](1)获取文件地址：通过点击open in browser菜单获取要访问的html文件的绝对路径；
[0018](2)判断根目录和配置是否正确：判断此文件是否存储在根目录A下，如果是则继续判断根目录下是否含有配置config.json并获取配置文件，然后检查配置项是否完整，以上步骤中如果判断结果为否，则弹出提示中断流程；
[0019](3)设置代理：通过http
‑
proxy
‑
middleware中间件设置node代理，将PROXY_API中配置的需要代理的api前缀代理至BASE_URL目标环境；
[0020](4)创建get请求返回页面内容：把文件的绝对路径从根目录开始截取，作为请求地址path，用path指代请求地址，如果path中含有中文字符需要转化成拼音，把path作为get请求的参数，请求的返回值为html文件；
[0021](5)启动服务开始监听：监听的服务地址为
’
http://
’
+HOST+
‘
:
’
+PORT,如果服务已经启动，则调过此步骤；
[0022](6)在浏览器加载页面：在浏览器中打开请求地址，将html页面内容显示在浏览器中。
[0023]进一步的，插件开发完毕后发布至市场，其他开发人员下载使用即可，开发人员只需要将所有需要调试的前端项目都统一放在A根目录下，新增代码配置文件config.js，安装插件T，打开VSCode并导入A跟目录，选中想要调试的html文件，右键点击菜单open in browser,便可以在浏览器中展示此页面，顺利实现本地调试。
[0024]进一步的，本方案公开了一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器用于执行上一种基于VSCode的html页面本地调试方法。
[0025]进一步的，本方案公开了一种服务器，包括至少一个处理器，以及与所述处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行一种基于VSCode的html页面本地调试方法。
[0026]进一步的，本方案公开了一种计算机可读取存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现一种基于VSCode的html页面本地调试方法。
[0027]相对于现有技术，本专利技术所述的一种基于VSCode的html页面本地调试方法具有以下有益效果：
[0028](1)本专利技术所述的一种基于VSCode的html页面本地调试方法，开发人员只需要将所有需要调试的前端项目都统一放在A根目录下，新增代码配置文本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于VSCode的html页面本地调试方法，其特征在于，包括以下步骤：S1、创建一个根目录A，将各个需要调试的项目全部放在A下；S2、在根目录中创建配置文件config.json，config.json中进行参数配置；S3、根据步骤S2中配置的参数，开发调试插件T。2.根据权利要求1所述的一种基于VSCode的html页面本地调试方法，其特征在于，在步骤S2中，在根目录中创建配置文件config.json，config.json中配置以下参数：BASE_URL、PROXY_API、HOST、PORT，BASE_URL为目标服务器地址，PROXY_API是由需要代理的接口前缀组成的一个数组。3.根据权利要求2所述的一种基于VSCode的html页面本地调试方法，其特征在于：在本地调试过程中，将PROXY_API中的api前缀代理到BASE_URL配置的环境上去，HOST和PORT作为node服务的ip和端口号，用来本地调试过程中在此环境中访问页面，通过代理的方式，在本地调试时访问目标环境的接口。4.根据权利要求1所述的一种基于VSCode的html页面本地调试方法，其特征在于，在步骤S3中，利用插件T获取config.json中的配置项，设置代理，启动本地node服务并在浏览器中成功加载html页面，利用Express来构建插件T。5.根据权利要求4所述的一种基于VSCode的html页面本地调试方法，其特征在于：还需要对插件设置一个名为open in browser的资源管理器上下文菜单，安装插件以后，选中需要调试的html文件，通过右键菜单open in browser来激活注册事件并执行注册事件绑定的方法，来进行本地调试。6.根据权利要求1
‑
5任一所述的一种基于VSCode的html页面本地调试方法，其特征在于，插件T中注册事件绑定的方法业务逻辑为：(1)获取文件地址：通过点击open in browser菜单获取要访问的html文件的绝对路径；(2)判断根目录和配置是否正确：判断此文件是否存储在根目录A下，如果是则继续判断根目录下是否含有配置config.json并获取配置文件，然后检查配置项是否完整，以上步骤中如果判断结果为否...

【专利技术属性】
技术研发人员：王秀艳，
申请(专利权)人：紫光云技术有限公司，
类型：发明
国别省市：