MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-Learn-Section-Survey

この翻訳は不完全です。英語から この記事を翻訳 してください。

近頃のブラウザにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の 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 ではこのタブに現在選択中の要素のフォント設定が表示されます。

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

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

The JavaScript console

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:

If the developer tools are already open, click or press the Console tab.

If not, Firefox allows you to open the console directly using Ctrl + Shift + K or using the menu command: Menu ➤ Web Developer ➤ Web Console, or Tools ➤ Web Developer ➤ Web Console. On other browser, open the developer tools and then click the Console tab.

This will give you a window like the following:

To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):

  1. alert('hello!');
  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);

Now try entering the following incorrect versions of the code and see what you get.

  1. alert('hello!);
  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);

You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!

Find out more

Find more out about the JavaScript console in different browsers:

あわせて参照

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

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