diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
| commit | 6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch) | |
| tree | 890e3e27131be010d82ef957fa68db495006cb0e /files/ja/tools | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2 translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip | |
unslug ja: move
Diffstat (limited to 'files/ja/tools')
41 files changed, 75 insertions, 1978 deletions
diff --git a/files/ja/tools/page_inspector/3d_view/index.html b/files/ja/tools/3d_view/index.html index daac55be01..daac55be01 100644 --- a/files/ja/tools/page_inspector/3d_view/index.html +++ b/files/ja/tools/3d_view/index.html diff --git a/files/ja/tools/add-ons/index.html b/files/ja/tools/add-ons/index.html deleted file mode 100644 index 9478dd0d88..0000000000 --- a/files/ja/tools/add-ons/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -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/tools/css_coverage/index.html b/files/ja/tools/css_coverage/index.html deleted file mode 100644 index cf45c2988e..0000000000 --- a/files/ja/tools/css_coverage/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -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/tools/debugger/how_to/break_on_a_dom_event/index.html b/files/ja/tools/debugger/break_on_dom_mutation/index.html index 4aca9399f6..4aca9399f6 100644 --- a/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html +++ b/files/ja/tools/debugger/break_on_dom_mutation/index.html diff --git a/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html deleted file mode 100644 index 74c0db4345..0000000000 --- a/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 変数を調査、編集、ウォッチする -slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' -translation_of: Tools/Debugger/How_to/Set_Watch_Expressions -translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' ---- -<div>{{ToolsSidebar}}</div><div class="note"> -<p>この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を <code>false</code> に設定して、古いデバッガーに戻すことができます。</p> - -<p>古いデバッガーのドキュメントは、<a href="/ja/docs/Tools/Debugger_%28before_Firefox_52%29">デバッガー (Firefox 52 より前)</a> をご覧ください。</p> -</div> - -<h2 id="Examine_variables" name="Examine_variables">変数を調査する</h2> - -<p>コードがブレークポイントで停止したときはデバッガーの <a href="/ja/docs/Tools/Debugger/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/How_to/Search_and_filter" title="#script-filter">スクリプトフィルター</a> で "*" 修飾子を使用するか、(<a href="/ja/docs/Tools/Debugger/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/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/tools/debugger/how_to/black_box_a_source/index.html b/files/ja/tools/debugger/how_to/ignore_a_source/index.html index 0378307727..0378307727 100644 --- a/files/ja/tools/debugger/how_to/black_box_a_source/index.html +++ b/files/ja/tools/debugger/how_to/ignore_a_source/index.html diff --git a/files/ja/tools/debugger/how_to/search_and_filter/index.html b/files/ja/tools/debugger/how_to/search_and_filter/index.html deleted file mode 100644 index 4f3391c8b1..0000000000 --- a/files/ja/tools/debugger/how_to/search_and_filter/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 検索とフィルタ -slug: Tools/Debugger/How_to/Search_and_filter -translation_of: Tools/Debugger/How_to/Search -translation_of_original: Tools/Debugger/How_to/Search_and_filter ---- -<div>{{ToolsSidebar}}</div><p><a href="/ja/docs/Tools/Debugger/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>に一覧表示されているソースから検索します。</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/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/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a>で開いているファイルから文字列を検索します。</p> - - <p>検索した後に Enter キーを押下すると、マッチした箇所を巡ります。</p> - </td> - </tr> - <tr> - <td>:</td> - <td>現在<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a>で開いているファイルで、指定した行へ移動します。</td> - </tr> - <tr> - <td>*</td> - <td><a href="/ja/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a>に表示している変数の絞り込みを行います。</td> - </tr> - </tbody> -</table> - -<p>これらのオプションは、フィルタ内をクリックしたときにポップアップ表示します。また、<a href="/ja/docs/Tools/Debugger/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/tools/debugger/limitations_of_the_new_debugger/index.html b/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html deleted file mode 100644 index b6ef21e414..0000000000 --- a/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html deleted file mode 100644 index 88d3b0d7bb..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html deleted file mode 100644 index 573456e364..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html deleted file mode 100644 index f16826cf46..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html deleted file mode 100644 index 706d844280..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html deleted file mode 100644 index bbd25b285e..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html deleted file mode 100644 index 73595678bf..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html deleted file mode 100644 index 7d08b706a5..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html deleted file mode 100644 index da2ab1e637..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html deleted file mode 100644 index b792199c59..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html deleted file mode 100644 index 2408127b78..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html deleted file mode 100644 index 13146945a0..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html deleted file mode 100644 index 881571f63e..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html deleted file mode 100644 index cb8ae2d4bf..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html deleted file mode 100644 index 3a3958596c..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html deleted file mode 100644 index 634315dd13..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html deleted file mode 100644 index 1f41177f80..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/index.html b/files/ja/tools/debugger_(before_firefox_52)/index.html deleted file mode 100644 index 404974a00f..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html deleted file mode 100644 index 8625bb75bb..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/settings/index.html b/files/ja/tools/debugger_(before_firefox_52)/settings/index.html deleted file mode 100644 index a9f0a505b3..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/settings/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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/tools/debugger_(before_firefox_52)/ui_tour/index.html b/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html deleted file mode 100644 index 8a8b6645f3..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -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> diff --git a/files/ja/tools/memory/comparing_heap_snapshots/index.html b/files/ja/tools/memory/comparing_heap_snapshots/index.html deleted file mode 100644 index 74fa47f372..0000000000 --- a/files/ja/tools/memory/comparing_heap_snapshots/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: ヒープのスナップショットを比較する -slug: Tools/Memory/Comparing_heap_snapshots -translation_of: Tools/Memory/Basic_operations -translation_of_original: Tools/Memory/Comparing_heap_snapshots ---- -<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> -<p>これは Firefox 45 の新機能です。</p> -</div> - -<p>Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。</p> - -<p>差分を作成するにはカメラのアイコンの隣にある "+/-" ボタンを押下して、基準とするスナップショットを選択します。そして、比較するスナップショットを選択してください。ツールが 2 つのスナップショットの差分を表示します。単体のスナップショットの場合と同じビューを使用して、差分を分析できます。</p> - -<p>{{EmbedYouTube("rbDHVxCzqhU")}}</p> diff --git a/files/ja/tools/page_inspector/how_to/view_fonts/index.html b/files/ja/tools/page_inspector/how_to/edit_fonts/index.html index dc20a581e8..dc20a581e8 100644 --- a/files/ja/tools/page_inspector/how_to/view_fonts/index.html +++ b/files/ja/tools/page_inspector/how_to/edit_fonts/index.html diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html index 3f0900fd07..3f0900fd07 100644 --- a/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html diff --git a/files/ja/tools/page_inspector/html_panel/index.html b/files/ja/tools/page_inspector/html_panel/index.html deleted file mode 100644 index 3210682298..0000000000 --- a/files/ja/tools/page_inspector/html_panel/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: HTML panel -slug: Tools/Page_Inspector/HTML_panel -translation_of: Tools/Page_Inspector/UI_Tour -translation_of_original: Tools/Page_Inspector/HTML_panel ---- -<div>{{ToolsSidebar}}</div><p>{{ fx_minversion_header("10.0") }}</p> - -<p>ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。</p> - -<div class="note"><strong>注意:</strong> HTML パネルの表示／非表示は Ctrl-H を押すことで切り替えできます。</div> - -<h2 id="HTML_のナビゲートを行う">HTML のナビゲートを行う</h2> - -<p>HTML 中のノードをクリックして、さらなる調査のために要素を選択することができます。また、要素を選択していないときに HTML パネルを開いている場合は、マウスポインタを載せている要素の HTML を表示するようにパネルの内容が自動更新されます。これは、コードの問題点の発見に役立つツールにもなります。</p> - -<p><img alt="html-panel.png" class="default internal" src="/@api/deki/files/6073/=html-panel.png"></p> - -<p>HTML パネルを表示しているときは、ページ調査ツールのツールバーの右端にリサイズ用のウィジェットが表示されますので、一度に見たい HTML の量に合わせてサイズを調節することができます。</p> - -<h2 id="属性の実験を行う">属性の実験を行う</h2> - -<p>ソース中の属性値をダブルクリックして新しい値を入力することで、HTML 属性の値を変更することができます:</p> - -<p><img alt="edit-html-attr.png" class="default internal" src="/@api/deki/files/6080/=edit-html-attr.png"></p> - -<h2 id="参考情報">参考情報</h2> - -<ul> - <li><a href="/ja/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> - <li><a href="/ja/Tools/Page_Inspector/Style_panel" title="ja/Tools/Page_Inspector/Style panel">Style panel</a></li> - <li><a href="/ja/Tools" title="Tools">Tools</a></li> -</ul> - -<p>{{ languages( { "en": "en/Tools/Page_Inspector/HTML_panel"} ) }}</p> diff --git a/files/ja/tools/page_inspector/style_panel/index.html b/files/ja/tools/page_inspector/style_panel/index.html deleted file mode 100644 index bbfb74ccca..0000000000 --- a/files/ja/tools/page_inspector/style_panel/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Style panel -slug: Tools/Page_Inspector/Style_panel -translation_of: Tools/Page_Inspector#CSS_pane -translation_of_original: Tools/Page_Inspector/Style_panel ---- -<div>{{ToolsSidebar}}</div><p>ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。</p> - -<p>{{ 英語版章題("The Rules view") }}</p> - -<h2 id="ルールビュー">ルールビュー</h2> - -<p><img alt="style-rules.png" class="internal lwrap" src="/@api/deki/files/6075/=style-rules.png" style="float: left;">ルールビュー (左図) では、スタイルが<a href="/ja/DOM/stylesheet" title="stylesheet">スタイルシート</a>の編成方法に似た形式でまとめられています。ここには選択された要素に適用しているルールが、そのルールが要素に与えたプロパティ (およびその値) と共に表示されます。また、最後に適用したスタイルがリストの始めに表示されます。スタイルは供給源ごとにグループ化され、そのスタイルが読み込まれたファイルの名前が表示されます。なお、"インライン" グループは HTML の <code>style</code> 属性を用いて適用されたスタイルをリスト化します。</p> - -<p>継承されたスタイルはその旨が注記され、また後から適用されたスタイルに上書きされたスタイルには取り消し線が引かれます。よって、ある要素のスタイルの由来がどこかを明らかにすることを簡単にし、また要素のスタイルが予期しないものになってしまう問題のデバッグに役立つでしょう。</p> - -<p>また、ルールビューでは CSS に変更を加えることができます。あるスタイルの適用／非適用を切り替えるには、そのスタイルの隣にあるチェックボックスをクリックしてください。変更点はブラウザウィンドウ内へ直ちに反映されます。</p> - -<p>加えて、プロパティ名をクリックして新しい名前を入力することで、プロパティの名前を変えることができます。同様にプロパティの値をクリックして新しい値を入力することで、値を変えることもできます。</p> - -<p>閉じ括弧 ("<span class="nowiki">}</span>") がある行をクリックすることで、新しいプロパティを追加することができます。新しい行が追加されて、プロパティ名とその値を入力することができます。</p> - -<p>すべての変更内容は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。</p> - -<p>例えば "Sign in" ボタンの {{ HTMLElement("a") }} 要素に、以下に示したルールの新しいプロパティを追加してみましょう:</p> - -<p><img alt="font-size.png" class="default internal" src="/@api/deki/files/6076/=font-size.png" style="border: 1px solid black;"></p> - -<p>フォントサイズが大きくされたので、ボタンが以前よりも大きくなります。このように、コンテンツで実験を行ったり、作業中のコンテンツで何をすればどのような外見になるかをリアルタイムに確認したりすることにスタイルパネルを使用できます。</p> - -<p>{{ 英語版章題("New features in Firefox 13") }}</p> - -<p>ある宣言のために CSS の大規模な編集を行いたい場合は、背景が灰色の見出し行 (スクリーンショットで "mdn-min.css:1" などのような箇所) をクリックしましょう。すると、当該宣言を定義する場所にカーソルを置いた状態で<a href="/ja/Tools/Style_Editor" title="Style Editor">スタイルエディタ</a>が開きます。</p> - -<p>宣言の部分で右クリックすると、その宣言をさまざまな方法でコピーする項目があるポップアップメニューを表示しますので、例えば別のドキュメントに貼り付けるといったことができます。</p> - -<p>編集中、あるプロパティに対して不正な値を入力したり未知のプロパティ名を入力したりすると、黄色の警告アイコンをプロパティの隣へ以下のように表示します:</p> - -<p><img alt="style-panel-warning-icon.png" class="default internal" src="/@api/deki/files/6223/=style-panel-warning-icon.png"></p> - -<p>{{ 英語版章題("The Properties view") }}</p> - -<h2 id="プロパティビュー">プロパティビュー</h2> - -<p>一方プロパティビューでは、選択された要素に適用されているすべてのプロパティやその値を、どのスタイルシートやルールがその値を設定したかと共に表示します。これらはアルファベット順に並べられ、また見たい項目を簡単に発見できる検索機能も提供されています。</p> - -<p><img alt="style-properties.png" class="internal rwrap" src="/@api/deki/files/6077/=style-properties.png" style="float: right;">既定の状態ではページのスタイルシートで設定したスタイルだけが表示されますが、"ユーザ CSS のみ" のチェックボックスのチェックを外すことで、ブラウザの既定のスタイルも表示することができます。</p> - -<p>検索ボックスに入力することでリアルタイムに一覧の絞り込みが行われます。例えばフォント関連の設定内容だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティだけが表示されます。同様に、プロパティの値を検索することもできます。例えば、フォントに "Lucida Grande" が適用されることの起因となるルールを探したいとします。その場合は、フォント名を検索ボックスに入力してください。</p> - -<p>プロパティ名の隣にある三角印をクリックすると、プロパティの値・プロパティがどのように適用されたか・そのプロパティの由来はどこかといった詳細情報が表示されます。</p> - -<p>{{ 英語版章題("Learning more about properties") }}</p> - -<h3 id="プロパティについて詳しく学ぶ">プロパティについて詳しく学ぶ</h3> - -<p><img alt="showing-info-icon.png" class="internal lwrap" src="/@api/deki/files/6079/=showing-info-icon.png" style="float: left;">よく知らない CSS プロパティや、より詳しく知りたいプロパティがあるときにとても便利な機能があります: プロパティビューでプロパティ名にマウスポインタを載せると、小さな "情報" アイコンが表示されます。このアイコンをクリックすると、Mozilla Developer Network の Wiki にある当該プロパティのドキュメントが表示されます。</p> - -<p>{{ 英語版章題("See also") }}</p> - -<h2 id="参考情報">参考情報</h2> - -<ul> - <li><a href="/ja/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> - <li><a href="/ja/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> - <li><a href="/ja/Tools" title="Tools">Tools</a></li> -</ul> - -<p>{{ languages( { "en": "en/Tools/Page_Inspector/Style_panel"} ) }}</p> diff --git a/files/ja/tools/performance/profiler_walkthrough/index.html b/files/ja/tools/performance/profiler_walkthrough/index.html deleted file mode 100644 index 858b944015..0000000000 --- a/files/ja/tools/performance/profiler_walkthrough/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: プロファイラのチュートリアル -slug: Tools/Performance/Profiler_walkthrough -translation_of: Tools/Performance/Call_Tree -translation_of_original: Tools/Performance/Profiler_walkthrough ---- -<div>{{ToolsSidebar}}</div><p>JavaScript プロファイラは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。</p> - -<h2 id="Analysing_profiles" name="Analysing_profiles">プロファイルを分析する</h2> - -<p>パフォーマンスツールがどのようにプロファイルを提供するかを理解するには、例を見ていくことがもっとも簡単です。以下のコードは 2 から 10,000 までの数値について素数であるかを確認して、その結果を表示します。少しおもしろくするため、素数の確認は <code><a href="/ja/docs/Web/API/WindowTimers.setTimeout">setTimeout</a></code> のコールバックとして実行します:</p> - -<pre class="brush: js">function isPrime(i) { - for (var c = 2; c <= Math.sqrt(i); ++c) { - if (i % c === 0) { - console.log(i + " is not prime"); - return; - } - } - console.log(i + " is prime"); -} - -function timedIsPrime(i) { - setTimeout(function() { - isPrime(i); - }, 100); -} - -function testPrimes() { - var n = 10000; - for (var i = 2; i != n; ++i) { - timedIsPrime(i); - } -} - -var testPrimesButton = document.getElementById("test-primes"); -testPrimesButton.addEventListener("click", testPrimes, false);</pre> - -<p>このコードを Web ページに貼り付けて実行すると、コンソールへ以下のように出力します:</p> - -<pre>"2 is prime" -"3 is prime" -"4 is not prime" -"5 is prime" -"6 is not prime"</pre> - -<p>このコードのプロファイルを取得すると、以下のように表示されるでしょう:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9511/primality-profile.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>最初の行は、<em>関数</em>列が常に <em>(ルート)</em> になります。ここでは 2 つのことを示しています: プロファイリングに 1,121.95 ミリ秒かかっており、またその間に 78 個のサンプルを取得しました。<em>(ルート)</em> の下に、サンプルの取得中にプログラムで経由した、さまざまなパスのツリーを表示します。<em>(ルート)</em> の直下に、スタックの底にあるトップレベルの関数が現れます。この例では、トップレベルの関数が 2 つあります:</p> - -<ul> - <li>click イベントのリスナである <code>testPrimes()</code></li> - <li><code>timedIsPrime()</code> 内の <code>setTimeout()</code> の引数で指定した、無名のコールバック関数</li> -</ul> - -<p><code>testPrimes()</code> の行を見ていきましょう:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9515/primality-profile-testprimes.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>ここでは、78 個のサンプルのうち 29 個を <code>testPrimes()</code> 内で取得したことがわかります。<em>合計コスト</em>の列は、サンプル数をパーセント値に置き換えたものです: <code>(29/78) * 100</code> =<code> 37.17</code></p> - -<p>ところが<em>時間</em>と<em>コスト</em>は、ともに 0 です。これは、そのスタックフレームのコードを実行している間に取得したサンプルがないためです。サンプルはすべて、関数内にネストしているブロックまたは <code>testPrimes()</code> が呼び出した関数の内部で取得したものです。これは次の行でわかります:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9517/primality-profile-testprimes-2.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>この行も <em>testPrimes</em> という名称です。これは 19 行目から始まる <code>for</code> ループが作成した、<code>testPrimes()</code> の新たなスタックフレームを指しています。前のフレームの<em>コスト</em>が 0 であったことから予想されるとおり、このフレームの<em>サンプル</em>列も 29 です。</p> - -<p>しかし、<em>コスト</em>と<em>時間</em>は 0 ではありません。これはいくつかのサンプルが、このフレームを実行しているときに取得されたことを表します。プロファイルではサンプルをいくつ取得したかを明示していませんが、次の <em>timedIsPrime</em> という名前の行で取得したサンプルが 24 個であることから、5 個取得したはずです。これは簡単に確認できます。<code>(5/78) * 100 = 6.41</code> であり、<em>コスト</em>の値と一致します。</p> - -<p>この分岐で残る 24 個のサンプル (全体の 30.76%) は <code>timedIsPrime()</code> で取得されました。つまり、<code>setTimeout()</code> (12 行目) を呼び出している部分です。</p> - -<p>コールツリーの別の分岐は、<code>setTimeout()</code> (13 行目) に渡した無名のコールバック関数から始まっています。ここではサンプルを 1 個取得しており、残り 48 個のサンプル (全体の 61.53%) はコールバックで呼び出す <code>isPrime()</code> で取得されました。</p> - -<p>総括すると、もっとも多くのサンプルを <code>isPrime()</code> で取得しており (全体の 61.53%)、その次が <code>timedIsPrime()</code> (全体の 30.76%)、残りは取るに足らない量です。統計的に言えば、おそらくこれらの関数がほとんどの時間を消費していますので、プログラムを高速化したい場合の有力な最適化候補になります。</p> - -<h3 id="Total_Time_and_Self_Time" name="Total_Time_and_Self_Time"><em>合計時間</em>と<em>時間</em></h3> - -<p><em>合計時間</em>と<em>時間</em>の列は<em>合計コスト</em>と<em>コスト</em>から算出していますが、直接反映したものではありません。規則的にサンプルを取得しようとしていますが、そのとおりに取得できない場合もあります。適切な時期にサンプルを取得できなかった場合は、その不規則性を補正しようとします。</p> - -<h3 id="Inverting_the_call_tree" name="Inverting_the_call_tree">呼び出しツリーを反転</h3> - -<p>既定では、プロファイラは一般的なコールスタックと同様に、呼び出しツリーを根から葉の順に表示します。つまりそれぞれのトップレベル関数、トップレベル関数が呼び出す関数、その関数から呼び出される関数、といった順になります:</p> - -<pre>testPrimes - - -> timedIsPrime - - - -(setTimeout callback) - - -> isPrime</pre> - -<p>これは論理的かつスタックが積み上げられる時系列に従っており、コールスタックを表現するための慣習的な方法でもあります。一方、時間がかかっている場所が呼び出しツリーの深部にあることがよくあります。前出の例でわかるとおり、全サンプルの 90% は 2 つの主要な分岐の終端で発生しています。</p> - -<p>多くのサンプルを記録したスタックフレームに注目させるため、呼び出しツリーを反転させるオプションがプロファイラにあります。このオプションを選択すると、プロファイラは以下のようになります:</p> - -<ul> - <li><em>コスト</em>が 0 より大きいスタックフレーム、つまり、サンプルを取得したとき実際に実行していたスタックフレームのリストを作成します。</li> - <li>リストは、スタックフレームで取得したサンプル数の順に並べ替えられます。</li> - <li>リスト内の各項目で、コールスタックをトップレベル関数に向かって逆向きに表示します。</li> -</ul> - -<p>例えば testPrimes の例を、既定の表示でもう一度示します:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9511/primality-profile.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>呼び出しツリーを反転すると以下のようになります:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9521/primality-profile-inverted.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>反転した表示では、プログラムで時間がかかっている場所を効果的に目立たせていることがわかるでしょう。</p> diff --git a/files/ja/tools/profiler/index.html b/files/ja/tools/profiler/index.html deleted file mode 100644 index c05f177c25..0000000000 --- a/files/ja/tools/profiler/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: JavaScript プロファイラ -slug: Tools/Profiler -tags: - - Debugging - - Firefox - - Guide - - Profiler - - Profiling - - Tools -translation_of: Tools/Performance -translation_of_original: Tools/Profiler ---- -<div>{{ToolsSidebar}}</div><p>プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。</p> - -<p>"Web 開発" メニューから "プロファイラ" を選択することで、プロファイラを起動できます。"Web 開発" メニューは、Linux や OS X では "ツール" メニューの配下に、Windows では "Firefox" メニューの直下にあります。</p> - -<p><a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a>が開いて、プロファイラが選択されます。</p> - -<h2 id="Sampling_profilers" name="Sampling_profilers"><a name="sampling-profilers">サンプリング型プロファイラ</a></h2> - -<p>JavaScript プロファイラは、サンプリング型のプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。<br> - <br> - <a name="profiling-example">例えば、以下のようなプログラムについて考えてみましょう:</a></p> - -<pre class="brush: js">function doSomething() { - var x = getTheValue(); - x = x + 1; // -> サンプル A - logTheValue(x); -} - -function getTheValue() { - return 5; -} - -function logTheValue(x) { - console.log(x); // -> サンプル B、サンプル C -} - -doSomething();</pre> - -<p>プロファイラをアクティブにしてこのプログラムを実行したら、実行時にプロファイラは上記のインラインコメントで示したように 3 つのサンプルを取得します。</p> - -<p>これらはすべて <code>doSomething()</code> の内部から取得されますが、2 番目の 2 つは <code>doSomething()</code> から呼び出された <code>logTheValue()</code> 関数の内部です。よってプロファイルは、以下のように 3 つのスタックトレースで構成されます:</p> - -<pre>サンプル A: doSomething() -サンプル B: doSomething() > logTheValue() -サンプル C: doSomething() > logTheValue()</pre> - -<p>これは私たちに何も伝えられない不十分なデータであることが明らかですが、より多くのサンプルにより、<code>logTheValue()</code> がコード内のボトルネックであると断定できるかもしれません。</p> - -<h2 id="Creating_a_profile" name="Creating_a_profile">プロファイルの作成</h2> - -<p>プロファイラで<em>ストップウォッチ</em>のボタンをクリックして、サンプルの記録を始めます。プロファイラが記録を行っている間は、ストップウォッチのボタンがハイライトされます。ボタンを再度押すと記録を停止して、新たなプロファイルを保存します:</p> - -<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p> - -<p>"終了" をクリックすると、新しいプロファイルが自動的に開きます:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>このペインは 2 つのパーツに分かれています:</p> - -<ul> - <li>左側は取得したすべてのプロファイルを一覧表示しており、それぞれのプロファイルを読み込むことができます。また、リストの上にボタンが 2 つあります。<em>ストップウォッチ</em>のボタンは新たなプロファイルの記録を、<em>インポート...</em> ボタンは以前に保存したデータのインポートを行います。プロファイルを選択しているときは、<em>保存</em>ボタンをクリックするとデータを JSON ファイルとして保存できます。</li> - <li>右側は現在読み込んでいるプロファイルを表示します。</li> -</ul> - -<h2 id="Analyzing_a_profile" name="Analyzing_a_profile">プロファイルの分析</h2> - -<p>プロファイルは 2 つのパーツに分かれています:</p> - -<ul> - <li><a href="#profile-timeline" title="#profile-timeline">プロファイルのタイムライン</a></li> - <li><a href="#profile-details" title="#profile-details">プロファイルの詳細</a></li> -</ul> - -<h3 id="Profile_timeline" name="Profile_timeline"><a name="profile-timeline">プロファイルのタイムライン</a></h3> - -<p>プロファイルのタイムラインは、プロファイル表示の上部を占めています:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">横軸は時間、縦軸はサンプルにおけるコールスタックのサイズを表します。コールスタックは、サンプルを取得したときにアクティブであった関数の量を表します。</p> - -<p>チャートで赤色のサンプルは、そのときにブラウザが応答していなかったことを示しており、ユーザはアニメーションや応答性が止まったことに気づいたかもしれません。プロファイルに赤色のサンプルがある場合は、そのコードをいくつかのイベントに分解することを検討したり、<a href="/ja/docs/Web/API/window.requestAnimationFrame" title="Web/API/window.requestAnimationFrame">requestAnimationFrame</a> や <a href="/ja/docs/Web/Guide/Performance/Using_web_workers" title="Web/Guide/Performance/Using_web_workers">Worker</a> の使用について調べたりしましょう。</p> - -<p>タイムラインでクリックアンドドラッグすることで、プロファイル内の特定の範囲を調査できます:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>タイムラインの上に "サンプリング範囲 [AAA, BBB]" というラベルがついた、新たなボタンが現れます。そのボタンを押すとプロファイルがズームされて、そのタイムスライスの詳細なビューが下部に表示されます:</p> - -<p><br> - <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="Profile_details" name="Profile_details"><a name="profile-details">プロファイルの詳細</a></h3> - -<p>プロファイルの詳細は、プロファイル表示の下部を占めています:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">始めに新しいサンプルを開くと、サンプルペインには上のスクリーンショットのように "(total)" という名前の行があります。"(total)" の隣にある三角印をクリックすると、サンプル内にあるすべてのトップレベル関数がリストアップされます。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p> - -<p><strong>実行時間</strong>は当該関数が現れたサンプルの総数を示し<a href="#footnote-1"><sup>1</sup></a>、その後ろにプロファイル内で当該関数が現れた全サンプルのパーセント値があります。最上段の行はプロファイル全体で 2021 のサンプルがあることを表し、また 2 行目は 1914 サンプルすなわち全体の 94.7% が、<code>detectImage()</code> 関数内にいたことを表します。</p> - -<p><strong>滞在</strong> は当該関数そのものを実行する間に取得したサンプル数を示しており、関数を呼び出しているときではありません。前出の<a href="#profiling-example" title="#profiling-example">シンプルな例</a>では、<code>doSomething()</code> は<strong>実行時間</strong>が 3 (サンプル A、B、C) ですが、<strong>滞在</strong>の値は 1 (サンプル A) になるでしょう。</p> - -<p>3 列目は関数名およびファイル名と行数 (ローカルの関数) またはベースネームとドメイン名を表示します。灰色の関数はブラウザ組み込みの関数です。黒色の関数がページで読み込んだ JavaScript を表します。行にマウスポインタを乗せると、関数の識別名の右側に矢印が現れます: 矢印をクリックすると関数のソースを表示します。</p> - -<h3 id="Expanding_the_call_tree" name="Expanding_the_call_tree">コールツリーの展開</h3> - -<p>ある行で、この関数から呼び出された関数に滞在している間のサンプルが存在する場合 (すなわち、<strong>実行時間</strong>がその行の<strong>滞在</strong>より大きい場合) は、関数名の左側に三角印が表示され、コールツリーを展開できます。</p> - -<p>前出の<a href="#profiling-example" title="#profiling-example">シンプルな例</a>では、完全に展開したコールツリーは以下のようになります:</p> - -<table class="standard-table" style="height: 100px; width: 378px;"> - <tbody> - <tr> - <td style="text-align: center;"><strong>実行時間</strong></td> - <td style="text-align: center;"><strong>滞在</strong></td> - <td style="text-align: center;"> </td> - </tr> - <tr> - <td style="text-align: center;">3 100%</td> - <td style="text-align: center;">1</td> - <td style="text-align: center;">doSomething()</td> - </tr> - <tr> - <td style="text-align: center;">2 67%</td> - <td style="text-align: center;">2</td> - <td style="text-align: center;">logTheValue()</td> - </tr> - </tbody> -</table> - -<p>より実際的な例を見ましょう: 前出のスクリーンショットで、上から 2 行目を見ると <code>detectImage()</code> 関数の内部で 1914 サンプルかかっていることがわかります。しかし、そのすべては <code>detectImage()</code> から呼び出された関数でかかっています (<strong>滞在</strong> セルが 0 です)。コールツリーを展開して、ほとんどのサンプルがかかっていたとき実際に実行していた関数は何かを明らかにできます:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>これは、<code>detectAtScale()</code> を実際に実行しているときに 6 サンプル、<code>getRect()</code> の実行に 12 サンプルかかっていたことなどを表します。</p> - -<h2 id="Footnotes" name="Footnotes">脚注</h2> - -<ol> - <li><a name="footnote-1">関数がさまざまなソースから複数回呼び出される場合、プロファイラの出力にも複数回現れます。よって、<code>forEach</code> など汎用的な関数はコールツリー内に複数回現れるでしょう。</a></li> -</ol> diff --git a/files/ja/tools/release_notes/index.html b/files/ja/tools/release_notes/index.html deleted file mode 100644 index 8067ad603e..0000000000 --- a/files/ja/tools/release_notes/index.html +++ /dev/null @@ -1,416 +0,0 @@ ---- -title: リリースノート -slug: Tools/Release_notes -translation_of: Mozilla/Firefox/Releases -translation_of_original: Tools/Release_notes ---- -<div>{{ToolsSidebar}}</div><h2 id="Firefox_52" name="Firefox_52">Firefox 52</h2> - -<ul> - <li><a href="/ja/docs/Tools/Responsive_Design_Mode">UA の選択やネットワークの調整など、レスポンシブデザインモードを全面的に改良しました。</a></li> - <li><a href="/ja/docs/Tools/Debugger">再設計した UI など、新しい JavaScript デバッガーを搭載しました。</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">アニメーションインスペクターで、タイミング関数を表示するようになりました。</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">インスペクターに CSS グリッドの強調表示機能を搭載しました。</a></li> - <li><a href="/ja/docs/Tools/about:debugging#Service_worker_state">about:debugging で Service Worker の状態を表示するようになりました。</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#element_rule">インスペクターで、選択した要素を簡単に強調表示できるようになりました。</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Whitespace-only_text_nodes">インスペクターで、ホワイトスペースのみのテキストノードを表示するようになりました。</a></li> -</ul> - -<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2016-11-14&query_format=advanced&chfield=resolution&chfieldfrom=2016-09-19&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=13333174">Firefox 51 から Firefox 52 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_51" name="Firefox_51">Firefox 51</h2> - -<ul> - <li><a href="/ja/docs/Tools/Network_Monitor#Timings">ネットワークモニターで、ネットワーク要求の "ブロック" 状態を表示するようになりました。</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263768&resolution=FIXED&classification=Client%20Software&chfieldto=2016-09-19&query_format=advanced&chfield=resolution&chfieldfrom=2016-08-01&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 50 から Firefox 51 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_50" name="Firefox_50">Firefox 50</h2> - -<ul> - <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Source_maps">ウェブコンソールがソースマップを理解するようになりました。</a></li> - <li><a href="/ja/docs/Tools/Storage_Inspector#IndexedDB">ストレージインスペクターで、IndexedDB のオブジェクトストアからアイテムを削除できるようになりました。</a></li> - <li><a href="/ja/docs/Tools/Memory">メモリーツールをデフォルトで有効化しました。</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Computed_view">ボックスモデルビューを計算済みビューに移動しました。</a></li> - <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">ウェブコンソールで、XHR や Fetch() によるネットワークリクエストのスタックトレースを表示します。</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263766&chfield=resolution&chfieldfrom=2016-06-06&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-08-01&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 49 から Firefox 50 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_49" name="Firefox_49">Firefox 49</h2> - -<ul> - <li><a href="/ja/docs/Tools/Web_Console/Console_messages#JS">コンソールに記録した JavaScript エラーで、MDN のヘルプページへのリンクを提供します</a>。</li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Further_information_about_animation_compositing">アニメーションインスペクターで、パフォーマンス情報を提供します</a>。</li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_context_menu">インスペクターのコンテキストメニューを再編しました</a>。</li> - <li><a href="/ja/docs/Tools/Network_Monitor#Cause_column">ネットワークインスペクターで、ネットワーク要求の発生源を表示するようになりました</a>。</li> - <li><a href="/ja/docs/Tools/Storage_Inspector#IndexedDB">ストレージインスペクターで、IndexedDB データベースが削除可能になりました</a>。</li> - <li><a href="/ja/docs/Tools/about:debugging#Tabs">about:debugging に、開いているタブをデバッグするための "タブ" ページを追加しました</a>。</li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263762&chfield=resolution&chfieldfrom=2016-04-25&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-06-06&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 48 から Firefox 49 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_48" name="Firefox_48">Firefox 48</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Storage_Inspector#Editing_storage_items">ストレージインスペクターで保存済みのアイテムを編集する</a></li> - <li><a href="/ja/docs/Tools/Memory/Tree_Map_view">メモリーツールのツリーマップビュー</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">ページ内で要素をドラッグして再配置する</a></li> - <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">ウェブコンソールで HTTP リクエストの詳細を表示する</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Web Animations API 向けにアニメーションインスペクターを更新</a></li> - <li><a href="/ja/docs/Tools/Settings#Choose_DevTools_theme">Firebug のテーマ</a></li> - <li><a href="/ja/docs/Tools/DOM_Property_Viewer">DOM プロパティビューワー</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263745&resolution=FIXED&classification=Client%20Software&chfieldto=2016-04-25&query_format=advanced&chfield=resolution&chfieldfrom=2016-03-07&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 47 から Firefox 48 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_47" name="Firefox_47">Firefox 47</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/about:debugging#Workers">登録済みの Service Worker をデバッグ</a></li> - <li><a href="/ja/docs/Tools/Storage_Inspector#Cache_Storage">ストレージインスペクターでキャッシュストレージを表示</a></li> - <li><a href="/ja/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">ドミネータービューで保持パスを表示</a></li> - <li><a href="/ja/docs/Tools/Browser_Toolbox#Debugging_popups">ブラウザーやアドオンのデバッグを支援するため、パネルが自動的に閉じないようにする</a></li> - <li><a href="/ja/docs/Tools/3D_View">3D ビュー (Tilt) を削除</a></li> - <li><a href="/ja/docs/Tools/Responsive_Design_Mode#Responsive_Design_Mode_controls">レスポンシブデザインモードでカスタムユーザーエージェント文字列を設定</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">フォントインスペクターをデフォルトで無効化</a></li> - <li><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter#Entering_expressions">コンソールが未完了の入力を検出して、複数行入力モードに切り替える</a></li> - <li><a href="/ja/docs/Tools/Contributing/Contribute_on_nightly">Firefox のリビルドなしで開発ツールのハックを可能にする Devtools Reload</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263761&chfield=resolution&chfieldfrom=2016-01-25&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-03-07&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 46 から Firefox 47 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_46" name="Firefox_46">Firefox 46</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Memory/Dominators_view">メモリーツールのドミネータービュー</a></li> - <li><a href="/ja/docs/Tools/Performance/Allocations">パフォーマンスツールのメモリー割り当てビュー</a></li> - <li><a href="/ja/docs/Tools/Style_Editor#The_media_sidebar">スタイルエディターで <code>@media</code> 規則の条件をワンクリックで適用</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263754&resolution=FIXED&classification=Client%20Software&chfieldto=2016-01-25&query_format=advanced&chfield=resolution&chfieldfrom=2015-12-14&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 45 から Firefox 46 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_45" name="Firefox_45">Firefox 45</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">ページインスペクターの全文検索機能</a></li> - <li><a href="/ja/docs/Tools/Memory#Diffing_heap_snapshots">メモリーツールでヒープのスナップショットの差分を表示</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#Timeline">ネットワークモニターで DomContentLoaded および load イベントを表示</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">アニメーションインスペクターを改良</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=RESOLVED&bug_status=VERIFIED&chfield=resolution&chfieldfrom=2015-10-29&chfieldto=2015-12-14&chfieldvalue=FIXED&classification=Client%20Software&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&resolution=FIXED&list_id=12753878">Firefox 44 から Firefox 45 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_44" name="Firefox_44">Firefox 44</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Memory">メモリーツール</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">アニメーションインスペクターを改良</a></li> - <li><a href="/ja/docs/Tools/Performance/Waterfall#Markers">タイムラインの新たなマーカー: DomContentLoaded、load、worker メッセージ</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-11-03&query_format=advanced&chfield=resolution&chfieldfrom=2015-09-19&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12582678">Firefox 43 から Firefox 44 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_43" name="Firefox_43">Firefox 43</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_43">アニメーションインスペクターの新たな UI</a></li> - <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Server">ウェブコンソールでサーバー側のログを記録</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">CSS 宣言をオーバーライドしたルールをすばやく見つける</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">インスペクターのコンテキストメニュー項目 "コンソールで使う"</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Strict_search">ルールビューで "厳密に" フィルタリング</a></li> - <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Network">コンソールのネットワーク項目にネットワークモニターへのリンクを追加</a></li> - <li><a href="/ja/docs/Tools/WebIDE">WebIDE の新たなサイドバー UI</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-09-19&query_format=advanced&chfield=resolution&chfieldfrom=2015-08-10&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12582678">Firefox 42 から Firefox 43 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_42" name="Firefox_42">Firefox 42</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Wi-Fi 経由で Android 版 Firefox のデバッグを行う</a></li> - <li><a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Configuring_Simulators">WebIDE で Firefox OS シミュレーターの設定を行う</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters#Saving_filter_presets">CSS filter のプリセット</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-08-10&query_format=advanced&chfield=resolution&chfieldfrom=2015-06-29&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12478437">Firefox 41 から Firefox 42 の間に解決した開発ツール関連のバグ一覧</a>。</p> - -<h2 id="Firefox_41" name="Firefox_41">Firefox 41</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">DOM ノードのスクリーンショットを撮影する</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#CopySave_All_As_HAR">HAR としてコピー/HAR として保存</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Add_rules">ルールビューの "新しいルールを追加" ボタン</a></li> - <li><a href="/ja/docs/Tools/View_source">タブでソースを表示</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Copy_rules">CSS ルールのコピー方法を追加</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/View_background_images">ルールビューで画像を data: URI としてコピー</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-06-29&query_format=advanced&chfield=resolution&chfieldfrom=2015-05-11&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12283503">Firefox 40 から Firefox 41 の間に解決した開発ツール関連のバグ一覧</a>。特にパフォーマンスツールに関係する、これらのバグ修正の多くは Firefox 40 に反映されました。</p> - -<h2 id="Firefox_40" name="Firefox_40">Firefox 40</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_40">アニメーションビューを改良</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">CSS プロパティの構文のヘルプを MDN から取得</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">インスペクターでフィルターを編集</a></li> - <li><a href="/ja/docs/Tools/Web_Console#console_API_messages">Worker が発したメッセージをウェブコンソールで表示</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#Filtering_by_URL">ネットワークモニターで、要求を URL でフィルタリング</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#Context_menu">ネットワークモニターで、多くの新たなコンテキストメニュー項目を追加</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#Network_request_fields">ネットワークリソースがブラウザーのキャッシュから取得されたことを示す</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Filtering_rules">ページインスペクターで、ルールをフィルタリング</a></li> -</ul> - -<p>さらに:</p> - -<ul> - <li><a href="/ja/docs/Tools/Debugger/How_to/Debug_eval_sources">無名の eval ソース内で、debugger; 構文でブレーク</a></li> - <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">デバッガーのソースリストペインで、[URL をコピー] および [新しいタブで開く] コンテキストメニュー項目を追加</a></li> - <li><a href="/ja/docs/Tools/Web_Console#Log_messages">ウェブコンソールで console.dirxml をサポート</a></li> - <li><a href="/ja/docs/Tools/Style_Editor#The_style_sheet_pane">スタイルエディターで、スタイルシートリストのコンテキストメニューに "リンクを新しいタブで開く" を追加</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">インスペクターのセレクター検索で、CSS 接頭辞をつけなくても class や id を検索結果に表示</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">ボックスモデルビューのツールチップで、どの CSS ルールによって値が決まったかを表示</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">インスペクターで、Shift + クリックで色単位を切り替え</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">インスペクターで、"この要素の位置にスクロール" メニュー項目を実装</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">インスペクターで、url/id/resource 属性をリンクとして扱う</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#Network_request_fields">ネットワークモニターで、IP アドレスをツールチップで表示</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-05-11&query_format=advanced&chfield=resolution&chfieldfrom=2015-03-31&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12283503">Firefox 39 から Firefox 40 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_39" name="Firefox_39">Firefox 39</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">WebIDE で、Wi-Fi 経由で Firefox OS デバイスのデバッグが可能になりました</a></li> - <li><a href="/ja/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">WebIDE で Cordova のプロジェクトをサポートしました</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_39">アニメーションビューで早戻し、早送り、特定の時間へのジャンプが可能になりました</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_39">3 次ベジェ曲線エディターにプリセットを 31 個搭載しました</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Drag_and_drop">インスペクターで要素のドラッグ・アンド・ドロップが可能になりました</a></li> - <li><a href="/ja/docs/Tools/Web_Console#Command_history">ウェブコンソールのコマンド履歴が、セッションをまたいで維持されるようになりました</a></li> - <li><a href="/ja/docs/Tools/Web_Console#Helper_commands">コンソールで最後に評価された式の結果を表示する $_ コマンド</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#Firefox_39">インライン要素のボックスモデルのハイライト機能を改善</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&query_based_on=devtools_resolved_week&chfieldto=2015-03-31&chfield=resolution&query_format=advanced&chfieldfrom=2015-02-22&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&known_name=devtools_resolved_week&list_id=12157026">Firefox 38 から Firefox 39 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_38" name="Firefox_38">Firefox 38</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Web_Audio_Editor#Bypassing_nodes">Web Audio Editor でオーディオノードをバイパス</a></li> - <li><a href="/ja/docs/Tools/Web_Console#Helper_commands">ウェブコンソールの "コピー" コマンド</a></li> - <li><a href="/ja/docs/Tools/Web_Console#XHR">ウェブコンソールで XmlHttpRequest をハイライトおよびフィルター</a></li> - <li><a href="/ja/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">デバッガーで、最適化により削除された変数を確認</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#Security">ネットワークモニターでセキュリティの警告を確認</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#Network_request_fields">ネットワークモニターで伝送サイズを確認</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animations_view">ページのアニメーションを再生/停止</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-02-23&query_format=advanced&chfield=resolution&chfieldfrom=2015-01-12&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12076303">Firefox 37 から Firefox 38 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_37" name="Firefox_37">Firefox 37</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Network_Monitor#Security">ネットワークモニターのセキュリティパネル</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">インスペクターのアニメーションパネル</a></li> - <li><a href="/ja/docs/Tools/WebIDE#Running_a_custom_build_step">WebIDE でカスタムビルドステップの実行をサポート</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-01-12&chfield=resolution&query_format=advanced&chfieldfrom=2014-11-28&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=11892733">Firefox 36 から Firefox 37 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_36" name="Firefox_36">Firefox 36</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Debugger/How_to/Debug_eval_sources">eval で評価されるソースをデバッガーで表示</a></li> - <li><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Android 版 Firefox への接続手順を簡素化</a></li> - <li>リモートでボックスモデルのハイライト表示が動作</li> - <li><a href="/ja/docs/Tools/Performance#Inverting_the_call_tree">プロファイラーの "呼び出しツリーを反転" オプション</a></li> - <li><a href="/ja/docs/Tools/Web_Console#Type-specific_rich_output">コンソールで DOM Promise を調査</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">インスペクターで "貼り付け" 方法を追加</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-11-28&chfield=resolution&query_format=advanced&chfieldfrom=2014-10-13&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=11736454">Firefox 35 から Firefox 36 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_35" name="Firefox_35">Firefox 35</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Page_Inspector#.3A.3Abefore_and_.3A.3Aafter">インスペクターで ::before および ::after 疑似要素を確認できるようになりました</a>。</li> - <li><a href="/ja/docs/Tools/Style_Editor#Source_map_support">CSS ソースマップがデフォルトで有効になりました</a>。</li> - <li><a href="/ja/docs/Tools/Page_Inspector#Element_popup_menu_2">インスペクターから "DOM プロパティの表示" が可能になりました</a>。</li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&chfieldto=2014-10-13&chfield=resolution&query_format=advanced&chfieldfrom=2014-09-02&chfieldvalue=FIXED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&component=Simulator&product=Firefox&product=Firefox%20OS&list_id=11184176">Firefox 34 から Firefox 35 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_34" name="Firefox_34">Firefox 34</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Storage_Inspector">Storage Inspector: ウェブページが保存したデータを確認できる新ツール</a></li> - <li><a href="/ja/docs/Tools/Performance">Performance tool: プロファイラーの UI の改良とフレームレートのタイムライン</a></li> - <li><a href="/ja/docs/tools/Working_with_iframes">Frame switching: 開発ツールがページ内の特定の iframe を指すようにする</a></li> - <li><a href="/ja/docs/Web/API/Console.table">console.table をサポート</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector#Examining_event_listeners">インスペクターで jQuery のイベントの確認が可能</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&chfieldto=2014-09-02&chfield=resolution&query_format=advanced&chfieldfrom=2014-07-21&chfieldvalue=FIXED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&component=Simulator&product=Firefox&product=Firefox%20OS&list_id=11184176">Firefox 33 から Firefox 34 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_33" name="Firefox_33">Firefox 33</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/WebIDE">WebIDE</a>: ウェブアプリの開発やデバッグのための新たな環境</li> - <li>アニメーションの <a href="/ja/docs/Tools/Page_Inspector#Editing_.40keyframes">@keyframes</a> と <a href="/ja/docs/Tools/Page_Inspector#Editing_cubic_B.C3.A9zier_curves">タイミング関数</a> の編集が可能</li> - <li>インスペクターで <a href="/ja/docs/Tools/Page_Inspector#Examining_event_listeners">イベントリスナーの確認が可能</a></li> - <li>スタイルエディターの <a href="/ja/docs/Tools/Style_Editor#The_media_sidebar">サイドバーで @media 規則を表示</a></li> - <li>インスペクターで <a href="/ja/docs/Tools/Page_Inspector#Adding_rules">CSS 規則の新規作成</a> と <a href="/ja/docs/Tools/Page_Inspector#Editing_rules">セレクターの編集</a> が可能</li> - <li><a href="/ja/docs/Tools/GCLI#Commands">開発ツールバーの新コマンド</a>: folder, highlight, inject</li> -</ul> - -<p>さらに:</p> - -<ul> - <li><a href="/ja/docs/Tools/Tools_Toolbox#Advanced_settings">キャッシュを無効化する設定</a> が、開発ツールを開き直した後も継続</li> - <li><a href="/ja/docs/Tools/Page_Inspector#transform_visualisation">transform の視覚化をツールチップではなく、ページ内で表示</a></li> - <li><a href="/ja/docs/Tools/Tools_Toolbox#Editor_Preferences">ソースエディターの設定</a> を開発ツールのオプションに移動</li> - <li>レスポンシブデザインビューで <a href="/ja/docs/Tools/Responsive_Design_View#select-size">ビューポートのサイズを直接編集可能</a></li> - <li>デバッガーで、<a href="/ja/docs/Tools/Debugger#Debugger_settings">拡張子が "min.js" であるソースファイルを自動的にブラックボックス化</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-07-21&chfield=resolution&query_format=advanced&chfieldfrom=2014-06-09&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox">Firefox 32 から Firefox 33 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_32" name="Firefox_32">Firefox 32</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Web_Audio_Editor">Web Audio エディター</a></li> - <li><a href="/ja/docs/Tools/Scratchpad#Code_completion_and_inline_documentation">スクラッチパッドのコード補完とインラインドキュメント</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector#Rules_view">インスペクターのルールビューでユーザーエージェントのスタイルを表示</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector#Firefox_32_onwards_2">要素選択ボタンを移動</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector#Firefox_32_onwards">インスペクターの情報バーにノードの寸法を追加</a></li> - <li><a href="/ja/docs/Tools/Tools_Toolbox#Extra_tools">ページ全体のスクリーンショットボタンを追加</a></li> -</ul> - -<p>さらに:</p> - -<ul> - <li>ツールに HiDPI 画像を追加</li> - <li>インスペクターで、<code>display:none</code> が設定されているノードを異なる書式で表示</li> -</ul> - -<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-06-09&chfield=resolution&query_format=advanced&chfieldfrom=2014-04-28&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox">Firefox 31 から Firefox 32 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_31" name="Firefox_31">Firefox 31</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="/ja/docs/Tools/Eyedropper">ウェブページから色を選択するスポイトツール</a></li> - <li><a href="/ja/docs/Tools/Web_Console#Error_messages">コンソールのエラーメッセージでフルスタックトレースを表示</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector#Box_model_view">ボックスモデルビューで編集が可能</a></li> - <li><a href="/ja/docs/Tools/Web_Console#Styling_messages">コンソールのメッセージにスタイルを設定する %c 書式</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#Copy_as_cURL">ネットワークモニターの "cURL としてコピー" コマンド</a></li> - <li><a href="/ja/docs/tools/Keyboard_shortcuts#Source_editor">ソースエディターで Sublime Text のキーバインドをサポート</a></li> -</ul> - -<p>さらに:</p> - -<ul> - <li><a href="/ja/docs/Tools/Network_Monitor#Network_request_list">ネットワークモニターのログを残し続けるオプション</a></li> - <li><a href="/ja/docs/Tools/Web_Console#JavaScript_errors_and_warnings">ウェブコンソールで、JavaScript の警告をデフォルトで表示するように変更</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector#HTML_pane_2">Alt + クリックでノードの子孫をすべて表示</a></li> -</ul> - -<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-04-28&chfield=resolution&query_format=advanced&chfieldfrom=2014-03-17&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox&list_id=10022921">Firefox 30 から Firefox 31 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_30" name="Firefox_30">Firefox 30</h2> - -<p>ハイライト:</p> - -<ul> - <li><a href="https://www.youtube.com/watch?v=y2LcsxE2pR0">インスペクターのアニメーションパネル</a></li> - <li><a href="/ja/docs/Tools/Web_Console#Working_with_iframes">フレーム内で実行する JS をウェブコンソールでサポート</a></li> - <li>ウェブコンソールの表示を改良: コードのハイライト表示、<a href="/ja/docs/Tools/Web_Console#Highlighting_and_inspecting_nodes">ノードのハイライト表示と調査</a></li> - <li>ネットワークモニターのテーマを改良、<a href="/ja/docs/Tools/Network_Monitor#Network_request_fields">画像のサムネイルとプレビュー</a>、<a href="/ja/docs/Tools/Network_Monitor#Preview">HTML のプレビュー</a></li> - <li><a href="/ja/docs/Tools/Browser_Console#Browser_Console_command_line">ブラウザーコンソールの入力領域は、設定から有効化しなければなりません</a></li> - <li><a href="/ja/docs/Tools_Toolbox#Available_Toolbox_Buttons">スクラッチパッドなどのツールのアイコンをデフォルトで非表示に変更</a></li> -</ul> - -<p>さらに:</p> - -<ul> - <li><a href="/ja/docs/Web/API/console.count">console.count()</a> をサポート</li> - <li><a href="/ja/docs/Tools/Web_Console#Keyboard_shortcuts">ウェブコンソールのコマンドラインにフォーカスするための新たなショートカットキー</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector#font-family_tooltip">インスペクターの、フォントファミリーのツールチップ</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings#Developer_HUD">Firefox OS HUD</a> 機能: メモリのトラッキングと jank モニター</li> -</ul> - -<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-03-17&chfield=resolution&query_format=advanced&chfieldfrom=2014-02-03&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox&list_id=9755315">Firefox 29 から Firefox 30 の間に解決した開発ツール関連のバグ一覧</a></p> - -<h2 id="Firefox_29" name="Firefox_29">Firefox 29</h2> - -<p><a href="https://hacks.mozilla.org/2014/02/css-source-map-support-network-performance-analysis-more-firefox-developer-tools-episode-29/" title="http://www.mozilla.org/en-US/firefox/aurora/">Firefox 29 Hacks ブログの記事</a>。ハイライト:</p> - -<ul> - <li>Light テーマのメジャーアップデートを含む、<a href="/ja/docs/Tools_Toolbox#Choose_DevTools_theme">テーマの改善</a></li> - <li><a href="/ja/docs/Tools/Network_Monitor#Performance_analysis">ネットワークモニターのパフォーマンス分析ツール</a></li> - <li><a href="/ja/docs/Tools/Style_Editor#Source_map_support">CSS ソースマップ</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector#Selecting_elements">インスペクターでノード選択時の動作を変更</a></li> - <li>デバッガーで <a href="/ja/docs/Tools/Debugger#Call_stack_pane">伝統的なコールスタック</a> および <a href="/ja/docs/Tools/Debugger#Highlight_and_inspect_DOM_nodes">ノードの強調および調査</a> 機能を追加</li> - <li><a href="/ja/docs/Tools/Using_the_Source_Editor#See_also">ソースエディターで Emacs および Vim のキーバインドをサポート</a></li> -</ul> - -<h2 id="Firefox_28" name="Firefox_28">Firefox 28</h2> - -<p><a href="https://hacks.mozilla.org/2013/12/split-console-pretty-print-minified-js-and-more-firefox-developer-tools-episode-28/" title="Aurora Hacks post">Firefox 28 Hacks ブログ記事</a>。ハイライト:</p> - -<ul> - <li>アプリマネージャーに <a href="/ja/Firefox_OS/Using_the_App_Manager#マニフェストエディタ">マニフェストエディター</a> を統合</li> - <li>ウェブコンソールと他の開発ツールを並べて使用可能にする、<a href="/ja/docs/Tools/Web_Console#The_split_console">コンソールの常時表示</a> 機能</li> - <li>デバッガの、<a href="/ja/docs/Tools/Debugger#Pretty-print_a_minified_file">ミニファイされた JavaScript を整形する機能</a></li> - <li>インスペクターの、<a href="/ja/docs/Tools/Page_Inspector#Rules_view">カラーピッカーのツールチップ</a></li> - <li>プラットフォームやアドオンのコードをデバッグするための <a href="/ja/docs/Tools/Browser_Toolbox">ブラウザーツールボックス</a></li> -</ul> - -<h2 id="Firefox_27" name="Firefox_27">Firefox 27</h2> - -<p><a href="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/">Firefox 27 Hacks ブログ記事</a>。ハイライト:</p> - -<ul> - <li>WebGL シェーダーの表示や編集が可能な <a href="/ja/docs/Tools/Shader_Editor">シェーダーエディター</a></li> - <li>デバッガーで、リッスンしている <a href="/ja/docs/Tools/Debugger#Break_on_a_DOM_event">DOM イベントでブレーク</a> させるようにする</li> - <li><a href="/ja/docs/Tools/Page_Inspector#Editing_HTML">インスペクター内で HTML を編集</a></li> - <li>インスペクターの <a href="/ja/docs/Tools/Page_Inspector#Rules_view">ルールビュー</a> で、色見本と背景画像を確認</li> - <li>ウェブコンソールが <a href="/ja/docs/Tools/Web_Console#Reflow_events">リフローイベント</a> を記録</li> - <li>多くのツールで、ソースエディターとして CodeMirror を使用</li> -</ul> diff --git a/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html index a2f726cd33..a2f726cd33 100644 --- a/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html +++ b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html diff --git a/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html b/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html deleted file mode 100644 index 90596180ce..0000000000 --- a/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: レスポンシブデザインモード (Firefox 52 より前) -slug: Tools/Responsive_Design_Mode_(before_Firefox_52) -translation_of: Tools/Responsive_Design_Mode -translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52) ---- -<div>{{ToolsSidebar}}</div><div class="note"> -<p>このページでは、Firefox 52 より前のバージョンのレスポンシブデザインモードについて説明します。Firefox 52 以降については、<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a> をご覧ください。</p> -</div> - -<p><a href="/ja/docs/Web_Development/Responsive_Web_design">レスポンシブデザイン</a> は、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインモードは、ウェブサイトやウェブアプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。</p> - -<p>以下のスクリーンショットは Wikipedia のモバイル版を、コンテンツエリアのサイズが 320x480 の状態で表示した例です。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12738/responsive-design-mode.png" style="height: 788px; width: 735px;"></p> - -<p>レスポンシブデザインモードは、コンテンツエリアのサイズをすばやくかつ正確に変更できるので便利です。</p> - -<p>もちろん、ブラウザーのウィンドウサイズを変えることもできるでしょう。しかしブラウザーのウィンドウを小さくするとほかのタブもすべて小さくなってしまい、ブラウザーのインターフェイスが使用しづらくなります。</p> - -<p>レスポンシブデザインモードを有効にした状態で、コンテンツエリアがリサイズされたまま通常どおりにブラウジングを続けることができます。</p> - -<h2 id="Enabling_and_disabling" name="Enabling_and_disabling">有効化と無効化</h2> - -<p>レスポンシブデザインモードの有効化方法は 3 つあります:</p> - -<ul> - <li>Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) のウェブ開発サブメニューで [レスポンシブデザインモード] を選択する</li> - <li><a href="/ja/docs/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> で [レスポンシブデザインモード] ボタンを押す</li> - <li>Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)</li> -</ul> - -<p>また、レスポンシブデザインモードを無効化する方法も 3 つあります:</p> - -<ul> - <li>[レスポンシブデザインモード] メニュー項目を再度選択する</li> - <li>ウィンドウの左上隅にある [終了] ボタンをクリックする</li> - <li>Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)。Firefox 34 より前では、Esc キーでもレスポンシブデザインモードが閉じました。</li> -</ul> - -<h2 id="Resizing" name="Resizing">リサイズ</h2> - -<p>コンテンツエリアのサイズを変更する方法は 2 つあります:</p> - -<ul> - <li><a href="#select-size">[サイズ選択] コントロール</a> を使用する</li> - <li>コンテンツエリアの右端と下端、および右下隅にあるコントロールをクリックアンドドラッグする</li> -</ul> - -<p>クリックアンドドラッグでリサイズする場合、Control キー (Mac OS X では Cmd キー) を押しながら操作するとリサイズ時の移動速度が遅くなります。これにより、精密なサイズ設定が容易になります。</p> - -<h2 id="Responsive_Design_Mode_controls" name="Responsive_Design_Mode_controls">レスポンシブデザインモードの操作</h2> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12736/responsive-design-mode-controls.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>レスポンシブデザインモードでページを表示しているときは、ウィンドウの上部に 5 個のコントロールがあります:</p> - -<dl> - <dt>終了</dt> - <dd>レスポンシブデザインモードを終了して、通常のブラウジングに戻ります。</dd> - <dt>サイズ選択</dt> - <dd>いくつかの幅と高さのプリセット、または独自に定義したサイズから選択します。</dd> - <dt>高さと幅を入れ替え</dt> - <dd>スクリーンの向きのポートレートとランドスケープを切り替えます。</dd> - <dt>タッチイベントをシミュレート</dt> - <dd>touch イベントのシミュレーションを有効化/無効化します。touch イベントのシミュレーションを有効化すると、mouse イベントを <a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events">touch イベント</a> に変換します。</dd> - <dt>スクリーンショット</dt> - <dd>コンテンツエリアのスクリーンショットを取得します。スクリーンショットは、Firefox の既定のダウンロード先に保存します。</dd> - <dt>Custom User Agent を設定</dt> - <dd><em>Firefox 47 の新機能</em>。ユーザーエージェント文字列を入力して、入力ボックスからフォーカスを外します。入力ボックスを青色でハイライト表示して、入力した UA 文字列を使用していることを示します。Firefox はカレントタブから実行するリクエストに限り、指定した UA 文字列を含めます。これは、<a href="/ja/docs/Browser_detection_using_the_user_agent">UA スニッフィング</a> によってブラウザーごとに異なるコンテンツを提供するサイトで役に立ちます。文字列を選択および削除すると、通常の UA 文字列に戻ります。</dd> -</dl> diff --git a/files/ja/tools/using_the_source_editor/index.html b/files/ja/tools/using_the_source_editor/index.html deleted file mode 100644 index f546812c77..0000000000 --- a/files/ja/tools/using_the_source_editor/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: ソースエディタの使用 -slug: Tools/Using_the_Source_Editor -translation_of: tools/Keyboard_shortcuts#Source_editor -translation_of_original: Tools/Using_the_Source_Editor ---- -<div>{{ToolsSidebar}}</div><p>ソースエディタは <a href="/ja/JavaScript_code_modules/source-editor.jsm" title="source-editor.jsm"><code>source-editor.jsm</code></a> によって提供されるエディタコンポーネントで、<a href="/ja/Tools/Scratchpad" title="Scratchpad">スクラッチパッド</a> や <a href="/ja/Tools/Style_Editor" title="Style Editor">スタイルエディタ</a> などの開発ツールで共用しています。また、<a href="/ja/JavaScript_code_modules/Using_the_Source_Editor_API" title="Using the Source Editor API">Firefox の拡張機能から使用する</a>こともできます。この記事では、テキストを編集するときのエディタ自身の使い方を説明します。</p> - -<h2 id="キーボードコマンド">キーボードコマンド</h2> - -<p>以下は、各コマンドの標準的なキーボードショートカットです。これは一部のアドオンで異なる場合があることに注意してください。ただし、Firefox では常にこれらを使用します。</p> - -<div class="note"><strong>注意:</strong> Mac OS X では、control キーの代わりに Command キーを使用します。</div> - -<p> </p> - -<table class="standard-table" style="width: auto;"> - <thead> - <tr> - <th class="header">機能</th> - <th class="header">キーボード</th> - </tr> - </thead> - <tbody> - <tr> - <td>すべて選択</td> - <td>Ctrl-A</td> - </tr> - <tr> - <td>コピー</td> - <td>Ctrl-C</td> - </tr> - <tr> - <td>検索</td> - <td>Ctrl-F</td> - </tr> - <tr> - <td>再検索</td> - <td>Ctrl-G</td> - </tr> - <tr> - <td>指定行へ移動</td> - <td>Ctrl-L</td> - </tr> - <tr> - <td>やり直し</td> - <td>Ctrl-Shift-Z</td> - </tr> - <tr> - <td>貼り付け</td> - <td>Ctrl-V</td> - </tr> - <tr> - <td>切り取り</td> - <td>Ctrl-X</td> - </tr> - <tr> - <td>元に戻す</td> - <td>Ctrl-Z</td> - </tr> - <tr> - <td>行のインデント</td> - <td>Tab</td> - </tr> - <tr> - <td>行のインデント解除</td> - <td>Shift-Tab</td> - </tr> - <tr> - <td>前の行へ移動</td> - <td>Alt-↑ (Mac OS X では Ctrl-Option-↑)</td> - </tr> - <tr> - <td>後の行へ移動</td> - <td>Alt-↓ (Mac OS X では Ctrl-Option-↓)</td> - </tr> - <tr> - <td>選択範囲のコメント化とコメント解除</td> - <td>Ctrl-/ {{ fx_minversion_inline("14.0") }}</td> - </tr> - <tr> - <td>開き括弧へ移動</td> - <td>Ctrl-[ {{ fx_minversion_inline("14.0") }}</td> - </tr> - <tr> - <td>閉じ括弧へ移動</td> - <td>Ctlr-] {{ fx_minversion_inline("14.0") }}</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="参考情報">参考情報</h2> - -<ul> - <li><a href="/ja/Tools" title="Tools">Tools</a></li> - <li><a href="/ja/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li> - <li><a href="/ja/Tools/Style_Editor" title="Style Editor">Style Editor</a></li> -</ul> diff --git a/files/ja/tools/view_source/index.html b/files/ja/tools/view_source/index.html new file mode 100644 index 0000000000..30a3793e5c --- /dev/null +++ b/files/ja/tools/view_source/index.html @@ -0,0 +1,75 @@ +--- +title: ソースを表示 +slug: View_source +tags: + - DevTools + - Firefox + - view page source +translation_of: Tools/View_source +--- +<div>{{ToolsSidebar}}</div><p>ソース表示機能を使用して、表示しているページの HTML や XML を閲覧できます。ソースを表示する方法は以下のとおりです:</p> + +<ul> + <li>ページ上でコンテキストクリックして、"<em>ページのソースを表示</em>" を選択する</li> + <li>Ctrl+U または macOS で Cmd+U を押下する</li> +</ul> + +<p>Firefox 42 より前のバージョンでは、ページのソースを表示する新しいウィンドウが開いていました。</p> + +<p>Firefox 42 から、(新しいウィンドウに代わり) 新しいタブでソースを表示します。以前のウィンドウ表示を望む場合は、<code>about:config</code> を開いて設定項目 <code>view_source.tab</code> を <code>false</code> に設定してください。</p> + +<p>Firefox 60 で設定項目 <code>view_source.tab</code> が削除されました ({{bug(1418403)}}) ので、ソース表示モードを切り替えできなくなりました。ソースは常に新しいタブで表示します。</p> + +<h2 id="View_Source_features" name="View_Source_features">ソース表示で提供する機能</h2> + +<p>ソース表示機能には 3 つの付加機能があり、Firefox 40 よりソース表示タブのコンテキストメニューからアクセスできます:</p> + +<ul> + <li>指定行へ移動</li> + <li>長い行を折り返す (切り替え式)</li> + <li>構文を強調表示 (切り替え式)</li> +</ul> + +<p>構文のハイライト機能を有効にすると、パースエラーが発生した箇所を赤色で表示します。エラー箇所にマウスポインタを載せると、エラー内容を説明するツールチップを表示します。</p> + +<p>キーボードで指定行へ移動するには、Mac では <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>L</kbd>、Windows や Linux では <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> を押下してください。</p> + +<h2 id="View_Selection_Source" name="View_Selection_Source">選択した部分のソースを表示</h2> + +<p>Web ページの一部分を選択してコンテキストクリックすると、"選択した部分のソースを表示" というメニュー項目があります。これは "ページのソースを表示" と同様の機能ですが、選択した部分のソースだけを表示する点が異なります。</p> + +<h2 id="View_MathML_Source" name="View_MathML_Source">MathML のソースを表示</h2> + +<p><a href="/ja/docs/Web/MathML">MathML</a> 上にマウスポインタがある状態でコンテキストクリックすると、"MathML のソースを表示" というメニュー項目があります。この項目を選択すると、MathML のソースを確認できます。</p> + +<h2 id="Limitations_of_View_Source" name="Limitations_of_View_Source">ソース表示の制限事項</h2> + +<p>以下に、ソース表示が提供する機能について知っておくべき制限事項を挙げます。</p> + +<h3 id="Error_reporter_≠_validator" name="Error_reporter_≠_validator">エラー報告機能は検証ツールではない</h3> + +<p>ソース表示はパース処理のエラーを報告するだけであり、HTML の妥当性のエラーは<strong>報告しません</strong>。たとえば、{{HTMLElement("ul")}} 要素の子要素に {{HTMLElement("div")}} 要素を挿入することはパースエラーではありませんが、<strong>妥当な HTML でもありません</strong>。そのため、ソース表示ではこのエラーを報告しません。HTML が妥当かを確認したい場合は HTML 検証ツール、例えば <a href="http://validator.w3.org/" title="http://validator.w3.org/">W3C が提供するツール</a> を使用しましょう。</p> + +<h3 id="Not_all_parse_errors_are_reported" name="Not_all_parse_errors_are_reported">報告されないエラーがある</h3> + +<p>ソース表示で報告されたエラーはすべて HTML 仕様書に関するパースエラーですが、報告されないパースエラーもあります。下記のエラーは報告されません:</p> + +<ul> + <li>ドキュメントのエンコーディングに関して不正なバイトはエラー報告されません。</li> + <li>禁止された文字はエラー報告されません。</li> + <li>ファイルの終端 (end-of-file) に関するエラーは報告されません。</li> + <li>(タグ、コメント、doctype に対する) テキストに関する木構造構築のエラーは報告されません。</li> + <li><code>xmlns</code> 属性に関するパースエラーは報告されません。</li> +</ul> + +<h2 id="XML_syntax_highlighting" name="XML_syntax_highlighting">XML 構文のハイライト</h2> + +<p>ソース表示では、XML ソースのハイライト表示に HTML トークン化プログラムを使用します。トークン化プログラムは XML ソースのハイライト時にプロセッシングインストラクションをサポートしますが、それは XML 固有の機能のみ提供されます。このため、内部サブセットを持つ doctype やカスタムエンティティへの実体参照は正しくハイライト表示されません。</p> + +<p>誤ったハイライト表示は、(XUL ドキュメントのような) Firefox の chrome ファイルのソースを表示すると見ることができます。しかし実際のところ、典型的な XML ファイルを閲覧する際は問題にならいでしょう。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="http://hsivonen.iki.fi/view-source/" title="http://hsivonen.iki.fi/view-source/">HTML5 Parser-Based View Source Syntax Highlighting</a> (Blog post)</li> +</ul> diff --git a/files/ja/tools/web_console/opening_the_web_console/index.html b/files/ja/tools/web_console/ui_tour/index.html index a71b4568e1..a71b4568e1 100644 --- a/files/ja/tools/web_console/opening_the_web_console/index.html +++ b/files/ja/tools/web_console/ui_tour/index.html |