Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Google Dev Tools 簡介

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Lindsay Hsieh Lindsay Hsieh
August 12, 2013
Technology
64
0

Google Dev Tools 簡介

Avatar for Lindsay Hsieh

Lindsay Hsieh

August 12, 2013

More Decks by Lindsay Hsieh

See All by Lindsay Hsieh
前端攻城獅？一堂適合小獅子的入門分享 / 謝小雨
Avatar for Lindsay Hsieh lindsayrain
1
390
APP研究會小聚 - 學習類型
Avatar for Lindsay Hsieh lindsayrain
1
150
Introducing the Pecha Kucha
Avatar for Lindsay Hsieh lindsayrain
1
98

Other Decks in Technology

See All in Technology
2026-05-14 要件定義からソース管理まで！IBM Bob基礎ハンズオン
Avatar for YutaNonaka yutanonaka
0
150
20260513_生成AIを専属DSに_AI分析結果の検品テクニック_ハンズオン_交通事故データ
Avatar for NobuakiOshiro doradora09
PRO
0
220
ESP32 IoTを動かしながらメモリ使用量を観測してみた話
Avatar for ZOZO Developers zozotech
PRO
0
110
そのSLO 99.9%、本当に必要ですか？ 〜優先度付きSLOによる責任共有の設計思想〜 / Is that 99.9% SLO really necessary? Design philosophy of shared responsibility through prioritized SLOs
Avatar for VTRyo vtryo
0
710
サンプリングは「作る」のか「使う」のか？ 分散トレースのコストと運用を両立する実践的戦略 / Why you need the tail sampling and why you don't want it
Avatar for ymotongpoo ymotongpoo
4
180
「QA＝テスト」「シフトレフト＝スクラムイベントの参加者の一員」の呪縛を解く。アジャイルな開発を止めないために、10Xで挑んだ「右側のしわ寄せ」解消記 #scrumniigata
Avatar for nihonbuson nihonbuson
PRO
5
1.4k
ボトムアップ限界を越える - 20チームを束る "Drive Map" / Beyond Bottom-Up: A 'Drive Map' for 20 Teams
Avatar for 株式会社カオナビ kaonavi
0
210
Purview Endpoint DLP 動かしてみた
Avatar for kozakigh kozakigh
0
390
O'Reilly Infrastructure & Ops Superstream: Platform Engineering for Developers, Architects & the Rest of Us
Avatar for Syntasso syntasso
0
130
AIと乗り切った1,500ページ超のヘルプサイト基盤刷新とさらにその先の話
Avatar for mugi / Hajime Mugishima mugi_uno
2
350
AI時代の品質はテストプロセスの作り直し #scrumniigata
Avatar for kyonmm kyonmm
PRO
4
1.5k
LookerとADKで作る社内AIエージェント
Avatar for chanyou0311 chanyou0311
0
200

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
740
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
120
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
500
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
210
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
190
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
140

Transcript

  1. Google Dev Tools 簡介 edited by lindsay.hsieh 20121126

  2. Setting

  3. None

  4. 示範 style範例 pause範例

  5. Console 檢視整個網頁的文字部份 document.body.innerText 複製語法 copy() copy( document.body.innerText ) 清除 clear();

  6. Console 你最近選取的element上 $0; $1; $2; 檢查元素指定 id 的物件 inspect( wrapper

    );

  7. Console 檢查元素指定 id 的物件，列出 JavaScript 物件 屬性 dir ( wrapper

    ); 檢查元素指定 id 的物件，使用 html 樹狀結構呈 現 dirxml( wrapper );
  8. None

  9. 示範 範例

  10. None

  11. HAR reader http://ericduran.github. com/chromeHAR/

  12. source video http://www.youtube.com/watch?v=BaneWEqNcpE http://www.youtube.com/watch?v=yO-TfKT2O_4 slides http://www.igvita.com/slides/2012/devtools-tips-and-tricks/