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
0
61

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
390
APP研究會小聚 - 學習類型
Avatar for Lindsay Hsieh lindsayrain
1
150
Introducing the Pecha Kucha
Avatar for Lindsay Hsieh lindsayrain
1
97

Other Decks in Technology

See All in Technology
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.5k
量子クラウドサービスの裏側　〜Deep Dive into OQTOPUS〜
Avatar for OQTOPUS oqtopus
0
130
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
970
20260204_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
1
160
Oracle AI Database 移行・アップグレード勉強会 - RAT活用編
Avatar for oracle4engineer oracle4engineer
PRO
0
100
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
310
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1k
配列に見る bash と zsh の違い
Avatar for kazzpapa3 kazzpapa3
3
160
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
Avatar for soudai sone soudai
PRO
12
5.6k
usermode linux without MMU - fosdem2026 kernel devroom
Avatar for Hajime Tazaki thehajime
0
240
Greatest Disaster Hits in Web Performance
Avatar for Estela Franco guaca
0
270

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.3k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
250
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
140
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.7k
Done Done
Avatar for chrislema chrislema
186
16k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
130

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/