[發(fā)明專利]前端項(xiàng)目調(diào)試方法及系統(tǒng)

在審

• 申請?zhí)枺?/td>: 202210092753.4
• 申請日: 2022-01-26
• 公開（公告）號(hào): CN114416101A
• 公開（公告）日: 2022-04-29
• 發(fā)明（設(shè)計(jì)）人: 尤海洋
• 申請（專利權(quán)）人: 工銀科技有限公司;中國工商銀行股份有限公司
• 主分類號(hào): G06F8/41
• 分類號(hào): G06F8/41;G06F8/71
• 代理公司: 北京三友知識(shí)產(chǎn)權(quán)代理有限公司 11127
• 代理人: 周永君;董驍毅

1.一種前端項(xiàng)目調(diào)試方法，其特征在于，所述方法包含：

監(jiān)聽瀏覽器的服務(wù)端口獲取用戶輸入的網(wǎng)站中待調(diào)試頁面的頁面信息；

根據(jù)所述頁面信息于預(yù)設(shè)配置文件中獲得所述頁面信息對應(yīng)的入口文件，根據(jù)所述入口文件提取待調(diào)試頁面的網(wǎng)頁代碼；

根據(jù)所述瀏覽器屬性將所述網(wǎng)頁代碼編譯打包為對應(yīng)屬性的顯示代碼，將所述顯示代碼提供至瀏覽器顯示輸出。

2.根據(jù)權(quán)利要求1所述的前端項(xiàng)目調(diào)試方法，其特征在于，所述監(jiān)聽瀏覽器的服務(wù)端口獲取用戶輸入的網(wǎng)站中待調(diào)試頁面的頁面信息包含：

通過Node.js開啟瀏覽器服務(wù)端口的監(jiān)聽配置，獲取用戶輸入的網(wǎng)站中待調(diào)試頁面的頁面信息。

3.一種前端項(xiàng)目調(diào)試方法，其特征在于，所述方法包含：

獲取用戶輸入的頁面參數(shù)，根據(jù)所述頁面參數(shù)于預(yù)設(shè)配置文件中獲得所述頁面參數(shù)對應(yīng)的入口文件；

根據(jù)所述入口文件提取待調(diào)試頁面的網(wǎng)頁代碼，根據(jù)瀏覽器屬性將所述網(wǎng)頁代碼編譯打包為對應(yīng)屬性的顯示代碼；

通過瀏覽器將所述顯示代碼渲染后顯示輸出。

4.根據(jù)權(quán)利要求3所述的前端項(xiàng)目調(diào)試方法，其特征在于，通過瀏覽器將所述顯示代碼渲染后顯示輸出包含：

監(jiān)聽瀏覽器的服務(wù)端口獲取用戶輸入的所述頁面參數(shù)所對應(yīng)的頁碼信息；

根據(jù)所述頁面信息通過瀏覽器將所述顯示代碼渲染后顯示輸出。

5.一種前端項(xiàng)目調(diào)試系統(tǒng)，其特征在于，所述系統(tǒng)包含構(gòu)建工具、開發(fā)服務(wù)器和配置文件存儲(chǔ)庫；

所述開發(fā)服務(wù)器用于監(jiān)聽瀏覽器的服務(wù)端口獲取用戶輸入的網(wǎng)站中待調(diào)試頁面的頁面信息；以及，將接收到的顯示代碼渲染到瀏覽器中顯示輸出；

所述構(gòu)建工具用于根據(jù)所述頁面信息于所述配置文件存儲(chǔ)庫中獲得所述頁面信息對應(yīng)的入口文件，根據(jù)所述入口文件提取待調(diào)試頁面的網(wǎng)頁代碼，根據(jù)所述瀏覽器屬性將所述網(wǎng)頁代碼編譯打包為對應(yīng)屬性的顯示代碼，將所述顯示代碼提供至所述開發(fā)服務(wù)器；

所述配置文件存儲(chǔ)庫用于存儲(chǔ)網(wǎng)站的配置文件，所述配置文件包含入口文件和多個(gè)頁面的網(wǎng)頁代碼。

6.根據(jù)權(quán)利要求5所述的前端項(xiàng)目調(diào)試系統(tǒng)，其特征在于，所述構(gòu)建工具還包含：獲取用戶輸入的頁面參數(shù)，根據(jù)所述頁面參數(shù)于所述配置文件存儲(chǔ)庫中通過對應(yīng)的入口文件提取待調(diào)試頁面的網(wǎng)頁代碼，根據(jù)所述瀏覽器屬性將所述網(wǎng)頁代碼編譯打包為對應(yīng)屬性的顯示代碼，將所述顯示代碼提供至所述開發(fā)服務(wù)器。

7.根據(jù)權(quán)利要求5所述的前端項(xiàng)目調(diào)試系統(tǒng)，其特征在于，所述開發(fā)服務(wù)器還包含監(jiān)聽模塊，所述監(jiān)聽模塊用于通過Node.js開啟瀏覽器服務(wù)端口監(jiān)聽，通過監(jiān)聽瀏覽器服務(wù)端口獲得用戶輸入的網(wǎng)站中待調(diào)試頁面的頁面信息。

8.根據(jù)權(quán)利要求5所述的前端項(xiàng)目調(diào)試系統(tǒng)，其特征在于，所述開發(fā)服務(wù)器通過Node.js的套接字與所述構(gòu)建工具建立長連接。

9.一種電子設(shè)備，包括存儲(chǔ)器、處理器及存儲(chǔ)在存儲(chǔ)器上并可在處理器上運(yùn)行的計(jì)算機(jī)程序，其特征在于，所述處理器執(zhí)行所述計(jì)算機(jī)程序時(shí)實(shí)現(xiàn)權(quán)利要求1至4任一所述方法。

10.一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其特征在于，所述計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)存儲(chǔ)有由計(jì)算機(jī)執(zhí)行權(quán)利要求1至4任一所述方法的計(jì)算機(jī)程序。