【開發調試】谷歌瀏覽器中調試移動網頁和測試網速下頁面效果

番茄西紅柿發布于2019-04-23 13:23 / 3444人閱讀

摘要：今天有幸給大家分享一下谷歌瀏覽器針對移動網頁測試的技巧，主要是最近做個微信公共號網站。今天就簡單分享下在谷歌瀏覽器測試頁面的適配和網速限制展示。

、今天有幸給大家分享一下谷歌瀏覽器針對移動網頁測試的技巧，主要是最近做個微信公共號網站。所以就要對頁面測試拉。移動網頁我們最長測得就是各種手機大小的頁面效果和出現網絡問題的效果展示。

今天就簡單分享下在谷歌瀏覽器測試頁面的適配和網速限制展示。

頁面的適配

自帶的手機模式

首先打開谷歌瀏覽器按F12我們調到手機模式：

進入之后我們可以看到我們的頁面成了手機頁面，當然谷歌也很人性化的給了我們很多手機的效果：

但是我們總是會有不滿足的因為，可能項目的要求不同吧，反正就是這里面沒有你想要的那怎么辦，當然是增加自己的手機嘍。

自己添加手機模式

我們還是下拉處自帶的手機模式，然后在最下面我們看到Edit，點擊進入他。然后在Setting=>Devices，當然在這里你會看到更多的手機模式

不過我還是想要自己的，這個時候在點擊Add Custom devices，然后填寫手機名字（可以任意起），然后是寬度和長度，還有devicePixelRatio（手機像素比），這里寬度和長度的填寫需要根據公式計算：

寬度=手機像素寬/像素比
長度=手機像素長/像素比

手機像素比可以通過以下網址測試：https://www.zhangxinxu.com/study/201208/window-device-pixel-ratio.html

然后是填寫userAgent,這個可以通過使用手機打開:http://www.runoob.com/try/try.php?filename=try_nav_useragent

填寫完成點擊save保存即可。然后選擇顯示就可以在列表看到了：

網速限制展示

斷網模式

很多情況下我們的項目會在網速不好的時候運行，但是測試這種情況哪？我就是使用谷歌瀏覽器的網速限制模式：

我們切換到手機模式后會在頭部看到這個

這種就是我們最常用的也是默認的，但是我們如果需要斷線測試一下怎么辦，通過點擊下拉我們可以看到：

然后我們選擇offline：請看效果，在頁面的頭部會提示這個這是百度給的提示也說明了這是斷網的情況模擬。

大多數情況下我們看到的是這種的小鳥：

這也說明是斷網模式。

限速模式

上面除了點擊offline還有另外的，mid-tier mobile和 low-end mobile分別代表了快速一點和慢速，說白了就是網速一個快一點一個非常慢相對比較。

通過這兩個打開百度翻譯可以很明顯的感覺到網頁的打開速度：

通過頁面的加載項也可以很明顯的看出來加載速度變慢：

添加自己的限速規則

除了這個地方還可以在控制臺的NetWork中找到，在這了還可以添加自己的限速規則哦。

點擊Add添加自己的限速設置，填寫名字，下載限制，上傳限制，延遲，保存即可。

然后是我自己的設置應用到百度網頁沒可以看到基本就跟打不開差不多了。

GPU云服務器云服務器谷歌瀏覽器調試webrtc 頁面調試 asp頁面調試 jsp頁面代碼調試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1807.html

【CSS練習】IT修真院--練習1-九宮格

摘要：用于顯示日志信息及輸入一些命令請求監聽。可獲得請求列表，點開某一項將看到數據頭部數據。包含本次請求的請求方法狀態碼請求服務器的地址其他一些設置響應頭部包含用戶代理，幫服務器識別設備用預覽。九宮格——用html+css制作一個網頁一. 目標效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述圓角...

Tecode 2019-08-29 15:34 評論0 收藏0
PHP開發人員使用工具（個人愛好）

摘要：管理工具是一款非常好用的管理和開發工具。接口調試開發的一款功能強大的網頁調試與發送網頁請求。 PHPIDe 我首先力薦PHPstorm10。目前用起來很爽，集成xdebug,集成git進去，當然英文不好的同學在下載個漢化包，在線調試。提供諸于：智能HTML/CSS/JavaScript/PHP編輯、代碼質量分析、調試和測試等功能。另外，它還是跨平臺。 Mysql管理工具 Navicat...

Null 2019-06-28 14:30 評論0 收藏0
測試工程師良品 —— Fiddler 工具簡介

摘要：可用于攔截某一請求，并重定向到本地的資源，或者使用的內置響應。作為目前最好用的調試工具之一，功能很強大，這里僅做簡單介紹，有興趣的可以深入學習。前言 Fiddler 是目前最強大最好用的調試工具之一，它能記錄所有客戶端和服務器的http和https請求，設置 CGI 請求的斷點，甚至修改輸入輸出數據。fiddler 的工作原理，是它在 web server 和 web browser...

Crazy_Coder 2019-05-29 17:05 評論0 收藏0
推薦幾款程序員必備、常用的chrome擴展插件

摘要：作為一名資深碼農，結合身邊一群民工的真實體驗，小編有那么一點權威給各位推薦幾款程序員必備常用的擴展插件。插件是一款為谷歌瀏覽器定制的非常強大的一款管理插件。作為一名資深碼農，結合身邊一群IT民工的真實體驗，小編有那么一點權威給各位推薦幾款程序員必備、常用的chrome擴展插件。1.Click&Clean下載地址：http://www.cnplugins.com/offi...Clic...

gityuan 2019-06-27 15:07 評論0 收藏0