建站
咨詢
售后
建站咨詢
新聞中心
1. 模擬慢速網(wǎng)絡和慢速設備
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,荊州企業(yè)網(wǎng)站建設,荊州品牌網(wǎng)站建設,網(wǎng)站定制,荊州網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,荊州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
我們可能習慣了在城市的網(wǎng)速，那是杠杠的，并不意味網(wǎng)速在中國哪個都一樣的，在一些偏遠地方，網(wǎng)速依然慢的可憐，所以有時候我們所做的產(chǎn)品是需要考慮網(wǎng)速慢的情況的，那怎么模擬呢?
打開谷歌瀏覽器的performance選項卡，然后單擊右上角的齒輪圖標就可以看到 Newwork 和CPU的模擬情況。
2. 顏色選擇器
單擊表示顏色的小方塊，彈出顏色選擇器。
啟用顏色選擇器后，可以將網(wǎng)頁懸停并使用顏色選擇器來獲取該像素的顏色。
彈出顏色選擇器的小方塊還有快捷鍵按住Shift并單擊以更改顏色格式。
3. Audits
Audits(審計),這個功能其實一直存在，只不過在chrome 60之后，發(fā)生了翻天覆地的變化：引入了Google開源的另外一個項目：LightHouse。
Audits主要從5個方面來給網(wǎng)頁打分，最終會生成一個report:
4.Pretty Print(顯示可讀代碼)
我們知道許多網(wǎng)站都對Javascript代碼進行了壓縮，但這對開發(fā)者和學習者來說，讀起來很費勁，谷歌提供一個功能給我們，可以更好查看壓縮文件。
我們點擊下方的大括號{｝圖標，即可使用Pretty Print功能了
5.快速文件切換器
如果你知道文件名，則不必打開“Sources”選項卡。只需按cmd/ctrl + p，然后輸入你想查找的文件名，接下按下回車就 ok 了。
6. 響應模式
我們在桌面和移動設備上開發(fā)網(wǎng)站，通常我們傾向于最初的桌面體驗。但是這與越來越多的用戶使用移動設備訪問網(wǎng)絡的趨勢相脫離。為了提高網(wǎng)站的用戶體驗，我們需要準確地知道網(wǎng)站在移動設備上的效果。Chrome 開發(fā)者工具包里加入了手機模擬器特性，幫助我們測試：
對于大多數(shù)人而言，大多數(shù)時間只需要通過不同的屏幕尺寸和方向查看他們的網(wǎng)站即可。
7.屏幕截圖
1、F12
2、【ctrl+shift+p】
3、輸入“capture”
4、選擇以下任意
capture full size screenshot”【整個網(wǎng)頁】
capture node screenshot”【節(jié)點網(wǎng)頁】
“capture screenshot”【當前屏幕】
8. Extensions
我們可以將擴展程序安裝到Chrome開發(fā)者控制臺。許多框架都有自己的擴展名，以簡化其技術(Vue，Angular，React等)的開發(fā)。[這是Featured DevTools擴展的列表][1]。
9. Coverage
Coverage 是chrome開發(fā)者工具的一個新功能，從字面意思上可以知道它是可以用來檢測代碼在網(wǎng)站運行時有哪些js和css是已經(jīng)在運行，而哪些js和css是還沒有用到的，如圖，這是我在打開csdn網(wǎng)頁時，所顯示的已運行和尚未運行的代碼情況。
如何打開caverage 前提：chrome瀏覽器的版本必須是59或以上，在ctrl+shift+i快速打開devtools，點擊右上角的… More tools 有個Coverage。
那這個新功能有什么作用呢?
如上圖所示，最右邊顯示的是我們加載的css和js文件數(shù)量，紅色區(qū)域表示已運行的代碼，而青色表示已加載但未運行的代碼?？捎脕戆l(fā)現(xiàn)頁面中尚未用到的js 和 css代碼，你可以為用戶只提供必要的代碼，這樣就可以提升頁面的性能。這對于找出可以進行拆分的腳本以及延遲加載非關鍵腳本來說非常有用。
10. 實時跟進新功能
Chrome 的開發(fā)工具會不斷更新，它會在[What's New In DevTools][2] 上發(fā)布更新的視頻，我們可以時不時去看看，了解一些新出來的功能，這樣我們就能實時知道谷歌的一些好用的功能了。
當前文章：10個必須知道的Chrome開發(fā)工具和技巧
轉(zhuǎn)載源于：http://fisionsoft.com.cn/article/dpeshpd.html
