We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

近頃のブラウザーにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の HTML や CSS、JavaScript の状態を検証したり、ページがどういったアセットにアクセスし、どれだけ時間がかかったかといった多様なことができます。この記事ではブラウザーの開発者ツールの使い方について説明します。

: 下のサンプルを実行していく前に、Web入門の記事の中で作りあげる、初心者向けウェブサイトの例を開いてください。後ほどこれを使って説明します。

ブラウザー開発者ツールの開き方

開発者ツールはブラウザーのサブウィンドウの中にいます。大体こんな感じに...。

どのように開くのでしょうか?これには 3 つの方法があります。

  • キーボードで開く 以下のブラウザーを除いては、Ctrl + Shift + I で開きます。
    • Internet Explorer では F12 キーで開きます。
    • Mac OS X では ⌘ + ⌥ + I キーで開きます。
  • メニューバーで開く
    • Firefox では  メニュー  Web開発 ➤ 開発者ツールを開く
    • Chrome では、メニュー ➤ その他のツール ➤ 開発者ツール
    • Safari では 開発 ➤ Web インスペクタ (もし、開発メニューが表示されていない場合は Safari 設定 ➤ 詳細 を開いて、メニューバーに[開発]メニューを表示 のチェックボックスをオンにします。) 
    • Opera では 開発者用ツール ➤ Web インスペクター
  • コンテキストメニューで開く ウェブページ上の項目で、長押しまたは右クリック (Mac では Ctrl + クリック) し、表示されたコンテキストメニューより 要素を調査 を選択してください。(さらに!この方法では右クリックで選択した要素がハイライトされて表示されます。)

インスペクター: DOM の内容が見られる CSS エディター

開発者ツールはたいてい最初にインスペクターが開きます。インスペクターの見た目は下に示すスクリーンショットのような感じです。このツールは実行時/表示時に HTML の状態がどのようになっているか見せてくれます。また、CSS がどのようにページ内の要素に適用されているかも見られます。そして、HTML と CSS をその場で簡単に編集し、ブラウザーのビューポートに表示されている結果に反映することができます。

もしインスペクターが表示されていない場合、

  • インスペクタータブをタップまたはクリックしてください。
  • Internet Explorer では、DOM Explorer または Ctrl + 1 を押してください。
  • Safari では、それに類するような名前はついていませんが、HTML が見えるでしょう。もし、画面に表示するように何も選択していなければ、スタイルボタンを押すことで CSS が見られます。

DOM インスペクタについて詳しく知る

まずは、DOM インスペクタ上の HTML の要素を右クリックして、コンテキストメニューを見てみましょう。メニューの表示はブラウザーによって異なりますが、重要な機能はほぼ同じです。

  • ノードを削除 (要素を削除の場合もあり) は現在選択中の要素を削除します。
  • HTML として編集 (属性を追加や、テキストの編集の場合もあり) はその場で HTML を編集し、結果を見ることができます。テストやデバッグの際にとても便利です。
  • hover / active / focus 要素を強制的に選択した状態にトグルします。その状態での見た目を確認することができます。
  • コピー 現在選択されている項目の HTML をコピーします。
  • CSS パスをコピーする や、XPath をコピーする といったメニューがあるブラウザーもあります。これは CSS のセレクターや、現在の HTML要素への XPath 表現のコピーを可能とするものです。

それでは表示されている DOM を編集してみましょう。要素をダブルクリックしたり、右クリックして、HTML として編集を選んでみましょう。いろいろと変更してみても問題ありませんが、保存ができませんのでご注意を。

CSS エディターについて詳しく知る

最初は CSS エディターは現在選択中の要素に適用されている CSS ルールを表示しています。

以下の機能は特に便利です。

  • 現在の要素に適用されている CSS ルールが詳細度の高い順に表示されています。
  • それぞれの宣言の隣にあるチェックボックスをクリックして、その宣言が消されるとどうなるかを試すことができます。
  • 一括指定プロパティ (ショートハンドプロパティ) の隣にある矢印を開くと、各個別指定プロパティ (ロングハンドプロパティ) に対応する現在の値が表示されます。
  • 各プロパティの名前か値をクリックすると、テキストボックスが表示され、変更することで、見た目のプレビューをその場で確認することができます。
  • 各宣言の隣には、その宣言が書かれているファイル名と行数が表示されています。ほとんどの場合、クリックすると開発ツールのその場所にジャンプし、編集したり保存したりすることが可能です。
  • 閉じ中括弧をクリックすることで、新しい行に新しくルールを追加するためのテキストボックスを表示させることができます。

CSS ビューアーの一番上にいくつかのタブメニューがあることに気づいたでしょうか。

  • 計算済み: このタブはブラウザーによって求められた、現在選択中の要素に適用されている設定値が見られます。
  • ボックスモデル: このタブは現在選択中の要素に適用されているボックスモデルがどれだけの大きさになっているかが一覧できます。
  • フォント: Firefox ではこのタブに現在選択中の要素のフォント設定が表示されます。

もっと知りたいときは...

各ブラウザーのインスペクターの詳細については以下をご覧ください。

JavaScript コンソール

プログラムが期待通りに動かない場合、JavaScript コンソールがデバッグにとても便利です。現在読み込まれているページに対して、JavaScript のコードを実行させたり、実行させたコードに対するブラウザーのエラーメッセージを表示させたりすることが可能です。コンソールを表示するには、どのブラウザーでもコンソールボタンを押します (Internet Explorer では Ctrl + 2 を押してください)。これで以下のようなウィンドウが表示されます。

以下のコードをひとつずつ入力して (入力したら Enter キーを押して)、何が起きるか確認しましょう。

  1. alert('こんにちは!');
  2. document.querySelector('html').style.backgroundColor = 'purple';
  3. var myImage = document.createElement('img');
    myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
    document.querySelector('h1').appendChild(myImage);

今度は間違った JavaScript を実行して何が起きるか見てみてください。

  1. alert('こんにちは!);
  2. document.cheeseSelector('html').style.backgroundColor = 'purple';
  3. var myImage = document.createElement('img');
    myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
    document.querySelector('h1').appendChild(myImage);

ブラウザーがエラーを返してきましたね。このようなエラーはわかりにくいと思うかもしれませんが、理解するのは意外と簡単です!

もっと知りたいときは...

各ブラウザーの JavaScript コンソールについて詳しく知りたい場合、以下のリンクを見てください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, chameleonhead
最終更新者: Uemmra3,