怎麼在web下調試設備

『壹』 怎麼在移動端調試web前端

響應式測試：Chrome DevTools 面板右側拉伸快速查看效果；Firefox 響應式工具進一步調整；Chrome Emulation 精細測試。
Android 設備測試：使用 Android 虛擬機；優先使用 Weinre 測試，分析用戶瀏覽器使用份額，有針對的進行測試。高版本 Android 測試機，使用 Chrome 連接調試。Android 4.4+ 的 WebView 修改 APP 源代碼，也可以用 Chrome 調試。
低版本系統和其他品牌手機以及 WebView：統統可以用 Weinre 來解決。
iOS 設備測試：使用 Xcode 自帶 iOS 模擬器，使用 Safari 調試；WebView 也可以被電腦上 Safari 調試；測試機連接電腦，也可以用 Safari 調試；MIHTool 可以在 iOS 設備上使用，提供類似 Weinre 的調試功能。
測試多種設備：BrowserStack 和 Keynote。
使用 BrowserSync 可以創建本地區域網 IP 伺服器，並同步操作、監聽刷新，極大減少測試操作，提高測試效率。
當移動端設備無法訪問某項資源時，使用 Charles 做代理，通過電腦去訪問。

『貳』 如何在移動設備上調試html5開發的網頁

1、打開手機web檢查器。

通過【設置】>【Safari】>【高級】>【Web檢查器】打開。見下圖（點擊查看大圖），並且你會看到該選項下面對電腦操作的相應描述，照做就好。

『叄』 如何 iphone 真機調試web

參考下：1、授權設備：

進入Apple Developer會員中心，點擊圖中的iOS Provisioning
Portal，進入開發者授權設置系統：

在設置界面中，可以選擇點擊頁面下方的助手來運行向導：

點擊左側導航的Device，進入授權設備的頁面，點擊右上方的Add Device按鈕可以添加一個設備：

添加設備的時候可以指定設備的名字（隨便寫），以及設備的UDID。每一個Apple的設備都有一個唯一的標識符，獲得這個標識符的方法很簡單，有兩種方式：

（1）將你的設備連接到電腦，然後在iTunes里找到你的設備信息（如下圖），點擊圖中紅色方框的位置，設備UDID就會顯示出來。右擊UDID會提示拷貝，將拷貝的結果復制到框內即可；

（2）打開xcode，window→organizer→devices，在裡面可以看到identifier信息2、添加App ID：

點擊左側導航的App IDs按鈕可以進入應用程序ID的配置頁面，可以點擊頁面右方的New App
ID按鈕添加一個新的應用。這個ID對應的是即將開發和測試的應用程序。如下圖，在description里添加一個單一應用的名稱（不支持特殊字元），然後在最下面的Bundle
Seed ID裡面填入一個含有domain格式的字元串（如com.bo.test）。Bundle Seed
ID是一個集合了開發商與應用程序的信息，格式為(com.[開發商].[應用]），這里可以指定為單一應用，也可以指定為全部應用。如果是單一應用，建議剛才填寫的description與Bundle
Seed ID的最後一項相同（如test和com.bo.test），如果是全部應用，可以使用這樣的Bundle Seed ID：
com.bo.3、添加證書：

（1）首先在mac電腦上生成開發者證書：

在Applications->Utilities裏手動打開Keychain
Access。按照下圖操作最終點擊「從證書頒發機構請求證書」

正確填寫自己的郵箱和姓名即可，選擇「存儲到磁碟」，點擊繼續。最終會生成一個名為「CertificateSigningRequest.certSigningRequest」的文件。

這時候返回剛才的iOS Provisioning Portal網頁界面，點擊左側的「Certificate」，點擊頁面右方的Request
Certificate申請一個證書，然後點擊頁面下方的按鈕上傳生成的certSigningRequest文件，這樣就完成了證書的申請流程。申請成功後，Certificate頁面里就有了一條證書，刷新幾次頁面後證書的狀態就變成Issued，點擊download按鈕可以下載一個cer文件。4、使用開發者授權：

（1）回到iOS Provisioning Portal網頁界面，點擊左側的「provisioning」，點擊右側的New
Profile按鈕創建一個新的授權文件：

填寫profile
Name；在Certificates中選擇剛剛創建好的證書（一勞永逸的一步，之後只需勾選該證書即可，不必再手動添加）；APP
ID選擇剛剛建的那個；Devices
選擇剛剛添加的設備；Submit（綁定設備到應用程序）；刷新頁面，會看到剛剛建的那個後邊有個Download，點擊Download，下載了一個.mobileprovision文件。

（2）打開xcode→window→organizer，將下載的.mobileprovision文件拖到Provisioning中（此步驟綁定設備到應用程序，並生成證書）

（3）項目中的plist 文件，將Bundle Identifier 這一項的內容改成Bundle Seed
ID(格式:com.[開發商].[應用])即可

將run按鈕右邊的設備選為對應的真機設備，接下來就編譯運行看看吧！希望幫助你

『肆』 如何使用微信web開發者工具調試程序

微信web開發者工具使用教程：

1、首先用戶需要做的就是先下載安裝，並啟工具。

即刻下載使用==》微信web開發者工具下載

2、調試微信網頁授權，具體操作步驟為：

1）開發者可以在調試器中點擊「登錄」，使用手機微信掃碼登錄，從而使用真實的用戶身份來開發和調試微信網頁授權。請確認手機登錄頁，綁定的公眾號為「微信 web 開發者工具」。

2）為了保證開發者身份信息的安全，對於希望調試的公眾號，我們要求開發者微信號與之建立綁定關系。具體操作為：公眾號登錄管理後台，啟用開發者中心，在開發者工具——web 開發者工具頁面，向開發者微信號發送綁定邀請。

3）開發者在手機微信上接受邀請，即可完成綁定。每個公眾號最多可同時綁定10個開發者微信號。邀請確認頁面如下圖所示：

4）完成登錄和綁定後，開發者就可以開始調試微信網頁授權了，注意只能調試自己綁定過的公眾號：

非靜默授權的 URL：點擊查看

在微信 web 開發者工具中上面的 URL，webview 模擬器顯示效果如圖：

點擊「確認登錄」即可帶著用戶信息跳轉到第三方頁面，很方便的進行後續的開發和調試。

靜默授權的 URL：點擊查看

在微信 web 開發者工具中打開該 URL 則會自動跳轉到第三方頁面。

（注意：如果使用了代理，需代理本身支持https直連，才能調試https頁面。）

3、模擬JSSDK許可權校驗

通過 web 開發者工具，可以模擬 JSSDK 在微信客戶端中的請求，並直觀地看到鑒權結果和 log。以微信 JSSDK DEMO 頁面為例：