Slide 1
Slide 1 text
Chrome Developer Tools
基本介紹
王昱程 Stanley
WordPress ⼩小聚
Slide 2
Slide 2 text
今天的分享適合誰
• 新⼿手，想要針對網站外觀做⼀一些基本的客製化
• 前端開發⼈人員
Slide 3
Slide 3 text
網⾴頁的組成
HTML：結構和內容
CSS：樣式
HTML CSS 網⾴頁
Slide 4
Slide 4 text
CSS(Cascading Style Sheets)
選擇器(Selector) 屬性 值
Slide 5
Slide 5 text
CSS(Cascading Style Sheets)
class name
Slide 6
Slide 6 text
CSS(Cascading Style Sheets)
Slide 7
Slide 7 text
透過佈景主題或外掛提供的功能去調整
外觀->⾃自訂
如何改變網站的外觀(1/3)
Slide 8
Slide 8 text
透過⾃自訂中的新增附加的 css
外觀->⾃自訂->附加的 CSS
如何改變網站的外觀(2/3)
Slide 9
Slide 9 text
直接修改 style.css
如何改變網站的外觀(3/3)
建議在⼦子主題(child theme)中修改
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
HTML 標籤是什什麼？
CSS 選擇器是什什麼？
Slide 12
Slide 12 text
在網⾴頁上要檢視的元件上按
右鍵->檢查(inspect)
如何開啟開發者⼯工具
Slide 13
Slide 13 text
從 chrome 的主選單中開啟
如何開啟開發者⼯工具
Slide 14
Slide 14 text
快捷鍵
Cmd+Option+I (Mac)
Control+Shift+I (Win)
如何開啟開發者⼯工具
Slide 15
Slide 15 text
常⽤用的三個⾯面板
Elements
Console
Network
Slide 16
Slide 16 text
在 console 中檢視錯誤
Slide 17
Slide 17 text
在 Network 中網站載入狀狀況
Slide 18
Slide 18 text
Command Menu
Control+Shift+P (Win)
Command+Shift+P (Mac)
開啟⽅方法1 開啟⽅方法2：快捷鍵
幾乎所有設定的啟⽤用或關閉，都可以
透過 Command Menu 來來找到！
https://developers.google.com/web/tools/chrome-devtools/command-menu/
Slide 19
Slide 19 text
Screenshot
將⽬目前螢幕中的網⾴頁截圖
Slide 20
Slide 20 text
show device frame
在 device mode 開啟的狀狀態下，可以檢視網⾴頁在不同裝置或解析度下的呈現結果
透過開啟顯⽰示 device frame，可以在部分⾏行行動裝置顯⽰示外框
https://developers.google.com/web/tools/chrome-devtools/device-mode/?hl=zh-tw
Slide 21
Slide 21 text
如何顯⽰示 device frame
在 Command Menu 中搜尋 device frame，點擊 Show device frame 即可開啟
Slide 22
Slide 22 text
在 device frame 開啟的狀狀態下
於 Command Menu 中執⾏行行
Capture Screenshot，
即可下載帶有 device frame 的螢幕截圖
注意：在這樣的模式下如果執⾏行行
Capture full size screenshot，
是不會有 device frame 的喔！
畢竟⾏行行動裝置還是有他的長度嘛～
Slide 23
Slide 23 text
截圖下載的圖檔
Slide 24
Slide 24 text
Select Color
Slide 25
Slide 25 text
copy node to css selector
Slide 26
Slide 26 text
search element by css selector
cmd+F (Mac)
ctrl+F (Win)
Slide 27
Slide 27 text
toggle element state
Slide 28
Slide 28 text
使⽤用 CSS preprocessor(預處理理代碼)
1.常⾒見見的有：Less、Sass
2.優點：可使⽤用變數、可做數學運算、可使⽤用巢狀狀結構等等
3.必須要編譯成CSS，瀏覽器才看得懂
4.Source maps：讓瀏覽器知道某個樣式是在哪⼀一個檔案中
Slide 29
Slide 29 text
使⽤用 CSS preprocessor(預處理理代碼)
1.常⾒見見的有：Less、Sass
2.優點：可使⽤用變數、可做數學運算、可使⽤用巢狀狀結構，可
以將 CSS 分成多個檔案，⽅方便便編輯。
3.必須要編譯成CSS，瀏覽器才看得懂
4.Source maps：讓瀏覽器知道某個樣式是在哪⼀一個原始檔
案中
有開啟 Source maps
沒有開啟 Source maps
Slide 30
Slide 30 text
如何開啟 Source Maps
⽅方法1: 在 DevTools 開啟的狀狀態下，開啟 Settings ⾴頁⾯面，並於 Preferences 設定找到
Enable CSS source maps，將它啟⽤用。
Slide 31
Slide 31 text
如何開啟 Source Maps
⽅方法2: 在 Command Menu 中搜尋 enable css source map
(只要輸入部分關鍵字即可)
Slide 32
Slide 32 text
Workspace
將本機電腦中的資料夾加入 Workspace，
可以在 DevTools 中編輯 CSS 並直接儲存到本機上的檔案！
https://developers.google.com/web/tools/setup/setup-workflow?hl=zh-tw
Slide 33
Slide 33 text
Thank You!