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
57

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
92

Other Decks in Technology

See All in Technology
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
Avatar for 弁護士ドットコム bengo4com
0
1.5k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
5.5k
作曲家がボカロを使うようにPdMはAIを使え
Avatar for Takuya Ito itotaxi
0
420
mrubyと micro-ROSが繋ぐロボットの世界
Avatar for Katsuhiko Kageyama kishima
3
390
Zephyr RTOSを使った開発コンペに参加した件
Avatar for misoji engineer iotengineer22
1
190
ドメイン特化なCLIPモデルとデータセットの紹介
Avatar for tattaka tattaka
2
560
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
130
あなたの声を届けよう！ 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
Avatar for kondoyuko kondoyuko
4
540
なぜ私はいま、ここにいるのか？ #もがく中堅デザイナー #プロダクトデザイナー
Avatar for 弁護士ドットコム bengo4com
0
1.3k
一体いつからSRE NEXTがSREだけのカンファレンスだと錯覚していた？ / When did you ever get the idea that SRE NEXT was a conference just for SREs?
Avatar for VTRyo vtryo
1
140
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
170
赤煉瓦倉庫勉強会｢Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記｣
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
2
260

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
940
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
Docker and Python
Avatar for Tania Allard trallard
44
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
5
250
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k

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/