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

Chrome Devtools for beginners (v1.1)

  • 3,914 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
3,914
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
42
Comments
0
Likes
35

Embeds 0

No embeds

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/