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
950
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
Yucheng Wang
June 30, 2019
Tweet
Share
More Decks by Yucheng Wang
See All by Yucheng Wang
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
ucheng
0
360
使用 Gutenberg 和 ACF Block 重新建置網站
ucheng
0
170
使用 ManageWP 來管理網站
ucheng
0
340
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
250
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
350
基本網站安全防護
ucheng
1
110
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
460
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
170
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
ucheng
1
240
Other Decks in Technology
See All in Technology
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
260
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
270
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
200
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
290
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
610
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.7k
AIエージェントを支える設計
tkikuchi1002
11
2.3k
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
200
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
180
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
150
生成AIによる情報システムへのインパクト
taka_aki
1
200
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
150
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How to train your dragon (web standard)
notwaldorf
96
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Raft: Consensus for Rubyists
vanstee
140
7k
Designing Experiences People Love
moore
142
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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!