Chrome開發者工具(Google devtool)基礎教學

Published by thewayeasy on 06/08/202006/08/2020

Chrome開發者工具(Google devtool)基礎教學

Chrome開發者工具,是chorme瀏覽器中一個對網頁前端開發極為實用的工具，它可以讓你在不轉變頁面，改變網頁情況下，修改內裡的代碼，包括css、html、javascript，它也能夠讓你實時測試網頁效能，加速網站，並且檢查javascript運作是否正常。由於其廣泛性及實用性，這是一個非常合適大家了解的工具。

以下將會用較顯淺的方式，為大家基本介紹內裡部分開發者工具。為了希望大家能夠對於內裡的內容更容易了解，我建議可以先先看（），讓你對於網頁架構有個初步了解。

開啟方法

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開發者工具有初步認識吧

Chrome開發者工具(Google devtool)基礎教學