自2019.05.22日離職以來，自己在家浪了兩天洋幻。然后發(fā)現(xiàn)，浪也該浪夠了翅娶，該收心找下工作了文留。于是屁顛屁顛的拿起了《在你身邊 為你設(shè)計》這本書看了一下午，看到移動端調(diào)試這里竭沫，略有感受燥翅，于是提取了下內(nèi)容。
還有還有蜕提，有哪位大佬推薦下前端開發(fā)的工作嗎权旷，base廣州啊，不勝感激～關(guān)于我請戳blog下的resume.png??
在這個5g到來的時代贯溅，移動互聯(lián)網(wǎng)繼續(xù)橫行，前端的開發(fā)工作和移動端更加緊密了躲查，但是移動端調(diào)試著實讓人尷尬它浅。化解尷尬的方法介紹下下面這幾種镣煮，有補(bǔ)充的歡迎留言??
使用Chrome Develop Tool調(diào)試
作為一個前端開發(fā)工程師姐霍，沒下載個谷歌瀏覽器都不好意思說自己是混這行的了。在移動開發(fā)的過程中，我們是可以使用桌面瀏覽器（推薦谷歌）進(jìn)行調(diào)試的镊折。盡管移動端網(wǎng)頁與桌面端網(wǎng)頁有諸多差異胯府，但是說到底它還是一個在瀏覽器里瀏覽的HTML網(wǎng)頁，所以最常用的還是在桌面借助Chrome調(diào)試器恨胚。
Chrome自帶的Developer Tool對于調(diào)試移動端網(wǎng)頁來說非常方便骂因，可以通過調(diào)整下表所示的幾個屬性來調(diào)整頁面。
| 屬性名 | 功能 |
|---|---|
| User Agent | 設(shè)置當(dāng)前模擬設(shè)備的用戶代理(UA) |
| Device metrices | 設(shè)置頁面的大小赃泡，默認(rèn)值是模擬設(shè)置的大小 |
| Emulate touch events | 模擬觸摸屏事件 |
| Fit in window | 頁面大小是否會根據(jù)窗口大小進(jìn)行適配 |
優(yōu)點：無須額外的成本寒波，方便快捷。
缺點：僅僅用來模擬升熊，并不能完全代表移動設(shè)備的真實狀況俄烁。
使用IOS Safari + Mac OS Safari配合調(diào)試
這個方法對用MAC來辦公的伙伴就比較友好了～
Apple允許開發(fā)者通過數(shù)據(jù)線連接的方式，在Mac OS的Safari里面調(diào)試iOS設(shè)備上的網(wǎng)頁级野。但是這種方法在使用前页屠，需要簡單設(shè)置以下內(nèi)容：
- 在iOS設(shè)備上，打開Safari的Web檢查器蓖柔，選擇設(shè)置 -> Safari -> 高級 -> Web檢查器命令辰企。（用到JavaScript的話，順便在Web檢查器同級上開啟吧）
- 在計算機(jī)上的Safari啟用開發(fā)菜單渊抽，選擇偏好設(shè)置 -> 高級 -> 在菜單欄中顯示'開發(fā)'菜單命令蟆豫。
當(dāng)需要調(diào)試手機(jī)頁面的時候，將設(shè)備與計算機(jī)通過數(shù)據(jù)線連接后懒闷，在Safari菜單開發(fā)欄下選擇當(dāng)前手機(jī)運行的頁面即可十减。
優(yōu)點：可以完全在真機(jī)設(shè)備上調(diào)試網(wǎng)頁，無論是HTML和CSS愤估，還是腳本和請求帮辟，都和在桌面瀏覽器一樣，最重要的是當(dāng)前調(diào)試的是在真實環(huán)境下的頁面玩焰。
缺點：必須是iOS + Mac OS的組合由驹，只能調(diào)試iOS設(shè)備的頁面，不適用于Andriod設(shè)備昔园。
使用Android Chrome + 桌面Chrome配合調(diào)試
嗯～Apple那么強(qiáng)勢蔓榄，我安卓表示不服，也要來自己的一套默刚。
Google Chrome DevTools通過USB數(shù)據(jù)線直接調(diào)試手機(jī)上的網(wǎng)頁甥郑。
只需要準(zhǔn)備下面幾個步驟：
- 在Andriod"開發(fā)者"選項里打開USB調(diào)試模式。
- 插上USB數(shù)據(jù)線荤西。
- 在Chrome菜單里選擇"工具"選項澜搅，繼續(xù)選擇檢查設(shè)備選項悦昵，即可列出所有連接的設(shè)備讳苦。
優(yōu)點：簡單道偷、跨平臺
缺點：只支持Android 4+
使用Weinre遠(yuǎn)程調(diào)試
Weinre的github倉庫地址是https://github.com/nupthale/weinre瓮下，在其README.md里面有詳細(xì)的介紹。
Weinre來源于Web Inspector Remote饵溅，是一個遠(yuǎn)程頁面調(diào)試工具妨退，功能和Firebug、WebKit Inspector類似概说，可以幫助我們在PC端遠(yuǎn)程調(diào)試運行在移動設(shè)備瀏覽器內(nèi)的Web頁面或應(yīng)用碧注，能夠即時調(diào)試DOM元素、CSS樣式和JavaScript等糖赔。
Weinre為了能夠同步桌面的調(diào)試客戶端和移動設(shè)備上的調(diào)試目的萍丐，需要你搭建一個調(diào)試服務(wù)器(Debug Server)，通過這臺調(diào)試服務(wù)器放典，可以在調(diào)試目標(biāo)(Debug Target)和桌面調(diào)試客戶端(Debug Client)之間建立一個同步的連接逝变。詳細(xì)的搭建見Weinre倉庫的README.md介紹。囧奋构，步驟有點多壳影，不想碼字了??
優(yōu)點：同時支持iOS設(shè)備和Android設(shè)備，并且能直接對手機(jī)上的頁面進(jìn)行調(diào)試弥臼，無須安裝客戶端宴咧。
缺點：需要對HTML頁面有改動的權(quán)限，因為是遠(yuǎn)程連接的原因径缅，可能網(wǎng)絡(luò)連接速度會影響調(diào)試的響應(yīng)掺栅。
當(dāng)看到優(yōu)點是不是很激動，在真機(jī)上可以調(diào)試iOS和Android設(shè)備的網(wǎng)頁耶??
使用vConsole調(diào)試
由騰訊出品的vConsole調(diào)試工具纳猪，在調(diào)試移動端的時候非常有效氧卧，而且其使用方法也是簡單。
<script src="path/to/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
上面的使用方法介紹了其中一種而已氏堤。當(dāng)然了沙绝，引入的vConsole也要看下環(huán)境啊，線上環(huán)境的時候還是要判斷下的鼠锈，別等到上線的時候忘記移除vConsole了闪檬，被懟就尷尬??。
優(yōu)點：使用簡單购笆，能方便查看所需調(diào)試的面板信息
缺點：不支持UI的調(diào)試
后話
嗯谬以，調(diào)試工具各有千秋，還有調(diào)試工具但是未介紹到的有Charles抓包工具由桌，postman接口調(diào)試工具等。
哈哈哈，有哪位大佬推薦下前端開發(fā)的崗位嗎行您？base廣州铭乾，關(guān)于我請戳blog下的resume.png。
更多內(nèi)容：https://github.com/reng99/blogs
參考
- 《在你身邊 為你設(shè)計》
- 移動端調(diào)試痛點娃循？——送你五款前端開發(fā)利器
