資訊專欄INFORMATION COLUMN
摘要：今天有幸給大家分享一下谷歌瀏覽器針對(duì)移動(dòng)網(wǎng)頁(yè)測(cè)試的技巧，主要是最近做個(gè)微信公共號(hào)網(wǎng)站。今天就簡(jiǎn)單分享下在谷歌瀏覽器測(cè)試頁(yè)面的適配和網(wǎng)速限制展示。
、 今天有幸給大家分享一下谷歌瀏覽器針對(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ò)問(wèn)題的效果展示。
今天就簡(jiǎn)單分享下在谷歌瀏覽器測(cè)試頁(yè)面的適配和網(wǎng)速限制展示。
首先打開(kāi)谷歌瀏覽器按F12我們調(diào)到手機(jī)模式：
進(jìn)入之后我們可以看到我們的頁(yè)面成了手機(jī)頁(yè)面，當(dāng)然谷歌也很人性化的給了我們很多手機(jī)的效果：
但是我們總是會(huì)有不滿足的因?yàn)椋赡茼?xiàng)目的要求不同吧，反正就是這里面沒(méi)有你想要的那怎么辦，當(dāng)然是增加自己的手機(jī)嘍。
我們還是下拉處自帶的手機(jī)模式，然后在最下面我們看到Edit，點(diǎn)擊進(jìn)入他。然后在Setting=>Devices，當(dāng)然在這里你會(huì)看到更多的手機(jī)模式
不過(guò)我還是想要自己的，這個(gè)時(shí)候在點(diǎn)擊Add Custom devices，然后填寫(xiě)手機(jī)名字（可以任意起），然后是寬度和長(zhǎng)度，還有devicePixelRatio（手機(jī)像素比），這里寬度和長(zhǎng)度的填寫(xiě)需要根據(jù)公式計(jì)算：
寬度=手機(jī)像素寬/像素比
長(zhǎng)度=手機(jī)像素長(zhǎng)/像素比
手機(jī)像素比可以通過(guò)以下網(wǎng)址測(cè)試：https://www.zhangxinxu.com/study/201208/window-device-pixel-ratio.html
然后是填寫(xiě)userAgent,這個(gè)可以通過(guò)使用手機(jī)打開(kāi):http://www.runoob.com/try/try.php?filename=try_nav_useragent
填寫(xiě)完成點(diǎn)擊save保存即可。然后選擇顯示就可以在列表看到了：
很多情況下我們的項(xiàng)目會(huì)在網(wǎng)速不好的時(shí)候運(yùn)行，但是測(cè)試這種情況哪？我就是使用谷歌瀏覽器的網(wǎng)速限制模式：
我們切換到手機(jī)模式后會(huì)在頭部看到這個(gè)
這種就是我們最常用的也是默認(rèn)的，但是我們?nèi)绻枰獢嗑€測(cè)試一下怎么辦，通過(guò)點(diǎn)擊下拉我們可以看到：
然后我們選擇offline：請(qǐng)看效果，在頁(yè)面的頭部會(huì)提示這個(gè)這是百度給的提示也說(shuō)明了這是斷網(wǎng)的情況模擬。
大多數(shù)情況下我們看到的是這種的小鳥(niǎo)：
這也說(shuō)明是斷網(wǎng)模式。
上面除了點(diǎn)擊offline還有另外的，mid-tier mobile和 low-end mobile分別代表了快速一點(diǎn)和慢速，說(shuō)白了就是網(wǎng)速一個(gè)快一點(diǎn)一個(gè)非常慢相對(duì)比較。
通過(guò)這兩個(gè)打開(kāi)百度翻譯可以很明顯的感覺(jué)到網(wǎng)頁(yè)的打開(kāi)速度：
通過(guò)頁(yè)面的加載項(xiàng)也可以很明顯的看出來(lái)加載速度變慢：
除了這個(gè)地方還可以在控制臺(tái)的NetWork中找到，在這了還可以添加自己的限速規(guī)則哦。
點(diǎn)擊Add添加自己的限速設(shè)置，填寫(xiě)名字，下載限制，上傳限制，延遲，保存即可。
然后是我自己的設(shè)置應(yīng)用到百度網(wǎng)頁(yè)沒(méi)可以看到基本就跟打不開(kāi)差不多了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1807.html
摘要：用于顯示日志信息及輸入一些命令請(qǐng)求監(jiān)聽(tīng)?？色@得請(qǐng)求列表，點(diǎn)開(kāi)某一項(xiàng)將看到數(shù)據(jù)頭部數(shù)據(jù)。包含本次請(qǐng)求的請(qǐng)求方法狀態(tài)碼請(qǐng)求服務(wù)器的地址其他一些設(shè)置響應(yīng)頭部包含用戶代理，幫服務(wù)器識(shí)別設(shè)備用預(yù)覽。 九宮格——用html+css制作一個(gè)網(wǎng)頁(yè) 一. 目標(biāo)效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圓角...
摘要：管理工具是一款非常好用的管理和開(kāi)發(fā)工具。接口調(diào)試開(kāi)發(fā)的一款功能強(qiáng)大的網(wǎng)頁(yè)調(diào)試與發(fā)送網(wǎng)頁(yè)請(qǐng)求。 PHPIDe 我首先力薦PHPstorm10。目前用起來(lái)很爽，集成xdebug,集成git進(jìn)去，當(dāng)然英文不好的同學(xué)在下載個(gè)漢化包，在線調(diào)試。提供諸于：智能HTML/CSS/JavaScript/PHP編輯、代碼質(zhì)量分析、調(diào)試和測(cè)試等功能。另外，它還是跨平臺(tái)。 Mysql管理工具 Navicat...
摘要：可用于攔截某一請(qǐng)求，并重定向到本地的資源，或者使用的內(nèi)置響應(yīng)。作為目前最好用的調(diào)試工具之一，功能很強(qiáng)大，這里僅做簡(jiǎn)單介紹，有興趣的可以深入學(xué)習(xí)。 前言 Fiddler 是目前最強(qiáng)大最好用的調(diào)試工具之一，它能記錄所有客戶端和服務(wù)器的http和https請(qǐng)求，設(shè)置 CGI 請(qǐng)求的斷點(diǎn)，甚至修改輸入輸出數(shù)據(jù)。fiddler 的工作原理，是它在 web server 和 web browser...
摘要：作為一名資深碼農(nóng)，結(jié)合身邊一群民工的真實(shí)體驗(yàn)，小編有那么一點(diǎn)權(quán)威給各位推薦幾款程序員必備常用的擴(kuò)展插件。插件是一款為谷歌瀏覽器定制的非常強(qiáng)大的一款管理插件。 作為一名資深碼農(nóng)，結(jié)合身邊一群IT民工的真實(shí)體驗(yàn)，小編有那么一點(diǎn)權(quán)威給各位推薦幾款程序員必備、常用的chrome擴(kuò)展插件。1.Click&Clean下載地址：http://www.cnplugins.com/offi...Clic...
閱讀 943·2023-04-25 19:43
閱讀 4239·2021-11-30 14:52
閱讀 4024·2021-11-30 14:52
閱讀 4132·2021-11-29 11:00
閱讀 4023·2021-11-29 11:00
閱讀 4153·2021-11-29 11:00
閱讀 3871·2021-11-29 11:00
閱讀 6761·2021-11-29 11:00
