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

Google Dev Tools 簡介

Avatar for Lindsay Hsieh

Lindsay Hsieh

August 12, 2013

More Decks by Lindsay Hsieh

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

Other Decks in Technology

See All in Technology
凡エンジニアがこの先生きのこるためには。〜TypeScript完全に理解したい〜
Avatar for Ryotaro Harada alchemy1115
2
300
シンガポールで登壇してきます
Avatar for Yuuki Yamashita yama3133
0
240
Type-safe IaC for Dart
Avatar for Nozomi Koborinai coborinai
0
150
ruby.wasmとPicoRuby.wasmに対応した仮想DOMライブラリを作ってる話 #kaigieffect_kaigi
Avatar for sue445 sue445
PRO
0
150
Empower GenAI with Agile - あなたのアジャイルが生成AIのバフになる仕組み
Avatar for Hiroyuki Ito (TheHiro) hageyahhoo
1
210
“それは自分の仕事じゃない"を 越えて行け
Avatar for yuukiyo yuukiyo
1
440
第67回コンピュータビジョン勉強会CVPR2026読会前編
Avatar for TSUKAMOTO Kenji tsukamotokenji
0
140
Claude Code公式skillで 自分の仕事を少しずつ手放そう！（Claude Code開発ノウハウ大公開スペシャル by クラスメソッド）
Avatar for Kei Masaoka kaym
1
460
はじめてのWDM
Avatar for miyukichi_ospf miyukichi_ospf
1
150
大量データに対しても、生成AIを用いてリーズナブルにデータ加工をしたい！Databricksのai_queryについて調べてみた
Avatar for Kamoshika kamoshika
1
210
知らん間に、回ってる
Avatar for ming ming_ayami
0
690
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする～デザインシステム運用に学ぶ組織レバレッジ～ 渡辺 凌央
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
1
220

Featured

See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.3k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
250
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.8k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
340
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k

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/