Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

2.382 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

困った時の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)

×