1. 如何用手機進行本地前端調試
第一步：連接電腦與手機
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
這樣手機就能打開頁面了。
2. js前端調試的幾個小技巧
1. debugger;
我以前也說過，你可以在JavaScript代碼中加入一句debugger;來手工造成一個斷點效果。
需要帶有條件的斷點嗎？你只需要用if語句包圍它：
if(somethingHappens){
debugger;
}但要記住在程序發布前刪掉它們。
2. 設置在DOM node發生變化時觸發斷點
有時候你會發現DOM不受你的控制，自己會發生一些奇怪的變化，讓你很難找出問題的根源。
谷歌瀏覽器的開發工具里有一個超級好用的功能，專門可以對付這種情況，叫做「Break on…」，你在DOM節點上右鍵，就能看到這個菜單項。
斷點的觸發條件可以設置成這個節點被刪除、節點的屬性有任何變化，或它的某個子節點有變化發生。
3. Ajax 斷點
XHR斷點，或Ajax斷點，就像它們的名字一樣，可以讓我們設置一個斷點，在特點的Ajax調用發生時觸發它們。
當你在調試Web應用的網路傳輸時，這一招非常的有效。
tumblr_inline_n1s7ceQ08c1r2
4. 移動設備模擬環境
谷歌瀏覽器里有一些非常有趣的模擬移動設備的工具，幫助我們調試程序在移動設備里的運行情況。
找到它的方法是：按F12，調出開發者工具，然後按ESC鍵(當前tab不能是Console)，你就會看到第二層調試窗口出現，裡面的Emulation標簽頁里有各種模擬設備可選。
當然，這不會就變成了真正的iPhone，只是模擬了iPhone的尺寸，觸摸事件和瀏覽器User Agent值。
tumblr_inline_n1s71kb2NL1r2
5. 使用Audits改進你的網站
YSlow是一個非常棒的工具。谷歌瀏覽器的開發者工具里也有一個非常類似的工具，叫Audits。
它可快速的審計你的網站，給你提出非常實際有效的優化你的網站的建議和方法。
3. 前端做出來的移動端頁面用什麼測試
移動端的web頁面調試一般可以採取以下三種調試方法：第一，在PC端的瀏覽器里直接f12調試，一般現在的瀏覽器都有device mode，調用這個模式瀏覽器就可以模擬移動端的設備進行調試，目前chrome支持的設備包括蘋果、三星、nexus等；
第二，在PC端創建安卓和ios的虛擬機調試，感覺有點復雜，一般web開發很少用這種模式，原生app開發用得比較多；
第三，直接用移動設備測試，將你開發所用的PC和要測試的移動設備連接在同一個區域網下，通過PC搭建一個伺服器，這樣移動設備就可以通過區域網ip訪問你開發的網頁看效果了。
通常來說，第一種調試方式方便快捷，能夠快速的查看效果，基本上解決90%的調試問題。剩下的問題一般要配合第三種方法，比如不同的系統（安卓、蘋果）搭配不同的瀏覽器（UC、QQ、chrome、Safari）的顯示差異問題等等。
4. 怎麼在移動端調試web前端
日常開發中，用 Chrome 模擬 UA、屏幕尺寸 和 觸摸特性，完成第一階段的開發和調試。
第二階段：
iOS 的話，iPhoen 數據線鏈接 Mac，打開 Safari 就可以直接使用 Mac 的 Safari 調試工具了。
Android 的話，Chrome 也有提供對應的調試工具。
國產瀏覽器中，UC 在 Android 提供了開發者版本，區域網下直接訪問機器的IP + 9998埠即可進入調試環境。
但對於國內開發者而言，最大的問題在於國產瀏覽器的各種奇怪BUG。
面對這類沒有調試工具的瀏覽器，weinre 也是一個可行的解決方案。
如果只是對JavaScript的異常進行跟蹤，自己敲幾行代碼也可以勉強處理一下。
引入一個外部鏈接來接收異常信息，藉此把異常顯示到開發環境中，這樣就可以根據異常的信息對 JavaScript 代碼進行跟蹤和定位。
其中大致的實現原理，是通過對 window.onerror 進行一個全局的異常監聽，把捕獲到的異常發送到指定的介面。
5. 如何用chrome調試android前端
1. 在pc和android手機上都安裝最新版本的chrome
2. 使用usb將手機的PC相連接
3. 手機中打開「設置」->"開發人員選項"->"USB調試"
4. 打開pc側chrome, 在地址欄中輸入chrome://inspect/#devices 選中discover usb devices。可以看到我們的手機設備，
5.在手機側chrome中訪問頁面 比如：m.haha.sogou.com 同步的，我們會在pc側的chrome上看到到手機側訪問的頁面，
6. 怎麼在移動端調試web前端
可以直接用satari開發工具調試。chrom
+android也有類似的工具組合，但是沒有實際
過。樓主如果覺得不太滿意的話，可以去後盾人看看，那裡也許會有不錯的答案
7. 華為榮耀8怎麼連接電腦 移動前端調試
點擊「手機->設置->關於手機->版本號「，點擊7次，即可開啟開發人員選項。點擊返回鍵後，點擊「開發人員選項->開啟USB調試->點擊允許USB調試「。由於Google安全限制，需要進行如上操作才可以打開USB調試，如果彈框未出現，請重新插拔一次USB線
8. 移動端web前端開發有沒有能夠在pc上面模擬調試的IDE
簡單的可用chrome、火狐的開發者工具去模擬窗口，
復雜的可用Start BlueStacks去模擬安卓端
9. 前端開發是怎麼調試的
如果是網頁開發的話呢 可以使用瀏覽器的f12 開發人員工具調試。如果是安卓或者ios呢可以抓包獲取介面請求信息，或者使用日誌輸出來檢測。
10. 怎樣方便的調試前端代碼
最簡單的方式就是 live reload 。可以看看 Browsersync ，command line 的方式應該不用寫代碼，不過你要裝個 node + npm 。