如何在移動(dòng)設(shè)備上調(diào)試html5開(kāi)發(fā)的網(wǎng)頁(yè)

可以使用Chrome瀏覽器，Chrome瀏覽器帶有移動(dòng)模式

成都創(chuàng)新互聯(lián)公司是工信部頒發(fā)資質(zhì)IDC服務(wù)器商，為用戶(hù)提供優(yōu)質(zhì)的綿陽(yáng)主機(jī)托管服務(wù)

Chrome打開(kāi)Html5網(wǎng)頁(yè)，點(diǎn)擊F12打開(kāi)開(kāi)發(fā)者工具，然后點(diǎn)擊下圖中的手機(jī)圖標(biāo)，重新刷新頁(yè)面，就可以模擬在移動(dòng)設(shè)備上的樣式，可以由不同的移動(dòng)設(shè)備供選擇

如何實(shí)用便捷的在本地真機(jī)調(diào)試WEB端HTML5網(wǎng)頁(yè)

1、如果你能FQ

chrome在32版本后就自帶了移動(dòng)端調(diào)度工具，可以在Android直接聯(lián)調(diào)，但唯一遺憾的是，在我大天朝要FQ后才能行的通，我自己試了后公司好幾個(gè)機(jī)器聯(lián)不上…

2、如果你有蘋(píng)果電腦和iphone

蘋(píng)果電腦上的safari 6.0版本后就可以直接連接iphone手機(jī)調(diào)試手機(jī)版上safari正在瀏覽的web頁(yè)面，前提是你得有個(gè)蘋(píng)果電腦和iphone手機(jī)，但如果你是Android的話(huà)，就沒(méi)辦法了

符合前端B格的“小蘋(píng)果”

自己在公司里也是開(kāi)發(fā)Mobile端的HTML5頁(yè)面的，也深受調(diào)試頁(yè)面之苦，移動(dòng)端的WEB頁(yè)面坑又多，所以用node-webkit技術(shù)做了一個(gè)客戶(hù)端，專(zhuān)門(mén)用來(lái)調(diào)試，現(xiàn)在每天工作之前都先打開(kāi)“小蘋(píng)果”

小蘋(píng)果用的是node-webkit技術(shù)打包成客戶(hù)端，其實(shí)內(nèi)部實(shí)現(xiàn)都是web 頁(yè)面與nodejs技術(shù)，所以特別符合前端B格。而且由于用了node-webkit技術(shù)，客戶(hù)端可以跑在windows和mac電腦上，齊活兒了

小蘋(píng)果官方網(wǎng)站

里邊有下載及安裝和使用的方法

html5開(kāi)發(fā)的頁(yè)面怎么在iphone上調(diào)適

用iphone調(diào)試html5頁(yè)面的方法如下：

1、打開(kāi)手機(jī)web檢查器。

通過(guò)【設(shè)置】【Safari】【高級(jí)】【W(wǎng)eb檢查器】打開(kāi)。見(jiàn)下圖（點(diǎn)擊查看大圖），并且你會(huì)看到該選項(xiàng)下面對(duì)電腦操作的相應(yīng)描述，照做就好。

2. 連接電腦（Mac）

1）先在手機(jī)Safari中打開(kāi)你想調(diào)試的網(wǎng)頁(yè)，并用數(shù)據(jù)線(xiàn)連接到電腦

2）再在電腦上打開(kāi)Safari點(diǎn)擊【Develop】菜單，就會(huì)看到如下圖所示（點(diǎn)擊查看大圖）：

3）點(diǎn)擊2中的網(wǎng)站名就會(huì)在電腦上打開(kāi)Safari的控制臺(tái)，如下圖（點(diǎn)擊查看大圖）：

此時(shí)可以查看手機(jī)網(wǎng)頁(yè)的DOM結(jié)構(gòu)，并且和電腦端網(wǎng)頁(yè)調(diào)試無(wú)異，當(dāng)鼠標(biāo)滑過(guò)這些DOM節(jié)點(diǎn)的時(shí)候手機(jī)上的相應(yīng)布局也會(huì)高亮起來(lái)，如下圖（點(diǎn)擊查看大圖）：

如何在夜神模擬器上調(diào)試html5開(kāi)發(fā)的網(wǎng)頁(yè)

下載并安裝夜神模擬器，先啟動(dòng)夜神模擬器

然后運(yùn)行cmd命令，cd到夜神安裝目錄，執(zhí)行命令

nox_adb.exe connect 127.0.0.1:62001

連接到模擬器

通過(guò)第一步新建的工程，按照下圖，進(jìn)行配置，并debug啟動(dòng)

彈出了模擬器選擇框，OK后，我們就可以查看及單步調(diào)試了。

模擬器分別率如何設(shè)置，看下圖，各種分配率，隨便配置，平板及手機(jī)隨便切換

HTML5開(kāi)發(fā)時(shí)，為什么要進(jìn)行瀏覽器的調(diào)試

進(jìn)行瀏覽器調(diào)試的目的是讓網(wǎng)頁(yè)在各個(gè)瀏覽器當(dāng)中都能夠表現(xiàn)一致，除了能夠正常地呈現(xiàn)信息，供用戶(hù)使用之外，在樣式上、行為上都能夠與最初“設(shè)計(jì)構(gòu)思”的效果相符合。

在開(kāi)發(fā)當(dāng)中，開(kāi)發(fā)工程師會(huì)遇到如下兩個(gè)問(wèn)題，這兩種問(wèn)題也是要求開(kāi)發(fā)工程師及時(shí)調(diào)試的原因。

1、 瀏覽器對(duì)代碼的支持程度不同

有些瀏覽器支持某些命令，而有些不支持，這也就導(dǎo)致網(wǎng)頁(yè)在部分瀏覽器當(dāng)中表現(xiàn)正常，在部分瀏覽器當(dāng)中表現(xiàn)不正常。通過(guò)瀏覽器調(diào)試，可發(fā)現(xiàn)這些問(wèn)題并及時(shí)解決。

2、 開(kāi)發(fā)者自身問(wèn)題

開(kāi)發(fā)工程師在書(shū)寫(xiě)代碼時(shí)，難免會(huì)書(shū)寫(xiě)出“錯(cuò)誤”或“有問(wèn)題”的代碼。例如，子級(jí)元素的大小超出了父級(jí)元素的大小，此時(shí)，代碼在容錯(cuò)性比較高的瀏覽器（如谷歌Chrome瀏覽器）當(dāng)中并不會(huì)出現(xiàn)什么問(wèn)題，但是在容錯(cuò)性比較差點(diǎn)的瀏覽器（如IE6-IE8）當(dāng)中就有可能出現(xiàn)頁(yè)面布局崩潰的現(xiàn)象。

進(jìn)行代碼的調(diào)試，就是為了及時(shí)發(fā)現(xiàn)問(wèn)題，并且盡快解決問(wèn)題，為防止書(shū)寫(xiě)了很多代碼之后，突然發(fā)現(xiàn)在某些瀏覽器中是錯(cuò)亂的，而原因卻又無(wú)從查起，最后不得不重新書(shū)寫(xiě)或花費(fèi)大量時(shí)間在查找錯(cuò)誤上。

名稱(chēng)欄目：關(guān)于調(diào)試html5的信息
文章起源：http://chinadenli.net/article21/dsieocd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站制作、企業(yè)網(wǎng)站制作、外貿(mào)建站、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)