網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹

Transcript

1. Chrome Developer Tools 基本介紹 王昱程 Stanley WordPress ⼩小聚

2. 今天的分享適合誰 • 新⼿手，想要針對網站外觀做⼀一些基本的客製化 • 前端開發⼈人員

3. 網⾴頁的組成 HTML：結構和內容 CSS：樣式 HTML CSS 網⾴頁

4. CSS(Cascading Style Sheets) 選擇器(Selector) 屬性 值

5. CSS(Cascading Style Sheets) class name

6. CSS(Cascading Style Sheets)

7. 透過佈景主題或外掛提供的功能去調整 外觀->⾃自訂 如何改變網站的外觀(1/3)

8. 透過⾃自訂中的新增附加的 css 外觀->⾃自訂->附加的 CSS 如何改變網站的外觀(2/3)

9. 直接修改 style.css 如何改變網站的外觀(3/3) 建議在⼦子主題(child theme)中修改

10. None

11. HTML 標籤是什什麼？ CSS 選擇器是什什麼？

12. 在網⾴頁上要檢視的元件上按 右鍵->檢查(inspect) 如何開啟開發者⼯工具

13. 從 chrome 的主選單中開啟 如何開啟開發者⼯工具

14. 快捷鍵
 Cmd+Option+I (Mac)
 Control+Shift+I (Win) 如何開啟開發者⼯工具

15. 常⽤用的三個⾯面板 Elements Console Network

16. 在 console 中檢視錯誤

17. 在 Network 中網站載入狀狀況

18. Command Menu Control+Shift+P (Win) Command+Shift+P (Mac) 開啟⽅方法1 開啟⽅方法2：快捷鍵 幾乎所有設定的啟⽤用或關閉，都可以 透過

    Command Menu 來來找到！ https://developers.google.com/web/tools/chrome-devtools/command-menu/

19. Screenshot 將⽬目前螢幕中的網⾴頁截圖

20. show device frame 在 device mode 開啟的狀狀態下，可以檢視網⾴頁在不同裝置或解析度下的呈現結果 透過開啟顯⽰示 device frame，可以在部分⾏行行動裝置顯⽰示外框

    https://developers.google.com/web/tools/chrome-devtools/device-mode/?hl=zh-tw

21. 如何顯⽰示 device frame 在 Command Menu 中搜尋 device frame，點擊 Show

    device frame 即可開啟

22. 在 device frame 開啟的狀狀態下 於 Command Menu 中執⾏行行 Capture Screenshot，

    即可下載帶有 device frame 的螢幕截圖 注意：在這樣的模式下如果執⾏行行 Capture full size screenshot， 是不會有 device frame 的喔！ 畢竟⾏行行動裝置還是有他的長度嘛～

23. 截圖下載的圖檔

24. Select Color

25. copy node to css selector

26. search element by css selector cmd+F (Mac) ctrl+F (Win)

27. toggle element state

28. 使⽤用 CSS preprocessor(預處理理代碼) 1.常⾒見見的有：Less、Sass
 2.優點：可使⽤用變數、可做數學運算、可使⽤用巢狀狀結構等等
 3.必須要編譯成CSS，瀏覽器才看得懂
 4.Source maps：讓瀏覽器知道某個樣式是在哪⼀一個檔案中

29. 使⽤用 CSS preprocessor(預處理理代碼) 1.常⾒見見的有：Less、Sass
 2.優點：可使⽤用變數、可做數學運算、可使⽤用巢狀狀結構，可 以將 CSS 分成多個檔案，⽅方便便編輯。
 3.必須要編譯成CSS，瀏覽器才看得懂
 4.Source

    maps：讓瀏覽器知道某個樣式是在哪⼀一個原始檔 案中 有開啟 Source maps 沒有開啟 Source maps

30. 如何開啟 Source Maps ⽅方法1: 在 DevTools 開啟的狀狀態下，開啟 Settings ⾴頁⾯面，並於 Preferences

    設定找到 Enable CSS source maps，將它啟⽤用。

31. 如何開啟 Source Maps ⽅方法2: 在 Command Menu 中搜尋 enable css

    source map (只要輸入部分關鍵字即可)

32. Workspace 將本機電腦中的資料夾加入 Workspace， 可以在 DevTools 中編輯 CSS 並直接儲存到本機上的檔案！ https://developers.google.com/web/tools/setup/setup-workflow?hl=zh-tw

33. Thank You!