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 Dev Tools 基礎技巧
Search
chph
November 03, 2017
Technology
0
87
Chrome Dev Tools 基礎技巧
afu @ PIXNET | Tech Free Talk 踢克大小事 #4 | 2017.11.03
chph
November 03, 2017
Tweet
Share
More Decks by chph
See All by chph
DevOpsDays Taipei 2017 敏捷思維分享
chph
0
100
在 Google Cloud Platform 架設你的網站伺服器並撰寫 Node.js 應用程式
chph
0
680
Intro to Progressive Web Apps
chph
1
62
淺談 Gzip
chph
0
120
Install WordPress on Linode
chph
0
160
Introduction Infrastructure - Linode 入門
chph
0
220
高速傳愛~三小時進化 PWA
chph
0
290
Optimize JavaScript execution and parse time using optimize-js
chph
0
150
Modern Web 2016 議程分享: 網站自動化測試 - 以 PIXNET 搜尋 & 美妝口碑大賞為例
chph
0
110
Other Decks in Technology
See All in Technology
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
160
OpenTelemetry の Log を使いこなそう
biwashi
5
990
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
140
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
160
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
120
データエンジニアリング 4年前と変わったこと、 4年前と変わらないこと
tanakarian
2
360
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9k
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
720
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
260
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
290
An introduction to Claude Code SDK
choplin
3
3.3k
Featured
See All Featured
Docker and Python
trallard
45
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Faster Mobile Websites
deanohume
308
31k
Site-Speed That Sticks
csswizardry
10
720
Unsuck your backbone
ammeep
671
58k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
Chrome Dev Tools 基礎技巧 研發中心前端組 Afu
• Chrome 版本簡介 • Elements • Console • Sources •
Network • 「More tools」 • 最新功能搶先看 Agenda
v62 2017/10/17 釋出 穩定版 (stable channel) 適合一般使用者
v64.0.3255 幾乎每天更新 不穩定的開發版本 適合開發人員和嘗鮮者
https://download-chromium.appspot.com/ v64.0.3256+ 主幹版本 (master),CI 建置 沒有自動更新機制 適合開源專案貢獻者
Elements 元素
DOM Manipulation 選取元素的幾種方法: 一、在目標處滑鼠右鍵選擇「檢 查」 二、使用開發者面板第一個 inspect 按鈕,再點選目標元素 三、按 cmd
+ f 開啟搜尋文字框,輸入 CSS Selector 匹配想要的元素,例如「 #header」
選取元素時,可以: • 新增編輯刪除屬性或直接編輯 HTML • 可以用鍵盤操作,例如方向鍵走訪元素、 delete 鍵刪除元素、Ctrl-C & V
複製貼上新元素 • 複製對應的 CSS Selector (右鍵選單) • 強制套用虛擬類別,例如 :hover,讓元素套用CSS 樣式,讓滑鼠位置不被綁死,方便除錯 • 移動頁面捲軸到直接把元素顯示在視線 內垂直正中央 (右鍵選單 - Scroll into view) DOM Manipulation (左側面板)
選取元素時,可以: • 新增編輯刪除 CSS 樣式 • 了解樣式優先權順序,最上面的 element.style 最優先 (inline
style) • 知道該 Selector 的 CSS 檔案載入來源 • 了解樣式繼承關係 • 了解在 Box Model 下,邊界 (margin)、邊框 (border) 、留白 (padding) 佔據多少像素 DOM Manipulation (右側面板 Styles)
選取元素時,可以: • 了解在 Box Model 下,邊界 (margin)、邊框 (border) 、留白 (padding)
佔據多少像素 • 列出所有 CSS Property 屬性被設定的值 • 點箭頭可跳躍至定義該 CSS 樣式的行數 DOM Manipulation (右側面板 Computed)
選取元素時,可以: • 知道被綁定哪些事件,例如 click、keydown、keyup 等等 • 迅速定位至該事件是在哪個 js 檔案哪一行綁定的 •
移除綁定的事件使其無效以便除錯 • 例如綁了多個 click 事件,刪去法找出哪個造成 bug • 練習: • 在 http://cssreference.io/ 找出 JS 實作的搜尋程式碼位置 DOM Manipulation (右側面板 Event Listeners)
DOM Manipulation (右側面板 Event Listeners)
DOM Manipulation (右側面板 DOM Breakpoints) 藍色圓點
DOM Manipulation (右側面板 DOM Breakpoints) 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger mode
Console
• $_ 最近一次的運算結果 • $0 - $4 最近五次選取的元素 • $(selector)
等同 document.querySelector() • $$(selector) 等同 document.querySelectorAll() • console 系列的 alias function • dir(), dirxml(), table() Console
Console 藍色圓點
Sources 原始碼
Sources - format code 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger mode
Sources - format code 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger mode
Sources - format code 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger mode
Network 原始碼
Network 面板 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger mode
在任一欄位按右鍵可以自訂要看哪些欄位 Network 面板
篩選 URL 包含關鍵字的 requests Network 面板 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger mode
按住 command 可複選多種類型的 Requests 點選漏斗圖案可以取消篩選 Network 面板 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger
mode
勾選 Preserve log 可以保留 request,方便多次重新整理網頁除錯 Network 面板 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger
mode
按下 ESC 的面板 藏在「 」裡的
切換到 Animations 頁籤,重新整理網頁可以錄製 CSS 動畫 ESC 面板 / Animations 觸發元素屬性變更的程式碼敘述
暫停程式執行,進入 debugger mode
封鎖指定的網域 reqeusts,以痞客邦相片網域 pimg.tw 為例 ESC 面板 / Request blocking
切換到 Coverage 頁籤,按下錄製鈕即可見,額外作其他操作會即時更新圖表 ESC 面板 / Coverage (CSS / JS
覆蓋率)
模擬地理位置 (geolocation) ESC 面板 / Sensors
Console - Filter sidebar 更有條理地過濾 console 訊息 | Chrome 64+
限定
Console - Filter sidebar 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger mode
Local Overrides 本地覆寫 | Chrome 64+ 限定
Sources / Overrides 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger mode
None
Sources / Overrides 觸發元素屬性變更的程式碼敘述 暫停程式執行,進入 debugger mode
1. Chrome DevTools | Google Web Developers 2. Dev Tips
- Developer Tips by Umar Hansa 3. Code School - Discover DevTools 4. Modern Tooling, Testing, and Automation (Chrome Dev Summit 2017) 參考資料
None