[發(fā)明專利]用于調(diào)試頁面的系統(tǒng)、方法和裝置

有效

• 申請(qǐng)?zhí)枺?/td>: 201811458512.7
• 申請(qǐng)日: 2018-11-30
• 公開（公告）號(hào): CN109558323B
• 公開（公告）日: 2022-04-12
• 發(fā)明（設(shè)計(jì)）人: 張自萌;雷志興
• 申請(qǐng)（專利權(quán)）人: 百度在線網(wǎng)絡(luò)技術(shù)（北京）有限公司
• 主分類號(hào): G06F11/36
• 分類號(hào): G06F11/36
• 代理公司: 北京英賽嘉華知識(shí)產(chǎn)權(quán)代理有限責(zé)任公司 11204
• 代理人: 王達(dá)佐;馬曉亞

本申請(qǐng)實(shí)施例公開了用于調(diào)試頁面的系統(tǒng)、方法和裝置。該方法的一具體實(shí)施方式包括：通過計(jì)算機(jī)設(shè)備和與計(jì)算機(jī)設(shè)備無線網(wǎng)絡(luò)連接的移動(dòng)終端，實(shí)現(xiàn)在計(jì)算機(jī)設(shè)備中安裝的Chrome開發(fā)者工具的源代碼面板或者控制面板中調(diào)試移動(dòng)端Web頁面，而不需要移動(dòng)終端與計(jì)算機(jī)設(shè)備之間通過有線連接，繼而降低了開發(fā)調(diào)試成本，提高了調(diào)試效率。

技術(shù)領(lǐng)域

本申請(qǐng)實(shí)施例涉及計(jì)算機(jī)技術(shù)領(lǐng)域，具體涉及用于調(diào)試頁面的系統(tǒng)、方法和裝置。

背景技術(shù)

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)端Web頁面作為一個(gè)重要的展現(xiàn)形式廣泛的應(yīng)用在各種移動(dòng)終端上。這里的移動(dòng)端Web頁面包括在移動(dòng)端應(yīng)用中的Web頁面和移動(dòng)端瀏覽器中顯示的單純Web頁面。為了便捷的開發(fā)和調(diào)試移動(dòng)端web頁面，一種常用方法是在計(jì)算機(jī)設(shè)備上安裝Chrome開發(fā)者工具，將移動(dòng)終端通過USB(Universal Serial Bus,通用串行總線)數(shù)據(jù)線連接到計(jì)算機(jī)設(shè)備上，從而完成在Chrome開發(fā)者工具的各個(gè)面板(比如，源代碼面板、控制面板、元素面板、網(wǎng)絡(luò)面板、應(yīng)用面板等等)中對(duì)移動(dòng)端Web頁面進(jìn)行調(diào)試。然而，當(dāng)移動(dòng)終端與計(jì)算機(jī)設(shè)備不在同一場(chǎng)地，或者移動(dòng)終端不支持USB數(shù)據(jù)線時(shí)就不能再采用這種方法實(shí)時(shí)調(diào)試移動(dòng)端Web頁面了。另外，由于蘋果公司的限制，發(fā)布在App Store(應(yīng)用商店)里的應(yīng)用中不能開啟遠(yuǎn)程調(diào)試協(xié)議，這就導(dǎo)致不能在計(jì)算機(jī)設(shè)備上利用Chrome開發(fā)者工具實(shí)現(xiàn)對(duì)安裝有iOS操作系統(tǒng)(iOS是由蘋果公司開發(fā)的移動(dòng)操作系統(tǒng))的移動(dòng)終端Web頁面進(jìn)行調(diào)試。

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

本申請(qǐng)實(shí)施例提出了用于調(diào)試頁面的系統(tǒng)、方法和裝置。

第一方面，本申請(qǐng)實(shí)施例提供了一種用于調(diào)試頁面的系統(tǒng)，包括無線網(wǎng)絡(luò)連接的設(shè)置有顯示器的計(jì)算機(jī)設(shè)備和移動(dòng)終端，其中：計(jì)算機(jī)設(shè)備被配置成：響應(yīng)于檢測(cè)到針對(duì)待調(diào)試頁面在源代碼面板或者控制面板的第一調(diào)試請(qǐng)求，在與待調(diào)試頁面對(duì)應(yīng)的線程中加載并執(zhí)行待調(diào)試頁面對(duì)應(yīng)的代碼，得到執(zhí)行結(jié)果，以及將所得到的執(zhí)行結(jié)果發(fā)送給移動(dòng)終端；響應(yīng)于接收到移動(dòng)終端發(fā)送的頁面事件信息，在與待調(diào)試頁面對(duì)應(yīng)的線程中基于所收到的頁面事件信息執(zhí)行待調(diào)試頁面對(duì)應(yīng)的代碼，得到執(zhí)行結(jié)果，以及將所得到的執(zhí)行結(jié)果發(fā)送給移動(dòng)終端；移動(dòng)終端被配置成：響應(yīng)于接收到計(jì)算機(jī)設(shè)備發(fā)送的執(zhí)行結(jié)果，基于所收到的執(zhí)行結(jié)果渲染以及呈現(xiàn)待調(diào)試頁面；響應(yīng)于檢測(cè)到用戶針對(duì)待調(diào)試頁面的操作，生成與操作相關(guān)的頁面事件信息，以及將所生成的頁面事件信息發(fā)送給計(jì)算機(jī)設(shè)備。

在一些實(shí)施例中，計(jì)算機(jī)設(shè)備還被配置成：響應(yīng)于檢測(cè)到針對(duì)待調(diào)試頁面在網(wǎng)絡(luò)面板的第二調(diào)試請(qǐng)求，在網(wǎng)絡(luò)面板加載待調(diào)試頁面；

響應(yīng)于接收到移動(dòng)終端發(fā)送的網(wǎng)絡(luò)請(qǐng)求詳情信息，在網(wǎng)絡(luò)面板中顯示所收到的網(wǎng)絡(luò)請(qǐng)求詳情信息；以及移動(dòng)終端還被配置成：將與待調(diào)試頁面對(duì)應(yīng)的網(wǎng)絡(luò)請(qǐng)求詳情信息發(fā)送給計(jì)算機(jī)設(shè)備。

在一些實(shí)施例中，計(jì)算機(jī)設(shè)備還被配置成：響應(yīng)于檢測(cè)到針對(duì)待調(diào)試頁面在應(yīng)用面板的第三調(diào)試請(qǐng)求，在應(yīng)用面板中加載待調(diào)試頁面；

響應(yīng)于接收到移動(dòng)終端發(fā)送的存儲(chǔ)信息數(shù)據(jù)，在應(yīng)用面板中顯示所收到的存儲(chǔ)信息數(shù)據(jù)；以及移動(dòng)終端還被配置成：將與待調(diào)試頁面對(duì)應(yīng)的存儲(chǔ)信息數(shù)據(jù)發(fā)送給計(jì)算機(jī)設(shè)備。

在一些實(shí)施例中，計(jì)算機(jī)設(shè)備被配置成：響應(yīng)于檢測(cè)到針對(duì)待調(diào)試頁面在元素面板的第四調(diào)試請(qǐng)求，在元素面板打開待調(diào)試頁面，以及將待調(diào)試頁面的文檔對(duì)象模型DOM樹發(fā)送給移動(dòng)終端；響應(yīng)于接收到移動(dòng)終端發(fā)送的DOM樹，基于所收到的DOM樹重新渲染并呈現(xiàn)待調(diào)試頁面；移動(dòng)終端被配置成：響應(yīng)于接收到計(jì)算機(jī)設(shè)備發(fā)送的DOM樹，基于所收到的DOM樹渲染并呈現(xiàn)待調(diào)試頁面；響應(yīng)于檢測(cè)到針對(duì)待調(diào)試頁面的DOM樹更新操作，將更新后的DOM樹發(fā)送給計(jì)算機(jī)設(shè)備。

在一些實(shí)施例中，移動(dòng)終端和計(jì)算機(jī)設(shè)備通過套接字進(jìn)行數(shù)據(jù)通信。