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

【發(fā)明內容】

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