CN116010276A - 一种基于VSCode的html页面本地调试方法 - Google Patents

Abstract

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

Description

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

技术领域

本发明属于计算机网络技术领域，尤其是涉及一种基于VSCode的html页面本地调试方法。

背景技术

随着网络的发展，网页已经成为人们日常生活中不可或缺的一部分，而前端开发人员在本地调试网页的过程中，需要调用后端服务的接口，或者获取js、css等资源，这就必须要面临的一个问题——跨域。跨域就是一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同，跨域问题的出现是出于浏览器的同源策略限制，它会阻止一个域的javascript脚本和另外一个域的内容进行交互，也就是说我们无法加载其他环境的js、css文件，也无法访问其接口。

因为同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略，所以为了避免跨域问题，目前本地调试主要方式为node代理。即使用node启动一个代理服务器，客户端发送请求到代理服务器，代理服务器去目标服务器请求数据，目标服务器将数据返回给代理服务器，代理服务器再将数据返回给客户端。即将接口代理到指定环境中进行调试。这个方式需要掌握node的前端人员升级项目，进行配置；这就需要开发人员在环境上耗费一定的经历，无法单纯的关注业务开发，而且每个项目都需要重复以上工作，大大增加了人力成本。

虽然React、Vue、Angular等前端主流框架让前端开发、调试、打包等变得非常简单，其脚手架可以帮助我们快速搭建项目实现零配置原型开发，但是，仍然有很多传统项目还在使用原生的html、javascript、css进行开发，这些项目本地调试依然很麻烦。所以，在使用原生技术并且项目比较多的情况下，我们需要一种方法，来简化调试方式，减少人力投入。

开发工具是开发人员必备的软件，目前前端开发中最受欢迎的一款软件开发工具是VSCode(VisualStudioCode)，是由微软研发的一款免费、开源的跨平台代码编辑器。VSCode有一个突出的优势，就是拓展性非常好，开发者可以根据自身项目需求和个人习惯开发插件发布到插件市场，也可以直接安装插件市场中存在的任意插件。

发明内容

有鉴于此，本发明旨在提出一种基于VSCode的html页面本地调试方法，对项目进行简单的配置，然后开发一个VSCode调试插件，通过此插件启动本地node服务，然后在浏览器中打开需要调试的页面，实现html页面的本地调试。

为达到上述目的，本发明的技术方案是这样实现的：

一种基于VSCode的html页面本地调试方法，包括以下步骤：

S1、创建一个根目录A，将各个需要调试的项目全部放在A下；

S2、在根目录中创建配置文件config.json，config.json中进行参数配置；

S3、根据步骤S2中配置的参数，开发调试插件T。

进一步的，在步骤S2中，在根目录中创建配置文件config.json，config.json中配置以下参数：BASE_URL、PROXY_API、HOST、PORT，BASE_URL为目标服务器地址，PROXY_API是由需要代理的接口前缀组成的一个数组。

进一步的，在本地调试过程中，将PROXY_API中的api前缀代理到BASE_URL配置的环境上去，HOST和PORT作为node服务的ip和端口号，用来本地调试过程中在此环境中访问页面，通过代理的方式，在本地调试时访问目标环境的接口。

进一步的，在步骤S3中，利用插件T获取config.json中的配置项，设置代理，启动本地node服务并在浏览器中成功加载html页面，利用Express来构建插件T。

进一步的，还需要对插件设置一个名为open in browser的资源管理器上下文菜单，安装插件以后，选中需要调试的html文件，通过右键菜单open in browser来激活注册事件并执行注册事件绑定的方法，来进行本地调试。

进一步的，插件T中注册事件绑定的方法业务逻辑为：

(1)获取文件地址：通过点击open in browser菜单获取要访问的html文件的绝对路径；

(2)判断根目录和配置是否正确：判断此文件是否存储在根目录A下，如果是则继续判断根目录下是否含有配置config.json并获取配置文件，然后检查配置项是否完整，以上步骤中如果判断结果为否，则弹出提示中断流程；

(3)设置代理：通过http-proxy-middleware中间件设置node代理，将PROXY_API中配置的需要代理的api前缀代理至BASE_URL目标环境；

(4)创建get请求返回页面内容：把文件的绝对路径从根目录开始截取，作为请求地址path，用path指代请求地址，如果path中含有中文字符需要转化成拼音，把path作为get请求的参数，请求的返回值为html文件；

(5)启动服务开始监听：监听的服务地址为’http://’+HOST+‘:’+PORT,如果服务已经启动，则调过此步骤；

(6)在浏览器加载页面：在浏览器中打开请求地址，将html页面内容显示在浏览器中。

进一步的，插件开发完毕后发布至市场，其他开发人员下载使用即可，开发人员只需要将所有需要调试的前端项目都统一放在A根目录下，新增代码配置文件config.js，安装插件T，打开VSCode并导入A跟目录，选中想要调试的html文件，右键点击菜单open inbrowser,便可以在浏览器中展示此页面，顺利实现本地调试。

进一步的，本方案公开了一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器用于执行上一种基于VSCode的html页面本地调试方法。

进一步的，本方案公开了一种服务器，包括至少一个处理器，以及与所述处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行一种基于VSCode的html页面本地调试方法。

进一步的，本方案公开了一种计算机可读取存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现一种基于VSCode的html页面本地调试方法。

相对于现有技术，本发明所述的一种基于VSCode的html页面本地调试方法具有以下有益效果：

(1)本发明所述的一种基于VSCode的html页面本地调试方法，开发人员只需要将所有需要调试的前端项目都统一放在A根目录下，新增代码配置文件config.js，安装插件T，右键点击菜单open in browser,便可以在浏览器中展示此页面，顺利实现本地调试；

(2)本发明所述的一种基于VSCode的html页面本地调试方法，各个项目不需要单独升级或配置，便可以再本地打开html页面，并调取其他服务上的数据。该发明节省了开发成本，降低了调试难度，并且灵活性强，适用性广。

附图说明

构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为本发明config.json参数说明；

图2为本发明插件工作流程示意图；

图3为本发明地调试流程示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

下面将参考附图并结合实施例来详细说明本发明。

本方案公开了一种基于VSCode的html页面本地调试方法，对项目进行简单的配置，然后开发一个VSCode调试插件，通过此插件启动本地node服务，然后在浏览器中打开需要调试的页面，实现html页面的本地调试，具体过程如下：

首先，创建一个根目录A，将各个需要调试的项目全部放在A下。

其次，在根目录中创建配置文件config.json，config.json中配置以下参数：BASE_URL、PROXY_API、HOST、PORT。具体参数说明见附图1。其中最重要的两个参数为BASE_URL和PROXY_API。BASE_URL为目标服务器地址，PROXY_API是由需要代理的接口前缀组成的一个数组。在本地调试时，我们会将PROXY_API中的api前缀代理到BASE_URL配置的环境上去。HOST和PORT作为node服务的ip和端口号，用来本地调试过程中在此环境中访问页面。这样，我们就可以通过代理的方式，在本地调试时访问目标环境的接口。

最后，我们根据以上配置开发调试插件(后面用T指代)。T的作用为：获取config.json中的配置项，设置代理，启动本地node服务并在浏览器中成功加载html页面。此插件我们使用Express来构建服务。插件设置一个名为open in browser的资源管理器上下文菜单，安装插件以后，选中需要调试的html文件，通过右键菜单open in browser来激活注册事件并执行注册事件绑定的方法，来进行本地调试。

此插件中注册事件绑定的方法业务逻辑为：(1)获取文件地址：通过点击open inbrowser菜单获取要访问的html文件的绝对路径。(2)判断根目录和配置是否正确：判断此文件是否存储在根目录A下，如果是则继续判断根目录下是否含有配置config.json并获取配置文件，然后检查配置项是否完整。以上步骤中如果判断结果为否，则弹出提示中断流程。(3)设置代理：通过http-proxy-middleware中间件设置node代理，将PROXY_API中配置的需要代理的api前缀代理至BASE_URL目标环境。(4)创建get请求返回页面内容：把文件的绝对路径从根目录开始截取，作为请求地址path(后文用path指代请求地址)，如果path中含有中文字符需要转化成拼音。把path作为get请求的参数，请求的返回值为html文件。(5)启动服务开始监听：监听的服务地址为’http://’+HOST+‘:’+PORT,如果服务已经启动，则调过此步骤。(6)在浏览器加载页面：在浏览器中打开请求地址，将html页面内容显示在浏览器中。具体流程参考附图2。

插件开发完毕后发布至市场，其他开发人员下载使用即可。即开发人员只需要将所有需要调试的前端项目都统一放在A根目录下，新增代码配置文件config.js(一个人创建，其他人员从git上同步即可)，安装插件T，打开VSCode并导入A跟目录，选中想要调试的html文件，右键点击菜单open in browser,便可以在浏览器中展示此页面，顺利实现本地调试。具体流程见附图3。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

在本申请所提供的几个实施例中，应该理解到，所揭露的方法和系统，可以通过其它的方式实现。例如，以上所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。上述单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

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并获取配置文件，然后检查配置项是否完整，以上步骤中如果判断结果为否，则弹出提示中断流程；

(3)设置代理：通过http-proxy-middleware中间件设置node代理，将PROXY_API中配置的需要代理的api前缀代理至BASE_URL目标环境；

(4)创建get请求返回页面内容：把文件的绝对路径从根目录开始截取，作为请求地址path，用path指代请求地址，如果path中含有中文字符需要转化成拼音，把path作为get请求的参数，请求的返回值为html文件；

(5)启动服务开始监听：监听的服务地址为’http://’+HOST+‘:’+PORT,如果服务已经启动，则调过此步骤；

(6)在浏览器加载页面：在浏览器中打开请求地址，将html页面内容显示在浏览器中。

7.根据权利要求6所述的一种基于VSCode的html页面本地调试方法，其特征在于：插件开发完毕后发布至市场，其他开发人员下载使用即可，开发人员只需要将所有需要调试的前端项目都统一放在A根目录下，新增代码配置文件config.js，安装插件T，打开VSCode并导入A跟目录，选中想要调试的html文件，右键点击菜单open in browser,便可以在浏览器中展示此页面，顺利实现本地调试。

8.一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，其特征在于：所述处理器用于执行上述权利要求1-7任一所述的一种基于VSCode的html页面本地调试方法。

9.一种服务器，其特征在于：包括至少一个处理器，以及与所述处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行如权利要求1-7任一所述的一种基于VSCode的html页面本地调试方法。

10.一种计算机可读取存储介质，存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现权利要求1-7任一项所述的一种基于VSCode的html页面本地调试方法。

Images