Chrome Devtools for beginners (v1.1)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Chrome Devtools for beginners (v1.1)

  • 4,757 views
Uploaded on

2013/12/13に開催された第4回HTML5ビギナーズの資料です。

2013/12/13に開催された第4回HTML5ビギナーズの資料です。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,757
On Slideshare
4,680
From Embeds
77
Number of Embeds
2

Actions

Shares
Downloads
41
Comments
0
Likes
34

Embeds 77

https://twitter.com 72
http://s.deeeki.com 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.        Chrome DevTools  for  beginners Version  1.1 2013/12/13 第4回HTML5ビギナーズ Toru  Yoshikawa  (@yoshikawa_̲t)
  • 2. Who? 吉川  徹  /  Toru  Yoshikawa @yoshikawa_̲t html5j/HTML5とか勉強会スタッフ/ビ ギナー部  (副部⻑⾧長) Google  Developer  Experts  (Chrome) HTML5  Experts.jp  エキスパートNo.3 Web先端技術味⾒見見部  (顧問)/⽇日本jQuery   Mobileユーザー会  (管理理⼈人)/Sublime   Text  2  Japan  Users  Group  (管理理⼈人)な どなど Blog:  http://d.hatena.ne.jp/pikotea/
  • 3. ChromeでのWeb開発の 基礎知識識
  • 4. ブラウザの挙動 Chrome、Safariは、同じWebkitというレンダリングエンジンで動作する ため、ほぼ同様の動作をする(しかし、最近Chromeは、Blinkというエン ジンにフォークして移⾏行行したため段々と差異異が出てくるものと思われる) JavaScriptエンジンはそれぞれ違うので若若⼲干注意(互換性の問題はほとん どなし) Webkit  >  JavaScriptCore Chrome  >  V8  (Node.jsもV8を利利⽤用している) Firefox  >  SpiderMonkey JavaScript⾼高速化等のTipsはだいたい同じように効果がある
  • 5. 特殊URL chrome:で始まるURLで設定やデバッグ⽤用の有⽤用な情報 を参照することができる chrome://about  でURL⼀一覧を表⽰示 chrome://flags  >  各種設定 chrome://appcache-‐‑‒internals  >  AppCacheの管理理 chrome://net-‐‑‒internals  >  ネットワーク情報 etc...
  • 6. Canary  ビルド HTML5、Chrome  Developer  Toolsの最新の機能が 利利⽤用できる プロファイルがStableと別になっているので、 Stableと同時に利利⽤用できる 新しいので⾒見見た⽬目が若若⼲干異異なることがある https://www.google.co.jp/intl/ja/chrome/ browser/canary.html
  • 7. Canary  ビルド Chrome  Developer  Toolsの実験的機能の有効 chrome://flags Settings
  • 8. Developer  Tools
  • 9. 起動⽅方法 右クリックメニュー「要素の検証」 ショートカット Windows:  Ctrl  +  Shift  +  I  or  F12 Mac:⌥  +  ⌘  +  I 右上のメニューアイコンから
  • 10. 機能概要 Elements  …  要素・スタイルの確認・編集 Resources  …  ファイル構成・リソース(Web  Storageなど)の確認 Network  …  ネットワークアクセスの確認・分析 Sources  …  ソースファイルの確認・保存、JavaScriptのデバッグ Timeline  …  パフォーマンスの測定と分析 Profiles  …  CPU、メモリ状況、CSSセレクターのプロファイル Audits  …  ネットワーク、サイトスピードのチェック・推奨事項 Console  …  エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行
  • 11. ツールバー
  • 12. 表⽰示位置変更更 Dock to right Dock to bottom Window アイコンクリックで切切り替え アイコン⻑⾧長押しで、リストがポップアップ
  • 13. 設定 キャッシュを無効 Ajaxをログ表⽰示
  • 14. 要素を⾒見見つける
  • 15. 要素を⾒見見つける (Elementsパネル) HTMLビューで要素にマウスカーソルを当ててみる 右クリックメニュー「要素の検証」 検索索 Windows:  Ctrl  +  F Mac:  ⌘  +  F インスペクターモード
  • 16. 要素のハイライト
  • 17. インスペクターモード
  • 18. 要素を編集してみる
  • 19. 編集モード 右クリックメニュー ダブルクリック・タブで移動 HTML編集のショートカット(F2)
  • 20. その他の操作 ドラッグ&ドロップで要素の移動 要素の削除 Del 要素の表⽰示・⾮非表⽰示 H 編集内容をもとに戻す Windows:  Ctrl  +  Z Mac:  ⌘  +  Z
  • 21. 要素に適⽤用されている スタイルを確認・編集する
  • 22. スタイルの確認と編集 Computed  Style  …  要素に適⽤用されているスタイル Styles  …  要素に適⽤用されているCSSルール Metrics  …  要素のボックスモデルの状態
  • 23. Computed  Style
  • 24. Styles
  • 25. スタイルの編集・状態の変更更 (リアルタイムに反映)
  • 26. Metrics
  • 27. その他の操作 上下キーで値の増減 Shiftキー押しながら  ±10  ずつ Altキー押しながら  ±0.1  ずつ カラーアイコンをクリックでカラーピッカー サジェスト Ctrl+スペース タブで選択、→で決定
  • 28. サイトのリソース状況を 確認する
  • 29. サイトのリソース状況を確認 する(Resourcesパネル) Web  SQL IndexedDB Local  Storage Session  Storage Cookies Application  Cache
  • 30. クッキーの確認
  • 31. Local  Storageの確認
  • 32. モバイルのデバッグ
  • 33. モバイルのデバッグ モバイル環境をエミュレートして表⽰示する リモートデバッグ
  • 34. 設定(Overrides)
  • 35. 設定(Overrides)
  • 36. リモートデバッグ(v31以前) Chrome  for  Androidで動作 Chrome  Web  Storeで「ADB」をインストール https://chrome.google.com/webstore/detail/adb/ dpngiggdglpdnjdoaefidgiigpemgage
  • 37. リモートデバッグ(v31以前) USBデバッグで接続 Start  ADB  >  View  Inspect  Target
  • 38. リモートデバッグ(v32以降降) インストールは⼀一切切不不要 chrome://inspect  を表⽰示
  • 39. その他の⾯面⽩白い機能 Workspace Port  forwarding Layer  Panel etc…
  • 40. まとめ DevToolsには、まだまだ説明しきれない便便利利な 使い⽅方がたくさんあります! 開発効率率率が⾶飛躍的に向上しますので、まずは是 ⾮非、使ってみて下さい ⽇日々、いろいろな改善・機能追加がおこなわれて いるのでCanaryで試してみましょう
  • 41. Next  Step 「Chrome  Developer  Toolsを使いこなそ う」 http://www.slideshare.net/ yoshikawa_̲t/chrome-‐‑‒developer-‐‑‒ tools-‐‑‒17787728 続きはChrome本で!(PR) Chrome  Developer  Toolsの使い⽅方につ いて100ページ以上にわたって解説 http://amzn.to/12eKqmt
  • 42. Thank  you!! (@yoshikawa_̲t)
  • 43. Resources https://developers.google.com/chrome-‐‑‒ developer-‐‑‒tools/ https://developers.google.com/live/chrome/ http://anti-‐‑‒code.com/devtools-‐‑‒cheatsheet/