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

Published by thewayeasy on

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

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

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

 

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

Chorme開發者工具

開啟方法

A右鍵單擊網站任意位置,然後點選點選「檢查」

Chrome開發者工具(Google devtool)基礎教學:開啟方法

B可以透過快捷鍵快速打開,windows的話在鍵盤上按ctrl+shift+cios則為cmd+shift+c

Device mode

Device mode Chrome開發者工具中一個可以要來模擬手機或平板電腦的工具,幫助你的網站能夠更切合手機或平板電腦需要。

功能主要如下:

-模擬設備畫面

-模擬網頁在不同網速和不同cpu占用率下開啟

-模擬定位系統

模擬設備畫面

點擊右邊視窗裏,左上角的 按鈕,此時左邊就會出現模擬設備的畫面

Chrome開發者工具(Google devtool)基礎教學:device mode | 模擬設備畫面
基本功能

調節模擬設備的大小

這裡有四個方法,調節模擬設備的大小

1-可以透過拖動欄位的方法調整

2-可以透過更改數值作調整,前面為闊,後面為高

3-可以透過點擊responsive,點選想模擬的特定設備

4-可以點選上邊欄位,以模擬不同裝置大小

想有更多模擬大小選項可以點選右邊的三點,然後選擇show media queries,之後跟之前一樣只需要點選上邊的欄位就可以了

Chrome開發者工具(Google devtool)基礎教學:device mode | 調節模擬設備的大小1-3礎教學:device mode | 調節模擬設備的大小
Chrome開發者工具(Google devtool)基礎教學:device mode | 調節模擬設備的大小4礎教學:device mode | 調節模擬設備的大小

旋轉視窗

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

Chrome開發者工具(Google devtool)基礎教學:device mode | 旋轉視窗

模擬設備框架

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

Chrome開發者工具(Google devtool)基礎教學:device mode |模擬設備框架

顯示標尺

Chrome開發者工具(Google devtool)基礎教學:device mode |顯示標尺

這個功能能夠有效地幫助你測量尺寸,協助您調整圖片文字等到合適大小,亦有助你使用css,調節位置想要打開標尺的話,可以點選右邊的三點,然後選擇ruler,注意,內裡使用的單位為px

模擬網頁在不同網速和不同cpu下開啟

點選online,然後選擇Mid-tier mobile Low-end mobile

Mid-tier mobile 可以模擬快速3g網絡,並且把cpu性能降低四倍

Low-end mobile可以模擬慢速4g網絡,並且把cpu性能降低六倍

注意這裡是透過降低你電腦或平板電腦的cpu來模擬手機cpu效能,所以可能會和實際情況有差異

Chrome開發者工具(Google devtool)基礎教學:device mode |模擬網頁在不同網速和不同cpu下開啟

若想獨立修改cpu性能的話可以參看:Performance

若想獨立修改網絡速度的話可以在Network中的online調整

模擬定位系統

若網站是需要定位用家位置,那麼這個工具能夠幫助到你。點選右邊視窗的三點,點選more tools,之後再點選sensor,然後把下面欄位拉上來,在location裡,可以透過點擊location右邊的方格選擇坐標其中一個預設,或在下方欄位輸入坐標來進行模擬手機定位

Chrome開發者工具(Google devtool)基礎教學:device mode |模擬定位系統

Elements

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

Chrome開發者工具(Google devtool)基礎教學:Elements| 組成部分
Chrome開發者工具(Google devtool)基礎教學:Elements| 選取選取特定位置
Html部分

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

Chrome開發者工具(Google devtool)基礎教學:Elements| HTML

各選項解釋:

Edit, Add and Copy:允許您進行html的修改和複製,亦可以透過在想修改的內容兩下,以進行修改

Hide and Delete: 可以讓點選的項目暫時消失

Expand and Collapse: 讓點選的項目顯示更多,亦可透過點擊向下和向右的三角形來打開和收回

Scroll into View:讓畫面到你點選的部分

Set Breakpoints: 選擇後,當系統運行到你點選的地方時,他會讓系統不再讀取接下來的javascript

css部分

左上有六個項目,分別為stylesEvent ListenersDOM BreakpointsProperties

分別用途如下:

Styles:

修改css的地方,記住第一個的element.style只是為html裏添加style,與css無關。另外,這個版面是根據css的,所以通常越上,代表和你選取的項目越接近,但請務必先滑向{出面的文字,以檢查是否你想改變的項目。

還有,當滑鼠劃向每格的右下角是,會出現5個圖標,由左至右分別為:

-添加文字陰影

Chrome開發者工具(Google devtool)基礎教學:Elements| Styles |添加文字陰影

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

Chrome開發者工具(Google devtool)基礎教學:Elements| Styles |為選取項目裏的邊框添加陰影

-改變文字顏色

Chrome開發者工具(Google devtool)基礎教學:Elements| Styles |改變文字顏色

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

Chrome開發者工具(Google devtool)基礎教學:Elements| Styles |為選取項目裏的背景添加背景色

另新開一行作編輯

Event Listeners:

要來查看javascriptevent listener 的地方。所謂,event listener, 其實就是一個javascript系統,會根據用家所作出的操作,來作出反應,如滑鼠點擊、滑鼠移動,就是其中的簡單例子

DOM breakpoint:

查看在剛介紹了的html版面中,設定了的javascript停止位。

Computed:

可以查看Box model 

Chrome開發者工具(Google devtool)基礎教學:Elements| Styles |computed | box-model

關於box model的基本解釋:

其實每個項目都是由一個一個格去形成,所以當你用右邊視窗裡的鼠標圖案點擊項目時,無論是圖片還是字都會顯示一個一個的長方格。box model 就是要來顯示這些格裏內容,邊框等部分,所佔的大小。

中心點:就是顯示出來的文字或圖片,在這裡翻譯就是它的中心點

padding:border和中心點之間的空間,就是padding

border:就是一個格的邊框

margin:邊框出面的空間,這個數字越大,格與格之間的距離就會越大。

另外在Computed也可以整體查看選取項目的基本資訊,如字體、字的粗度、行距等等。

Accessibility :可以知道電腦上載網站的流程

Network

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

只需要載入網站,並打開了chrome開發者工具,系統就會自動幫你記錄載入情況。此外,亦可透過crtl r cmd  r ,協助chrome開發者工具讀取網頁。

工具由左至右圖示的大概用途

紅色圓圈,點擊可停止記錄,再點擊則重新記錄

禁止圖示:可清除記錄

漏斗圖示:可顯示或取消顯示過濾用的工具欄

preserve log 不讀取於console裏輸入的項目

Disable Cache:  停止使用快取

online: 可以用來模擬不同的網絡速度,亦包括離線狀態

下面版面的大概介紹:
name:檔案名稱
type:檔案種類
idnicator: 顯示包括域名,檔案位置及檔案名稱
size:檔案大小
time:系統送出要那檔案的信息,到系統真正接受到檔案的時間
waterfall:將time圖像化地顯示出來,方便你針對情況作修改,藍色:下載檔案的時間,綠色:等待的時間,輕滑過去可以看到更多資訊

Chrome開發者工具(Google devtool)基礎教學:Network| waterfall |更多資訊

Performance

相比network,這裡較著重於網頁載入情況,以及過程中所佔用的cpu 。想調校cpu速度,可以在設定裡單獨調節。

要測試網頁的performance:只需要點選reload就可以了。

圖表基本解釋:
Chrome開發者工具(Google devtool)基礎教學:Performance | 圖表基本解釋
上方圖表

綠色部份代表frames

紫黃色部份代表著cpu使用率,他的總結可以在下方的圖表看到

黃色的表示對js的操作所佔內存

紫色表示對css操作所佔的內存

灰色表示其他操作所佔的內存

藍色表示對html操作所佔的內存

Frames

Frames= FPS=畫面每秒重新整理多少次,通常設備屏幕的重新整理頻率是60 FPS,超過的話,則有可能產生卡頓現象。通常,沒有優化妥善的javascriptcsshtml,以及版面佈局,都會導致這種情況出現

縮圖

縮圖為網站繪製的情況,頁面繪製速度越快,代表客戶能夠越快就能夠看到網站內容,這對網頁速度評分有極重要影響。

Bottom-up

根據花費時間,去列出各項目

Chrome開發者工具(Google devtool)基礎教學:Performance | 圖表基本解釋| bottom-up
Call-tree

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

Chrome開發者工具(Google devtool)基礎教學:Performance | 圖表基本解釋| call-tree

總結

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

你也許會喜歡:

0 Comments

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。