CN115203033A - 一种在前端开发调试javascript代码的方法及系统 - Google Patents
一种在前端开发调试javascript代码的方法及系统 Download PDFInfo
- Publication number
- CN115203033A CN115203033A CN202210827659.9A CN202210827659A CN115203033A CN 115203033 A CN115203033 A CN 115203033A CN 202210827659 A CN202210827659 A CN 202210827659A CN 115203033 A CN115203033 A CN 115203033A
- Authority
- CN
- China
- Prior art keywords
- service
- plug
- code
- vscode
- server
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 23
- 230000010354 integration Effects 0.000 claims abstract description 49
- 238000004806 packaging method and process Methods 0.000 claims description 8
- 238000012986 modification Methods 0.000 claims description 6
- 230000004048 modification Effects 0.000 claims description 6
- 230000000977 initiatory effect Effects 0.000 claims description 4
- 238000012856 packing Methods 0.000 claims description 4
- 230000006870 function Effects 0.000 description 10
- 238000010586 diagram Methods 0.000 description 2
- 239000000463 material Substances 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
- G06F11/3628—Software debugging of optimised code
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/443—Optimisation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种在前端开发调试javascript代码的方法及系统，涉及前端工程领域。该方法包括：修改在线开发集成工具vscode的扩展插件，使其支持在浏览器环境中运行；修改nginx服务的配置文件，将nginx服务配置为支持https协议，使用修改后的nginx服务的配置文件作为https协议的代理，将后端服务代理到code‑server服务；启动code‑server服务并安装无头浏览器；在前端通过无头浏览器访问在线开发集成工具vscode，通过扩展插件对javascript代码进行调试。本发明实现了使用浏览器在跨平台的方式直接使用在线开发集成工具vscode对javascript代码进行在线开发和调试，能够方便多人协助开发，提高了javascript代码开发和调试的便利性。
Description
技术领域
本发明涉及前端工程领域，尤其涉及一种在前端开发调试javascript代码的方法及系统。
背景技术
目前，对于javascript代码开发和调试，通常是在后端进行，现有技术方案可以进行云开发，但是对于前端调试不太友好，不能进行前端开发调试，导致javascript代码开发调试的便利性较差。
发明内容
本发明所要解决的是无法在前端开发和调试javascript代码的问题，为了解决上述技术问题，本发明提供了一种在前端开发调试javascript代码的方法及系统。
第一个方面，提供了一种在前端开发调试javascript代码的方法，包括：
修改在线开发集成工具vscode的第一扩展插件和第二扩展插件，使所述开发集成工具vscode支持在浏览器环境中运行，其中，所述第一扩展插件为使所述在线开发集成工具vscode支持javascript代码调试的插件，所述第二扩展插件为支持使所述在线开发集成工具vscode在编辑环境中打开真实浏览器解释渲染javascript的插件；
修改nginx服务的配置文件，将nginx服务配置为支持https协议，使用修改后的nginx服务的配置文件作为所述https协议的代理，将后端服务代理到code-server服务；
编排服务启动的脚本文件，通过所述脚本文件启动所述code-server服务，在所述code-server服务中安装无头浏览器；
在前端通过所述无头浏览器访问web版的在线开发集成工具vscode，通过所述第一扩展插件和所述第二扩展插件对javascript代码进行调试。
在第一个方面的一种可能实现中，所述第一扩展插件为vscode-js-debug插件，所述第二扩展插件为vscode-browser-preview插件。
在第一个方面的一种可能实现中，修改在线开发集成工具vscode的第一扩展插件和第二扩展插件，使所述开发集成工具vscode支持在浏览器环境中运行，具体包括：
下载并打开所述vscode-js-debug插件的源码，修改所述源码路径中的launchCompanionBrowser函数，使所述vscode-js-debug插件支持在浏览器端运行；
编译打包所述vscode-js-debug插件，并存储编译结果；
下载并打开所述vscode-browser-preview插件的源码，修改所述源码路径中的resolveDebugConfiguration函数，使所述vscode-browser-preview插件支持在浏览器端运行；
编译打包所述vscode-browser-preview插件，并存储编译结果。
在第一个方面的一种可能实现中，修改nginx服务的配置文件，将nginx服务配置为支持https协议，具体包括：
生成公钥证书，得到server.crt文件和server.key文件；
根据所述server.crt文件和所述server.key文件配置nginx.conf文件，将nginx服务配置为支持https协议。
在第一个方面的一种可能实现中，编排服务启动的脚本文件，通过所述脚本文件启动所述code-server服务，在所述code-server服务中安装无头浏览器，具体包括：
使所述nginx服务和所述code-server服务在同一个网络环境中；
在所述code-server服务中配置登录账号和密码；
在所述nginx服务中配置所述code-server服务的反向代理，使客户端的网页请求通过所述nginx服务转发到所述code-server服务上；
使所述nginx服务暴露预设https端口；
配置所述code-server服务的container_name为code-server；
使用所述nginx.conf文件使所述nginx服务支持https协议；
将存储的所述编译结果的插件挂载到所述code-server服务上。
第二个方面，提供了一种在前端开发调试javascript代码的系统，包括：
插件编辑单元，用于修改在线开发集成工具vscode的第一扩展插件和第二扩展插件，使所述开发集成工具vscode支持在浏览器环境中运行，其中，所述第一扩展插件为使所述在线开发集成工具vscode支持javascript代码调试的插件，所述第二扩展插件为支持使所述在线开发集成工具vscode在编辑环境中打开真实浏览器解释渲染javascript的插件；
配置修改单元，用于修改nginx服务的配置文件，将nginx服务配置为支持https协议，使用修改后的nginx服务的配置文件作为所述https协议的代理，将后端服务代理到code-server服务；
脚本编辑单元，用于编排服务启动的脚本文件，通过所述脚本文件启动所述code-server服务，在所述code-server服务中安装无头浏览器；
前端调试单元，用于在前端通过所述无头浏览器访问web版的在线开发集成工具vscode，通过所述第一扩展插件和所述第二扩展插件对javascript代码进行调试。
在第二方面的一种可能实现中，所述第一扩展插件为vscode-js-debug插件，所述第二扩展插件为vscode-browser-preview插件。
在第二方面的一种可能实现中，所述插件编辑单元具体用于下载并打开所述vscode-js-debug插件的源码，修改所述源码路径中的launchCompanionBrowser函数，使所述vscode-js-debug插件支持在浏览器端运行；
编译打包所述vscode-js-debug插件，并存储编译结果；
下载并打开所述vscode-browser-preview插件的源码，修改所述源码路径中的resolveDebugConfiguration函数，使所述vscode-browser-preview插件支持在浏览器端运行；
编译打包所述vscode-browser-preview插件，并存储编译结果。
在第二方面的一种可能实现中，所述配置修改单元具体用于生成公钥证书，得到server.crt文件和server.key文件；
根据所述server.crt文件和所述server.key文件配置nginx.conf文件，将nginx服务配置为支持https协议。
在第二方面的一种可能实现中，所述脚本编辑单元具体用于使所述nginx服务和所述code-server服务在同一个网络环境中；
在所述code-server服务中配置登录账号和密码；
在所述nginx服务中配置所述code-server服务的反向代理，使客户端的网页请求通过所述nginx服务转发到所述code-server服务上；
使所述nginx服务暴露预设https端口；
配置所述code-server服务的container_name为code-server；
使用所述nginx.conf文件使所述nginx服务支持https协议；
将存储的所述编译结果的插件挂载到所述code-server服务上。
通过修改在线开发集成工具vscode的插件，使其能够在浏览器环境中运行，然后通过nginx服务将网页请求转发到code-server服务上，通过code-server服务中的无头浏览器获取访问请求，实现了使用浏览器在跨平台的方式直接使用在线开发集成工具vscode对javascript代码进行在线开发和调试，能够方便多人协助开发，提高了javascript代码开发和调试的便利性。
本发明附加的方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。
附图说明
图1为本发明方法实施例提供的流程示意图；
图2为本发明方法实施例提供的运行结果示意图。
具体实施方式
以下结合附图对本发明的原理和特征进行描述，所举实施例只用于解释本发明，并非用于限定本发明的范围。
如图1所示，为本发明方法实施例提供的流程示意图，该在前端开发调试javascript代码的方法包括：
S1，修改在线开发集成工具vscode的第一扩展插件和第二扩展插件，使开发集成工具vscode支持在浏览器环境中运行，其中，第一扩展插件为使在线开发集成工具vscode支持javascript代码调试的插件，第二扩展插件为支持使在线开发集成工具vscode在编辑环境中打开真实浏览器解释渲染javascript的插件；
需要说明的是，在线开发集成工具vscode是一种开源的集成开发环境，code-server服务是一种跨平台的在浏览器运行vscode的开源解决方案，即程序，可以使开发环境运行在云端。
S2，修改nginx服务的配置文件，将nginx服务配置为支持https协议，使用修改后的nginx服务的配置文件作为https协议的代理，将后端服务代理到code-server服务；
需要说明的是，后端服务是提供了可以在浏览器端使用开发集成工具vscode和调试用的环境。因为容器化部署很快速和方便，可以采用容器化技术docker来部署后端服务。例如，服务采用code-server的镜像，https协议使用nginx镜像作为代理，代理到code-server服务。
应理解，docker是一种容器化部署的方案，nginx是一个高性能的HTTP和反向代理web服务器。
可选地，镜像的选择可以使用linuxserver/code-server:latest和nginx:1.21-alpine。
S3，编排服务启动的脚本文件，通过脚本文件启动code-server服务，在code-server服务中安装无头浏览器；
具体地，可以通过docker的工具docker-compose插件来编排服务启动脚本docker-compose.yml配置文件。
例如，可以使用命令docker exec-it code-server/bin/bash进入上述步骤中启动的code-server服务，下载无头浏览器google-chrome-stable_current_amd64.deb，使用命令dpkg-igoogle-chrome-stable_current_amd64.deb安装无头浏览器。
S4，在前端通过无头浏览器访问web版的在线开发集成工具vscode，通过第一扩展插件和第二扩展插件对javascript代码进行调试。
例如，可以在浏览器中输入https://localhost访问web版vscode，并输入预先配置的登录账号和密码，配置vscode服务的launch.json中的debug，使用上述步骤的扩展插件vscode-browser-preview提供的Browser Preview，以Attach的方式进行调试。
例如，可以使用F1快捷键找到命令上述步骤的插件打开浏览器预览，使用F5快捷键调试，使用上述步骤配置的调试方式进行调试。
如图2所示，给出了一种示例性的运行结果示意图，图中为在前端网页上对javascript代码进行调试的界面。
本实施例通过修改在线开发集成工具vscode的插件，使其能够在浏览器环境中运行，然后通过nginx服务将网页请求转发到code-server服务上，通过code-server服务中的无头浏览器获取访问请求，实现了使用浏览器在跨平台的方式直接使用在线开发集成工具vscode对javascript代码进行在线开发和调试，能够方便多人协助开发，提高了javascript代码开发和调试的便利性。
可选地，在一些可能的实施方式中，第一扩展插件为vscode-js-debug插件，第二扩展插件为vscode-browser-preview插件。
需要说明的是，vscode-js-debug插件可以让开发集成工具vscode支持javascript语法的调试，通过修改该插件，能够让该扩展插件能在浏览器环境中运行。
vscode-browser-preview插件是可以使在线开发集成工具vscode的编辑环境中打开一个真的浏览器渲染开发的javascript脚本，并且可以通过上述vscode-js-debug插件调试代码，并且支持无头浏览器headless chromium。
可选地，在一些可能的实施方式中，修改在线开发集成工具vscode的第一扩展插件和第二扩展插件，使开发集成工具vscode支持在浏览器环境中运行，具体包括：
下载并打开vscode-js-debug插件的源码，修改源码路径中的launchCompanionBrowser函数，使vscode-js-debug插件支持在浏览器端运行；
编译打包vscode-js-debug插件，并存储编译结果；
例如，可以修改源码路径src/ui/companionBrowserLaunch.ts中launchCompanionBrowser函数使vscode-js-debug插件可以运行在浏览器端，在该工程目录下执行命令npm run package编译打包代码，编译的结果在根目录下的dist文件夹下。
下载并打开vscode-browser-preview插件的源码，修改源码路径中的resolveDebugConfiguration函数，使vscode-browser-preview插件支持在浏览器端运行；
编译打包vscode-browser-preview插件，并存储编译结果。
例如，可以修改源码路径ext-src/debugProvider.ts中resolveDebugConfiguration函数使vscode-browser-preivew扩展可以运行在浏览器端，编译打包该插件，在该插件工程目录下执行npm run build编译打包代码，编译的结果在根目录下的build文件夹下。
可选地，在一些可能的实施方式中，修改nginx服务的配置文件，将nginx服务配置为支持https协议，具体包括：
生成公钥证书，得到server.crt文件和server.key文件；
例如，可以使用openssl生成x509证书得到文件server.crt和server.key。
根据server.crt文件和server.key文件配置nginx.conf文件，将nginx服务配置为支持https协议。
应理解，配置nginx.conf使用上述步骤生成的证书。
下面给出实例性的配置步骤。
例如，可以在配置文件中的server配置块下增加ssl_certificate server.crt，从而实现配置证书使用文件；
在配置文件中的server配置块下增加ssl_certificate_key server.key，从而实现配置证书文件密钥；
在配置文件中的server配置块下增加ssl_session_timeout 5m，从而实现配置https的会话超时时间；
在配置文件中的server配置块下增加ssl_protocols TLSv1 TLSv1.1TLSv1.2，从而实现配置使用的TLS的协议版本支持；
在配置文件中的server配置块下增加ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:！aNULL:！MD5:！RC4:！DHE；
ssl_prefer_server_ciphers on，从而实现配置加密套件。
可选地，在一些可能的实施方式中，编排服务启动的脚本文件，通过脚本文件启动code-server服务，在code-server服务中安装无头浏览器，具体包括：
使nginx服务和code-server服务在同一个网络环境中；
在code-server服务中配置登录账号和密码；
在nginx服务中配置code-server服务的反向代理，使客户端的网页请求通过nginx服务转发到code-server服务上；
使nginx服务暴露预设https端口；
配置code-server服务的container_name为code-server；
使用nginx.conf文件使nginx服务支持https协议；
将存储的编译结果的插件挂载到code-server服务上。
下面给出一种示例性的配置步骤。
首先，建立网络环境。在yml配置文件中增加键值对networks:codeserver，使nginx服务和code-server服务同在一个网络环境
然后，在code-server服务中配置登录账号和密码。在上述yml配置文件中的services/code-server下配置environment下的DOCKER_USER和DOCKER_PASSWORD字段。
然后，在nginx服务中配置code-server服务的反向代理，使客户端的http/https请求通过nginx代理服务转发到code-server服务上。在上述yml配置文件中的services/nginx下配置links字段为code-server。
然后，设置nginx服务暴露http端口80和https端口443。具体地，在上述yml配置文件中的services/nginx/ports下增加80和443的端口。
然后，配置nginx服务的container_name为nginx。具体地，在上述yml配置文件中的services/nginx/container_name配置为nginx。
然后，配置code-server服务的container_name为code-server。具体地，在上述yml配置文件中的services/code-server/container_name配置为code-server。
然后，对代理服务nginx的配置修改使其支持https协议,使用上述步骤中的配置文件nginx.conf。
最后，将上述步骤中修改的开发集成工具vscode的扩展插件编译生成在dist和build文件的插件挂载到容器服务code-server上。
具体地，可以通过yml文件中字段volumes挂载到code-server服务中的路径/config/extensions上以便在code-server容器中的vscode应用可以加载到上述步骤中修改的扩展插件，以便在浏览器端访问时开发集成工具vscode可以支持预览和调试。
本发明还提供一种在前端开发调试javascript代码的系统，包括：
插件编辑单元，用于修改在线开发集成工具vscode的第一扩展插件和第二扩展插件，使开发集成工具vscode支持在浏览器环境中运行，其中，第一扩展插件为使在线开发集成工具vscode支持javascript代码调试的插件，第二扩展插件为支持使在线开发集成工具vscode在编辑环境中打开真实浏览器解释渲染javascript的插件；
配置修改单元，用于修改nginx服务的配置文件，将nginx服务配置为支持https协议，使用修改后的nginx服务的配置文件作为https协议的代理，将后端服务代理到code-server服务；
脚本编辑单元，用于编排服务启动的脚本文件，通过脚本文件启动code-server服务，在code-server服务中安装无头浏览器；
前端调试单元，用于在前端通过无头浏览器访问web版的在线开发集成工具vscode，通过第一扩展插件和第二扩展插件对javascript代码进行调试。
可选地，在一些可能的实施方式中，第一扩展插件为vscode-js-debug插件，第二扩展插件为vscode-browser-preview插件。
可选地，在一些可能的实施方式中，插件编辑单元具体用于下载并打开vscode-js-debug插件的源码，修改源码路径中的launchCompanionBrowser函数，使vscode-js-debug插件支持在浏览器端运行；
编译打包vscode-js-debug插件，并存储编译结果；
下载并打开vscode-browser-preview插件的源码，修改源码路径中的resolveDebugConfiguration函数，使vscode-browser-preview插件支持在浏览器端运行；
编译打包vscode-browser-preview插件，并存储编译结果。
可选地，在一些可能的实施方式中，配置修改单元具体用于生成公钥证书，得到server.crt文件和server.key文件；
根据server.crt文件和server.key文件配置nginx.conf文件，将nginx服务配置为支持https协议。
可选地，在一些可能的实施方式中，脚本编辑单元具体用于使nginx服务和code-server服务在同一个网络环境中；
在code-server服务中配置登录账号和密码；
在nginx服务中配置code-server服务的反向代理，使客户端的网页请求通过nginx服务转发到code-server服务上；
使nginx服务暴露预设https端口；
配置code-server服务的container_name为code-server；
使用nginx.conf文件使nginx服务支持https协议；
将存储的编译结果的插件挂载到code-server服务上。
应理解，上述实施方式为与在先方法实施方式对应的产品实施方式，关于产品实施方式的说明可以参考在先方法实施方式的说明，在此不再赘述。
应理解，在不违背本发明构思的前提下，本领域技术人员可以将上述实施方式进行任意组合，均在本发明的保护范围内。
读者应理解，在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的方法实施例仅仅是示意性的，例如，步骤的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个步骤可以结合或者可以集成到另一个步骤，或一些特征可以忽略，或不执行。
上述方法如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。
Claims (10)
1.一种在前端开发调试javascript代码的方法，其特征在于，包括：
修改在线开发集成工具vscode的第一扩展插件和第二扩展插件，使所述开发集成工具vscode支持在浏览器环境中运行，其中，所述第一扩展插件为使所述在线开发集成工具vscode支持javascript代码调试的插件，所述第二扩展插件为支持使所述在线开发集成工具vscode在编辑环境中打开真实浏览器解释渲染javascript的插件；
修改nginx服务的配置文件，将nginx服务配置为支持https协议，使用修改后的nginx服务的配置文件作为所述https协议的代理，将后端服务代理到code-server服务；
编排服务启动的脚本文件，通过所述脚本文件启动所述code-server服务，在所述code-server服务中安装无头浏览器；
在前端通过所述无头浏览器访问web版的在线开发集成工具vscode，通过所述第一扩展插件和所述第二扩展插件对javascript代码进行调试。
2.根据权利要求1所述的在前端开发调试javascript代码的方法，其特征在于，所述第一扩展插件为vscode-js-debug插件，所述第二扩展插件为vscode-browser-preview插件。
3.根据权利要求2所述的在前端开发调试javascript代码的方法，其特征在于，修改在线开发集成工具vscode的第一扩展插件和第二扩展插件，使所述开发集成工具vscode支持在浏览器环境中运行，具体包括：
下载并打开所述vscode-js-debug插件的源码，修改所述源码路径中的launchCompanionBrowser函数，使所述vscode-js-debug插件支持在浏览器端运行；
编译打包所述vscode-js-debug插件，并存储编译结果；
下载并打开所述vscode-browser-preview插件的源码，修改所述源码路径中的resolveDebugConfiguration函数，使所述vscode-browser-preview插件支持在浏览器端运行；
编译打包所述vscode-browser-preview插件，并存储编译结果。
4.根据权利要求3所述的在前端开发调试javascript代码的方法，其特征在于，修改nginx服务的配置文件，将nginx服务配置为支持https协议，具体包括：
生成公钥证书，得到server.crt文件和server.key文件；
根据所述server.crt文件和所述server.key文件配置nginx.conf文件，将nginx服务配置为支持https协议。
5.根据权利要求4所述的在前端开发调试javascript代码的方法，其特征在于，编排服务启动的脚本文件，通过所述脚本文件启动所述code-server服务，在所述code-server服务中安装无头浏览器，具体包括：
使所述nginx服务和所述code-server服务在同一个网络环境中；
在所述code-server服务中配置登录账号和密码；
在所述nginx服务中配置所述code-server服务的反向代理，使客户端的网页请求通过所述nginx服务转发到所述code-server服务上；
使所述nginx服务暴露预设https端口；
配置所述code-server服务的container_name为code-server；
使用所述nginx.conf文件使所述nginx服务支持https协议；
将存储的所述编译结果的插件挂载到所述code-server服务上。
6.一种在前端开发调试javascript代码的系统，其特征在于，包括：
插件编辑单元，用于修改在线开发集成工具vscode的第一扩展插件和第二扩展插件，使所述开发集成工具vscode支持在浏览器环境中运行，其中，所述第一扩展插件为使所述在线开发集成工具vscode支持javascript代码调试的插件，所述第二扩展插件为支持使所述在线开发集成工具vscode在编辑环境中打开真实浏览器解释渲染javascript的插件；
配置修改单元，用于修改nginx服务的配置文件，将nginx服务配置为支持https协议，使用修改后的nginx服务的配置文件作为所述https协议的代理，将后端服务代理到code-server服务；
脚本编辑单元，用于编排服务启动的脚本文件，通过所述脚本文件启动所述code-server服务，在所述code-server服务中安装无头浏览器；
前端调试单元，用于在前端通过所述无头浏览器访问web版的在线开发集成工具vscode，通过所述第一扩展插件和所述第二扩展插件对javascript代码进行调试。
7.根据权利要求6所述的在前端开发调试javascript代码的系统，其特征在于，所述第一扩展插件为vscode-js-debug插件，所述第二扩展插件为vscode-browser-preview插件。
8.根据权利要求7所述的在前端开发调试javascript代码的系统，其特征在于，所述插件编辑单元具体用于下载并打开所述vscode-js-debug插件的源码，修改所述源码路径中的launchCompanionBrowser函数，使所述vscode-js-debug插件支持在浏览器端运行；
编译打包所述vscode-js-debug插件，并存储编译结果；
下载并打开所述vscode-browser-preview插件的源码，修改所述源码路径中的resolveDebugConfiguration函数，使所述vscode-browser-preview插件支持在浏览器端运行；
编译打包所述vscode-browser-preview插件，并存储编译结果。
9.根据权利要求8所述的在前端开发调试javascript代码的系统，其特征在于，所述配置修改单元具体用于生成公钥证书，得到server.crt文件和server.key文件；
根据所述server.crt文件和所述server.key文件配置nginx.conf文件，将nginx服务配置为支持https协议。
10.根据权利要求9所述的在前端开发调试javascript代码的系统，其特征在于，所述脚本编辑单元具体用于使所述nginx服务和所述code-server服务在同一个网络环境中；
在所述code-server服务中配置登录账号和密码；
在所述nginx服务中配置所述code-server服务的反向代理，使客户端的网页请求通过所述nginx服务转发到所述code-server服务上；
使所述nginx服务暴露预设https端口；
配置所述code-server服务的container_name为code-server；
使用所述nginx.conf文件使所述nginx服务支持https协议；
将存储的所述编译结果的插件挂载到所述code-server服务上。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210827659.9A CN115203033A (zh) | 2022-07-13 | 2022-07-13 | 一种在前端开发调试javascript代码的方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210827659.9A CN115203033A (zh) | 2022-07-13 | 2022-07-13 | 一种在前端开发调试javascript代码的方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115203033A true CN115203033A (zh) | 2022-10-18 |
Family
ID=83582843
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210827659.9A Pending CN115203033A (zh) | 2022-07-13 | 2022-07-13 | 一种在前端开发调试javascript代码的方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115203033A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116560658A (zh) * | 2023-06-29 | 2023-08-08 | 睿思芯科(深圳)技术有限公司 | 基于云技术的芯片集成开发系统 |
-
2022
- 2022-07-13 CN CN202210827659.9A patent/CN115203033A/zh active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116560658A (zh) * | 2023-06-29 | 2023-08-08 | 睿思芯科(深圳)技术有限公司 | 基于云技术的芯片集成开发系统 |
| CN116560658B (zh) * | 2023-06-29 | 2024-02-06 | 睿思芯科(深圳)技术有限公司 | 基于云技术的芯片集成开发系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20210271472A1 (en) | Application Wrapping for Application Management Framework | |
| EP2432186A1 (en) | File uploading realization method and system for web application | |
| EP3140981A1 (en) | Application customization | |
| Beurdouche et al. | {FLEXTLS}: A Tool for Testing {TLS} Implementations | |
| US10148621B2 (en) | Provisioning proxy for provisioning data on hardware resources | |
| Hall | Ansible configuration management | |
| JP6793667B2 (ja) | アプリケーションダウンロード方法及び装置 | |
| CN115203033A (zh) | 一种在前端开发调试javascript代码的方法及系统 | |
| Sommer et al. | Spicy: a unified deep packet inspection framework for safely dissecting all your data | |
| Butler | NGINX Cookbook | |
| CN111158773B (zh) | 一种ks引导自动化批量装机的方法及系统 | |
| Ma et al. | Sulleyex: A fuzzer for stateful network protocol | |
| Yaseen et al. | Security Analysis and Deployment Measurement of Transport Layer Security Protocol | |
| CN113886892B (zh) | 应用程序的数据获取方法和装置、及存储介质和电子设备 | |
| Kalra | Mobile Application Security Testing | |
| Rodigari | Performance Analysis of Zero Trust in Cloud Native Systems | |
| Oosterhof | Cowrie documentation | |
| Pale | Mastering the nmap scripting engine | |
| Pironti et al. | Formally-based black-box monitoring of security protocols | |
| Sun et al. | Using the cryptographic accelerators in the ultrasparc t1 and t2 processors | |
| Curran et al. | TLS Session Key Extraction from Memory on iOS Devices | |
| Qu et al. | Design and implementation of embedded secure web server for ARM platform | |
| CN113296875A (zh) | 镜像文件处理方法及系统 | |
| CN117729033A (zh) | 一种测试方法、装置、设备及存储介质 | |
| Ponomarev | A Proof of Concept for an AWS Lambda malicious code generator tool |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: Room 105, first floor, building 82, No. 10, Jiuxianqiao Road, Chaoyang District, Beijing 100015 Applicant after: Beijing Youhao Technology Co.,Ltd. Address before: Room 105, first floor, building 82, No. 10, Jiuxianqiao Road, Chaoyang District, Beijing 100015 Applicant before: BEIJING YOUNUO TECHNOLOGY Co.,Ltd. |