Chrome開發者工具(Google devtool)基礎教學
Chrome開發者工具,是chorme瀏覽器中一個 對網頁前端開發極為實用的工具,它可以讓你在不轉變頁面,改變網頁情況下,修改內裡的代碼,包括css、html、javascript,它也能夠讓你實時測試網頁效能,加速網站,並且檢查javascript運作是否正常。由於其廣泛性及實用性,這是一個非常合適大家了解的工具。
以下將會用較顯淺的方式,為大家基本介紹內裡部分開發者工具。為了希望大家能夠對於內裡的內容更容易了解,我建議可以先先看(),讓你對於網頁架構有個初步了解。
Chorme開發者工具
開啟方法
A右鍵單擊網站任意位置,然後點選點選「檢查」

B可以透過快捷鍵快速打開,windows的話在鍵盤上按ctrl+shift+c, ios則為cmd+shift+c
Device mode
Device mode 是Chrome開發者工具中一個可以要來模擬手機或平板電腦的工具,幫助你的網站能夠更切合手機或平板電腦需要。
功能主要如下:
-模擬設備畫面
-模擬網頁在不同網速和不同cpu占用率下開啟
-模擬定位系統
模擬設備畫面
點擊右邊視窗裏,左上角的 按鈕,此時左邊就會出現模擬設備的畫面

基本功能
調節模擬設備的大小
這裡有四個方法,調節模擬設備的大小
1-可以透過拖動欄位的方法調整
2-可以透過更改數值作調整,前面為闊,後面為高
3-可以透過點擊responsive,點選想模擬的特定設備
4-可以點選上邊欄位,以模擬不同裝置大小
想有更多模擬大小選項可以點選右邊的三點,然後選擇show media queries,之後跟之前一樣只需要點選上邊的欄位就可以了


旋轉視窗
這裡也可以將視窗旋轉,只需要點選旋轉電話的圖案就可以了

模擬設備框架
想要模擬設備框架的話可以點選右邊的三點,然後選擇 Show device frame,這個需要你選擇的設備本身有框架才能夠顯示

顯示標尺

這個功能能夠有效地幫助你測量尺寸,協助您調整圖片文字等到合適大小,亦有助你使用css,調節位置想要打開標尺的話,可以點選右邊的三點,然後選擇ruler,注意,內裡使用的單位為px
模擬網頁在不同網速和不同cpu下開啟
點選online,然後選擇Mid-tier mobile 或 Low-end mobile。
Mid-tier mobile 可以模擬快速3g網絡,並且把cpu性能降低四倍
Low-end mobile可以模擬慢速4g網絡,並且把cpu性能降低六倍
注意這裡是透過降低你電腦或平板電腦的cpu來模擬手機cpu效能,所以可能會和實際情況有差異

若想獨立修改cpu性能的話可以參看:Performance
若想獨立修改網絡速度的話可以在Network中的online調整
模擬定位系統
若網站是需要定位用家位置,那麼這個工具能夠幫助到你。點選右邊視窗的三點,點選more tools,之後再點選sensor,然後把下面欄位拉上來,在location裡,可以透過點擊location右邊的方格選擇坐標,其中一個預設,或在下方欄位輸入坐標,來進行模擬手機定位

Elements
Elements版面是由兩個部分組成,分別為左邊的Html以及右邊的css。我們可以透過右邊視窗裡的鼠標檔案,然後滑向並點擊需要更改的部分,以進行修改。


Html部分
我們可以隨意更改後的html裏的內容,而且不會儲存。只需要到希望更改的部分,然後點選右鍵,就會出現以下選項:

各選項解釋:
Edit, Add and Copy:允許您進行html的修改和複製,亦可以透過在想修改的內容兩下,以進行修改
Hide and Delete: 可以讓點選的項目暫時消失
Expand and Collapse: 讓點選的項目顯示更多,亦可透過點擊向下和向右的三角形來打開和收回
Scroll into View:讓畫面到你點選的部分
Set Breakpoints: 選擇後,當系統運行到你點選的地方時,他會讓系統不再讀取接下來的javascript
css部分
左上有六個項目,分別為styles,Event Listeners,DOM Breakpoints,Properties,
分別用途如下:
Styles:
修改css的地方,記住第一個的element.style只是為html裏添加style,與css無關。另外,這個版面是根據css的,所以通常越上,代表和你選取的項目越接近,但請務必先滑向{出面的文字,以檢查是否你想改變的項目。
還有,當滑鼠劃向每格的右下角是,會出現5個圖標,由左至右分別為:
-添加文字陰影

-為選取項目裏的邊框添加陰影

-改變文字顏色

-為選取項目裏的背景添加背景色

–另新開一行作編輯
Event Listeners:
要來查看javascript裏event listener 的地方。所謂,event listener, 其實就是一個javascript系統,會根據用家所作出的操作,來作出反應,如滑鼠點擊、滑鼠移動,就是其中的簡單例子
DOM breakpoint:
查看在剛介紹了的html版面中,設定了的javascript停止位。
Computed:
可以查看Box model

關於box model的基本解釋:
其實每個項目都是由一個一個格去形成,所以當你用右邊視窗裡的鼠標圖案點擊項目時,無論是圖片還是字都會顯示一個一個的長方格。box model 就是要來顯示這些格裏內容,邊框等部分,所佔的大小。
中心點:就是顯示出來的文字或圖片,在這裡翻譯就是它的中心點
padding:border和中心點之間的空間,就是padding
border:就是一個格的邊框
margin:邊框出面的空間,這個數字越大,格與格之間的距離就會越大。
另外在Computed也可以整體查看選取項目的基本資訊,如字體、字的粗度、行距等等。
Accessibility :可以知道電腦上載網站的流程
Network

只需要載入網站,並打開了chrome開發者工具,系統就會自動幫你記錄載入情況。此外,亦可透過crtl r 或cmd r ,協助chrome開發者工具讀取網頁。
工具由左至右圖示的大概用途:
紅色圓圈,點擊可停止記錄,再點擊則重新記錄
禁止圖示:可清除記錄
漏斗圖示:可顯示或取消顯示過濾用的工具欄
preserve log: 不讀取於console裏輸入的項目
Disable Cache: 停止使用快取
online: 可以用來模擬不同的網絡速度,亦包括離線狀態
下面版面的大概介紹:
name:檔案名稱
type:檔案種類
idnicator: 顯示包括域名,檔案位置及檔案名稱
size:檔案大小
time:系統送出要那檔案的信息,到系統真正接受到檔案的時間
waterfall:將time圖像化地顯示出來,方便你針對情況作修改,藍色:下載檔案的時間,綠色:等待的時間,輕滑過去可以看到更多資訊

Performance
相比network,這裡較著重於網頁載入情況,以及過程中所佔用的cpu 。想調校cpu速度,可以在設定裡單獨調節。
要測試網頁的performance:只需要點選reload就可以了。
圖表基本解釋:

上方圖表
綠色部份代表frames
紫黃色部份代表著cpu使用率,他的總結可以在下方的圖表看到
黃色的表示對js的操作所佔內存
紫色表示對css操作所佔的內存
灰色表示其他操作所佔的內存
藍色表示對html操作所佔的內存
Frames
Frames= FPS=畫面每秒重新整理多少次,通常設備屏幕的重新整理頻率是60 FPS,超過的話,則有可能產生卡頓現象。通常,沒有優化妥善的javascript,css,html,以及版面佈局,都會導致這種情況出現
縮圖
縮圖為網站繪製的情況,頁面繪製速度越快,代表客戶能夠越快就能夠看到網站內容,這對網頁速度評分有極重要影響。
Bottom-up
根據花費時間,去列出各項目

Call-tree
和bottom-up基本相同,但資料更仔細

總結
當然,google開發者工具比上述所列的還要多得多,他的功能也被你想像中要大得多。希望這篇文章,能夠幫助到你們,對google開發者工具有初步認識吧
你也許會喜歡:



【WordPress免費主題推介】5個最值得使用的wordpress免費主題
【woredpress免費主題推介】 5個最值得使用的woredpre
0 Comments