diff options
Diffstat (limited to 'files/ja/orphaned/tools')
27 files changed, 1351 insertions, 0 deletions
diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html new file mode 100644 index 0000000000..1ed0f6d538 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html @@ -0,0 +1,44 @@ +--- +title: DOM Inspector FAQ +slug: DOM_Inspector_FAQ +tags: + - DOM_Inspector +translation_of: Tools/Add-ons/DOM_Inspector/DOM_Inspector_FAQ +--- +<div>{{ToolsSidebar}}</div><h3 id="Web_.E3.82.B5.E3.82.A4.E3.83.88.E3.82.92.E8.AA.BF.E3.81.B9.E3.82.8B.E3.81.AB.E3.81.AF.EF.BC.9F" name="Web_.E3.82.B5.E3.82.A4.E3.83.88.E3.82.92.E8.AA.BF.E3.81.B9.E3.82.8B.E3.81.AB.E3.81.AF.EF.BC.9F">Web サイトを調べるには？</h3> + +<p>Inspector の URL バーに URL を入力して Enter キーを押します。あるいは、Inspector の {{ mediawiki.external('ファイル') }} メニューから {{ mediawiki.external('URL を Inspect') }} を選びます。開いている XUL ウィンドウを調べたいのであれば、{{ mediawiki.external('ファイル') }} メニューから {{ mediawiki.external('ウィンドウを Inspect') }} を選びます。</p> + +<h3 id=".E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AE_DOM_.E3.83.8E.E3.83.BC.E3.83.89.E3.83.93.E3.83.A5.E3.83.BC.E3.81.A7.E4.B8.80.E9.83.A8.E3.81.AE.E3.83.8E.E3.83.BC.E3.83.89.E3.81.8C.E8.B5.A4.E8.89.B2.E8.A1.A8.E7.A4.BA.E3.81.95.E3.82.8C.E3.82.8B.E3.81.AE.E3.81.AF.E3.81.AA.E3.81.9C.EF.BC.9F" name=".E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AE_DOM_.E3.83.8E.E3.83.BC.E3.83.89.E3.83.93.E3.83.A5.E3.83.BC.E3.81.A7.E4.B8.80.E9.83.A8.E3.81.AE.E3.83.8E.E3.83.BC.E3.83.89.E3.81.8C.E8.B5.A4.E8.89.B2.E8.A1.A8.E7.A4.BA.E3.81.95.E3.82.8C.E3.82.8B.E3.81.AE.E3.81.AF.E3.81.AA.E3.81.9C.EF.BC.9F">ドキュメントの DOM ノードビューで一部のノードが赤色表示されるのはなぜ？</h3> + +<p>これらのノードは <a href="ja/XBL/XBL_1.0_Reference#.E7.84.A1.E5.90.8D.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.84">無名コンテントノード</a> であり、元のドキュメントによって生成されて DOM にあるものではないのです。</p> + +<h3 id=".E3.81.AA.E3.82.8B.E3.81.BB.E3.81.A9.E3.80.82.E3.81.A7.E3.81.AF.E3.80.81.E3.81.93.E3.82.8C.E3.82.89.E3.81.AE.E7.84.A1.E5.90.8D.E3.83.8E.E3.83.BC.E3.83.89.E3.82.92.E8.A1.A8.E7.A4.BA.E3.81.97.E3.81.9F.E3.81.8F.E3.81.AA.E3.81.84.E5.A0.B4.E5.90.88.E3.81.AF.E3.81.A9.E3.81.86.E3.81.99.E3.82.8C.E3.81.B0.E3.81.84.E3.81.84.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F" name=".E3.81.AA.E3.82.8B.E3.81.BB.E3.81.A9.E3.80.82.E3.81.A7.E3.81.AF.E3.80.81.E3.81.93.E3.82.8C.E3.82.89.E3.81.AE.E7.84.A1.E5.90.8D.E3.83.8E.E3.83.BC.E3.83.89.E3.82.92.E8.A1.A8.E7.A4.BA.E3.81.97.E3.81.9F.E3.81.8F.E3.81.AA.E3.81.84.E5.A0.B4.E5.90.88.E3.81.AF.E3.81.A9.E3.81.86.E3.81.99.E3.82.8C.E3.81.B0.E3.81.84.E3.81.84.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F">なるほど。では、これらの無名ノードを表示したくない場合はどうすればいいのでしょう？</h3> + +<p>{{ mediawiki.external('表示') }} メニューの {{ mediawiki.external('無名コンテントを表示') }} からチェックを外せば Inspector の中で無名ノードを隠せます。</p> + +<h3 id=".E5.85.83.E3.81.AE.E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AB.E3.81.AA.E3.81.84.E7.A9.BA.E3.81.AE_.23text_.E3.83.8E.E3.83.BC.E3.83.89.E3.81.8C.E3.81.84.E3.81.A3.E3.81.B1.E3.81.84.E3.81.82.E3.82.8A.E3.81.BE.E3.81.99.E3.80.82.E3.81.93.E3.82.8C.E3.82.89.E3.81.AF.E4.BD.95.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F_.E3.81.A9.E3.81.86.E3.81.97.E3.81.A6.E5.AD.98.E5.9C.A8.E3.81.97.E3.81.A6.E3.80.81.E3.81.A9.E3.81.86.E3.81.99.E3.82.8C.E3.81.B0.E5.8F.96.E3.82.8A.E9.99.A4.E3.81.91.E3.82.8B.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F" name=".E5.85.83.E3.81.AE.E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AB.E3.81.AA.E3.81.84.E7.A9.BA.E3.81.AE_.23text_.E3.83.8E.E3.83.BC.E3.83.89.E3.81.8C.E3.81.84.E3.81.A3.E3.81.B1.E3.81.84.E3.81.82.E3.82.8A.E3.81.BE.E3.81.99.E3.80.82.E3.81.93.E3.82.8C.E3.82.89.E3.81.AF.E4.BD.95.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F_.E3.81.A9.E3.81.86.E3.81.97.E3.81.A6.E5.AD.98.E5.9C.A8.E3.81.97.E3.81.A6.E3.80.81.E3.81.A9.E3.81.86.E3.81.99.E3.82.8C.E3.81.B0.E5.8F.96.E3.82.8A.E9.99.A4.E3.81.91.E3.82.8B.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F">元のドキュメントにない空の #text ノードがいっぱいあります。これらは何でしょう？ どうして存在して、どうすれば取り除けるのでしょう？</h3> + +<p>これらのテキストノードは実際は要素間の改行とスペースなのです。どうしてそれらを表示するのかについての長々とした議論は {{ Bug(26179) }} で行われています。</p> + +<p>都合の良いことに、{{ mediawiki.external('表示') }} メニューの {{ mediawiki.external('ホワイトスペースノードを表示') }} からチェックを外せば、Inspector の中でこれらの <a href="ja/Whitespace_in_the_DOM">ホワイトスペースノード</a> を隠せます。ただし、すべての空のテキストノードを隠せるわけではありません。連続するホワイトスペースをユーザエージェントがまとめることを CSS の <code><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-white-space">white-space</a></code> プロパティの値で制限しているノードが隠されることはありません。</p> + +<h3 id="DOM_.E3.83.84.E3.83.AA.E3.83.BC.E4.B8.AD.E3.81.AE.E7.89.B9.E5.AE.9A.E3.81.AE.E3.83.8E.E3.83.BC.E3.83.89.E3.82.92.E6.8E.A2.E3.81.99.E3.81.AE.E3.81.8C.E5.A4.A7.E5.A4.89.E3.81.A7.E3.81.99.E3.80.82.E3.83.84.E3.83.AA.E3.83.BC.E4.B8.AD.E3.82.92.E6.8E.A2.E3.81.99.E4.BB.A5.E5.A4.96.E3.81.AB.E3.82.82.E3.81.A3.E3.81.A8.E6.89.8B.E6.97.A9.E3.81.8F.E3.81.A7.E3.81.8D.E3.82.8B.E6.96.B9.E6.B3.95.E3.81.AF.E3.81.82.E3.82.8A.E3.81.BE.E3.81.9B.E3.82.93.E3.81.8B.EF.BC.9F" name="DOM_.E3.83.84.E3.83.AA.E3.83.BC.E4.B8.AD.E3.81.AE.E7.89.B9.E5.AE.9A.E3.81.AE.E3.83.8E.E3.83.BC.E3.83.89.E3.82.92.E6.8E.A2.E3.81.99.E3.81.AE.E3.81.8C.E5.A4.A7.E5.A4.89.E3.81.A7.E3.81.99.E3.80.82.E3.83.84.E3.83.AA.E3.83.BC.E4.B8.AD.E3.82.92.E6.8E.A2.E3.81.99.E4.BB.A5.E5.A4.96.E3.81.AB.E3.82.82.E3.81.A3.E3.81.A8.E6.89.8B.E6.97.A9.E3.81.8F.E3.81.A7.E3.81.8D.E3.82.8B.E6.96.B9.E6.B3.95.E3.81.AF.E3.81.82.E3.82.8A.E3.81.BE.E3.81.9B.E3.82.93.E3.81.8B.EF.BC.9F">DOM ツリー中の特定のノードを探すのが大変です。ツリー中を探す以外にもっと手早くできる方法はありませんか？</h3> + +<p>ご心配なく。ノード名、ID、あるいは属性と値の組み合わせで検索できます。検索したいドキュメントを調べている Inspector ウィンドウの {{ mediawiki.external('検索') }} メニューから {{ mediawiki.external('ノードを検索') }} を選んで検索条件を入力すればよいのです。</p> + +<p>ノードについて何も分かっていないなら、それをクリックして選択してみることもできます。そのノードをビューの中に表示させておいて、{{ mediawiki.external('検索') }} メニューから {{ mediawiki.external('クリックで要素を選択') }} を選び、それから調べたい要素をクリックするのです。</p> + +<div class="originaldocinfo"> +<h2 id=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1" name=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1">原文書の情報</h2> + +<ul> + <li>著者: Christopher Aillon</li> + <li>最終更新日: November 11, 2003</li> + <li>著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">詳細</a></li> +</ul> +</div> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM_Inspector_FAQ" } ) }}</p> diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..24db8f727c --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,69 @@ +--- +title: DOM Inspector +slug: DOM_Inspector +tags: + - DOM + - 'DOM:Tools' + - DOM_Inspector + - Extensions + - 'Extensions:Tools' + - Themes + - 'Themes:Tools' + - Tools + - Web Development + - 'Web Development:Tools' + - XUL + - 'XUL:Tools' +translation_of: Tools/Add-ons/DOM_Inspector +--- +<div>{{ToolsSidebar}}</div><p><strong>DOM Inspector</strong>（別名 <strong>DOMi</strong>）は、文書（普通はウェブページまたは <a href="ja/XUL">XUL</a> ウィンドウ）の <a href="ja/DOM">Document Object Model</a> を調査、ブラウズ、編集することができる開発ツールです。ドキュメントとその中のすべてのノードを様々な視点から見ることができる二分割ウィンドウを用いて DOM の階層を探索することができます。</p> + +<div class="note"> +<p>このツールは Firefox や Thunderbird のような XUL ベースのアプリケーションのためのアドオンです。 Firefox の中に組み込まれた DOM インスペクターについては、 <a href="/ja/docs/Tools/Page_Inspector">Page Inspector</a> のドキュメントをご覧ください。</p> +</div> + +<h2 id="Documentation" name="Documentation">ドキュメンテーション</h2> + +<dl> + <dt><a href="/ja/DOM_Inspector/Introduction_to_DOM_Inspector" title="ja/DOM_Inspector/Introduction_to_DOM_Inspector">DOM Inspector 入門</a></dt> + <dd>DOM Inspector を始めるのに役立つガイド付きのチュートリアルです。</dd> +</dl> + +<dl> + <dt><a href="/ja/DOM_Inspector/DOM_Inspector_FAQ" title="ja/DOM_Inspector/DOM_Inspector_FAQ">DOM Inspector FAQ</a></dt> + <dd><small>DOM Inspector に関するよくある質問への解答です。</small></dd> +</dl> + +<dl> + <dt><a class="external" href="http://kb.mozillazine.org/DOM_Inspector">MozillaZine の DOM Inspector ページ</a> (英語)</dt> + <dd>DOM Inspector に関するさらなる情報が載っています。</dd> + <dt><a href="http://asurkov.blogspot.com/2013/02/build-dom-inspector.html">DOM Inspector をビルドするには</a> (英語)</dt> + <dd>ソースファイルから DOM Inspector をビルドするブログの投稿です。</dd> +</dl> + +<h2 id="Getting_DOM_Inspector" name="Getting_DOM_Inspector">DOM Inspector の入手</h2> + +<dl> + <dt>Firefox と Thunderbird</dt> + <dd><a class="link-https" href="https://addons.mozilla.org/ja/firefox/addon/6622" title="https://addons.mozilla.org/ja/firefox/addon/6622">DOM Inspector</a> は AMO のウェブサイトからダウンロードしてインストールできます。（AMO を Firefox で閲覧している Thunderbird のユーザーはインストールのリンクを保存するか、 <a class="link-https" href="https://addons.mozilla.org/ja/thunderbird/addon/6622" title="https://addons.mozilla.org/ja/thunderbird/addon/6622">DOM Inspector for Thunderbird</a> のページに移動してください。）</dd> +</dl> + +<dl> + <dt>Thunderbird 2</dt> + <dd><a class="link-https" href="https://addons.mozilla.org/ja/thunderbird/addon/1806">DOM Inspector for Thunderbird 2</a> が <a class="link-https" href="https://addons.mozilla.org/ja/thunderbird/">Thunderbird Add-ons</a> から利用できます。または、以下のオプションで自分自身で Thunderbird をビルドしてください。</dd> +</dl> + +<pre>ac_add_options --enable-extensions="default inspector" +ac_add_options --enable-inspector-apis +</pre> + +<dl> + <dt>Mozilla Suite と SeaMonkey</dt> + <dd><small>{{ mediawiki.external('ツール') }} メニューから {{ mediawiki.external('Web 開発') }} > {{ mediawiki.external('DOM Inspector') }} を選択してください。{{ mediawiki.external('編集') }} > {{ mediawiki.external('設定') }} > {{ mediawiki.external('詳細') }} > {{ mediawiki.external('DOM Inspector') }} でサイドバーパネルをインストールすれば、インスペクタパネルを開いたまま Web サイトを訪れるだけで DOM を検査できます。</small></dd> +</dl> + +<h2 id="Report_a_bug_in_DOM_Inspector" name="Report_a_bug_in_DOM_Inspector">DOM Inspector のバグを報告する</h2> + +<p>便利なように、<a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&product=Other%20Applications&component=DOM%20Inspector">Bugzilla の "DOM Inspector"</a> と名付けられたコンポーネントを使用してください。</p> + +<p>そこにいる <a href="https://hg.mozilla.org/dom-inspector" title="https://hg.mozilla.org/dom-inspector">DOM Inspector のコード</a> を知っている人を探すには、 <a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="https://wiki.mozilla.org/Modules/All#DOM_Inspector"><span class="external">DOM Inspector module listing</span></a> 参照してください。</p> diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html new file mode 100644 index 0000000000..c67e458229 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html @@ -0,0 +1,245 @@ +--- +title: DOM インスペクタの内部構造 +slug: DOM_Inspector/Internals +tags: + - コード + - ソース + - ツール + - 組織 +translation_of: Tools/Add-ons/DOM_Inspector/Internals +--- +<div>{{ToolsSidebar}}</div> + +<p>DOMインスペクタには3つの主要な面があります。 あなたが最も慣れ親しんでいるのは、<code>inspector.xul</code>ベースの主UIです。これは、DOM Inspectorが明示的にサポートしているアプリケーション（オーバーレイを介して配置されたメニューアイテム）からCtrl + Shift + I（またはCmd + Shift + I）を押すと表示される2ペインのインスペクタです。</p> + +<p><img alt="DOM Inspector primary UI inspecting browser.xul" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p> + +<p>DOMインスペクタのプライマリUIに加えて、若干異なる（オブジェクトインスペクタとSeaMonkeyで使用されるDOMインスペクタのサイドバー）2つのトップレベルのインスペクタがあります。最初に、<code>inspector.xul</code>とそのエントリポイントに焦点を当て、後でこれらの他のインスペクタがどのように異なるかを説明するために焦点を絞ります。</p> + +<h2 id="高水準の観点からのDOMインスペクタ">高水準の観点からのDOMインスペクタ</h2> + +<p>DOMインスペクタのプライマリUIは、いくつかのツールバーと<strong>パネルセット</strong>で構成されています。パネルセットには2つの<strong>パネル</strong>が含まれています。 一方のパネルは検査された文書の変更に反応し、他方のパネルは第1パネルの選択の変化に反応する。これらはそれぞれドキュメントパネルとオブジェクトパネルです。（内部的には、パネルは「ペイン」と呼ばれることがありますが、パネルセットは常に「パネルセット」と呼ばれます）。</p> + +<p>パネルの目的は利用可能なビューアを管理することです。各パネルの上部には、ビューアリストから表示するビューア、現在アクティブなビューアの名前を表示するラベル、ビューア固有のコマンドを発行するための別のメニューボタンを選択できるメニューボタンが含まれているツールバーがあります 。</p> + +<p>ビューアは動的にロードされます。 パネルをあるビューアから別のビューアに切り替えると、古いビューアが破棄され、新しいビューアがその場所にロードされます。このようにして、パネルセットとパネルはフレームセットとフレームのように機能します。各パネルには実際には匿名の<code><a href="/ja/docs/Mozilla/Tech/XUL/browser" title="en/XUL/browser">browser</a></code>が含まれており、個々のビューアはブラウザに読み込まれた別々のドキュメントに存在するため、この比較は非常に適切です。 この分離により、視聴者はXUL、CSS、またはJSの衝突を心配することなく、ビューアのXULを独自のドキュメントで定義し、独自のスコープでロードすることができます。 これのもう1つの便利な結果は、適切に設定された開発プロファイルを使用すると、現在のビューアから戻って戻るだけで、開発の変更の影響をほとんど見ることができるということです。</p> + +<p>ビューアが書かれている方法についてこれを知っているので、私たちはDOMインスペクタのソースがどのように整理されているかを見ることができます。</p> + +<h2 id="ソースコードの構成">ソースコードの構成</h2> + +<p>DOM インスペクタリポジトリの最上位ディレクトリの内容は次のようになります</p> + +<ul> + <li>base/ + <ul> + <li>js/ + <ul> + <li>inspector-cmdline.js</li> + <li>Makefile.in</li> + </ul> + </li> + </ul> + </li> + <li>build/ + <ul> + <li>install.js</li> + <li>Makefile.in</li> + </ul> + </li> + <li>resources/ + <ul> + <li>content/ + <ul> + <li><var>…</var></li> + </ul> + </li> + <li>locale/ + <ul> + <li><var>…</var></li> + </ul> + </li> + <li>skin/ + <ul> + <li><var>…</var></li> + </ul> + </li> + <li>Makefile.in</li> + </ul> + </li> + <li>install.rdf</li> + <li>jar.mn</li> + <li>Makefile.in</li> + <li>makefiles.sh</li> +</ul> + +<p>ほとんどすべての興味深いものは resources/content/ にあります。その内容は次のようになります。</p> + +<ul> + <li>extensions/ + <ul> + <li>…</li> + </ul> + </li> + <li>jsutil/ + <ul> + <li>…</li> + </ul> + </li> + <li>prefs/ + <ul> + <li>…</li> + </ul> + </li> + <li>res/ + <ul> + <li>…</li> + </ul> + </li> + <li>tests/ + <ul> + <li>…</li> + </ul> + </li> + <li>viewers/ + <ul> + <li>…</li> + </ul> + </li> + <li>browserOverlay.xul</li> + <li>commandOverlay.xul</li> + <li>editingOverlay.xul</li> + <li>Flasher.js</li> + <li>hooks.js</li> + <li>inspector.css</li> + <li>inspector.js</li> + <li>inspectorOverlay.xul</li> + <li>inspector.xml</li> + <li>inspector.xul</li> + <li>keysetOverlay.xul</li> + <li>object.js</li> + <li>object.xul</li> + <li>popupOverlay.xul</li> + <li>sidebar.js</li> + <li>sidebar.xul</li> + <li>statusbarOverlay.xul</li> + <li>tasksOverlay-cz.xul</li> + <li>tasksOverlay-ff.xul</li> + <li>tasksOverlay-mobile.xul</li> + <li>tasksOverlay-sb.xul</li> + <li>tasksOverlay-tb.xul</li> + <li>tasksOverlay.xul</li> + <li>toolboxOverlay.xul</li> + <li>utils.js</li> + <li>venkmanOverlay.xul</li> + <li>ViewerRegistry.js</li> +</ul> + +<h3 id="オーバーレイ">オーバーレイ</h3> + +<p>オーバーレイがたくさんあることに気付くでしょう。 いくつかのオーバーレイは、ホスト統合オーバーレイとして記述することも、共有構造オーバーレイとして記述することもできます。</p> + +<h4 id="ホスト統合オーバーレイ">ホスト統合オーバーレイ</h4> + +<p>DOM Inspectorは汎用の拡張機能であり、Mozillaツールキットホストアプリケーションでの使用に適しています。 しかし、DOM Inspectorをホストアプリケーションで使用するには、メニュー項目やCtrl + Shift + I（またはCmd + Shiftなどの省略可能なキーボードショートカットなど）でDOM Inspectorを起動する方法が必要です + I）。 ホストアプリケーションはこれらの機能を提供する必要があります（通常、DOM Inspectorにはアプリケーションもバンドルされています）。または、DOM Inspectorは、ホスト統合オーバーレイで独自のメニュー項目とキーボードショートカットを提供することによって明示的にサポートする必要があります。</p> + +<p>DOM インスペクタは、独自のホスト統合オーバーレイを提供することにより、いくつかのMozillaプロジェクトアプリケーションを明示的にサポートしています。 これらのオーバーレイは次のとおりです。</p> + +<ul> + <li>browserOverlay.xul</li> + <li>tasksOverlay-cz.xul</li> + <li>tasksOverlay-ff.xul</li> + <li>tasksOverlay-mobile.xul</li> + <li>tasksOverlay-sb.xul</li> + <li>tasksOverlay-tb.xul</li> + <li>tasksOverlay.xul</li> + <li>venkmanOverlay.xul</li> + <li>prefs/prefsOverlay.xul</li> +</ul> + +<p><a href="https://developer.mozilla.org/ja/docs/DOM_Inspector/en/chrome.manifest" title="en/chrome.manifest">chrome manifest</a> をさらに調べると、DOM インスペクタはそのプライマリウィンドウで条件付きオーバーレイも使用することがわかります。</p> + +<pre><code>overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} +overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</code> +</pre> + +<pre><code>overlay chrome://inspector/content/inspector.xul chrome://browser/content/baseMenuOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}</code> +</pre> + +<p>これらのホスト提供のオーバーレイにより、DOM インスペクタはホストアプリケーションと同様のルックアンドフィールを採用することができます。(上記はそれぞれ SeaMonkey と Firefox)</p> + +<p>resources/contents/ ディレクトリには、ホスト統合オーバーレイのカテゴリに該当しないオーバーレイがいくつかあります。これは、DOM インスペクタも共有オーバーレイを使用して独自のUIを構築するためです。</p> + +<h4 id="共有構造オーバーレイ">共有構造オーバーレイ</h4> + +<p>DOM インスペクタのメインのUIであるinspector.xulの内容を見てみると、目に見える要素はほとんどないことがわかります。この記事の執筆時点では、空の<code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="en/XUL/menubar">menubar</a></code>と空の<code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar" title="en/XUL/toolbar">toolbar</a></code>を含む<code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="en/XUL/toolbox">toolbox</a></code>と、空の<code><a href="/ja/docs/Mozilla/Tech/XUL/vbox" title="en/XUL/vbox">vbox</a></code>があります。</p> + +<pre><code> <toolbox id="tbxInsToolbox"> + <menubar id="mbrInspectorMain"/> + <toolbar id="tbInspectorPrimary"/> + </toolbox> + + <vbox id="bxInspectorMain" flex="1"/></code> +</pre> + +<p>ここで定義されているメニュー、ツールバー項目などはありません。<code><a href="/ja/docs/Mozilla/Tech/XUL/keyset" title="en/XUL/keyset">key</a></code> や <code><a href="/ja/docs/Mozilla/Tech/XUL/commandset" title="en/XUL/commandset">commandset</a></code> など、表示されない要素のほとんどは inspector.xul で定義されていません。これらは一連のオーバーレイから取り込まれ、DOMインスペクタの UI を定義する XUL を個別のユニットに編成することができます。inspector.xul 自体は主な DOM インスペクタウィンドウの基本的な構造とレイアウトを説明するスケルトンであり、ほとんどのコンテンツはオーバーレイによって追加されたままになっています。</p> + +<p>モジュラーオーバーレイを使用すると、すべてのオーバーレイが複数のコンシューマによって共有されるわけではありませんが、一般的なXULをDOM インスペクタのUIを構成するさまざまなドキュメントで共有することもできます。単一コンシューマオーバレイは、組織専用です。</p> + +<p>場合によっては、オーバーレイは他のオーバーレイによってオーバーレイされます。ホスト統合に使用されるオーバーレイを無視して、オーバーレイをオーバーレイするファイルにオーバーレイを子として接続することによって得られるツリー構造を想像すると、特定のファイルのホストに依存しないオーバーレイツリーを視覚化できます。inspector.xul用に拡張されたホストに依存しないオーバーレイツリーがあります：</p> + +<ul> + <li><a class="external" rel="freelink">chrome://inspector/content/inspector.xul</a> + + <ul> + <li><a class="external" rel="freelink">chrome://inspector/content/inspectorOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://inspector/content/toolboxOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://inspector/content/popupOverlay.xul</a> + <ul> + <li><a class="external" rel="freelink">chrome://inspector/content/editingOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...pupOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://inspector/content/viewers/s...pupOverlay.xul</a></li> + </ul> + </li> + <li><a class="external" rel="freelink">chrome://inspector/content/commandOverlay.xul</a> + <ul> + <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...andOverlay.xul</a></li> + </ul> + </li> + <li><a class="external" rel="freelink">chrome://inspector/content/keysetOverlay.xul</a> + <ul> + <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...setOverlay.xul</a></li> + </ul> + </li> + <li><a class="external" rel="freelink">chrome://inspector/content/statusbarOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://global/content/globalOverlay.xul</a></li> + </ul> + </li> +</ul> + +<p>(ビューアのサブディレクトリ (viewers/dom およびviewers/styleRules) からのオーバーレイは、オーバーレイされたファイル内の <code>xul-overlay</code> 処理命令を使用して明示的にインポートされるのではなく、DOM インスペクタのクロムマニフェストで <a href="/ja/docs/Mozilla/Chrome_Registration" title="/en/chrome.manifest#overlay"><code>overlay</code> ディレクティブ</a> の結果としてロードされることに注意してください。)</p> + +<dl> + <dt>inspectorOverlay.xul</dt> + <dd> + <p>これは、依存関係を含む最上位のインスペクタが必要とするスクリプトをインポートします。 さらに、DOMインスペクタウィンドウの本体、つまり、パネルセット、ドキュメントおよびオブジェクトビューアパネル、およびドキュメントブラウザペインのコンテンツを定義します。 （ブラウザー・ペインは、文書およびオブジェクト・パネルが存在するという意味ではビューアー・パネルではなく、パネル・セットに関して上で定義したパネルの種類であり、ここでは「ペイン」がブラウザー・ペインに関して緩やかな意味で使用されています 一般的なUIフィクスチャについて説明します）。</p> + </dd> + <dt>toolboxOverlay.xul</dt> + <dd> + <p>このオーバーレイは、ツールバーのボタン、ロケーションバー、および「Inspect」ボタンを含むインスペクタツールボックスに表示されます。 toolboxOverlay.xulは、メニュー自体の内容を定義することなく、メニューバーの構造も定義します。</p> + </dd> + <dt>popupOverlay.xul</dt> + <dd> + <p>このオーバーレイは、メニューバーのメニューの静的構造の大部分を定義していますが、いくつかの例外があります。明らかな理由から、動的メニューの内容はここでは定義されていません。動的メニューには、[ファイル]メニューの[インスペクション]メニュー（[コンテンツドキュメントの検査]および[クロムドキュメントの検査]）ポップアップ、[表示]メニューの[ドキュメントビューア]および[オブジェクトビューア]メニューがあります。そのビューアのポップアップオーバーレイ（resources / content / viewer / dom / popupOverlay.xul）によって、DOMノードビューア（「Blink Selected Element」など）のみに影響を与える「表示」メニューの設定メニューが追加されます。 DOMメニュービューア以外の他のビューアはこれらの機能をサポートしていないので、[編集]メニューの[検索]メニューと[クリックして要素を選択]メニュー項目でも同じことが当てはまります。<br> + <br> + 他の編集メニュー項目は、複数のビューアのコンテキストメニューでも使用されます。そのため、ここでは menuitems の ID だけが参照され、 editingOverlay.xul から完全な定義がインポートされます。コンテキストメニューにこれらのメニューアイテムの1つまたは複数を含むビューアは、同じプラクティスに従います。<br> + <br> + インスペクタメニューに使用されるツールチップ（文書のタイトル（存在する場合）とそのメニューアイテムのURIを示すために使用されるもの）もここで定義されます。</p> + </dd> + <dt>commandOverlay.xul</dt> + <dd>外部 <code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="en/XUL/command">command</a></code> 要素に委譲する popupOverlay.xul で提供されるメニュー項目には、ここで定義されたコマンドがあります。</dd> + <dt>keysetOverlay.xul</dt> + <dd>いくつかの popupOverlay.xul 提供のメニュー項目には、ここで定義された <code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="en/XUL/key">key</a></code> があります。この記事の執筆時点では、編集メニュー項目に対応するキーはすべて正当な理由でeditingOverlayに存在します。</dd> + <dt>statusbarOverlay.xul</dt> + <dd>これは、DOM インスペクタのステータスバーの内容を定義します。 DOM インスペクタにはステータスバーがありませんので、これはまったく役に立たないものです。</dd> +</dl> diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html new file mode 100644 index 0000000000..8cbdc19ec0 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html @@ -0,0 +1,96 @@ +--- +title: DOMインスペクタのイントロダクション +slug: DOM_Inspector/Introduction_to_DOM_Inspector +tags: + - DOM インスペクタ +translation_of: Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>DOMインスペクタは Mozilla の拡張機能で、SeaMonkey の <strong>Tools > Web Development</strong> メニューからアクセスすることも、FirefoxとThunderbirdのToolsメニューからDOMインスペクタメニュー項目を選択することも、Ctrl/Cmd+Shift+I を使って開くこともできます。 DOMインスペクタはスタンドアロンです。 すべてのツールキットアプリケーションをサポートしており、独自のXULRunnerアプリに組み込むことも可能です。DOMインスペクタは、<a href="/ja/docs/DOM/DOM_Reference">DOM</a>の状態を検証するサニティチェックとして機能したり、必要に応じてDOMを手で操作するために使用できます。</p> + +<div class="note"><strong>メモ:</strong> Firefox 3以降、FirefoxではデフォルトでDOMインスペクタは含まれていません。MozillaアドオンWebサイトから<a href="https://addons.mozilla.org/ja/firefox/addon/dom-inspector-6622/">ダウンロードしてインストール</a>する必要があります。</div> + +<p>最初にDOM Inspectorを起動すると、Mozillaのメインブラウザのような2つのウィンドウのアプリケーションウィンドウが表示されます。 ブラウザと同様、DOMインスペクタにはアドレスバーと同じメニューがあります。 SeaMonkeyでは、追加のグローバルメニューが利用可能になります。</p> + +<p><img alt="domi.png" class="default internal" src="/@api/deki/files/4684/=domi.png"></p> + +<h2 id="ドキュメントの検査">ドキュメントの検査</h2> + +<p>DOMインスペクタが開くと、ホストアプリケーションに応じて関連付けられたドキュメントが読み込まれる場合と読み込まれない場合があります。 DOM インスペクタが自動的に文書を読み込んでいない場合や、検査したい文書以外の文書を読み込んでいない場合は、目的の文書をいくつか選択することができます。</p> + +<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">コンテンツ文書の検査</h3> + +<p>Inspect Content DocumentのmenupopupはFileメニューからアクセスでき、現在ロードされているコンテンツドキュメントを一覧表示します。 FirefoxとSeaMonkeyブラウザでは、これらはタブで開いたWebページになります。ThunderbirdとSeaMonkey Mail and Newsでは、表示しているメッセージはここに表示されます。<img alt="domi-inspect-content-popup.png" class="default internal" src="/@api/deki/files/4690/=domi-inspect-content-popup.png"></p> + +<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">Chromeドキュメントの検査</h3> + +<p>Inspect Chromeドキュメントのmenupopupには[ファイル]メニューからアクセスでき、現在ロードされているChromeウィンドウとサブドキュメントのリストが表示されます。ブラウザウィンドウとDOMインスペクタはすでに開いてこのリストに表示されている可能性があります。DOMインスペクタは、開いているすべてのウィンドウを追跡します。そのため、DOMインスペクタで特定のウィンドウのDOMを検査するには、通常通りにそのウィンドウにアクセスし、動的に更新されるmenulistからタイトルを選択します。</p> + +<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4689/=domi-inspect-chrome-popup.png"></p> + +<h3 id="File_.3E_Inspect_a_URL..." name="File_.3E_Inspect_a_URL...">任意のURLの検査</h3> + +<p>また、FileメニューのURL menuitemのInspectを使用するか、DOM InspectorのアドレスバーにURLを入力してInspectをクリックするかenterを押して、任意のURLのDOMを調べることもできます。 たとえば、アドレスバーにhttp://www.mozilla.orgを入力し、mozilla.orgホームページのDOM構造を確認できます。<br> + <br> + このアプローチを使用してクロム文書を検査<strong>しないでください</strong>。 代わりに、ドキュメントが通常の手段でロードされていることを確認し、検査のためにInspect Chromeドキュメントのmenupopupを使用して選択します。</p> + +<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4693/=domi-inspecting-mozilla.org.png"></p> + +<p>この方法でWebページを検査すると、DOM Inspectorウィンドウの下部にあるブラウザペインが開き、Webページが表示されます。 これにより、別のブラウザウィンドウを使用せずに、またはアプリケーションにブラウザをまったく埋め込まなくても、DOMインスペクタを使用することができます。 ブラウザペインに余分なスペースが必要な場合は、ブラウザペインを閉じることができますが、操作の視覚的な影響を監視することはできません。</p> + +<h2 id="Using_the_DOM_Inspector" name="Using_the_DOM_Inspector">DOM インスペクタの使用</h2> + +<p>興味のあるページまたはクロムのドキュメントを開くと、ドキュメントペインにDOMノードビューアがロードされ、オブジェクトペインにDOMノードビューアが読み込まれます。 DOM Nodesビューアには、DOMの構造化された階層的なビューが必要です。 ドキュメントペインをクリックすると、ビューアがリンクされていることがわかります。 DOMノードビューアから新しいノードを選択するたびに、DOMノードビューアが自動的に更新され、そのノードの情報が反映されます。 リンクされたビューアは、DOMインスペクタの使用方法を学ぶときに理解した最初の主要な側面です。</p> + +<h3 id="DOM_Inspector_Information_Types" name="DOM_Inspector_Information_Types">DOM インスペクタビューワー</h3> + +<p>これらのビューアは、DOMインスペクタが提供する2人の視聴者に過ぎないことに注意してください。他のビューアを使用することは可能ですが、今のところDOMノードビューアとDOMノードビューアの説明に固執します。<br> + <br> + DOM InspectorのドキュメントペインにあるDOM Nodesビューアを使用して、興味のあるノードを見つけて調べることができます。これがあなたのウェブとアプリケーションの開発にもたらした最大かつ最も直接的な利点の1つは、ページの興味ある部分またはユーザインターフェースの部分が定義されているマークアップおよびノードを含む。 DOMインスペクタの一般的な使い方の1つは、ユーザインターフェイスで使用されている特定のアイコンの名前と場所を見つけることです。これは簡単な作業ではありません。クロムドキュメントを調べている場合、DOMノードビューアでノードを選択すると、それらのノードのレンダリングされたバージョンがユーザーインターフェイス自体で強調表示されます。 （DOM Inspector APIのフラッシャーが特定のプラットフォームで正しく機能しないようにするバグがあることに注意してください）。<br> + <br> + たとえば、メインブラウザウィンドウを調べて、DOMノードビューアでノードを選択した場合（browser.xulにロードされているスクリプト要素の無限リストの場合のように、表示可能なUIを持たない要素を除く）、ブラウザインターフェイスのさまざまな部分が赤く点滅して強調表示されています。構造をトラバースして、DOMツリーの最上部の部分から、ユーザーが選択した検索エンジンを使用してクエリを実行できるようにする "search-go-button"アイコンなど、下位レベルのノードに移動できます。</p> + +<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p> + +<p>ここで、「検索 - 移動 - ボタン」ノードのようなノードを選択すると、複数のビューアのいずれかを選択して、そのノードに関する情報をDOM Inspectorアプリケーションウィンドウのオブジェクトペインに表示できます。 menupopupはオブジェクトペインの左上隅からアクセスします。</p> + +<p><img alt="domi-object-viewers.png" class="default internal" src="/@api/deki/files/4692/=domi-object-viewers.png"></p> + +<p>検索の実行アイコンを表示するためにファイルの実際の名前が使用されているかどうかを確認するには、このメニューからCSSルールビューアを選択して、適用されているさまざまなセレクタとルールを確認します。要素に検索アイコンを適用するルールは、クラス単純セレクタを使用し、list-style-imageプロパティを使用して現在のテーマのファイルを指し示します。<br> + <br> + ビューアメニューから利用可能なビューアのリストは、DOMインスペクタの検査能力がどれだけ広範囲であるかを示しています。以下の説明は、これらの視聴者の概要を示しています。<br> + <br> + DOMノードビューアには、ノードノードの属性、またはテキストノード、コメント、処理命令のテキストコンテンツが表示されます。属性とテキストの内容を編集することもできます。<br> + <br> + Box Modelビューアは、配置とサイズを含むXULとHTML要素に関するさまざまな指標を提供します。<br> + <br> + XBLバインディングビューアには、要素に添付されたXBLバインディングが一覧表示されます。バインディングが別のバインディングを拡張する場合、バインディングmenulistは、それらを「ルート」バインディングに降順でリストします。<br> + <br> + CSSルールビューアには、ノードに適用されるCSSルールが表示されます。また、スタイルシートビューアと組み合わせて使用すると、CSSルールビューアには、そのスタイルシートから認識されたすべてのルールが順番にリストされます。プロパティを編集することもできます。擬似要素に適用されるルールは表示されません。<br> + <br> + JavaScript Objectビューアは、オブジェクトペインのサブジェクトの階層ツリーを提供します。 JavaScriptオブジェクトビューアでは、コンテキストメニューで適切なメニュー項目を選択することによってJavaScriptを評価することもできます。</p> + +<h3 id="DOM_ノードビューワーの基本的なアクション">DOM ノードビューワーの基本的なアクション</h3> + +<h4 id="クリックで要素を選択する">クリックで要素を選択する</h4> + +<p>DOM インスペクタのもう一つの強力なインタラクティブな機能は、DOM インスペクタを開いてこの機能を有効にしたときに、<strong style="font-weight: bold;">Edit</strong><strong> > Select Element</strong> をクリックして選択するか、DOM インスペクタアプリケーションの左上にある小さな虫めがねのアイコンをクリックすると、 ロードされたWebページのどこかをクリックするか、クロム文書を調べると、クリックした要素がDOMノードビューアのドキュメントペインに表示され、オブジェクトペインに表示されます。</p> + +<h4 id="DOM内のノードの検索">DOM内のノードの検索</h4> + +<p>DOMを検査するもう1つの方法は、ID、クラス、または属性で興味のある特定の要素を検索することです。 <strong>Edit > Find Nodes...</strong> を選択するか <code>Ctrl + F</code> を押すと、DOM Inspectorには、さまざまな方法で要素を検索できる検索ダイアログが表示され、<code><F3></code> ショートカットキーを使用して段階的に検索します。</p> + +<p><img alt="domi-find-appcontent.png" class="default internal" src="/@api/deki/files/4687/=domi-find-appcontent.png"></p> + +<h4 id="動的にDOMを更新する">動的にDOMを更新する</h4> + +<p>この序論で言及するもう1つの機能は、DOM Inspectorが、Webページ、ユーザーインターフェイス、およびその他の要素についてDOMに反映された情報を動的に更新できることです。 DOM Inspectorが特定のノードまたはサブツリーに関する情報を表示すると、個々のノードとその値が表示されます（DOMでは、属性は通常、要素のサブノードです）。 これらの属性の値を編集できるメニュー項目があるコンテキストメニューと編集メニューから、このリスト内の個々の項目に対してアクションを実行できます。</p> + +<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p> + +<p>このインタラクティビティを使用すると、ディスク上のファイルに定義されているDOMを実際に変更することなく、要素のサイズを縮小したり、サイズを変更したり、アイコンを変更したり、レイアウトを微調整したりすることができます。</p> + +<p>Loving the Inspector</p> + +<p>DOM インスペクタは何かを理解することができますが、慣れてくると、Webページやインタフェースのこれらの構造化されたビューは、自分のアプリケーション開発の欠点であったことに気付くかもしれません。DOM インスペクタは、ページに関するすべての情報を明確かつ構造化された方法で提示するだけでなく、それらの構造を見つけて更新する方法を提供し、 Mozilla ブラウザで既に利用可能なショートカットやメニューから簡単にアクセスできます。Venkman (JavaScriptデバッガ) などのMozillaツールと連携して使用されるDOM Inspectorは、WebページやDOMベースのアプリケーションインターフェイスの完全な表示を提供します。</p> diff --git a/files/ja/orphaned/tools/add-ons/index.html b/files/ja/orphaned/tools/add-ons/index.html new file mode 100644 index 0000000000..9478dd0d88 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/index.html @@ -0,0 +1,18 @@ +--- +title: アドオン +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +<div>{{ToolsSidebar}}</div> + +<p>Firefoxには組み込まれていないが、別々のアドオンとして提供される開発ツールです。</p> + +<dl> + <dt><a href="https://addons.mozilla.org/ja/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt> + <dd>WebSocket接続でやりとりされるデータを調べます。</dd> +</dl> diff --git a/files/ja/orphaned/tools/css_coverage/index.html b/files/ja/orphaned/tools/css_coverage/index.html new file mode 100644 index 0000000000..cf45c2988e --- /dev/null +++ b/files/ja/orphaned/tools/css_coverage/index.html @@ -0,0 +1,149 @@ +--- +title: CSSカバレッジ +slug: Tools/CSS_Coverage +tags: + - Experimental + - Firefox + - ガイド + - ツール + - 初心者 +translation_of: Tools/CSS_Coverage +--- +<p>{{ToolsSidebar}}</p> + +<div class="note"> +<p>この機能は実験的なもので、Firefoxではまだ利用できません。</p> +</div> + +<p>CSSカバレッジは、Firefox開発者向けのコマンドセットで、使い古されていないCSSを指摘し、初期レンダリングに必要なCSSファイルの部分を示すことで、乱雑なCSSを解くのに役立ちます。</p> + +<p>これらのツールは、「使用」の定義が複雑であるため、多少実験的ですが、実際に何が起こっているかを理解する手助けとなることが期待されます。</p> + +<p>それらが一般的に使用される方法は次のとおりです。</p> + +<ul> + <li>カバレッジトラッカーを開始("<code>csscoverage start</code>")する</li> + <li>あなたのウェブサイトの代表的なページにアクセスする</li> + <li>トラッカーを停止("<code>csscoverage stop</code>")し、スタイルエディタで未使用のルールを表示する</li> + <li>各ページに表示されるルールを含むレポートを表示("<code>csscoverage report</code>")する</li> +</ul> + +<p>もう1つのコマンド("<code>csscoverage oneshot</code>")では、効果的に実行("<code>csscoverage start; csscoverage stop</code>")できます。</p> + +<h2 id="「使用」が意味するのは">「使用」が意味するのは?</h2> + +<h3 id="TLDR">TL;DR:</h3> + +<p>CSSカバレッジは、以下の例の<span style="color: #008000;"><code>tag#id.class</code></span>セレクタが一連のWebページに存在するかどうかを確認します。</p> + +<pre class="brush: css">@media thing { + tag#id.class:hover { + foo: bar; + } +}</pre> + +<h3 id="なぜ">なぜ?</h3> + +<p>あなたのCSSに次のものが設定されているとします。テスト中にマウスがスパンに入っていない場合。 ルールは使用されるでしょうか？</p> + +<pre class="brush: html"><style> + span:hover { + color: purple; + } +</style> + +<span>Test</span> +</pre> + +<p>技術的には <code>span:hover</code> は、「テスト」という言葉がいつも紫色ではなかったという点で使われていませんでした。しかしながら CSS のカバレッジは実際にルールが関連性があるか無関係かを調べることです。また <code>span:hover</code> は明らかにページとの関連性があります。</p> + +<p>同様に、あなたのCSSが次のものを持っているとします：</p> + +<pre class="brush: html"><style> + @media tv { + span { + color: purple; + } + } +</style> + +<span>Test</span> +</pre> + +<p>関連性を測定するには、テレビを自分の環境に接続する必要がありますか？</p> + +<p>しかし、「使用」は関連性だけではありません...<br> + 次のルールは適切ですか？</p> + +<pre class="brush: html"><style> + span { } +</style> + +<span>Test</span> +</pre> + +<p>ページに影響を及ぼさず安全に削除できるため、関連性がないと主張することができます。</p> + +<p>しかし、次のものはどうでしょうか？</p> + +<pre class="brush: html"><style> + span { + -o-text-curl: minor; + } +</style> + +<span>Test</span> +</pre> + +<p>それが使用されているかどうかを知っているかどうかは、おそらく検索エンジンと分析技術の使用を必要とし、おそらくサイトのサポートされているブラウザのバージョンに関する知識です。 これらはすべて特異点までこのツールの範囲を超えているとみなされます。</p> + +<p>以下の例で div ルールが "used" とみなされる理由についても説明します。</p> + +<pre class="brush: html"><style> + div { color: red; } + span { color: blue; } +</style> + +<div><span>Test</span></div> +</pre> + +<p>div ルールはページの最終的なレンダリングには影響しないので未使用だと主張できますが、この代替定義を検討してください：</p> + +<pre class="brush: html"><style> + div { color: red; border: none; } + span { color: blue; } +</style> +</pre> + +<p>ボーダールールが使用されているかどうかを知ることは難しく、他にもさまざまなバリエーションがあります。 「使用」の定義をさらに複雑にする不透明度、可視性および色変換を考慮する。 物事を単純にするために、 "use"はセレクタが要素にマッチすることを意味します。</p> + +<p>明らかに、テスト中にタッチしたスタイルシートに、テスト中に見られない特定のページだけのルールが含まれている場合は、そのルールが使用されているにもかかわらず、そのルールを「未使用」としてマークします。 実際にCSSファイルからルールを削除する前に、二重チェックの価値があります。</p> + +<h2 id="警告">警告</h2> + +<p>知っておくべきこと：</p> + +<ul> + <li>URL はテストの期間を通して参照されるたびに同じバイトセットを返すものとします。</li> + <li><a href="/ja/docs/Web/CSS/Alternative_style_sheets">代替スタイルシート</a>をトラッキングしません。</li> +</ul> + +<h2 id="バグ">バグ</h2> + +<p>私たちはいくつかの重要なバグに取り組んでいます：</p> + +<ul> + <li>現在、スタイルシートを追加するなど、JavaScript による CSSOM の変更を追跡していません。<a href="https://bugzil.la/1007533">bug 1007533</a> を参照してください。</li> + <li>スタイルエディタのマークアップはライン単位で行われていますが、現在はソースマップを処理していないため、圧縮された CSS でこれを実行すると混乱します。<a href="https://bugzil.la/1007073">bug 1007073</a> を参照してください。</li> + <li>@keyframe の情報はプリロード要約に含まれません。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1034062">bug 1034062</a> を参照してください。</li> +</ul> + +<h2 id="代替候補">代替候補</h2> + +<p>Firefox を使わずに未使用のCSSを見つけるのに役立つ複数のツールがあります。</p> + +<ul> + <li><a href="https://www.jitbit.com/unusedcss/">Unused CSS</a> <em>は再帰的にサイトをクロールして未使用の CSS セレクタを検出します。広告のない無料のオンラインツールです。</em></li> + <li><a href="https://github.com/purifycss/purifycss">PurifyCSS </a>はインストール後にコンソールツールとして使用できる NPM パッケージです</li> + <li><a href="https://unused-css.com/">unused-css.com </a>別のオンラインツール。これは無料ではありません。</li> +</ul> diff --git a/files/ja/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html b/files/ja/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html new file mode 100644 index 0000000000..b6ef21e414 --- /dev/null +++ b/files/ja/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html @@ -0,0 +1,29 @@ +--- +title: 新しいデバッガーの制限事項 +slug: Tools/Debugger/Limitations_of_the_new_debugger +translation_of: Tools/Debugger/Limitations_of_the_new_debugger +--- +<div>{{ToolsSidebar}}</div><p>バージョン 52 より、新しいデバッガーを Firefox に内蔵しています。現在、新しいデバッガーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。新しいデバッガーは旧デバッガーより高速かつ信頼性が高く、将来の開発のための基盤を提供します。</p> + +<p>しかし、旧デバッガーの一部機能をまだサポートしていません。このページでは、新しいデバッガーで未サポートである、旧デバッガーの機能を掲載します。</p> + +<p>これらの機能のほとんどは将来のリリースでサポートする予定であり、このページは適宜更新しますので注意してください。</p> + +<p>これらの機能のいずれかが必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に <code>false</code> を設定すると、旧デバッガーに戻すことができます。</p> + +<p>以下の機能は、新しいデバッガーでまったくサポートしていません。</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">DOM イベントでブレークする</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">DOM ノードのハイライトと調査</a></li> + <li><a href="/ja/docs/Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source">ソースをブラックボックス化する</a></li> +</ul> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">検索機能</a> は部分的にサポートしています。<a href="/ja/docs/Tools/Debugger/How_to/Search">ファイル名の検索やファイル内の文字列の検索</a> は可能です。しかし、以下の検索は未サポートです:</p> + +<ul> + <li>すべてのファイルにわたって検索する</li> + <li>すべてのファイルにわたって関数の定義を検索する</li> + <li>特定の行に移動する</li> + <li>表示されている変数をフィルタリングする</li> +</ul> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html new file mode 100644 index 0000000000..88d3b0d7bb --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html @@ -0,0 +1,18 @@ +--- +title: ブレークポイントの無効化 +slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +--- +<div>{{ToolsSidebar}}</div> + +<p>ブレークポイントを無効にするには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a>でブレークポイントのエントリの横にあるチェックボックスをオフにします。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>または、マウスポインタがソースリストペインのブレークポイントのエントリの上にあるときにコンテキストメニューをアクティブにし、"Disable breakpoint"を選択します。</p> + +<p>ブレークポイントを表す矢印をクリックするだけでブレークポイントを削除することもできます。</p> + +<p>すべてのブレークポイントを無効/有効にするには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a>で"Toggle all breakpoints"ボタンを使用します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html new file mode 100644 index 0000000000..573456e364 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html @@ -0,0 +1,32 @@ +--- +title: アドオンでデバッグにアクセスする +slug: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<div class="warning"> +<p>このドキュメントで説明する方法を Firefox のアドオンで使用することは、非推奨にする予定です。これらの方法を使用する新たなアドオンを作成しないでください。</p> +</div> + +<p>以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます:</p> + +<ul> + <li>window.addEventListener("Debugger:EditorLoaded") - 読み取り専用のスクリプトパネルが読み込まれたときに呼び出されます。</li> + <li>window.addEventListener("Debugger:EditorUnloaded")</li> +</ul> + +<p>関連ファイル:</p> + +<ul> + <li>chrome://browser/content/devtools/debugger-controller.js</li> + <li>chrome://browser/content/devtools/debugger-toolbar.js</li> + <li>chrome://browser/content/devtools/debugger-view.js</li> + <li>chrome://browser/content/devtools/debugger-panes.js</li> +</ul> + +<p>残念ながらデバッグを行っている範囲内のウォッチ/式を評価する API や、デバッグを行っている範囲内の変数として参照されている、ページ内の要素をハイライトする API はまだありません。(現在作業中であり、バグ <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="https://bugzilla.mozilla.org/show_bug.cgi?id=653545">653545</a> をご覧ください)</p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html new file mode 100644 index 0000000000..f16826cf46 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html @@ -0,0 +1,28 @@ +--- +title: ソースをブラックボックス化する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>現在のウェブ開発では <a href="http://jquery.com/">jQuery</a>、<a href="http://emberjs.com/">Ember</a>、<a href="http://angularjs.org/">Angular</a> のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは<a href="http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9"> ブラックボックス </a>のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。</p> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a> でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13218/debugger-black-box.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p><a href="/ja/docs/Tools/GCLI">開発ツールバー</a> を開いて <code>dbg blackbox</code> コマンドを使用すると、複数のソースをまとめてブラックボックス化できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;"></p> + +<p>ソースをブラックボックス化すると以下のようになります:</p> + +<ul> + <li>すべてのブレークポイントが無効になります。</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">デバッガーオプション</a> で [例外発生で停止] が有効であるとき、デバッガーはブラックボックス化したソース内で例外が発生しても停止しません。代わりに、スタックが (存在する場合は) ブラックボックス化していないソース内にあるフレームに戻るまで待ちます。</li> + <li>ステップ実行するとき、デバッガーはブラックボックス化したソースをスキップします。</li> +</ul> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html new file mode 100644 index 0000000000..706d844280 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html @@ -0,0 +1,22 @@ +--- +title: DOM イベントでブレークする +slug: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。</p> + +<p>始めに<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar"> ツールバー </a>上の変数/イベントペインを開くボタンをクリックして、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン </a>を開きます。そして、[イベント] タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13210/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。</p> + +<p>イベントが発生すると、リスナーの始点でコードがブレークします。</p> + +<p>{{EmbedYouTube("f-tbR8kj0K0")}}</p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html new file mode 100644 index 0000000000..bbd25b285e --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html @@ -0,0 +1,36 @@ +--- +title: eval ソースをデバッグする +slug: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> に渡される文字列や <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。</p> + +<p>これを行うために、<code>//# sourceURL</code> ディレクティブを使用してソースに名前をつけなければなりません:</p> + +<pre class="brush: js">var button = document.getElementById("clickme"); +button.addEventListener("click", evalFoo, false); + +var script = "function foo() {" + + " console.log('called foo');" + + "}" + + "foo();//# sourceURL=my-foo.js"; + +function evalFoo() { + eval(script); +}</pre> + +<p>これは、スクリプトに "my-foo.js" という名前をつけます。</p> + +<p>文字列が評価されるとデバッガーでは別のソースとして表示され、他のソースと同様にデバッグできます。また、ソースを <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">整形 </a>できます:</p> + +<p>{{EmbedYouTube("nFm8F8Anmic")}}</p> + +<p>ソースにつけた名前は、<a href="/ja/docs/Tools/Web_Console#Error_messages">ウェブコンソール </a>に現れるスタックトレースでも表示されます。</p> + +<p>また、無名の eval ソース内にある <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> 文でもデバッガーが停止します。</p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..73595678bf --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html @@ -0,0 +1,22 @@ +--- +title: ブレークポイントの無効化 +slug: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">ソースリストペイン</a> で、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>または、ソースリストペインのブレークポイントの項目にマウスポインターを載せてコンテキストメニューを開き、[ブレークポイントを無効にする] を選択します。</p> + +<p>ブレークポイントを示す矢印をクリックして、ブレークポイントを削除することもできます。</p> + +<p>すべてのブレークポイントのオン/オフを切り替えるには、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a> で [すべてのブレークポイントを有効化/無効化] ボタンをクリックしてください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html new file mode 100644 index 0000000000..7d08b706a5 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html @@ -0,0 +1,46 @@ +--- +title: 変数を調査、編集、ウォッチする +slug: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' +translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<h2 id="Examine_variables" name="Examine_variables">変数を調査する</h2> + +<p>コードがブレークポイントで停止したときはデバッガーの <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン </a>で、変数の状態を調査できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13216/debugger-variables-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>変数はスコープによってグループ化されます: Function スコープには <code>user</code> や <code>greeting</code> といった関数で定義したローカル変数はもちろん、ビルトインの <code>arguments</code> および <code>this</code> 変数も表示します。同様にグローバルスコープでは <code>localStorage</code> や <code>console</code> といったビルトインのグローバル変数だけでなく、<code>greetme</code> といった独自に定義したグローバル変数も表示します。</p> + +<p>それぞれのオブジェクトは三角印をクリックすると、プロパティを表示するように拡張できます。</p> + +<p>変数名にマウスポインターを重ねると、その変数に関する付加情報を提供するツールチップを表示します。これらのプロパティの意味について、詳しくは <a href="/ja/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a> をご覧ください。</p> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" title="#script-filter">スクリプトフィルター</a> で "*" 修飾子を使用するか、(<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings" title="#debugger-settings">デバッガーの設定</a> で有効にしている場合は) 変数フィルターボックスに入力することで、表示する変数をフィルターできます。</p> + +<p>{{EmbedYouTube("dxCvnixpM_Q")}}</p> + +<p>ソース内に存在する変数が JavaScript エンジンの最適化により削除されている場合は、変数ビューに変数を表示しますが値は <code>(optimized away)</code> となっており、編集ができません。以下のスクリーンショットでは、変数 <code>upvar</code> が最適化で削除されています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10169/optimized-out.png" style="display: block; height: 235px; margin-left: auto; margin-right: auto; width: 332px;"></p> + +<h2 id="Modify_variables" name="Modify_variables">変数を変更する</h2> + +<p>コードがブレークポイントで停止したときに、デバッガーの <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a> で変数を変更できます。変数の現在の値をクリックすると、そこに入力できるようになります:</p> + +<p>{{EmbedYouTube("FKG-jkvSpq8")}}</p> + +<h2 id="Watch_an_expression" name="Watch_an_expression">式をウォッチする</h2> + +<p>ウォッチ式は、実行が停止するたびに評価される式です。よって、これらの式の結果を調査できます。これらは、コード内で必ずしも調査を行える状態であるとは限らない不変量の調査ができる点が役に立ちます。[ウォッチ式を追加] と表示されているボックスをクリックして、コードをステップ実行したときに出力内容を監視したい JavaScript 式を入力することで、ウォッチ式を追加します。</p> + +<p>そして、コードの実行を開始します。コードのステップ実行を始めるまでウォッチ式は何も行いませんので、ブレークポイントに達するまでは何も起きません。ブレークポイントに達すると、アクティブな式とその値を表示するボックスが現れます:</p> + +<p>{{EmbedYouTube("CwGU-5wKRw0")}}</p> + +<p>コードをステップ実行して、値の変化に応じた式の結果をウォッチできます。値が変わるたびに、ボックスが一時的に黄色に光ります。式の隣にある [x] 印のアイコンをクリックすると、ウォッチ式を削除できます。またもちろん、ウォッチ式は同時に複数設定できます。</p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html new file mode 100644 index 0000000000..da2ab1e637 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html @@ -0,0 +1,16 @@ +--- +title: DOM ノードのハイライトと調査 +slug: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。</p> + +<p>また、変数の隣に標的のアイコンが表示されます。このアイコンをクリックすると、その DOM ノードを選択した <a href="/ja/docs/Tools/Page_Inspector">インスペクター</a> が開きます。</p> + +<p>{{EmbedYouTube("0JWxXp2Qql8")}}</p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html new file mode 100644 index 0000000000..b792199c59 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Debugger_(before_Firefox_52)/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger_(before_Firefox_52)/How_to +--- +<div>{{ToolsSidebar}}</div> + +<p><span class="seoSummary">これらの記事では、デバッガの使用方法について説明します。</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..2408127b78 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html @@ -0,0 +1,21 @@ +--- +title: デバッガーを開く +slug: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>メニューボタン ( <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> ) をクリックして [開発ツール]、 [デバッガー] の順にクリックすると、デバッガーが開きます。あるいは、以下のキーボードショートカットを使用します:</p> + +<ul> + <li>Windows および Linux では Control-Shift-S</li> + <li>Mac では Command-Option-S</li> +</ul> + +<p>インスペクターがアクティブになっている <a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a> が、ブラウザーのウィンドウ下部に現れます。こちらが始めにデバッガーを開いたときの様子です:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13200/debugger-open.png" style="display: block; height: 774px; margin-left: auto; margin-right: auto; width: 1006px;"></p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html new file mode 100644 index 0000000000..13146945a0 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html @@ -0,0 +1,18 @@ +--- +title: 圧縮されたファイルを整形する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>圧縮された (minified) ファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13212/debugger-pretty-print.png" style="display: block; height: 407px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>ファイルを読みやすい形式で表示します。</p> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">デバッガーの設定</a> で [圧縮されたソースを自動的に整形表示] を選択すると、デバッガーが圧縮されたソースを検出して自動的に整形するように指定できます。</p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html new file mode 100644 index 0000000000..881571f63e --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html @@ -0,0 +1,74 @@ +--- +title: 検索とフィルター +slug: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">ツールバー</a> のスクリプトフィルターを使用して、デバッガー内にある項目を検索できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13214/debugger-filter.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>接頭辞をつけずに文字列を入力すると、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a> に一覧表示されているソースのファイル名から検索します。Enter キーや矢印キーを押下して、マッチしたファイル名のソースを表示します。</p> + +<p>いずれかの特殊文字による検索演算子を接頭辞として付加することで、さまざまな検索機能を提供します。</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">接頭辞</th> + <th scope="col">機能</th> + </tr> + </thead> + <tbody> + <tr> + <td>なし</td> + <td><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">ソースリストペイン</a> に表示しているスクリプトの絞り込みを行います。</td> + </tr> + <tr> + <td>!</td> + <td>すべてのファイルから文字列を検索します。</td> + </tr> + <tr> + <td>@</td> + <td>すべてのファイルから、文字列を含む関数定義を検索します。</td> + </tr> + <tr> + <td>#</td> + <td> + <p>現在 <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> で開いているファイルから文字列を検索します。</p> + + <p>検索した後に Enter キーを押下すると、マッチした箇所を巡ります。</p> + </td> + </tr> + <tr> + <td>:</td> + <td>現在 <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> で開いているファイルで、指定した行へ移動します。</td> + </tr> + <tr> + <td>*</td> + <td><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a> に表示している変数の絞り込みを行います。</td> + </tr> + </tbody> +</table> + +<p>これらのオプションは、フィルター内をクリックしたときにポップアップ表示します。また、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> のコンテキストメニューでもアクセスできます。</p> + +<p>接頭辞を組み合わせて、より強力な問い合わせが可能です。例えば:</p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td>file.js:12</td> + <td>"file.js" を開いて 12 行目へ移動します。</td> + </tr> + <tr> + <td>mod#onLoad</td> + <td>ファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。</td> + </tr> + </tbody> +</table> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..cb8ae2d4bf --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html @@ -0,0 +1,29 @@ +--- +title: ブレークポイントを設置する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><span class="seoSummary">デバッガーで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。</span></p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、実行を停止したい行の行番号をクリックします。</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、実行を停止したい行でコンテキストメニューを開いて、[ブレークポイントを設置] を選択します。</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、ブレークポイントを設置したい行をハイライトして Ctrl+B (Windows/Linux) または Command+B (Mac OS X) を押下します。</li> +</ul> + +<p>それぞれのブレークポイントは、デバッガー内の 2 カ所に表示します:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a> で、ファイル名の下に一覧表示する</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン </a>で、行に青色の矢印がつく、または <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">条件付き </a>ブレークポイントであれば橙色の矢印がつく</li> +</ul> + +<p>以下のスクリーンショットでは、ファイルの 20 行目と 28 行目にブレークポイントがあります。また、20 行目のブレークポイントにヒットしています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13202/debugger-details.png" style="display: block; height: 325px; margin-left: auto; margin-right: auto; width: 900px;"></p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..3a3958596c --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,22 @@ +--- +title: 条件付きブレークポイントを設置する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>条件付きブレークポイントを設置するには <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、設置したい行でコンテキストメニューを開いて [条件付きブレークポイントを設置] を選択します。そして、表示されたポップアップに条件式を入力します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12900/debugger-conditional-breakpoint.png" style="display: block; height: 273px; margin-left: auto; margin-right: auto; width: 823px;"></p> + +<p>条件付きブレークポイントは、ソースペインで橙色の矢印がつきます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12904/debugger-conditional-orange.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 823px;"></p> + +<p>条件を編集したり通常のブレークポイントに条件を追加したりするには、コンテキストメニューを開いて [条件付きブレークポイントを設定する] を選択します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12902/debugger-make-conditional.png" style="display: block; height: 427px; margin-left: auto; margin-right: auto; width: 823px;"></p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html new file mode 100644 index 0000000000..634315dd13 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html @@ -0,0 +1,21 @@ +--- +title: コードをステップ実行する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>コードがブレークポイントで止まったときは、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">ツールバー</a> の左側にある 4 つのボタンを使用してステップ実行を実施できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13208/debugger-step.png" style="display: block; height: 414px; margin-left: auto; margin-right: auto; width: 903px;">ボタンは順に以下のとおりです:</p> + +<ul> + <li>復帰: 次のブレークポイントまで実行します。</li> + <li>ステップオーバー: 同一関数内で次の行へ進みます。</li> + <li>ステップイン: 当該行が関数の呼び出しでなければ、関数内で次の行へ進みます。関数の呼び出しである場合は、呼び出した関数に入ります。</li> + <li>ステップアウト: 現在の関数の終端まで実行します。</li> +</ul> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..1f41177f80 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html @@ -0,0 +1,20 @@ +--- +title: ソースマップを使用する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>JavaScript のソースは、より効率よくサーバーから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript や TypeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第にプログラムによって作られる傾向があります。<a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">ソースマップ</a> の使用によって、デバッグをとても容易にするために、デバッガーが実行中のコードを元のソースファイルと対応づけることができます。</p> + +<p>デフォルトでは、デバッガーは使用可能であればソースマップを使用します。ソースマップのサポートが有効かを確認する、あるいは必要に応じて無効化する場合は、[<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings" title="#debugger-settings">デバッガーのオプション</a>] ボタンをクリックして、ポップアップした設定一覧で [元のソースを表示] を確認してください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12922/debugger-sourcemaps.png" style="display: block; height: 506px; margin-left: auto; margin-right: auto; width: 915px;"></p> + +<p>もちろん、これを動作させるためにはページで実行する JavaScript にソースマップを与えることが必要です。ソースファイルにコメントディレクティブを追加してください:</p> + +<pre>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</pre> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/index.html new file mode 100644 index 0000000000..404974a00f --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/index.html @@ -0,0 +1,55 @@ +--- +title: デバッガー (Firefox 52 より前) +slug: Tools/Debugger_(before_Firefox_52) +translation_of: Tools/Debugger_(before_Firefox_52) +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。</p> + +<p>Firefox でローカル実行しているコードや、例えば Firefox OS デバイスや Android 版 Firefox などのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a> のページをご覧ください。</p> + +<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> + +<hr> +<h2 id="User_Interface_Tour" name="User_Interface_Tour">ユーザーインターフェイスツアー</h2> + +<p>デバッガーについてひととおり理解するために、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour"> UI のクイックツアー </a>を用意しました。</p> + +<hr> +<h2 id="How_to" name="How_to">使い方</h2> + +<p>デバッガーで何ができるかを知るために、以下のガイドをご覧ください:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Open_the_debugger">デバッガーを開く</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_breakpoint">ブレークポイントを設置する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">ブレークポイントの無効化</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">コードをステップ実行する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">DOM イベントでブレークする</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">DOM ノードのハイライトと調査</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">圧縮されたファイルを整形表示する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">検索とフィルター</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">条件付きブレークポイントを設置する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables">変数を調査、編集、ウォッチする</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Use_a_source_map">ソースマップを使用する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">ソースをブラックボックス化する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Debug_eval_sources">eval ソースをデバッグする</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Access_debugging_in_add-ons">アドオンでデバッグにアクセスする</a></li> +</ul> +</div> + +<hr> +<h2 id="Reference" name="Reference">リファレンス</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Keyboard_shortcuts">キーボードショートカット</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">オプション</a></li> +</ul> +</div> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..8625bb75bb --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html @@ -0,0 +1,16 @@ +--- +title: キーボードショートカット +slug: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts +translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "デバッガー(Firefox_52より前)")}}</p> + +<h2 id="Global_shortcuts" name="Global_shortcuts">共通ショートカット</h2> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}</p> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/settings/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/settings/index.html new file mode 100644 index 0000000000..a9f0a505b3 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/settings/index.html @@ -0,0 +1,63 @@ +--- +title: オプション +slug: Tools/Debugger_(before_Firefox_52)/Settings +translation_of: Tools/Debugger_(before_Firefox_52)/Settings +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>デバッガーには独自の設定メニューがあり、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">ツールバー</a> 上のアイコンからアクセスできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12930/debugger-options.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 845px;"></p> + +<p>それぞれのオプションは、オン/オフの切り替え式になっています:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 40%;"><strong>圧縮されたソースを自動的に整形表示</strong></td> + <td>このオプションを有効にすると、デバッガーは圧縮された JS ファイルを自動的に検出して <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">整形 </a>します。</td> + </tr> + <tr> + <td><strong>例外発生で停止</strong></td> + <td>このオプションが有効であるときは、JavaScript の例外が発生した際にスクリプトの実行が自動的に停止します。</td> + </tr> + <tr> + <td><strong>キャッチした例外を無視</strong></td> + <td> + <p>このオプションを有効 (デフォルトで有効) にして [例外発生で停止] も有効にすると、キャッチされていない例外だけで実行が停止します。</p> + + <p>これは通常、望ましい動作です。例外がキャッチされたということは通常、プログラムが例外を適切に扱っていることを示しますので、一般的にそのような例外での停止は望まれません。</p> + </td> + </tr> + <tr> + <td><strong>起動時にデバッガを開く</strong></td> + <td>このオプションが有効であるときは、始めにデバッガーを起動した時点で<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane"> 変数ペイン </a>が開くようになります。</td> + </tr> + <tr> + <td><strong>計算可能なプロパティのみ表示</strong></td> + <td>{{原語併記("列挙可能", "enumerable")}} ではない JavaScript プロパティを表示しません。</td> + </tr> + <tr> + <td><strong>変数フィルターボックスを表示</strong></td> + <td>このオプションを有効にすると <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン </a>に [変数を検索] ボックスが表示されますので、表示されている変数一覧をフィルターできます。</td> + </tr> + <tr> + <td><strong>元のソースを表示</strong></td> + <td>このオプションを有効にすると、デバッガーは可能であれば <a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">ソースマップ </a>を使用します。これはコンバイン、ミニファイ、あるいは CoffeeScript のような言語からコンパイルした JavaScript の、元のソースコードを表示するためのオプションです。デフォルトで有効です。</td> + </tr> + <tr> + <td><strong>圧縮されたソースを自動的にブラックボックス化する</strong></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 33 の新機能</p> + </div> + + <p>URL の末尾が ".min.js" であるソースファイルを自動的に<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source"> ブラックボックス化</a> します。デフォルトで有効です。</p> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html new file mode 100644 index 0000000000..8a8b6645f3 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html @@ -0,0 +1,129 @@ +--- +title: UI ツアー +slug: Tools/Debugger_(before_Firefox_52)/UI_Tour +translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。デバッガーの UI は 6 つの主要なセクションに分かれており、順番に説明していきます:</p> + +<ul> + <li><a href="#toolbar">ツールバー</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Call_stack_pane">コールスタックペイン</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13182/debugger-overview-annotated.png" style="display: block; height: 1640px; margin-left: auto; margin-right: auto; width: 1019px;"></p> + +<h2 id="Toolbar" name="Toolbar"><a name="toolbar">ツールバー</a></h2> + +<p>ツールバーは 4 つのセクションで構成されます:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">スクリプト内での動きを制御する</a> ボタン</li> + <li>コールスタックの可視化</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">スクリプトフィルター</a></li> + <li>以下の操作を行うボタン: + <ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> や <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン</a> の展開/折りたたみ</li> + <li>デバッガーの <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">設定</a></li> + </ul> + </li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13194/debugger-toolbar-annotated.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 942px;"></p> + +<p>左側にある 4 つのボタンは、以下の機能を実行します:</p> + +<ul> + <li><strong>停止/復帰</strong> (F8): デバッグ中のスクリプトの実行を停止および再開します。上図のようにボタンが青色で "押し込まれている" ときは、ボタンを押して停止したかブレークポイントにヒットしたことにより、スクリプトが停止していることを表します。</li> + <li><strong>ステップオーバー</strong> (F10): JavaScript コードで現在の行をステップ実行します。</li> + <li><strong>ステップイン</strong> (F11): JavaScript で現在の行にある関数呼び出しにスキップします。</li> + <li><strong>ステップアウト</strong> (Shift-F11): 現在の関数を抜けるまで、スクリプトを実行します。</li> +</ul> + +<p>コールスタックの可視化では、実行を停止している時点のコールスタックを表示します。</p> + +<h2 id="Source_list_pane" name="Source_list_pane">ソースリストペイン</h2> + +<p>ソースリストペインでは、ページに読み込まれたすべての JS ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースリストペインと <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Call_stack_pane">コールスタックペイン</a> は画面上の場所を共有しており、ペインの上部にあるタブでこれらを切り替えできます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13186/debugger-source-list-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>ソースファイルは、読み込み元に応じたさまざまな見出しによってグループ化しています。これらから任意のファイルを選択でき、選択したファイルは <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> に読み込みます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13188/debugger-source-list-pane-annotated.png" style="display: block; height: 535px; margin-left: auto; margin-right: auto; width: 922px;"><br> + ソースファイルに設置したブレークポイントはすべて、ファイル名の下に一覧表示します。各ブレークポイントの隣にあるチェックボックスで、ブレークポイントの有効化/無効化が可能です。リストにあるブレークポイントの項目を右クリックすると、以下の操作が可能なコンテキストメニューを表示します:</p> + +<ul> + <li>当該ブレークポイント、すべてのブレークポイント、あるいは他のブレークポイントを有効化、無効化、あるいは削除する</li> + <li>当該ブレークポイントを条件付きにする (すでに条件付きである場合は、条件を変更する)</li> +</ul> + +<p>ソースリストの下部にある 3 個のアイコンで、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">ソースのブラックボックス化</a>、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">圧縮された JS ファイルの整形</a>、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">すべてのブレークポイントの有効/無効</a> の切り替えが可能です。</p> + +<p>ソースリストの項目にコンテキストメニューがあり、ソースの提供元の URL をコピーしたり、URL を新しいタブで開くことができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13184/debugger-source-list-menu-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<h2 id="Call_stack_pane" name="Call_stack_pane">コールスタックペイン</h2> + +<p>デバッガーの左側にあるもうひとつのタブでは、コールスタックを縦に並べて表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13178/debugger-call-stack-pane-annotated.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>各行でコールスタックのレベルを示しており、現在のスタックフレームが最上段に置かれます。行では現在実行している関数の名前と、ソースファイルおよび行番号へのリンクを表示します。</p> + +<h2 id="Source_pane" name="Source_pane">ソースペイン</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13190/debugger-source-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>ここでは、現在読み込んでいる JavaScript ファイルを表示します。ブレークポイントは青色の矢印を行番号に重ねて表示しており、またヒットしているブレークポイントは緑色の矢印で表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13192/debugger-source-pane-breakpoints-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 903px;">ソースペインでは、コンテキストメニューで以下の操作が可能です:</p> + +<ul> + <li>ブレークポイントを設置</li> + <li>条件付きブレークポイントを設置</li> + <li>選択範囲のウォッチ式を追加</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" title="#script filter">スクリプトフィルター</a> を使用して検索やフィルターを行う</li> +</ul> + +<p>Firefox 44 より、関数を呼び出している箇所から関数を定義している箇所へジャンプできます。<kbd>control</kbd> キー (Mac OS X では <kbd>command</kbd> キー) を押下しながら、関数名をクリックしてください。</p> + +<h3 id="Variables_popup" name="Variables_popup">変数のポップアップ</h3> + +<p>ソースペインで変数にマウスポインターを載せると、現在の変数の値を表示するポップアップが現れます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13198/debugger-variables-popup-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>この機能により <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> を開いて検索することなく、すばやく変数の値を確認できます。</p> + +<h2 id="Variables_pane" name="Variables_pane">変数ペイン</h2> + +<p>変数ペインはスクリプトの実行中に、内部状態の調査や変更が可能です:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13196/debugger-variables-pane.png" style="display: block; height: 670px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>変数ペインは画面領域を <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン</a> と共有しており、ペイン上部のタブでそれらを切り替えることができます。</p> + +<h2 id="Events_pane" name="Events_pane">イベントペイン</h2> + +<p>イベントペインでは、現在コードからリスナが割り当てられている、すべての DOM イベントを一覧表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13180/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>これは画面領域を <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> と共有しており、ペイン上部のタブでそれらを切り替えることができます。</p> + +<p>イベントはタイプごとにグループ化します。前出のスクリーンショットでは 4 つのタイプがあります: Interaction、Keyboard、Mouse、Navigation です。各タイプの下に、コードにリスナーが存在するすべてのイベントを以下の構文で列挙します:</p> + +<pre>[イベント名] on [イベントターゲット] in [ソースファイル]</pre> + +<p>イベント名の隣にあるチェックボックスにチェックを入れると、デバッガーはイベントリスナーの最初の行でブレークします。イベントタイプの隣にあるチェックボックスにチェックを入れると、デバッガーはタイプの下に列挙しているすべてのイベントでブレークします。</p> |