如何真機除錯微信h5頁面

2021-09-25 14:37:42 字數 1545 閱讀 1259

1.使用 chrome 模擬移動裝置進行除錯

1.1 簡單介紹

device mode可以近似模擬出網頁在移動裝置上的顯示效果,就是下面紅框所示的,可以說是最常用的移動端 h5 除錯方式,這裡不過多進行介紹。

然而 chromedevice mode只有如下的一些預設機型:

在圖2第三個紅框中加上user agent

加上之後就可以切換到對應預設機型進行除錯啦~

1.3 簡單的使用體驗總結

傳送門2.1 簡單地聊聊使用體驗

不過因為是在 pc 端進行模擬,一些如掃碼、定位、搖一搖等比較複雜的 sdk 功能無法進行模擬除錯

2.2 再來嘮嘮移動除錯的體驗

在開發中首先學習使用的是普通除錯,簡單來說就是借助 weinre 讓你可以進行真機無線除錯,下面是基本的除錯介面:

最常用的功能有檢查dom元素、檢視network請求和console視窗,就是乙個簡陋版chrome devtools,最大的劣勢是不能進行斷點除錯,綜合除錯體驗不如後面要介紹的x5 blink 除錯

下面是谷歌官方對 android 遠端除錯的介紹,可以自行學習:

android 裝置的遠端除錯入門

對 x5 核心的介紹:

x5 瀏覽器核心調研報告

可能會有錯誤資訊,先退出來,按照錯誤提示依次訪問幾個**

進入 進入 選擇「安裝線下核心」

重新掃上面的碼,可以進入下面的頁面,選擇「開啟tbs核心inspector除錯功能」

然後 usb 連線手機、電腦,開啟開發者模式,開啟 usb 除錯,然後在 chrome 中進入 chrome://inspect/#devices 頁面,可以看到下面的頁面

然後就可以選擇對應頁面inspect,就可以開始真機除錯,而且完美擁有 chrome devtools 的功能

H5頁面微信分享

例如 標題 title 描述 自動獲取當前瀏覽頁的url 不可自定義,無法修改 縮圖 可以在父層 div 上設定 display none 或者對 img 設定 position absolute visibility hidden 例如 display none logo512.png alt d...

微信h5頁面製作總結

第 一 尺寸問題 設計圖的尺寸我剛開始要的是750 1334px,但是在實際應用中發現忽略了手機的狀態列和導航欄的高度 iphone的設計標準,狀態列和導航欄的獨立畫素高度分別為40px和88px android系統的可以更改狀態列和導航欄的高度,可以取預設值為48px和100px 所以設計元素的展...

實現H5頁面微信分享功能

官方是在title下邊引入 我是在body下面直接引用的,沒發現有什麼問題 script 接下來要配置config,我的是通過公司提供的js介面獲取的資訊,並且呼叫方法。var title 這裡面寫分享的名字 公司介面url location.href ajax.send ajax.onreadst...