Pro Yearly is on sale from $80 to $50! »

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

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

80c9848f1aca614f619a9d974b852dc0?s=128

Yucheng Wang

June 30, 2019
Tweet

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!