一種app中html5頁面調(diào)試方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于互聯(lián)網(wǎng)軟件領(lǐng)域，尤其涉及一種APP中HTML5頁面調(diào)試方法及裝置。
【背景技術(shù)】
[0002]目前手機(jī)APP包括NATIVE APP和Web APP，其中，NATIVE APP是指基于本地(操作系統(tǒng))運(yùn)行的APP，其可以通過專業(yè)的手機(jī)APP開發(fā)工具(如ECLIPSE)進(jìn)行開發(fā)；Web APP是指基于手機(jī)瀏覽器運(yùn)行的APP，目前Web APP 一般采用HTML5頁面來實(shí)現(xiàn)，在HTML5頁面的開發(fā)中，通常在PC上編寫HTML5頁面及相關(guān)資源(JS文件，CSS文件等)，提交到固定的服務(wù)器，然后在手機(jī)APP上加載HTML5頁面并運(yùn)行，然后在手機(jī)中通過進(jìn)行調(diào)試，其中，在調(diào)試中手機(jī)必須通過JS BRIDGE調(diào)用APP程序與后臺(tái)服務(wù)端通訊，然而，這種調(diào)試方法十分不便，不能實(shí)現(xiàn)常用的調(diào)試方法，如斷點(diǎn)調(diào)置，逐步執(zhí)行(step by step)，運(yùn)行時(shí)變量查詢等，且調(diào)試前需上傳HTML5頁面及相應(yīng)靜態(tài)資源。

【發(fā)明內(nèi)容】

[0003](一 )要解決的技術(shù)問題
[0004]本發(fā)明的目的在于，提供一種APP中HTML5頁面調(diào)試裝置及方法，在本地計(jì)算機(jī)上編寫HTML5頁面后，能在本地瀏覽器上調(diào)試該HTML5頁面，提高了 HTML5頁面的調(diào)試效率。
[0005]( 二 )技術(shù)方案
[0006]本發(fā)明提供一種APP中HTML5頁面調(diào)試方法，包括:
[0007]S1，在本地計(jì)算機(jī)上模擬APP運(yùn)行環(huán)境，并存儲(chǔ)HTML5頁面；
[0008]S2，在模擬的APP運(yùn)行環(huán)境中加載HTML5頁面，并顯示所加載的HTML5頁面；
[0009]S3，根據(jù)顯示的HTML5頁面，對(duì)該HTML5頁面進(jìn)行調(diào)試。
[0010]本發(fā)明還提供一種APP中HTML5頁面調(diào)試裝置，包括:
[0011]模擬模塊，用于在本地計(jì)算機(jī)上模擬APP的運(yùn)行環(huán)境，并存儲(chǔ)HTML5頁面；
[0012]顯示模塊，用于在模擬的APP運(yùn)行環(huán)境中加載所述HTML5頁面，并顯示所加載的HTML5頁面；
[0013]調(diào)試模塊，用于根據(jù)顯示的HTML5頁面，對(duì)該HTML5頁面進(jìn)行調(diào)試。
[0014](三)有益效果
[0015]本發(fā)明通過APP模擬器使APP能在本地計(jì)算機(jī)上的模擬運(yùn)行，通過調(diào)用本地JS庫(kù)，能使瀏覽器呈現(xiàn)出HTML5頁面在手機(jī)運(yùn)行中的效果，并且由于采用瀏覽器對(duì)HTML5頁面進(jìn)行調(diào)試，能實(shí)現(xiàn)常用的調(diào)試方法，如斷點(diǎn)調(diào)置、逐步執(zhí)行(step by step)、運(yùn)行時(shí)變量查詢等，提高了 HTML5頁面的調(diào)試效率。
【附圖說明】
[0016]圖1是本發(fā)明實(shí)施例提供的APP中HTML5頁面調(diào)試方法的流程圖。
[0017]圖2是本發(fā)明實(shí)施例提供的APP中HTML5頁面調(diào)試方法的示意圖。
【具體實(shí)施方式】
[0018]本發(fā)明提供一種APP中HTML5頁面調(diào)試方法及裝置，首先在本地計(jì)算機(jī)上模擬APP運(yùn)行環(huán)境，并存儲(chǔ)HTML5頁面，然后在模擬的APP運(yùn)行環(huán)境中加載所述HTML5頁面，并顯示所加載的HTML5頁面，最后根據(jù)顯示的HTML5頁面，對(duì)HTML5頁面進(jìn)行調(diào)試。本發(fā)明能在本地計(jì)算機(jī)呈現(xiàn)出HTML5頁面在手機(jī)運(yùn)行中的效果，并且在本地計(jì)算機(jī)中可采用瀏覽器對(duì)HTML5頁面進(jìn)行調(diào)試，能實(shí)現(xiàn)常用的調(diào)試方法，提高了 HTML5頁面的調(diào)試效率。
[0019]根據(jù)本發(fā)明的一種實(shí)施方式，HTML5頁面調(diào)試方法包括:
[0020]S1，在本地計(jì)算機(jī)上模擬APP運(yùn)行環(huán)境，并存儲(chǔ)HTML5頁面；由于本發(fā)明是在本地計(jì)算機(jī)上對(duì)APP中的HTML5頁面進(jìn)行調(diào)試，其需要在本地計(jì)算機(jī)上能夠運(yùn)行APP，優(yōu)選地，可采用APP模擬器來模擬APP運(yùn)行環(huán)境，另外，將HTML5頁面存儲(chǔ)于APP模擬器中，APP模擬器也是調(diào)試階段HTML5頁面的運(yùn)行容器，調(diào)試人員將編寫好的HTML5頁面放置在此容器里，然后加載HTML5頁面。
[0021]S2，在模擬的APP運(yùn)行環(huán)境中加載所述HTML5頁面，并顯示所加載的HTML5頁面。在手機(jī)或PAD等終端運(yùn)行APP時(shí)，需要通過終端內(nèi)置的JS BRIDGE才能顯示HTML5頁面，其中，HTML5頁面的JS是通過JS BRIDGE調(diào)用APP程序與后臺(tái)服務(wù)端通訊，而本地計(jì)算機(jī)上無法使用JS BRIDGE，本發(fā)明調(diào)用本地計(jì)算機(jī)中的本地JS庫(kù)，其中，本地JS庫(kù)在本地計(jì)算機(jī)中提供JS方法接口與JS BRIDGE 一致，本地計(jì)算機(jī)通過本地JS庫(kù)與APP模擬器進(jìn)行交互，APP模擬器與后端的APP服務(wù)網(wǎng)關(guān)通訊，以達(dá)到手機(jī)上運(yùn)行HTML5頁面的效果
[0022]S3，根據(jù)所述顯示的HTML5頁面，對(duì)該HTML5頁面進(jìn)行調(diào)試。其中，步驟S2和步驟S3均可通過本地瀏覽器來實(shí)現(xiàn)，本地瀏覽器通過調(diào)用本地計(jì)算機(jī)中的本地JS庫(kù)，來顯示HTML5頁面，現(xiàn)有的主流瀏覽器，如firebug^hrome，這些瀏覽器都有成熟的頁面調(diào)試工具，能實(shí)現(xiàn)常用的調(diào)試方法，如斷點(diǎn)調(diào)置，逐步執(zhí)行(step by step)，運(yùn)行時(shí)變量查詢等。
[0023]S4，將調(diào)試好的HTML5頁面發(fā)送至遠(yuǎn)端的APP服務(wù)器并保存。這樣，在正常使用中，手機(jī)或PAD等終端中的APP就能通過與APP服務(wù)器的通信，獲取并顯示相應(yīng)的HTML5頁面。
[0024]根據(jù)本發(fā)明的一種實(shí)施方式，在步驟S3中，調(diào)試HTML5頁面包括:
[0025]觸發(fā)HTML5頁面中的功能，以產(chǎn)生HTTP請(qǐng)求，并將該HTTP請(qǐng)求發(fā)送至APP服務(wù)器中，APP服務(wù)器根據(jù)該HTTP請(qǐng)求返回相應(yīng)的HTTP響應(yīng)，以對(duì)該HTML5頁面進(jìn)行調(diào)試。
[0026]根據(jù)本發(fā)明的一種實(shí)施方式，在步驟S3中，通過APP網(wǎng)關(guān)與APP服務(wù)器進(jìn)行信息交互，其中，HTTP請(qǐng)求設(shè)有標(biāo)識(shí)符，APP網(wǎng)關(guān)根據(jù)該標(biāo)識(shí)符確定HTTP請(qǐng)求來自于本地計(jì)算機(jī)?，F(xiàn)有APP的C/S中，一般在客戶端與服務(wù)器之間設(shè)有APP網(wǎng)關(guān)，其用于實(shí)現(xiàn)cookie鑒權(quán)、用戶黑白名單過濾、HTTP請(qǐng)求轉(zhuǎn)發(fā)等功能。在本發(fā)明中，在本地計(jì)算機(jī)中調(diào)試HTML5頁面時(shí)也需要與服務(wù)器進(jìn)行通信，但是本地計(jì)算機(jī)并沒有登錄功能，即本地的HTML5頁面不能發(fā)送用戶的cookie信息(APP中的HTML5頁面可通過JS BRIDGE調(diào)用APP的方法，獲取APP上用戶的cookie，然后發(fā)送給APP網(wǎng)關(guān))，而且APP網(wǎng)關(guān)由于鑒權(quán)的需要，需區(qū)分HTTP請(qǐng)求的來源是手機(jī)APP，還是本地調(diào)試的請(qǐng)求，即通過在本地HTML5頁面發(fā)送給APP網(wǎng)關(guān)的HTTP頭部里會(huì)有一個(gè)特殊的標(biāo)識(shí)符，用以與APP HTML5頁面的URL請(qǐng)求區(qū)別。
[0027]根據(jù)本發(fā)明的一種實(shí)施方式，本發(fā)明相對(duì)于APP少了用戶登錄及網(wǎng)關(guān)交互時(shí)鑒權(quán)過程，因此需單獨(dú)考慮安全策略，故本發(fā)明采用以下安全策略:調(diào)試HTML5頁面之前，APP服務(wù)器為調(diào)試人員的用戶ID分配密鑰，并將該密鑰連同該用戶ID緩存于APP網(wǎng)關(guān)中；在發(fā)送HTTP請(qǐng)求時(shí)，利用所述密鑰對(duì)HTTP請(qǐng)求進(jìn)行加密，生成HTTP請(qǐng)求密文，并將該HTTP請(qǐng)求密文連同用戶ID發(fā)送至所述APP網(wǎng)關(guān)中，該APP網(wǎng)關(guān)根據(jù)發(fā)送的用戶ID，在緩存中找到相應(yīng)的密鑰，并利用該密鑰對(duì)該HTTP請(qǐng)求密文進(jìn)行解密，得到HTTP請(qǐng)求，并將該HTTP請(qǐng)求轉(zhuǎn)發(fā)至APP服務(wù)器。這樣，在本地進(jìn)行HTML5頁面調(diào)試時(shí)也能實(shí)現(xiàn)APP端的安全機(jī)制，可防止惡意的HTTP調(diào)試請(qǐng)求。
[0028]根據(jù)本發(fā)明的一種實(shí)施方式，HTML5頁面調(diào)試裝置包括:
[0029]模擬模塊，用于在本地計(jì)算機(jī)上模擬APP的運(yùn)行環(huán)境，并存儲(chǔ)HTML5頁面；
[0030]顯示模塊，用于在模擬的APP運(yùn)行環(huán)境中加載HTML5頁面，并顯示所加載的HTML5頁面；
[0031]調(diào)試模塊，用于根據(jù)顯示的HTML5頁面，對(duì)該HTML5頁面進(jìn)行調(diào)試。
[0032]根據(jù)本發(fā)明的一種實(shí)施方式，模擬模塊還用于將調(diào)試好的HTML5頁面發(fā)送至APP服務(wù)器并保存。
[0033]根據(jù)本發(fā)明的一種實(shí)施方式，調(diào)試模塊觸發(fā)HTML5頁面中的功能，以在模擬模塊中產(chǎn)生HTTP請(qǐng)求，并將該HTTP請(qǐng)求發(fā)送至APP服務(wù)器中，APP服務(wù)器根據(jù)該HTTP請(qǐng)求產(chǎn)生相應(yīng)的HTTP響應(yīng)。
[0034]根據(jù)本發(fā)明的一種實(shí)施方式，模擬模塊通過APP網(wǎng)關(guān)與APP服務(wù)器進(jìn)行信息交互，其中，HTTP請(qǐng)求設(shè)有標(biāo)識(shí)符，APP網(wǎng)關(guān)根據(jù)該標(biāo)識(shí)符確定HTTP請(qǐng)求來自于本地計(jì)算機(jī)。
[0035]根據(jù)本發(fā)明的