× 無料のユーザー登録をすると学習状況を管理することができるようになります
最新版のレッスンはこちらから » 【最新版】Chrome Developer Tools入門 (全10回)

#02 まずは起動してみよう

さて、では Chrome Developer Tools の勉強をしていきましょう。
今回 HTML と CSS と JavaScript と画像ファイルを用意して、このようなページを作ってみました。

Chrome Developer Toolsの起動・終了の仕方について学びます。

  • 起動の仕方
  • 終了の仕方
  • コンソールの起動・終了

このレッスンでは Google Chrome 19.0 を使用しています。

2012年6月13日
なお、Chrome Developer Tools自体もHTML/CSS/JavaScriptで作られています。Chrome Developer Toolsを起動し、左下のアイコンでウィンドウを切り離した後、起動するためのショートカットキー(MacだとCommand+Option+i)を押すと、Chrome Developer ToolsのChrome Developer Toolsが立ち上がり(ややこしいですが)、そのDOMなどを見ることができます。

このレッスンの問題を報告する

この動画に関する、よくある質問はまだありません。

プレミアム会員(月額980円)になると、全レッスンの素材ファイルをダウンロードできます。

詳しい説明を読む

プレミアム会員(月額980円)になると、全レッスンのソースコードを見られるようになります。

詳しい説明を読む

このレッスンの問題を報告する

プレミアム会員(月額980円)になると、全レッスンのデモを見られるようになります。

詳しい説明を読む
先生に質問してみよう (試験運用中)