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

Google Dev Tools 簡介

Lindsay Hsieh
August 12, 2013
Technology
0
51

Google Dev Tools 簡介

Lindsay Hsieh

August 12, 2013
Tweet

More Decks by Lindsay Hsieh

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

Other Decks in Technology

See All in Technology
あなたの人生も変わるかも？AWS認定2つで始まったウソみたいな話
iwamot
3
860
2024年活動報告会（人材育成推進WG・ビジネスサブWG） / 20250114-OIDF-J-EduWG-BizSWG
oidfj
0
230
新卒1年目、はじめてのアプリケーションサーバー【IBM WebSphere Liberty】
ktgrryt
0
130
PaaSの歴史と、 アプリケーションプラットフォームのこれから
jacopen
7
1.5k
RubyでKubernetesプログラミング
sat
PRO
4
160
自社 200 記事を元に整理した読みやすいテックブログを書くための Tips 集
masakihirose
2
330
AWS re:Invent 2024 re:Cap Taipei (for Developer): New Launches that facilitate Developer Workflow and Continuous Innovation
dwchiang
0
170
デジタルアイデンティティ技術 認可・ID連携・認証 応用 / 20250114-OIDF-J-EduWG-TechSWG
oidfj
2
690
2025年のARグラスの潮流
kotauchisunsun
0
800
コロプラのオンボーディングを採用から語りたい
colopl
5
1.3k
三菱電機で社内コミュニティを立ち上げた話
kurebayashi
1
360
re:Invent 2024のふりかえり
beli68
0
110

Featured

See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Facilitating Awesome Meetings
lara
51
6.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Visualization
eitanlees
146
15k
Optimizing for Happiness
mojombo
376
70k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
Practical Orchestrator
shlominoach
186
10k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Automating Front-end Workflow
addyosmani
1366
200k

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/