Ⅰ 移動端手機調試的幾種方法
很多時候,我們在進行移動端開發時,都是先在PC端使用手機模擬器進行調試,沒有問題後,我們才會在手機端的瀏覽器進行測試,這個時候,如果沒有出現問題,皆大歡喜。但是一旦出現問題,我們就很難解決,因為缺乏可視化的界面。不似在PC端,我們能直觀的去改變樣式,或者是進行斷點調試。
這里主要介紹三種方法:
1、Chrome DevTools(谷歌瀏覽器)的模擬手機調試
2、IOS Safari真機調試
3、Chrome DevTools遠程調試Android
這種調試方式不僅能用於模擬手機調試還是主要的PC端頁面調試的方式,這里主要說用於手機調試。
a.谷歌瀏覽器的開發者工具,可以參照下圖右鍵選擇」檢查「或者使用快捷鍵F12,打開開發者工具。
b.打開後看到類似如下界面的開發者調試界面,Elements可以查看文檔元素,Console可以在線調試js和查看輸出結果,Sources可以調試JS和查看依賴資源,Network查看所有的網路請求等等。
c.如果沒有需要模擬的機型怎麼辦?可以增加,點開機型設置面板,選擇edit,然後可以在右方修改展示機型,如下:
d.還可以模擬不同網路情況。
a.使用數據線將 iPhone 與 Mac 相連
b.iPhone 開啟 Web 檢查器(設置 -> Safari -> 高級 -> 開啟 Web 檢查器)
c.iPhone 使用 Safari 瀏覽器打開要調試的頁面(以蘭亭單品頁為例)
d.Mac 打開 Safari 瀏覽器調試(菜單欄 —> 開發 -> iPhone 設備名 -> 選擇調試頁面)
如果你的菜單欄沒有「開發」選項,可以到左上角 Safari -> 偏好設置 -> 高級 -> 在菜單欄中顯示「開發」菜單。
e.在彈出的 Safari Developer Tools 中調試。
經過如上步驟就可在 Mac 端調試 iPhone 上 Safari 運行的頁面了。
a.在 Chrome 瀏覽器地址欄中輸入 chrome://inspect/#devices 並回車,就可以打開 Inspect 調試界面,此時我們勾選Discover USB devices 選項便可以看到設備列表。
b.然後打開手機中開發者選項並打開 USB 調試開關(具體方法自行網路,不同手機有一定區別),使用數據線將手機連接到電腦上,我們就可以在設備列表中看到自己的設備。
c.這時,打開手機上的Chrome 瀏覽器,隨便打開一個網址(以蘭亭單品頁為例),設備列表中你的設備下便會出現你打開的頁面。
d.此時我們點擊 inspect 選項。
e.接下來你便可以和調試 PC 界面一樣通過 Chrome 進行你所需要的調試,你在左側屏幕上做的一切操作和你的手機上的操作會始終保持同步,如果你嫌左邊這塊多餘,也可以關閉 Toggle Screencast 只保留控制台本身。
Ⅱ 移動電視機頂盒鏈接電視後怎麼調試
1、把網路機頂盒和電視都開機;
2、將網線連接網路機頂盒後的網口中,待自動獲得IP,即成功連接網路;
3、再用音頻線和視頻線【音頻線(紅和白),視頻線(黃)】相對應顏色連接機頂盒與電視,並接好機頂盒電源適配器;
如果機頂盒和電視都是高清的,還可以用高清晰度多媒體介面線(HDMI線)連接電視機與高清機頂盒的HDMI介面。
4、安裝完畢以後,把電視機的信號源切換至與機頂盒輸入一致的視頻信號源;
5、這樣子就能正常觀看網路電影和電視了。