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

Google Dev Tools 簡介

Lindsay Hsieh
August 12, 2013
Technology
0
44

Google Dev Tools 簡介

Lindsay Hsieh

August 12, 2013
Tweet

More Decks by Lindsay Hsieh

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

Other Decks in Technology

See All in Technology
20分で完全に理解するGrafanaダッシュボード
hamadakoji
5
880
.NET Profiler in 2024.
kkamegawa
2
860
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
120
自己改善からチームを動かす！ 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1k
ワールドカフェI ／チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
1.9k
成長をサポートするピープルマネジメントのやり方
sioncojp
6
450
ルーターでプレゼンする
puhitaku
1
3.2k
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
2
590
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
910
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな（2024年版）
infiniteloop_inc
4
17k

Featured

See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
KATA
mclloyd
16
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Adopting Sorbet at Scale
ufuk
69
8.6k
In The Pink: A Labor of Love
frogandcode
138
21k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
64
14k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
21
6.4k
Music & Morning Musume
bryan
41
5.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/