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
330
使用 Gutenberg 和 ACF Block 重新建置網站
ucheng
0
140
使用 ManageWP 來管理網站
ucheng
0
310
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
230
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
330
基本網站安全防護
ucheng
1
95
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
410
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
150
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
ucheng
1
200
Other Decks in Technology
See All in Technology
MCP server を作って Claude Desktop アプリから kintone へアクセスすると楽しい
r3_yamauchi
PRO
1
120
Postman Vaultを使った秘密情報の安全な管理
nagix
3
110
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.3k
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
200
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
190
Tokyo RubyKaigi 12 - Scaling Ruby at GitHub
jhawthorn
2
210
ChatGPTを使ったブログ執筆と校正の実践テクニック/登壇資料(井田 献一朗)
hacobu
1
160
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
120k
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
4
290
横断SREの立ち上げと、AWSセキュリティへの取り組みの軌跡
rvirus0817
3
4.5k
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
130
企業テックブログにおける執筆ネタの考え方・見つけ方・広げ方 / How to Think of, Find, and Expand Writing Topics for Corporate Tech Blogs
honyanya
0
800
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
380
The World Runs on Bad Software
bkeepers
PRO
67
11k
How to train your dragon (web standard)
notwaldorf
89
5.8k
A designer walks into a library…
pauljervisheath
205
24k
Visualization
eitanlees
146
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
A Philosophy of Restraint
colly
203
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
520
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
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!