A. 怎麼在移動端調試web前端
日常開發中，用 Chrome 模擬 UA、屏幕尺寸 和 觸摸特性，完成第一階段的開發和調試。
第二階段：
iOS 的話，iPhoen 數據線鏈接 Mac，打開 Safari 就可以直接使用 Mac 的 Safari 調試工具了。
Android 的話，Chrome 也有提供對應的調試工具。
國產瀏覽器中，UC 在 Android 提供了開發者版本，區域網下直接訪問機器的IP + 9998埠即可進入調試環境。
但對於國內開發者而言，最大的問題在於國產瀏覽器的各種奇怪BUG。
面對這類沒有調試工具的瀏覽器，weinre 也是一個可行的解決方案。
如果只是對JavaScript的異常進行跟蹤，自己敲幾行代碼也可以勉強處理一下。
引入一個外部鏈接來接收異常信息，藉此把異常顯示到開發環境中，這樣就可以根據異常的信息對 JavaScript 代碼進行跟蹤和定位。
其中大致的實現原理，是通過對 window.onerror 進行一個全局的異常監聽，把捕獲到的異常發送到指定的介面。
B. 怎麼在移動端調試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 做代理，通過電腦去訪問。
C. 怎麼在移動端調試web前端
你可以谷歌瀏覽器裡面有一個手機設備來調試web前端
1、打開谷歌瀏覽器，點擊右上角的三個點，然後依此展開，選擇開發者工具
2、會打開一個窗口，上面一半是展示區，下面是代碼區
3、這樣就可以調試前端代碼了。
D. 如何在移動設備上調試html5開發的網頁
1、打開手機web檢查器。
通過【設置】>【Safari】>【高級】>【Web檢查器】打開。見下圖（點擊查看大圖），並且你會看到該選項下面對電腦操作的相應描述，照做就好。
E. 我想用手機測試自己寫的web頁面，該怎麼做
一、IOS 移動端 （Safari開發者工具）
手機端：設置 → Safari → 高級 → Web 檢查器 → 開。
mac端：Safari → 偏好設置 → 高級 → 在菜單欄中顯示「開發」菜單。
在 OS X 中啟動 Safari 之後，以 USB 電纜正常接入 iOS 設備，並在此移動設備上啟動 Safari。此時點擊計算機上的 Safari 菜單中的「開發」，可以看到有 iOS 設備的名稱顯示，其子菜單項即為移動設備上 Safari 的所有標簽頁，點擊任意一個開始調試。
便捷，簡單，還可以調試外殼包裹的瀏覽器如微信。
備註：順便提一下，要調試不同版本的ios，可以進xcode 進行下載不同的系統包（當然是在沒有設備的情況下，土豪略過）
二、安卓移動端
1、chrome 調試方法
首先確保手機上和PC機上裝有最新版本的chrome瀏覽器，其次是將手機的開發者選項打開並允許調試，然後將數據線將兩台設備連接起來。在PC機上打開chorme，輸入chrome://inspect ，然後在手機上打開chrome，然後手機會彈框詢問是否允許調試，當然確定啦。有時候手機鎖屏會斷開，請拔掉usb重來。
點擊inspect打開DevTools後，你可以選中頁面中的DOM元素，同時設備中對應元素也高亮顯示，也可使用DevTools中的Inspect Element 選中目標元素，可以實時與移動設備頁面交互，方便的定位問題所在，進行代碼調試，就能像pc端一樣愉快的玩耍了。如果有問題，請檢查chrome版本。
作者：愛吃西紅柿的魚
鏈接：http://www.hu.com/question/37361845/answer/71674280
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
chrome的調試一般只可以調試chrome頁面，但是其官方文檔說還可以調試WebViews：
「On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.」
需要說明調試WebView需要滿足安卓系統版本為Android 4.4+，並且需要再你的APP內配置相應的代碼，在WebView類中調用靜態方法，如下：
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.(true);
}
以上配置方法適用於安卓應用內所有的WebView情形。
安卓WebView是否可調試並不取決於應用中manifest的標志變數debuggable，如果你想只在debuggable為true時候允許WebView遠程調試，請使用以下代碼段：
if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {
if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE{
WebView.(true);
}
}
我這里只寫了個大概，如果有其他問題或者欲查看詳細文檔，看下面鏈接（自備梯子）：
https://developer.chrome.com/devtools/docs/remote-debugging
注意：同樣的你也可以在電腦上裝安卓的虛擬機，推薦Genymotion ，一樣的，想測什麼版本，就自己下rom ，當然土豪當我沒說。
2、UC開發者瀏覽器
由於不推薦移動端使用UC（大家應該自覺抵制移動端毒瘤），所以我只簡單說一下，如果是在有興趣，請自行查看： 開發者中心_UC優視︱UC瀏覽器︱全球第一大手機瀏覽器，用戶超過5億人︱手機瀏覽器
它的調試方法與chrome差異不大。
3、使用 Weinre 調試
該方法是比較老的一種方法，對於其他的調試方法來說屬於刀耕火種型的。weinre是一個調試包，本身提供一個JavaScript，需要你在項目文件中加入該js。首先安裝Weinre，我們用nodejs安裝之，使用-g全局命令，以便可以在各個目錄下訪問：
npm install -g weinre
安裝weinre之後再設置監聽本機的ip:
然後打開返回的地址的說明文檔，然後把返回的js寫入到調試的文檔中，注意我箭頭所指向的地方。
這樣訪問頁面的時候，載入這個 JS，就會被 Weinre 監聽到進行控制。
小提示：這個 JS 後面的 #anonymous 起到一個標識作用，為了區別，我們可以將其修改成 #test 放到頁面中。這時候，我們的 Inspect 面板的地址就不是 http://172.16.0.2:8080/client/#anonymous 了，而是 http://172.16.0.2:8080/client/#test 。
當我們訪問頁面的時候，就會出現在監聽列表中，如果有多個網頁，你可以從列表中選擇一個。然後就可以使用後面的 Elements、Console 等面板來進行調試操作了：
Weinre 非常靈活，只需要在頁面中載入這個 JS，然後訪問即可，因此 WebView 可以用這種方法調試，一些低版本的 Android、iOS 也可以支持，Window Phone 也是可以用的。在調試移動設備時你可能需要在本地搭建一個區域網 IP 的伺服器，將設備與本機網路連接成一個區域網，用移動設備訪問這個網頁即可。
當然 Weinre 也不是萬能的，相比 Chrome 的調試工具，它缺少 JavaScript debug 以及 Profiles 等常用功能，但是它兼容性強，可以實現基礎調試功能。
4、mihtool 測試
MIHTool 是國人開發的，基於 Weinre，用於 iOS 設備的前端開發測試。
與Weinre 的調試方式大體一樣，即開啟一個伺服器，然後將 JS 插入到頁面中，訪問進行調試。
MIHTool 將這個過程簡化了，它是一個 APP，可以直接安裝到你的 iOS 設備裡面，然後內置一個簡單的瀏覽器可以打開你的測試頁面，當它開啟時，會自動向頁面中插入 Weinre 的 JS，並告知 Weinre 控制台 URL 等信息，讓你可以訪問進行調試。
它還提供了一個公共的 Weinre 調試服務，生成類似 MIHTool Web Inspector 這樣的鏈接，打開即可調試，非常方便，就是有些卡。
5、移動設備在線測試
移動端設備如此之多，小公司或者團隊，沒有這么多資金和精力購買如此多的測試設備進行測試。於是就有人買了這些設備，連接起來，提供在線調試服務。
一般就是他的真實手機設備打開，然後截屏出來供預覽。
比如：BrowserStack 等，當然一般比較卡。
三、總結
調試方法很多，層出不窮，關鍵是要看自己是否順手和熟練，關鍵在於按時按量的完成開發任務。
關鍵在於平時多積累跨坑姿勢，少寫一點不兼容的代碼，調試就舒心一點。
如果這還不滿足的話，可以查看更多資料：
移動端前端開發調試： http://yujiangshui.com/multidevice-frontend-debug/
移動開發真機調試： 移動開發真機調試
remote_inspect_web_on_real_device： jieyou/remote_inspect_web_on_real_device · GitHub
remote-debugging： https://developer.chrome.com/devtools/docs/remote-debugging
移動端Web開發調試之Chrome遠程調試(Remote Debugging)：移動端Web開發調試之Chrome遠程調試(Remote Debugging)
－－－－－－－－－－－－2015/12/2 補充 BrowserSync 部分－－－－－－－－－－－－－
很多朋友再說為什麼不寫Browser-sync，還有給差評的，說實話吧，我之前不了解那個東西。花了點時間看了一下，找到了他們的官網：Browsersync - Time-saving synchronised browser testing 覺得還挺有趣的哈。
然後就用了，覺得還行，真的會省很多工夫，入門也快，差不多就5分鍾快速入門，前端的輪子都這樣。。。
1、首先安裝 BrowserSync
npm install -g browser-sync
2、啟動 BrowserSync，原理應該是那種檢測文件變化，然後在服務端 websocket 通知瀏覽器變動，再載入新的變動文件，在不支持websocket 的瀏覽器上就輪訓服務端的變化，在載入新文件。我只是簡單的抓包看了下，也不知道說對了沒有。233
此時分兩種情況，一種是靜態：
// 監聽css文件
browser-sync start --server --files "css/*.css"
// 監聽css和html文件
browser-sync start --server --files "css/*.css, *.html"
二種是動態：
// 主機名可以是ip或域名
browser-sync start --proxy "主機名" "css/*.css"
然後就上手了啊，就這么簡單。。
還有gulp 配合哦。具體就看文檔了：Browsersync + Gulp.js
總結，前端變化日新月異，一個月不學，感覺就落後了啊
－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－
這里是 @於江水 大神的原文，之所以圈他一下，因為我的這個文檔從他那兒粘貼了很多，這個是他的原文：--> 移動端前端開發調試 。
上面的更多資料部分，我也講其放在第一個，不過之前的鏈接放錯了，不是原博客鏈接，現在已更正。
這是我整理的，每一個我都真正的動手實現了的，關於安卓webview的調試部分我還補充了點我找到的資料 --> 移動端前端開發真機調試攻略
F. 如何用手機進行本地前端調試
第一步：連接電腦與手機
1. 手機打開「開發者選項」
安卓手機進入「設置」—>「關於手機」—> 在「版本號」上點7次（或其他的版本號位置，一個個試肯定有……）
然後「開發者選項」就出現在「設置」裡面了。
2. 手機打開「USB調試」
進入「開發者選項」—>打開「USB調試」（如果想手機長亮還要打開「不鎖定屏幕」）
3. 連接並允許調試
用USB數據線將手機與電腦連接—>手機上出現「允許該電腦調試」時點「允許」（可能會晚點出現，先去第二步）
第二步：用電腦啟動手機瀏覽
1. 打開chrome的inspect
在電腦chrome地址欄中輸入chrome://inspect—>勾選「Discover USB devices」
如無意外在Devices中會出現手機型號。
如果沒有，再確認下：開發者選項、USB調試、允許該計算機調試
2. 手機打開chrome app
在手機中打開chrome，這時電腦的chrome inspect中會出現輸網址的地方。
3. 測試手機瀏覽的控制
在電腦chrome inspect輸入框中隨便輸個在線網址，點Open，手機chrome就會打開該頁面。用電腦chrome可以控制刷新、關閉，但是用來調試的inspect點開是空白，應該是被牆了。
第三步：用手機測試本地頁面
1. 開啟本地伺服器
對的，很遺憾手機chrome不能進行靜態頁面的調試。
所以必須開本地伺服器，所幸現在有gulp+webserver，用法這里不講了。
總之，完成這一點後，你應該在電腦上用 http://localhost 來瀏覽網頁了。
2. 電腦chrome開啟埠轉發
在chrome inspect中點「Port forwarding...」—>把埠和localhost鏈接輸進去（比如8000和localhost:8000）—>勾選「Enable port forwarding」—>Done
3. 打開手機瀏覽localhost
如：輸入http://localhost:8000 點Open
這樣手機就能打開頁面了。
G. 怎麼在移動端調試web前端
移動端調試我知道的方法有2種
一種是谷歌瀏覽器自帶的，安卓手機插上就行，然後就可以進行手機調試，前提是必須得開代理；
另外一種是打開安卓手機瀏覽器，輸入你電腦本地ip地址，然後緊接ip地址後面輸入你項目路徑，也可以進行調試；
工作中我一般用第一種
如果蘋果手機調試的話，那更簡單，用xcode
H. 怎麼在移動端調試web前端
日常開發中，用 Chrome 模擬 UA、屏幕尺寸 和 觸摸特性，完成第一階段的開發和調試。
<img src="https://pic4.mg.com/50/_hd.jpg" data-rawwidth="420" data-rawheight="169" class="content_image" width="420">
Android 的話，Chrome 也有提供對應的調試工具。
I. 如何實用便捷的在本地真機調試WEB端HTML5網頁
1、如果你能FQ
chrome在32版本後就自帶了移動端調度工具，可以在Android直接聯調，但唯一遺憾的是，在我大天朝要FQ後才能行的通，我自己試了後公司好幾個機器聯不上…
2、如果你有蘋果電腦和iphone
蘋果電腦上的safari 6.0版本後就可以直接連接iphone手機調試手機版上safari正在瀏覽的web頁面，前提是你得有個蘋果電腦和iphone手機，但如果你是Android的話，就沒辦法了
符合前端B格的「小蘋果」
自己在公司里也是開發Mobile端的HTML5頁面的，也深受調試頁面之苦，移動端的WEB頁面坑又多，所以用node-webkit技術做了一個客戶端，專門用來調試，現在每天工作之前都先打開「小蘋果」
小蘋果用的是node-webkit技術打包成客戶端，其實內部實現都是web 頁面與nodejs技術，所以特別符合前端B格。而且由於用了node-webkit技術，客戶端可以跑在windows和mac電腦上，齊活兒了
小蘋果官方網站
里邊有下載及安裝和使用的方法
J. 手機WEB頁面開發跟PC端差別大嗎
差別大，主要差別在一下方面。
一、開發終端不同
1、手機端：以手機、PDA、UMPC等便攜終端為基礎，進行相應的開發工作。
2、PC端：是開發基於B/S（IE瀏覽器）的網頁開發是由若干個頁面組成的有聯系的集合。
二、開發方式不同
1、手機端：是為小型、無線計算設備編寫軟體的流程和程序的集合，像智能手機或者平板電腦。移動應用開發類似於Web應用開發，起源於更為傳統的軟體開發。
2、PC端：主要針對電子商務領域，不僅是網站美工和內容，可能涉及到網站的一些功能的開發，比製作有更深層次的意思。
三、特點不同
1、手機端：無線中間件（移動中間件）的原理就是把原生的功能封裝打包成簡單的API，開發人員只需要了解調用這些API的方法，即可完成移動開發。
2、PC端：針對不同的行業領域與市場規模，提供有針對性的解決方案，採用業內最優化的電子商務流程，以及各種受消費者歡迎的營銷工具。