Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

困った時のDev toolsの使い方(初心者向け)

2,337 views

Published on

2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ!」での講演資料です。

Published in: Technology
  • Be the first to comment

困った時のDev toolsの使い方(初心者向け)

  1. 1. 困った時のDevToolsの使い⽅方 2016/5/24   第14回  HTML5ビギナーズ   Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 2. Who? 株式会社オープンウェブ・テクノロジー CXO/Techfeed  (techfeed.io)   html5j  代表、Google  Developer  Experts   (Chrome)、HTML5  Experts.jp  副編集⻑⾧長兼 エキスパート   html5j  ビギナー部(副部⻑⾧長)/Web先端技 術味⾒見見部  (顧問)/⽇日本jQuery  Mobileユー ザー会  (管理理⼈人)/Sublime  Text  2  Japan   Users  Group  (管理理⼈人)などなど   Blog:  http://d.hatena.ne.jp/pikotea/ 吉川  徹  /  Toru  Yoshikawa   @yoshikawa_̲t
  3. 3. エンジニア向け情報キュレーションサービス   「  TechFeed」を運営してます!   techfeed.io
  4. 4. Chrome  DevTools   使ってますか?
  5. 5. 詳しいDevToolsの   使い⽅方はこちら Chrome  DevTools  for  beginners
 http://www.slideshare.net/yoshikawa_̲t/ devtools-‐‑‒beginner   Chrome  Developer  Toolsを使いこなそう!
 http://www.slideshare.net/yoshikawa_̲t/ chrome-‐‑‒developer-‐‑‒tools-‐‑‒17787728   公式  Chrome  DevTools
 https://developers.google.com/web/tools/ chrome-‐‑‒devtools/   DevToolsは開発が活発なので⾒見見た⽬目や機能ががらっ と変わることがあるので頑張って読み替える必要が あるかも?
  6. 6. この要素って   どうなってるの? 要素を⾒見見つけよう   ページから要素を選択する   タグから要素を選択して表⽰示する   コードから要素を表⽰示する
  7. 7. この要素って   どうなってるの? スタイルを確認して調整する   ボックスモデル(Metrics)   最終的に適⽤用済みのスタイル(Computed)   ⾊色指定(Color  picker)   状態指定(Force  Element  state)   ⼀一時的に要素を⾮非表⽰示(Hide  Element)
  8. 8. ユースケースを考えて⾒見見る この⽂文字サイズってどこで定義されてるの?   スタイル、効いてなくない?   なんかマージンの⼤大きさが合わないんだけど…   この要素どこいったの!?
  9. 9. 要素が隠れる要因になる   主なスタイル display:  none  |  block  |   inline  |  inline-‐‑‒block  |  flex   ☆☆☆   margin   padding   visibility:  hidden  ☆☆   float  ☆☆☆   position  ☆☆☆   z-‐‑‒index  ☆☆   overflow  ☆   opacity  ☆   height   width   transform   zoom   text-‐‑‒indent
  10. 10. このアニメーションって   どうなってるの? タイムラインを⾒見見てみよう   再⽣生/シーク   スピード調整   アニメーションをカスタマイズ
  11. 11. モバイルで⾒見見た⽬目は   どうなる? デバイスモードを使おう   ユーザーエージェント指定   ネットワークスピードを選択   リモートデバッグ(chrome://inspect)   スクリーンキャスト
  12. 12. おまけ   最新の機能を試してみよう 最新の機能を試してみよう   chrome://flagsで「デベロッパー  ツールの試験 運⽤用版機能」をオン   DevToolsの設定で「Experiments」が新たに出現   ex)  Layers  Panel
  13. 13. まとめ DevToolsは⾼高機能なツールではありますが、あ くまでツールでしかありません。   DevToolsを⾃自由⾃自在に使いこなすには、やはり 基本的な知識識が必要になります。   普段からDevToolsを使って、試⾏行行錯誤しながら 頑張って勉強していきましょう!
  14. 14. Q&A
  15. 15. console.log('%cThank  you!!',  'color:  pinkʼ’);   (@yoshikawa_̲t)

×