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

Google Dev Tools 簡介

Avatar for Lindsay Hsieh Lindsay Hsieh
August 12, 2013
Technology
0
59

Google Dev Tools 簡介

Avatar for Lindsay Hsieh

Lindsay Hsieh

August 12, 2013
Tweet

More Decks by Lindsay Hsieh

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

Other Decks in Technology

See All in Technology
東京大学「Agile-X」のFPGA AIデザインハッカソンを制したソニーのAI最適化
Avatar for ソニー株式会社 sony
0
180
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
Avatar for にしはら nishiharatsubasa
3
5.3k
ざっくり学ぶ 『エンジニアリングリーダー 技術組織を育てるリーダーシップと セルフマネジメント』 / 50 minute Engineering Leader
Avatar for iwashi iwashi86
7
3.7k
知覚とデザイン
Avatar for Rinchoku rinchoku
1
670
JAWS UG AI／ML #32 Amazon BedrockモデルのライフサイクルとEOL対応/How Amazon Bedrock Model Lifecycle Works
Avatar for quiver quiver
1
360
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
Avatar for Akira Shimosako simosako
3
550
今から間に合う re:Invent 準備グッズと現地の地図、その他ラスベガスを周る際の Tips/reinvent-preparation-guide
Avatar for emi emiki
0
160
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
Avatar for coconala_engineer coconala_engineer
0
320
ラスベガスの歩き方 2025年版（re:Invent 事前勉強会）
Avatar for JunjiKoide junjikoide
0
650
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
Avatar for Preferred Networks pfn
PRO
4
920
20251024_TROCCO／COMETAアップデート紹介といくつかデモもやります！_#p_UG 東京：データ活用が進む組織の作り方
Avatar for D soysoysoyb
0
140
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
Avatar for Kento Kimura aoto
PRO
1
730

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
930
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
2
180
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
11k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k

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/