html5jk-2

View Github Repository Open presentation in a new window

masakura

See all presentation from masakura

html5jk-2

0 0

html5jk-2

html5jk 勉強会 #2 用スライド

On Github masakura / html5jk-2

html5jk 勉強会 #2

開発者ツール特集

政倉 智 (html5j 鹿児島)

自己紹介

  • 名前 - 政倉 智
  • 所属 - codeArts 株式会社
  • 所属 - html5j 鹿児島
  • 趣味 - バイク

開発者ツールとは?

開発者ツールはウェブブラウザーに標準で搭載されている、開発者やデザイナーのためのデバッグツールです。

ブラウザー 名前 IE/Edge F12 開発者ツール Chrome DevTools Firefox 開発ツール Safari ウェブ開発ツール

こんなの

何ができる?

  • HTML の DOM 要素を調べたり
  • CSS の適用結果を調べたり
  • JavaScript の実行結果を調べたり
  • 編集したり
  • デバッグしたり
  • プロファイリングしたり
  • ネットワークを調べたり
  • 他にも...

とにかく何でもできるので、挙げるときりがないです!

初学者におすすめ!

  • 学習の初期のころは、少ない情報でもがくことが多い
  • 例えば...
    • 箱の中身を触るだけで当てるクイズ
    • シルエットクイズ
  • 直接見えないから、何か分かるのに時間がかかる!
    • クイズとしては面白いけどね!
  • でも、こんなこと続けていると、学習に時間がかかるよ!

HTML5 をこれから覚えていこうという人におすすめ!

中級者におすすめ!

  • パフォーマンス改善のための機能が盛りだくさん!
  • デバッグが用意になる機能もたくさん!
  • 使いこなせば使いこなすほど、仕事時間が短くなる

中級者にもおすすめです!

自分のスキルに合わせて使いこなしていける

初学者から上級者までみんなが使えるツールです!

今日は...

今日は Chrome の DevTools を使って機能を紹介します。

他のブラウザーでも同じことができると思います。

多分ですけど...

と思ってたらですね...

WEB+DB Press Vol.89

基本的な使い方

まずは簡単に使えるところから紹介します。

DOM

スタイル

コンソール

  • JavaScript の実行中に情報を表示してくれるところ
  • 直接実行できるので試してみましょう!
  • JavaScript の勉強にもおすすめ!

ファイル操作

  • Ctrl + o でファイルを探す
  • Ctrl + f でファイル内検索
  • Ctrl + Shift + o で関数を探せる
  • ソースタブで書き換えられます
    • 変更点を後から確認できます
    • DevTools で調整しながら、変更点を確認して元のファイルに反映

ネットワークパネル

  • 通信に関わることを調査できます
  • ネットワークパネル
    • 200 OK - 正常にデータが取得できた
    • 304 Not Modified - データが変更されていないのでキャッシュが使われた
    • 404 Not Found - サーバーにデータがなかった
  • リクエスト・レスポンスのヘッダやボディが確認できます
    • 学習のときにも役に立ちます!

リソースパネル

デバイスモード

  • Ctrl + Shift + m でデバイスモード
    • モバイル版の Chrome と同じような感じになる
    • 機種を選んだりできる
    • 解像度変える
    • デバイスセンサーのエミュレート

リモートデバッグ

基本はこんなところ!

  • 少しずつ覚えていけば OK!
  • 覚えた分だけ
    • 仕事が早くなる!
    • 勉強が早くなる!

もうちょっと使ってみよう!

ソースマップ

  • CSS の代わりに Sass が使うことが多い
$blue: blue; /* 変数 */

.btn-primary {
  background-color: $blue;
}

.header-primary {
  background-color: $blue;
}

これをコンパイルするとこんな CSS が生成される。

.btn-primary {
  background-color: blue; }

.header-primary {
  background-color: blue; }

ソースマップ

  • SCSS ファイルを書くけど、ブラウザーが読み込むのは CSS ファイル
  • インスペクションして CSS ファイルの内容を表示されても、元の場所が分からない!
  • それを何とかするために、対応表を埋め込む
  • それがソースマップ
  • サンプルにアクセスして、CSS の適用でファイル名が SCSS ファイルになっていることを確認!
  • 他にも圧縮・結合された JavaScript ファイルや、コンパイルされた JavaScript ファイルでも使える

スニペット

  • ソースパネルにスニペットがある
  • JavaScript コードをブラウザーに記憶させてすぐに使うことができる
  • 以下のコードをスニペットに保存して呼び出してみよう!
// 戻るボタン
history.back();

// 進むボタン
history.next();

いろいろなコンソール出力

// 何が表示されるかはお楽しみ!
myStyle = "color: blue; font-size: x-large; text-shadow: 1px 1px 3px #000;";
console.log("%chtml5jk 勉強会 #2", myStyle);

ブレークポイント その一

  • サンプルにアクセスしてデモします
    • ソースマップが効くので、コンパイル前のファイルでデバッグできます
  • ブレークポイント
    • ソースコードを読んだりデバッグしたりするときは必須!
    • 条件付きブレークポイント便利!
    • 条件付きブレークポイントに console.log(this.name) とか書くと便利!

ブレークポイント その二

ソース関係

もうちょっと高度なの!

パフォーマンスチューニング

便利な小技...

  • リクエストスクリプトを生成
    • ネットワークパネルから、curl のスクリプトを生成してくれます!
  • Store as Global Variable
    • オブジェクトをグローバル変数に代入してくれる!

フレームワーク関係

まとめ

  • 開発者ツールはウェブ開発者・デザイナーにとってなくてはならないツールです
  • 初学者から上級者までだれでも使うことができます
  • 少しずつ使い方を覚えていけば、お仕事や趣味がはかどります!

ご清聴ありがとうございました!

html5jk 勉強会 #2 開発者ツール特集 政倉 智 (html5j 鹿児島)