整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是Echa。
基于目前主流場景——H5頁面內嵌在APP端的應用，我們基于H5頁面承載的平臺，遇到很多設備的兼容性問題【如：ios13.6.1頁面一直循環請求問題、Android5.0 + ios10白屏問題等】，針對特殊機型，我們并不能直接通過瀏覽器調試出其問題所在。因此，需要我們在真實的設備場景下，采用真機調試的方法，進行進一步問題的分析。
對于mac電腦，ios可以直接使用USB，將真機連接在MAC電腦上，通過Safari瀏覽器調試。
手機的準備工作：
手機準備就緒后，開始在電腦上操作：
注意事項：
對于mac，需要安裝android和adb配置，才可以在chrome的調試工具中看到將要調試的頁面。安裝后需要配置adb，參考以下文章：https://www.jianshu.com/p/61339291c9e2
然后打開終端，輸入以下命令：
touch .bash_profile
該命令的作用是如果不存在.bash_profile文件，則創建該文件；然后輸入以下命令：
open -e .bash_profile
該命令的作用是用文本編輯器 TextEdit 打開.bash_profile文件。如果第一次配置環境變量，則該文檔應該是空的。、
接下來，在該文件中加入下面的代碼：
export ANDROID_HOME="/Users/macbook/Library/Android/sdk" /// Android SDk 路徑
export PATH=${PATH}:${ANDROID_HOME}/tools ///
export PATH=${PATH}:${ANDROID_HOME}/platform-tools /// adb環境變量 路徑
編輯好后按下 command + S 保存退出即可。
執行以下命令來刷新環境變量：
source .bash_profile
通過以下命令來測試 adb 是否安裝成功，如果還不行，請檢測保存的sdk路徑是否正確：
adb version
安裝好adb后就進行創建和修改adb_usb.ini文件：
如果查看手機設備時，已添加的設備不是devices，而是unauthorized『未授權』狀態，則使用以下解決方法：
連接成功后，打開谷歌調試工具：chrome://inspect/#devices，手機端打開H5頁面，即可看到調試的H5頁面地址，點擊后即可調試：
抓包主要是在數據返回有問題，需要提供curl或者分析服務端返回數據結構時進行的操作。這里主要介紹使用 Charles 抓包。
Charles 是常用的 HTTPS 協議網絡包截取工具，是一款非常好用的抓包工具。
Charles 的優勢如下：
Charles 的工作原理： Charles的抓包的本質是通過網絡代理進行抓包。
綜上，其實 Charles 在中間做了一個攔截，對請求和響應進行截取和修改的過程。
下面來看看 HTTP 的抓包過程是怎么的。
打開 wifi 設置，選擇已經連接的WIFI，點擊進入修改網絡，將代理改為手動；輸入代理服務器的IP與端口，IP 即安裝了 Charles 的電腦 IP 地址，端口就是上一步設置 Charles 時設置的端口：
注意： 手機連接的 WIFI 要與電腦在同一個局域網內。
當手機連接上代理后，Charles會彈出相應的提示框，點擊 allow 即可。點擊工具欄上的開始錄制按鈕，即啟動抓包功能。
在手機上操作相應的頁面進行抓包，在Charles的主界面上就可以看到對應的請求內容。
以上為 HTTP 請求的抓包流程，但是針對 C 端項目，絕大部分都是 https 請求，所以對于HTTPS，我們還需要做一些前置的工作，保證可以順利的抓包。
HTTPS 其實就是HTTP的升級版，在HTTP上又加了一層處理加密信息的模塊【HTTPS=HTTP + SSL/TSL】。服務端和客戶端的信息傳輸都會通過TLS進行加密，所以傳輸的數據都是加密后的數據。這樣就避免了敏感信息被第三方獲取。
將Android手機與 Charles 進行連接，輸入好IP地址和端口號后，打開Charles的證書，直接將證書安裝在Android手機上。
然后在手機瀏覽器中打開『chls.pro/ssl』地址，打開后安裝證書到本地，顯示下載完成后，在文件管理中找到剛剛下載的證書，將后綴為 prem 的文件，更改擴展名變為crt。變更完成后點擊證書進行安裝，選擇證書安裝程序，為證書命名，點擊確定后彈出"已安裝『命名』"，則成功安裝。
ios 手機也在WIFI中連接打開Charles的電腦IP，同android的Charles下載證書的步驟，將證書下載到iOS手機上。然后在手機Safari瀏覽器中也輸入chls.pro/ssl，則彈出圖1彈窗，點擊允許，進入安裝步驟，點擊安裝，進入警告，點擊安裝，則安裝完成。之后在設置→ 關于本機→ 證書信任設置 → 找到剛安裝的證書，將開關打開，即安裝完成。
③ 激活Charles的SSL代理
如果點擊某一個請求后發現是亂碼，則需要將指定的URL請求開啟SSL代理功能。【開啟后，enabled是置灰的】
至此，可以進行數據的分析
打開弱網設置模塊如下圖，勾選允許弱網調試后，在下面的參數中調整弱網的參數：
設置Charles的斷點：
對指定的URL開啟斷點功能：
編輯請求與響應的內容：
Charles主要提供兩種視圖：
如果響應的請求太多了，可以進行篩選：
開啟以上設置的標識如下：
github: https://github.com/Tencent/vConsole
一個輕量、可拓展、針對手機網頁的前端開發者調試面板。
怎么發現此工具的了？
在調用微信接口掃一掃功能，使用alert來調試查看是否返回結果消息，最后發現很多次沒有結果信息返回，還懷疑是否微信接口不穩定，后來發并不是沒有返回結果，alert的原因，使用vConsole就可以查看返回結果信息，此工具在小程序當中也有出現
我們常用到的就是日志輸出，和瀏覽器緩存localStorage
此前掌銀項目緩存登錄使用的就是localStorage，測試時不方便，有了此工具點擊菜單欄的clear就可以清楚緩存
1.png
2.png
3.png
5.png
6.png
1：js直接引用，下載最新版https://github.com/Tencent/vConsole/releases/latest
<script src="vconsole.min.js"></script>
<script>
// 初始化
var vConsole=new VConsole();
console.log('Hello world');
</script>2：npm下載
npm install vconsole -S
3、簡單使用
在主js中：
import VConsole from 'vconsole'
const vConsole=new VConsole()
Vue.use(vConsole)
console.info("vconsole-info-測試")安裝
npm install vconsole-webpack-plugin -D
在vue.config.js中設置：
configureWebpack: config=> {
config.plugins.push(
//手機端調試
new vConsole({
filter: [], // 需要過濾的入口文件
enable: isVConsole===true // 生產環境不打開
})
)
}與 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志：
console.log('Hello World');未加載 vConsole 模塊時，console.log() 會直接打印到原生控制臺中；加載 vConsole 后，日志會打印到頁面前端+原生控制臺。
支持 5 種不同類型的日志，會以不同的顏色輸出到前端面板：
console.log('foo'); // 白底黑字
console.info('bar'); // 白底紫字
console.debug('oh'); // 白底黃字
console.warn('foo'); // 黃底黃字
console.error('bar'); // 紅底紅字支持以下 console 方法：
console.time('foo'); // 啟動名為 foo 的計時器
console.timeEnd('foo'); // 停止 foo 計時器并輸出經過的時間Object/Array 結構化展示
支持打印 Object 或 Array 變量，會以結構化 JSON 形式輸出（并折疊）：
var obj={};
obj.foo='bar';
console.log(obj);多態
支持傳入多個參數，會以空格隔開：
var uid=666;
console.log('UserID:', uid); // 打印出 UserID: 233//當前 vConsole 的版本號。
vConsole.version
//顯示 vConsole 主面板
vConsole.show()
//隱藏 vConsole 主面板
vConsole.hide()
//析構一個 vConsole 對象實例，并將 vConsole 面板從頁面中移除。
var vConsole=new VConsole();
vConsole.destroy();
//顯示 vConsole 的開關按鈕。
vConsole.showSwitch()
//隱藏 vConsole 的開關按鈕
vConsole.hideSwitch()
7.png
// get
vConsole.option //=> {...}
// set
vConsole.setOption('maxLogNumber', 5000);
// 或者：
vConsole.setOption({maxLogNumber: 5000});如果你覺得有用的話，請點贊我，關注我，最后，感謝你的閱讀，編程愉快！
歌瀏覽器是webkit內核的瀏覽器，如果我們要切換到兼容模式該怎么操作呢？小編可以告訴大家這個是需要第三方插件的，下面小編就來告訴大家谷歌瀏覽器怎么設置兼容模式。
1、進入到谷歌瀏覽器的網上應用商店，搜索“ie tab”，在搜索結果的擴展程序里，找到“ie tab ”或 “ie muti tab”，點擊下方的“免費”按鈕進行安裝
2、彈出確認安裝提示，選擇“添加”按鈕
3、安裝完畢后，即會彈出插件的具體設置，默認情況我們不需要改動，點擊保存，關閉即可
4、如果想要當前的網頁以兼容模式打開，只需要點擊上方的“ipa”按鈕，即可轉換，十分方便
做前端開發的朋友經常需要使用Visual Studio Code編輯代碼，很多朋友就想在VSCode調試JS代碼，下面我們就介紹下如何配置操作。
首先安裝好VSCode，準備好一個JS項目，在VSCode中安裝插件Debugger for Chrome （如下圖操作搜索安裝即可）。
沒有可以測試項目的可以使用HBuilder等工具新建一個Web項目進行測試，如下：
然后，使用VSCode打開上述項目，如下：
按F5鍵，在彈出的下拉列表中選擇Chrome。
然后打開launch.json配置文件如下：
在configurations內部添加如下內容：
1. `{`
2. `"name": "使用本機 Chrome 調試",`
3. `"type": "chrome",`
4. `"request": "launch",`
5. `"file": "${workspaceRoot}/index.html",`
6. `// "url": "http://mysite.com/index.html", //使用外部服務器時,請注釋掉 file, 改用 url, 并將 useBuildInServer 設置為 false "http://mysite.com/index.html`
7. `"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安裝路徑`
8. `"sourceMaps": true,`
9. `"webRoot": "${workspaceRoot}",`
10. `// "preLaunchTask":"build",`
11. `"userDataDir":"${tmpdir}",`
12. `"port":5433`
13. `}`
添加后，內容如下：
如下圖，按F5，點擊相應的按鈕或按響應快捷鍵即可控制斷點執行。
最后
還有問題的朋友，歡迎在評論區給我留言。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
