path: root/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html

---
title: ブラウザー開発者ツールとは？
slug: Learn/Common_questions/What_are_browser_developer_tools
tags:
  - Beginner
  - Browser
  - CSS
  - CodingScripting
  - Dev Tools
  - HTML
  - JavaScript
  - Learn
translation_of: Learn/Common_questions/What_are_browser_developer_tools
---
<div>{{IncludeSubnav("/ja/Learn")}}</div>

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

<div class="note">
<p><strong>注</strong>: 下のサンプルを実行していく前に、<a href="/ja/Learn/Getting_started_with_the_web">Web入門</a>の記事の中で作りあげる、<a href="http://mdn.github.io/beginner-html-site-scripted/">初心者向けウェブサイトの例</a>を開いてください。後ほどこれを使って説明します。</p>
</div>

<h2 id="How_to_open_the_devtools_in_your_browser" name="How_to_open_the_devtools_in_your_browser">ブラウザ開発者ツールの開き方</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16205/DevTools_63_inspector.png" style="border: 1px solid black; display: block; height: 1364px; margin: 0px auto; width: 672px;"></p>

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

<ul>
 <li><em><strong>キーボードで開く </strong>以下のブラウザを除いては、Ctrl + Shift + I</em> で開きます。

  <ul>
   <li><strong>Internet Explorer</strong> では <em>F12</em> キーで開きます。</li>
   <li><strong>Mac OS X</strong> では <em><span class="Unicode">⌘ + ⌥ + I</span></em><span class="Unicode"> キーで開きます。</span></li>
  </ul>
 </li>
 <li><span class="Unicode"><em><strong>メニューバーで開く</strong></em></span>
  <ul>
   <li><strong>Firefox </strong>では <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> メニュー <span class="Unicode"><em><span class="Unicode">➤</span></em></span><em> Web開発 ➤ 開発者ツールを開く</em></li>
   <li><strong>Chrome </strong>では、<em>メニュー<span class="Unicode"> ➤</span> その他のツール ➤ 開発者ツール</em></li>
   <li><strong>Safari</strong> では <em><span class="Unicode">開発 ➤</span> Web インスペクタ</em> (もし、開発メニューが表示されていない場合は <em>Safari<span class="Unicode"> ➤</span> 設定 ➤ 詳細 を開いて、メニューバーに[開発]メニューを表示</em> のチェックボックスをオンにします。) </li>
   <li><strong>Opera</strong> では <em><span class="Unicode">開発者用ツール ➤</span> Web インスペクタ</em></li>
  </ul>
 </li>
 <li><strong><em>コンテキストメニューで開く</em></strong><em> ウェブページ上の項目で、長押しまたは右クリック </em>(Mac では Ctrl + クリック) し、表示されたコンテキストメニューより <em>要素を調査</em> を選択してください。(さらに！この方法では右クリックで選択した要素がハイライトされて表示されます。)</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/16206/inspector_context.png" style="display: block; height: 232px; margin: 0px auto; width: 350px;"></p>

<h2 id="The_Inspector_DOM_explorer_and_CSS_editor" name="The_Inspector_DOM_explorer_and_CSS_editor">インスペクタ: DOM の内容が見られる CSS エディター</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16208/inspector_highlighted.png" style="border-style: solid; border-width: 1px; display: block; height: 509px; margin: 0px auto; width: 672px;"></p>

<p>もしインスペクタが表示されていない場合、</p>

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

<h3 id="Exploring_the_DOM_inspector" name="Exploring_the_DOM_inspector">DOM インスペクタについて詳しく知る</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16209/dom_inspector.png" style="border: 1px solid black; display: block; height: 320px; margin: 0px auto; width: 350px;"></p>

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

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

<h3 id="Exploring_the_CSS_editor" name="Exploring_the_CSS_editor">CSS エディターについて詳しく知る</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16211/CSS_Inspector.png" style="border: 1px solid black; display: block; height: 281px; margin: 0px auto; width: 500px;"></p>

<p>以下の機能は特に便利です。</p>

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

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

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

<h3 id="Find_out_more" name="Find_out_more">もっと知りたいときは...</h3>

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

<ul>
 <li><a href="/ja/docs/Tools/Page_Inspector">Firefox インスペクタ</a></li>
 <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">Internet Explorer DOM エクスプローラー (英語)</a></li>
 <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM インスペクタ</a> (Opera のインスペクタもこれと同じ動作です)</li>
 <li><a href="https://developer.apple.com/library/content/documentation/NetworkingInternetWeb/Conceptual/Web_Inspector_Tutorial/">Safari DOM インスペクタおよびスタイルエクスプローラー (英語)</a></li>
</ul>

<h2 id="The_JavaScript_console">The JavaScript console</h2>

<p>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:</p>

<p>If the developer tools are already open, click or press the Console tab.</p>

<p>If not, Firefox allows you to open the console directly using <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> or using the menu command: Menu <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ Web Developer </span></em><em><span class="Unicode">➤ Web Console, </span></em><span class="Unicode">or </span><em>Tools ➤</em></span><em> Web Developer ➤ Web Console. </em>On other browser, open the developer tools and then click the Console tab.</p>

<p>This will give you a window like the following:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16212/console_only.png" style="border: 1px solid black; display: block; height: 187px; margin: 0px auto; width: 672px;"></p>

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

<ol>
 <li>
  <pre class="brush: js">alert('hello!');</pre>
 </li>
 <li>
  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre>
 </li>
 <li>
  <pre class="brush: js">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);</pre>
 </li>
</ol>

<p>Now try entering the following incorrect versions of the code and see what you get.</p>

<ol>
 <li>
  <pre class="brush: js">alert('hello!);</pre>
 </li>
 <li>
  <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
 </li>
 <li>
  <pre class="brush: js">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);</pre>
 </li>
</ol>

<p>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!</p>

<h3 id="Find_out_more_2">Find out more</h3>

<p>Find more out about the JavaScript console in different browsers:</p>

<ul>
 <li><a href="/ja/docs/Tools/Web_Console">Firefox Web Console</a></li>
 <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li>
 <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Opera's inspector works the same as this)</li>
 <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li>
</ul>

<h2 id="あわせて参照">あわせて参照</h2>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li>
</ul>