一、常規(guī)調(diào)試

日常開發(fā)中，使用最多的調(diào)試工具就是chrome的devtool，能解決開發(fā)過程中的絕大多數(shù)問題，但是也僅限于開發(fā)階段常規(guī)的調(diào)試。

1. Network 調(diào)試請求面板

1）filter工具
過濾請求：查看特定域名下的請求：domain:xxx

filter.gif

2）preserve log
保留日志

3）disable catch
當瀏覽器有緩存時，可以通過勾選此選項，避免緩存的影響。

4）respons-header
調(diào)試緩存的時候，可通過respons-header菜單設(shè)置以下：

respon-header.png

5）對請求的處理
再次請求，或者copy請求的一些信息

xhr.gif

2. Sources 源碼面板

ctrl + p 查找源碼
通常在開發(fā)、測試環(huán)境，通過設(shè)置webpack的sourcemap模式，可以展示源碼用于調(diào)試。
在生產(chǎn)環(huán)境，要設(shè)置成none。

打斷點

3. Application 面板

cookies、localStorage等緩存信息，都可以看到，這里可以清除這些緩存信息。

二、調(diào)試利器

chrome 終究是在電腦上面模擬手機，和真機運行還是有差異的，下面介紹一些在真機調(diào)試時用到的一些工具：

瀏覽器遠程調(diào)試
chrome + android 調(diào)試麻煩
safari + ios 調(diào)試麻煩

weinre 調(diào)試麻煩
使用方法：http://www.cnblogs.com/xiaofeixiang/p/4993812.html

集成console
eruda 推薦
使用方法：https://github.com/liriliri/eruda

vconsole 推薦，相比于eruda ，沒有樣式查看功能
使用方法： https://github.com/Tencent/vConsole

三、微信jssdk 本地調(diào)試

微信需要正式的域名才可以完成 jssdk 的初始配置，當線上發(fā)生某個問題時，在本地無法復(fù)現(xiàn)，但是改一次代碼，上傳到測試環(huán)境看，又太麻煩，所以找到一種本地調(diào)試jssdk的方法：

使用charlse進行代理，當訪問測試環(huán)境的url時，代理到本地開發(fā)啟動的localhost上，即可在真機上測試jssdk。

四、pc版微信的缺陷

測試就喜歡用pc版微信，沒辦法，遇到坑記錄下來。

1. jssdk 相關(guān)

1.）定位
getLocation 無法在pc版微信中定位(可運行官方demo驗證)。

2. 語法問題
   不支持 ES6 的 includes 方法。

五、微信兼容性

1. 光標問題
   參考本人另外一篇文章：input 清除按鈕點擊無效

2. jssdk配置

SPA 路由模式對jssdk config的影響
android和ios差異詳解： https://github.com/yongheng2016/blog/issues/78

url的查詢字符串中有中文需要encodeURIComponent轉(zhuǎn)義

轉(zhuǎn)義.png