一種頁面調試預覽方法及系統的制作方法

一種頁面調試預覽方法及系統的制作方法
【專利摘要】本發明實施例公開了頁面調試預覽方法，包括：獲取需要在目標交互平臺進行顯示的頁面信息；通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接口，根據預設的所述目標交互平臺的頁面顯示區域參數，結合所述N個目標調試設備的顯示屏區域參數分別渲染所述頁面信息；所述N為大于等于2的自然數；在當前顯示頁面顯示渲染后的所述N個目標設備的預覽頁面。本發明還公開了頁面調試預覽系統，采用本發明可以實現在前端開發移動頁面的時候，只需要一個平臺就能夠看到不同設備的預覽效果，從而節省了不斷找設備的煩惱，另外通過預先嵌入的目標腳本代碼實現了本地化調試頁面，跟本地頁面聯動修改，實時體驗修改后的效果，開發效率大大提高。
【專利說明】
-種頁面調試預覽方法及系統
技術領域
[0001] 本發明設及計算機互聯網領域，尤其頁面調試預覽方法及頁面調試預覽系統。
【背景技術】
[0002] 隨著電子科技W及移動互聯網技術的發展，電子設備(特別是智能手機)的功能越 來越強大，只要用戶按照自身的需求在電子設備上安裝各種應用程序，便可W完成各種事 務。
[0003] 當前，移動端HTML5頁面(簡稱冊)十分火熱，不少公司都借著運股熱潮去宣傳自己 的產品。但是由于移動設備十分多，特別是安卓手機型號不一，手機屏幕的分辨率繁多。為 了確保所有用戶可用，在開發移動端網頁時經常需要多臺手機逐一測試，產品和設計等開 發人員也需要逐臺手機體驗網頁效果，然而運種方式十分低效，且未能覆蓋所有手機。

【發明內容】

[0004] 本發明實施例所要解決的技術問題在于，提供一種頁面調試預覽方法及頁面調試 預覽系統，可W同時模擬多設備環境下調試和預覽移動端頁面，大大提高開發效率。
[0005] 為了解決上述技術問題，本發明實施例第一方面公開了一種頁面調試預覽方法， 包括：
[0006] 獲取需要在目標交互平臺進行顯示的頁面信息；
[0007] 通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接口，根據預設的所 述目標交互平臺的頁面顯示區域參數，結合所述N個目標調試設備的顯示屏區域參數分別 擅染所述頁面信息;所述N為大于等于2的自然數；
[0008] 在當前顯示頁面顯示擅染后的所述N個目標設備的預覽頁面。
[0009] 結合第一方面，在第一種可能的實現方式中，所述根據預設的所述目標交互平臺 的頁面顯示區域參數，結合所述N個目標調試設備的顯示屏區域參數分別擅染所述頁面信 息，包括：
[0010] 根據預設的所述目標交互平臺的頁面顯示區域參數，W及所述目標調試設備的顯 示屏的寬高參數，匹配生成所述目標交互平臺在所述目標調試設備的操作系統中運行時的 顯示頁面上部結構信息和/或下部結構信息；
[0011] 根據所述顯示頁面上部結構信息和/或下部結構信息，擅染生成所述目標調試設 備的預覽頁面。
[0012] 結合第一方面，在第二種可能的實現方式中，還包括：
[0013] 對所述目標調試設備及其顯示屬性信息進行更新操作，并通過HTML5的本地存儲 技術LOCAL STORAGE將更新后的目標設備及其顯示屬性信息保存在本地；
[0014] 所述顯示屬性信息包括所述顯示屏區域參數;所述更新操作包括W下至少一項： 增加目標調試設備及其顯示屬性信息、修改目標調試設備的顯示屬性信息、刪除目標調試 設備及其顯示屬性信息。
[0015] 結合第一方面，在第=種可能的實現方式中，所述在當前顯示頁面顯示擅染后的 所述N個目標設備的預覽頁面之后，還包括：
[0016] 通過統一資源定位符的哈希技術，生成針對所述當前顯示頁面的頁面地址分享信 息。
[0017] 結合第一方面，在第四種可能的實現方式中，所述在當前顯示頁面顯示擅染后的 所述N個目標設備的預覽頁面之后，還包括：
[0018] 通過調用預設全屏開閉接口對所述當前顯示頁面進行全屏顯示的開閉操作。
[0019] 結合第一方面，或者第一方面的第一種可能的實現方式，或者第一方面的第二種 可能的實現方式，或者第一方面的第=種可能的實現方式，或者第一方面的第四種可能的 實現方式，在第五種可能的實現方式中，所述需要在目標交互平臺進行顯示的頁面信息包 括基于file協議的本地調試頁面；
[0020] 所述通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接口，包括：
[0021] 通過預先嵌入的目標腳本代碼，將所述基于file協議的本地調試頁面復制N份，并 新建N個沙箱環境；
[0022] 分別將所述N份本地調試頁面對應一一放進所述N個沙箱環境中來模擬調用所述 目標交互平臺的頁面顯示接口。
[0023] 結合第一方面的第五種可能的實現方式，在第六種可能的實現方式中，所述N個目 標設備的預覽頁面同時顯示在所述當前顯示頁面中；所述在當前顯示頁面顯示擅染后的所 述N個目標設備的預覽頁面，包括：
[0024] 在所述當前顯示頁面的預設區域顯示所述本地調試頁面的原始代碼；
[0025] 將針對所述原始代碼的修改自動聯動到所述本地調試頁面的文件中，并在所述當 前顯示頁面中實時顯示所述N個目標設備的預覽頁面修改后的顯示效果。
[0026] 本發明實施例第二方面公開了一種頁面調試預覽系統，包括：
[0027] 獲取模塊，用于獲取需要在目標交互平臺進行顯示的頁面信息；
[0028] 擅染模塊，用于通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接 口，根據預設的所述目標交互平臺的頁面顯示區域參數，結合所述N個目標調試設備的顯示 屏區域參數分別擅染所述頁面信息;所述N為大于等于2的自然數；
[0029] 顯示模塊，用于在當前顯示頁面顯示擅染后的所述N個目標設備的預覽頁面。
[0030] 結合第二方面，在第一種可能的實現方式中，所述擅染模塊包括：
[0031] 匹配生成單元，用于根據預設的所述目標交互平臺的頁面顯示區域參數，W及所 述目標調試設備的顯示屏的寬高參數，匹配生成所述目標交互平臺在所述目標調試設備的 操作系統中運行時的顯示頁面上部結構信息和/或下部結構信息；
[0032] 擅染生成單元，用于根據所述顯示頁面上部結構信息和/或下部結構信息，擅染生 成所述目標調試設備的預覽頁面。
[0033] 結合第二方面，在第二種可能的實現方式中，還包括：
[0034] 更新模塊，用于對所述目標調試設備及其顯示屬性信息進行更新操作；
[0035] 信息保存模塊，用于通過HTML5的本地存儲技術LOCAL STORAGE將更新后的目標設 備及其顯示屬性信息保存在本地；
[0036] 所述顯示屬性信息包括所述顯示屏區域參數;所述更新操作包括W下至少一項： 增加目標調試設備及其顯示屬性信息、修改目標調試設備的顯示屬性信息、刪除目標調試 設備及其顯示屬性信息。
[0037] 結合第二方面，在第=種可能的實現方式中，還包括：
[0038] 分享信息生成模塊，用于在所述顯示模塊在當前顯示頁面顯示擅染后的所述N個 目標設備的預覽頁面之后，通過統一資源定位符的哈希技術，生成針對所述當前顯示頁面 的頁面地址分享信息。
[0039] 結合第二方面，在第四種可能的實現方式中，還包括：
[0040] 全屏控制模塊，用于在所述顯示模塊在當前顯示頁面顯示擅染后的所述N個目標 設備的預覽頁面之后，通過調用預設全屏開閉接口對所述當前顯示頁面進行全屏顯示的開 閉操作。
[0041] 結合第二方面，或者第二方面的第一種可能的實現方式，或者第二方面的第二種 可能的實現方式，或者第二方面的第=種可能的實現方式，或者第二方面的第四種可能的 實現方式，在第五種可能的實現方式中，所述需要在目標交互平臺進行顯示的頁面信息包 括基于file協議的本地調試頁面；
[0042] 所述擅染模塊包括：
[0043] 復制新建單元，用于通過預先嵌入的目標腳本代碼，將所述基于file協議的本地 調試頁面復制N份，并新建N個沙箱環境；
[0044] 模擬調試單元，用于分別將所述N份本地調試頁面對應一一放進所述N個沙箱環境 中來模擬調用所述目標交互平臺的頁面顯示接口。
[0045] 結合第二方面的第五種可能的實現方式，在第六種可能的實現方式中，所述N個目 標設備的預覽頁面同時顯示在所述當前顯示頁面中；所述顯示模塊包括：
[0046] 代碼顯示單元，用于在所述當前顯示頁面的預設區域顯示所述本地調試頁面的原 始代碼；
[0047] 聯動顯示單元，用于將針對所述原始代碼的修改自動聯動到所述本地調試頁面的 文件中，并在所述當前顯示頁面中實時顯示所述N個目標設備的預覽頁面修改后的顯示效 果。
[0048] 本發明實施例第=方面公開了一種計算機存儲介質，所述計算機存儲介質存儲有 程序，所述程序執行時包括本發明實施例第一方面、或者第一方面的第一種可能的實現方 式，或者第一方面的第二種可能的實現方式，或者第一方面的第=種可能的實現方式，或者 第一方面的第四種可能的實現方式，或者第一方面的第五種可能的實現方式，或者第一方 面的第六種可能的實現方式中的頁面調試預覽方法的全部步驟。
[0049] 實施本發明實施例，通過預設的沙箱環境模擬調用目標交互平臺的頁面顯示接 口，根據預設的該目標交互平臺的頁面顯示區域參數，結合該N個目標調試設備的顯示屏區 域參數分別擅染所述頁面信息;在當前顯示頁面顯示擅染后的該N個目標設備的預覽頁面， 可W實現在前端開發移動頁面的時候，只需要一個平臺就能夠看到不同設備的預覽效果， 從而節省了不斷找設備的煩惱;并且，可W方便地自定義設備，當需要更多特殊的電子設備 的時候可W手動添加，維護屬于自己的測試設備;而且，通過預先嵌入的目標腳本代碼實現 了本地化調試頁面，跟本地頁面聯動修改，實時體驗修改后的效果，開發效率大大提高。另 夕h通過統一資源定位符的哈希技術，可W把當前預覽的頁面通過復制網址直接進行分享， 更加利于各開發人員在頁面開發進程的討論和研究，進一步提高開發效率。
【附圖說明】
[0050] 為了更清楚地說明本發明實施例或現有技術中的技術方案，下面將對實施例或現 有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本 發明的一些實施例，對于本領域普通技術人員來講，在不付出創造性勞動的前提下，還可W 根據運些附圖獲得其他的附圖。
[0051] 圖1是本發明實施例提供的頁面調試預覽方法的流程示意圖；
[0052] 圖2是本發明實施例提供的在線調試預覽頁面的界面示意圖；
[0053] 圖3是本發明實施例提供的div包裹的完整設備結構的信息；
[0054] 圖4是本發明實施例提供的頁面分享的界面示意圖；
[0055] 圖5是本發明實施例提供的化rome瀏覽器的界面示意圖；
[0056] 圖6是本發明實施例提供的化rome瀏覽器的聯動修改的界面示意圖；
[0057] 圖7是本發明實施例提供的頁面調試預覽系統的結構示意圖；
[0058] 圖8是本發明實施例提供的擅染模塊的結構示意圖；
[0059] 圖9是本發明提供的頁面調試預覽系統的另一實施例的結構示意圖；
[0060] 圖10是本發明實施例提供的顯示模塊的結構示意圖；
[0061] 圖11是本發明提供的頁面調試預覽系統的另一實施例的結構示意圖。
【具體實施方式】
[0062] 下面將結合本發明實施例中的附圖，對本發明實施例中的技術方案進行清楚、完 整地描述，顯然，所描述的實施例僅僅是本發明一部分實施例，而不是全部的實施例。基于 本發明中的實施例，本領域普通技術人員在沒有作出創造性勞動前提下所獲得的所有其他 實施例，都屬于本發明保護的范圍。
[0063] 如圖1示出的本發明實施例提供的頁面調試預覽方法的流程示意圖，包括如下步 驟：
[0064] 步驟SlOO:獲取需要在目標交互平臺進行顯示的頁面信息；
[0065] 具體地，本發明實施例中的目標交互平臺即可需要進行頁面調試預覽的交互平 臺，用戶將需要在目標交互平臺進行顯示（即頁面調試預覽）的頁面信息輸入給頁面調試預 覽系統后，該頁面調試預覽系統即獲取到該頁面信息。該頁面調試預覽系統可W使用HTML 和CSS制作好在線頁面，該在線頁面可W提供用戶輸入需要進行頁面調試預覽的URL的輸入 框，如圖2示出的本發明實施例提供的在線調試預覽頁面的界面示意圖，那么用戶通過瀏覽 器登錄該在線頁面，并在該輸入框輸入需要進行頁面調試預覽的抓L后，該頁面調試預覽系 統即捕獲到輸入的URL，該并通過該U化抓取待調試預覽的頁面信息。
[0066] 步驟S102:通過預設的沙箱環境模擬調用該目標交互平臺的頁面顯示接口，根據 預設的該目標交互平臺的頁面顯示區域參數，結合該N個目標調試設備的顯示屏區域參數 分別擅染所述頁面信息；
[0067] 具體地，本發明實施例的頁面調試預覽系統可W使用IFRAME為設備環境，通過預 先研究多個交互平臺的頁面顯示區域參數(可W包括交互平臺的可展示內容寬高），并可W 預先設置好或默認設置好多個調試設備，形成調試設備列表，并設置好了每個調試設備的 顯示屏區域參數；當該頁面調試預覽系統獲取到需要進行頁面調試預覽的頁面信息后，即 使用IFRAME沙箱技術模擬調用目標交互平臺的頁面顯示接口，根據該目標交互平臺的頁面 顯示區域參數，W及N個目標調試設備的顯示屏區域參數來分別擅染出符合顯示需求的頁 面信息。其中，該N個目標調試設備為從調試設備列表中選定進行調試的N個設備，本發明各 個實施例中的N為大于等于2的自然數。
[0068] 再具體地，本發明實施例中目標調試設備的顯示屏區域參數包括該目標調試設備 的顯示屏的寬高參數，該頁面調試預覽系統根據預設的所述目標交互平臺的可展示內容寬 高，W及該目標調試設備的顯示屏的寬高參數，配生成該目標交互平臺在該目標調試設備 的操作系統中運行時的顯示頁面上部結構信息和/或下部結構信息；然后根據該顯示頁面 上部結構信息和/或下部結構信息，擅染生成該目標調試設備的預覽頁面。如圖2所示，W目 申不調試設備為iPhoneS為例，iF*hone5的顯不屏的寬局參數是320x568，在微f目、手Q等目柄；義 互平臺下，針對iPhones的IOS操作系統的顯示頁面上部結構信息（例如微信的頭部導航欄） 需要64px高，因此計算出的iPhoneS的可用預覽面積應該是320x504;可選地，還可W為目標 調試設備加上目標交互平臺特有的一些導航欄信息，例如手Q的特有底部導航欄，用戶可W 通過點擊圖2在線頁面中的"展示手Q底部"按鈕來選擇開啟或關閉手Q特有底部導航欄的呈 現。
[0069] 步驟S104:在當前顯示頁面顯示擅染后的所述N個目標設備的預覽頁面。
[0070] 具體地，該頁面調試預覽系統可W使用一個div包裹的IFRAME擅染出預覽頁面結 果，如圖3示出的本發明實施例提供的div包裹的完整設備結構的信息，里面包括了頭部、尾 部、設備名字、設備內容模擬窗口等。
[0071] 實施本發明實施例，通過預設的沙箱環境模擬調用目標交互平臺的頁面顯示接 口，根據預設的該目標交互平臺的頁面顯示區域參數，結合該N個目標調試設備的顯示屏區 域參數分別擅染所述頁面信息;在當前顯示頁面顯示擅染后的該N個目標設備的預覽頁面， 可W實現在前端開發移動頁面的時候，只需要一個平臺就能夠看到不同設備的預覽效果， 從而節省了不斷找設備的煩惱。
[0072] 進一步地，本發明實施例的頁面調試預覽方法可W對調試設備列表進行更新，也 就是說可W方便用戶定制調試設備，包括對調試設備的增加、修改和刪除，具體地，本發明 實施例的頁面調試預覽方法還可W包括：
[0073] 對目標調試設備及其顯示屬性信息進行更新操作，并通過HTML5的本地存儲技術 LOCAL STORAGE將更新后的目標設備及其顯示屬性信息保存在本地；
[0074] 具體地，本發明實施例中的顯示屬性信息包括該顯示屏區域參數;該更新操作包 括W下至少一項:增加目標調試設備及其顯示屬性信息、修改目標調試設備的顯示屬性信 息、刪除目標調試設備及其顯示屬性信息;所述顯示屬性信息包括所述顯示屏區域參數。
[0075] 再具體地，本發明實施例可W把調試設備都當成json格式保存，維護一個調試設 備列表或隊列其實就是維護一個大的json數組，結構如下：
[0076]
[0077] 其中，每一個結點的name表示設備名，width/hei曲t代表可用寬高，type為設備的 類型（蘋果/安卓），is_show字段表示是否顯示出來，通過運個字段可W實現設備隱藏和打 開功能。將所有設備變成json對象后，維護調試設備的增刪改就是維護運一個對象數組了。 本發明實施例還可W在設備增加和修改的時候也加入了輸入檢驗，包括：1、設備名稱不能 為空，也不能重復;2、設備類型只能是iPhone和Amlroid; W及，3、設備寬高只能是合理的數 字。
[0078] 需要說明的是，在通過HTML5的LOCAL STORAGE本地存儲技術來實現保存時，用戶 在第一次使用時，可W提供默認的9個調試設備(例如4個打開5個隱藏），然后初始化保存到 本地，Iocalstorage.setltem(name，ary);用戶獲取調試設備列表時，可W使用 Iocalstorage . getltem(name)獲取調試設備列表；用戶增加、刪除、修改設備，可W同時覆 蓋原來的保存項;并可W提供"重置"按鈕，讓本地保存設備列標回歸到剛開始的9個調試設 備。通過HTML5的本地存儲技術LOCAL STORAGE將更新后的目標設備及其顯示屬性信息保存 在本地，不但可W跨平臺，保證每一個現代瀏覽器、操作系統都能夠正常保存。
[0079] 再進一步地，本發明實施例的步驟S104之后，還可W包括:通過統一資源定位符的 哈希HASH技術，生成針對該當前顯示頁面的頁面地址分享信息。
[0080] 具體地，如圖4示出的本發明實施例提供的頁面分享的界面示意圖，用戶在初次進 入在線網頁時，等待用戶輸入的URL地址是空的，例如在線網頁的地址是http:// ton}ftony. club/tool/hSviewer/;當用戶輸入URL地址后，網址URL后會帶上fturl = xxx，xxx 的值就是網站地址。例如：
[0081 ] http://tonytony. club/tool/h5viewer/#url=http://act.qzone.qq. com/ 2015/haloween-m/in dex.html;運樣，只要分享運個頁面鏈接，其他用戶打開也會是跟原 來預覽的頁面顯示一樣的狀態，從而實現分享的目的。
[0082] 再進一步地，本發明實施例的步驟S104之后，還可W包括:通過調用預設全屏開閉 接口對所述當前顯示頁面進行全屏顯示的開閉操作。
[0083] 具體地，本發明實施例的全屏技術可W使用了HTML5的即化SCREEN接口，通過調用 W下方法實現開啟和關閉全屏：
[0084] do 州 ment .requestFullscreen()打開全屏；
[00 化]do 州 ment. exitF^illscreenl；)關閉全屏；
[0086] 再進一步地，本發明實施例中需要在目標交互平臺進行顯示的頁面信息可W包括 基于file協議的本地調試頁面。本發明實施例可W通過預先在瀏覽器內嵌入目標腳本代 碼，也就是說預先開發了一個插件，通過該插件即可W解決現有技術中由于本地調試頁面 是基于file協議，對于服務器來說屬于跨域，不能夠請求的問題。那么，本發明實施例的步 驟S102中通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接口時，可W具體包 括:通過預先嵌入的目標腳本代碼，將所述基于file協議的本地調試頁面復制N份，并新建N 個沙箱環境;分別將所述N份本地調試頁面對應一一放進所述N個沙箱環境中來模擬調用所 述目標交互平臺的頁面顯示接口。
[0087] 具體地，例如可W如圖2所示的"收藏夾調試工具"，用戶在打開在線網頁時，可W 通過預先將"收藏夾調試工具"拖入收藏欄，來實現在瀏覽器內嵌入該目標腳本代碼，從而 在該在線網頁獲取到了 "收藏夾調試工具"插件，然后，打開一個本地調試頁面（例如 fiIe://D: Axxx)，接著點擊收藏欄中的"收藏夾調試工具"插件，那么瀏覽器通過運行該目 標腳本代碼，將該基于file協議的本地調試頁面復制N份，并新建N個沙箱環境;分別將該N 份本地調試頁面對應一一放進所述N個沙箱環境中來模擬調用該目標交互平臺的頁面顯示 接口，從而使得該瀏覽器能自動擅染N個目標調試設備，完成預覽效果的顯示。
[0088] 再進一步地，本發明實施例中N個目標設備的預覽頁面同時顯示在當前顯示頁面 中，本發明實施例的步驟S104中在當前顯示頁面顯示擅染后的所述N個目標設備的預覽頁 面的步驟，可W包括:在當前顯示頁面的預設區域顯示該本地調試頁面的原始代碼;將針對 所述原始代碼的修改自動聯動到所述本地調試頁面的文件中，并在當前顯示頁面中實時顯 示該N個目標設備的預覽頁面修改后的顯示效果。
[0089] 具體地，W^rome瀏覽器為例，可W通過化rome瀏覽器的Sources-map功能來匹配 本地的文件，實現在瀏覽器端修改代碼，自動保存在本地文件，并能實時看到多終端上修改 的效果。具體如圖5示出的本發明實施例提供的化rome瀏覽器的界面示意圖，首先用戶可W 打開化rome瀏覽器開發者工具(快捷鍵F12 )，然后選擇"Sources"標簽，找到目標文件，例如 index.html;右鍵選擇"Map to file system resource…"然后點擊選擇本地的文件，例如 test.html;那么就可W呈現如圖6所示的本發明實施例提供的化rome瀏覽器的聯動修改的 界面示意圖，用戶可W在右側代碼窗口修改代碼，在左側目標調試設備界面動態顯示修改 效果，而且通過按壓乂 ?l+s"還可W自動聯動保存到本地文件，無需刷新無需復制，十分方 便。
[0090] 實施本發明實施例，通過預設的沙箱環境模擬調用目標交互平臺的頁面顯示接 口，根據預設的該目標交互平臺的頁面顯示區域參數，結合該N個目標調試設備的顯示屏區 域參數分別擅染所述頁面信息;在當前顯示頁面顯示擅染后的該N個目標設備的預覽頁面， 可W實現在前端開發移動頁面的時候，只需要一個平臺就能夠看到不同設備的預覽效果， 從而節省了不斷找設備的煩惱;并且，可W方便地自定義設備，當需要更多特殊的電子設備 的時候可W手動添加，維護屬于自己的測試設備;而且，通過預先嵌入的目標腳本代碼實現 了本地化調試頁面，跟本地頁面聯動修改，實時體驗修改后的效果，開發效率大大提高。另 夕h通過統一資源定位符的哈希技術，可W把當前預覽的頁面通過復制網址直接進行分享， 更加利于各開發人員在頁面開發進程的討論和研究，進一步提高開發效率。
[0091] 為了便于更好地實施本發明實施例的上述方案，本發明還對應提供了一種頁面調 試預覽系統，如圖7示出的本發明實施例提供的頁面調試預覽系統的結構示意圖，頁面調試 預覽系統70可W包括:獲取模塊700、擅染模塊702和顯示模塊704，其中，
[0092] 獲取模塊700用于獲取需要在目標交互平臺進行顯示的頁面信息；
[0093] 擅染模塊702用于通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接 口，根據預設的所述目標交互平臺的頁面顯示區域參數，結合所述N個目標調試設備的顯示 屏區域參數分別擅染所述頁面信息;所述N為大于等于2的自然數；
[0094] 顯示模塊704用于在當前顯示頁面顯示擅染后的所述N個目標設備的預覽頁面。 [00%]具體地，如圖8示出的本發明實施例提供的擅染模塊的結構示意圖，擅染模塊702 可W包括:匹配生成單元7020和擅染生成單元7022,其中，
[0096] 匹配生成單元7020用于根據預設的所述目標交互平臺的頁面顯示區域參數，W及 所述目標調試設備的顯示屏的寬高參數，匹配生成所述目標交互平臺在所述目標調試設備 的操作系統中運行時的顯示頁面上部結構信息和/或下部結構信息；
[0097] 擅染生成單元7022用于根據所述顯示頁面上部結構信息和/或下部結構信息，擅 染生成所述目標調試設備的預覽頁面。
[0098] 進一步地，如圖9示出的本發明提供的頁面調試預覽系統的另一實施例的結構示 意圖，頁面調試預覽系統70包括獲取模塊700、擅染模塊702和顯示模塊704外，還可W包括： 更新模塊706、信息保存模塊708、分享信息生成模塊7010和全屏控制模塊7012,其中，
[0099] 更新模塊706用于對所述目標調試設備及其顯示屬性信息進行更新操作；
[0100] 信息保存模塊708用于通過HTML5的本地存儲技術LOCAL STORAGE將更新后的目標 設備及其顯示屬性信息保存在本地；
[0101] 所述顯示屬性信息包括所述顯示屏區域參數;所述更新操作包括W下至少一項： 增加目標調試設備及其顯示屬性信息、修改目標調試設備的顯示屬性信息、刪除目標調試 設備及其顯示屬性信息。
[0102] 分享信息生成模塊7010用于在顯示模塊704在當前顯示頁面顯示擅染后的所述N 個目標設備的預覽頁面之后，通過統一資源定位符的哈希技術，生成針對所述當前顯示頁 面的頁面地址分享信息。
[0103] 全屏控制模塊7012用于在顯示模塊704在當前顯示頁面顯示擅染后的所述N個目 標設備的預覽頁面之后，通過調用預設全屏開閉接口對所述當前顯示頁面進行全屏顯示的 開閉操作。
[0104] 再進一步地，本發明實施例的需要在目標交互平臺進行顯示的頁面信息包括基于 file協議的本地調試頁面;擅染模塊702還可W包括復制新建單元和模擬調試單元，其中，
[0105] 復制新建單元，用于通過預先嵌入的目標腳本代碼，將所述基于file協議的本地 調試頁面復制N份，并新建N個沙箱環境；
[0106] 模擬調試單元，用于分別將所述N份本地調試頁面對應一一放進所述N個沙箱環境 中來模擬調用所述目標交互平臺的頁面顯示接口。
[0107] 再進一步地，本發明實施例的N個目標設備的預覽頁面同時顯示在所述當前顯示 頁面中；如圖10示出的本發明實施例提供的顯示模塊的結構示意圖，顯示模塊704可W包 括:代碼顯示單元7040和聯動顯示單元7042，其中，
[0108] 代碼顯示單元7040用于在所述當前顯示頁面的預設區域顯示所述本地調試頁面 的原始代碼；
[0109] 聯動顯示單元7042用于將針對所述原始代碼的修改自動聯動到所述本地調試頁 面的文件中，并在所述當前顯示頁面中實時顯示所述N個目標設備的預覽頁面修改后的顯 示效果。
[0110] 請參閱圖11，圖11是本發明提供的頁面調試預覽系統的另一實施例的結構示意 圖。其中，如圖11所示，頁面調試預覽系統110可W包括:至少一個處理器1101，例如CPU,至 少一個網絡接口 1104,用戶接口 1103,存儲器1105,至少一個通信總線1102 W及顯示屏 1106。其中，通信總線1102用于實現運些組件之間的連接通信。其中，用戶接口 1103可W包 括顯示屏、鍵盤或鼠標等等。網絡接口 1104可選的可W包括標準的有線接口、無線接口（如 WI-FI接口）。存儲器1105可W是高速RAM存儲器，也可W是非不穩定的存儲器（non? volatile memo 巧）， 例如至少一個磁盤存儲器， 存儲器1105 包括本發明實施例中的flash。 存儲器1105可選的還可W是至少一個位于遠離前述處理器1101的存儲系統。如圖11所示， 作為一種計算機存儲介質的存儲器1105中可W包括操作系統、網絡通信模塊、用戶接口模 塊W及頁面調試預覽程序。
[0111] 在圖11所示的頁面調試預覽系統110中，處理器1101可W用于調用存儲器1105中 存儲的頁面調試預覽程序，并執行W下操作：
[0112] 通過用戶接口 1103獲取需要在目標交互平臺進行顯示的頁面信息；
[0113] 通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接口，根據預設的所 述目標交互平臺的頁面顯示區域參數，結合所述N個目標調試設備的顯示屏區域參數分別 擅染所述頁面信息;所述N為大于等于2的自然數；
[0114] 通過顯示屏1106在當前顯示頁面顯示擅染后的所述N個目標設備的預覽頁面。
[0115] 具體地，處理器1101根據預設的所述目標交互平臺的頁面顯示區域參數，結合所 述N個目標調試設備的顯示屏區域參數分別擅染所述頁面信息，可W包括：
[0116] 根據預設的所述目標交互平臺的頁面顯示區域參數，W及所述目標調試設備的顯 示屏的寬高參數，匹配生成所述目標交互平臺在所述目標調試設備的操作系統中運行時的 顯示頁面上部結構信息和/或下部結構信息；
[0117] 根據所述顯示頁面上部結構信息和/或下部結構信息，擅染生成所述目標調試設 備的預覽頁面。
[0118] 具體地，處理器1101還可W執行：
[0119] 對所述目標調試設備及其顯示屬性信息進行更新操作，并通過HTML5的本地存儲 技術LOCAL STORAGE將更新后的目標設備及其顯示屬性信息保存在本地；
[0120] 所述顯示屬性信息包括所述顯示屏區域參數;所述更新操作包括W下至少一項： 增加目標調試設備及其顯示屬性信息、修改目標調試設備的顯示屬性信息、刪除目標調試 設備及其顯示屬性信息。
[0121] 具體地，處理器1101在當前顯示頁面顯示擅染后的所述N個目標設備的預覽頁面 之后，還可W執行：
[0122] 通過統一資源定位符的哈希技術，生成針對所述當前顯示頁面的頁面地址分享信 息。
[0123] 具體地，處理器1101在當前顯示頁面顯示擅染后的所述N個目標設備的預覽頁面 之后，還可W執行：
[0124] 通過調用預設全屏開閉接口對所述當前顯示頁面進行全屏顯示的開閉操作。
[0125] 具體地，需要在目標交互平臺進行顯示的頁面信息包括基于file協議的本地調試 頁面;處理器1101通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接口，可W 具體包括：
[0126] 通過預先嵌入的目標腳本代碼，將所述基于file協議的本地調試頁面復制N份，并 新建N個沙箱環境；
[0127] 分別將所述N份本地調試頁面對應一一放進所述N個沙箱環境中來模擬調用所述 目標交互平臺的頁面顯示接口。
[01%]具體地，N個目標設備的預覽頁面同時顯示在所述當前顯示頁面中；處理器1101在 當前顯示頁面顯示擅染后的所述N個目標設備的預覽頁面，可W具體包括：
[0129] 通過顯示屏1106在所述當前顯示頁面的預設區域顯示所述本地調試頁面的原始 代碼；
[0130] 將針對所述原始代碼的修改自動聯動到所述本地調試頁面的文件中，并在所述當 前顯示頁面中實時顯示所述N個目標設備的預覽頁面修改后的顯示效果。
[0131] 需要說明的是，本發明實施例中的頁面調試預覽系統70或頁面調試預覽系統110 可W為個人計算機或移動智能終端、平板電腦等電子設備;可理解的是，頁面調試預覽系統 70或頁面調試預覽系統110中各模塊的功能可對應參考上述各方法實施例中圖1至圖6任意 實施例的具體實現方式，運里不再寶述。
[0132] 綜上所述，實施本發明實施例，通過預設的沙箱環境模擬調用目標交互平臺的頁 面顯示接口，根據預設的該目標交互平臺的頁面顯示區域參數，結合該N個目標調試設備的 顯示屏區域參數分別擅染所述頁面信息；在當前顯示頁面顯示擅染后的該N個目標設備的 預覽頁面，可W實現在前端開發移動頁面的時候，只需要一個平臺就能夠看到不同設備的 預覽效果，從而節省了不斷找設備的煩惱;并且，可W方便地自定義設備，當需要更多特殊 的電子設備的時候可W手動添加，維護屬于自己的測試設備;而且，通過預先嵌入的目標腳 本代碼實現了本地化調試頁面，跟本地頁面聯動修改，實時體驗修改后的效果，開發效率大 大提高。另外，通過統一資源定位符的哈希技術，可W把當前預覽的頁面通過復制網址直接 進行分享，更加利于各開發人員在頁面開發進程的討論和研究，進一步提高開發效率。
[0133] 本領域普通技術人員可W理解實現上述實施例方法中的全部或部分流程，是可W 通過計算機程序來指令相關的硬件來完成，所述的程序可存儲于一計算機可讀取存儲介質 中，該程序在執行時，可包括如上述各方法的實施例的流程。其中，所述的存儲介質可為磁 碟、光盤、只讀存儲記憶體（Read-Only Memoir ,ROM)或隨機存儲記憶體（Random Access Memory ,RAM)等。
[0134] W上所掲露的僅為本發明較佳實施例而已，當然不能W此來限定本發明之權利范 圍，因此依本發明權利要求所作的等同變化，仍屬本發明所涵蓋的范圍。
【主權項】
1. 一種頁面調試預覽方法，其特征在于，包括： 獲取需要在目標交互平臺進行顯示的頁面信息； 通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接口，根據預設的所述目 標交互平臺的頁面顯示區域參數，結合所述N個目標調試設備的顯示屏區域參數分別渲染 所述頁面信息;所述N為大于等于2的自然數； 在當前顯示頁面顯示渲染后的所述N個目標設備的預覽頁面。2. 如權利要求1所述的方法，其特征在于，所述根據預設的所述目標交互平臺的頁面顯 示區域參數，結合所述N個目標調試設備的顯示屏區域參數分別渲染所述頁面信息，包括： 根據預設的所述目標交互平臺的頁面顯示區域參數，以及所述目標調試設備的顯示屏 的寬高參數，匹配生成所述目標交互平臺在所述目標調試設備的操作系統中運行時的顯示 頁面上部結構信息和/或下部結構信息； 根據所述顯示頁面上部結構信息和/或下部結構信息，渲染生成所述目標調試設備的 預覽頁面。3. 如權利要求1所述的方法，其特征在于，還包括： 對所述目標調試設備及其顯示屬性信息進行更新操作，并通過HTML5的本地存儲技術 LOCAL STORAGE將更新后的目標設備及其顯示屬性信息保存在本地； 所述顯示屬性信息包括所述顯示屏區域參數;所述更新操作包括以下至少一項：增加 目標調試設備及其顯示屬性信息、修改目標調試設備的顯示屬性信息、刪除目標調試設備 及其顯示屬性信息。4. 如權利要求1所述的方法，其特征在于，所述在當前顯示頁面顯示渲染后的所述N個 目標設備的預覽頁面之后，還包括： 通過統一資源定位符的哈希技術，生成針對所述當前顯示頁面的頁面地址分享信息。5. 如權利要求1所述的方法，其特征在于，所述在當前顯示頁面顯示渲染后的所述N個 目標設備的預覽頁面之后，還包括： 通過調用預設全屏開閉接口對所述當前顯示頁面進行全屏顯示的開閉操作。6. 如權利要求1-5任一項所述的方法，其特征在于，所述需要在目標交互平臺進行顯示 的頁面信息包括基于file協議的本地調試頁面； 所述通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接口，包括： 通過預先嵌入的目標腳本代碼，將所述基于file協議的本地調試頁面復制N份，并新建 N個沙箱環境； 分別將所述N份本地調試頁面對應一一放進所述N個沙箱環境中來模擬調用所述目標 交互平臺的頁面顯示接口。7. 如權利要求6所述的方法，其特征在于，所述N個目標設備的預覽頁面同時顯示在所 述當前顯示頁面中；所述在當前顯示頁面顯示渲染后的所述N個目標設備的預覽頁面，包 括： 在所述當前顯示頁面的預設區域顯示所述本地調試頁面的原始代碼； 將針對所述原始代碼的修改自動聯動到所述本地調試頁面的文件中，并在所述當前顯 示頁面中實時顯示所述N個目標設備的預覽頁面修改后的顯示效果。8. -種頁面調試預覽系統，其特征在于，包括： 獲取模塊，用于獲取需要在目標交互平臺進行顯示的頁面信息； 渲染模塊，用于通過預設的沙箱環境模擬調用所述目標交互平臺的頁面顯示接口，根 據預設的所述目標交互平臺的頁面顯示區域參數，結合所述N個目標調試設備的顯示屏區 域參數分別渲染所述頁面信息;所述N為大于等于2的自然數； 顯示模塊，用于在當前顯示頁面顯示渲染后的所述N個目標設備的預覽頁面。9. 如權利要求8所述的系統，其特征在于，所述渲染模塊包括： 匹配生成單元，用于根據預設的所述目標交互平臺的頁面顯示區域參數，以及所述目 標調試設備的顯示屏的寬高參數，匹配生成所述目標交互平臺在所述目標調試設備的操作 系統中運行時的顯示頁面上部結構信息和/或下部結構信息； 渲染生成單元，用于根據所述顯示頁面上部結構信息和/或下部結構信息，渲染生成所 述目標調試設備的預覽頁面。10. 如權利要求8所述的系統，其特征在于，還包括： 更新模塊，用于對所述目標調試設備及其顯示屬性信息進行更新操作； 信息保存模塊，用于通過HTML5的本地存儲技術LOCAL STORAGE將更新后的目標設備及 其顯示屬性信息保存在本地； 所述顯示屬性信息包括所述顯示屏區域參數;所述更新操作包括以下至少一項：增加 目標調試設備及其顯示屬性信息、修改目標調試設備的顯示屬性信息、刪除目標調試設備 及其顯示屬性信息。11. 如權利要求8所述的系統，其特征在于，還包括： 分享信息生成模塊，用于在所述顯示模塊在當前顯示頁面顯示渲染后的所述N個目標 設備的預覽頁面之后，通過統一資源定位符的哈希技術，生成針對所述當前顯示頁面的頁 面地址分享信息。12. 如權利要求8所述的系統，其特征在于，還包括： 全屏控制模塊，用于在所述顯示模塊在當前顯示頁面顯示渲染后的所述N個目標設備 的預覽頁面之后，通過調用預設全屏開閉接口對所述當前顯示頁面進行全屏顯示的開閉操 作。13. 如權利要求8-12任一項所述的系統，其特征在于，所述需要在目標交互平臺進行顯 示的頁面信息包括基于file協議的本地調試頁面； 所述渲染模塊包括： 復制新建單元，用于通過預先嵌入的目標腳本代碼，將所述基于file協議的本地調試 頁面復制N份，并新建N個沙箱環境； 模擬調試單元，用于分別將所述N份本地調試頁面對應一一放進所述N個沙箱環境中來 模擬調用所述目標交互平臺的頁面顯示接口。14. 如權利要求13所述的系統，其特征在于，所述N個目標設備的預覽頁面同時顯示在 所述當前顯示頁面中；所述顯示模塊包括： 代碼顯示單元，用于在所述當前顯示頁面的預設區域顯示所述本地調試頁面的原始代 碼； 聯動顯示單元，用于將針對所述原始代碼的修改自動聯動到所述本地調試頁面的文件 中，并在所述當前顯示頁面中實時顯示所述N個目標設備的預覽頁面修改后的顯示效果。
【文檔編號】G06F11/36GK105955888SQ201610288880
【公開日】2016年9月21日
【申請日】2016年5月4日
【發明人】譚照強
【申請人】騰訊科技（深圳）有限公司