Chrome Developer Tools の使い方 00 – 起動してみよう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

Chrome Developer Tools の起動方法についてです.

VIDEO

チュートリアルムービー

EXPLANATION

動画解説中にタイプしてたテキストです.

Chrome Developer Tools の使い方

Chrome Developer Tools を起動してみよう!!

起動方法には4通りあります.
・ツールバーから起動
・Ctrl + Shift + I で起動
・F12 で起動
・右クリックで要素を選択して起動

ちなみに他のブラウザでも同じようなやつがあります.
どのブラウザでも大抵 F12 で起動できます.
Firefox, IE でも起動してみましょう!!

以上, ありがとうございました.

TIPS

Chrome Developer Tools の起動方法

  • ツールバーから起動
  • Ctrl + Shift + I で起動
  • F12 で起動
  • 右クリックで要素を選択して起動

Firefox, IE での起動方法

F12 で起動できます.

今後は Chrome Developer Tools についての解説になりますがそれぞれのブラウザでも大抵似たような機能はあります. 主要ブラウザが Firefox や IE の方でも簡単に応用できるかと思います.

Safari での起動方法

Safari の場合は"開発"メニュー→...で起動します. デフォルトでは "開発メニュー"が表示されていないので, ツールメニュー→設定→詳細→メニューバーに"開発"メニューを表示をチェックしておいて下さい.

また, Safari では Chrome 同様 webkit を使用しているので, (ほぼ)同じ Developer Tools が起動します. なので, このあとに続く動画の内容と同じ使い方で操作できます.

次回は Elements パネルの使い方についてです.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT