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
Snowflake Intelligenceにはこうやって立ち向かう！クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
Avatar for harry gappy50
0
270
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
Avatar for KoheiOgawa shisyu_gaku
0
300
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
Avatar for pei0804 pei0804
1
190
現場で効くClaude Code ─ 最新動向と企業導入
Avatar for TakaakiKakei takaakikakei
1
250
slog.Handlerのよくある実装ミス
Avatar for H.Saki sakiengineer
4
310
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
Avatar for K.Mitsuhashi kaz3284
1
190
大「個人開発サービス」時代に僕たちはどう生きるか
Avatar for Sotaro Karasawa sotarok
20
10k
バイブスに「型」を！Kent Beckに学ぶ、AI時代のテスト駆動開発
Avatar for amixedcolor amixedcolor
2
570
RSCの時代にReactとフレームワークの境界を探る
Avatar for uhyo uhyo
10
3.5k
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
Avatar for wanda ganota
2
260
はじめてのOSS開発からみえたGo言語の強み
Avatar for shibutani shibukazu
1
760
複数サービスを支える マルチテナント型 Batch MLプラットフォーム
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
770

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
920
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k

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/