files/ja/tools/dom_property_viewer/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

---
title: DOM プロパティビューアー
slug: Tools/DOM_Property_Viewer
tags:
  - DOM
  - Tools
  - Web Development
translation_of: Tools/DOM_Property_Viewer
---
<div>{{ToolsSidebar}}</div>

<div class="blockIndicator geckoVersionNote">DOM プロパティビューアーは Firefox 48 の新機能です。これはデフォルトで無効にしています。<a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション</a> で有効化できます。</div>

<p>DOM プロパティビューアーは、現在のページまたは <a href="/ja/docs/tools/Working_with_iframes">選択したフレーム</a> の {{domxref("window")}} オブジェクトから始まる {{Glossary("DOM")}} のプロパティを、展開可能なツリー構造で調査できるツールです。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13098/DOM%20Inspector.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 843px;"></p>

<h2 id="Enabling_the_DOM_Property_Viewer" name="Enabling_the_DOM_Property_Viewer">DOM プロパティビューアーを有効化する</h2>

<p>DOM プロパティビューアーはデフォルトで無効化しています。<a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション </a>を開いて、"標準の Firefox 開発ツール" の "DOM" にチェックを入れると有効化されます。</p>

<h2 id="Opening_the_DOM_Property_Viewer" name="Opening_the_DOM_Property_Viewer">DOM プロパティビューアーを開く</h2>

<p>有効化すると、Firefox メニューパネル (メニューバーを表示している場合や macOS ではツールメニュー配下) の Web 開発サブメニュー内にある "DOM" を選択する、あるいはキーボードショートカット <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>W</kbd> を押下して DOM プロパティビューアーを開くことができます。</p>

<p>DOM プロパティビューアーがアクティブになっている<a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox"> ツールボックス </a>が、ブラウザウィンドウの下部に現れます。ツールボックスでは "DOM" という名前です。</p>

<h2 id="DOM_Property_Viewer_user_interface" name="DOM_Property_Viewer_user_interface">DOM プロパティビューアーのユーザインターフェイス</h2>

<h3 id="DOM_tree" name="DOM_tree">DOM ツリー</h3>

<p>DOM のさまざまなプロパティを、展開可能なツリーとして表示します。左側にプロパティの名称、右側にプロパティの値を表示します。オブジェクトのプロパティや配列のアイテムは、3 個まで表示します。プロパティに多くの要素が存在する場合は "more..." という注釈がつきます。すべての要素を確認するには、プロパティの項目をクリックしなければなりません。錠前のアイコンは、書き込み不可のプロパティであることを示します。</p>

<h3 id="Refreshing_the_display" name="Refreshing_the_display">表示内容を更新する</h3>

<p>DOM が変化したときは、<em>Refresh</em> ボタンを押して表示内容を更新できます:</p>

<p><img alt="Button to update the DOM Inspector display" src="https://mdn.mozillademos.org/files/13102/DOM%20Inspector%20Refresh%20button.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 852px;"></p>

<h3 id="Filtering" name="Filtering">フィルタリング</h3>

<p>ツールバー内に、検索ボックスがあります:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13100/DOM%20Inspector%20search%20box.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 851px;"></p>

<p>これは、検索文字列にマッチするアイテムのみ表示するようフィルタリングします。名称に検索文字列を含むアイテムがマッチします。マッチングの際は大文字・小文字を区別します。</p>