Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
Search
Yucheng Wang
June 30, 2019
Technology
0
920
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
Yucheng Wang
June 30, 2019
Tweet
Share
More Decks by Yucheng Wang
See All by Yucheng Wang
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
ucheng
0
320
使用 Gutenberg 和 ACF Block 重新建置網站
ucheng
0
130
使用 ManageWP 來管理網站
ucheng
0
310
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
220
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
330
基本網站安全防護
ucheng
1
93
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
410
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
140
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
ucheng
1
200
Other Decks in Technology
See All in Technology
30分でわかるデータ分析者のためのディメンショナルモデリング #datatechjp / 20250120
kazaneya
PRO
15
3.9k
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
28
25k
ZOZOTOWN の推薦における KPI モニタリング/KPI monitoring for ZOZOTOWN recommendations
rayuron
1
860
.NET 9 のパフォーマンス改善
nenonaninu
0
2.2k
サーバーなしでWordPress運用、できますよ。
sogaoh
PRO
0
170
3年でバックエンドエンジニアが5倍に増えても破綻しなかったアーキテクチャ そして、これから / Software architecture that scales even with a 5x increase in backend engineers in 3 years
euglena1215
11
4.3k
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
3
1.6k
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
830
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
33k
「完全に理解したTalk」完全に理解した
segavvy
1
270
Agentic RAG with LangGraph
atsushii
0
130
エンジニアリングマネージャー視点での、自律的なスケーリングを実現するFASTという選択肢 / RSGT2025
yoshikiiida
4
2.7k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Done Done
chrislema
182
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
How GitHub (no longer) Works
holman
312
140k
Producing Creativity
orderedlist
PRO
343
39k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
The Cult of Friendly URLs
andyhume
78
6.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Visualization
eitanlees
146
15k
Navigating Team Friction
lara
183
15k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
171
50k
Transcript
Chrome Developer Tools 基本介紹 王昱程 Stanley WordPress ⼩小聚
今天的分享適合誰 • 新⼿手,想要針對網站外觀做⼀一些基本的客製化 • 前端開發⼈人員
網⾴頁的組成 HTML:結構和內容 CSS:樣式 HTML CSS 網⾴頁
CSS(Cascading Style Sheets) 選擇器(Selector) 屬性 值
CSS(Cascading Style Sheets) class name
CSS(Cascading Style Sheets)
透過佈景主題或外掛提供的功能去調整 外觀->⾃自訂 如何改變網站的外觀(1/3)
透過⾃自訂中的新增附加的 css 外觀->⾃自訂->附加的 CSS 如何改變網站的外觀(2/3)
直接修改 style.css 如何改變網站的外觀(3/3) 建議在⼦子主題(child theme)中修改
None
HTML 標籤是什什麼? CSS 選擇器是什什麼?
在網⾴頁上要檢視的元件上按 右鍵->檢查(inspect) 如何開啟開發者⼯工具
從 chrome 的主選單中開啟 如何開啟開發者⼯工具
快捷鍵 Cmd+Option+I (Mac) Control+Shift+I (Win) 如何開啟開發者⼯工具
常⽤用的三個⾯面板 Elements Console Network
在 console 中檢視錯誤
在 Network 中網站載入狀狀況
Command Menu Control+Shift+P (Win) Command+Shift+P (Mac) 開啟⽅方法1 開啟⽅方法2:快捷鍵 幾乎所有設定的啟⽤用或關閉,都可以 透過
Command Menu 來來找到! https://developers.google.com/web/tools/chrome-devtools/command-menu/
Screenshot 將⽬目前螢幕中的網⾴頁截圖
show device frame 在 device mode 開啟的狀狀態下,可以檢視網⾴頁在不同裝置或解析度下的呈現結果 透過開啟顯⽰示 device frame,可以在部分⾏行行動裝置顯⽰示外框
https://developers.google.com/web/tools/chrome-devtools/device-mode/?hl=zh-tw
如何顯⽰示 device frame 在 Command Menu 中搜尋 device frame,點擊 Show
device frame 即可開啟
在 device frame 開啟的狀狀態下 於 Command Menu 中執⾏行行 Capture Screenshot,
即可下載帶有 device frame 的螢幕截圖 注意:在這樣的模式下如果執⾏行行 Capture full size screenshot, 是不會有 device frame 的喔! 畢竟⾏行行動裝置還是有他的長度嘛~
截圖下載的圖檔
Select Color
copy node to css selector
search element by css selector cmd+F (Mac) ctrl+F (Win)
toggle element state
使⽤用 CSS preprocessor(預處理理代碼) 1.常⾒見見的有:Less、Sass 2.優點:可使⽤用變數、可做數學運算、可使⽤用巢狀狀結構等等 3.必須要編譯成CSS,瀏覽器才看得懂 4.Source maps:讓瀏覽器知道某個樣式是在哪⼀一個檔案中
使⽤用 CSS preprocessor(預處理理代碼) 1.常⾒見見的有:Less、Sass 2.優點:可使⽤用變數、可做數學運算、可使⽤用巢狀狀結構,可 以將 CSS 分成多個檔案,⽅方便便編輯。 3.必須要編譯成CSS,瀏覽器才看得懂 4.Source
maps:讓瀏覽器知道某個樣式是在哪⼀一個原始檔 案中 有開啟 Source maps 沒有開啟 Source maps
如何開啟 Source Maps ⽅方法1: 在 DevTools 開啟的狀狀態下,開啟 Settings ⾴頁⾯面,並於 Preferences
設定找到 Enable CSS source maps,將它啟⽤用。
如何開啟 Source Maps ⽅方法2: 在 Command Menu 中搜尋 enable css
source map (只要輸入部分關鍵字即可)
Workspace 將本機電腦中的資料夾加入 Workspace, 可以在 DevTools 中編輯 CSS 並直接儲存到本機上的檔案! https://developers.google.com/web/tools/setup/setup-workflow?hl=zh-tw
Thank You!