【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果
、? ? 今天有幸給大家分享一下谷歌瀏覽器針對(duì)移動(dòng)網(wǎng)頁(yè)測(cè)試的技巧，主要是最近做個(gè)微信公共號(hào)網(wǎng)站。所以就要對(duì)頁(yè)面測(cè)試?yán)Ｒ苿?dòng)網(wǎng)頁(yè)我們最長(zhǎng)測(cè)得就是各種手機(jī)大小的頁(yè)面效果和出現(xiàn)網(wǎng)絡(luò)問題的效果展示。
今天就簡(jiǎn)單分享下在谷歌瀏覽器測(cè)試頁(yè)面的適配和網(wǎng)速限制展示。
頁(yè)面的適配
自帶的手機(jī)模式
首先打開谷歌瀏覽器按F12我們調(diào)到手機(jī)模式：
?進(jìn)入之后我們可以看到我們的頁(yè)面成了手機(jī)頁(yè)面，當(dāng)然谷歌也很人性化的給了我們很多手機(jī)的效果：
但是我們總是會(huì)有不滿足的因?yàn)?#xff0c;可能項(xiàng)目的要求不同吧，反正就是這里面沒有你想要的那怎么辦，當(dāng)然是增加自己的手機(jī)嘍。
自己添加手機(jī)模式
我們還是下拉處自帶的手機(jī)模式，然后在最下面我們看到Edit，點(diǎn)擊進(jìn)入他。然后在Setting=>Devices，當(dāng)然在這里你會(huì)看到更多的手機(jī)模式
不過我還是想要自己的，這個(gè)時(shí)候在點(diǎn)擊Add Custom devices，然后填寫手機(jī)名字（可以任意起），然后是寬度和長(zhǎng)度，還有devicePixelRatio（手機(jī)像素比），這里寬度和長(zhǎng)度的填寫需要根據(jù)公式計(jì)算：
寬度=手機(jī)像素寬/像素比 長(zhǎng)度=手機(jī)像素長(zhǎng)/像素比手機(jī)像素比可以通過以下網(wǎng)址測(cè)試：https://www.zhangxinxu.com/study/201208/window-device-pixel-ratio.html
然后是填寫userAgent,這個(gè)可以通過使用手機(jī)打開:http://www.runoob.com/try/try.php?filename=try_nav_useragent
?填寫完成點(diǎn)擊save保存即可。然后選擇顯示就可以在列表看到了：
?網(wǎng)速限制展示
斷網(wǎng)模式
很多情況下我們的項(xiàng)目會(huì)在網(wǎng)速不好的時(shí)候運(yùn)行，但是測(cè)試這種情況哪？我就是使用谷歌瀏覽器的網(wǎng)速限制模式：
我們切換到手機(jī)模式后會(huì)在頭部看到這個(gè)
這種就是我們最常用的也是默認(rèn)的，但是我們?nèi)绻枰獢嗑€測(cè)試一下怎么辦，通過點(diǎn)擊下拉我們可以看到：
然后我們選擇offline：請(qǐng)看效果，在頁(yè)面的頭部會(huì)提示這個(gè)這是百度給的提示也說明了這是斷網(wǎng)的情況模擬。
大多數(shù)情況下我們看到的是這種的小鳥：
這也說明是斷網(wǎng)模式。
?限速模式
上面除了點(diǎn)擊offline還有另外的，mid-tier?mobile和?low-end?mobile分別代表了快速一點(diǎn)和慢速，說白了就是網(wǎng)速一個(gè)快一點(diǎn)一個(gè)非常慢相對(duì)比較。
通過這兩個(gè)打開百度翻譯可以很明顯的感覺到網(wǎng)頁(yè)的打開速度：
通過頁(yè)面的加載項(xiàng)也可以很明顯的看出來加載速度變慢：
添加自己的限速規(guī)則
除了這個(gè)地方還可以在控制臺(tái)的NetWork中找到，在這了還可以添加自己的限速規(guī)則哦。
?點(diǎn)擊Add添加自己的限速設(shè)置，填寫名字，下載限制，上傳限制，延遲，保存即可。
然后是我自己的設(shè)置應(yīng)用到百度網(wǎng)頁(yè)沒可以看到基本就跟打不開差不多了。
?
本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=0ajkhj&title=【開發(fā)調(diào)試】谷歌瀏覽器中調(diào)試移動(dòng)網(wǎng)頁(yè)和測(cè)試網(wǎng)速下頁(yè)面效果
總結(jié)
以上是生活随笔為你收集整理的【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
