我們可能習慣了在城市的網速,那是槓槓的,並不意味網速在中國哪個都一樣的,在一些偏遠地方,網速依然慢的可憐,所以有時候我們所做的產品是需要考慮網速慢的情況的,那怎麼模擬呢?
打開谷個瀏覽器的performance
選項卡,然後單擊右上角的齒輪圖標就可以看到 Newwork
和CPU
的模擬情況。
單擊表示顏色的小方塊,彈出顏色選擇器。
啓用顏色選擇器後,可以將網頁懸停並使用顏色選擇器來獲取該像素的顏色。
彈出顏色選擇器的小方塊還有快捷鍵按住Shift
並單擊以更改顏色格式。
Audits(審計
),這個功能其實一直存在,只不過在chrome 60之後,發生了翻天覆地的變化:引入了Google開源的另外一個項目:LightHouse
。
Audits主要從5個方面來給網頁打分,最終會生成一個report:
我們知道許多網站都對Javascript代碼進行了壓縮,但這對開發者和學習者來說,讀起來很費勁,谷歌提供一個功能給我們,可以更好查看壓縮文件。
我們點擊下方的大括號{}
圖標,即可使用Pretty Print功能了
如果你知道文件名,則不必打開「Sources
」選項卡。只需按cmd/ctrl + p
,然後輸入你想查找的文件名,接下按下回車就 ok 了。
我們在桌面和移動設備上開發網站,通常我們傾向於最初的桌面體驗。 但是這與越來越多的用戶使用移動設備訪問網絡的趨勢相脫離。 爲了提高網站的用戶體驗,我們需要準確地知道網站在移動設備上的效果。 Chrome 開發者工具包里加入了手機模擬器特性,幫助我們測試:
對於大多數人而言,大多數時間只需要通過不同的屏幕尺寸和方向查看他們的網站即可。
我和阿里雲合作服務器,折扣價比較便宜:89/年,223/3年,比學生9.9每月還便宜,買了搭建個項目,熟悉技術棧比較香(老用戶用家人賬號買就好了,我用我媽的)推薦買三年的划算點,點擊本條就可以查看。
Icomo
1、F12
2、【ctrl+shift+p】
3、輸入「capture」
4、選擇以下任意
我們可以將擴展程序安裝到Chrome開發者控制檯。 許多框架都有自己的擴展名,以簡化其技術(Vue,Angular,React等)的開發。 這是Featured DevTools擴展的列表。
Coverage 是chrome開發者工具的一個新功能,從字面意思上可以知道它是可以用來檢測代碼在網站運行時有哪些js和css是已經在運行,而哪些js和css是還沒有用到的,如圖,這是我在打開csdn網頁時,所顯示的已運行和尚未運行的代碼情況。
如何打開caverage 前提:chrome瀏覽器的版本必須是59或以上,在ctrl+shift+i快速打開devtools,點擊右上角的... More tools 有個Coverage。
那這個新功能有什麼作用呢?
如上圖所示,最右邊顯示的是我們加載的css和js文件數量,紅色區域表示已運行的代碼,而青色表示已加載但未運行的代碼。可用來發現頁面中尚未用到的js 和 css代碼,你可以爲用戶只提供必要的代碼,這樣就可以提升頁面的性能。這對於找出可以進行拆分的腳本以及延遲加載非關鍵腳本來說非常有用。
Chrome 的開發工具會不斷更新,它會在What's New In DevTools 上發佈更新的視頻,我們可以時不是去看看,瞭解一些新出來的功能,這樣我們就能實時知道谷歌的一些好用的功能了。
原文地址:https://medium.com/better-programming/10-must-know-chrome-developer-tools-and-tricks-d03f75d10cc9
作者:FelDev
更多編程相關知識,請訪問:編程入門!!