調試html5
一、iOS + Safari
1、打開手機web檢查器。
通過【設置】>【Safari】>【高級】>【Web檢查器】打開。見下圖(點擊查看大圖),並且你會看到該選項下面對電腦操作的相應描述,照做就好。
2.鏈接電腦(Mac)
2.1 先在手機Safari中打開你想調試的網頁,並用數據線連接到電腦(我這里是Mac)
2.2 再在電腦上打開Safari點擊【Develop】菜單,就會看到如下圖所示(點擊查看大圖):
3.3 點擊2.2中的網站名就會在電腦上打開Safari的控制台,如下圖(點擊查看大圖):
3.調試網頁
如上3.3圖所示,此時你可以查看手機網頁的DOM結構,並且和電腦端網頁調試無異,當滑鼠滑過這些DOM節點的時候手機上的相應布局也會高亮起來,如下圖(點擊查看大圖):
二、Android + Chrome
1.設置手機
1.1【設置】>【關於手機】>【版本號(Build number)】,對版本號這一項連點7下(這是官方文檔里的說法)就會提示「你已成為開發者」。
1.2 再返回【設置】>【開發者選項】>【USB調試】打開手機USB調試。
2.設置電腦(Mac)
這塊比較麻煩,因為要裝一下Android的SDK。
2.1 下載Android SDK,並解壓,我把整個adt目錄放在了 /Users/David/adt/ 這里。
2.2 設置環境變數 。打開終端在David路徑下(形如 DaviddeMacBook-Pro:~ David$)輸入 open .bash_profile,如果文件存在則會打開,如果不存在則再輸入touch .bash_profile 創建並打開這個文件。在文件里輸入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ,關閉保存。最後在終端里輸入 source .bash_profile 來更新環境變數使其生效。終端里輸入 adb 出現命令幫助信息就是成功了。
2.3 在終端里輸入 adb forward tcp:9222 localabstract:chrome_devtools_remote 。
3.鏈接電腦
3.1 在手機上的Chrome里打開想要調試的網頁,用數據線連接手機和電腦(我的是Mac。唉~我只是強調平台的不同,不要誤會)。
3.2 打開電腦上的Chrome,在地址欄里輸入 about:inspect 選中 【Discover USB Devices】前面的復選框。出現下圖畫面(點擊查看大圖):
4.調試網頁
4.1 你可以點擊圖3.2中檢測到的設備上正在運行的網站下面那個【inspect】,或者在瀏覽器中輸入 localhost:9222 打開手機正在瀏覽的網頁列表,如下圖:
4.2 點擊上圖中的網站縮略圖,就會跳轉到Google的一個代理鏈接(鏈接可能被牆……,掛代理)就會打開如下圖所示的控制台(點擊查看大圖):
4.3 這就和電腦上網頁調試沒什麼差別了,滑鼠經過DOM節點,手機上的布局同樣也會高亮起來:
好的,完結。
㈡ 在PC機上,如何用Chrome瀏覽器模擬查看和調試手機的HTML5
方法步驟見下:
第一步、用Chrome打開要調試的頁面;
第二步、按F12,打開「開發者工具」,點擊其右上角的「Dock to main window.」按鈕,讓「開發者工具」停靠在瀏覽器的「右邊」,再點擊左上角的「Toggle device mode.」按鈕。
第三步、選擇要模擬的設備。
第四步、刷新頁面,才可見到手機效果。
㈢ 如何在夜神模擬器上調試html5開發的網頁
跟在安卓手機上調試差不多,主要取決於軟體是使用的哪個,可以查下鏈接模擬器的軟體具體的鏈接辦法。
㈣ 如何進行html調試和js腳本調試
工具/原料
chrome瀏覽器 Mozilla firefox 電腦
方法/步驟
1、以chrome為例,首先打開需要調試的頁面,按F12快捷鍵打開調試工具。
㈤ dreamweaver怎樣對HTML5調試啊
html4是怎麼調試就怎麼調試。。。有個支持的瀏覽器就行了
㈥ 如何chorm調試html5程序
和調試HTML代碼一樣
F12 或是 右鍵'審查元素';
動畫效果,這個就要靠自己的基礎知識了。
㈦ 如何實用便捷的在本地真機調試WEB端HTML5網頁
介紹兩款常用但需要一定條件或限制的工具:
1、如果能FQ
chrome在32版本後就自帶了移動端調度工具,可以在Android直接聯調,但唯一遺憾的是,在中國大陸要FQ後才能行的通。
2、如果有蘋果電腦和iphone
蘋果電腦上的safari 6.0版本後就可以直接連接iphone手機調試手機版上safari正在瀏覽的web頁面,前提是得有個蘋果電腦和iphone手機,但如果是Android的話,就沒辦法了
㈧ 如何在移動設備上調試html5開發的網頁
用谷歌瀏覽器
你可以現在當前用什麼手機進行調試
㈨ 如何在移動設備上調試html5開發的網頁
下面就介紹一下在iOS和Android兩個平台上如何在真機上對頁面進行調試。這里要說明的是,iOS平台只能用自帶的Safari瀏覽器來調試,而Android平台也只能用google Chrome瀏覽器來調試。當然,我目前只發現這么兩種手段,如果你還有其他方法可調試更多的瀏覽器,希望你能留言告訴我。
一、iOS + Safari
1、打開手機web檢查器。
通過【設置】>【Safari】>【高級】>【Web檢查器】打開。
2.1 先在手機Safari中打開你想調試的網頁,並用數據線連接到電腦(我這里是Mac)
2.2 再在電腦上打開Safari點擊【Develop】菜單
3.3 點擊2.2中的網站名就會在電腦上打開Safari的控制台
3.調試網頁
如上3.3圖所示,此時你可以查看手機網頁的DOM結構,並且和電腦端網頁調試無異,當滑鼠滑過這些DOM節點的時候手機上的相應布局也會高亮起來
二、Android + Chrome
1.設置手機
1.1【設置】>【關於手機】>【版本號(Build number)】,對版本號這一項連點7下就會提示「你已成為開發者」。
1.2 再返回【設置】>【開發者選項】>【USB調試】打開手機USB調試。
2.設置電腦(Mac)
這塊比較麻煩,因為要裝一下Android的SDK。
2.1 下載Android SDK,並解壓,我把整個adt目錄放在了 /Users/David/adt/ 這里。
2.2 設置環境變數 。打開終端在David路徑下(形如 DaviddeMacBook-Pro:~ David$)輸入 open .bash_profile,如果文件存在則會打開,如果不存在則再輸入touch .bash_profile 創建並打開這個文件。在文件里輸入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ,關閉保存。最後在終端里輸入 source .bash_profile 來更新環境變數使其生效。終端里輸入 adb 出現命令幫助信息就是成功了。
2.3 在終端里輸入 adb forward tcp:9222 localabstract:chrome_devtools_remote 。
3.鏈接電腦
3.1 在手機上的Chrome里打開想要調試的網頁,用數據線連接手機和電腦(我的是Mac。唉~我只是強調平台的不同,不要誤會)。
3.2 打開電腦上的Chrome,在地址欄里輸入 about:inspect 選中 【Discover USB Devices】前面的復選框
4.調試網頁
4.1 你可以點擊圖3.2中檢測到的設備上正在運行的網站下面那個【inspect】,或者在瀏覽器中輸入 localhost:9222 打開手機正在瀏覽的網頁列表
4.2 點擊上圖中的網站縮略圖,就會跳轉到Google的一個代理鏈接(鏈接可能被牆……,掛代理)就會打開如下圖所示的控制台
4.3 這就和電腦上網頁調試沒什麼差別了,滑鼠經過DOM節點,手機上的布局同樣也會高亮起來
㈩ 前端有什麼快捷調試html5的兼容性的方法嗎
這個吧要先學習html5標准再做前端開發,建議你上Modern.IE的首頁看看標准,html5標准有下載的