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
900
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
Yucheng Wang
June 30, 2019
Tweet
Share
More Decks by Yucheng Wang
See All by Yucheng Wang
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
ucheng
0
310
使用 Gutenberg 和 ACF Block 重新建置網站
ucheng
0
110
使用 ManageWP 來管理網站
ucheng
0
290
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
220
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
320
基本網站安全防護
ucheng
1
86
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
390
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
130
如何正確備份與搬移網站資料(使用 Duplicator 與 WP Migrate DB Pro)
ucheng
1
180
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
54k
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
4
730
普通の Web エンジニアのための様相論理入門 #yapcjapan / YAPC Hakodate 2024
ytaka23
5
1.3k
VS CodeでF1〜12キーつかってますか? / Do you use the F1-12 keys in VS Code?
74th
2
290
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
13
1.8k
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
4
160
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
210
kube-vipとkube-proxy置き換えCiliumを積んだ究極のK3sクラスタを建てる
logica0419
4
210
山手線一周のパフォーマンス改善
suzukahr
0
150
Product Utilization of Large Language Models Starting Today
ymatsuwitter
3
1.3k
tenntennはなんでnewmoにnew社したの? - YAPC::Hakodate 2024
tenntenn
PRO
0
180
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
KATA
mclloyd
27
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.8k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Bash Introduction
62gerente
608
210k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Code Reviewing Like a Champion
maltzj
519
39k
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!