chrome開發者工具除錯&移動端除錯

chrome-devtools，它允許Web開發人員可以通過瀏覽器應用程式干預和操作Web頁面，也可以通過這個工具除錯和測試Web頁面或Web應用程式。它可以除錯介面的問題、使用斷點除錯JavaScript程式碼、優化你的程式碼。

應用場景為移動端輕應用開發除錯，文件主要包含：
* chrome開發者工具使用
* 如何利用chrome除錯安卓APP中的輕應用（重點）
* IOS除錯簡介

chrome開發者工具

基礎chrome使用作為一個web開發人員應該都會，我就不在這裡詳細說明，詳細參考：神器——Chrome開發者工具

如何更專業的使用Chrome開發者工具
1. Elements
允許我們從瀏覽器的角度看頁面，我們可以看到並且編輯HTML、CSS。值得注意的就是通過Elements看到的所有東西都是經過瀏覽器渲染後的內容不是原始碼。
2. Sources（有沒有快取可以在這裡看出來）
主要用來除錯js，可以進行斷點操作，這裡是原始碼（有時也會發現不是和我們的程式碼完全一致的是因為瀏覽器不支援的語法需要編譯，例如babel）
3. Console
顯示各種警告與錯誤資訊，在這裡可以直接執行js程式碼哦
4. Network
可以看到頁面向伺服器請求了哪些資源、資源的大小以及載入資源花費的時間，HTTP的請求頭。注意開發時把Disable cache勾選，避免快取
5. 其他：Timeline、Application等等，更加詳細內容參考以上的兩篇部落格。

如何利用chrome除錯安卓APP中的輕應用

以下進入重點，利用chrome除錯輕應用：

可以除錯的前提

• 第一次使用瀏覽器除錯APP需要綠色上網，翻牆服務（免費的推薦藍燈）
• 手機開放開發者許可權
  
  需同時開放開發者許可權以及USB除錯許可權，各品牌手機稍有不同，請自行上網查詢。
• APP開放除錯許可權（對於我們的APP可以在APP商店下載除錯用的APP供開發者使用未進行簽名）
  

除錯步驟

以上前提都滿足的情況下
1. 使用USB連線電腦
2. 在瀏覽器中輸入chrome://inspect/進入除錯頁面
如果介面出現空白，則表明手機未連線成功
確保前提滿足的條件下可嘗試插拔手機資料線

如果介面出現手機型號但無APP名稱，則表明APP未開放除錯許可權（APP需要開啟）

上圖為正常情況，即可繼續除錯
3. 點選每個頁面藍色的inspect，即可進入該頁面除錯
如果沒有顯示介面可以切換手機/PC模式，模式正確的情況下可以重新整理介面（除錯比正常情況更消耗手機和電腦瀏覽器效能，出現輕微卡頓是正常情況）

4. 之後就可進行正常的除錯了

值得注意的幾點

• 在使用yyplus（原生輕應用互動框架）的時候，不能通過除錯得到URL後直接通過瀏覽器開啟除錯！PC上載入不到互動外掛。
• 介面渲染不到，請檢查許可權驗證是否正確

TBS開發除錯利器

使用Chrome瀏覽器除錯必須使用未簽名加密的安卓包，為了解決改問題，推薦實用TBS Studio！
只需安裝軟體一直《下一步*n》即可使用。詳細參看部落格傳送門

IOS除錯簡介

安卓可以進行除錯，那麼封閉的IOS是否可以除錯，答案一定是可以的，只不過現在的工具還不是像chrome一樣方便好像，使用的人不是很多。在這隻做引入，詳細內容不做介紹。