diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/tools | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/tools')
165 files changed, 16450 insertions, 0 deletions
diff --git a/files/ja/tools/about_colon_debugging/index.html b/files/ja/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..86bb30533a --- /dev/null +++ b/files/ja/tools/about_colon_debugging/index.html @@ -0,0 +1,211 @@ +--- +title: 'about:debugging' +slug: 'Tools/about:debugging' +translation_of: 'Tools/about:debugging' +--- +<p>{{ToolsSidebar}}</p> + +<p>about:debugging ページは、1 か所からさまざまなデバッグ対象に Firefox の開発ツールを接続できる場所を提供します。現在サポートしているデバッグ対象は、リスタートレスアドオン、タブ、Worker の 3 種類です。</p> + +<h2 id="Opening_the_aboutdebugging_page" name="Opening_the_aboutdebugging_page">about:debugging ページを開く</h2> + +<p>about:debugging を開く方法がいくつかあります:</p> + +<ul> + <li>Firefox の URL バーに "about:debugging" と入力します。</li> + <li><em>Firefox 47 の新機能</em>: メニューの [ツール] > [ウェブ開発] で、[Service Worker] をクリックします。</li> + <li><em>Firefox 47 の新機能</em>: メインツールバーまたはハンバーガーメニュー (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">) の中にあるレンチのアイコン (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">) をクリックして、[Service Worker] を選択します。</li> +</ul> + +<p>about:debugging を開くと左側に、2 つの主要なビュー (アドオンと Worker) を切り替えることができるサイドバーがあります。</p> + +<p>システムアドオンがこのページのリストに表示されるかどうかは、<code>devtools.aboutdebugging.showSystemAddons</code> プリファレンスの設定によって異なります。システムアドオンを表示する必要がある場合は <code>about:config</code> に移動し、この値が <code>true</code> に設定されていることを確認します。</p> + +<h2 id="Add-ons" name="Add-ons">アドオン</h2> + +<div class="note"> +<p>about:debugging のアドオンセクションは、<a href="/ja/Add-ons/Bootstrapped_extensions">基本的なブートストラップ型拡張機能</a>、<a href="/ja/Add-ons/SDK">Add-on SDK を使用したアドオン</a>、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> を含む、再起動不要なアドオンのみサポートしています。</p> +</div> + +<p>このページでは 2 つのことを行えます:</p> + +<ul> + <li>ディスクから一時的にアドオンを読み込む</li> + <li><a href="/ja/Add-ons/Add-on_Debugger">アドオンデバッガー</a> をリスタートレスアドオンに接続する</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15009/debugger-revised.png" style="display: block; height: 612px; margin-left: auto; margin-right: auto; width: 700px;"></p> + +<h3 id="Connecting_the_Add-on_Debugger" name="Connecting_the_Add-on_Debugger">アドオンデバッガーを接続する</h3> + +<div class="note"> +<p>現在、WebExtensions のデバッグにはアドオンデバッガーではなくブラウザーツールボックスを使用することを推奨していますので注意してください。詳しくは <a href="/ja/Add-ons/WebExtensions/Debugging">WebExtensions のデバッグ</a> をご覧ください。</p> +</div> + +<p>about:debugging のページに、現在インストールされているリスタートレスアドオンを一覧表示します (注記: このリストには、Firefox のプリインストールアドオンも含まれます)。アドオン名の隣に、[デバッグ] ボタンがあります。</p> + +<p>[デバッグ] ボタンが無効化されている場合は、[アドオンのデバッグを有効化] にチェックを入れてください。</p> + +<p>[デバッグ] をクリックすると、接続を許可するかを尋ねるダイアログボックスが表示されます。[OK] をクリックすると、<a href="/ja/docs/Mozilla/Add-ons/Add-on_Debugger">アドオンデバッガー</a> を新しいウィンドウで表示します。時々、デバッガーのウィンドウが Firefox のメインウィンドウの裏に隠れる場合がありますので注意してください。</p> + +<p>{{EmbedYouTube("tGGcA3bT3VA")}}</p> + +<p>このツールでできることについては、<a href="/ja/docs/Mozilla/Add-ons/Add-on_Debugger">アドオンデバッガー</a> のページをご覧ください。</p> + +<div class="note"> +<p><a id="Enabling_add-on_debugging" name="Enabling_add-on_debugging">[アドオンのデバッグを有効化]</a> は、設定項目 <code>devtools.chrome.enabled</code> および <code>devtools.debugger.remote-enabled</code> を有効化することにより動作します。アドオンのデバッグを有効にするため、両方の設定を有効にしなければなりません。チェックボックスにチェックを入れると両方の設定を <code>true</code> に、またチェックを外すと両方の設定を <code>false</code> に変更します。</p> + +<p>about:config で設定項目を変更する、あるいは <a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション</a> で [ブラウザーとアドオンのデバッグを有効] および [リモートデバッガーを有効] にチェックを入れる方法も使用できます。</p> +</div> + +<h3 id="Loading_a_temporary_add-on" name="Loading_a_temporary_add-on">一時的にアドオンを読み込む</h3> + +<p>[一時的なアドオンを読み込む] ボタンを使用して、任意の種類のリスタートレスアドオンを、ディスク上のディレクトリーから一時的に読み込むことができます。ボタンをクリックして、アドオンのファイルがあるディレクトリーに移動してファイルを選択してください。一時的なアドオンが、"一時的な拡張機能" の見出しの下に表示されます。</p> + +<p>アドオンのパッケージングや署名は不要です。Firefox を再起動するまで、アドオンがインストールされた状態になります。</p> + +<p>{{EmbedYouTube("sAM78GU4P34")}}</p> + +<p>XPI からアドオンをインストールする場合と比較して、この方法には以下の大きな利点があります:</p> + +<ul> + <li>アドオンのコードを変更したときに、XPI をリビルドして再インストールする必要はありません。</li> + <li>署名機能を無効化する必要なしに、未署名のアドオンを読み込むことができます。</li> +</ul> + +<h3 id="Updating_a_temporary_add-on" name="Updating_a_temporary_add-on">一時的なアドオンを更新する</h3> + +<p>この方法でアドオンをインストールした場合に、アドオンのファイルを更新するとどうなるのでしょうか?</p> + +<h4 id="Before_Firefox_48" name="Before_Firefox_48">Firefox 48 より前</h4> + +<ul> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> や <a href="/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">ポップアップ</a> といったオンデマンドで読み込むファイルを変更した場合は、変更箇所は自動的に取り込まれて、次に content script を読み込むときやポップアップを表示するときに確認できます。</li> + <li><a href="/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> といった終始読み込まれているファイルを変更した場合は、about:addons ページでアドオンを無効化および再有効化することにより、変更箇所を取り込むことができます。</li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> ファイルといったインストール時にのみパースされるファイルを変更した場合は、Firefox を再起動してアドオンを再度読み込まなければなりません。</li> +</ul> + +<div class="note"> +<p>Firefox 48 より前のバージョンでは、Firefox を再起動せずに [一時的なアドオンを読み込む] ボタンを押してアドオンを再度読み込むことは<em>できません</em>ので注意してください。</p> +</div> + +<h4 id="Firefox_48_onwards" name="Firefox_48_onwards">Firefox 48 以降</h4> + +<ul> +</ul> + +<p>Firefox 48 から以下のようになります:</p> + +<ul> + <li>従来どおり: <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> や <a href="/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">ポップアップ</a> といったオンデマンドで読み込むファイルを変更した場合は、変更箇所は自動的に取り込まれて、次に content script を読み込むときやポップアップを表示するときに確認できます。</li> + <li>上記以外の場合のよりよい方法: [デバッグ] ボタンの隣にある [再読み込み] をクリックします。これは以下のことを行います: + <ul> + <li><a href="/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> のような、永続的なスクリプトを再読み込みします。</li> + <li>manifest.json ファイルを再度解析しますので、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> などのキーの変更点の効果が生じます。</li> + </ul> + </li> +</ul> + +<div class="note"> +<p>Firefox 49 より、再読み込みボタンは一時的なアドオンに限り使用できますので注意してください。他のアドオンでは無効になります。</p> +</div> + +<h2 id="Tabs" name="Tabs">タブ</h2> + +<p>Firefox 49 より、<code>about:debugging</code> で タブ ページを使用できます。これは現在の Firefox のインスタンスで開いている、デバッグ可能なすべてのタブを一覧表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13617/about-debugging-tabs.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> + +<p>それぞれの項目の隣に、<em>デバッグ</em> ボタンがあります。ボタンをクリックするとそのタブに特化したツールボックスが開き、タブの内容をデバッグできます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13619/about-debugging-tabs-toolbox.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> + +<div class="note"> +<p>この機能は、デスクトップ版のタブのデバッグで即座に有用なものではありません。すでに十分なほど簡単に、タブをデバッグするためのツールボックスを開くことができます。一方、リモートデバッグのサポートを始めるために <code>about:debugging</code> を使うときはとても有用であり、またこのページは、モバイルデバイスのブラウザーやシミュレーターなどでデバッグが可能なタブを表示します。この作業の最新状況については {{bug(1212802)}} をご覧ください。</p> +</div> + +<h2 id="Workers" name="Workers">Worker</h2> + +<p>Worker ページでは、Worker を以下のようにカテゴライズして表示します:</p> + +<ul> + <li>すべての登録済み <a href="/ja/docs/Web/API/Service_Worker_API">Service Worker</a></li> + <li>すべての登録済み <a href="/ja/docs/Web/API/SharedWorker">Shared Worker</a></li> + <li><a href="/ja/docs/Web/API/ChromeWorker">Chrome Worker</a> や <a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Worker</a> を含む、その他の Worker</li> +</ul> + +<p>それぞれの Worker に開発ツールを接続する、および Service Worker にプッシュ通知を送ることができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13058/about-debugging-workers.png" style="display: block; height: 642px; margin-left: auto; margin-right: auto; width: 784px;"></p> + +<h3 id="Service_worker_state" name="Service_worker_state">Service Worker の状態</h3> + +<p>Firefox 52 より Service Worker のリストで、Service Worker の <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">ライフサイクル</a> における状態を表示します。以下の 3 種類の状態に分類します:</p> + +<ul> + <li><em>"登録中"</em>: これは Service Worker の初期登録から、ページを制御するまでの間のすべての状態を示します。すなわち "installing"、"activating"、"waiting" の状態を含みます。</li> + <li><em>"実行中"</em>: Service Worker は、現在実行中です。Service Worker はインストールおよびアクティベーション済みであり、現在イベントを処理しています。</li> + <li><em>"停止"</em>: Service Worker はインストールおよびアクティベーション済みですが、アイドル状態の後に終了されました。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14488/service-worker-status.png" style="display: block; height: 555px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<div class="note"> +<p>この章では <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a> にある、シンプルな Service Worker のデモを使用しています。</p> +</div> + +<h3 id="Debugging_workers" name="Debugging_workers">Worker をデバッグする</h3> + +<p>すでに Service Worker が実行中である場合は、Worker の隣に [デバッグ] ボタンおよび [プッシュ] ボタンがあります。Worker が未実行である場合は、[開始] ボタン 1 つだけがあります。ボタンをクリックすると Service Worker が開始します。</p> + +<p>[デバッグ] ボタンを押すと、JavaScript デバッガーとコンソールを Worker に接続します。ブレークポイントを設置する、コードをステップ実行する、変数を確認する、コードを評価するなどの操作ができます:</p> + +<p>{{EmbedYouTube("Z8ax79sHWDU")}}</p> + +<h3 id="Registering_workers" name="Registering_workers">Worker を登録する</h3> + +<p>最初は、<em>Service Worker</em> や <em>Shared Worker</em> の配下に Worker が表示されていないでしょう。Worker を登録すると、リストが更新されます:</p> + +<p>{{EmbedYouTube("wy4kyWFhFF4")}}</p> + +<div class="note"> +<p>Firefox 47 より前のバージョンでは、Service Worker が実際に動作したときにのみ表示します。</p> +</div> + +<h3 id="Unregistering_service_workers" name="Unregistering_service_workers">Service Worker の登録を解除する</h3> + +<div class="geckoVersionNote"> +<p>Firefox 48 の新機能</p> +</div> + +<p>Firefox 48 より、登録済みの Service Worker の隣に [登録解除] という名称のリンクがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13056/unregister-sw.png" style="display: block; margin-left: auto; margin-right: auto; width: 700px;"></p> + +<p>リンクをクリックすると、Service Worker の登録を解除します。</p> + +<h3 id="Sending_push_events_to_service_workers" name="Sending_push_events_to_service_workers">Service Worker に Push イベントを送る</h3> + +<div class="note"> +<p>about:debugging での Push イベント送信は、Firefox 47 の新機能です。</p> +</div> + +<p>プッシュ通知をデバッグするには、<a href="/ja/docs/Web/API/PushEvent">PushEvent</a> のリスナーにブレークポイントを設定してください。ただし、プッシュ通知のデバッグはサーバーが不要であり、ローカルで実施できます。[プッシュ] ボタンをクリックすると、Service Worker に Push イベントを送信できます:</p> + +<p>{{EmbedYouTube("62SkLyA-Zno")}}</p> + +<h3 id="Service_workers_not_compatible" name="Service_workers_not_compatible">互換性がない Service Worker</h3> + +<div> +<p>Firefox 49 より、現在のブラウザーの設定に対して互換性がないため使用やデバッグが行えない Service Worker について、Worker ページの Service Worker セクションで警告メッセージを表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13613/sw-not-compatible.png" style="display: block; height: 705px; margin: 0px auto; width: 1011px;"></p> +</div> + +<p>Service Worker は、いくつかの理由で使用できない場合があります:</p> + +<ul> + <li>プライベートブラウジングウィンドウを使用しているとき</li> + <li>履歴の設定を、[履歴を一切記憶させない] または [常にプライベートブラウジングモード] に設定しているとき</li> + <li><code>about:config</code> で設定項目 <code>dom.serviceWorkers.enable</code> を false に設定しているとき</li> +</ul> diff --git a/files/ja/tools/accessibility_inspector/index.html b/files/ja/tools/accessibility_inspector/index.html new file mode 100644 index 0000000000..446c790fee --- /dev/null +++ b/files/ja/tools/accessibility_inspector/index.html @@ -0,0 +1,160 @@ +--- +title: アクセシビリティインスペクター +slug: Tools/Accessibility_inspector +tags: + - Accessibility + - Accessibility inspector + - DevTools + - Guide + - Tools +translation_of: Tools/Accessibility_inspector +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">アクセシビリティインスペクターは、アクセシビリティツリーによって現在のページで支援技術に公開される重要な情報へアクセスする手段を提供して、欠けている情報やほかに注意が必要なことを確認できます。この記事では、アクセシビリティインスペクターの主な機能や使用方法を説明します。</p> + +<h2 id="A_(very)_brief_guide_to_accessibility" name="A_(very)_brief_guide_to_accessibility">アクセシビリティの (とても) 簡単なガイド</h2> + +<p>アクセシビリティは、可能な限り多くの人々があなたのウェブサイトを利用できるようにするための慣習です。これは利用者の障がいや、使用する端末・ネットワーク速度・地理的な位置といった個人の状況によって情報へアクセスできない状態にしないように、最善を尽くすことです。</p> + +<p>ここでは主に、視覚障がいを持つ人々に情報を提供すること (これはウェブブラウザーで使用できる <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">accessibility API</a> で実現します) について扱います。それは、あなたのページでさまざまな要素がどのような役割を持つかという情報を提供します (例えば単純なテキスト、ボタン、リンク、フォーム要素など)。</p> + +<p>セマンティック DOM 要素はデフォルトで、その用途を示唆する役割が割り当てられています。しかし、時には複雑な独自のコントロールを作成するためにセマンティックではないマークアップ (例えば {{htmlelement("div")}}) を使用しなければならず、これは用途を反映するデフォルトの役割を持っていません。このような状況では、自身の役割を与えるために <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> ロール属性を使用できます。</p> + +<p>ブラウザーの accessibility API によって公開される役割やほかの情報は、アクセシビリティツリーと呼ばれる階層構造で提供されます。これは DOM ツリーに少し似ていますが、含まれる要素一式がより制限されており、またツリーが持つ情報も若干異なっています。</p> + +<p>スクリーンリーダーなどの支援技術は、ウェブページに何があるかを見つけるためにこの情報を使用して、ユーザーにそれが何であるかを伝えて、ページと対話できるようにします。開発ツールのアクセシビリティインスペクターもこの情報を使用して、価値があるアクセシビリティのデバッグ機能を提供します。</p> + +<h2 id="Accessing_the_accessibility_inspector" name="Accessing_the_accessibility_inspector">アクセシビリティインスペクターにアクセスする</h2> + +<p>アクセシビリティインスペクター (Firefox 61 から使用可能) は、デフォルトで開発ツールに表示されていません。有効化するには開発ツールの設定 (<kbd>F1</kbd> を押下するか、"三点リーダー" メニューで <em>設定</em> を選択する) を開いて、<em>標準の開発ツール</em> の <em>アクセシビリティ</em> チェックボックスにチェックを入れてください。これにより開発ツールに <em>アクセシビリティ</em> タブが現れます。タブをクリックすると、アクセシビリティパネルを表示します:</p> + +<p><img alt="Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features" src="https://mdn.mozillademos.org/files/16021/accessibility-inspector-panel-off.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p> + +<p>初期状態では開発ツールのアクセシビリティ機能を無効にしており (別のブラウザータブですでに有効にしている場合や、スクリーンリーダーのユーザーやテスターであるなどの理由で Firefox のアクセシビリティエンジンをすでに開始している場合を除きます)。これは、アクセシビリティ機能が有効であるときにバックグラウンドでアクセシビリティエンジンを実行するためです。エンジンを実行すると、パフォーマンスが低下してメモリ消費が増えます。それにより、<a href="/ja/docs/Tools/Memory">メモリー</a> や <a href="/ja/docs/Tools/Performance">パフォーマンス</a> といったほかのパネルの測定を妨げたり、ブラウザー全体のパフォーマンスが低下したりします。このため、特に使用しないときはアクセシビリティ機能を無効にしておくべきです。</p> + +<p>[<em>アクセシビリティ機能を有効にする</em>] ボタンを押すと、アクセシビリティ機能を有効にします。</p> + +<p>パネルの内容が読み込まれたら、左上にある [<em>アクセシビリティ機能を無効にする</em>] ボタンを押すと再び無効にできます。ただし、スクリーンリーダーを使用するためにアクセシビリティエンジンがすでに動作していた場合は除きます。この場合はボタンが使用できません。</p> + +<div class="note"> +<p><strong>注記</strong>: 複数のタブでアクセシビリティ機能を使用している場合は、あるタブで無効にするとすべてのタブで無効になります。</p> +</div> + +<h2 id="Features_of_the_Accessibility_panel" name="Features_of_the_Accessibility_panel">アクセシビリティパネルの機能</h2> + +<p>アクセシビリティパネルを有効にすると以下のようになります:</p> + +<p><img alt="Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features" src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p> + +<p>左側に、現在のページのアクセシビリティツリー内のすべてのアイテムを表す樹形図があります。入れ子の子孫を持つアイテムにはクリックして子孫を表示できる矢印がありますので、階層の深い部分へ移動できます。それぞれのアイテムで、2 つのプロパティを示します:</p> + +<ul> + <li><em>役割</em> — ページ上でこのアイテムが持つ役割 (例えば <code>pushbutton</code> や <code>footer</code>)。これはブラウザーが与えたデフォルトの役割か、WAI-ARIA の <code>role</code> 属性で与えた役割のいずれかです。</li> + <li><em>名前</em> — ページ上でこのアイテムが持つ名前。これが何に由来するかは、要素によって異なります。例えばほとんどのテキスト要素の名前は単に <code>textContent</code> ですが、フォーム要素の名前は、その要素に関連付けられた {{htmlelement("label")}} の内容物です。</li> +</ul> + +<p>右側には、選択中のアイテムに関する詳細情報を表示します。ここには以下のプロパティを表示します:</p> + +<ul> + <li><em>name</em> — 前述した、アイテムの名前。</li> + <li><em>role</em> — 前述した、アイテムの役割。</li> + <li><em>actions</em> — アイテムで実行できるアイテムの一覧。例えば押しボタンでは "Press"、リンクでは "Jump" があります。</li> + <li><em>value</em> — アイテムの値。この意味はアイテムの種類によって異なります。例えば入力フォーム (role: entry) ではフォームに入力された値、リンクでは対応する <code><a></code> 要素の <code>href</code> 属性にある URL です。</li> + <li><em>DOMNode</em> — アクセシビリティツリー内のアイテムが表す、DOM ノードのタイプです。値の後ろにある "標的" のアイコンをクリックすると、<a href="/ja/docs/Tools/Page_Inspector">ページインスペクター</a> でノードを選択できます。"標的" のアイコンにマウスポインターを載せると、ページで DOM ノードをハイライト表示します。<br> + <img alt="DOMNode property in accessibility inspector with target icon highlighted" src="https://mdn.mozillademos.org/files/16025/dom-node-target-icon.png" style="height: 55px; width: 294px;"></li> + <li><em>description</em> — 要素で提供された詳細説明。通常は title 属性の内容です。</li> + <li><em>help</em> — これは Gecko で実装していませんので、常に空文字列を返します。Firefox 62 でインスペクターから削除する予定です ({{bug(1467643)}})。</li> + <li><em>keyboardShortcut</em> — 要素をアクティブにするために使用できるキーボードショートカットであり、<code>accessKey</code> 属性で指定します。これは Firefox 62 から正常に動作します ({{bug("1467381")}})。</li> + <li><em>childCount</em> — アクセシビリティツリーの階層で、現在のアイテムが持つ子孫の数です。</li> + <li><em>indexInParent</em> — 親アイテムの中で何番目の子アイテムであるかを示すインデックスの値です。親アイテムの中で最初のアイテムである場合は 0 になります。2 番目のアイテムであれば 1 になります。以降も同じです。</li> + <li><em>states</em> — 現在のアイテムに適用可能な、さまざまなアクセシビリティ関連の状態のリストです。例えば、あるデモの中のリンクのひとつは focusable、linked、selectable text、opaque、enabled、sensitive の状態を持ちます。内部状態の一覧については、<a href="/ja/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a> をご覧ください。</li> + <li><em>attributes</em> — アイテムに適用されている、すべてのアクセシビリティ関連の属性の一覧です。これは margin-left や text-indent などスタイル関連の属性、ドラッグ可能やレベル (例えば見出しであれば、見出しのレベル) といったアクセシビリティ情報に関して役に立つ状態が含まれます。使用可能な状態の一覧については、<a href="/ja/docs/Web/Accessibility/AT-APIs/Gecko/Attrs">Gecko object attributes</a> をご覧ください。</li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: 公開される情報は、すべてのプラットフォームで同じです。インスペクターはプラットフォームのアクセシビリティ層の情報ではなく、Gecko のアクセシビリティツリーを公開します。</p> +</div> + +<h3 id="Keyboard_controls" name="Keyboard_controls">キーボード操作</h3> + +<p><em>アクセシビリティ</em> タブは、キーボードで操作可能です:</p> + +<ul> + <li>Tab キーで [<em>アクセシビリティ機能を無効にする</em>] ボタンや左右のパネルを行き来できます。</li> + <li>いずれかのパネルにフォーカスがあるとき、上下矢印キーを使用してアイテムのフォーカスを上下に移動できます。また左右矢印キーを使用して、展開可能な行 (例えばアクセシビリティツリーのさまざまな階層レベル) の展開や折りたたみが可能です。</li> +</ul> + +<h2 id="Notable_related_features" name="Notable_related_features">注目すべき関連機能</h2> + +<p>アクセシビリティ機能を有効にすると、開発ツールでいくつかの有用な追加機能を利用できます。ここでは、それらを詳しく説明します:</p> + +<h3 id="Context_menu_options" name="Context_menu_options">コンテキストメニューの項目</h3> + +<p>ウェブページで UI を右クリックまたは <kbd>Ctrl</kbd> + クリックしたときの通常のコンテキストメニューと、インスペクターの HTML ペインで DOM 要素を右クリックまたは <kbd>Ctrl</kbd> + クリックしたときのコンテキストメニューの両方に、項目が追加されます:</p> + +<p><img alt="context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;"></p> + +<p><img alt="context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p> + +<p>コンテキストメニューの [<em>アクセシビリティプロパティを調査</em>]/[<em>アクセシビリティプロパティを表示</em>] を選択すると、対応するアクセシビリティツリーのアイテムやプロパティを表示するために、<em>アクセシビリティ</em> タブが直ちに開きます。</p> + +<div class="note"> +<p><strong>注記</strong>: 一部の DOM 要素はアクセシビリティプロパティがありません。このような場合は [<em>アクセシビリティプロパティを調査</em>]/[<em>アクセシビリティプロパティを表示</em>] のメニュー項目がグレーアウトします。</p> +</div> + +<h3 id="Highlighting_of_UI_items" name="Highlighting_of_UI_items">UI アイテムのハイライト表示</h3> + +<p>アクセシビリティタブでアクセシビリティアイテムにマウスポインターを載せると、可能であれば関連する UI アイテムで半透明のハイライト表示を行います。小さな情報バーに、アイテムの役割や名前を表示します。これは、アクセシビリティツリーのアイテムが実際のページでどの UI アイテムに関連しているかを判断するのに役立ちます。</p> + +<p>以下の例では画像がハイライト表示されており、役割 "graphic" と名前 "Road, Asphalt, Sky, Clouds, Fall" を上の情報バーに表示していることがわかります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16302/image_accessibility.png" style="border: 1px solid black; display: block; height: 347px; margin: 0px auto; width: 451px;"></p> + +<h4 id="カラーコントラスト">カラーコントラスト</h4> + +<p>コントラスト比が十分でない場合、色盲などの視覚障害を持つ読者はテキストを読み取ることができないため、コントラスト比の情報は、ウェブサイトのカラーパレットを設計するときに特に便利です。Web コンテンツアクセシビリティガイドライン (WCAG) 2.0 では、Web ページ上の小さなテキストの前景色と背景色との最小コントラスト比として 4.5:1 を定義しています。例えば：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16305/text_contrast_2.png" style="display: block; height: 67px; margin: 0px auto; width: 259px;"></p> + +<p>上記の画像の色のコントラストは 2.77 であり、読みやすいようにコントラストが不十分である可能性があります。コントラストが許容されるコントラスト比を満たしていないことを示す警告記号に注目してください。それを以下と比較してください：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16304/text_contrast_1.png" style="display: block; height: 64px; margin: 0 auto; width: 336px;"></p> + +<p>この例では、コントラストは 12.63 です。今回は AAA とチェックマークが緑色で表示され、テキストのコントラスト比が 7:1 以上であることを示しています。つまり、コントラストの強化基準、またはレベル AAA を満たしています。</p> + +<p> </p> + +<h3 id="Accessibility_picker" name="Accessibility_picker">アクセシビリティピッカー</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">インスペクターの HTML ペインピッカー</a> と同様に、<em>アクセシビリティ</em>タブのピッカーボタンを押すと現在のページで UI アイテムを選択できます。そして、アクセシビリティツリーで対応するオブジェクトをハイライト表示します。</p> + +<p>アクセシビリティタブのピッカーは、以下のようにインスペクターの HTML ペインピッカーとは外見が若干異なります:</p> + +<p><img alt="highlighted dom inspector picker button, with a tooltip saying Pick an element from the page" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p> + +<p><img alt="highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;"></p> + +<p>"オブジェクトを選択" するとアクセシビリティツリーでアクセス可能なオブジェクトをハイライト表示して、ピッカーが非アクティブ化します。ただし <kbd>Shift</kbd> キーを押しながら "オブジェクトを選択" すると、ツリーでアクセス可能なオブジェクトを "プレビュー" できます (右ペインにオブジェクトのプロパティを表示します) が、<kbd>Shift</kbd> キーを離すまではいくつでも選択し続ける (ピッカーがキャンセルされません) ことができます。</p> + +<p>ピッカーがアクティブであるとき、ピッカーボタンを再度押すか <kbd>Esc</kbd> キーを押すと、ピッカーを非アクティブ化できます。</p> + +<h2 id="Typical_use_cases" name="Typical_use_cases">典型的な使用方法</h2> + +<p>アクセシビリティインスペクターは、アクセシビリティの問題を一目で見抜くためにとても役に立ちます。第一に、適切な同等文字列がないアイテム (例えば <code>alt</code> 文字列がない画像や、<code>name</code> プロパティが <code>null</code> で適切なラベルがないフォーム要素) を調査できます。</p> + +<p><img alt="A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p> + +<p>また、セマンティクスの検証でも役に立ちます。[<em>アクセシビリティオブジェクトを調査</em>] コンテキストメニュー項目を使用して、アイテムに正しい役割 (例えばボタンが実際にボタンの役割、リンクが実際にリンクの役割を持つか) を設定しているかをすばやく確認できます。</p> + +<p><img alt="A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/Accessibility">アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">実践的なデバッグ情報</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG">WCAG を理解する</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li> + <li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a> by Léonie Watson</li> +</ul> diff --git a/files/ja/tools/accessing_the_developer_tools/index.html b/files/ja/tools/accessing_the_developer_tools/index.html new file mode 100644 index 0000000000..237c6e1bc2 --- /dev/null +++ b/files/ja/tools/accessing_the_developer_tools/index.html @@ -0,0 +1,22 @@ +--- +title: Web開発者メニュー +slug: Tools/Accessing_the_Developer_Tools +translation_of: Tools/Accessing_the_Developer_Tools +--- +<div>{{ToolsSidebar}}</div> + +<p>Web DeveloperメニューはFirefoxに組み込まれている開発ツールにアクセスする主な方法です。 OS XとLinuxでは、これは「ツール」メニューの下にあります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5269/web-developer-tools-menu-osx.png"></p> + +<p>Windows 7では「Firefox」メニューの下にあります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5271/web-developer-tools-menu-windows-7.png" style="height: 595px; width: 506px;"></p> + +<p>メニューは3つのセクションに分割されています：</p> + +<ul> + <li>最初のセクションには、開発ツール用の専用ウィンドウであるToolboxでホストされているツールが一覧表示されています</li> + <li>2番目のセクションには、Toolboxでホストされていない統合ツールと、アドオンとしてインストールされたツールがリストされています（上記のWindowsスクリーンショットでは、Firefox OS Simulatorをインストールしています）</li> + <li>3番目のセクション「Get More Tools」は、Firefox用のその他のWeb開発アドオンへのリンクです</li> +</ul> diff --git a/files/ja/tools/add-ons/index.html b/files/ja/tools/add-ons/index.html new file mode 100644 index 0000000000..9478dd0d88 --- /dev/null +++ b/files/ja/tools/add-ons/index.html @@ -0,0 +1,18 @@ +--- +title: アドオン +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +<div>{{ToolsSidebar}}</div> + +<p>Firefoxには組み込まれていないが、別々のアドオンとして提供される開発ツールです。</p> + +<dl> + <dt><a href="https://addons.mozilla.org/ja/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt> + <dd>WebSocket接続でやりとりされるデータを調べます。</dd> +</dl> diff --git a/files/ja/tools/browser_console/index.html b/files/ja/tools/browser_console/index.html new file mode 100644 index 0000000000..12b87526ca --- /dev/null +++ b/files/ja/tools/browser_console/index.html @@ -0,0 +1,179 @@ +--- +title: ブラウザーコンソール +slug: Tools/Browser_Console +tags: + - Web Development + - 'WebDevelopment:Tools' + - ツール + - デバッグ + - ブラウザ +translation_of: Tools/Browser_Console +--- +<p>{{ToolsSidebar}}</p> + +<p>ブラウザーコンソールは <a href="/ja/docs/Tools/Web_Console" title="Tools/Web_Console">Web コンソール </a>に似ていますが、ひとつのコンテンツタブではなくブラウザー全体に適用されます。</p> + +<p>よって Web コンソールと同じ種類の情報 (ネットワーク要求、JavaScript、CSS、セキュリティのエラーや警告、および JavaScript コードから明示的に出力するメッセージ) を記録します。しかしひとつのコンテンツタブの情報を記録するのではなく、すべてのコンテンツタブ、アドオン、ブラウザー自体のコードの情報を記録します。</p> + +<p>アドオンやブラウザーのコードに対して、通常の<a href="/ja/docs/Tools/Tools_Toolbox"> ツールボックス </a>に含まれる他の ウェブ開発ツールも使用したい場合は、<a href="/ja/docs/Tools/Browser_Toolbox">ブラウザーツールボックス </a>の使用を検討してください。</p> + +<p>同様に、ブラウザーコンソールで JavaScript の式を実行できます。ただし Web コンソールがページの window スコープ内でコードを実行するのに対して、ブラウザーコンソールはブラウザーの chrome ウィンドウのスコープでコードを実行します。これは <a href="/ja/docs/Code_snippets/Tabbed_browser" title="Code_snippets/Tabbed_browser"><code>gBrowser</code></a> グローバル変数を使用するすべてのブラウザータブと対話できるということであり、またブラウザーのユーザインターフェイスを定義するために使用される XUL との対話も可能です。</p> + +<div class="geckoVersionNote"> +<p>注意: ブラウザーコンソールの (JavaScript の式を実行するための) コマンドラインは、デフォルトで無効です。有効化するには about:config で設定項目 <code>devtools.chrome.enabled</code> を <code>true</code> にするか、<a href="/ja/docs/Tools/Settings">開発ツールのオプション</a> で "ブラウザーとアドオンのデバッガーを有効" (Firefox 40 以降) / "ブラウザーデバッガーを有効" (Firefox 38.0.5 以前) を有効にしてください。</p> +</div> + +<h2 id="Opening_the_Browser_Console" name="Opening_the_Browser_Console">ブラウザーコンソールを開く</h2> + +<p>ブラウザーコンソールは 2 種類の方法で開くことができます:</p> + +<ol> + <li>メニューから: Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) の Web 開発サブメニューで "ブラウザーコンソール" を選択します。</li> + <li>キーボードで: Ctrl+Shift+J (Mac では Cmd+Shift+J) を押下します。</li> +</ol> + +<p>オプション <code>-jsconsole</code> を渡してコマンドラインから Firefox を起動する方法でも、ブラウザーコンソールを開始できます:</p> + +<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre> + +<p>ブラウザーコンソールは以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>ブラウザーコンソールの外見や動作は、<a href="/ja/docs/Tools/Web_Console" title="Tools/Web_Console">Web コンソール</a>ととても似ていることがわかるでしょう:</p> + +<ul> + <li>ウィンドウの大部分は、<a href="/ja/docs/Tools/Web_Console#Message_Display_Pane" title="Tools/Web_Console#Message_Display_Pane">メッセージを表示するペイン</a> が占めています。</li> + <li>上段に、表示するメッセージのフィルタリングが可能な <a href="/ja/docs/Tools/Web_Console#Filtering_and_searching" title="Tools/Web_Console#Filtering_and_searching">ツールバー </a>があります。</li> + <li>下段に、JavaScript の式の評価が可能な <a href="/ja/docs/Tools/Web_Console#The_command_line_interpreter" title="Tools/Web_Console#The_command_line_interpreter">コマンドラインインタープリター </a>があります。</li> +</ul> + +<h2 id="Browser_Console_logging" name="Browser_Console_logging">ブラウザーコンソールのロギング</h2> + +<p>ブラウザーコンソールが記録するメッセージの種類は、Web コンソールが記録するものと同じです:</p> + +<ul> + <li><a href="/ja/docs/Tools/Web_Console#HTTP_requests" title="Tools/Web_Console#HTTP_requests">HTTP 要求</a></li> + <li><a href="/ja/docs/Tools/Web_Console#Warnings_and_errors" title="Tools/Web_Console#Warnings_and_errors">警告とエラー</a> (JavaScript、CSS、セキュリティの警告やエラー、および <a href="https://developer.mozilla.org/ja/docs/Web/API/console" title="Web/API/console">console</a> API を使用して JavaScript コードから明示的に記録されるメッセージを含みます)</li> + <li><a href="/ja/docs/Tools/Web_Console#Input.2Foutput_messages" title="Tools/Web_Console#Input.2Foutput_messages">入力/出力メッセージ</a>: コマンドラインからブラウザーに送信したコマンドと、そのコマンドの実行結果</li> +</ul> + +<p>ただし、こちらのメッセージの発信元は以下のとおりです:</p> + +<ul> + <li>すべてのブラウザータブで提供している ウェブコンテンツ</li> + <li>ブラウザー自体のコード</li> + <li>アドオン</li> +</ul> + +<h3 id="Messages_from_add-ons" name="Messages_from_add-ons">アドオン発のメッセージ</h3> + +<p>ブラウザーコンソールは、すべての Firefox アドオンが出力したメッセージを表示します。</p> + +<h4 id="Console.jsm" name="Console.jsm">Console.jsm</h4> + +<p>従来型あるいはブートストラップ型のアドオンから console API を使用するために、Console モジュールから取得します。</p> + +<p>Console.jsm からエクスポートされるシンボルは "console" です。以下に、API にアクセスしてブラウザーコンソールにメッセージを出力する方法の例を示します。</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm"); +console.log("Hello from Firefox code"); //output messages to the console</pre> + +<p>詳しくはこちら:</p> + +<ul> + <li><a href="/ja/docs/Web/API/console">console API reference</a></li> + <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm source code in the Mozilla DXR</a></li> +</ul> + +<h4 id="HUDService" name="HUDService">HUDService</h4> + +<p>HUDService でもブラウザーコンソールにアクセスできます。モジュールは <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a> で確認できます。ブラウザーコンソールだけでなく Web コンソールにもアクセスできることがわかります。</p> + +<p>以下は、ブラウザーコンソールの内容を消去する方法の例です:</p> + +<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); +var HUDService = devtools.require("devtools/client/webconsole/hudservice"); + +var hud = HUDService.getBrowserConsole(); +hud.jsterm.clearOutput(true);</pre> + +<p>ブラウザーコンソールの content ドキュメントにアクセスしたい場合も、HUDService で実現できます。以下の例では、ブラウザーコンソールの "消去" ボタンにマウスポインターを載せたときに、コンソールをクリアするようにしています:</p> + +<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); +var HUDService = devtools.require("devtools/client/webconsole/hudservice"); + +var hud = HUDService.getBrowserConsole(); + +var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button'); +clearBtn.addEventListener('mouseover', function() { + hud.jsterm.clearOutput(true); +}, false);</pre> + +<h4 id="Bonus_Features_Available" name="Bonus_Features_Available">特典機能</h4> + +<p><a href="/ja/docs/Mozilla/Add-ons/SDK" title="/ja/docs/Mozilla/Add-ons/SDK">Add-on SDK</a> によるアドオンでは、console API が自動的に利用可能になります。ウィジェットをクリックしたときにエラーを出力するアドオンの例を示します:</p> + +<pre class="brush: js">widget = require("sdk/widget").Widget({ + id: "an-error-happened", + label: "Error!", + width: 40, + content: "Error!", + onClick: logError +}); + +function logError() { + console.error("something went wrong!"); +}</pre> + +<p>このコードを <a href="/ja/docs/Mozilla/Add-ons/SDK/チュートリアル/Installation" title="/ja/docs/Mozilla/Add-ons/SDK/チュートリアル/Installation">XPI ファイルとして構築</a>して、ブラウザーコンソールを開き、そして XPI ファイルを Firefox で開いてインストールすると、アドオンバーに "Error!" というラベルのウィジェットが現れます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">アイコンをクリックしましょう。すると、ブラウザーコンソールで以下のような出力を確認できるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Add-on SDK ベースのアドオンに限りメッセージの先頭にアドオンの名称 ("log-error") が付くため、<a href="/ja/docs/Tools/Web_Console#Filtering_and_searching" title="Tools/Web_Console#Filtering_and_searching">"フィルター出力"</a> 検索ボックスを使用してこのアドオン由来のメッセージを見つけるのが容易になります。デフォルトではエラーメッセージのみコンソールに記録されますが、<a href="/ja/Add-ons/SDK/Tools/console#Logging_Levels" title="/ja/Add-ons/SDK/Tools/console#Logging_Levels">ブラウザーの設定でこれを変更できます</a>。</p> + +<h2 id="Browser_Console_command_line" name="Browser_Console_command_line">ブラウザーコンソールのコマンドライン</h2> + +<div class="geckoVersionNote"> +<p>ブラウザーコンソールのコマンドラインは、デフォルトで無効です。有効化するには about:config で設定項目 <code>devtools.chrome.enabled</code> を <code>true</code> にするか、<a href="/ja/docs/Tools/Settings">開発ツールのオプション</a>で "ブラウザデバッガーを有効" を有効にしてください。</p> +</div> + +<p>Web コンソールと同様に、コマンドラインインタープリターでリアルタイムに JavaScript 式の評価が可能です:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">また Web コンソールのコマンドラインと同様に、こちらのコマンドラインも<a href="/ja/docs/Tools/Web_Console#Autocomplete" title="Tools/Web_Console#Autocomplete">オートコンプリート</a>、<a href="/ja/docs/Tools/Web_Console#Command_history" title="Tools/Web_Console#Command_history">履歴</a>、さまざまな<a href="/ja/docs/Tools/Web_Console#Keyboard_shortcuts" title="Tools/Web_Console#Keyboard_shortcuts">キーボードショートカット</a>や<a href="/ja/docs/Tools/Web_Console#Helper_commands" title="Tools/Web_Console#Helper_commands">支援コマンド</a>をサポートしています。コマンドの実行結果がオブジェクトである場合は、<a href="/ja/docs/Tools/Web_Console#Inspecting_objects" title="Tools/Web_Console#Inspecting_objects">オブジェクトをクリックして詳細を確認できます</a>。</p> + +<p>ただし Web コンソールは接続された content window のスコープでコードを実行するのに対して、ブラウザーコンソールはブラウザーの chrome window のスコープでコードを実行します。これは <code>window</code> を評価することで確認できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>これは、ブラウザーを制御できるということです: タブやウィンドウを開くまたは閉じる、開いているコンテンツを変更する、XUL 要素の生成、変更、削除によりブラウザーの UI の変更が可能です。</p> + +<h3 id="Controlling_the_browser" name="Controlling_the_browser">ブラウザーの制御</h3> + +<p>コマンドラインインタープリターは <code>gBrowser</code> グローバル変数を通して、<a href="/ja/docs/XUL/tabbrowser" title="XUL/tabbrowser"><code>tabbrowser</code></a> オブジェクトにアクセスでき、またコマンドラインを通してブラウザーを制御することが可能です。以下のコードをブラウザーコンソールのコマンドラインで実行してみましょう (ブラウザーコンソールへ複数行送る場合は Shift+Enter を使用することを忘れずに):</p> + +<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab); +newTabBrowser.addEventListener("load", function() { + newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>"; +}, true); +newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre> + +<p>これは現在選択しているタブの、新しいページを食べてしまう <code>load</code> イベントのリスナーを追加してから、新しいページを読み込みます。</p> + +<h3 id="Modifying_the_browser_UI" name="Modifying_the_browser_UI">ブラウザー UI の変更</h3> + +<p>グローバルの <code>window</code> オブジェクトはブラウザーの chrome window であるため、ブラウザーのユーザーインターフェイスを変更できます。Windows では、以下のコードでブラウザーのメインメニューに新たなアイテムを追加します:</p> + +<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane"); +var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); +makeTheTea.setAttribute("label", "A nice cup of tea?"); +parent.appendChild(makeTheTea);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">OS X では、前出のコードに似ている以下のコードで "ツール" メニューに新たなアイテムを追加します:</p> + +<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup"); +var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); +makeTheTea.setAttribute("label", "A nice cup of tea?"); +parent.appendChild(makeTheTea);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ja/tools/browser_toolbox/index.html b/files/ja/tools/browser_toolbox/index.html new file mode 100644 index 0000000000..446ef88fc2 --- /dev/null +++ b/files/ja/tools/browser_toolbox/index.html @@ -0,0 +1,74 @@ +--- +title: ブラウザーツールボックス +slug: Tools/Browser_Toolbox +tags: + - Debug + - Firefox + - JavaScript +translation_of: Tools/Browser_Toolbox +--- +<p>{{ToolsSidebar}}</p> + +<p>ブラウザーツールボックスは通常の <a href="/ja/docs/Tools/Tools_Toolbox">ツールボックス</a> とは異なり、ウェブページだけでなくアドオンやブラウザー自体の JavaScript をデバッグすることができます。ブラウザーツールボックスのコンテキストは単一のタブ内のページではなく、ブラウザー全体になります。</p> + +<div class="note"> +<p><em>注記: リスタートレスまたは SDK ベースのアドオンをデバッグしたい場合は、<a href="/ja/docs/Mozilla/Add-ons/Add-on_Debugger">アドオンデバッガー</a> を試してください。それら以外のアドオンでは、ブラウザーツールボックスを使用してください。</em></p> +</div> + +<h2 id="Enabling_the_Browser_Toolbox" name="Enabling_the_Browser_Toolbox">ブラウザーツールボックスの有効化</h2> + +<div> +<p>ブラウザーツールボックスはデフォルトで無効です。有効化するには、"ブラウザーとアドオンのデバッガを有効" および "リモートデバッガを有効" にチェックを入れなければなりません。</p> + +<p>開発ツールの <a href="/ja/docs/Tools/Settings">オプション</a> を開いて、"<a href="/ja/docs/Tools/Settings#Advanced_settings">詳細な設定</a>" で "ブラウザーとアドオンのデバッガーを有効" および "リモートデバッガーを有効" にチェックを入れてください。</p> + +<p><img alt="Developer Tools Settings" src="https://mdn.mozillademos.org/files/16236/settings_for_browser_debugger.png" style="border: 1px solid black; display: block; height: 744px; margin: 0 auto; width: 900px;"></p> +</div> + +<h2 id="Opening_the_Browser_Toolbox" name="Opening_the_Browser_Toolbox">ブラウザーツールボックスを開く</h2> + +<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" style="line-height: 1.5;" title=""> をクリックして、メニュー項目 "開発ツール"、"ブラウザーツールボックス" の順に選択すると、ブラウザーツールボックスが開きます。</p> + +<p>Firefox 39 より、<kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd> のキーコンビネーション (Mac では <kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd>) でも開くことができます。</p> + +<p>ブラウザーツールボックスを開くと、以下のようなダイアログを表示します (これは設定項目 <code>devtools.debugger.prompt-connection</code> を false にすることで無効化できます):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11119/browser-toolbox-warning.png" style="display: block; height: 326px; margin-left: auto; margin-right: auto; width: 600px;">OK をクリックすると、ブラウザーツールボックスを個別のウィンドウで表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11121/browser-toolbox.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;">ブラウザーの chrome ウィンドウの調査、またブラウザー自体および実行中のアドオンが読み込んでいるすべての JavaScript ファイルの確認とデバッグが可能です。また、以下の開発ツールへ全面的にアクセスできます:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger">デバッガー</a> (<em>注記: リスタートレスまたは SDK ベースのアドオンをデバッグしたい場合は、<a href="/ja/docs/Mozilla/Add-ons/Add-on_Debugger">アドオンデバッガー</a>を試してください。)</em></li> + <li><a href="/ja/docs/Tools/Browser_Console">コンソール</a></li> + <li><a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a></li> + <li><a href="/ja/docs/Tools/Profiler">パフォーマンス</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor">ネットワークモニター</a></li> + <li><a href="/ja/docs/Tools/Scratchpad">スクラッチパッド</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector">ページインスペクター</a></li> +</ul> + +<p>chrome: および about: のページは一般のコンテンツページと同様に、通常の <a href="/ja/docs/Tools/Debugger">デバッガー</a> でデバッグできます。</p> + +<h2 id="Targeting_a_document" name="Targeting_a_document">対象ドキュメントを決める</h2> + +<p>通常のツールボックスでは、<a href="/ja/docs/Tools/Working_with_iframes">ドキュメント内の特定の iframe を対象にすることができるボタンがツールバーにあります</a>。Firefox 40 よりブラウザーツールボックスにも同じ外見のボタンがありますが、こちらは iframe だけでなくトップレベルの chrome ウィンドウや content ウィンドウもリストに含まれています。これにより content タブだけでなく個々の chrome ウィンドウやポップアップ内のドキュメントも調査できます。</p> + +<p>例えばブラウザーウィンドウが 2 つあり、そのうちひとつに content タブが 1 つ、もうひとつのウィンドウに content タブが 2 つある場合は、フレーム選択のリストが以下のようになります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11117/browser-toolbox-iframes.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h2 id="Debugging_popups" name="Debugging_popups">ポップアップをデバッグする</h2> + +<p>ポップアップをデバッグするのは難しいです。ポップアップを外に出すとすぐにブラウザがそれらを隠すからです。この動作を無効にする方法があります。ツールボックスメニューをクリックし、<strong>ポップアップの自動非表示を無効にする</strong>を選択します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16234/popup_auto-hide.png" style="display: block; height: 249px; margin: 0px auto; width: 350px;"></p> + +<p>これでポップアップを開くと、<kbd>Esc</kbd> キーを押すまで開いたままになります。 Inspector のノードピッカーを使用してそのパネルを選択し、その内容を調べて変更することができます。</p> + +<p>{{EmbedYouTube("6edXcunw4jM")}}</p> + +<p>同じテクニックを使って、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/デバッグ#Debugging_popups">アドオンによって作成されたポップアップ</a>をデバッグできます。</p> + +<div class="note"> +<p><strong>メモ</strong>: この変更はブラウザを再起動しても永続的ではありません。ブラウザのツールボックスを閉じると、設定はクリアされます。</p> +</div> diff --git a/files/ja/tools/css_coverage/index.html b/files/ja/tools/css_coverage/index.html new file mode 100644 index 0000000000..cf45c2988e --- /dev/null +++ b/files/ja/tools/css_coverage/index.html @@ -0,0 +1,149 @@ +--- +title: CSSカバレッジ +slug: Tools/CSS_Coverage +tags: + - Experimental + - Firefox + - ガイド + - ツール + - 初心者 +translation_of: Tools/CSS_Coverage +--- +<p>{{ToolsSidebar}}</p> + +<div class="note"> +<p>この機能は実験的なもので、Firefoxではまだ利用できません。</p> +</div> + +<p>CSSカバレッジは、Firefox開発者向けのコマンドセットで、使い古されていないCSSを指摘し、初期レンダリングに必要なCSSファイルの部分を示すことで、乱雑なCSSを解くのに役立ちます。</p> + +<p>これらのツールは、「使用」の定義が複雑であるため、多少実験的ですが、実際に何が起こっているかを理解する手助けとなることが期待されます。</p> + +<p>それらが一般的に使用される方法は次のとおりです。</p> + +<ul> + <li>カバレッジトラッカーを開始("<code>csscoverage start</code>")する</li> + <li>あなたのウェブサイトの代表的なページにアクセスする</li> + <li>トラッカーを停止("<code>csscoverage stop</code>")し、スタイルエディタで未使用のルールを表示する</li> + <li>各ページに表示されるルールを含むレポートを表示("<code>csscoverage report</code>")する</li> +</ul> + +<p>もう1つのコマンド("<code>csscoverage oneshot</code>")では、効果的に実行("<code>csscoverage start; csscoverage stop</code>")できます。</p> + +<h2 id="「使用」が意味するのは">「使用」が意味するのは?</h2> + +<h3 id="TLDR">TL;DR:</h3> + +<p>CSSカバレッジは、以下の例の<span style="color: #008000;"><code>tag#id.class</code></span>セレクタが一連のWebページに存在するかどうかを確認します。</p> + +<pre class="brush: css">@media thing { + tag#id.class:hover { + foo: bar; + } +}</pre> + +<h3 id="なぜ">なぜ?</h3> + +<p>あなたのCSSに次のものが設定されているとします。テスト中にマウスがスパンに入っていない場合。 ルールは使用されるでしょうか？</p> + +<pre class="brush: html"><style> + span:hover { + color: purple; + } +</style> + +<span>Test</span> +</pre> + +<p>技術的には <code>span:hover</code> は、「テスト」という言葉がいつも紫色ではなかったという点で使われていませんでした。しかしながら CSS のカバレッジは実際にルールが関連性があるか無関係かを調べることです。また <code>span:hover</code> は明らかにページとの関連性があります。</p> + +<p>同様に、あなたのCSSが次のものを持っているとします：</p> + +<pre class="brush: html"><style> + @media tv { + span { + color: purple; + } + } +</style> + +<span>Test</span> +</pre> + +<p>関連性を測定するには、テレビを自分の環境に接続する必要がありますか？</p> + +<p>しかし、「使用」は関連性だけではありません...<br> + 次のルールは適切ですか？</p> + +<pre class="brush: html"><style> + span { } +</style> + +<span>Test</span> +</pre> + +<p>ページに影響を及ぼさず安全に削除できるため、関連性がないと主張することができます。</p> + +<p>しかし、次のものはどうでしょうか？</p> + +<pre class="brush: html"><style> + span { + -o-text-curl: minor; + } +</style> + +<span>Test</span> +</pre> + +<p>それが使用されているかどうかを知っているかどうかは、おそらく検索エンジンと分析技術の使用を必要とし、おそらくサイトのサポートされているブラウザのバージョンに関する知識です。 これらはすべて特異点までこのツールの範囲を超えているとみなされます。</p> + +<p>以下の例で div ルールが "used" とみなされる理由についても説明します。</p> + +<pre class="brush: html"><style> + div { color: red; } + span { color: blue; } +</style> + +<div><span>Test</span></div> +</pre> + +<p>div ルールはページの最終的なレンダリングには影響しないので未使用だと主張できますが、この代替定義を検討してください：</p> + +<pre class="brush: html"><style> + div { color: red; border: none; } + span { color: blue; } +</style> +</pre> + +<p>ボーダールールが使用されているかどうかを知ることは難しく、他にもさまざまなバリエーションがあります。 「使用」の定義をさらに複雑にする不透明度、可視性および色変換を考慮する。 物事を単純にするために、 "use"はセレクタが要素にマッチすることを意味します。</p> + +<p>明らかに、テスト中にタッチしたスタイルシートに、テスト中に見られない特定のページだけのルールが含まれている場合は、そのルールが使用されているにもかかわらず、そのルールを「未使用」としてマークします。 実際にCSSファイルからルールを削除する前に、二重チェックの価値があります。</p> + +<h2 id="警告">警告</h2> + +<p>知っておくべきこと：</p> + +<ul> + <li>URL はテストの期間を通して参照されるたびに同じバイトセットを返すものとします。</li> + <li><a href="/ja/docs/Web/CSS/Alternative_style_sheets">代替スタイルシート</a>をトラッキングしません。</li> +</ul> + +<h2 id="バグ">バグ</h2> + +<p>私たちはいくつかの重要なバグに取り組んでいます：</p> + +<ul> + <li>現在、スタイルシートを追加するなど、JavaScript による CSSOM の変更を追跡していません。<a href="https://bugzil.la/1007533">bug 1007533</a> を参照してください。</li> + <li>スタイルエディタのマークアップはライン単位で行われていますが、現在はソースマップを処理していないため、圧縮された CSS でこれを実行すると混乱します。<a href="https://bugzil.la/1007073">bug 1007073</a> を参照してください。</li> + <li>@keyframe の情報はプリロード要約に含まれません。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1034062">bug 1034062</a> を参照してください。</li> +</ul> + +<h2 id="代替候補">代替候補</h2> + +<p>Firefox を使わずに未使用のCSSを見つけるのに役立つ複数のツールがあります。</p> + +<ul> + <li><a href="https://www.jitbit.com/unusedcss/">Unused CSS</a> <em>は再帰的にサイトをクロールして未使用の CSS セレクタを検出します。広告のない無料のオンラインツールです。</em></li> + <li><a href="https://github.com/purifycss/purifycss">PurifyCSS </a>はインストール後にコンソールツールとして使用できる NPM パッケージです</li> + <li><a href="https://unused-css.com/">unused-css.com </a>別のオンラインツール。これは無料ではありません。</li> +</ul> diff --git a/files/ja/tools/debugger.object/index.html b/files/ja/tools/debugger.object/index.html new file mode 100644 index 0000000000..719a359274 --- /dev/null +++ b/files/ja/tools/debugger.object/index.html @@ -0,0 +1,321 @@ +--- +title: Tools/Debugger.Object +slug: Tools/Debugger.Object +translation_of: Tools/Debugger.Object +--- +<div>{{ToolsSidebar}}</div> + +<h1 id="Debugger.Object">Debugger.Object</h1> + +<p><code>Debugger.Object</code> インスタンスはデバッグ対象のオブジェクトを表し、その参照オブジェクトを検査および変更するためのリフレクション指向のメソッドを提供します。参照先のプロパティは、<code>Debugger.Object</code> インスタンスのプロパティとして直接表示されません。デバッガは<code>Debugger.Object.prototype.getOwnPropertyDescriptor</code> や <code>Debugger.Object.prototype.defineProperty</code> のようなメソッドを介してのみデバッガにアクセスし、デバッガが誤ってリファレンスの getter と setter を呼び出さないようにします。</p> + +<p>SpiderMonkey は、特定の <a href="/ja/docs/Tools/Debugger" title="The Debugger object"><code>Debugger</code></a> インスタンスに提示する各デバッグオブジェクトに対して、<code>Debugger.Object</code> インスタンスを1つだけ作成します。つまり、デバッガが2つの異なるルートを介して同じオブジェクトに遭遇した場合 (おそらく2つの関数が同じオブジェクトで呼び出される)、SpiderMonkey は毎回同じ <code>Debugger.Object</code> インスタンスをデバッガに提示します。これは、デバッガが <code>==</code> 演算子を使用して、2つの <code>Debugger.Object</code> インスタンスが同じデバッグオブジェクトを参照していることを認識し、<code>Debugger.Object</code> インスタンスに独自のプロパティを配置して特定のデバッグオブジェクトに関するメタデータを格納できることを意味します。</p> + +<p>異なるコンパートメントの JavaScript コードは、同じオブジェクトの異なるビューを持つことができます。たとえば Firefox では、特権区画内のコードは、コンテンツコードによってそのオブジェクトのプロパティに対して行われた再定義または拡張を伴わずにコンテンツ DOM 要素オブジェクトを認識します。デバッガのコードがデバッグ対象と同じように各オブジェクトを確実に見るために、各 <code>Debugger.Object</code> インスタンスは特定のコンパートメントから見えるようにその参照を表示します。この「表示コンパートメント」は、デバッガが指示対象をどのようにして来るかに合わせて選択されます。結果として、単一の <a href="/ja/docs/Tools/Debugger" title="The Debugger object"><code>Debugger</code></a> インスタンスは実際には複数の <code>Debugger.Object</code> インスタンスを持つことができます。つまり、参照先が表示される各コンパートメントに1つです。</p> + +<p>複数の <a href="/ja/docs/Tools/Debugger" title="The Debugger object"><code>Debugger</code></a> インスタンスが同じコードをデバッグしている場合、各 <a href="/ja/docs/Tools/Debugger" title="The Debugger object"><code>Debugger</code></a> は指定されたオブジェクトに対して個別の <code>Debugger.Object</code> インスタンスを取得します。これにより、各 <a href="/ja/docs/Tools/Debugger" title="The Debugger object"><code>Debugger</code></a> インスタンスを使用するコードは、他のデバッガとの干渉を心配することなく、独自の <code>Debugger.Object</code> インスタンスに任意のプロパティを配置できます。</p> + +<p>ほとんどの <code>Debugger.Object</code> インスタンスは、デバッガの動作と状態をデバッガに公開するプロセスで SpiderMonkey によって作成されますが、デバッガは<code>Debugger.Object.prototype.makeDebuggeeValue</code> を使用して、指定されたデバッグ対象オブジェクトの <code>Debugger.Object</code> インスタンスを作成するか、<code>Debugger.Object.prototype.copy</code> および <code>Debugger.Object.prototype.create</code> を使用して、デバッグ区画に新しいオブジェクトを作成します。</p> + +<p><code>Debugger.Object</code> インスタンスはガベージコレクタから参照先を保護します。<code>Debugger.Object</code> インスタンスが生存している限り、指示対象はそのまま残ります。これは、ガベージコレクションが <code>Debugger.Object</code> インスタンスに目に見える影響を与えないことを意味します。</p> + +<h2 id="Debugger.Object_プロトタイプのAccessorプロパティ">Debugger.Object プロトタイプのAccessorプロパティ</h2> + +<p><code>Debugger.Object</code> インスタンスは、プロトタイプから次のアクセサプロパティを継承します。</p> + +<dl> + <dt><code>proto</code></dt> + <dd> + <p>参照先のプロトタイプ (新しい <code>Debugger.Object</code> インスタンス)、またはプロトタイプがない場合は <code>null</code></p> + </dd> + <dt><code>class</code></dt> + <dd> + <p>指示対象の ECMAScript <code>[[Class]]</code> を表す文字列。</p> + </dd> + <dt><code>callable</code></dt> + <dd> + <p>参照先が呼び出し可能なオブジェクト (関数や関数プロキシなど) であれば <code>true</code>。そうでなければ false。</p> + </dd> + <dt><code>name</code></dt> + <dd> + <p>参照先の名前 (名前付き関数の場合)。指示対象が無名関数か全く関数でない場合、これは <code>undefined</code> です。</p> + + <p>このアクセサは、<br> + 関数が (関数を囲みスコープ内の名前にバインドする) 関数宣言をインスタンス化した結果であるか、(関数を本体の内部でのみ名前にバインドする) 関数式を評価しているかにかかわらず、ソースコード内で <code>function</code> キーワードの後に現れた名前を返します。</p> + </dd> + <dt><code>displayName</code></dt> + <dd> + <p>指示対象が表示名を持つ関数であれば、指示対象の表示名。参照先が関数でない場合、または表示名がない場合は、これは <code>undefined</code> です。</p> + + <p>関数に指定された名前がある場合、その表示名は指定された名前と同じです。この場合、<code>displayName</code> と <code>name</code> プロパティは等しくなります。</p> + + <p>関数に名前がない場合、SpiderMonkey はそのコンテキストに応じて適切な名前を推測しようとします。例えば：</p> + + <pre><code>function f() {} // display name: f (the given name) +var g = function () {}; // display name: g +o.p = function () {}; // display name: o.p +var q = { + r: function () {} // display name: q.r +};</code></pre> + + <p>表示名は適切な JavaScript 識別子、または適切な式でなくてもよいことに注意してください。関数が特定の変数またはプロパティの値としてすぐに割り当てられない場合でも役立つ名前を見つけようとします。したがって、a の中で定義された b を参照するために <code><em>a</em>/<em>b</em></code> を使用し、a に割り当てられた式のどこかで発生する関数を参照するために <code><em>a</em><</code> を使用します。例えば：</p> + + <pre><code>function h() { + var i = function() {}; // display name: h/i + f(function () {}); // display name: h/< +} + +var s = f(function () {}); // display name: s<</code></pre> + </dd> + <dt><code>parameterNames</code></dt> + <dd> + <p>指示対象がデバッグ関数の場合、そのパラメータの名前を文字列の配列として指定します。指示対象がデバッグ機能でないか、まったく機能していない場合、これは <code>undefined</code> です。</p> + + <p>指示対象がパラメータ名を使用できないホスト関数である場合は、パラメータごとに1つの要素を持つ配列を返します。それぞれの配列は <code>undefined</code> です。</p> + + <p>参照先が関数プロキシの場合は、空の配列を返します。</p> + + <p>指示対象が非構造化パラメータを使用する場合、配列の要素はパラメータの構造を反映します。たとえば、参照先が次のように宣言された関数である場合、</p> + + <pre><code>function f(a, [b, c], {d, e:f}) { ... }</code></pre> + + <p>この <code>Debugger.Object</code> インスタンスの <code>parameterNames</code> プロパティの値は次のようになります。</p> + + <pre><code>["a", ["b", "c"], {d:"d", e:"f"}]</code></pre> + </dd> + <dt><code>script</code></dt> + <dd> + <p>参照先がデバッグコードである関数の場合、<a href="/ja/docs/Tools/Debugger-API/Debugger.Script" title="Debugger.Script"><code>Debugger.Script</code></a> インスタンスとしての、その関数のスクリプトです。参照先が関数プロキシであるかデバッグコードでない場合、これは <code>undefined</code> です。</p> + </dd> + <dt><code>environment</code></dt> + <dd> + <p>参照先がデバッグコードである関数である場合、作成時にその関数を囲む字句環境を表す <a href="/ja/docs/Tools/Debugger-API/Debugger.Environment" title="Debugger.Environment"><code>Debugger.Environment</code></a> インスタンス。参照先が関数プロキシであるかデバッグコードでない場合、これは <code>undefined</code> です。</p> + </dd> + <dt><code>proxyHandler</code></dt> + <dd> + <p>参照先がデバッグコードによって割り当てられたハンドラオブジェクトのプロキシである場合、これはハンドラオブジェクトです。プロキシのプロパティのアクセスを実装するためにメソッドが呼び出されるオブジェクトです。指示対象が、デバッグコードによってハンドラオブジェクトが割り当てられたプロキシでない場合、これは <code>null</code> です。</p> + </dd> + <dt><code>proxyCallTrap</code></dt> + <dd> + <p>参照先がデバッグコードによってハンドラオブジェクトが割り当てられた関数プロキシの場合、これはコールトラップ関数です。これは関数プロキシが呼び出されたときに呼び出される関数です。指示対象が、デバッグコードによってハンドラオブジェクトが割り当てられた関数プロキシでない場合、これは <code>null</code> です。</p> + </dd> + <dt><code>proxyConstructTrap</code></dt> + <dd> + <p>対象オブジェクトがデバッグコードによって割り当てられた関数プロキシである場合、その構築トラップ関数、つまり関数プロキシが <code>new</code> の式を介して呼び出されるときに呼び出される関数。指示対象が、デバッグコードによってハンドラオブジェクトが割り当てられた関数プロキシでない場合、これは <code>null</code> です。</p> + </dd> + <dt><code>global</code></dt> + <dd> + <p>参照先が割り当てられたスコープのグローバルオブジェクトを参照する <code>Debugger.Object</code> インスタンス。これは、クロスコンパートメントラッパーをアンラップしません。参照先がラッパーである場合、結果はラッパーのグローバルであり、ラップされたオブジェクトのグローバルではありません。結果はラッパーを介さずにグローバルに直接参照されます。</p> + </dd> + <dt><code>hostAnnotations</code></dt> + <dd> + <p>参照先に関する追加のメタデータを提供する JavaScript オブジェクト。存在しない場合は <code>null</code>。メタデータオブジェクトは、この <code>Debugger.Object</code> インスタンスと同じコンパートメントにあります。同じメタデータオブジェクトが、指定された <code>Debugger.Object</code> インスタンスに対して毎回返されます。</p> + + <p>典型的な JavaScript 組み込みは、アプリケーション固有の機能をスクリプトに公開するための「ホストオブジェクト」を提供します。<code>hostAnnotations</code> アクセサは、デバッガが関心を持っている可能性がある参照先に関する追加情報の埋め込みを調べます。返されるオブジェクトのプロパティの意味は、埋め込みまでです。 たとえば、Web ブラウザは、グローバルオブジェクトのホスト注釈を提供して、トップレベルのウィンドウ、iframe、および内部 JavaScript スコープを区別することがあります。</p> + + <p>規約では、ホストアノテーションオブジェクトに文字列値の <code>"type"</code> プロパティがあり、これはオブジェクトのクラスと一緒に、参照先がどのようなものであるかを示します。ホストアノテーションオブジェクトの他のプロパティは、型に応じて詳細を提供します。たとえば、Firefox では、JavaScript モジュールのグローバルオブジェクトのメタデータオブジェクトは次のようになります。</p> + + <pre><code>{ "type":"jsm", "uri":"resource:://gre/modules/XPCOMUtils.jsm" }</code></pre> + + <p>Firefox はそのホストオブジェクトに対して [DebuggerHostAnnotationsForFirefox annotations] を提供します。</p> + </dd> +</dl> + +<h2 id="Debugger.Object_プロトタイプの関数プロパティ">Debugger.Object プロトタイプの関数プロパティ</h2> + +<p>以下で説明する関数は、この値を使用して <code>Debugger.Object</code> インスタンスを参照する場合にのみ呼び出すことができます。他の種類のオブジェクトのメソッドとして使用することはできません。 この説明では、「この <code>Debugger.Object</code> インスタンスの参照先」を意味するために「参照先」が使用されています。</p> + +<p>他に指定されていない限り、これらのメソッドは<a href="/ja/docs/Tools/Debugger-API/Debugger.Frame#Invocation_Functions_and_%E2%80%9Cdebugger%E2%80%9D_Frames">呼び出し関数</a>ではありません。呼び出しによってデバッグコードが実行されると (ハンドラがデバッグコードであるアクセサプロパティを取得または設定するため、またはデバッグコードであるトラップを持つプロキシであるため)、コールは <a href="Conventions#the-debugger.debuggeewouldrun-exception" title="Debugger API: DebuggeeWouldRun"><code>Debugger.DebuggeeWouldRun</code></a> 例外をスローします。</p> + +<dl> + <dt><code>getProperty(<em>name</em>)</code></dt> + <dd> + <p>参照先の名前付きプロパティの値を返します。名前がない場合は <code>undefined</code> を返します。名前は文字列でなければなりません。 結果はデバッグ値です。</p> + </dd> + <dt><code>setProperty(<em>name</em>,<em>value</em>)</code></dt> + <dd> + <p>値が存在しない場合はプロパティを作成します。名前は文字列でなければならず、値はデバッグ値でなければなりません。</p> + </dd> + <dt><code>getOwnPropertyDescriptor(<em>name</em>)</code></dt> + <dd> + <p>参照先のnameという名前のプロパティのプロパティ記述子を返します。指示対象にそのようなプロパティがない場合は <code>undefined</code> を返します。(この関数は標準の <code>Object.getOwnPropertyDescriptor</code> 関数のように動作しますが、検査対象オブジェクトは暗黙的です。返されたプロパティ記述子は、デバッガのグローバルオブジェクトにスコープされたコードによって割り当てられます<br> + (したがって、デバッガのコンパートメントにあります)。そしてその <code>value</code>、<code>get</code>、<code>set</code> プロパティ(存在する場合) は debuggee の値です)。</p> + </dd> + <dt><code>getOwnPropertyNames()</code></dt> + <dd> + <p>デバッガで <code>Object.getOwnPropertyNames(<em>referent</em>)</code> が呼び出され、その結果がデバッガのグローバルオブジェクトのスコープにコピーされたかのように、すべての参照先のプロパティを指定する文字列の配列を返します。</p> + </dd> + <dt><code>defineProperty(<em>name</em>,<em>attributes</em>)</code></dt> + <dd> + <p>プロパティディスクリプタ記述子で説明されているように、name という名前の参照先にプロパティを定義します。属性の <code>value</code>、<code>get</code>、および <code>set</code> プロパティはすべてデバッグ対象の値でなければなりません。(この関数は対象オブジェクトが暗黙的で、関数と記述子とは異なるコンパートメントにあることを除いて、<code>Object.defineProperty</code> のように動作します)。</p> + </dd> + <dt><code>defineProperties(<em>properties</em>)</code></dt> + <dd> + <p>properties によって与えられたプロパティを参照に追加します。(この関数はターゲットオブジェクトが暗黙的であることを除いて、<code>Object.defineProperties</code> のように動作し、properties 引数とは異なるコンパートメントにあります)。</p> + </dd> + <dt><code>deleteProperty(<em>name</em>)</code></dt> + <dd> + <p>参照の name という名前のプロパティを削除します。プロパティが正常に削除された場合、または参照先にそのようなプロパティがない場合は true を返します。プロパティが設定可能でない場合は false を返します。</p> + </dd> + <dt><code>seal()</code></dt> + <dd> + <p>レポジトリへのプロパティの追加や削除を防止します。そしてこの <code>Debugger.Object</code> インスタンスを返します。(この関数は標準の <code>Object.seal</code> 関数のように動作しますが、封印されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。</p> + </dd> + <dt><code>freeze()</code></dt> + <dd> + <p>プロパティが参照に追加されたり参照から削除されたりするのを防ぎ、各プロパティを書き込み不能としてマークします。そしてこの <code>Debugger.Object</code> インスタンスを返します。(この関数は標準の <code>Object.freeze</code> 関数のように動作しますが、封印されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。</p> + </dd> + <dt><code>preventExtensions()</code></dt> + <dd> + <p>レポジトリにプロパティが追加されないようにします。(この関数は標準の <code>Object.preventExtensions</code> 関数と同じように動作しますが、操作対象は暗黙的で、呼び出し元とは異なるコンパートメントになります)。</p> + </dd> + <dt><code>isSealed()</code></dt> + <dd> + <p>指示対象が封印されている場合、つまり拡張可能ではなく、すべてのプロパティが設定不可能とマークされている場合に true を返します。(この関数は標準の <code>Object.isSealed</code> 関数と同じように動作しますが、検査されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。</p> + </dd> + <dt><code>isFrozen()</code></dt> + <dd> + <p>参照先が固定されている場合、つまり拡張可能ではなく、すべてのプロパティが設定不可能で読み取り専用であるとマークされている場合に true を返します。(この関数は標準の <code>Object.isSealed</code> 関数のように動作しますが、検査されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。</p> + </dd> + <dt><code>isExtensible()</code></dt> + <dd> + <p>参照先が拡張可能である場合、つまり新しい参照先が定義可能な場合は true を返します。(この関数は標準の <code>Object.isExtensible</code> 関数のように動作しますが、検査されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。</p> + </dd> + <dt><code>copy(<em>value</em>)</code></dt> + <dd> + <p>HTML5 の "構造化クローニング" アルゴリズムを適用して、参照オブジェクトのグローバルオブジェクト (したがって参照オブジェクトのコンパートメント) に値のコピーを作成し、そのコピーを参照する <code>Debugger.Object</code> インスタンスを返します。</p> + + <p>これはプリミティブ値をそのまま返します。つまり、<code>Debugger.Object.prototype.copy</code> を「構造化クローニング」アルゴリズムの制限内で、汎用「デバッグ値からデバッグ対象値へ」変換関数として使用できます。</p> + </dd> + <dt><code>create(<em>prototype</em>, [<em>properties</em>])</code></dt> + <dd> + <p>参照オブジェクトのグローバル (したがって参照オブジェクトのコンパートメント) に新しいオブジェクトを作成し、そのオブジェクトを参照する <code>Debugger.Object</code> を返します。<br> + 新しいオブジェクトのプロトタイプは prototype であり、これは <code>Debugger.Object</code> インスタンスでなければなりません。<br> + 新しいオブジェクトのプロパティは、プロパティが <code>Debugger.Object.prototype.defineProperties</code> に渡されたかのように、properties によって指定されたもので、新しい <code>Debugger.Object</code> インスタンスが <code>this</code> の値として渡されます。</p> + </dd> + <dt><code>makeDebuggeeValue(<em>value</em>)</code></dt> + <dd> + <p>デバッグ対象の値を表す debuggee 値を返します。value がプリミティブの場合、そのまま返します。value がオブジェクトの場合、この <code>Debugger.Object</code> の参照先のコンパートメントで適切にラップされたオブジェクトを表す <code>Debugger.Object</code> インスタンスを返します。</p> + + <p>value がオブジェクトの場合は、debuggee グローバルに割り当てられている必要はなく、デバッグ区画にも割り当てられている必要はありません。デバッガが debuggee 値として使用したい任意のオブジェクトにすることができます。</p> + + <p>上で説明したように、各 <code>Debugger.Object</code> インスタンスは、特定のコンパートメントから見たときにその参照を提示します。<br> + <code>Debugger.Object</code> がインスタンス化され、オブジェクト o が与えられた場合、<code><em>d</em>.makeDebuggeeValue(<em>o</em>)</code> 呼び出しは、dの区画内のコードが示すようにoを表す <code>Debugger.Object</code> インスタンスを返します。</p> + </dd> + <dt><code>decompile([<em>pretty</em>])</code></dt> + <dd> + <p>指示対象がデバッグコードである関数である場合、その結果とその結果の参照関数に相当する関数定義の JavaScript ソースコードを文字列として返します。pretty が存在し、真であれば、インデントされたコードを改行で生成します。 参照先がデバッグコードである関数でない場合は、<code>undefined</code> を返します。</p> + </dd> + <dt><code>call(<em>this</em>,<em>argument</em>, ...)</code></dt> + <dd>指示対象が呼び出し可能である場合は、この値と引数の値を使用して呼び出すことができ、呼び出しがどのように完了したかを示す<a href="/ja/docs/Tools/Debugger-API/Conventions#%E5%AE%8C%E4%BA%86%E5%80%A4">完了値</a>を返します。これはデバッグ対象の値、あるいはコンストラクタとして参照先を呼び出すには <code>{ asConstructor: true }</code> でなければなりません。SpiderMonkey は <code>this</code> の値自体を適切に提供します。各引数はデバッグ対象の値でなければなりません。現存するすべてのハンドラメソッド、ブレークポイント、ウォッチポイントなどは、呼び出し中も有効なままです。参照が呼び出し可能でない場合は、<code>TypeError</code> をスローします。この関数は、<a href="/ja/docs/Tools/Debugger-API/Debugger.Frame#Invocation_Functions_and_%E2%80%9Cdebugger%E2%80%9D_Frames">呼び出し関数の規則</a>に従います。</dd> + <dt><code>apply(<em>this</em>,<em>arguments</em>)</code></dt> + <dd> + <p>指示対象が呼び出し可能である場合は、与えられたこの値と引数の引数値で呼び出され、呼び出しがどのように完了したかを示す<a href="/ja/docs/Tools/Debugger-API/Conventions#%E5%AE%8C%E4%BA%86%E5%80%A4">完了値</a>を返します。これはデバッグ対象の値、あるいは関数をコンストラクタとして呼び出すには <code>{ asConstructor: true }</code> でなければなりません。SpiderMonkey は <code>this</code> の値自体を適切に提供します。引数は、デバッガの値の配列 (デバッガ内の配列) または空の配列として扱われる <code>null</code> または <code>undefined</code> のいずれかでなければなりません。現存するすべてのハンドラメソッド、ブレークポイント、ウォッチポイントなどは、呼び出し中も有効なままです。参照が呼び出し可能でない場合は、<code>TypeError</code> をスローします。この関数は、<a href="/ja/docs/Tools/Debugger-API/Debugger.Frame#Invocation_Functions_and_%E2%80%9Cdebugger%E2%80%9D_Frames">呼び出し関数の規則</a>に従います。</p> + </dd> + <dt><code>evalInGlobal(<em>code</em>, [<em>options</em>])</code></dt> + <dd> + <p>指示対象がグローバルオブジェクトである場合、そのグローバル環境内のコードを評価し、どのように完了したかを記述する<a href="/ja/docs/Tools/Debugger-API/Conventions#%E5%AE%8C%E4%BA%86%E5%80%A4">補完値</a>を返します。 コードは文字列です。 現存するすべてのハンドラメソッド、ブレークポイント、ウォッチポイントなどは、呼び出し中も有効なままです。 この関数は、<a href="/ja/docs/Tools/Debugger-API/Debugger.Frame#Invocation_Functions_and_%E2%80%9Cdebugger%E2%80%9D_Frames">呼び出し関数の規則</a>に従います。 参照先がグローバルオブジェクトでない場合は、<code>TypeError</code> 例外をスローします。</p> + + <p>Use Strict ディレクティブが含まれている場合、コードは厳密なモードコードとして解釈されます。</p> + + <p>コードが厳密なモードコードでない場合、変数宣言は参照グローバルオブジェクトに影響を与えます。(ECMAScript 仕様で使用されている用語では、評価コードの実行コンテキストの <code>VariableEnvironment</code> が参照先です)</p> + + <p>options 引数は、<a href="/ja/docs/Tools/Debugger-API/Debugger.Frame#Function_Properties_of_the_Debugger.Frame_Prototype_Object" title="Debugger.Frame: Eval"><code>Debugger.Frame.prototype.eval</code></a> の場合と同じです。</p> + </dd> + <dt><code>evalInGlobalWithBindings(<em>code</em>,<em>bindings</em>, [<em>options</em>])</code></dt> + <dd> + <p><code>evalInGlobal</code> に似ていますが、変数オブジェクトとして参照先を使用してコードを評価しますが、lexical 環境はオブジェクトバインディングからのバインディングで拡張されています。値が isvalue である namedname というバインディングの各自の enumerable プロパティについては、lexical 環境で、code が namedname で評価され、その値は isvalue である変数をインクルードします。各値はデバッグ値でなければなりません。(これは <code>with</code> 文と似ていません。コードはバインディングオブジェクトに何の影響も与えることなく、導入されたバインディングにアクセス、割り当て、削除することができます)。</p> + + <p>このメソッドを使用すると、デバッガコードは、指定されたデバッグコードで参照可能な一時的なバインディングを導入することができます。また、既存のデバッグ環境を変更することなく、デバッガが保持するデバッグの値を参照できます。</p> + + <p><code>evalInGlobal</code> と同様に、<code>evalInGlobalWithBindings</code> に渡されたコードが厳密なモードコードでない場合、コードがバインディングに従って拡張された環境で評価されても、それに含まれる宣言はすべて参照対象グローバルオブジェクトに影響を与えます。(ECMAScript 仕様で使用されている条件では、非厳密な評価コードの実行コンテキストの <code>VariableEnvironment</code> が参照先であり、バインディングは評価コードの <code>LexicalEnvironment</code> である新しい宣言環境に表示されます)。</p> + + <p>options 引数は、<a href="/ja/docs/Tools/Debugger-API/Debugger.Frame#Function_Properties_of_the_Debugger.Frame_Prototype_Object" title="Debugger.Frame: Eval"><code>Debugger.Frame.prototype.eval</code></a> の場合と同じです。</p> + </dd> + <dt><code>asEnvironment()</code></dt> + <dd> + <p>参照先がグローバルオブジェクトである場合は、参照先を表す <a href="/ja/docs/Tools/Debugger-API/Debugger.Environment" title="Debugger.Environment"><code>Debugger.Environment</code></a> インスタンスをコードを評価するための可変環境として返します。参照先がグローバルオブジェクトでない場合は、<code>TypeError</code> をスローします。</p> + </dd> + <dt><code>setObjectWatchpoint(<em>handler</em>)</code><em>(future plan)</em></dt> + <dd> + <p>すべての参照先のプロパティにウォッチポイントを設定し、呼び出しハンドラのメソッドでイベントを報告します。この <code>Debugger.Object</code> インスタンスの以前のウォッチポイントハンドラはすべて置き換えられます。handler が null の場合、参照先は監視されなくなります。ハンドラには、以下のメソッドがあります。</p> + + <dl> + <dt><code>add(<em>frame</em>,<em>name</em>,<em>descriptor</em>)</code></dt> + <dd> + <p>name という名前のプロパティが referent.Descriptor に追加されました。これは、<code>Debugger.Object.prototype.defineProperty</code> で受け入れられたソートのプロパティ記述子で、新たに追加されたプロパティの属性を与えます。</p> + </dd> + <dt><code>delete(<em>frame</em>,<em>name</em>)</code></dt> + <dd> + <p>name という名前のプロパティは、参照対象から削除されようとしています。</p> + </dd> + <dt><code>change(<em>frame</em>,<em>name</em>,<em>oldDescriptor</em>,<em>newDescriptor</em>)</code></dt> + <dd> + <p>参照先の既存の namedname という名前のプロパティは、oldDescriptor によって与えられたものから newDescriptor によって与えられたものに変更されています。このハンドラメソッドはその値以外のプロパティの属性が変更されている場合にのみ呼び出されます。値だけが変更されている場合、SpiderMonkey はハンドラの <code>set</code> メソッドを呼び出します。</p> + </dd> + <dt><code>set(<em>frame</em>,<em>oldValue</em>,<em>newValue</em>)</code></dt> + <dd> + <p>参照先の name という名前のデータプロパティは、値が oldValue から newValue へ変更されようとしています。</p> + + <p>SpiderMonkey は、成功するデータプロパティへの代入に対してのみこのメソッドを呼び出します。書き込み不可能なデータプロパティへの割り当ては、デバッガに通知することなく失敗します。</p> + </dd> + <dt><code>extensionsPrevented(<em>frame</em>)</code></dt> + <dd> + <p>オブジェクトは、<code>Object.preventExtensions</code>の呼び出しにより、拡張不可能になりました</p> + </dd> + </dl> + + <p>すべてのウォッチポイントハンドラメソッドについて：</p> + + <ul> + <li> + <p>ハンドラ呼び出しは、<code>this</code> の値としてハンドラオブジェクト自体を受け取ります</p> + </li> + <li> + <p>Theframe 引数は現在のスタックフレームで、そのコードは報告されるオブジェクトに対して操作を実行しようとしています</p> + </li> + <li> + <p>メソッドが <code>undefined</code> を返した場合、SpiderMonkey はオブジェクトに対して通知された変更を行い、正常に実行を続行します。メソッドがオブジェクトを返す場合：</p> + </li> + <li> + <p>オブジェクトに値が true である <code>superseded</code> プロパティがある場合、SpiderMonkey は通知された変更を行いません</p> + </li> + <li> + <p>オブジェクトに <code>resume</code> プロパティがある場合、その値は<a href="Conventions#resumption-values">再開値</a>として取得され、実行の進行方法を示します (ただし、<code>return</code> 再開値はサポートされていません)</p> + </li> + <li> + <p>与えられたメソッドがハンドラにない場合、そのソートのイベントは無視されます。ウォッチポイントを設定した後にハンドラにメソッドを追加する、またはハンドラからメソッドを削除することは、対応するイベントのレポートを有効または無効にするために、イベントが発生するたびにwatchpoint consultshandler のプロパティです</p> + </li> + <li> + <p>ハンドラのメソッドに渡される値はデバッグ値です。 Handlerのメソッドに渡される記述子は、デバッガのコンパートメント内の通常のオブジェクトですが、デバッガの値である記述子の <code>value</code>、<code>get</code>、および <code>set</code> プロパティは例外で、<code>Debugger.Object.prototype.defineProperty</code> によって期待される値の一種です</p> + </li> + <li> + <p>ウォッチポイントハンドラコールは、クロスコンパートメントなスレッド内コールです。コールはプロパティを変更したスレッドとインハンドラのメソッドのコンパートメント (通常はデバッガのコンパートメントと同じ) で行われます</p> + </li> + </ul> + + <p>新しいウォッチポイントは、この <code>Debugger.Object</code> インスタンスが属する <a href="/ja/docs/Tools/Debugger" title="The Debugger object"><code>Debugger</code></a> インスタンスに属します。<a href="/ja/docs/Tools/Debugger" title="The Debugger object"><code>Debugger</code></a> インスタンスを無効にすると、このウォッチポイントは無効になります。</p> + </dd> + <dt><code>clearObjectWatchpoint()</code><em>(future plan)</em></dt> + <dd> + <p>指示対象に設定されているオブジェクトウォッチポイントをすべて削除します。</p> + </dd> + <dt><code>setPropertyWatchpoint(<em>name</em>,<em>handler</em>)</code><em>(future plan)</em></dt> + <dd> + <p>コール先ハンドラのメソッドでイベントを報告する、参照先のプロパティー (name) にウォッチポイントを設定します。この <code>Debugger.Object</code> インスタンスのこのプロパティの以前のウォッチポイントハンドラが置き換えられます。handler が null の場合、プロパティは監視されなくなります。Handlerは、<code>extensionsPrevented</code> イベントを受け取らない点を除き、 <code>Debugger.Object.prototype.setObjectWatchpoint</code> について説明したとおりです。</p> + </dd> + <dt><code>clearPropertyWatchpoint(<em>name</em>)</code><em>(future plan)</em></dt> + <dd> + <p>name という名前の参照先のプロパティに設定されているウォッチポイントをすべて削除します。</p> + </dd> + <dt><code>unwrap()</code></dt> + <dd> + <p>指示対象がこの <code>Debugger.Object</code> のコンパートメントのラップ解除が許可されているラッパーの場合は、ラップされたオブジェクトを参照する <code>Debugger.Object</code> インスタンスを返します。指示対象のラップを解除できない場合は <code>null</code> を返します。指示対象がラッパーでない場合は、この <code>Debugger.Object</code> インスタンスをそのまま返します。</p> + </dd> + <dt><code>unsafeDereference()</code></dt> + <dd> + <p>この <code>Debugger.Object</code> インスタンスの参照先を返します。</p> + + <p>対象が内部オブジェクト (HTML5 <code>Window</code> オブジェクトなど) である場合は、対応する外部オブジェクト (HTML5 <code>WindowProxy</code> オブジェクトなど) を返します。これにより、<code>unsafeDereference</code> は、呼び出し関数を使用せずにデバッグコードで直接使用するのに適した値を生成するのに役立ちます。</p> + このメソッドは、デバッガコードをデバッグコードから保護するための <code>Debugger.Object</code> インスタンスのメンブレンを貫通し、デバッガコードが <code>Debugger.Object</code> のリフレクション指向のインターフェイスではなく、標準のクロスコンパートメントラッパーを介してデバッグオブジェクトにアクセスできるようにします。このメソッドを使用すると、大きなコードベースをこの Debugger API に徐々に適合させることが容易になります。コードの適切な部分で <code>Debugger.Object</code> インスタンスを使用できますが、このメソッドを使用して直接更新されていないコードに直接オブジェクト参照を渡します。</dd> +</dl> diff --git a/files/ja/tools/debugger/how_to/access_debugging_in_add-ons/index.html b/files/ja/tools/debugger/how_to/access_debugging_in_add-ons/index.html new file mode 100644 index 0000000000..5730071337 --- /dev/null +++ b/files/ja/tools/debugger/how_to/access_debugging_in_add-ons/index.html @@ -0,0 +1,26 @@ +--- +title: アドオンでデバッグにアクセスする +slug: Tools/Debugger/How_to/Access_debugging_in_add-ons +translation_of: Tools/Debugger/How_to/Access_debugging_in_add-ons +--- +<div>{{ToolsSidebar}}</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/how_to/black_box_a_source/index.html b/files/ja/tools/debugger/how_to/black_box_a_source/index.html new file mode 100644 index 0000000000..0378307727 --- /dev/null +++ b/files/ja/tools/debugger/how_to/black_box_a_source/index.html @@ -0,0 +1,20 @@ +--- +title: ソースをブラックボックス化する +slug: Tools/Debugger/How_to/Black_box_a_source +translation_of: Tools/Debugger/How_to/Ignore_a_source +--- +<p>{{ToolsSidebar}}</p> + +<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/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>ソースをブラックボックス化すると以下のようになります:</p> + +<ul> + <li>すべてのブレークポイントが無効になります。</li> + <li><a href="/ja/docs/Tools/Debugger/Settings">デバッガーオプション</a> で“例外発生で停止”が有効であるとき、デバッガーはブラックボックス化したソース内で例外が発生しても停止しません。代わりに、スタックが (存在する場合は) ブラックボックス化していないソース内にあるフレームに戻るまで待ちます。</li> + <li>ステップ実行するとき、デバッガーはブラックボックス化したソースをスキップします。</li> +</ul> diff --git a/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html b/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html new file mode 100644 index 0000000000..d784061bb8 --- /dev/null +++ b/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html @@ -0,0 +1,22 @@ +--- +title: DOM イベントでブレークする +slug: Tools/Debugger/How_to/Break_on_a_DOM_event +translation_of: Tools/Debugger/Break_on_DOM_mutation +--- +<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> + +<p>特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。</p> + +<p>始めに<a href="/ja/docs/Tools/Debugger/UI_Tour#toolbar"> ツールバー </a>上の変数/イベントペインを開くボタンをクリックして、<a href="/ja/docs/Tools/Debugger/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/how_to/breaking_on_exceptions/index.html b/files/ja/tools/debugger/how_to/breaking_on_exceptions/index.html new file mode 100644 index 0000000000..a8d400fdcf --- /dev/null +++ b/files/ja/tools/debugger/how_to/breaking_on_exceptions/index.html @@ -0,0 +1,18 @@ +--- +title: 例外で停止する +slug: Tools/Debugger/How_to/Breaking_on_exceptions +translation_of: Tools/Debugger/How_to/Breaking_on_exceptions +--- +<p>{{ToolsSidebar}}</p> + +<p><a href="/ja/docs/Tools/Debugger/UI_Tour#Toolbar">ツールバー</a> でアイコン <img alt="" src="https://mdn.mozillademos.org/files/14410/debugger-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> をクリックすると、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Error">例外</a> で停止するようにデバッガーを指定できます。</p> + +<p>{{EmbedYouTube("UWIO_UM827k")}}</p> + +<p>ボタンは 3 種類の状態があり、クリックするたびに次の状態へ切り替わります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14416/debugger-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : 例外で停止しません。これは初期状態です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14412/uncaught-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : <a href="/ja/docs/Web/JavaScript/Reference/Statements/try...catch">キャッチしていない</a> 例外に限り停止します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14414/all-exceptions.png" style="height: 26px; margin-bottom: -7px; width: 25px;"> : すべての例外で停止します。</p> diff --git a/files/ja/tools/debugger/how_to/debug_eval_sources/index.html b/files/ja/tools/debugger/how_to/debug_eval_sources/index.html new file mode 100644 index 0000000000..d04bc67890 --- /dev/null +++ b/files/ja/tools/debugger/how_to/debug_eval_sources/index.html @@ -0,0 +1,29 @@ +--- +title: eval ソースをデバッグする +slug: Tools/Debugger/How_to/Debug_eval_sources +translation_of: Tools/Debugger/How_to/Debug_eval_sources +--- +<p>{{ToolsSidebar}}</p> + +<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>以下の動画では、このようなソースを含むページを読み込んでいます:</p> + +<pre class="brush: js">var script = `function foo() { + console.log('called foo'); + } + //# sourceURL=my-foo.js`; + +eval(script); + +var button = document.getElementById("foo"); +button.addEventListener("click", foo, false); +</pre> + +<p>評価された文字列は、<code>//# sourceURL</code> ディレクティブを使用して "my-foo.js" という名称が与えられます。このソースは <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a> に表示されて、他のソースと同様に開いたりデバッグしたりできます。</p> + +<p>{{EmbedYouTube("AkvN40-y1NE")}}</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/how_to/disable_breakpoints/index.html b/files/ja/tools/debugger/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..943c7c3d1f --- /dev/null +++ b/files/ja/tools/debugger/how_to/disable_breakpoints/index.html @@ -0,0 +1,12 @@ +--- +title: ブレークポイントの無効化 +slug: Tools/Debugger/How_to/Disable_breakpoints +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +<p>{{ToolsSidebar}}</p> + +<p>ブレークポイントを 1 つ無効化するには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Breakpoints_list">ブレークポイント一覧</a> でブレークポイントの隣にあるチェックボックスのチェックを外します。</p> + +<p>すべてのブレークポイントを無効化するには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Toolbar">ツールバー</a> でアイコン <img alt="" src="https://mdn.mozillademos.org/files/14402/toggle-all.png" style="height: 24px; margin-bottom: -5px; width: 30px;"> をクリックします。</p> + +<p>{{EmbedYouTube("ULoZ70XPd90")}}</p> 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 new file mode 100644 index 0000000000..d0706ef09d --- /dev/null +++ b/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html @@ -0,0 +1,46 @@ +--- +title: 変数を調査、編集、ウォッチする +slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +--- +<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/highlight_and_inspect_dom_nodes/index.html b/files/ja/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html new file mode 100644 index 0000000000..4c93d720f7 --- /dev/null +++ b/files/ja/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html @@ -0,0 +1,16 @@ +--- +title: DOM ノードのハイライトと調査 +slug: Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes +translation_of: Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes +--- +<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> + +<p><a href="/ja/docs/Tools/Debugger/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/how_to/index.html b/files/ja/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..22fe236948 --- /dev/null +++ b/files/ja/tools/debugger/how_to/index.html @@ -0,0 +1,14 @@ +--- +title: デバッガの使い方 +slug: Tools/Debugger/How_to +tags: + - TopicStub +translation_of: Tools/Debugger/How_to +--- +<div>{{ToolsSidebar}}</div> + +<div>これらの記事では、デバッガの使用方法について説明します。</div> + +<div> </div> + +<p>{{ ListSubpages () }}</p> diff --git a/files/ja/tools/debugger/how_to/open_the_debugger/index.html b/files/ja/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..86b3c84cb0 --- /dev/null +++ b/files/ja/tools/debugger/how_to/open_the_debugger/index.html @@ -0,0 +1,16 @@ +--- +title: デバッガーを開く +slug: Tools/Debugger/How_to/Open_the_debugger +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +<p>{{ToolsSidebar}}</p> + +<p>デバッガーを開く方法は 3 つあります:</p> + +<ul> + <li>Firefox メニューの [ウェブ開発] サブメニュー (メニューバーを表示している場合や OS X では [ツール] メニュー) で [デバッガー] を選択する</li> + <li>キーボードショートカット <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>S</kbd> (OS X では <kbd>Command</kbd><kbd>Option</kbd><kbd>S</kbd>) を押下する</li> + <li>メニューボタン ( <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=""> ) を押下して [開発ツール]、[デバッガー] の順に選択する</li> +</ul> + +<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p> diff --git a/files/ja/tools/debugger/how_to/pretty-print_a_minified_file/index.html b/files/ja/tools/debugger/how_to/pretty-print_a_minified_file/index.html new file mode 100644 index 0000000000..0a720e9e07 --- /dev/null +++ b/files/ja/tools/debugger/how_to/pretty-print_a_minified_file/index.html @@ -0,0 +1,20 @@ +--- +title: 圧縮されたファイルを整形する +slug: Tools/Debugger/How_to/Pretty-print_a_minified_file +tags: + - JavaScript +translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file +--- +<p>{{ToolsSidebar}}</p> + +<p><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> のアイコン <img alt="" src="https://mdn.mozillademos.org/files/14406/debugger-prettify.png" style="height: 20px; margin-bottom: -5px; width: 23px;"> をクリックすると、圧縮された (minified) ファイルを整形します。デバッガーは整形したソースを表示して、"[original-name]:formatted" というような名前の新しいファイルとして表示します。</p> + +<p>{{EmbedYouTube("6kQrjS82rME")}}</p> + +<article class="approved"> +<div class="boxed translate-rendered text-content"> +<div class="note"> +<p><strong>メモ</strong>: インライン JavaScript コードをあらかじめ確認したい場合は、インスペクタペインのコードをダブルクリックしてください。</p> +</div> +</div> +</article> diff --git a/files/ja/tools/debugger/how_to/search/index.html b/files/ja/tools/debugger/how_to/search/index.html new file mode 100644 index 0000000000..1f64136a0a --- /dev/null +++ b/files/ja/tools/debugger/how_to/search/index.html @@ -0,0 +1,18 @@ +--- +title: 検索する +slug: Tools/Debugger/How_to/Search +translation_of: Tools/Debugger/How_to/Search +--- +<p>{{ToolsSidebar}}</p> + +<h2 id="Searching_for_files" name="Searching_for_files">ファイルを検索する</h2> + +<p>特定のファイルを検索するには、<kbd>Control</kbd> + <kbd>P</kbd> (Mac では <kbd>Command</kbd> + <kbd>P</kbd>) を押下して検索文字列を入力します。入力内容に応じて、マッチするすべてのファイルを <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> に表示します。上下矢印キーでリスト内を移動することができ、<kbd>Return</kbd> を押下するとファイルを開きます:</p> + +<p>{{EmbedYouTube("xXsfYx0THWg")}}</p> + +<h2 id="Searching_within_a_file" name="Searching_within_a_file">ファイル内で検索する</h2> + +<p><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> に読み込んでいるファイル内で特定の文字列を検索するには、ソースペインにフォーカスがある状態で <kbd>Control</kbd> + <kbd>F</kbd> (Mac では <kbd>Command</kbd> + <kbd>F</kbd>) を押下します。<kbd>Return</kbd> を押下すると検索します。デバッガーはコード内でマッチした数を表示して、それぞれの箇所を枠で囲みます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14997/new-search.png" style="display: block; height: 524px; margin-left: auto; margin-right: auto; width: 595px;"></p> 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 new file mode 100644 index 0000000000..7e51a1f3c0 --- /dev/null +++ b/files/ja/tools/debugger/how_to/search_and_filter/index.html @@ -0,0 +1,68 @@ +--- +title: 検索とフィルタ +slug: Tools/Debugger/How_to/Search_and_filter +translation_of: Tools/Debugger/How_to/Search +--- +<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/how_to/set_a_breakpoint/index.html b/files/ja/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..3422962b5e --- /dev/null +++ b/files/ja/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,28 @@ +--- +title: ブレークポイントを設置する +slug: Tools/Debugger/How_to/Set_a_breakpoint +tags: + - JavaScript + - Tools +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +<p>{{ToolsSidebar}}</p> + +<p>以下のいずれかの方法で、ブレークポイントを設置できます:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> で、停止したい行の行番号をクリックします。</li> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> で、停止したい行でコンテキストメニューを開いて [ブレークポイントを追加] を選択します。</li> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> で、ブレークポイントを設置したい行をハイライトして <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) または <kbd>Command</kbd>+<kbd>B</kbd> (Mac OS X) を押下します。</li> +</ul> + +<p>以下の動画は、コンテキストメニューを使用してブレークポイントを設置しています:</p> + +<p>{{EmbedYouTube("P7b98lEijF0")}}</p> + +<p>それぞれのブレークポイントは、デバッガー内の 2 か所に表示します:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Breakpoints_list">ブレークポイント一覧</a> で、ブレークポイントのファイル名や行番号を表示</li> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> で行に青色の矢印を表示、または <a href="/ja/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">条件付き</a> ブレークポイントであれば橙色の矢印を表示</li> +</ul> diff --git a/files/ja/tools/debugger/how_to/set_a_conditional_breakpoint/index.html b/files/ja/tools/debugger/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..e0aa4d51a6 --- /dev/null +++ b/files/ja/tools/debugger/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,16 @@ +--- +title: 条件付きブレークポイントを設置する +slug: Tools/Debugger/How_to/Set_a_conditional_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint +--- +<p>{{ToolsSidebar}}</p> + +<p>通常のブレークポイントは、行に関連付けられます。プログラムがその行に達すると、デバッガーは停止します。条件付きブレークポイントは条件も関連付けられており、条件は <a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">式</a> で表します。プログラムがその行に達すると、式が <code>true</code> に評価された場合に限りデバッガーが停止します。</p> + +<p>{{EmbedYouTube("pVPlMhfrMwM")}}</p> + +<p>条件付きブレークポイントを設置するには <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> でコンテキストメニューを開いて、[条件付きブレークポイントを追加] を選択します。すると、式を入力できるテキストボックスが現れます。最後に <kbd>Return</kbd> を押下すると完了します。</p> + +<p>条件付きブレークポイントは、行番号に橙色の矢印を重ねて表示します。</p> + +<p>ブレークポイントをコンテキストクリックすると、[ブレークポイントを編集] というメニュー項目があります。既存の条件を変更したり、通常のブレークポイントに条件を追加したりできます。</p> diff --git a/files/ja/tools/debugger/how_to/set_watch_expressions/index.html b/files/ja/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..fd232542c4 --- /dev/null +++ b/files/ja/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,18 @@ +--- +title: 監視式を設定する +slug: Tools/Debugger/How_to/Set_Watch_Expressions +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +--- +<p>{{ToolsSidebar}}</p> + +<p>コードのデバッグで、実行が停止しているときに式を監視すると役に立つことがあります。デバッガーには、監視する式 (監視式) を入力するペインがあります。コードをステップ実行するとデバッガーが式を監視して、その結果を返します。</p> + +<p>監視式を設定するには、監視式サイドバーを展開して "監視式を追加" をクリックします。そして、監視したい式をテキストフィールドに入力します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14999/add-watch-expression.png" style="display: block; height: 354px; margin-left: auto; margin-right: auto; width: 417px;"></p> + +<p>デバッガーは式を保存して、コードをステップ実行するたびに監視します。デバッガーがブレークポイントに達すると、監視式の変数を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15007/watched-expression.png" style="display: block; height: 490px; margin-left: auto; margin-right: auto; width: 966px;"></p> + +<p>コードをステップ実行することができ、実行するコードが変わるたびに式の値を監視します。値を監視するたびに、ボックスが一時的に黄色く光ります。式の隣にある "x" 印のアイコンをクリックすると監視式を削除できます。また、同時に複数の監視式を持つこともできます。</p> diff --git a/files/ja/tools/debugger/how_to/step_through_code/index.html b/files/ja/tools/debugger/how_to/step_through_code/index.html new file mode 100644 index 0000000000..a36b2a3e64 --- /dev/null +++ b/files/ja/tools/debugger/how_to/step_through_code/index.html @@ -0,0 +1,25 @@ +--- +title: コードをステップ実行する +slug: Tools/Debugger/How_to/Step_through_code +translation_of: Tools/Debugger/How_to/Step_through_code +--- +<p>{{ToolsSidebar}}</p> + +<p>デバッガーがブレークポイントで停止しているときに、<a href="/ja/docs/Tools/Debugger/UI_Tour#Toolbar">ツールバー</a> にある 4 つのボタンを使用してステップ実行ができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14404/debugger-stepping.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>順番に、以下のボタンがあります:</p> + +<ul> + <li>復帰: 次のブレークポイントまで実行します。</li> + <li>ステップオーバー: 同一関数内で次の行へ進みます。</li> + <li>ステップイン: 当該行が関数の呼び出しでなければ、関数内で次の行へ進みます。関数の呼び出しである場合は、呼び出した関数に入ります。</li> + <li>ステップアウト: 現在の関数の終端まで実行します。</li> +</ul> + +<p>{{EmbedYouTube("RQBwEk0-xe0")}}</p> + +<p>一時停止しているとき、"コンソールペインを表示します" ボタン <img alt="" src="https://mdn.mozillademos.org/files/15017/toggle-console.png" style="height: 25px; width: 30px;"> でウェブコンソールを開閉して、エラーや変数についてさらに洞察を得ることができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15019/split-console.png" style="display: block; height: 482px; margin-left: auto; margin-right: auto; width: 900px;"></p> diff --git a/files/ja/tools/debugger/how_to/use_a_source_map/index.html b/files/ja/tools/debugger/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..f00604d323 --- /dev/null +++ b/files/ja/tools/debugger/how_to/use_a_source_map/index.html @@ -0,0 +1,43 @@ +--- +title: ソースマップを使用する +slug: Tools/Debugger/How_to/Use_a_source_map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +<p>{{ToolsSidebar}}</p> + +<p>ブラウザーが実行する JavaScript ソースは、開発者が作成した元のソースから何らかの方法で変換される場合があります。例えば:</p> + +<ul> + <li>より効率よくサーバーから提供するためにコンバインおよび <a href="https://en.wikipedia.org/wiki/Minification_(programming)">ミニファイ</a> されることがよくあります。</li> + <li><a href="http://coffeescript.org/">CoffeeScript</a> や <a href="http://www.typescriptlang.org/">TypeScript</a> のような言語からコンパイルするように、ページで実行する JavaScript が機械生成されることがあります。</li> +</ul> + +<p>このような状況では、ブラウザーがダウンロードした変換後のソースよりも、元のソースをデバッグするほうがとても容易です。<a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">ソースマップ</a> は変換後のソースと元のソースを関連付けるファイルであり、ブラウザーが元のソースを再構成して、そのソースをデバッガーに提供できます。</p> + +<p>デバッガーでソースマップを使用可能にするには、以下のことが必要です:</p> + +<ul> + <li>ソースマップを生成します。</li> + <li>変換後のソースに、ソースマップを指し示すコメントを含めます。コメントは以下のような構文です:</li> +</ul> + +<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre> + +<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p> + +<p>上の動画では <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a> を読み込んでいます。このページは、初めに CoffeeScript で記述して JavaScript に変換した "main.js" という名前のソースを読み込みます。変換後のソースには、ソースマップを指し示す以下のようなコメントが含まれています:</p> + +<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre> + +<p>デバッガーの <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a> では元の CoffeeScript ソースが "main.coffee" として表示されて、ほかのソースと同様にデバッグできます。</p> + +<p>最後に、ブラウザーのバージョンによっては about:config でこの機能を有効化しなければならない場合があります。</p> + +<ol> + <li>ブラウザーを開いて about:config と入力します。<br> + <img alt="How to open about:config inside firefox." src="https://mdn.mozillademos.org/files/14815/about_1.png" style="height: 149px; width: 700px;"></li> + <li>動作保証対象外であることを受け入れます。<br> + <img alt="Accept about:config warranty." src="https://mdn.mozillademos.org/files/14817/about_2.png" style="height: 207px; width: 700px;"></li> + <li><strong>devtools.source-map.locations.enabled</strong> を検索して <strong>true</strong> に設定します。<br> + <img alt="Change the sourcemap boolean value for devtools." src="https://mdn.mozillademos.org/files/14819/about_3.png" style="height: 104px; width: 700px;"></li> +</ol> diff --git a/files/ja/tools/debugger/index.html b/files/ja/tools/debugger/index.html new file mode 100644 index 0000000000..bb317e2874 --- /dev/null +++ b/files/ja/tools/debugger/index.html @@ -0,0 +1,72 @@ +--- +title: デバッガー +slug: Tools/Debugger +tags: + - Debugger + - Debugging + - Dev Tools + - Tools + - 'l10n:priority' + - ツール + - デバッガー + - デバッグ + - 開発ツール +translation_of: Tools/Debugger +--- +<div>{{ToolsSidebar}}</div> + +<div>JavaScriptデバッガを使用すると、JavaScriptコードをステップ実行してその状態を調べたり変更したりして、バグを追跡することができます。</div> + +<div class="note"> +<p>このページは、Firefox 52 以降の Firefox Nightly および Firefox Developer Edition で使用できる JavaScript デバッガーについて説明します。</p> + +<p>これより前のバージョンの Firefox や Firefox Beta および Release については、<a href="/ja/docs/Tools/Debugger_%28before_Firefox_52%29">デバッガー (Firefox 52 より前)</a> をご覧ください。</p> + +<p>このバージョンのデバッガーを使用できる環境で旧デバッガーに戻す必要がある場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に <code>false</code> を設定してください。</p> +</div> + +<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p> + +<p>JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。</p> + +<p>Firefox でローカル実行しているコードや、例えば Android 版 Firefox が動作する Android デバイスなどのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a> のページをご覧ください。</p> + +<p>デバッガーは Firefox に内蔵して提供しており、本ページでは Firefox に埋め込まれているデバッガーの使用方法を説明します。一方、デバッガーはスタンドアローンのウェブアプリケーションとして使用することもでき、他のブラウザーや Node で実行しているコードをデバッグできます。詳しくは <a href="https://github.com/devtools-html/debugger.html">プロジェクトの GitHub リポジトリー</a> をご覧ください。</p> + +<p>新しいデバッガーは、旧デバッガーの一部機能を (まだ) サポートしていません。<a href="/ja/docs/Tools/Debugger/Limitations_of_the_new_debugger">新しいデバッガーの制限事項</a> をご覧ください。</p> + +<hr> +<h2 id="User_Interface_Tour" name="User_Interface_Tour">ユーザーインターフェイスツアー</h2> + +<p>デバッガーについてひととおり理解するために、<a href="/ja/docs/Tools/Debugger/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/How_to/Open_the_debugger">デバッガーを開く</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Set_a_breakpoint">ブレークポイントを設置する</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">条件付きブレークポイントを設置する</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Disable_breakpoints">ブレークポイントの無効化</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Step_through_code">コードをステップ実行する</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Breaking_on_exceptions">例外でブレークする</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Set_Watch_Expressions">監視式を設定する</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">圧縮されたファイルを整形表示する</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Search">検索する</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Debug_eval_sources">eval ソースをデバッグする</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップを使用する</a></li> +</ul> +</div> + +<hr> +<h2 id="Reference" name="Reference">リファレンス</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/ja/docs/Tools/Debugger/Keyboard_shortcuts">キーボードショートカット</a></li> + <li><a href="/ja/docs/Tools/Debugger/Source_map_errors">ソースマップのエラー</a></li> +</ul> +</div> diff --git a/files/ja/tools/debugger/keyboard_shortcuts/index.html b/files/ja/tools/debugger/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..d152b34a7f --- /dev/null +++ b/files/ja/tools/debugger/keyboard_shortcuts/index.html @@ -0,0 +1,10 @@ +--- +title: キーボードショートカット +slug: Tools/Debugger/Keyboard_shortcuts +translation_of: Tools/Debugger/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "debugger")}}</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/limitations_of_the_new_debugger/index.html b/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html new file mode 100644 index 0000000000..b6ef21e414 --- /dev/null +++ b/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html @@ -0,0 +1,29 @@ +--- +title: 新しいデバッガーの制限事項 +slug: Tools/Debugger/Limitations_of_the_new_debugger +translation_of: Tools/Debugger/Limitations_of_the_new_debugger +--- +<div>{{ToolsSidebar}}</div><p>バージョン 52 より、新しいデバッガーを Firefox に内蔵しています。現在、新しいデバッガーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。新しいデバッガーは旧デバッガーより高速かつ信頼性が高く、将来の開発のための基盤を提供します。</p> + +<p>しかし、旧デバッガーの一部機能をまだサポートしていません。このページでは、新しいデバッガーで未サポートである、旧デバッガーの機能を掲載します。</p> + +<p>これらの機能のほとんどは将来のリリースでサポートする予定であり、このページは適宜更新しますので注意してください。</p> + +<p>これらの機能のいずれかが必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に <code>false</code> を設定すると、旧デバッガーに戻すことができます。</p> + +<p>以下の機能は、新しいデバッガーでまったくサポートしていません。</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">DOM イベントでブレークする</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">DOM ノードのハイライトと調査</a></li> + <li><a href="/ja/docs/Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source">ソースをブラックボックス化する</a></li> +</ul> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">検索機能</a> は部分的にサポートしています。<a href="/ja/docs/Tools/Debugger/How_to/Search">ファイル名の検索やファイル内の文字列の検索</a> は可能です。しかし、以下の検索は未サポートです:</p> + +<ul> + <li>すべてのファイルにわたって検索する</li> + <li>すべてのファイルにわたって関数の定義を検索する</li> + <li>特定の行に移動する</li> + <li>表示されている変数をフィルタリングする</li> +</ul> diff --git a/files/ja/tools/debugger/settings/index.html b/files/ja/tools/debugger/settings/index.html new file mode 100644 index 0000000000..c72bf0da59 --- /dev/null +++ b/files/ja/tools/debugger/settings/index.html @@ -0,0 +1,57 @@ +--- +title: オプション +slug: Tools/Debugger/Settings +translation_of: Archive/Tools/Debugger_settings +--- +<div>{{ToolsSidebar}}</div><p>デバッガーには独自の設定メニューがあり、<a href="/ja/docs/Tools/Debugger/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/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/UI_Tour#Variables_pane" title="#variables-pane"> 変数ペイン </a>が開くようになります。</td> + </tr> + <tr> + <td><strong>計算可能なプロパティのみ表示</strong></td> + <td>{{原語併記("列挙可能", "enumerable")}} ではない JavaScript プロパティを表示しません。</td> + </tr> + <tr> + <td><strong>変数フィルタ</strong>ー<strong>ボックスを表示</strong></td> + <td>このオプションを有効にすると <a href="/ja/docs/Tools/Debugger/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/How_to/Black_box_a_source"> ブラックボックス化</a> します。デフォルトで有効です。</p> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/tools/debugger/source_map_errors/index.html b/files/ja/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..cac996fd0c --- /dev/null +++ b/files/ja/tools/debugger/source_map_errors/index.html @@ -0,0 +1,58 @@ +--- +title: ソースマップのエラー +slug: Tools/Debugger/Source_map_errors +tags: + - Debugger + - ソースマップ + - ツール + - デバッグ + - リファレンス + - 開発ツール +translation_of: Tools/Debugger/Source_map_errors +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">ソースマップはJSONファイルで、ブラウザで見られるように変換されたソースを、開発者が書いた元のソースと関連付けることができます。ソースマップを操作する際に問題が発生することがあります。このページでは、最も一般的な問題とその解決方法について説明します。</p> + +<div class="note"> +<p><strong>注</strong>: ソースマップが初めての方は、<a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップの使い方</a>で詳細をご覧ください。</p> +</div> + +<h2 id="一般的なソースマップのエラー報告">一般的なソースマップのエラー報告</h2> + +<p>問題が見つかると、Webコンソールにメッセージが表示されます。このメッセージには、エラーメッセージ、リソースURL、およびソースマップのURLが表示されます。</p> + +<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p> + +<p>ここでリソースURLは、<code>bundle.js</code>にソースマップが記述されていることを示しています。ソースマップURLは、ソースマップデータの場所（この場合はリソースとの相対位置）を示します。このエラーは、ソースマップがJSONデータではないことを示しているため、間違ったファイルを提供していることになります。</p> + +<p>ソースマップが間違っていることがある一般的な方法がいくつかあります。 次のセクションで詳しく説明します。</p> + +<h2 id="ソースマップが見つからないかアクセスできない">ソースマップが見つからないかアクセスできない</h2> + +<p>ソースマップリソースが見つからない、またはアクセスできない可能性があります。</p> + +<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p> + +<p>ここではファイルが提供されていることを確認し、ブラウザがアクセスできるようにすることで修正します。</p> + +<h2 id="不正なソースマップ">不正なソースマップ</h2> + +<p>ソースマップデータは、単にJSONファイルではなく、不正な構造であった時に無効になる可能性があります。一般的なエラーメッセージは次のとおりです。</p> + +<ul> + <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li> + <li><code>Error: "version" is a required argument</code></li> +</ul> + +<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p> + +<h2 id="元のソースがない">元のソースがない</h2> + +<p>元のソースが不足している可能性があります。デバッガで元のソースの1つを開こうとすると、この問題が発生することがあります。この場合、メッセージは少し違って見えます：</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p> + +<p>この場合、エラーはデバッガのソースタブにも表示されます。</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p> diff --git a/files/ja/tools/debugger/ui_tour/index.html b/files/ja/tools/debugger/ui_tour/index.html new file mode 100644 index 0000000000..87b9f58919 --- /dev/null +++ b/files/ja/tools/debugger/ui_tour/index.html @@ -0,0 +1,110 @@ +--- +title: UI ツアー +slug: Tools/Debugger/UI_Tour +translation_of: Tools/Debugger/UI_Tour +--- +<p>{{ToolsSidebar}}</p> + +<p>本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。UI は、縦に 3 つのパネルへ分かれています。</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a></li> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a></li> + <li>3 番目のペインは、さらに 4 つのセクションに分かれます: + <ul> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Toolbar">ツールバー</a></li> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Breakpoints_list">ブレークポイント一覧</a></li> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Call_stack">コールスタック</a></li> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Scopes">スコープ</a></li> + </ul> + </li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14977/debugger-screen-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<h2 id="Source_list_pane" name="Source_list_pane">ソースリストペイン</h2> + +<p>ソースリストペインでは、ページに読み込まれたすべての JavaScript ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースはトップレベルでオリジン別に分類しており、またその配下では、ソースを提供するディレクトリーの構造別に分類しています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14975/debugger-source-list-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<p><kbd>Ctrl</kbd> + <kbd>P</kbd> (Mac では <kbd>Cmd</kbd> + <kbd>P</kbd>) を使用して <a href="/ja/docs/Tools/Debugger/How_to/Search#Searching_for_files">ファイルを検索</a> できます。</p> + +<p> </p> + +<p>興味のあるディレクトリを右クリックし、[Set directory root] を選択すると、[Source] リストペインのファイルリストが簡素化されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16122/directory-root.png" style="border-style: solid; border-width: 1px; height: 408px; width: 480px;"></p> + +<p>これでソースリストペインのルートがプロジェクトのルートになり、よりクリーンで簡単に表示をナビゲートできます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16123/directory-root-02.png" style="border-style: solid; border-width: 1px; height: 408px; width: 480px;"></p> + +<h3 id="アウトラインビュー">アウトラインビュー</h3> + +<p>アウトラインビューには、現在開いているファイルをナビゲートするためのツリーが表示されます。それを使用して、関数、クラスまたはメソッド定義に直接ジャンプします。</p> + +<p> </p> + +<h2 id="Source_pane" name="Source_pane">ソースペイン</h2> + +<p>これは、現在読み込んでいる JavaScript ファイルを表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14973/debugger-source-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<p>ソースペインにフォーカスがあるときに、<kbd>Ctrl</kbd> + <kbd>F</kbd> (Mac では <kbd>Cmd</kbd> + <kbd>F</kbd>) を使用して <a href="/ja/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">ファイル内の文字列を検索</a> できます。</p> + +<p><a href="/ja/docs/Tools/Debugger/How_to/Set_a_breakpoint">ブレークポイント</a> は、青色の矢印を行番号に重ねて表示します。<a href="/ja/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">条件付きブレークポイント</a> は、橙色の矢印です。ブレークポイントで停止すると、行全体が緑色になります。以下のスクリーンショットには、ブレークポイントが 3 か所あります:</p> + +<ul> + <li>19 行目は通常のブレークポイントです。</li> + <li>40 行目は通常のブレークポイントであり、デバッガーはここで停止しています。</li> + <li>22 行目は条件付きブレークポイントです。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14981/debugger-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<h2 id="Toolbar" name="Toolbar"><a name="toolbar">ツールバー</a></h2> + +<p>右側のペインの上部にツールバーがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14971/debugger-toolbar-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<p>ツールバーの構成は以下のとおりです:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger/How_to/Step_through_code">スクリプト内でデバッガーの動作を制御する</a> 4 つのボタン: + + <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> + </li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Breaking_on_exceptions">(1) すべての例外を無視する、(2) キャッチしていない例外で停止する、(3) すべての例外で停止する</a> を切り替えるボタン</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14979/debugger-toolbar-zoom-2.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 536px;"></p> + +<h2 id="Breakpoints_list" name="Breakpoints_list">ブレークポイント一覧</h2> + +<p>ツールバーの下に、設定したすべてのブレークポイントを表示します。それぞれのブレークポイントの隣に、<a href="/ja/docs/Tools/Debugger/How_to/Disable_breakpoints">ブレークポイントの有効/無効を切り替える</a> チェックボックスがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14969/debugger-breakpoints-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<h2 id="Call_stack" name="Call_stack">コールスタック</h2> + +<p>デバッガーが停止したときに、コールスタックを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14967/debugger-call-stack-2.png" style="display: block; height: 1138px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<p>コールスタックはそれぞれのレベルに 1 行ずつ割り当てており、関数名・ファイル名・行番号を表示します。行をクリックすると、ソースペインでソースを開きます。</p> + +<h2 id="Scopes" name="Scopes">スコープ</h2> + +<p>右側のペインに、展開用の三角印がついている "スコープ" というラベルがあります。デバッガーが停止したときにこのセクションを展開すると、プログラムのその時点でスコープ内に存在するすべてのオブジェクトを確認できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14965/debugger-scopes-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<p>オブジェクトはスコープ別に分類します。もっともローカル性が高いオブジェクトを最初に、またグローバルスコープ (ページのスクリプトでは Window) を最後に表示します。</p> 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 new file mode 100644 index 0000000000..88d3b0d7bb --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html @@ -0,0 +1,18 @@ +--- +title: ブレークポイントの無効化 +slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +--- +<div>{{ToolsSidebar}}</div> + +<p>ブレークポイントを無効にするには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a>でブレークポイントのエントリの横にあるチェックボックスをオフにします。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>または、マウスポインタがソースリストペインのブレークポイントのエントリの上にあるときにコンテキストメニューをアクティブにし、"Disable breakpoint"を選択します。</p> + +<p>ブレークポイントを表す矢印をクリックするだけでブレークポイントを削除することもできます。</p> + +<p>すべてのブレークポイントを無効/有効にするには、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a>で"Toggle all breakpoints"ボタンを使用します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..573456e364 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html @@ -0,0 +1,32 @@ +--- +title: アドオンでデバッグにアクセスする +slug: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<div class="warning"> +<p>このドキュメントで説明する方法を Firefox のアドオンで使用することは、非推奨にする予定です。これらの方法を使用する新たなアドオンを作成しないでください。</p> +</div> + +<p>以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます:</p> + +<ul> + <li>window.addEventListener("Debugger:EditorLoaded") - 読み取り専用のスクリプトパネルが読み込まれたときに呼び出されます。</li> + <li>window.addEventListener("Debugger:EditorUnloaded")</li> +</ul> + +<p>関連ファイル:</p> + +<ul> + <li>chrome://browser/content/devtools/debugger-controller.js</li> + <li>chrome://browser/content/devtools/debugger-toolbar.js</li> + <li>chrome://browser/content/devtools/debugger-view.js</li> + <li>chrome://browser/content/devtools/debugger-panes.js</li> +</ul> + +<p>残念ながらデバッグを行っている範囲内のウォッチ/式を評価する API や、デバッグを行っている範囲内の変数として参照されている、ページ内の要素をハイライトする API はまだありません。(現在作業中であり、バグ <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="https://bugzilla.mozilla.org/show_bug.cgi?id=653545">653545</a> をご覧ください)</p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..f16826cf46 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html @@ -0,0 +1,28 @@ +--- +title: ソースをブラックボックス化する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>現在のウェブ開発では <a href="http://jquery.com/">jQuery</a>、<a href="http://emberjs.com/">Ember</a>、<a href="http://angularjs.org/">Angular</a> のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは<a href="http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9"> ブラックボックス </a>のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。</p> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a> でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13218/debugger-black-box.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 922px;"></p> + +<p><a href="/ja/docs/Tools/GCLI">開発ツールバー</a> を開いて <code>dbg blackbox</code> コマンドを使用すると、複数のソースをまとめてブラックボックス化できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;"></p> + +<p>ソースをブラックボックス化すると以下のようになります:</p> + +<ul> + <li>すべてのブレークポイントが無効になります。</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">デバッガーオプション</a> で [例外発生で停止] が有効であるとき、デバッガーはブラックボックス化したソース内で例外が発生しても停止しません。代わりに、スタックが (存在する場合は) ブラックボックス化していないソース内にあるフレームに戻るまで待ちます。</li> + <li>ステップ実行するとき、デバッガーはブラックボックス化したソースをスキップします。</li> +</ul> diff --git a/files/ja/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 new file mode 100644 index 0000000000..706d844280 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html @@ -0,0 +1,22 @@ +--- +title: DOM イベントでブレークする +slug: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。</p> + +<p>始めに<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar"> ツールバー </a>上の変数/イベントペインを開くボタンをクリックして、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン </a>を開きます。そして、[イベント] タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13210/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。</p> + +<p>イベントが発生すると、リスナーの始点でコードがブレークします。</p> + +<p>{{EmbedYouTube("f-tbR8kj0K0")}}</p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..bbd25b285e --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html @@ -0,0 +1,36 @@ +--- +title: eval ソースをデバッグする +slug: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> に渡される文字列や <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。</p> + +<p>これを行うために、<code>//# sourceURL</code> ディレクティブを使用してソースに名前をつけなければなりません:</p> + +<pre class="brush: js">var button = document.getElementById("clickme"); +button.addEventListener("click", evalFoo, false); + +var script = "function foo() {" + + " console.log('called foo');" + + "}" + + "foo();//# sourceURL=my-foo.js"; + +function evalFoo() { + eval(script); +}</pre> + +<p>これは、スクリプトに "my-foo.js" という名前をつけます。</p> + +<p>文字列が評価されるとデバッガーでは別のソースとして表示され、他のソースと同様にデバッグできます。また、ソースを <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">整形 </a>できます:</p> + +<p>{{EmbedYouTube("nFm8F8Anmic")}}</p> + +<p>ソースにつけた名前は、<a href="/ja/docs/Tools/Web_Console#Error_messages">ウェブコンソール </a>に現れるスタックトレースでも表示されます。</p> + +<p>また、無名の eval ソース内にある <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> 文でもデバッガーが停止します。</p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..73595678bf --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html @@ -0,0 +1,22 @@ +--- +title: ブレークポイントの無効化 +slug: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">ソースリストペイン</a> で、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>または、ソースリストペインのブレークポイントの項目にマウスポインターを載せてコンテキストメニューを開き、[ブレークポイントを無効にする] を選択します。</p> + +<p>ブレークポイントを示す矢印をクリックして、ブレークポイントを削除することもできます。</p> + +<p>すべてのブレークポイントのオン/オフを切り替えるには、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a> で [すべてのブレークポイントを有効化/無効化] ボタンをクリックしてください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..7d08b706a5 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html @@ -0,0 +1,46 @@ +--- +title: 変数を調査、編集、ウォッチする +slug: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' +translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<h2 id="Examine_variables" name="Examine_variables">変数を調査する</h2> + +<p>コードがブレークポイントで停止したときはデバッガーの <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン </a>で、変数の状態を調査できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13216/debugger-variables-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>変数はスコープによってグループ化されます: Function スコープには <code>user</code> や <code>greeting</code> といった関数で定義したローカル変数はもちろん、ビルトインの <code>arguments</code> および <code>this</code> 変数も表示します。同様にグローバルスコープでは <code>localStorage</code> や <code>console</code> といったビルトインのグローバル変数だけでなく、<code>greetme</code> といった独自に定義したグローバル変数も表示します。</p> + +<p>それぞれのオブジェクトは三角印をクリックすると、プロパティを表示するように拡張できます。</p> + +<p>変数名にマウスポインターを重ねると、その変数に関する付加情報を提供するツールチップを表示します。これらのプロパティの意味について、詳しくは <a href="/ja/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a> をご覧ください。</p> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" title="#script-filter">スクリプトフィルター</a> で "*" 修飾子を使用するか、(<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings" title="#debugger-settings">デバッガーの設定</a> で有効にしている場合は) 変数フィルターボックスに入力することで、表示する変数をフィルターできます。</p> + +<p>{{EmbedYouTube("dxCvnixpM_Q")}}</p> + +<p>ソース内に存在する変数が JavaScript エンジンの最適化により削除されている場合は、変数ビューに変数を表示しますが値は <code>(optimized away)</code> となっており、編集ができません。以下のスクリーンショットでは、変数 <code>upvar</code> が最適化で削除されています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10169/optimized-out.png" style="display: block; height: 235px; margin-left: auto; margin-right: auto; width: 332px;"></p> + +<h2 id="Modify_variables" name="Modify_variables">変数を変更する</h2> + +<p>コードがブレークポイントで停止したときに、デバッガーの <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a> で変数を変更できます。変数の現在の値をクリックすると、そこに入力できるようになります:</p> + +<p>{{EmbedYouTube("FKG-jkvSpq8")}}</p> + +<h2 id="Watch_an_expression" name="Watch_an_expression">式をウォッチする</h2> + +<p>ウォッチ式は、実行が停止するたびに評価される式です。よって、これらの式の結果を調査できます。これらは、コード内で必ずしも調査を行える状態であるとは限らない不変量の調査ができる点が役に立ちます。[ウォッチ式を追加] と表示されているボックスをクリックして、コードをステップ実行したときに出力内容を監視したい JavaScript 式を入力することで、ウォッチ式を追加します。</p> + +<p>そして、コードの実行を開始します。コードのステップ実行を始めるまでウォッチ式は何も行いませんので、ブレークポイントに達するまでは何も起きません。ブレークポイントに達すると、アクティブな式とその値を表示するボックスが現れます:</p> + +<p>{{EmbedYouTube("CwGU-5wKRw0")}}</p> + +<p>コードをステップ実行して、値の変化に応じた式の結果をウォッチできます。値が変わるたびに、ボックスが一時的に黄色に光ります。式の隣にある [x] 印のアイコンをクリックすると、ウォッチ式を削除できます。またもちろん、ウォッチ式は同時に複数設定できます。</p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..da2ab1e637 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html @@ -0,0 +1,16 @@ +--- +title: DOM ノードのハイライトと調査 +slug: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。</p> + +<p>また、変数の隣に標的のアイコンが表示されます。このアイコンをクリックすると、その DOM ノードを選択した <a href="/ja/docs/Tools/Page_Inspector">インスペクター</a> が開きます。</p> + +<p>{{EmbedYouTube("0JWxXp2Qql8")}}</p> diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html new file mode 100644 index 0000000000..b792199c59 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Debugger_(before_Firefox_52)/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger_(before_Firefox_52)/How_to +--- +<div>{{ToolsSidebar}}</div> + +<p><span class="seoSummary">これらの記事では、デバッガの使用方法について説明します。</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..2408127b78 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html @@ -0,0 +1,21 @@ +--- +title: デバッガーを開く +slug: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>メニューボタン ( <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> ) をクリックして [開発ツール]、 [デバッガー] の順にクリックすると、デバッガーが開きます。あるいは、以下のキーボードショートカットを使用します:</p> + +<ul> + <li>Windows および Linux では Control-Shift-S</li> + <li>Mac では Command-Option-S</li> +</ul> + +<p>インスペクターがアクティブになっている <a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a> が、ブラウザーのウィンドウ下部に現れます。こちらが始めにデバッガーを開いたときの様子です:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13200/debugger-open.png" style="display: block; height: 774px; margin-left: auto; margin-right: auto; width: 1006px;"></p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..13146945a0 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html @@ -0,0 +1,18 @@ +--- +title: 圧縮されたファイルを整形する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>圧縮された (minified) ファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13212/debugger-pretty-print.png" style="display: block; height: 407px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>ファイルを読みやすい形式で表示します。</p> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">デバッガーの設定</a> で [圧縮されたソースを自動的に整形表示] を選択すると、デバッガーが圧縮されたソースを検出して自動的に整形するように指定できます。</p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..881571f63e --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html @@ -0,0 +1,74 @@ +--- +title: 検索とフィルター +slug: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">ツールバー</a> のスクリプトフィルターを使用して、デバッガー内にある項目を検索できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13214/debugger-filter.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>接頭辞をつけずに文字列を入力すると、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a> に一覧表示されているソースのファイル名から検索します。Enter キーや矢印キーを押下して、マッチしたファイル名のソースを表示します。</p> + +<p>いずれかの特殊文字による検索演算子を接頭辞として付加することで、さまざまな検索機能を提供します。</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">接頭辞</th> + <th scope="col">機能</th> + </tr> + </thead> + <tbody> + <tr> + <td>なし</td> + <td><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane" title="#source-list-pane">ソースリストペイン</a> に表示しているスクリプトの絞り込みを行います。</td> + </tr> + <tr> + <td>!</td> + <td>すべてのファイルから文字列を検索します。</td> + </tr> + <tr> + <td>@</td> + <td>すべてのファイルから、文字列を含む関数定義を検索します。</td> + </tr> + <tr> + <td>#</td> + <td> + <p>現在 <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> で開いているファイルから文字列を検索します。</p> + + <p>検索した後に Enter キーを押下すると、マッチした箇所を巡ります。</p> + </td> + </tr> + <tr> + <td>:</td> + <td>現在 <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> で開いているファイルで、指定した行へ移動します。</td> + </tr> + <tr> + <td>*</td> + <td><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a> に表示している変数の絞り込みを行います。</td> + </tr> + </tbody> +</table> + +<p>これらのオプションは、フィルター内をクリックしたときにポップアップ表示します。また、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> のコンテキストメニューでもアクセスできます。</p> + +<p>接頭辞を組み合わせて、より強力な問い合わせが可能です。例えば:</p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td>file.js:12</td> + <td>"file.js" を開いて 12 行目へ移動します。</td> + </tr> + <tr> + <td>mod#onLoad</td> + <td>ファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。</td> + </tr> + </tbody> +</table> diff --git a/files/ja/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 new file mode 100644 index 0000000000..cb8ae2d4bf --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html @@ -0,0 +1,29 @@ +--- +title: ブレークポイントを設置する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p><span class="seoSummary">デバッガーで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。</span></p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、実行を停止したい行の行番号をクリックします。</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、実行を停止したい行でコンテキストメニューを開いて、[ブレークポイントを設置] を選択します。</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、ブレークポイントを設置したい行をハイライトして Ctrl+B (Windows/Linux) または Command+B (Mac OS X) を押下します。</li> +</ul> + +<p>それぞれのブレークポイントは、デバッガー内の 2 カ所に表示します:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a> で、ファイル名の下に一覧表示する</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン </a>で、行に青色の矢印がつく、または <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">条件付き </a>ブレークポイントであれば橙色の矢印がつく</li> +</ul> + +<p>以下のスクリーンショットでは、ファイルの 20 行目と 28 行目にブレークポイントがあります。また、20 行目のブレークポイントにヒットしています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13202/debugger-details.png" style="display: block; height: 325px; margin-left: auto; margin-right: auto; width: 900px;"></p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..3a3958596c --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,22 @@ +--- +title: 条件付きブレークポイントを設置する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>条件付きブレークポイントを設置するには <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a> で、設置したい行でコンテキストメニューを開いて [条件付きブレークポイントを設置] を選択します。そして、表示されたポップアップに条件式を入力します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12900/debugger-conditional-breakpoint.png" style="display: block; height: 273px; margin-left: auto; margin-right: auto; width: 823px;"></p> + +<p>条件付きブレークポイントは、ソースペインで橙色の矢印がつきます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12904/debugger-conditional-orange.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 823px;"></p> + +<p>条件を編集したり通常のブレークポイントに条件を追加したりするには、コンテキストメニューを開いて [条件付きブレークポイントを設定する] を選択します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12902/debugger-make-conditional.png" style="display: block; height: 427px; margin-left: auto; margin-right: auto; width: 823px;"></p> diff --git a/files/ja/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 new file mode 100644 index 0000000000..634315dd13 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html @@ -0,0 +1,21 @@ +--- +title: コードをステップ実行する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>コードがブレークポイントで止まったときは、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">ツールバー</a> の左側にある 4 つのボタンを使用してステップ実行を実施できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13208/debugger-step.png" style="display: block; height: 414px; margin-left: auto; margin-right: auto; width: 903px;">ボタンは順に以下のとおりです:</p> + +<ul> + <li>復帰: 次のブレークポイントまで実行します。</li> + <li>ステップオーバー: 同一関数内で次の行へ進みます。</li> + <li>ステップイン: 当該行が関数の呼び出しでなければ、関数内で次の行へ進みます。関数の呼び出しである場合は、呼び出した関数に入ります。</li> + <li>ステップアウト: 現在の関数の終端まで実行します。</li> +</ul> diff --git a/files/ja/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 new file mode 100644 index 0000000000..1f41177f80 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html @@ -0,0 +1,20 @@ +--- +title: ソースマップを使用する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>JavaScript のソースは、より効率よくサーバーから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript や TypeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第にプログラムによって作られる傾向があります。<a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">ソースマップ</a> の使用によって、デバッグをとても容易にするために、デバッガーが実行中のコードを元のソースファイルと対応づけることができます。</p> + +<p>デフォルトでは、デバッガーは使用可能であればソースマップを使用します。ソースマップのサポートが有効かを確認する、あるいは必要に応じて無効化する場合は、[<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings" title="#debugger-settings">デバッガーのオプション</a>] ボタンをクリックして、ポップアップした設定一覧で [元のソースを表示] を確認してください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12922/debugger-sourcemaps.png" style="display: block; height: 506px; margin-left: auto; margin-right: auto; width: 915px;"></p> + +<p>もちろん、これを動作させるためにはページで実行する JavaScript にソースマップを与えることが必要です。ソースファイルにコメントディレクティブを追加してください:</p> + +<pre>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</pre> diff --git a/files/ja/tools/debugger_(before_firefox_52)/index.html b/files/ja/tools/debugger_(before_firefox_52)/index.html new file mode 100644 index 0000000000..404974a00f --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/index.html @@ -0,0 +1,55 @@ +--- +title: デバッガー (Firefox 52 より前) +slug: Tools/Debugger_(before_Firefox_52) +translation_of: Tools/Debugger_(before_Firefox_52) +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。</p> + +<p>Firefox でローカル実行しているコードや、例えば Firefox OS デバイスや Android 版 Firefox などのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a> のページをご覧ください。</p> + +<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> + +<hr> +<h2 id="User_Interface_Tour" name="User_Interface_Tour">ユーザーインターフェイスツアー</h2> + +<p>デバッガーについてひととおり理解するために、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour"> UI のクイックツアー </a>を用意しました。</p> + +<hr> +<h2 id="How_to" name="How_to">使い方</h2> + +<p>デバッガーで何ができるかを知るために、以下のガイドをご覧ください:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Open_the_debugger">デバッガーを開く</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_breakpoint">ブレークポイントを設置する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">ブレークポイントの無効化</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">コードをステップ実行する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">DOM イベントでブレークする</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">DOM ノードのハイライトと調査</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">圧縮されたファイルを整形表示する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">検索とフィルター</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">条件付きブレークポイントを設置する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables">変数を調査、編集、ウォッチする</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Use_a_source_map">ソースマップを使用する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">ソースをブラックボックス化する</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Debug_eval_sources">eval ソースをデバッグする</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Access_debugging_in_add-ons">アドオンでデバッグにアクセスする</a></li> +</ul> +</div> + +<hr> +<h2 id="Reference" name="Reference">リファレンス</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Keyboard_shortcuts">キーボードショートカット</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">オプション</a></li> +</ul> +</div> diff --git a/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..8625bb75bb --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html @@ -0,0 +1,16 @@ +--- +title: キーボードショートカット +slug: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts +translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "デバッガー(Firefox_52より前)")}}</p> + +<h2 id="Global_shortcuts" name="Global_shortcuts">共通ショートカット</h2> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}</p> diff --git a/files/ja/tools/debugger_(before_firefox_52)/settings/index.html b/files/ja/tools/debugger_(before_firefox_52)/settings/index.html new file mode 100644 index 0000000000..a9f0a505b3 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/settings/index.html @@ -0,0 +1,63 @@ +--- +title: オプション +slug: Tools/Debugger_(before_Firefox_52)/Settings +translation_of: Tools/Debugger_(before_Firefox_52)/Settings +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>デバッガーには独自の設定メニューがあり、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#toolbar">ツールバー</a> 上のアイコンからアクセスできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12930/debugger-options.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 845px;"></p> + +<p>それぞれのオプションは、オン/オフの切り替え式になっています:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 40%;"><strong>圧縮されたソースを自動的に整形表示</strong></td> + <td>このオプションを有効にすると、デバッガーは圧縮された JS ファイルを自動的に検出して <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">整形 </a>します。</td> + </tr> + <tr> + <td><strong>例外発生で停止</strong></td> + <td>このオプションが有効であるときは、JavaScript の例外が発生した際にスクリプトの実行が自動的に停止します。</td> + </tr> + <tr> + <td><strong>キャッチした例外を無視</strong></td> + <td> + <p>このオプションを有効 (デフォルトで有効) にして [例外発生で停止] も有効にすると、キャッチされていない例外だけで実行が停止します。</p> + + <p>これは通常、望ましい動作です。例外がキャッチされたということは通常、プログラムが例外を適切に扱っていることを示しますので、一般的にそのような例外での停止は望まれません。</p> + </td> + </tr> + <tr> + <td><strong>起動時にデバッガを開く</strong></td> + <td>このオプションが有効であるときは、始めにデバッガーを起動した時点で<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane"> 変数ペイン </a>が開くようになります。</td> + </tr> + <tr> + <td><strong>計算可能なプロパティのみ表示</strong></td> + <td>{{原語併記("列挙可能", "enumerable")}} ではない JavaScript プロパティを表示しません。</td> + </tr> + <tr> + <td><strong>変数フィルターボックスを表示</strong></td> + <td>このオプションを有効にすると <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン </a>に [変数を検索] ボックスが表示されますので、表示されている変数一覧をフィルターできます。</td> + </tr> + <tr> + <td><strong>元のソースを表示</strong></td> + <td>このオプションを有効にすると、デバッガーは可能であれば <a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">ソースマップ </a>を使用します。これはコンバイン、ミニファイ、あるいは CoffeeScript のような言語からコンパイルした JavaScript の、元のソースコードを表示するためのオプションです。デフォルトで有効です。</td> + </tr> + <tr> + <td><strong>圧縮されたソースを自動的にブラックボックス化する</strong></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 33 の新機能</p> + </div> + + <p>URL の末尾が ".min.js" であるソースファイルを自動的に<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source"> ブラックボックス化</a> します。デフォルトで有効です。</p> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html b/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html new file mode 100644 index 0000000000..8a8b6645f3 --- /dev/null +++ b/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html @@ -0,0 +1,129 @@ +--- +title: UI ツアー +slug: Tools/Debugger_(before_Firefox_52)/UI_Tour +translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。</p> + +<p><a href="/ja/docs/Tools/Debugger">Firefox 52 以降のデバッガーを確認します</a>。</p> +</div> + +<p>本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。デバッガーの UI は 6 つの主要なセクションに分かれており、順番に説明していきます:</p> + +<ul> + <li><a href="#toolbar">ツールバー</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_list_pane">ソースリストペイン</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Call_stack_pane">コールスタックペイン</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane">ソースペイン</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a></li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13182/debugger-overview-annotated.png" style="display: block; height: 1640px; margin-left: auto; margin-right: auto; width: 1019px;"></p> + +<h2 id="Toolbar" name="Toolbar"><a name="toolbar">ツールバー</a></h2> + +<p>ツールバーは 4 つのセクションで構成されます:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">スクリプト内での動きを制御する</a> ボタン</li> + <li>コールスタックの可視化</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">スクリプトフィルター</a></li> + <li>以下の操作を行うボタン: + <ul> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> や <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン</a> の展開/折りたたみ</li> + <li>デバッガーの <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/Settings">設定</a></li> + </ul> + </li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13194/debugger-toolbar-annotated.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 942px;"></p> + +<p>左側にある 4 つのボタンは、以下の機能を実行します:</p> + +<ul> + <li><strong>停止/復帰</strong> (F8): デバッグ中のスクリプトの実行を停止および再開します。上図のようにボタンが青色で "押し込まれている" ときは、ボタンを押して停止したかブレークポイントにヒットしたことにより、スクリプトが停止していることを表します。</li> + <li><strong>ステップオーバー</strong> (F10): JavaScript コードで現在の行をステップ実行します。</li> + <li><strong>ステップイン</strong> (F11): JavaScript で現在の行にある関数呼び出しにスキップします。</li> + <li><strong>ステップアウト</strong> (Shift-F11): 現在の関数を抜けるまで、スクリプトを実行します。</li> +</ul> + +<p>コールスタックの可視化では、実行を停止している時点のコールスタックを表示します。</p> + +<h2 id="Source_list_pane" name="Source_list_pane">ソースリストペイン</h2> + +<p>ソースリストペインでは、ページに読み込まれたすべての JS ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースリストペインと <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Call_stack_pane">コールスタックペイン</a> は画面上の場所を共有しており、ペインの上部にあるタブでこれらを切り替えできます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13186/debugger-source-list-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>ソースファイルは、読み込み元に応じたさまざまな見出しによってグループ化しています。これらから任意のファイルを選択でき、選択したファイルは <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a> に読み込みます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13188/debugger-source-list-pane-annotated.png" style="display: block; height: 535px; margin-left: auto; margin-right: auto; width: 922px;"><br> + ソースファイルに設置したブレークポイントはすべて、ファイル名の下に一覧表示します。各ブレークポイントの隣にあるチェックボックスで、ブレークポイントの有効化/無効化が可能です。リストにあるブレークポイントの項目を右クリックすると、以下の操作が可能なコンテキストメニューを表示します:</p> + +<ul> + <li>当該ブレークポイント、すべてのブレークポイント、あるいは他のブレークポイントを有効化、無効化、あるいは削除する</li> + <li>当該ブレークポイントを条件付きにする (すでに条件付きである場合は、条件を変更する)</li> +</ul> + +<p>ソースリストの下部にある 3 個のアイコンで、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">ソースのブラックボックス化</a>、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">圧縮された JS ファイルの整形</a>、<a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">すべてのブレークポイントの有効/無効</a> の切り替えが可能です。</p> + +<p>ソースリストの項目にコンテキストメニューがあり、ソースの提供元の URL をコピーしたり、URL を新しいタブで開くことができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13184/debugger-source-list-menu-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<h2 id="Call_stack_pane" name="Call_stack_pane">コールスタックペイン</h2> + +<p>デバッガーの左側にあるもうひとつのタブでは、コールスタックを縦に並べて表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13178/debugger-call-stack-pane-annotated.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>各行でコールスタックのレベルを示しており、現在のスタックフレームが最上段に置かれます。行では現在実行している関数の名前と、ソースファイルおよび行番号へのリンクを表示します。</p> + +<h2 id="Source_pane" name="Source_pane">ソースペイン</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13190/debugger-source-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>ここでは、現在読み込んでいる JavaScript ファイルを表示します。ブレークポイントは青色の矢印を行番号に重ねて表示しており、またヒットしているブレークポイントは緑色の矢印で表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13192/debugger-source-pane-breakpoints-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 903px;">ソースペインでは、コンテキストメニューで以下の操作が可能です:</p> + +<ul> + <li>ブレークポイントを設置</li> + <li>条件付きブレークポイントを設置</li> + <li>選択範囲のウォッチ式を追加</li> + <li><a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter" title="#script filter">スクリプトフィルター</a> を使用して検索やフィルターを行う</li> +</ul> + +<p>Firefox 44 より、関数を呼び出している箇所から関数を定義している箇所へジャンプできます。<kbd>control</kbd> キー (Mac OS X では <kbd>command</kbd> キー) を押下しながら、関数名をクリックしてください。</p> + +<h3 id="Variables_popup" name="Variables_popup">変数のポップアップ</h3> + +<p>ソースペインで変数にマウスポインターを載せると、現在の変数の値を表示するポップアップが現れます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13198/debugger-variables-popup-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>この機能により <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> を開いて検索することなく、すばやく変数の値を確認できます。</p> + +<h2 id="Variables_pane" name="Variables_pane">変数ペイン</h2> + +<p>変数ペインはスクリプトの実行中に、内部状態の調査や変更が可能です:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13196/debugger-variables-pane.png" style="display: block; height: 670px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>変数ペインは画面領域を <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Events_pane">イベントペイン</a> と共有しており、ペイン上部のタブでそれらを切り替えることができます。</p> + +<h2 id="Events_pane" name="Events_pane">イベントペイン</h2> + +<p>イベントペインでは、現在コードからリスナが割り当てられている、すべての DOM イベントを一覧表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13180/debugger-events-pane-annotated.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>これは画面領域を <a href="/ja/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour#Variables_pane">変数ペイン</a> と共有しており、ペイン上部のタブでそれらを切り替えることができます。</p> + +<p>イベントはタイプごとにグループ化します。前出のスクリーンショットでは 4 つのタイプがあります: Interaction、Keyboard、Mouse、Navigation です。各タイプの下に、コードにリスナーが存在するすべてのイベントを以下の構文で列挙します:</p> + +<pre>[イベント名] on [イベントターゲット] in [ソースファイル]</pre> + +<p>イベント名の隣にあるチェックボックスにチェックを入れると、デバッガーはイベントリスナーの最初の行でブレークします。イベントタイプの隣にあるチェックボックスにチェックを入れると、デバッガーはタイプの下に列挙しているすべてのイベントでブレークします。</p> diff --git a/files/ja/tools/deprecated_tools/index.html b/files/ja/tools/deprecated_tools/index.html new file mode 100644 index 0000000000..7364b8da89 --- /dev/null +++ b/files/ja/tools/deprecated_tools/index.html @@ -0,0 +1,119 @@ +--- +title: 廃止予定のツール +slug: Tools/Deprecated_tools +tags: + - Deprecated + - Tools +translation_of: Tools/Deprecated_tools +--- +<p>{{ToolsSidebar}}</p> + +<p>Over the course of DevTools development, we have added several experimental panels to try out new ideas. Not all of these have had wide adoption, and due to the cost of maintenance, seldom used panels are eventually removed.</p> + +<p>We have created this list of deprecated or removed panels. This page documents the deprecated panels and the bugs that track their removal. Although these panels have been removed, you still have access to the old code, and there are alternative webextensions that you can try to get similar functionality.</p> + +<p>When we deprecate a panel, we begin by getting feedback from the community to determine the impact of removing that panel. Once we have decided to remove the panel, we will provide a warning message, and finally, we will remove the panel from the codebase.</p> + +<p>You may see a warning message, as in the following image, when trying to activate a deprecated panel:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16546/devTool_settings_deprecated_notice.png" style="border: 1px solid black; display: block; height: 504px; margin: 0px auto; width: 2558px;"></p> + +<p><span id="docs-internal-guid-2b4da094-7fff-a275-e630-2200811ec7cd" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In addition, if you open the panel for one of these tools, you will also see a warning message about its removal.</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16544/deprecated_tool_notice.png" style="border: 1px solid black; display: block; height: 498px; margin: 0px auto; width: 2558px;"></p> + +<h2 id="Scratchpad" name="Scratchpad">スクラッチパッド</h2> + +<p>スクラッチパッドは、Firefox 70 で廃止予定 ({{bug(1565380)}}) とされて、Firefox 72 で削除 ({{bug(1519103)}}) される予定です。</p> + +<h3 id="Description" name="Description">説明</h3> + +<p>スクラッチパッドは、JavaScript コードの実験をする環境を提供します。ウェブページで動作するコードの記述、実行、結果の検証を行えます。</p> + +<p><img alt="Screenshot of the Scratchpad window with a deprecation message" src="https://mdn.mozillademos.org/files/16859/Screen_Shot_2019-08-26_at_08.08.11.png" style="height: 1012px; width: 1282px;"></p> + +<h3 id="Alternatives" name="Alternatives">代替策</h3> + +<p>Firefox 71+ では、ウェブコンソールのエディターモードで複数行の JavaScript コードを記述でき、スクラッチパッドに似たことができます。エディターモードは、コンソール入力の右側にあるアイコンをクリックするか、<kbd>Ctrl + B</kbd> (macOS では <kbd>Cmd + B</kbd> ) で起動されます。</p> + +<p><img alt="Screenshot of the Webconsole in inline mode, with the editor mode icon displayed on the right of the console input" src="https://mdn.mozillademos.org/files/16944/editor_mode_toggle_icon.png" style="height: 530px; width: 1476px;">エディターモードでは、<kbd>Enter</kbd> キーを押すと新しい行が追加され、<kbd>Ctrl + Enter</kbd> (macOS では <kbd>Cmd + Enter</kbd>) を使用して表現の検証を行えます。</p> + +<p><img alt="Screenshot of the Webconsole multiline input, showing an evaluation with a Syntax Error and another, correct one." src="https://mdn.mozillademos.org/files/16860/Screen_Shot_2019-08-26_at_08.18.26.png" style="height: 1166px; width: 1864px;"></p> + +<p>評価を行っても入力は消去されず、コードスニペットを素早く繰り返せます。</p> + +<p>結果は、入力の右側にあるコンソール出力に表示され、素早くフィードバックが提供されます。スクラッチパッドと違い、エラーは展開可能なスタックトレースで出力で適切に表示され、現在書いているコードのデバッグを簡単に行えます。</p> + +<p>Firefox 72 以降では、<kbd>Ctrl + O</kbd> (macOS では <kbd>Cmd + O</kbd>) を押すと JavaScript ファイルコンテンツをコンソールの入力にインポートでき、同様に <kbd>Ctrl + S</kbd> (macOS では <kbd>Cmd + S</kbd>) を使用してコンソールの入力コンテンツを保存できます。</p> + +<h2 id="WebIDE_and_Connect_page">WebIDE and Connect page</h2> + +<p>WebIDE was deprecated as of Firefox 69</p> + +<p>Disabled as of Firefox 70 ({{bug(1539451)}}).</p> + +<p>Removed as of Firefox 71 ({{bug(1539462)}}).</p> + +<h3 id="Description_2">Description</h3> + +<p>WebIDE allowed you to connect the Firefox Developer Tools to remote browsers, such as Firefox for Android. It was also intended to support application development for Firefox OS.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16613/WebIDE_68.png" style="display: block; height: 632px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Alternatives_2">Alternatives</h3> + +<p>Remote debugging is available in about:debugging as of Firefox 68. Features not ported to about:debugging are: WiFi debugging for Firefox for Android, application development. Features that are planned but not ported yet: remote browser screenshots and edit remote browser configuration. More details on the <a href="https://groups.google.com/forum/#!topic/mozilla.dev.developer-tools/aWA7JJ-TpRw">mailing-list thread</a>.</p> + +<h2 id="Canvas_debugger">Canvas debugger</h2> + +<p>Bugzilla issue: {{bug(1403938)}}</p> + +<p>Removed as of Firefox 67</p> + +<h3 id="Description_3">Description</h3> + +<p>Canvas Debugger allowed users to inspect the canvas element and see how frequently a given function is called. It was deprecated due to lack of use.</p> + +<p>We do not have dedicated documentation for the Canvas Debugger.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16543/canvas_tool.png" style="display: block; margin: 0 auto; width: 800px;"></p> + +<h3 id="Alternatives_3">Alternatives</h3> + +<p><a href="https://addons.mozilla.org/en-US/firefox/addon/spector-js/#&gid=1&pid=2" id="docs-internal-guid-836d1256-7fff-1e5e-9c9c-357ae6e43dba" style="text-decoration: none;"><u>Spector.js</u></a><span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> is a WebExtension that can provide these features with 3D contexts.</span></p> + +<h2 id="Web_Audio_editor">Web Audio editor</h2> + +<p>Bugzilla issue: {{bug(1403944)}}</p> + +<p>Removed as of Firefox 67</p> + +<h3 id="Description_4">Description</h3> + +<p>The Web Audio Editor allowed you to examine an audio context constructed in the page and provided a visualization of its graph. This gave a high-level view of its operation, and enabled you to ensure that all the nodes are connected in the way you expect. It was possible to edit the AudioParam properties for each node in the graph. Some non-AudioParam properties, like an OscillatorNode's type property, were displayed and editable as well. It was deprecated due to lack of use.</p> + +<p>More details about the <a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16548/webAudio_tool.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p> + +<h3 id="Alternatives_4">Alternatives</h3> + +<p>Alternatives include <a href="https://github.com/google/audion">AudioN</a> and <a href="https://github.com/spite/WebAudioExtension">https://github.com/spite/WebAudioExtension</a> web extensions.</p> + +<h2 id="Shader_editor">Shader editor</h2> + +<p>Bugzilla issue: {{bug(1342237)}}</p> + +<p>Removed as of Firefox 67</p> + +<h3 id="Description_5">Description</h3> + +<p>The Shader Editor allowed users to examine and edit the source of the WebGL vertex and fragment shaders. It was deprecated due to low usage and maintenance costs.</p> + +<p>More details about the <a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16547/shaderEditor_tool.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p> + +<h3 id="Alternatives_5">Alternatives</h3> + +<p>An alternative to this panel is this extension: <a href="https://github.com/spite/ShaderEditorExtension">https://github.com/spite/ShaderEditorExtension</a>, or <a href="https://addons.mozilla.org/en-US/firefox/addon/spector-js/#&gid=1&pid=2">Spector.js</a> also supports a Shader Editor that requires a library to use a shader reloader hook. Currently only the Babylon library does.</p> diff --git a/files/ja/tools/devtoolsapi/index.html b/files/ja/tools/devtoolsapi/index.html new file mode 100644 index 0000000000..0f5e033845 --- /dev/null +++ b/files/ja/tools/devtoolsapi/index.html @@ -0,0 +1,836 @@ +--- +title: DevTools API +slug: Tools/DevToolsAPI +translation_of: Tools/DevToolsAPI +--- +<div>{{ToolsSidebar}}</div> + +<p>{{obsolete_header()}}</p> + +<p>{{ warning("DevTools APIはまだWIPです。 矛盾がある場合は、Firefox Developer Toolsチームにお知らせください。") }}</p> + +<p>この API は現在進行中ですが、現在使用可能なページインスペクタとデバッガの使用可能な部分があります。</p> + +<h2 id="イントロダクション">イントロダクション</h2> + +<p><span class="seoSummary">DevTools API は、Firefox の開発者ツールを登録してアクセスする方法を提供します。</span></p> + +<p>In terms of User Interface, each registered tool lives in its own tab (we call one tab a <strong>panel</strong>). These tabs are located in a box we call a <strong>Toolbox</strong>. A toolbox can be <em>hosted</em> within a browser tab (at the bottom or on the side), or in its own window (we say that the toolbox is <em>undocked</em>). A Toolbox (and all the tools it contains) is linked to a <strong>Target</strong>, which is the object the tools are debugging. A target is usually a web page (a tab), but can be other things (a chrome window, a remote tab,…).</p> + +<p>In terms of code, each tool has to provide a <strong>ToolDefinition</strong> object. A definition is a JS light object that exposes different information about the tool (like its name and its icon), and a <em>build</em> method that will be used later-on to start an instance of this tool. The <strong> gDevTools</strong> global object provides methods to register a tool definition and to access tool instances. An instance of a tool is called a <strong>ToolPanel</strong>. The ToolPanel is built only when the tool is selected (not when the toolbox is opened). There is no way to "close/destroy" a ToolPanel. The only way to close a toolPanel is to close its containing toolbox. All these objects implement the <strong>EventEmitter</strong> interface.</p> + +<h2 id="API">API</h2> + +<h3 id="gDevTools">gDevTools</h3> + +<p>The <code>gDevTools</code> API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the <code>gDevTools</code> API from an add-on, it can be imported with following snippet</p> + +<pre class="brush: js"><code>const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");</code></pre> + +<h4 id="メソッド">メソッド</h4> + +<dl> + <dt> + <h5 id="registerTool(toolDefinition)"><code>registerTool(toolDefinition)</code></h5> + </dt> + <dd>Registers a new tool and adds a tab to each existing toolbox.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>toolDefinition {ToolDefinition}</code></em> - An object that contains information about the tool. See {{anch("ToolDefinition")}} for details.</dd> + <dt> + <h5 id="unregisterTool(tool)"><code>unregisterTool(tool)</code></h5> + </dt> + <dd>Unregisters the given tool and removes it from all toolboxes.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>tool {ToolDefinition|String}</code></em> - The tool definition object or the id of the tool to unregister.</dd> + <dt> + <h5 id="registerTheme(themeDefinition)"><code>registerTheme(themeDefinition)</code></h5> + </dt> + <dd>Registers a new theme.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>themeDefinition {ThemeDefinition}</code></em> - An object that contains information about the theme.</dd> + <dt> + <h5 id="unregisterTheme(theme)"><code>unregisterTheme(theme)</code></h5> + </dt> + <dd>Unregisters the given theme.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>theme {ThemeDefinition|String}</code></em> - The theme definition object or the theme identifier.</dd> + <dt> + <h5 id="showToolbox(target_toolId_hostType_hostOptions)"><code>showToolbox(target [, toolId [, hostType [, hostOptions]]])</code></h5> + </dt> + <dd>Opens a toolbox for given target either by creating a new one or activating an existing one.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>target {Target}</code></em> - The target the toolbox will debug.<br> + <em><code>toolId {String}</code></em> - The tool that should be activated. If unspecified the previously active tool is shown.<br> + <em><code>hostType {String}</code></em> - The position the toolbox will be placed. One of <code>bottom</code>, <code>side</code>, <code>window</code>, <code>custom</code>. See {{anch("HostType")}} for details.<br> + <em><code>hostOptions {Object}</code></em> - An options object passed to the selected host. See {{anch("HostType")}} for details.</dd> + <dd><strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("Toolbox")}} instance once it has been initialized and the selected tool is loaded.</dd> + <dt> + <h5 id="getToolbox(target)"><code>getToolbox(target)</code></h5> + </dt> + <dd>Fetch the {{anch("Toolbox")}} object for the given target.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>target {Target}</code></em> - The target the toolbox is debugging.<br> + <br> + <strong>Return value:</strong><br> + {{anch("Toolbox")}} object or undefined if there's no toolbox for the given target..</dd> + <dt> + <h5 id="closeToolbox(target)"><code>closeToolbox(target)</code></h5> + </dt> + <dd>Closes the toolbox for given target.</dd> + <dd><strong>Parameters:</strong><br> + <em><code>target {Target}</code></em> - The target of the toolbox that should be closed.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled once the toolbox has been destroyed.</dd> + <dt> + <h5 id="getDefaultTools()"><code>getDefaultTools()</code></h5> + </dt> + <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for the built-in tools.</dd> + <dt> + <h5 id="getAdditionalTools()"><code>getAdditionalTools()</code></h5> + </dt> + <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for tools added by addons.</dd> + <dt> + <h5 id="getToolDefinition(toolId)"><code>getToolDefinition(toolId)</code></h5> + </dt> + <dd>Fetch the {{anch("ToolDefinition")}} object for a tool if it exists and is enabled.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String}</em></code> - The ID of the tool.</dd> + <dd><strong>Return value:</strong><br> + A {{anch("ToolDefinition")}} if a tool with the given ID exists and is enabled, null otherwise.</dd> + <dt> + <h5 id="getToolDefinitionMap()"><code>getToolDefinitionMap()</code></h5> + </dt> + <dd>Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.</dd> + <dt> + <h5 id="getToolDefinitionArray()"><code>getToolDefinitionArray()</code></h5> + </dt> + <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for enabled tools sorted by the order they appear in the toolbox.</dd> + <dt> + <h5 id="getThemeDefinition(themeId)"><code>getThemeDefinition(themeId)</code></h5> + </dt> + <dd>Fetch the <code>ThemeDefinition</code> object for the theme with the given id.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>themeId {String}</em></code> - The ID of the theme.</dd> + <dd><strong>Return value:</strong><br> + A <code>ThemeDefinition</code> object if the theme exists, null otherwise.</dd> + <dt> + <h5 id="getThemeDefinitionMap()"><code>getThemeDefinitionMap()</code></h5> + </dt> + <dd>Returns a toolId → <code>ThemeDefinition</code> map for available themes.</dd> + <dt> + <h5 id="getThemeDefinitionArray()"><code>getThemeDefinitionArray()</code></h5> + </dt> + <dd>Returns an {{jsxref("Array")}} of <code>ThemeDefinition</code> objects for avialble themes.</dd> +</dl> + +<h4 id="Events">Events</h4> + +<p>Following events are emitted by the <code>gDevTools</code> object via the {{anch("EventEmitter")}} interface.</p> + +<dl> + <dt> + <h5 id="tool-registered(toolId)"><code>tool-registered</code><code>(toolId)</code></h5> + </dt> + <dd>A new tool has been registered.</dd> + <dt> + <h5 id="tool-unregistered(tool)"><code>tool-unregistered(tool)</code></h5> + </dt> + <dd>A tool has been unregistered. The parameter is a {{anch("ToolDefinition")}} object.</dd> + <dt> + <h5 id="theme-registered(themeId)"><code>theme-registered(themeId)</code></h5> + </dt> + <dd>A new theme has been registered.</dd> + <dt> + <h5 id="theme-unregistered(theme)"><code>theme-unregistered(theme)</code></h5> + </dt> + <dd>A theme has been unregistered. The parameter is a <code>ThemeDefinition</code> object.</dd> + <dt> + <h5 id="toolbox-ready(toolbox)"><code>toolbox-ready(toolbox)</code></h5> + </dt> + <dd>A new toolbox has been created and is ready to use. The parameter is a {{anch("Toolbox")}} object instance.</dd> + <dt> + <h5 id="toolbox-destroy(target)"><code>toolbox-destroy(target)</code></h5> + </dt> + <dd>The toolbox for the specified target is about to be destroyed.</dd> + <dt> + <h5 id="toolbox-destoyed(target)"><code>toolbox-destoyed(target)</code></h5> + </dt> + <dd>The toolbox for the specified target has been destroyed.</dd> + <dt> + <h5 id="toolId-init(toolbox_iframe)"><code>{toolId}-init(toolbox, iframe)</code></h5> + </dt> + <dd>A tool with the given ID has began to load in the given toolbox to the given frame.</dd> + <dt> + <h5 id="toolId-build(toolbox_panel)"><code>{toolId}-build(toolbox, panel)</code></h5> + </dt> + <dd>A tool with the given ID has began to initialize in the given toolbox. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd> + <dt> + <h5 id="toolId-ready(toolbox_panel)"><code>{toolId}-ready(toolbox, panel)</code></h5> + </dt> + <dd>A tool with the given ID has finished its initialization and is ready to be used. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd> + <dt> + <h5 id="toolId-destroy(toolbox_panel)"><code>{toolId}-destroy(toolbox, panel)</code></h5> + </dt> + <dd>A tool with the given ID is about to be destroyed. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd> +</dl> + +<h3 id="Toolbox">Toolbox</h3> + +<p>A Toolbox is a frame for the {{anch("ToolPanel", "ToolPanels")}} that is debugging a specific target.</p> + +<h4 id="プロパティ">プロパティ</h4> + +<dl> + <dt> + <h5 id="target"><code>target</code></h5> + </dt> + <dd><strong>Target</strong>. The Target this toolbox is debugging.</dd> + <dt> + <h5 id="hostType"><code>hostType</code></h5> + </dt> + <dd><strong>Toolbox.HostType</strong>. The type of the host this Toolbox is docked to. The value is one of the <code>Toolbox.HostType</code> constants.</dd> + <dt> + <h5 id="zoomValue"><code>zoomValue</code></h5> + </dt> + <dd>The current zoom level of the Toolbox.</dd> +</dl> + +<h4 id="Constants">Constants</h4> + +<p>The Toolbox constructor contains following constant properties.</p> + +<dl> + <dt> + <h5 id="Toolbox.HostType.BOTTOM"><code>Toolbox.HostType.BOTTOM</code></h5> + </dt> + <dd>Host type for the default toolbox host at the bottom of the browser window.</dd> + <dt> + <h5 id="Toolbox.HostType.SIDE"><code>Toolbox.HostType.SIDE</code></h5> + </dt> + <dd>Host type for the host at the side of the browser window.</dd> + <dt> + <h5 id="Toolbox.HostType.WINDOW"><code>Toolbox.HostType.WINDOW</code></h5> + </dt> + <dd>Host type for the separate Toolbox window.</dd> + <dt> + <h5 id="Toolbox.HostType.CUSTOM"><code>Toolbox.HostType.CUSTOM</code></h5> + </dt> + <dd>Host type for a custom frame host.</dd> +</dl> + +<h4 id="メソッド_2">メソッド</h4> + +<dl> + <dt> + <h5 id="getCurrentPanel()"><code>getCurrentPanel()</code></h5> + </dt> + <dd>Get the currently active {{anch("ToolPanel")}}.<br> + <br> + <strong>Return value:</strong><br> + The {{anch("ToolPanel")}} object that was returned from {{anch("build(window_toolbox)", "ToolPanel.build()")}}.</dd> + <dt> + <h5 id="getPanel(toolId)"><code>getPanel(toolId)</code></h5> + </dt> + <dd>Get the {{anch("ToolPanel")}} for given tool.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool identifier.<br> + <br> + <strong>Return value:</strong><br> + The {{anch("ToolPanel")}} object if the tool with the given <code>toolId</code> is active, otherwise <code>undefined</code>.</dd> + <dt> + <h5 id="getPanelWhenReady(toolId)"><code>getPanelWhenReady(toolId)</code></h5> + </dt> + <dd>Similar to <code>getPanel()</code> but waits for the tool to load first. If the tool is not already loaded or currently loading the returned {{domxref("Promise")}} won't be fulfilled until something triggers the tool to load.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool identifier.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object once the tool has finished loading.</dd> + <dt> + <h5 id="getToolPanels()"><code>getToolPanels()</code></h5> + </dt> + <dd>Returns a <code>toolId → {{anch("ToolPanel")}}</code> {{jsxref("Map")}} for currently loaded tools.</dd> + <dt> + <h5 id="getNotificationBox()"><code>getNotificationBox()</code></h5> + </dt> + <dd>Returns a {{ XULElem("notificationbox") }} element for the Toolbox that can be used to display notifications to the user.</dd> + <dt> + <h5 id="loadTool(toolId)"><code>loadTool(toolId)</code></h5> + </dt> + <dd>Loads the tool with the given <code>toolId</code> in the background but does not activate it.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool identifier.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.<br> + </dd> + <dt> + <h5 id="selectTool(toolId)"><code>selectTool(toolId)</code></h5> + </dt> + <dd>Selects the tool with the given <code>toolId</code>.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool identifier.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel once the tool has loaded and activated.</dd> + <dt> + <h5 id="selectNextTool()"><code>selectNextTool()</code></h5> + </dt> + <dd>Selects the next tool in the <code>Toolbox</code>.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.</dd> + <dt> + <h5 id="selectPreviousTool()"><code>selectPreviousTool()</code></h5> + </dt> + <dd>Selects the previous tool in the <code>Toolbox</code>.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.</dd> + <dt> + <h5 id="highlightTool(toolId)"><code>highlightTool(toolId)</code></h5> + </dt> + <dd>Highlights the tab for the given tool.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool to highlight.</dd> + <dt> + <h5 id="unhighlightTool(toolId)"><code>unhighlightTool(toolId)</code></h5> + </dt> + <dd>Unhighlights the tab for the given tool.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>toolId {String} - </em></code>The tool to unhighlight.</dd> + <dt> + <h5 id="openSplitConsole()"><code>openSplitConsole()</code></h5> + </dt> + <dd>Opens the split Console to the bottom of the toolbox.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled once the Console has loaded.</dd> + <dt> + <h5 id="closeSplitConsole()"><code>closeSplitConsole()</code></h5> + </dt> + <dd>Closes the split console.</dd> + <dt> + <h5 id="toggleSplitConsole()"><code>toggleSplitConsole()</code></h5> + </dt> + <dd>Toggles the state of the split console.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled once the operation has finished.</dd> + <dt> + <h5 id="switchHost(hostType)"><code>switchHost(hostType)</code></h5> + </dt> + <dd>Switches the location of the toolbox<br> + <br> + <strong>Parameters:</strong><br> + <code><em>hostType {Toolbox.HostType} - </em></code>The type of the new host.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled once the new host is ready.<br> + </dd> + <dt> + <h5 id="reloadTarget(force)"><code>reloadTarget(force)</code></h5> + </dt> + <dd>Reloads the current target of the toolbox.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>force {Boolean} -</code></em> If true the target is shift-reloaded i.e. the cache is bypassed during the reload.</dd> + <dt> + <h5 id="zoomIn()"><code>zoomIn()</code></h5> + </dt> + <dd>Increases the zoom level of the <code>Toolbox</code> document.</dd> + <dt> + <h5 id="zoomOut()"><code>zoomOut()</code></h5> + </dt> + <dd>Decreases the zoom level of the <code>Toolbox</code> document.</dd> + <dt> + <h5 id="zoomReset()"><code>zoomReset()</code></h5> + </dt> + <dd>Resets the zoom level of the <code>Toolbox</code> document.</dd> + <dt> + <h5 id="setZoom(value)"><code>setZoom(value)</code></h5> + </dt> + <dd>Set the zoom level to an arbitrary value.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>value {Number} - </em></code>The zoom level such as <code>1.2</code>.</dd> + <dt> + <h5 id="destroy()"><code>destroy()</code></h5> + </dt> + <dd>Closes the toolbox.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is resolved once the <code>Toolbox</code> is destroyed.</dd> +</dl> + +<h4 id="Events_2">Events</h4> + +<p>The Toolbox object emits following events via the {{anch("EventEmitter")}} interface.</p> + +<dl> + <dt> + <h5 id="host-changed"><code>host-changed</code></h5> + </dt> + <dd>The Host for this Toolbox has changed.</dd> + <dt> + <h5 id="ready"><code>ready</code></h5> + </dt> + <dd>The <code>Toolbox</code> is ready to use.</dd> + <dt> + <h5 id="select(toolId)"><code>select(toolId)</code></h5> + </dt> + <dd>A tool has been selected. This event is emitted before the corresponding <code>{toolId}-selected</code> event.</dd> + <dt> + <h5 id="toolId-init(frame)"><code>{toolId}-init(frame)</code></h5> + </dt> + <dd>A tool is about to be loaded. The frame is the {{HTMLElement("iframe")}} element that has been created for the tool.</dd> + <dt> + <h5 id="toolId-build(panel)"><code>{toolId}-build(panel)</code></h5> + </dt> + <dd>The frame for a tool has loaded and the {{anch("build(window_toolbox)", "ToolPanel.build()")}} method has been called but the asynchronous initialization has not started. The parameter is a {{anch("ToolPanel")}} object.</dd> + <dt> + <h5 id="toolId-ready(panel)"><code>{toolId}-ready(panel)</code></h5> + </dt> + <dd>The asynchronous initialization for a tool has completed and it is ready to be used. The parameter is a {{anch("ToolPanel")}} object.</dd> + <dt> + <h5 id="toolId-selected(panel)"><code>{toolId}-selected(panel)</code></h5> + </dt> + <dd>A tool has been selected. The parameter is a {{anch("ToolPanel")}} object.</dd> + <dt> + <h5 id="toolId-destroy(panel)"><code>{toolId}-destroy(panel)</code></h5> + </dt> + <dd>A tool is about to be destroyed. The parameter is a {{anch("ToolPanel")}} object.</dd> + <dt> + <h5 id="destroy"><code>destroy</code></h5> + </dt> + <dd>The <code>Toolbox</code> is about to be destroyed.</dd> + <dt> + <h5 id="destroyed"><code>destroyed</code></h5> + </dt> + <dd>The <code>Toolbox</code> has been destroyed.</dd> +</dl> + +<h3 id="ToolDefinition">ToolDefinition</h3> + +<p>A <code>ToolDefinition</code> object contains all the required information for a tool to be shown in the toolbox.</p> + +<h4 id="Methods">Methods</h4> + +<dl> + <dt> + <h5 id="isTargetSupported(target)"><code>isTargetSupported(target)</code></h5> + </dt> + <dd>A method that is called during toolbox construction to check if the tool supports debugging the given target.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>target {Target} - </em></code>The target to check.<br> + <br> + <strong>Return value:</strong><br> + A boolean indicating if the tool supports the given target.</dd> + <dt> + <h5 id="build(window_toolbox)"><code>build(window, toolbox)</code></h5> + </dt> + <dd>A method that builds the {{anch("ToolPanel")}} for this tool.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>window {Window} - </code></em>The {{domxref("Window")}} object for frame the tool is being built into.<br> + <em><code>toolbox {Toolbox} - </code></em>The {{anch("Toolbox")}} the tool is being built for.<br> + <br> + <strong>Return value:</strong><br> + A {{anch("ToolPanel")}} for the tool.</dd> + <dt> + <h5 id="onKey(panel_toolbox)"><code>onKey(panel, toolbox)</code></h5> + </dt> + <dd><strong>Optional.</strong> A method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.<br> + <br> + <strong>Parameters:</strong><br> + <code><em>panel {ToolPanel} - </em></code>The {{anch("ToolPanel")}} for the tool.<br> + <em><code>toolbox {Toolbox} - </code></em>The toolbox for the shortcut was triggered for.<br> + <br> + <strong>Return value:</strong><br> + Undefined.</dd> +</dl> + +<h4 id="Properties">Properties</h4> + +<p>The ToolDefinition object can contain following properties. Most of them are optional and can be used to customize the presense of the tool in the Browser and the Toolbox.</p> + +<dl> + <dt> + <h5 id="id"><code>id</code></h5> + </dt> + <dd><strong>String, required.</strong> An unique identifier for the tool. It must be a valid id for an HTML {{domxref("Element")}}.</dd> + <dt> + <h5 id="url"><code>url</code></h5> + </dt> + <dd><strong>String, required.</strong> An URL of the panel document.</dd> + <dt> + <h5 id="label"><code>label</code></h5> + </dt> + <dd><strong>String, optional.</strong> The tool's name. If undefined the <code>icon</code> should be specified.</dd> + <dt> + <h5 id="tooltip"><code>tooltip</code></h5> + </dt> + <dd><strong>String, optional.</strong> The tooltip for the tool's tab.</dd> + <dt> + <h5 id="panelLabel"><code>panelLabel</code></h5> + </dt> + <dd><strong>String, optional.</strong> An accessibility label for the panel.</dd> + <dt> + <h5 id="ordinal"><code>ordinal</code></h5> + </dt> + <dd><strong>Integer, optional.</strong> The position of the tool's tab within the toolbox. <strong>Default: </strong>99</dd> + <dt> + <h5 id="visibilityswitch"><code>visibilityswitch</code></h5> + </dt> + <dd><strong>String, optional.</strong> A preference name that controls the visiblity of the tool. <strong>Default: </strong><code>devtools.{id}.enabled</code></dd> + <dt> + <h5 id="icon"><code>icon</code></h5> + </dt> + <dd><strong>String, optional.</strong> An URL for the icon to show in the toolbox tab. If undefined the label should be defined.</dd> + <dt> + <h5 id="highlightedicon"><code>highlightedicon</code></h5> + </dt> + <dd><strong>String, optional.</strong> An URL for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). <strong>Default:</strong> <code>{icon}</code></dd> + <dt> + <h5 id="iconOnly"><code>iconOnly</code></h5> + </dt> + <dd><strong>Boolean, optional.</strong> If true, the label won't be shown in the tool's tab. <strong>Default:</strong> false</dd> + <dt> + <h5 id="invertIconForLightTheme"><code>invertIconForLightTheme</code></h5> + </dt> + <dd><strong>Boolean, optional.</strong> If true the colors of the icon will be inverted for the light theme. <strong>Default:</strong> false</dd> + <dt> + <h5 id="key"><code>key</code></h5> + </dt> + <dd><strong>String, optional.</strong> The key used for keyboard shortcut. Either {{XULAttr("key")}} or {{XULAttr("keycode")}} value.</dd> + <dt> + <h5 id="modifiers"><code>modifiers</code></h5> + </dt> + <dd><strong>String, optional.</strong> {{XULAttr("modifiers", "Modifiers")}} for the keyboard shortcut.</dd> + <dt> + <h5 id="preventClosingOnKey"><code>preventClosingOnKey</code></h5> + </dt> + <dd><strong>Boolean, optional.</strong> If true the tool won't close if its keybinding is pressed while it is active. <strong>Default:</strong> false</dd> + <dt> + <h5 id="inMenu"><code>inMenu</code></h5> + </dt> + <dd><strong>Boolean, optional.</strong> If true the tool will be shown in the Developer Menu. <strong>Default:</strong> false</dd> + <dt> + <h5 id="menuLabel"><code>menuLabel</code></h5> + </dt> + <dd><strong>String, optional.</strong> A label for the Developer Menu item. <strong>Default:</strong> <code>{label}</code></dd> + <dt> + <h5 id="accesskey"><code>accesskey</code></h5> + </dt> + <dd><strong>String, optional.</strong> {{XULAttr("accesskey")}} for the Developer Menu {{XULElem("menuitem")}}.</dd> +</dl> + +<h4 id="Example">Example</h4> + +<p>Here's a minimal definition for a tool.</p> + +<pre class="brush: js"><code>let def = { + id: "my-tool", + label: "My Tool", + icon: "chrome://browser/skin/devtools/tool-webconsole.svg", + url: "about:blank", + isTargetSupported: target => true, + build: (window, toolbox) => new MyToolPanel(window, toolbox) +};</code> + +// Register it. +gDevTools.registerTool(def); +</pre> + +<h3 id="TargetType">TargetType</h3> + +<p>FIXME:</p> + +<h3 id="HostType">HostType</h3> + +<p>FIXME</p> + +<h3 id="ToolPanel">ToolPanel</h3> + +<p>The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that <code>ToolDefinition.build()</code> returns should implement the methods described below.</p> + +<h4 id="Methods_2">Methods</h4> + +<dl> + <dt> + <h5 id="open()"><code>open()</code></h5> + </dt> + <dd><strong>Optional</strong>. A method that can be used to perform asynchronous initialization. If the method returns a {{domxref("Promise")}}, many operations (e.g. {{anch("showToolbox(target_toolId_hostType_hostOptions)", "gDevTools.showToolbox()")}} or <code>toolbox.selectTool()</code>) and events (e.g. {{anch("toolbox-ready(toolbox)", "toolbox-ready")}}) are delayed until the promise has been fulfilled.<br> + <br> + <strong>Return value:</strong><br> + The method should return a {{domxref("Promise")}} that is resolved with the <code>ToolPanel</code> object once it's ready to be used.</dd> + <dt> + <h5 id="destroy()_2"><code>destroy()</code></h5> + </dt> + <dd> + <p>A method that is called when the toolbox is closed or the tool is unregistered. If the tool needs to perform asynchronous operations during destruction the method should return a {{domxref("Promise")}} that is resolved once the process is complete.</p> + + <p><strong>Return value:</strong><br> + A {{domxref("Promise")}} if the function performs asynchronous operations, otherwise <code>undefined</code>.</p> + </dd> +</dl> + +<h4 id="Example_2">Example</h4> + +<p>Here's a basic template for a ToolPanel implementation.</p> + +<pre class="brush: js"><code>// In the ToolDefintion object, do +// build: (window, target) => new MyPanel(window, target), + +function MyPanel(window, target) { + // The window object that has loaded the URL defined in the ToolDefinition + this.window = window; + // The Target this toolbox is debugging. + this.target = target; + + // Do synchronous initialization here. + window.document.body.addEventListener("click", this.handleClick); +} + +MyPanel.prototype = { + open: function() { + // Any asynchronous operations should be done here. + return this.doSomethingAsynchronous() + .then(() => this); + }, + + destroy: function() { + // Synchronous destruction. + this.window.document.body.removeEventListener("click", this.handleClick); + + // Async destruction. + return this.destroySomethingAsynchronosly() + .then(() => console.log("destroyed")); + }, + + handleClick: function(event) { + console.log("Clicked", event.originalTarget); + }, +};</code> +</pre> + +<h3 id="EventEmitter">EventEmitter</h3> + +<p><code>EventEmitter</code> is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.</p> + +<p>When an event is emitted on the <code>EventEmitter</code>, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.</p> + +<div class="note"> +<p>Note: Some components use Add-on SDK event module instead of the DevTools EventEmitter. Unfortunately, their API's are a bit different and it's not always evident which one a certain component is using. The main differences between the two modules are that the first parameter for Add-on SDK events is the first payload argument instead of the event name and the <code>once</code> method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.</p> +</div> + +<h4 id="Methods_3">Methods</h4> + +<p>The following methods are available on objects that have been decorated with the <code>EventEmitter</code> interface.</p> + +<dl> + <dt> + <h5 id="emit(eventName_...extraArguments)"><code>emit(eventName, ...extraArguments)</code></h5> + </dt> + <dd>Emits an event with the given name to this object.<br> + <br> + <strong>Parameters:</strong><br> + <em><code>eventName {String} - </code></em>The name of the event.<br> + <code><em>extraArguments {</em>...<em>Any} - </em></code>Extra arguments that are passed to the listeners.</dd> + <dt> + <h5 id="on(eventName_listener)"><code>on(eventName, listener)</code></h5> + </dt> + <dd>Adds a listener for the given event.</dd> + <dt> + <h5 id="off(eventName_listener)"><code>off(eventName, listener)</code></h5> + </dt> + <dd>Removes the previously added listener from the event.</dd> + <dt> + <h5 id="once(eventName_listener)"><code>once(eventName, listener)</code></h5> + </dt> + <dd>Adds a listener for the event that is removed after it has been emitted once.<br> + <br> + <strong>Return value:</strong><br> + A {{domxref("Promise")}} that is fulfilled with the first extra argument for the event when then event is emitted. If the event contains multiple payload arguments, the rest are discarded and can only be received by providing the listener function to this method.</dd> +</dl> + +<h4 id="Examples">Examples</h4> + +<p>Here's a few examples using the {{anch("gDevTools")}} object.</p> + +<pre class="brush: js"><code>let onInit = (eventName, toolbox, netmonitor) => console.log("Netmonitor initialized!"); + +// Attach a listener. +gDevTools.on("netmonitor-init", onInit); + +// Remove a listener. +gDevTools.off("netmonitor-init", onInit); + +// Attach a one time listener. +gDevTools.once("netmonitor-init", (eventName, toolbox, netmonitor) => { + console.log("Network Monitor initialized once!", toolbox, netmonitor); +}); + +// Use the Promise returned by the once method. +gDevTools.once("netmonitor-init").then(toolbox => { + // Note that the second argument is not available here. + console.log("Network Monitor initialized to toolbox", toolbox); +});</code> +</pre> + +<h3 id="ToolSidebar">ToolSidebar</h3> + +<p>To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:</p> + +<pre class="line"><code class="brush: html"> <span class="nt"><splitter</span> <span class="na">class=</span><span class="s">"devtools-side-splitter"</span><span class="nt">/></span></code> +<code> <span class="nt"><tabbox</span> <span class="na">id=</span><span class="s">"mytool-sidebar"</span> <span class="na">class=</span><span class="s">"devtools-sidebar-tabs"</span> <span class="na">hidden=</span><span class="s">"true"</span><span class="nt">></span></code> +<code> <span class="nt"><tabs/></span></code> +<code> <span class="nt"><tabpanels</span> <span class="na">flex=</span><span class="s">"1"</span><span class="nt">/></span></code> +<code> <span class="nt"></tabbox></span></code></pre> + +<div class="line"> </div> + +<div class="line">A sidebar is composed of tabs. Each tab will hold an iframe. For example, in the Inspector, there are 3 tabs (Computed View, Rule View, Layout View). The user can select the tab he wants to see.</div> + +<div class="line"> </div> + +<div class="line">If the availability of the tabs depends on some tool-related conditions, we might want to not let the user select a tab. This API provides methods to hide the tabstripe. For example, in the Web Console, there are 2 views (Network View and Object View). These views are only available in certain conditions controlled by the WebConsole code. So it's up the WebConsole the hide and show the sidebar, and select the correct tab.</div> + +<div class="line"> </div> + +<div class="line">If the loaded document exposes a <code>window.setPanel(ToolPanel)</code> function, the sidebar will call it once the document is loaded.</div> + +<div class="line"> </div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Method</th> + <th>Description</th> + </tr> + <tr> + <td><code>new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)</code></td> + <td>ToolSidebar constructor</td> + </tr> + <tr> + <td><code>void addTab(tabId, url, selected=false)</code></td> + <td>Add a tab in the sidebar</td> + </tr> + <tr> + <td><code>void select(tabId)</code></td> + <td>Select a tab</td> + </tr> + <tr> + <td><code>void hide()</code></td> + <td>Hide the sidebar</td> + </tr> + <tr> + <td><code>void show()</code></td> + <td>Show the sidebar</td> + </tr> + <tr> + <td><code>void toggle()</code></td> + <td>Toggle the sidebar</td> + </tr> + <tr> + <td><code>void getWindowForTab(tabId)</code></td> + <td>Get the iframe containing the tab content</td> + </tr> + <tr> + <td><code>tabId getCurrentTabID()</code></td> + <td>Return the id of tabId of the current tab</td> + </tr> + <tr> + <td><code>tabbox getTab(tabId)</code></td> + <td>Return a tab given its id</td> + </tr> + <tr> + <td><code>destroy()</code></td> + <td>Destroy the ToolSidebar object</td> + </tr> + <tr> + <th>Events</th> + <th>Description</th> + </tr> + <tr> + <td><code>new-tab-registered</code></td> + <td>A new tab has been added</td> + </tr> + <tr> + <td><code>{tabId}-ready</code></td> + <td>Tab is loaded and can be used</td> + </tr> + <tr> + <td><code>{tabId}-selected</code></td> + <td>Tab has been selected and is visible</td> + </tr> + <tr> + <td><code>{tabId}-unselected</code></td> + <td>Tab has been unselected and is not visible</td> + </tr> + <tr> + <td><code>show</code></td> + <td>The sidebar has been opened.</td> + </tr> + <tr> + <td><code>hide</code></td> + <td>The sidebar has been closed.</td> + </tr> + </tbody> +</table> + +<h2 id="Examples_2">Examples</h2> + +<p>Register a tool</p> + +<pre class="brush: js">gDevTools.registerTool({ + // FIXME: missing key related properties. + id: "inspector", + icon: "chrome://browser/skin/devtools/inspector-icon.png", + url: "chrome://browser/content/devtools/inspector/inspector.xul", + get label() { + let strings = Services.strings.createBundle("chrome://browser/locale/devtools/inspector.properties"); + return strings.GetStringFromName("inspector.label"); + }, + + isTargetSupported: function(target) { + return !target.isRemote; + }, + + build: function(iframeWindow, toolbox, node) { + return new InspectorPanel(iframeWindow, toolbox, node); + } +}); +</pre> + +<p>Open a tool, or select it if the toolbox is already open:</p> + +<pre class="brush: js">let target = TargetFactory.forTab(gBrowser.selectedTab); +let toolbox = gDevTools.openToolbox(target, null, "inspector"); + +toolbox.once("inspector-ready", function(event, panel) { + let inspector = toolbox.getToolPanels().get("inspector"); + inspector.selection.setNode(target, "browser-context-menu"); +}); +</pre> + +<p>Add a sidebar to an existing tool:</p> + +<pre class="brush: js">let sidebar = new ToolSidebar(xulTabbox, toolPanel, "toolId"); +sidebar.addTab("tab1", "chrome://browser/content/.../tab1.xhtml", true); +sidebar.addTab("tab2", "chrome://browser/content/.../tab2.xhtml", false); +sidebar.show(); +</pre> diff --git a/files/ja/tools/devtoolscolors/index.html b/files/ja/tools/devtoolscolors/index.html new file mode 100644 index 0000000000..fc375c4720 --- /dev/null +++ b/files/ja/tools/devtoolscolors/index.html @@ -0,0 +1,343 @@ +--- +title: DevToolsカラー +slug: Tools/DevToolsColors +tags: + - CSS +translation_of: Tools/DevToolsColors +--- +<div>{{ToolsSidebar}}</div> + +<div class="warning"> +<p>これらの値のいずれかを変更する必要がある場合は、<code>/browser/themes/*/devtools/</code>の中のCSSコードを変更する必要があります。それに応じてDevToolsのバグを報告してください。</p> +</div> + +<p class="summary"><span class="seoSummary">このチャートには、開発者ツールのダークテーマとライトテーマで実装されている色とCSS変数が一覧で表示されています。</span></p> + +<table> + <thead> + <tr> + <th> </th> + <th>ダークテーマ</th> + <th>ライトテーマ</th> + <th>CSS 変数</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="3"> + <h3 id="Chrome_Colors">Chrome Colors</h3> + </th> + <th> </th> + </tr> + <tr> + <th>タブツールバー</th> + <td> + <div class="swatch" style="background: #252c33;"> </div> + + <p>#252c33<br> + rgba(37, 44, 51, 1)</p> + </td> + <td> + <div class="swatch" style="background: #ebeced;"> </div> + #ebeced<br> + rgba(235, 236, 237, 1)</td> + <td>--theme-tab-toolbar-background</td> + </tr> + <tr> + <th>ツールバー</th> + <td> + <div class="swatch" style="background: #343c45;"> </div> + #343c45<br> + rgba(52, 60, 69, 1)</td> + <td> + <div class="swatch" style="background: #f0f1f2;"> </div> + #f0f1f2<br> + rgba(240, 241, 242, 1)</td> + <td>--theme-toolbar-background</td> + </tr> + <tr> + <th>選択箇所の背景</th> + <td> + <div class="swatch" style="background: #1d4f73;"> </div> + #1d4f73<br> + rgba(29, 79, 115, 1)</td> + <td> + <div class="swatch" style="background: #4c9ed9;"> </div> + #4c9ed9<br> + rgba(76, 158, 217, 1)</td> + <td>--theme-selection-background</td> + </tr> + <tr> + <th>選択したテキストの色</th> + <td> + <div class="swatch" style="background: #f5f7fa;"> </div> + #f5f7fa<br> + rgba(245, 247, 250, 1)</td> + <td> + <div class="swatch" style="background: #f5f7fa;"> </div> + #f5f7fa<br> + rgba(245, 247, 250, 1)</td> + <td>--theme-selection-color</td> + </tr> + <tr> + <th>スプリッタ</th> + <td> + <div class="swatch" style="background: #000000;"> </div> + #000000<br> + rgba(0, 0, 0, 1)</td> + <td> + <div class="swatch" style="background: #aaaaaa;"> </div> + #aaaaaa<br> + rgba(170, 170, 170, 1)</td> + <td>--theme-splitter-color</td> + </tr> + <tr> + <th>コメント</th> + <td> + <div class="swatch" style="background: #5c6773;"> </div> + + <p>#5c6773<br> + rgba(92, 103, 115, 1)</p> + </td> + <td> + <div class="swatch" style="background: #747573;"> </div> + + <p>#747573<br> + rgba(116, 117, 115, 1)</p> + </td> + <td>--theme-comment</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="3"> + <h3 id="コンテンツの色">コンテンツの色</h3> + </th> + <th> </th> + </tr> + <tr> + <th>背景 - ボディ</th> + <td> + <div class="swatch" style="background: #14171a;"> </div> + #14171a<br> + rgba(17, 19, 21, 1)</td> + <td> + <div class="swatch" style="background: #fcfcfc;"> </div> + #fcfcfc<br> + rgba(252, 252, 252, 1)</td> + <td>--theme-body-background</td> + </tr> + <tr> + <th>背景 - サイドバー</th> + <td> + <div class="swatch" style="background: #181d20;"> </div> + #181d20<br> + rgba(24, 29, 32, 1)</td> + <td> + <div class="swatch" style="background: #f7f7f7;"> </div> + #f7f7f7<br> + rgba(247, 247, 247, 1)</td> + <td>--theme-sidebar-background</td> + </tr> + <tr> + <th>背景 - 注意</th> + <td> + <div class="swatch" style="background: #b28025;"> </div> + #b28025<br> + rgba(178, 128, 37, 1)</td> + <td> + <div class="swatch" style="background: #e6b064;"> </div> + #e6b064<br> + rgba(230, 176, 100, 1)</td> + <td>--theme-contrast-background</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="3"> + <h3 id="テキストの色">テキストの色</h3> + </th> + <th> </th> + </tr> + <tr> + <th>ボディテキスト</th> + <td> + <div class="swatch" style="background: #8fa1b2;"> </div> + #8fa1b2<br> + rgba(143, 161, 178, 1)</td> + <td> + <div class="swatch" style="background: #18191a;"> </div> + #18191a<br> + rgba(24, 25, 26, 1)</td> + <td>--theme-body-color</td> + </tr> + <tr> + <th>フォアグラウンド (テキスト) - グレー</th> + <td> + <div class="swatch" style="background: #b6babf;"> </div> + #b6babf<br> + rgba(182, 186, 191, 1)</td> + <td> + <div class="swatch" style="background: #585959;"> </div> + #585959<br> + rgba(88, 89, 89, 1)</td> + <td>--theme-body-color-alt</td> + </tr> + <tr> + <th>コンテンツ (テキスト) - ハイコントラスト</th> + <td> + <div class="swatch" style="background: #a9bacb;"> </div> + #a9bacb<br> + rgba(169, 186, 203, 1)</td> + <td> + <div class="swatch" style="background: #292e33;"> </div> + #292e33<br> + rgba(41, 46, 51, 1)</td> + <td>--theme-content-color1</td> + </tr> + <tr> + <th>コンテンツ (テキスト) - グレー</th> + <td> + <div class="swatch" style="background: #8fa1b2;"> </div> + #8fa1b2<br> + rgba(143, 161, 178, 1)</td> + <td> + <div class="swatch" style="background: #8fa1b2;"> </div> + #8fa1b2<br> + rgba(143, 161, 178, 1)</td> + <td>--theme-content-color2</td> + </tr> + <tr> + <th>コンテンツ (テキスト) - ダークグレー</th> + <td> + <div class="swatch" style="background: #667380;"> </div> + #667380<br> + rgba(102, 115, 128, 1)</td> + <td> + <div class="swatch" style="background: #667380;"> </div> + #667380<br> + rgba(102, 115, 128, 1)</td> + <td>--theme-content-color3</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="3"> + <h3 id="ハイライトカラー">ハイライトカラー</h3> + </th> + <th> </th> + </tr> + <tr> + <th>青</th> + <td> + <div class="swatch" style="background: #46afe3;"> </div> + #46afe3<br> + rgba(70, 175, 227, 1)</td> + <td> + <div class="swatch" style="background: #0088cc;"> </div> + #0088cc<br> + rgba(0, 136, 204, 1)</td> + <td>--theme-highlight-blue</td> + </tr> + <tr> + <th>紫</th> + <td> + <div class="swatch" style="background: #6b7abb;"> </div> + #6b7abb<br> + rgba(107, 122, 187, 1)</td> + <td> + <div class="swatch" style="background: #5b5fff;"> </div> + #5b5fff<br> + rgba(91, 95, 255, 1)</td> + <td>--theme-highlight-purple</td> + </tr> + <tr> + <th>ピンク</th> + <td> + <div class="swatch" style="background: #df80ff;"> </div> + #df80ff<br> + rgba(223, 128, 255, 1)</td> + <td> + <div class="swatch" style="background: #b82ee5;"> </div> + #b82ee5<br> + rgba(184, 46, 229, 1)</td> + <td>--theme-highlight-pink</td> + </tr> + <tr> + <th>赤</th> + <td> + <div class="swatch" style="background: #eb5368;"> </div> + #eb5368<br> + rgba(235, 83, 104, 1)</td> + <td> + <div class="swatch" style="background: #ed2655;"> </div> + #ed2655<br> + rgba(237, 38, 85, 1)</td> + <td>--theme-highlight-red</td> + </tr> + <tr> + <th>オレンジ</th> + <td> + <div class="swatch" style="background: #d96629;"> </div> + #d96629<br> + rgba(217, 102, 41, 1)</td> + <td> + <div class="swatch" style="background: #f13c00;"> </div> + #f13c00<br> + rgba(241, 60, 0, 1)</td> + <td>--theme-highlight-orange</td> + </tr> + <tr> + <th>ライトオレンジ</th> + <td> + <div class="swatch" style="background: #d99b28;"> </div> + #d99b28<br> + rgba(217, 155, 40, 1)</td> + <td> + <div class="swatch" style="background: #d97e00;"> </div> + #d97e00<br> + rgba(217, 126, 0, 1)</td> + <td>--theme-highlight-lightorange</td> + </tr> + <tr> + <th>緑</th> + <td> + <div class="swatch" style="background: #70bf53;"> </div> + #70bf53<br> + rgba(112, 191, 83, 1)</td> + <td> + <div class="swatch" style="background: #2cbb0f;"> </div> + #2cbb0f<br> + rgba(44, 187, 15, 1)</td> + <td>--theme-highlight-green</td> + </tr> + <tr> + <th>ブルーグレー</th> + <td> + <div class="swatch" style="background: #5e88b0;"> </div> + #5e88b0<br> + rgba(94, 136, 176, 1)</td> + <td> + <div class="swatch" style="background: #0072ab;"> </div> + #0072ab<br> + rgba(0, 114, 171, 1)</td> + <td>--theme-highlight-bluegrey</td> + </tr> + <tr> + <th>黄</th> + <td> + <div class="swatch" style="background: #ffffb4;"> </div> + #ffffb4<br> + rgba(255, 255, 180, 1)</td> + <td> + <div class="swatch" style="background: #ffffb4;"> </div> + #ffffb4<br> + rgba(255, 255, 180, 1)</td> + <td>--theme-highlight-yellow</td> + </tr> + </tbody> +</table> + +<div class="warning"> +<p>まだ修正されていません。進行状況については、<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916766">bug 916766</a>を参照してください。</p> +</div> diff --git a/files/ja/tools/dom_property_viewer/index.html b/files/ja/tools/dom_property_viewer/index.html new file mode 100644 index 0000000000..d222a270e2 --- /dev/null +++ b/files/ja/tools/dom_property_viewer/index.html @@ -0,0 +1,46 @@ +--- +title: DOM プロパティビューアー +slug: Tools/DOM_Property_Viewer +tags: + - DOM + - Tools + - Web Development +translation_of: Tools/DOM_Property_Viewer +--- +<div>{{ToolsSidebar}}</div> + +<div class="blockIndicator geckoVersionNote">DOM プロパティビューアーは Firefox 48 の新機能です。これはデフォルトで無効にしています。<a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション</a> で有効化できます。</div> + +<p>DOM プロパティビューアーは、現在のページまたは <a href="/ja/docs/tools/Working_with_iframes">選択したフレーム</a> の {{domxref("window")}} オブジェクトから始まる {{Glossary("DOM")}} のプロパティを、展開可能なツリー構造で調査できるツールです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13098/DOM%20Inspector.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 843px;"></p> + +<h2 id="Enabling_the_DOM_Property_Viewer" name="Enabling_the_DOM_Property_Viewer">DOM プロパティビューアーを有効化する</h2> + +<p>DOM プロパティビューアーはデフォルトで無効化しています。<a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション </a>を開いて、"標準の Firefox 開発ツール" の "DOM" にチェックを入れると有効化されます。</p> + +<h2 id="Opening_the_DOM_Property_Viewer" name="Opening_the_DOM_Property_Viewer">DOM プロパティビューアーを開く</h2> + +<p>有効化すると、Firefox メニューパネル (メニューバーを表示している場合や macOS ではツールメニュー配下) の Web 開発サブメニュー内にある "DOM" を選択する、あるいはキーボードショートカット <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>W</kbd> を押下して DOM プロパティビューアーを開くことができます。</p> + +<p>DOM プロパティビューアーがアクティブになっている<a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox"> ツールボックス </a>が、ブラウザウィンドウの下部に現れます。ツールボックスでは "DOM" という名前です。</p> + +<h2 id="DOM_Property_Viewer_user_interface" name="DOM_Property_Viewer_user_interface">DOM プロパティビューアーのユーザインターフェイス</h2> + +<h3 id="DOM_tree" name="DOM_tree">DOM ツリー</h3> + +<p>DOM のさまざまなプロパティを、展開可能なツリーとして表示します。左側にプロパティの名称、右側にプロパティの値を表示します。オブジェクトのプロパティや配列のアイテムは、3 個まで表示します。プロパティに多くの要素が存在する場合は "more..." という注釈がつきます。すべての要素を確認するには、プロパティの項目をクリックしなければなりません。錠前のアイコンは、書き込み不可のプロパティであることを示します。</p> + +<h3 id="Refreshing_the_display" name="Refreshing_the_display">表示内容を更新する</h3> + +<p>DOM が変化したときは、<em>Refresh</em> ボタンを押して表示内容を更新できます:</p> + +<p><img alt="Button to update the DOM Inspector display" src="https://mdn.mozillademos.org/files/13102/DOM%20Inspector%20Refresh%20button.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 852px;"></p> + +<h3 id="Filtering" name="Filtering">フィルタリング</h3> + +<p>ツールバー内に、検索ボックスがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13100/DOM%20Inspector%20search%20box.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 851px;"></p> + +<p>これは、検索文字列にマッチするアイテムのみ表示するようフィルタリングします。名称に検索文字列を含むアイテムがマッチします。マッチングの際は大文字・小文字を区別します。</p> diff --git a/files/ja/tools/eyedropper/index.html b/files/ja/tools/eyedropper/index.html new file mode 100644 index 0000000000..37f9d29af4 --- /dev/null +++ b/files/ja/tools/eyedropper/index.html @@ -0,0 +1,42 @@ +--- +title: スポイト +slug: Tools/Eyedropper +translation_of: Tools/Eyedropper +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>スポイトは Firefox 31 の新機能です。</p> +</div> + +<p>スポイトツールで、ページ内から色を選択することができます。これはページ上で拡大鏡のように動作して、ピクセル単位の精度で選択することができます。拡大鏡の下には、現在選択しているピクセルの色の値を、<a href="/ja/docs/Tools/Settings#Inspector">オプション > 調査 </a>で選択した色単位で表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="display: block; height: 204px; margin-left: auto; margin-right: auto; width: 305px;">このツールは以下 2 種類の用途で使用できます:</p> + +<ul> + <li>ページから色を選択して、クリップボードにコピーする</li> + <li>インスペクターのルールビューにある色の値を、ページから選択した色に変更する</li> +</ul> + +<h2 id="Copying_a_color_to_the_clipboard" name="Copying_a_color_to_the_clipboard">色をクリックボードにコピーする</h2> + +<p>Eyedropper は 2 種類の方法で開くことができます:</p> + +<ul> + <li>"Web 開発" メニューで "スポイト" を選択する</li> + <li><a href="/ja/docs/Tools/Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> でスポイトボタンをクリックする (ただし、このボタンはデフォルトで表示されていません。<a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション </a>で "ページから色を選択します" にチェックを入れなければなりません)</li> +</ul> + +<p>ページ上でマウスポインターを動かすのに応じて、スポイトで選択中の色の値が変わります。クリックすると、現在の色の値をクリップボードにコピーします。</p> + +<p>{{EmbedYouTube("xf2uk6UyRB8")}}</p> + +<h2 id="Changing_a_color_value_in_the_Rules_view" name="Changing_a_color_value_in_the_Rules_view">ルールビューで色の値を変更する</h2> + +<p>インスペクターのルールビューにある色の値では、隣に色のサンプルを表示しています。色のサンプルをクリックすると<a href="/ja/docs/Tools/Page_Inspector#Color_picker">カラーピッカー</a>がポップアップします。Firefox 31 より、ポップアップにスポイトのアイコンがあります。このアイコンをクリックすると、スポイトツールが起動します。</p> + +<p>スポイトツールでクリックすると、ルールビューの色がスポイトで選択した色に設定されます。</p> + +<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<h2 id="Keyboard_shortcuts" name="Keyboard_shortcuts">キーボードショートカット</h2> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "eyedropper")}}</p> diff --git a/files/ja/tools/firefox_os_1.1_simulator/index.html b/files/ja/tools/firefox_os_1.1_simulator/index.html new file mode 100644 index 0000000000..407f80f0bd --- /dev/null +++ b/files/ja/tools/firefox_os_1.1_simulator/index.html @@ -0,0 +1,349 @@ +--- +title: Firefox OS 1.1 Simulator +slug: Tools/Firefox_OS_1.1_Simulator +translation_of: Tools/Firefox_OS_1.1_Simulator +--- +<div>{{ToolsSidebar}}</div><div id="doc-content"> +<div class="page-content boxed"> +<div class="note"> +<p>このページでは、"旧版" の Firefox OS Simulator について説明します。これは Firefox 1.1 向けのアプリを開発している場合にのみ使用すべきであり、また Firefox 24 または 25 にのみインストール可能です。</p> + +<p>Firefox OS 1.2 以降向けのアプリを開発している場合は、代わりに<a href="/ja/docs/Firefox_OS/Using_the_App_Manager">アプリマネージャ</a>を使用しなければなりません。</p> + +<p>支援が必要である場合は、<a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools メーリングリスト</a> または <a href="irc://irc.mozilla.org/#devtools">irc.mozilla.org の #devtools</a> で質問してください。</p> +</div> + +<p>Firefox OS Simulator アドオンで、デスクトップ環境にて <a href="/ja/docs/Apps" title="Apps">Firefox OS アプリ</a> のテストやデバッグが可能になります。Simulator では、実際のデバイスを使うよりも Code-Test-Debug のサイクルが高速化します。また当然ながら、Simulator を使うために実際のデバイスは必要ありません。</p> + +<p>本質的に、Simulator アドオンを構成するものは以下のとおりです:</p> + +<ul> + <li><strong>Simulator</strong>: これには <a href="/ja/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Firefox OS デスクトップクライアント</a>が含まれています。これはデスクトップ環境で実行する、<a href="/ja/docs/Mozilla/Firefox_OS" title="Mozilla/Firefox_OS">Firefox OS</a> の高水準層バージョンです。Simulator には、標準的な Firefox OS デスクトップビルドには存在しない<a href="#Simulator-toolbar" title="#Simulator-toolbar">付加的なエミュレーション機能</a>も含まれています。</li> + <li><strong>Dashboard</strong>: Simulator の開始・終了やアプリのインストール・アンインストール・デバッグを可能にする、Firefox ブラウザで提供するツールです。また Dashboard は、アプリを実際のデバイスにプッシュしたり、アプリマニフェストについて一般的な問題をチェックしたりすることもできます。</li> +</ul> + +<p>以下のスクリーンショットで、Simulator を使用したデバッグセッションを示しています。</p> + +<p>Dashboard は右上の、Firefox のタブ内で実行しているものです。ここでは "Where am I?" という名前のパッケージ型アプリを追加しました。左上では、Simulator アプリを実行しています。またデバッグツールを接続しており、それは下部にあるパネルです。コンソールペインに、アプリに関するメッセージが表示されているのをご覧いただけるでしょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p> + +<p>本ガイドでは以下のトピックを扱います:</p> + +<ul> + <li><a href="#Installing" title="#Installing">Simulator アドオンのインストール方法</a></li> + <li><a href="#Adding-updating-removing" title="#Adding-updating-removing">アプリを追加・削除・更新する方法</a></li> + <li><a href="#Manifest-validation" title="#Manifest-validation">マニフェストの検証</a></li> + <li><a href="#Running-the-Simulator" title="#Running-the-Simulator">Simulator の実行方法</a></li> + <li><a href="#Attaching-developer-tools" title="#Attaching-developer-tools">JS debugger などのデバッグツールを Simulator で実行しているアプリに接続する方法</a></li> + <li><a href="#Simulator-receipts" title="#Simulator-receipts">課金アプリ向けのテストレシートを取得する方法</a></li> + <li><a href="#Push-to-device" title="#Push-to-device">接続しているデバイスにアプリをプッシュする方法</a></li> + <li><a href="#Limitations" title="#Limitations">実際の Firefox OS デバイスに対する Simulator の制限事項</a></li> +</ul> + +<div class="note"> +<p>実際の Web アプリのデバッグに Simulator を使用する方法について示した、実践的な詳細説明については <a href="/ja/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Simulator Walkthrough</a> のページをご覧ください。</p> +</div> + +<h2 id="Installing_the_Simulator_add-on" name="Installing_the_Simulator_add-on"><a name="Installing">Simulator アドオンのインストール</a></h2> + +<p>Simulator は、Firefox のアドオンとしてパッケージ化および頒布しています。インストール方法は以下のとおりです:</p> + +<ol> + <li>Firefox で <a href="https://addons.mozilla.org/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/firefox/addon/firefox-os-simulator/">addons.mozilla.org 内の Simulator のページ</a>を訪れてください。</li> + <li>"Firefox に追加" をクリックしてください。</li> + <li>アドオンをダウンロードすると確認のメッセージが表示されますので、"今すぐインストール" をクリックしてください。</li> +</ol> + +<p>アドオンのサイズの都合上、インストール中に Firefox が数秒間フリーズしたり、"警告: 応答のないスクリプト" というタイトルのダイアログが表示される場合があります。ダイアログが表示された場合は、インストールが完了するまで待つために "処理を続行" をクリックしてください。これは Firefox 27 以降では表示されないでしょう。<br> + <br> + Simulator アドオンをインストールすると Firefox が定期的に新しいバージョンの確認を行い、自動的に更新します。</p> + +<p>Simulator をインストールすると Dashboard が自動的に開きますが、"Firefox" メニュー (または OS X や Linux では "ツール" メニュー) の "Web 開発" で "Firefox OS Simulator" を選択することで、いつでも Dashboard を開くことができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="display: block; margin-left: auto; margin-right: auto;"><br> + Dashboard は、アプリを Simulator に追加したり実行したりするために使用するツールです。以下のようなものです: <img alt="" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png"></p> + +<h2 id="Adding.2C_removing_and_refreshing_apps" name="Adding.2C_removing_and_refreshing_apps"><a name="Adding-updating-removing">アプリの追加・削除・更新</a></h2> + +<h3 id="Adding_apps" name="Adding_apps">アプリの追加</h3> + +<p><a href="/ja/docs/Apps/Packaged_apps" title="Apps/Packaged_apps">パッケージ型アプリ</a>を Simulator に追加するには、Dashboard を開いて "Add Directory" をクリックします。そして、アプリの<a href="/ja/docs/Apps/Manifest" title="Apps/Manifest">マニフェストファイル</a>を選択してください。<br> + <br> + ホスト型アプリを追加するには、"URL for page or manifest.webapp" と表示されているテキストボックスに URL を入力して "Add URL" をクリックしてください。URL がマニフェストを指している場合は、そのマニフェストが使用されます。そうでない場合は、Dashboard が当該 URL 向けのマニフェストを生成します: よって、URL を入力するだけで任意の Web サイトをアプリとして追加できます。<br> + <br> + アプリを追加すると、Dashboard がマニフェストファイルに対して一連のテストを行って、一般的な問題のチェックを行います。どのようなテストを行うかについて詳しくは、<a href="#Manifest-validation" title="#Manifest-validation">マニフェストの検証</a>の章をご覧ください。</p> + +<p>マニフェストの検証でアプリにエラーが発見されなければ、Dashboard は自動的に Simulator でアプリを実行します。</p> + +<h3 id="Managing_apps" name="Managing_apps">アプリの管理</h3> + +<p>アプリを追加すると、Manager 内のインストールされたアプリのリストに表示されます:<br> + <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br> + それぞれのエントリは、アプリに関する下記の情報を示します:</p> + +<ul> + <li>アプリの名前: マニフェストから取得します</li> + <li>アプリの種類: "Packaged"、"Hosted"、"Generated" のいずれかになります</li> + <li>アプリのマニフェストファイルへのリンク</li> + <li>マニフェストの検証結果</li> +</ul> + +<p>また、下記 4 つのコマンドもあります:</p> + +<ul> + <li><strong>"Refresh":</strong> アプリに何らかの変更を施した後に、Simulator 内のアプリを更新および再読み込みします。また Dashboard で、マニフェストの検証を再度実行します。アプリに変更を施しても、インストール済みアプリへ自動的には反映されません: 変更点を適用するために、アプリの更新が必要です。</li> + <li><strong>"Connect":</strong> 選択したアプリを、開発ツールに接続します。アプリを実行していない場合は、Dashboard が Simulator およびアプリを起動します。</li> + <li><strong>"Remove" ("X"):</strong> アプリを Simulator や Dashboard から削除します。Dashboard を開いている間は、このアクションを取り消すことができます。</li> + <li><strong>"Receipt":</strong> 課金アプリのレシート検証のテストを行います。テストしたいレシートの種類を選択すると、そのテストレシートとともにアプリを再インストールします。</li> +</ul> + +<div class="note"> +<p><strong>Simulator のウィンドウでアプリを更新</strong>: アプリを実行しているときに、<a href="#Simulator-menubar" title="#Simulator-menubar">メニューバーでの操作または割り当てられたショートカットキー</a>によって、Simulator のウィンドウで直接アプリを更新および再読み込みできます。</p> +</div> + +<h3 id="Manifest_validation" name="Manifest_validation"><a name="Manifest-validation">マニフェストの検証</a></h3> + +<p>マニフェストを与えると、Manager はマニフェストの検証テストをいくらか実行します。これは、3 つのカテゴリについて問題を報告します:</p> + +<ul> + <li>manifest errors: アプリのインストールや実行ができなくなる問題です。</li> + <li>manifest warnings: アプリの正常な動作を妨げる問題です。</li> + <li>simulator-specific warnings: アプリが使用している機能で、Simulator が未サポートであるものです。</li> +</ul> + +<p>アプリのエントリ内に、発生した問題の要約を表示します: 要約をクリックすると、詳細が表示されます。</p> + +<h4 id="Manifest_errors" name="Manifest_errors">Manifest errors</h4> + +<p>Dashboard は以下のような状況をエラーとして報告します。これを修正しなければ、当該アプリは Simulator で実行できないでしょう:</p> + +<ul> + <li>マニフェストに、必須のフィールド "name" がない。</li> + <li>マニフェストが正しい JSON ではない。</li> + <li>アプリはホスト型アプリであるが、マニフェスト内の <a href="/ja/docs/Apps/Manifest#type" title="Apps/Manifest#type">type</a> フィールドが <a href="/ja/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="Apps/Packaged_apps#Types_of_packaged_apps">"privileged" または "certified"</a> である。これはパッケージ型アプリでのみ有効。</li> + <li>一般的な appCache のエラー (パッケージ型アプリは appCache を使用できない、マニフェストファイルをリクエストすると HTTP リダイレクトあるいは HTTP エラーのステータスが返る)</li> +</ul> + +<p>以下は、"name" がないマニフェストを追加しようとしたときの結果です:<br> + <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p> + +<h4 id="Manifest_warnings" name="Manifest_warnings">Manifest warnings</h4> + +<p>Dashboard は、以下のマニフェストの問題を Warning として報告します:</p> + +<ul> + <li>アイコンがない。</li> + <li>アイコンが 128 ピクセルより小さい: Marketplace に提出するすべてのアプリは、少なくとも 128 ピクセル四方のアイコンが最低 1 個必要です。</li> + <li><a href="/ja/docs/Apps/Manifest#type" title="Apps/Manifest#type">type</a> フィールドを認識できない。</li> + <li>マニフェストで、認識できない<a href="/ja/docs/Apps/Manifest#permissions" title="Apps/Manifest#permissions">許可設定</a>を要求している。</li> + <li>マニフェストで、拒否されるであろう<a href="/ja/docs/Apps/Manifest#permissions" title="Apps/Manifest#permissions">許可設定</a>を要求している。</li> + <li>マニフェストで、アクセス許可を決められない<a href="/ja/docs/Apps/Manifest#permissions" title="Apps/Manifest#permissions">許可設定</a>を要求している。</li> +</ul> + +<h4 id="Simulator-specific_warnings" name="Simulator-specific_warnings">Simulator-specific warnings</h4> + +<p>最後に Manager は、Simulator で完全にはサポートしていない Firefox OS の機能を使用するアプリに対して、Warning を発します:</p> + +<ul> + <li><a href="/ja/docs/Apps/Manifest#type" title="Apps/Manifest#type">type</a> フィールドが "certified" ですが、Simulator は certified アプリを完全にはサポートしていません。</li> + <li>マニフェストで、Simulator が<a href="#Unsupported-APIs" title="#Unsupported-APIs">未サポート</a>の API を使用する<a href="/ja/docs/Apps/Manifest#permissions" title="Apps/Manifest#permissions">許可設定</a>を要求している。</li> +</ul> + +<h2 id="Running_the_Simulator" name="Running_the_Simulator"><a name="Running-the-Simulator">Simulator を実行する</a></h2> + +<p>Simulator を起動する方法は 2 通りあります:</p> + +<ul> + <li>アプリを追加したり、アプリ名の隣にある "Refresh" や "Connect" ボタンをクリックすると、Dashboard が自動的に Simulator でアプリを実行します。</li> + <li>Dashboard の左側にある "Stopped" という名前のボタンをクリックすると、Simulator のホームスクリーンがブートします。なお、あなたのアプリを実行するには操作が必要です。</li> +</ul> + +<p>どちらの方法でも、Simulator を実行すると "Stopped" という名前のボタンが緑色に変わり、名前が "Running" に変わります。Simulator を停止するには、このボタンをもう一度クリックしてください。<br> + <br> + Simulator は別のウィンドウとして表示され、シミュレーションするスクリーン領域が 320x480 ピクセルであるようなサイズになります。また、<a href="#Simulator-toolbar" title="#Simulator-toolbar">ウィンドウ下部のツールバー</a>と<a href="#Simulator-menubar" title="#Simulator-menubar">上部のメニューバー</a>で付加機能を提供します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>タッチイベントをシミュレーションするには、マウスボタンでクリックして、ボタンを押したままドラッグします。よってホームスクリーンで右から左へクリック アンド ドラッグを行うことで、組み込み済みのアプリと合わせてあなたが追加したアプリが表示されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p> + +<h3 id="Simulator_toolbar" name="Simulator_toolbar"><a name="Simulator-toolbar">Simulator ツールバー</a></h3> + +<p>ウィンドウ下部のツールバーには左から順に<strong>ホームボタン</strong>、<strong>スクリーン回転ボタン</strong>、<strong>Geolocation ボタン</strong>があります。</p> + +<ul> + <li><strong>ホームボタン</strong>を押すとホームスクリーンに移動します (あるいは、2秒間押し続けるとタスクリストを表示します)。</li> + <li><strong>スクリーン回転ボタン</strong>を押すと、デバイスの向きのポートレートとランドスケープを切り替えます。これは <a href="/ja/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="WebAPI/Detecting_device_orientation">orientationchange</a> イベントを生成します。</li> + <li><strong>Geolocation ボタン</strong>を押すと、現在の緯度・経度情報か独自の緯度・経度情報による位置情報の提供を問い合わせるダイアログが表示されます: この情報は <a href="/ja/docs/WebAPI/Using_geolocation" title="WebAPI/Using_geolocation">Geolocation API</a> を通して、アプリで利用できます。</li> +</ul> + +<p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="height: 309px; width: 520px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="height: 297px; width: 500px;"></a></p> + +<h3 id="Simulator_menubar" name="Simulator_menubar"><a name="Simulator-menubar"></a>Simulator メニューバー</h3> + +<p>Simulator 上部のメニューバーで、開発をより効率的にする有用なコマンドを利用できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p> + +<ul> + <li><strong>File -> Quit</strong> (<em>Ctrl/Cmd - Q</em>): Simulator をシャットダウンします。</li> + <li><strong>App -> Refresh</strong> (<em>Ctrl/Cmd - R</em>): 実行中のアプリを更新します。</li> +</ul> + +<p><strong>"App Refresh"</strong> コマンドのキーボードショートカットで、Web ページ開発のようにアプリを反復開発することができます:</p> + +<ul> + <li>コードを編集します (そして、必要であれば volo / yeoman / grunt などのビルドツールに戻ります)</li> + <li>Simulator で実行しているアプリを更新するために、キーボードショートカットを押下します。</li> +</ul> + +<div class="note"> +<p><strong>"Refresh App and Clear Data" 隠しショートカット:</strong> アプリ向けに Simulator が保存しているデータをクリアすることが役に立つ場合がありますので、Simulator には以下のデータをクリアするとともに実行中のアプリを更新する隠しショートカット <em>Shift - Ctrl/Cmd - R</em> があります:</p> + +<ul> + <li> + <p>localStorage / sessionStorage</p> + </li> + <li> + <p>Cookie</p> + </li> + <li> + <p>indexedDB</p> + </li> + <li> + <p>appCache</p> + </li> +</ul> +</div> + +<h2 id="Attaching_developer_tools" name="Attaching_developer_tools"><a name="Attaching-developer-tools">開発ツールの接続</a></h2> + +<p>アプリのデバッグを支援するため、Simulator に開発ツールを接続できます。現時点では <a href="/ja/docs/Tools/Debugger" title="Tools/Debugger">JavaScript デバッガ</a>、<a href="/ja/docs/Tools/Web_Console" title="Tools/Web_Console">Web コンソール</a>、<a href="/ja/docs/Tools/Style_Editor" title="Tools/Style_Editor">スタイルエディタ</a>、<a href="/ja/docs/Tools/Profiler" title="Tools/Profiler">プロファイラ</a>、<a href="/ja/docs/Tools/Network_Monitor" title="Tools/Network_Monitor">ネットワークモニタ</a>しか接続できませんが、より多くの<a href="/ja/docs/Tools/DevTools_Window" title="Tools/DevTools_Window">開発ツール</a>をサポートするよう作業中です。</p> + +<div class="geckoVersionNote"> +<p>一部のツールは Beta、Aurora、あるいは Nightly ビルドの Firefox のみで使用できます。</p> +</div> + +<p>開発ツールを Simulator に接続するには、アプリの <strong>"Connect"</strong> ボタンをクリックします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Dashboard が開発ツールボックスペインを Dashboard タブの下部に表示して、アプリをツールに接続します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Web_Console" name="Web_Console">Web コンソール</h3> + +<p>アプリはグローバルの <a href="/ja/docs/DOM/console" title="DOM/console">console</a> オブジェクトを使用してこのコンソールにログを出力できます。また、アプリによって生成される他のさまざまなメッセージも表示します: ネットワークリクエスト、CSS や JS の警告やエラー、セキュリティエラー。(<a href="/ja/docs/Tools/Web_Console" title="Tools/Web_Console">Web コンソールについて詳しく学びます</a>)</p> + +<h3 id="Debugger" name="Debugger">デバッガ</h3> + +<p>エラーや問題点を早急に追究するためにデバッガを使用して、接続したアプリで実行している JavaScript コードのステップ実行、ブレークポイントの管理、式のウォッチができます。(<a href="/ja/docs/Tools/Debugger" title="Tools/Web_Console">デバッガについて詳しく学びます</a>)</p> + +<h3 id="Style_Editor" name="Style_Editor">スタイルエディタ</h3> + +<p>スタイルエディタを接続すると、アプリで参照している CSS ファイルの閲覧や編集が可能になります。変更した箇所はアプリを更新する必要なしに、リアルタイムにアプリへ反映されます。(<a href="/ja/docs/Tools/Style_Editor" title="Tools/Web_Console">スタイルエディタについて詳しく学びます</a>)</p> + +<h3 id="Profiler" name="Profiler">プロファイラ</h3> + +<p>アプリに接続したプロファイラツールを使用して、JavaScript コードで時間がかかっている箇所を見つけることができます。プロファイラはサンプルについて現在の JavaScript のコールスタックやコンパイル状況を周期的にサンプリングします。(<a href="/ja/docs/Tools/Profiler" title="Tools/Web_Console">プロファイラについて詳しく学びます</a>)</p> + +<h3 id="Network_Monitor" name="Network_Monitor">ネットワークモニター</h3> + +<p>新たなネットワークモニターのおかげで、アプリが開始したすべてのネットワークリクエストのステータス、ヘッダ、コンテンツ、タイミングを、ユーザフレンドリーなインターフェイスで分析できます。(<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">ネットワークモニターについて詳しく学びます</a>)</p> + +<h2 id="Receipts" name="Receipts"><a name="Simulator-receipts">レシート</a></h2> + +<p>課金アプリを開発している場合は、正当な (暗号により署名された) レシートでレシート検証コード (例えば、ユーザがアプリを購入済みであることや払い戻しの操作を行ったことを検証して、ユーザへの通知および状況に応じて機能のロックやロック解除を行う) のテストを行うべきです。</p> + +<p>Simulator Dashboard で各アプリの項目にある <strong>"Receipts"</strong> メニューにより、<strong>"Valid"</strong>、<strong>"Invalid"</strong>、<strong>"Refunded"</strong> のテストレシートとともにアプリをインストールできます。テストしたいレシートの種類を選択すると、Dashboard が Marketplace のレシートサービスからその種類のテストレシートを取得して、Simulator でテストレシートとともにアプリを再インストールします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p> + +<h2 id="Push_to_device" name="Push_to_device"><a name="Push-to-device">デバイスへのプッシュ</a></h2> + +<p>Firefox OS デバイスを所有している場合は、デバイスを Simulator に接続でき、またアプリを Dashboard からデバイスへプッシュすることもできます。</p> + +<h3 id="Connecting_a_device" name="Connecting_a_device">デバイスを接続する</h3> + +<p>デバイスを接続するには、<a href="/ja/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a> で案内している手順に従ってください。ADB は Simulator アドオンに組み込まれていますので、インストールする必要はありません。</p> + +<h3 id="Pushing_apps_to_the_device" name="Pushing_apps_to_the_device">アプリをデバイスにプッシュする</h3> + +<p>デバイスとデスクトップの設定を行って、デバイスを USB でデスクトップ PC に接続すると、<strong>"Device connected"</strong> というメッセージが Dashboard の左側に表示され、また各アプリのエントリに <strong>"Push"</strong> という名前のコマンドが新たに表示されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p> + +<p><strong>"Push"</strong> をクリックすると、アプリが Firefox OS デバイスにインストールされます。</p> + +<div class="note"> +<p><strong>手動の作業:</strong></p> + +<ul> + <li> + <p>アプリをデバイスにプッシュしたら、更新されたコンテンツを得るために手動でアプリを閉じて再起動しなければなりません。</p> + </li> + <li> + <p>マニフェストで何らかの (例えばアプリの name、orientation、type、permissions) 更新を行った場合は、変更点を反映させるためにオペレーティングシステムの再起動が必要です。</p> + </li> +</ul> +</div> + +<h3 id="Firefox_OS_Device_Connection_Confirmation" name="Firefox_OS_Device_Connection_Confirmation">Firefox OS デバイス接続の確認</h3> + +<p>デバイスを再起動するごとに、最初の <strong>"Push"</strong> 要求はデバイス側での確認が必要です:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="height: 480px; width: 320px;"></p> + +<h3 id="Troubleshooting_on_Linux" name="Troubleshooting_on_Linux">Linux でのトラブルシューティング</h3> + +<p>udev ルールを作成した後にデバイスを接続できない場合は、<a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">こちらのバグ</a>をご覧ください。</p> + +<h2 id="Limitations_of_the_Simulator" name="Limitations_of_the_Simulator"><a name="Limitations">Simulator の制限事項</a></h2> + +<p>Firefox OS Simulator は完全なシミュレーションではないことに注意してください。</p> + +<h3 id="Hardware_limitations" name="Hardware_limitations">ハードウェアの制限事項</h3> + +<p>スクリーンサイズを除き、Simulator はメモリ容量や CPU の速度といった、Firefox OS デバイスのハードウェアの制限事項をシミュレーションしません。</p> + +<h3 id="Audio.2Fvideo_codecs" name="Audio.2Fvideo_codecs">Audio/Video コーデック</h3> + +<p>ハードウェアアクセラレーションによるデコードに依存する以下のコーデックは、それゆえに未サポートです:</p> + +<ul> + <li>MP3</li> + <li>AAC</li> + <li>H.264 (MP4)</li> + <li>WebM</li> +</ul> + +<p>すなわち、これらのコーデックに依存する Youtube などの Web サイトやビデオ再生アプリのテストに Simulator を使用することはできません。</p> + +<h3 id="Unsupported_APIs" name="Unsupported_APIs"><a name="Unsupported-APIs">非対応の API</a></h3> + +<p>デバイスで動作する API には、Simulator で動作しないものがあるでしょう。これは一般的に、サポートするハードウェアがデスクトップ PC で使用できないためです。私たちは Geolocation のように一部の API のシミュレーションを実装しており、将来のリリースでさらに増やす予定です。ただし、現時点では以下の API をサポートしていません。これらを使用するとエラーが発生したり、誤った結果になる可能性があります:</p> + +<ul> + <li><a href="/ja/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a></li> + <li><a href="/ja/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a></li> + <li><a href="/ja/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">WebBluetooth</a></li> + <li><a href="/ja/docs/WebAPI/Using_Light_Events" title="WebAPI/Using_Light_Events">Ambient Light</a></li> + <li><a href="/ja/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity</a></li> + <li><a href="/ja/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information</a></li> + <li><a href="/ja/docs/Online_and_offline_events" title="Online_and_offline_events">navigator.onLine および offline イベント</a></li> + <li><a href="/ja/docs/WebAPI/Vibration" title="WebAPI/Vibration">Vibration</a></li> +</ul> + +<h2 id="Getting_help" name="Getting_help"><a name="Simulator-help"></a>助けを得る</h2> +疑問点がある場合は、<a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools メーリングリスト</a> や <a href="irc://irc.mozilla.org/#devtools">irc.mozilla.org の #devtools</a> で質問してみてください。 + +<p> </p> + +<h3 id="How_to_enable_verbose_logging" name="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging">詳細なログ取得を有効にする</a></h3> + +<p>about:config で設定 <code>extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</code> を作成して値を整数値 0 に設定して、アドオンを無効化および再有効化してください。Simulator のオペレーションに関する付加的なメッセージがエラーコンソール (より新しいバージョンの Firefox ではブラウザコンソール) に表示されます。</p> +</div> +</div> diff --git a/files/ja/tools/firefox_os_simulator_clone/index.html b/files/ja/tools/firefox_os_simulator_clone/index.html new file mode 100644 index 0000000000..f75ba6fd3c --- /dev/null +++ b/files/ja/tools/firefox_os_simulator_clone/index.html @@ -0,0 +1,90 @@ +--- +title: Firefox OS シミュレータ +slug: Tools/Firefox_OS_Simulator_clone +translation_of: Tools/Firefox_OS_Simulator_clone +--- +<div>{{ToolsSidebar}}</div> + +<div class="note"> +<p>このページでは、Firefox OS 1.2 以降をターゲットとする開発者向けの Firefox OS シミュレータについて説明します。 Firefox OS 1.1 用のアプリケーションを開発する場合は、代わりに <a href="/ja/docs/Tools/Firefox_OS_1.1_Simulator">Firefox OS 1.1 Simulator</a> のドキュメントを参照してください。</p> +</div> + +<p><span style="line-height: 1.5;">Firefox OS シミュレータは、Firefox OS デバイスをシミュレートするが、デスクトップ上で動作する Firefox OS の上位層のバージョンです。つまり多くの場合、アプリをテストしてデバッグするために実際のデバイスは必要ありません。これは、Firefox OS デバイスと同じサイズのウィンドウで実行され、Firefox OS ユーザーインターフェイスと組み込みアプリケーションを含み、Firefox OS デバイス API の多くをシミュレートします。</span></p> + +<p><span style="line-height: 1.5;">Simulator は Firefox のアドオンとしてパッケージ化され、配布されます。Firefox にダウンロードしてインストールしたら、App Manager ツールを使用してそれを実行し、アプリをプッシュしてデベロッパーツールをアタッチすることができます。現在、<a href="/ja/docs/Tools/WebIDE">WebIDE</a> の <a href="https://www.mozilla.org/ja/firefox/channel/desktop/#nightly">Nightly</a>/<a href="https://www.mozilla.org/ja/firefox/channel/desktop/#aurora">Aurora</a> にあります。</span></p> + +<h2 id="インストール"><span style="line-height: 1.5;">インストール</span></h2> + +<p><span style="line-height: 1.5;">シミュレータをインストールするには、<a href="/ja/docs/Tools/WebIDE#Adding_a_Simulator">WebIDE の Manage Simulators ペイン</a> (Firefox 33 以降で利用可能) を使用します。複数のバージョンが用意されており、それらをすべてインストールすることをお勧めします。</span></p> + +<p>Simulator を起動するには、WebIDE のランタイムリストから選択します。詳細については、<a href="https://developer.mozilla.org/docs/Tools/WebIDE#Selecting_a_runtime">WebIDE のマニュアル</a>を参照してください。Simulator が実行されると、実際のデバイスと同様に WebIDE を使用して Simulator をデバッグすることで、デバッグができます。</p> + +<p>アプリケーションマネージャ (WebIDE より前の古いツール) を使用している場合は、次のボタンを使用してシミュレータをインストールできます。</p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; color: white; text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.298039) 0px -1px 0px 0px inset;">Simulator のインストール</a></p> + +<h2 id="シミュレータの_UI" style="line-height: 30px;">シミュレータの UI</h2> + +<p><span style="line-height: 22.00800132751465px;">シミュレータは、シミュレートされた画面領域が 320 x 480 ピクセルになるようにサイズが変更された別個のウィンドウとして表示されます。タッチイベントをシミュレートするには、マウスボタンをクリックし、ボタンを押したままドラッグします。ホーム画面から右クリックして右から左にドラッグすると、ビルトインアプリとあなたが追加したアプリが表示されます：</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7173/simulator-1.2.png" style="display: block; height: 623px; margin: 0px auto; width: 810px;"></p> + +<p>Simulator には、下部にツールバーの2つのボタンがあります。</p> + +<ul> + <li>左側のボタンはホーム画面に移動し、押さえている場合はシミュレータをオフに切り替えます</li> + <li>右のボタンは Simulator を縦向きと横向きに切り替えます。<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation#Listening_orientation_change">orientationchange</a> イベントが生成されます</li> +</ul> + +<h2 id="シミュレータの制限">シミュレータの制限</h2> + +<p>Firefox OS シミュレータは完璧なシミュレーションではありません。</p> + +<h3 id="ハードウェアの制限">ハードウェアの制限</h3> + +<p>シミュレータは、画面サイズとは別に、使用可能なメモリや CPU 速度など、Firefox OS デバイスのハードウェア制限をシミュレートしません。</p> + +<h3 id="Audiovideo_codecs">Audio/video codecs</h3> + +<p>次のコーデックは、ハードウェアアクセラレーションによるデコードに依存しているため、まだサポートされていません。</p> + +<ul> + <li>MP3</li> + <li>AAC</li> + <li>H.264 (MP4)</li> + <li>WebM</li> +</ul> + +<p>つまり、Simulator を使用して、アプリケーションやこれらのコーデックに依存する Youtube のような Web サイトでのビデオ再生をテストすることはできません。</p> + +<h3 id="サポートされていない_API"><a name="Unsupported-APIs">サポートされていない API</a></h3> + +<p>サポートしているハードウェアがデスクトップ上で利用できないため、デバイス上で動作する特定の API はシミュレータ上では機能しません。ジオロケーションなどの一部の API のシミュレーションを実装し、今後のリリースでさらに追加する予定です。ただし、現時点では、次の API はサポートされていません。それらを使用すると、エラーがスローされたり、正しくない結果が返される可能性があります</p> + +<ul> + <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li> + <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li> + <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> + <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> + <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li> + <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li> + <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li> + <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li> +</ul> + +<h2 id="ヘルプの利用"><a name="Simulator-help"></a>ヘルプの利用</h2> + +<p><span style="line-height: 1.5;">ご質問がある場合は、<a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools メーリングリスト</a>または <a href="irc://irc.mozilla.org/#devtools">irc.mozilla.org の #devtools</a> にお問い合わせください。</span></p> + +<h3 id="詳細ログを有効にする方法"><a name="Simulator-verbose-logging"></a>詳細ログを有効にする方法</h3> + +<p><a href="/ja/docs/Tools/Web_Console">Web Console</a> でアプリからログに記録されたメッセージを見ることができ、<a href="/ja/docs/Tools/WebIDE/Troubleshooting">WebIDE</a> を使用してアプリケーションに添付することができます。アプリの起動中に起こった初期のメッセージを、コンソールが接続されて動作する前にキャッチしたい場合は、シミュレータで冗長なログを有効にすることができます。</p> + +<p>about:config を参照し、新しい設定を<strong>作成</strong>してください。設定名は Simulator の各バージョンごとに異なります。</p> + +<ul> + <li>extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel for Firefox OS 1.3</li> + <li>extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel for Firefox OS 1.2</li> +</ul> + +<p>それを文字列の値 "all" に設定し、アドオンマネージャでアドオンを無効にしてから再び有効にします。Simulator の操作に関する追加のメッセージが<a href="/ja/docs/Tools/Browser_Console">ブラウザコンソール</a>に表示されます。</p> diff --git a/files/ja/tools/index.html b/files/ja/tools/index.html new file mode 100644 index 0000000000..f1121d0a6f --- /dev/null +++ b/files/ja/tools/index.html @@ -0,0 +1,229 @@ +--- +title: 開発ツール +slug: Tools +tags: + - Developing Mozilla + - Guide + - Tools + - Web Development + - 'Web Development:Tools' + - 'l10n:priority' + - ツール + - 開発ツール +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">デスクトップとモバイルで、HTML と CSS と JavaScript を調査、編集、デバッグします。</p> + +<div class="column-container"> +<p>Firefox で利用できるウェブ開発ツールを使う上での情報を探すのに、あなたはうってつけの場所に来ています — このページは主要ツールと追加ツールすべての詳細な情報、Android 用 Firefox への接続やデバッグのやり方といったより詳しい情報、開発ツールの拡張のやり方、ブラウザー全体のデバッグのやり方へのリンクを提供します。</p> +サイドバーにあるリンクを探索して、ページまで読み進めてください。開発ツールに関してのフィードバックや質問があれば、我々のメーリングリストか IRC チャンネル (<a href="https://developer.mozilla.org/ja/docs/Tools#Join_the_Developer_tools_community">ページ最下部のコミュニティリンク</a>をご覧ください) にメッセージを送ってください。もし文書に関しての明確なフィードバックや質問があれば、<a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> が投書するのに良いサイトです。<br> + +<div class="note"> +<p><strong>注記</strong>: もしウェブ開発や開発ツールの使用について初心者ならば、<a href="https://developer.mozilla.org/ja/docs/Learn">ウェブ開発を学ぶ</a> が役に立つでしょう — 良いスタートラインとして <a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> と <a href="https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツールとは？</a> をご覧ください。</p> +</div> +</div> + +<h2 id="The_Core_Tools" name="The_Core_Tools">主要ツール</h2> + +<p>Windows と Linux では <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 、OS X では <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> で開くことができる開発者ツールバーの右側には、アクションを実行したり、ツールの設定を変更できるいくつかのボタンがあります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>このボタンはページに複数の iframe があるときにだけ表示されます。現在のページにある iframe のリストを表示するためにクリックをし、動作させたいものを選択します。</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td> + <p>現在のページのスクリーンショットを撮影する場合にこのボタンをクリックします。(<strong>注意:</strong> この機能は既定では利用可能となっていないので、アイコンを表示させるのには設定で有効にしておく必要があります。)</p> + </td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>レスポンシブデザインモードに切り替えます。</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td> + <p>分割したコンソールを表示したり隠したりするドッキングに関するオプション、開発ツールの設定を含むメニューを開きます。メニューにはまた Firefox のウェブのツールや Mozilla Community の文書へのリンクも含みます。</p> + </td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>開発ツールを閉じます。</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Page_Inspector" name="Page_Inspector">ページインスペクター</h3> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> +ページの内容やレイアウトを、閲覧および編集します。ボックスモデル、アニメーション、グリッドレイアウトなど、さまざまな観点でページを視覚化します。</div> + +<div class="column-half"> +<h3 id="Web_Console" name="Web_Console">ウェブコンソール</h3> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> +ウェブページが記録したメッセージの閲覧や、JavaScript を使用してページとやり取りします。</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="JavaScript_Debugger" name="JavaScript_Debugger">JavaScript デバッガー</h3> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。</p> +</div> + +<div class="column-half"> +<h3 id="Network_Monitor" name="Network_Monitor">ネットワークモニター</h3> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> +ページを読み込むときに実施したネットワークリクエストを確認します。</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Performance_Tools" name="Performance_Tools">パフォーマンスツール</h3> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> +サイトの全体的な応答性、JavaScript やレイアウトのパフォーマンスを分析します。</div> + +<div class="column-half"> +<h3 id="Responsive_Design_Mode" name="Responsive_Design_Mode">レスポンシブデザインモード</h3> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>さまざまな端末やネットワークの環境で、あなたのウェブサイトやアプリがどのように見えるかや動作するかを確認します。</p> +</div> +</div> + +<div class="note"> +<p><strong>注</strong>: 開発ツールの入っている UI の総称は<a href="https://developer.mozilla.org/ja/docs/Tools/Tools_Toolbox">ツールボックス</a>です。</p> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Accessibility_inspector" name="Accessibility_inspector">アクセシビリティインスペクタ</h3> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>ページのアクセシビリティツリーにアクセスする手段を提供し、欠落しているものや注意が必要なものを確認することができます。</p> +</div> +</div> + +<div class="note"> +<p><strong>メモ</strong>: DevTools がすべてその中にある UI の総称は、<a href="/ja/docs/Tools/Tools_Toolbox">ツールボックス</a>です。</p> +</div> + +<h2 id="More_Tools" name="More_Tools">その他のツール</h2> + +<p>これらの開発ツールも、Firefox に内蔵しています。上記の「主要ツール」とは異なり、日常的には使用しないかもしれません。</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/ja/docs/Tools/Memory">メモリー</a></dt> + <dd>どのオブジェクトがメモリーを使用し続けているかを明らかにします。</dd> + <dt><a href="/ja/docs/Tools/Storage_Inspector">ストレージインスペクター</a></dt> + <dd>ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。</dd> + <dt><a href="/ja/docs/Tools/DOM_Property_Viewer">DOM プロパティビューアー</a></dt> + <dd>ページの DOM 属性や関数などを調査します。</dd> + <dt><a href="/ja/docs/Tools/GCLI">開発ツールバー</a></dt> + <dd>開発ツール用のコマンドラインインターフェイスです。</dd> + <dt><a href="https://developer.mozilla.org/ja/docs/Tools/Accessibility_inspector">アクセシビリティインスペクター</a></dt> + <dd>ページのアクセシビリティツリーへのアクセス手段を提供し、何が足りないのかや注意が必要なのかを確認できるようにします。</dd> + <dt><a href="/ja/docs/Tools/Eyedropper">スポイト</a></dt> + <dd>ページ内の色を選択します。</dd> + <dt><a href="/ja/docs/Tools/Scratchpad">スクラッチパッド</a></dt> + <dd>JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディターです。</dd> + <dt><a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a></dt> + <dd>現在表示しているページの CSS スタイルの閲覧や編集を行います。</dd> + <dt><a href="/ja/docs/Tools/Shader_Editor">シェーダーエディター</a></dt> + <dd><a href="/ja/docs/Web/WebGL">WebGL</a> で使用する頂点シェーダーとフラグメントシェーダーの閲覧や編集を行います。</dd> + <dt><a href="/ja/docs/Tools/Web_Audio_Editor">Web Audio エディター</a></dt> + <dd>オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。</dd> + <dt><a href="/ja/docs/Tools/Taking_screenshots">スクリーンショットを撮影</a></dt> + <dd>ページ全体またはひとつの要素のスクリーンショットを撮影します。</dd> + <dt><a href="https://developer.mozilla.org/ja/docs/Tools/Measure_a_portion_of_the_page">ページの一部分を計測する</a></dt> + <dd>ウェブページの特定のエリアを計測します。</dd> + <dt><a href="https://developer.mozilla.org/ja/docs/Tools/Rulers">定規</a></dt> + <dd>ウェブページ上に水平、垂直な定規を重ねます。</dd> +</dl> +</div> + +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">最新の開発ツールと機能については、Firefox Developer Edition を試してみてください。</p> + +<p><a href="https://www.mozilla.org/ja/firefox/developer/" style="width: 330px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Developer Edition のダウンロード</a></p> +</div> +</div> + +<hr> +<h2 id="Connecting_the_Developer_Tools" name="Connecting_the_Developer_Tools">開発ツールに接続する</h2> + +<p><a href="/ja/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">キーボードショートカット</a> や同等のメニュー項目を使用して開いた開発ツールは、現在アクティブなタブに表示しているドキュメントを対象にします。一方、現在開いているブラウザー、別のブラウザー、別の端末といった、さまざまな対象物に対してもツールを接続できます。</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/ja/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>アドオン、コンテンツタブ、ブラウザーで実行する Worker をデバッグします。</dd> + <dt><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Android 版 Firefox に接続する</a></dt> + <dd>Android 端末で実行している Firefox のインスタンスに、開発ツールを接続します。</dd> + <dt><a href="/ja/docs/Tools/Working_with_iframes">iframe に接続する</a></dt> + <dd>現在のページ内の、特定の iframe に開発ツールを接続します。</dd> + <dt><a href="/ja/docs/Tools/Valence">ほかのブラウザーに接続する</a></dt> + <dd>Android 版 Chrome や iOS 版 Safari に、開発ツールを接続します。</dd> +</dl> +</div> + +<hr> +<h2 id="Debugging_the_browser" name="Debugging_the_browser">ブラウザーのデバッグ</h2> + +<p>通常、開発ツールはウェブページ、またはウェブアプリに接続して利用します。しかしこれらのツールのほとんどは、ブラウザーへと接続することもできます。これはブラウザーやアドオンの開発に役立ちます。</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/ja/docs/Tools/Browser_Console">ブラウザーコンソール</a></dt> + <dd>ブラウザー自体やアドオンが出力するログの確認や、ブラウザーのスコープ内での JavaScript 実行を行います。</dd> + <dt><a href="/ja/docs/Tools/Browser_Toolbox">ブラウザーツールボックス</a></dt> + <dd>開発ツールをブラウザー自体に接続します。</dd> +</dl> +</div> + +<hr> +<h2 id="Extending_the_devtools" name="Extending_the_devtools">開発ツールの拡張</h2> + +<p>Firefox 開発ツールの拡張についての情報は、MDN の<a href="https://wiki.developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions">ブラウザー拡張機能</a>セクションの<a href="https://wiki.developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">開発ツールの拡張</a> を見てください。</p> + +<h2 id="Migrating_from_Firebug" name="Migrating_from_Firebug">Firebug からの移行</h2> + +<p>Firebug は寿命が近づいています（理由の詳細については <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> を参照してください）。人によってはあまり馴染みのない開発ツールへの移行に挑戦してくださっていることに感謝します。Firebug から Firefox 開発者ツールへ簡単に移行できるようにするため、私たちは便利なガイド「<a href="/ja/docs/Tools/Migrating_from_Firebug">Firebug からの移行</a>」書いています。</p> + +<hr> +<h2 id="Contribute" name="Contribute">貢献</h2> + +<p>開発ツールの改良を支援したい場合は、以下のリソースから始めましょう。</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://devtools-html.github.io/#getting-in-to">Get Involved</a></dt> + <dd>始め方を解説した Mozilla wiki ページです。</dd> + <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt> + <dd>作業中のバグを探せるツールです。</dd> +</dl> +</div> diff --git a/files/ja/tools/index/index.html b/files/ja/tools/index/index.html new file mode 100644 index 0000000000..092c03076e --- /dev/null +++ b/files/ja/tools/index/index.html @@ -0,0 +1,9 @@ +--- +title: 開発ツール関連ドキュメントの索引 +slug: Tools/Index +tags: + - Index + - Tools +translation_of: Tools/Index +--- +<div>{{ToolsSidebar}}</div><p>{{Index("/ja/docs/Tools")}}</p> diff --git a/files/ja/tools/json_viewer/index.html b/files/ja/tools/json_viewer/index.html new file mode 100644 index 0000000000..b6459ba6a5 --- /dev/null +++ b/files/ja/tools/json_viewer/index.html @@ -0,0 +1,22 @@ +--- +title: JSON ビューアー +slug: Tools/JSON_viewer +translation_of: Tools/JSON_viewer +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>JSON ビューアーは Firefox 44 の新機能です。</p> + +<p>Firefox 53 より前のバージョンでは、JSON ビューアーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。ほかのリリースチャンネルでこの機能を有効化するには、設定項目 <code>devtools.jsonview.enabled</code> を <code>true</code> にしてください。</p> + +<p>Firefox 53 より、JSON ビューアーが Beta および通常のリリース版の Firefox でもデフォルトで有効になりました。</p> +</div> + +<p>Firefox に JSON ビューアーが含まれています。JSON ファイルをブラウザーに読み込むと、分析して構文をハイライト表示します。配列やオブジェクトは折りたたんで表示しており、"+" アイコンを使用して展開できます。</p> + +<p>{{EmbedYouTube("ktFcevMwYXw")}}</p> + +<p>JSON ビューアーには、JSON をフィルタリングできる検索ボックスがあります。</p> + +<p>生の JSON データと整形済みデータの両方を確認できます。</p> + +<p>最後に、ドキュメントがネットワークリクエストの結果である場合は、リクエストおよびレスポンスのヘッダーもビューアーで表示します。</p> diff --git a/files/ja/tools/keyboard_shortcuts/index.html b/files/ja/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..db62cdc3e3 --- /dev/null +++ b/files/ja/tools/keyboard_shortcuts/index.html @@ -0,0 +1,1206 @@ +--- +title: キーボードショートカット一覧 +slug: Tools/Keyboard_shortcuts +tags: + - Tools + - 'l10n:priority' +translation_of: Tools/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div> + +<p>本ページでは、Firefox 内蔵の開発ツールで使用している、すべてのキーボードショートカットを一覧化しています。</p> + +<p>最初のセクションではそれぞれのツールを開くためのショートカットを、次のセクションではツールボックス自体に適用するショートカットを一覧化します。その後に各ツールのセクションがあり、そこではツール内で使用できるショートカットを一覧化しています。</p> + +<p>アクセスキーはロケールに依存するため、本ページでは文書化していません。</p> + +<h2 id="Opening_and_closing_tools" name="Opening_and_closing_tools">ツールの開始と終了</h2> + +<p>これらのショートカットは、メインのブラウザーウィンドウで特定のツールを開始します。ツールボックスに含まれているツールでは、ツールがアクティブである場合はツールを終了するショートカットとして機能します。ブラウザーコンソールのように新しいウィンドウを開くツールでは、ツールを終了するためにウィンドウを閉じなければなりません。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">ツールボックスを開く (最後にアクティブであったツールも開く)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">ツールボックスをフォアグラウンドに移動 (ツールボックスを別のウィンドウで開いており、そのウィンドウがフォアグラウンドではない場合)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">ツールボックスを閉じる (ツールボックスを別のウィンドウで開いており、そのウィンドウがフォアグラウンドである場合)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">ウェブコンソールを開く<a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">インスペクターを開く/閉じる</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">デバッガーを開く</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">スタイルエディターを開く</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">プロファイラーを開く</th> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + </tr> + <tr> + <th scope="row">ネットワークモニターを開く<a href="#opening-closing-network-monitor-note"><strong><sup>2</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">開発ツールバーを開く</th> + <td><kbd>Shift</kbd> + <kbd>F2</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F2</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">レスポンシブデザインモードを開く</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + </tr> + <tr> + <th scope="row">ブラウザーコンソールを開く<a href="#opening-closing-browser-console-note"><sup>3</sup></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">ブラウザーツールボックスを開く</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">スクラッチパッドを開く</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">WebIDE を開く</th> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">ストレージインスペクター<a href="#disabled-tools-shortcut"><sup>4</sup></a></th> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + </tr> + </tbody> +</table> + +<p><a name="opening-closing-web-console-note">1. 他のツールボックス内ツールと異なり、このショートカットではウェブコンソールが閉じません。代わりに、ウェブコンソールのコマンドラインにフォーカスがあたります。ウェブコンソールを閉じるには、ツールボックスのグローバルなショートカットである <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (Mac では <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd>) を使用してください。</a></p> + +<p><a name="opening-closing-network-monitor-note">2. Firefox 55 より前のバージョンでは、キーボードショートカットが <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd> (Mac では <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd>) でした。</a></p> + +<p><a id="opening-closing-browser-console-note" name="opening-closing-browser-console-note">3. Firefox 38 より前のバージョンでは、ブラウザーコンソールが Firefox のウィンドウの陰にある状態で同じショートカットを押下すると、ブラウザーコンソールが閉じます。Firefox 38 から、ブラウザーコンソールが Firefox のウィンドウの陰にあるときは、このショートカットでブラウザーコンソールを前面に表示してフォーカスをあてるようになりました。</a></p> + +<p><a href="/ja/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">4. ツールはデフォルトで無効であり、オプションパネルでツールを有効化しなければショートカットは動作しません。</a></p> + +<h2 id="Toolbox" name="Toolbox">ツールボックス</h2> + +<div id="toolbox-shortcuts"> +<p>これらのショートカットはどのツールがアクティブであるかにかかわらず、ツールボックスを開いているときに動作します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">開発ツールを左から右に切り替える</th> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>]</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + </tr> + <tr> + <th scope="row">開発ツールを右から左に切り替える</th> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>[</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + </tr> + <tr> + <th scope="row"> + <p>アクティブなツールとツールのオプションを切り替える</p> + </th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">アクティブなツールとツールのオプションを切り替える (Firefox 43 の新機能)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row"> + <p>最後に使用した 2 つの <a href="/ja/docs/Tools/Tools_Toolbox#Docking_mode">ドッキングモード</a> を切り替える (Firefox 41 の新機能)</p> + </th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row">コンソールの常時表示を切り替える (コンソールツールを選択している場合を除く)</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="all-toolbox-tools"> +<p>これらのショートカットは、ツールボックス内の全ツールで動作します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">フォントサイズを大きくする</th> + <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td> + <td><kbd>Cmd</kbd> + <kbd> + </kbd></td> + <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td> + </tr> + <tr> + <th scope="row">フォントサイズを小さくする</th> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>-</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + </tr> + <tr> + <th scope="row">フォントサイズをリセットする</th> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>0</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Source_editor" name="Source_editor">ソースエディター</h2> + +<div id="source-editor"> +<p>以下の表は、ソースエディターのデフォルトのショートカットの一覧です。</p> + +<p>開発ツールのオプションの <a href="/ja/docs/Tools/Tools_Toolbox#Editor_Preferences">エディター設定</a> で、キーバインドとして Vim、Emacs、Sublime Text を選択できます。</p> + +<p>あるいは、<code>about:config</code> で設定項目 <code>devtools.editor.keymap</code> を選択して "vim"、"emacs"、または "sublime" を設定してください。この設定によりソースエディターを使用するすべての開発ツールで、選択したキーバインドを使用します。設定を反映させるには、エディターを開き直さなければなりません。</p> + +<p>Firefox 33 よりキーバインドの設定を開発ツールのオプションの <a href="/ja/docs/Tools/Tools_Toolbox#Editor_Preferences">エディター設定</a> に配置しましたので、<code>about:config</code> に代わりここで設定できます。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">指定行へ移動</th> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">ファイル内を検索</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">再検索</th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + </tr> + <tr> + <th scope="row">すべて選択</th> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">切り取り</th> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>X</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + </tr> + <tr> + <th scope="row">コピー</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">貼り付け</th> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row">元に戻す</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">やり直し</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">インデント挿入</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">インデント削除</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">上の行へ移動</th> + <td><kbd>Alt</kbd> + <kbd>↑</kbd></td> + <td><kbd>Alt</kbd> + <kbd>↑</kbd></td> + <td><kbd>Alt</kbd> + <kbd>↑</kbd></td> + </tr> + <tr> + <th scope="row">下の行へ移動</th> + <td><kbd>Alt</kbd> + <kbd>↓</kbd></td> + <td><kbd>Alt</kbd> + <kbd>↓</kbd></td> + <td><kbd>Alt</kbd> + <kbd>↓</kbd></td> + </tr> + <tr> + <th scope="row">行のコメント化/コメント解除</th> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>/</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Page_Inspector" name="Page_Inspector">ページインスペクター</h2> + +<div id="page-inspector"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">要素を調査する</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Node_picker" name="Node_picker">ノードの選択</h3> + +<p>これらのショートカットは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">ページから要素を選択</a> がアクティブであるときに動作します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">マウスポインターの下にある要素を選択して、選択モードを終了する</th> + <td><kbd>Click</kbd></td> + <td><kbd>Click</kbd></td> + <td><kbd>Click</kbd></td> + </tr> + <tr> + <th scope="row">マウスポインターの下にある要素を選択して、選択モードは継続する (Firefox 52 の新機能)</th> + <td><kbd>Shift</kbd> + <kbd>Click</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Click</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Click</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="HTML_pane" name="HTML_pane">HTML ペイン</h3> + +<p>これらのショートカットは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML" title="Tools/Page_Inspector/How_to/Examine_and_edit_HTML">インスペクターの HTML ペイン</a> 内で動作します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">選択中のノードを削除する</th> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + </tr> + <tr> + <th scope="row">削除したノードを元に戻す</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">ノードを再び削除する</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">次のノードへ移動する (展開しているノードに限る)</th> + <td><kbd>↓</kbd></td> + <td><kbd>↓</kbd></td> + <td><kbd>↓</kbd></td> + </tr> + <tr> + <th scope="row">前のノードに移動する</th> + <td><kbd>↑</kbd></td> + <td><kbd>↑</kbd></td> + <td><kbd>↑</kbd></td> + </tr> + <tr> + <th scope="row">選択中のノードを展開する</th> + <td><kbd>→</kbd></td> + <td><kbd>→</kbd></td> + <td><kbd>→</kbd></td> + </tr> + <tr> + <th scope="row">選択中のノードを折りたたむ</th> + <td><kbd>←</kbd></td> + <td><kbd>←</kbd></td> + <td><kbd>←</kbd></td> + </tr> + <tr> + <th scope="row">ノード内で次の属性に移動する</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">ノード内で前の属性に移動する</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">選択中の属性を編集する</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">選択中のノードを隠す/表示する</th> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + </tr> + <tr> + <th scope="row">HTML ペインの検索ボックスにフォーカスを移動する</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">HTML として編集する</th> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">HTML の編集を終了する</th> + <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> +<kbd>Enter</kbd></td> + <td><kbd>F2</kbd> / <kbd>Cmd</kbd> + <kbd>Return</kbd></td> + <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> + <kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">選択中のノードの outerHTML をコピーする (Firefox 42 の新機能)</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">選択中のノードがある位置へスクロールする (Firefox 44 の新機能)</th> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">検索がアクティブであるとき、マークアップ内で次にマッチするものを検索する</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">検索がアクティブであるとき、マークアップ内で前にマッチするものを検索する (Firefox 48 の新機能)</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Breadcrumbs_bar" name="Breadcrumbs_bar">パンくずリストバー</h3> + +<p>これらのショートカットは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">パンくずリストバー</a> にフォーカスがあるときに動作します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">パンくずリストバーで前の要素に移動する</th> + <td><kbd>←</kbd></td> + <td><kbd>←</kbd></td> + <td><kbd>←</kbd></td> + </tr> + <tr> + <th scope="row">パンくずリストバーで次の要素に移動する</th> + <td><kbd>→</kbd></td> + <td><kbd>→</kbd></td> + <td><kbd>→</kbd></td> + </tr> + <tr> + <th scope="row"><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a> にフォーカスを移動する</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row"><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS ペイン</a> にフォーカスを移動する</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="CSS_pane" name="CSS_pane">CSS ペイン</h3> + +<p>これらのショートカットは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS" title="Tools/Page_Inspector/How_to/Examine_and_edit_CSS">インスペクターの CSS ペイン</a> 内で動作します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">CSS ペインの検索ボックスにフォーカスを移動する</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">検索ボックスの内容を消去する (検索ボックスにフォーカスがあり、内容が入力されている場合に限る)</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">次のプロパティーや値に移動する</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">前のプロパティーや値に移動する</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">プロパティーや値の編集を始める (ルールビューでプロパティーまたは値が選択されており、すでに編集中ではない状態に限る)</th> + <td><kbd>Enter</kbd> または <kbd>Space</kbd></td> + <td><kbd>Return</kbd> または <kbd>Space</kbd></td> + <td><kbd>Enter</kbd> または <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row">オートコンプリートの候補で上下に移動する (ルールビューでプロパティーまたは値を編集中である状態に限る)</th> + <td><kbd>↑</kbd> , <kbd>↓</kbd></td> + <td><kbd>↑</kbd> , <kbd>↓</kbd></td> + <td><kbd>↑</kbd> , <kbd>↓</kbd></td> + </tr> + <tr> + <th scope="row">現在のオートコンプリート候補を選択する (ルールビューでプロパティーまたは値を編集中である状態に限る)</th> + <td><kbd>Enter</kbd> または <kbd>Tab</kbd></td> + <td><kbd>Return</kbd> または <kbd>Tab</kbd></td> + <td><kbd>Enter</kbd> または <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">選択中の値を 1 増やす</th> + <td><kbd>↑</kbd></td> + <td><kbd>↑</kbd></td> + <td><kbd>↑</kbd></td> + </tr> + <tr> + <th scope="row">選択中の値を 1 減らす</th> + <td><kbd>↓</kbd></td> + <td><kbd>↓</kbd></td> + <td><kbd>↓</kbd></td> + </tr> + <tr> + <th scope="row">選択中の値を 100 増やす</th> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + </tr> + <tr> + <th scope="row">選択中の値を 100 減らす</th> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + </tr> + <tr> + <th scope="row">選択中の値を 10 増やす</th> + <td><kbd>Shift</kbd> + <kbd>↑</kbd></td> + <td><kbd>Shift</kbd> + <kbd>↑</kbd></td> + <td><kbd>Shift</kbd> + <kbd>↑</kbd></td> + </tr> + <tr> + <th scope="row">選択中の値を 10 減らす</th> + <td><kbd>Shift</kbd> + <kbd>↓</kbd></td> + <td><kbd>Shift</kbd> + <kbd>↓</kbd></td> + <td><kbd>Shift</kbd> + <kbd>↓</kbd></td> + </tr> + <tr> + <th scope="row">選択中の値を 0.1 増やす</th> + <td><kbd>Alt</kbd> + <kbd>↑</kbd></td> + <td><kbd>Opt</kbd> + <kbd>↑</kbd></td> + <td><kbd>Alt</kbd> + <kbd>↑</kbd></td> + </tr> + <tr> + <th scope="row">選択中の値を 0.1 減らす</th> + <td><kbd>Alt</kbd> + <kbd>↓</kbd></td> + <td><kbd>Opt</kbd> + <kbd>↓</kbd></td> + <td><kbd>Alt</kbd> + <kbd>↓</kbd></td> + </tr> + <tr> + <th scope="row">選択中のプロパティーの詳細情報を表示する/隠す (計算済みビューでプロパティーを選択している場合に限る。Firefox 49 の新機能)</th> + <td><kbd>Enter</kbd> または <kbd>Space</kbd></td> + <td><kbd>Return</kbd> または <kbd>Space</kbd></td> + <td><kbd>Enter</kbd> または <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row">選択中のプロパティーに関する MDN のリファレンスページを開く (計算済みビューでプロパティーを選択している場合に限る。Firefox 49 の新機能)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row">選択中の CSS ファイルをスタイルエディターで開く (計算済みビューでプロパティーの詳細情報を表示しており、CSS ファイルへの参照にフォーカスをあてている場合に限る。Firefox 49 の新機能)</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Debugger" name="Debugger">デバッガー</h2> + +<div id="debugger"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">デバッガーを開く</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">現在のファイル内で文字列を検索する</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">現在のファイル内で次を探す</th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + </tr> + <tr> + <th scope="row">スクリプトを名前で検索する</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row">ブレークポイントで実行を再開する</th> + <td><kbd>F8</kbd></td> + <td><kbd>F8</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">ステップオーバー</th> + <td><kbd>F10</kbd></td> + <td><kbd>F10</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F10</kbd></td> + </tr> + <tr> + <th scope="row">ステップイン</th> + <td><kbd>F11</kbd></td> + <td><kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">ステップアウト</th> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + </tr> + </tbody> +</table> + +<p><a name="mac-function-key-note">1. 一部の Mac はデフォルトで、ファンクションキーが特別な機能に再割り当てされています。例えば、画面の明るさや音量の変更です。</a><a href="http://support.apple.com/kb/HT3399" title="http://support.apple.com/kb/HT3399">これらのキーを標準的なファンクションキーとして使用するためのガイド</a> (<a href="https://support.apple.com/ja-jp/HT3399">日本語版</a>) をご覧ください。再割り当てされたキーを標準的なファンクションキーとして使用するには、同時に Function キーも押下してください (よってプロファイラーを開くには、<kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd> を押してください)。</p> +</div> + +<h2 id="Debugger_(Before_Firefox_52)" name="Debugger_(Before_Firefox_52)">デバッガー (Firefox 52より前)</h2> + +<div id="old-debugger"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">デバッガーを開く</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row"><a href="/ja/docs/Tools/Debugger/How_to/Search_and_filter" title="Tools/Debugger/How_to/Search_and_filter">スクリプトフィルター</a> で現在のソースを検索する</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">表示中のソース内で次を検索する</th> + <td><kbd>Enter</kbd> / <kbd>↑</kbd></td> + <td><kbd>Return</kbd> / <kbd>↑</kbd></td> + <td><kbd>Enter</kbd> / <kbd>↑</kbd></td> + </tr> + <tr> + <th scope="row">表示中のソース内で前を検索する</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>↓</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd> / <kbd>↓</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>↓</kbd></td> + </tr> + <tr> + <th scope="row"><a href="/ja/docs/Tools/Debugger/How_to/Search_and_filter" title="Tools/Debugger/How_to/Search_and_filter">スクリプトフィルター</a> ですべてのソースを検索する</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">ファイル名でスクリプトを検索する</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">関数定義を検索する</th> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row">実行停止中に変数をフィルタリングする</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row">ブレークポイントから実行を再開する</th> + <td><kbd>F8</kbd></td> + <td><kbd>F8</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">ステップオーバー</th> + <td><kbd>F10</kbd></td> + <td><kbd>F10</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F10</kbd></td> + </tr> + <tr> + <th scope="row">ステップイン</th> + <td><kbd>F11</kbd></td> + <td><kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">ステップアウト</th> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">選択中の行でブレークポイントの設定を切り替える</th> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row">選択中の行で条件付きブレークポイントの設定を切り替える</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row">選択しているテキストを監視式に追加する</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row"><a href="/ja/docs/Tools/Debugger/How_to/Search_and_filter" title="Tools/Debugger/How_to/Search_and_filter">スクリプトフィルター</a> で行移動する</th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row"><a href="/ja/docs/Tools/Debugger/How_to/Search_and_filter" title="Tools/Debugger/How_to/Search_and_filter">スクリプトフィルター</a> で検索する</th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row"><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane">ソースペイン</a> で関数定義にジャンプする (Firefox 44 の新機能)</th> + <td><kbd>Ctrl</kbd> + クリック</td> + <td><kbd>Cmd</kbd> + クリック</td> + <td><kbd>Ctrl</kbd> + クリック</td> + </tr> + </tbody> +</table> + +<p><a name="mac-function-key-note">1. 一部の Mac はデフォルトで、ファンクションキーが特別な機能に再割り当てされています。例えば、画面の明るさや音量の変更です。</a><a href="http://support.apple.com/kb/HT3399" title="http://support.apple.com/kb/HT3399">これらのキーを標準的なファンクションキーとして使用するためのガイド</a> (<a href="https://support.apple.com/ja-jp/HT3399">日本語版</a>) をご覧ください。再割り当てされたキーを標準的なファンクションキーとして使用するには、同時に Function キーも押下してください (よってプロファイラーを開くには、<kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd> を押してください)。</p> +</div> + +<h2 id="Web_Console" name="Web_Console">ウェブコンソール</h2> + +<div id="web-console"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">ウェブコンソールを開く</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">メッセージ表示ペインで検索する</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row"><a href="/ja/docs/Tools/Web_Console#Inspecting_objects" title="Tools/Web_Console#Inspecting_objects">オブジェクトインスペクターペイン</a> を消去する</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">コマンドラインにフォーカスをあてる</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">ウェブコンソールの内容を消去する</th> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>Firefox 44 以降:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>Firefox 44 以降:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Command_line_interpreter" name="Command_line_interpreter">コマンドラインインタプリター</h3> + +<p>これらのショートカットは、<a href="/ja/docs/Tools/Web_Console#The_command_line_interpreter" title="Tools/Web_Console#The_command_line_interpreter">コマンドラインインタプリター</a> 内で動作します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">コンソール出力の先頭にスクロールする (コマンドラインが未入力の場合にのみ動作します)</th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row">コンソール出力の最後にスクロールする (コマンドラインが未入力の場合にのみ動作します)</th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + <tr> + <th scope="row">コンソールの出力を上にスクロールする</th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row">コンソールの出力を下にスクロールする</th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row"><a href="/ja/docs/Tools/Web_Console#Command_history" title="Tools/Web_Console#Command_history">コマンド履歴</a> で前の項目に移動する</th> + <td><kbd>↑</kbd></td> + <td><kbd>↑</kbd></td> + <td><kbd>↑</kbd></td> + </tr> + <tr> + <th scope="row">コマンド履歴で次の項目に移動する</th> + <td><kbd>↓</kbd></td> + <td><kbd>↓</kbd></td> + <td><kbd>↓</kbd></td> + </tr> + <tr> + <th scope="row">行の先頭に移動する</th> + <td><kbd>Home</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">行の末尾に移動する</th> + <td><kbd>End</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">現在の式を実行する</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">複数行の式を入力するため、新しい行を追加する</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Autocomplete_popup" name="Autocomplete_popup">オートコンプリートのポップアップ</h3> + +<p>これらのショートカットは、<a href="/ja/docs/Tools/Web_Console#Autocomplete">オートコンプリートのポップアップ</a> を表示しているときに動作します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">現在のオートコンプリート候補を受け入れる</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">オートコンプリートのポップアップをキャンセルする</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">前のオートコンプリート候補に移動する</th> + <td><kbd>↑</kbd></td> + <td><kbd>↑</kbd></td> + <td><kbd>↑</kbd></td> + </tr> + <tr> + <th scope="row">次のオートコンプリート候補に移動する</th> + <td><kbd>↓</kbd></td> + <td><kbd>↓</kbd></td> + <td><kbd>↓</kbd></td> + </tr> + <tr> + <th scope="row">オートコンプリート候補を上にスクロールする</th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row">オートコンプリート候補を下にスクロールする</th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row">最初のオートコンプリート候補にスクロールする</th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row">最後のオートコンプリート候補にスクロールする</th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Style_Editor" name="Style_Editor">スタイルエディター</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">スタイルエディターを開く</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">オートコンプリートのポップアップを開く</th> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + </tr> + </tbody> +</table> + +<div id="scratchpad"> +<h2 id="Scratchpad" name="Scratchpad">スクラッチパッド</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">スクラッチパッドを開く</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">スクラッチパッドのコードを実行</th> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">スクラッチパッドのコードを実行して、結果を <a href="/ja/docs/Tools/Web_Console#Inspecting_objects" title="Tools/Web_Console#Inspecting_objects">オブジェクトインスペクター</a> で表示する</th> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">スクラッチパッドのコードを実行して、結果をコメントとして挿入する</th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row">現在の関数を再評価する</th> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">カレントページを再読み込みして、スクラッチパッドのコードを実行する</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">スクラッチパッドの内容を保存する</th> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">既存のスクラッチパッドファイルを開く</th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">新しいスクラッチパッドを作成する</th> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>N</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + </tr> + <tr> + <th scope="row">スクラッチパッドを閉じる</th> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>W</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + </tr> + <tr> + <th scope="row">スクラッチパッド内のコードを整形する</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row">オートコンプリート候補を表示する</th> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row">インラインドキュメントを表示する</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="eyedropper"> +<h2 id="Eyedropper" name="Eyedropper">スポイト</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">操作</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">現在の色を選択する</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">スポイトを破棄する</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">1 ピクセル移動する</th> + <td><kbd>矢印キー</kbd></td> + <td><kbd>矢印キー</kbd></td> + <td><kbd>矢印キー</kbd></td> + </tr> + <tr> + <th scope="row">10 ピクセル移動する</th> + <td><kbd>Shift</kbd> + <kbd>矢印キー</kbd></td> + <td><kbd>Shift</kbd> + <kbd>矢印キー</kbd></td> + <td><kbd>Shift</kbd> + <kbd>矢印キー</kbd></td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ja/tools/measure_a_portion_of_the_page/index.html b/files/ja/tools/measure_a_portion_of_the_page/index.html new file mode 100644 index 0000000000..b7bec3bdc8 --- /dev/null +++ b/files/ja/tools/measure_a_portion_of_the_page/index.html @@ -0,0 +1,36 @@ +--- +title: ページの一部を測定する +slug: Tools/Measure_a_portion_of_the_page +tags: + - DevTools + - Firefox + - ツール + - 測定 +translation_of: Tools/Measure_a_portion_of_the_page +--- +<div>{{ToolsSidebar}}</div> + +<p class="geckoVersionNote">Firefox 59の新機能</p> + +<p>Firefox 59以降、<em>ページの一部を測定</em> ツールを使用してWebページの特定の領域を測定することができます。</p> + +<p>このツールはデフォルトでは表示されません。ボタンを有効にするには：</p> + +<ul> + <li>DevTools の<a href="/ja/docs/Tools/Tools_Toolbox#Settings">設定</a>に進みます</li> + <li>使用可能なツールボックスボタンから、ページの一部の測定チェックボックスをオンにします</li> +</ul> + +<p>[設定/オプション]ボタンと同じ場所に、ツールボックスの右上にある[ページの一部を測定]ボタンが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15787/measure-button.png" style="display: block; height: 190px; margin: 0px auto; width: 324px;"></p> + +<p>ツールを使用する場合はこのボタンをクリックします。これで、ビューポート上にマウスを置くと、そのマウスの横に現在の座標が表示された十字カーソルが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15786/cursor-shown.png" style="border-style: solid; border-width: 1px; display: block; height: 277px; margin: 0px auto; width: 447px;"></p> + +<p>マウスボタンを押したままドラッグすると、x、y、および対角線の寸法が表示された長方形が描画されます。単位はピクセルです。</p> + +<p>マウスを押し下げるのを止めると、ボタンを放したとき画面上に表示されていた長方形は、再びクリックするまでそこにとどまり、スクリーンショットを撮ることや、情報を書き留めることなどができるようになります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15785/box-shown.png" style="border-style: solid; border-width: 1px; display: block; height: 303px; margin: 0px auto; width: 438px;"></p> diff --git a/files/ja/tools/memory/aggregate_view/index.html b/files/ja/tools/memory/aggregate_view/index.html new file mode 100644 index 0000000000..8517a99791 --- /dev/null +++ b/files/ja/tools/memory/aggregate_view/index.html @@ -0,0 +1,150 @@ +--- +title: 総計ビュー +slug: Tools/Memory/Aggregate_view +translation_of: Tools/Memory/Aggregate_view +--- +<div>{{ToolsSidebar}}</div><p>Firefox 48 より前のバージョンでは、このビューがヒープスナップショットの既定のビューでした。Firefox 48 より既定のビューが<a href="/ja/docs/Tools/Memory/Tree_map_view"> ツリーマップビュー </a>になりましたが、"表示:" のドロップダウンリストで総計ビューに切り替えできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13028/memory-tool-switch-view.png" style="display: block; height: 270px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>総計ビューは、以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13030/memory-tool-aggregate-view.png" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>これは、ヒープの内容の内訳を表形式で表示します。データをグループ化する方法は、主に 3 つあります:</p> + +<ul> + <li>{{anch("Type")}}</li> + <li>{{anch("Call Stack")}}</li> + <li>{{anch("Inverted Call Stack")}}</li> +</ul> + +<p>これらは、パネルの上部にある "グループ化" ドロップダウンリストで変更できます:</p> + +<p>また、ペインの右上に "フィルター" と表示されているボックスがあります。表示するスナップショットの内容をフィルタリングできますので、例えば特定のクラスのオブジェクトがいくつアロケートされているかをすばやく確認できます。</p> + +<h2 id="Type" name="Type">Type</h2> + +<p>これはデフォルトのビューであり、以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13030/memory-tool-aggregate-view.png" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>このビューは、ヒープの内容を以下のタイプに分類します:</p> + +<ul> + <li><strong>JavaScript オブジェクト:</strong> <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code> や <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> など。</li> + <li><strong>DOM 要素:</strong> <code><a href="/ja/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> や <code><a href="/ja/docs/Web/API/Window">Window</a></code> など。</li> + <li><strong>文字列:</strong> <code>"strings"</code> として表示。</li> + <li><strong>JavaScript ソース:</strong> "<code>JSScript"</code> として表示。</li> + <li><strong>内部オブジェクト:</strong> "<code>js::Shape</code>" など。これらは接頭辞 <code>"js::"</code> がつきます。</li> +</ul> + +<p>それぞれのタイプを表の行に表示して、これらの行は、そのタイプのオブジェクトが占めるメモリーの量の順に並べます。例えば前出のスクリーンショットでは、JavaScript の <code>Object</code> がもっとも多くのメモリ、また strings が 2 番目に多くのメモリーを占めていることがわかります。</p> + +<ul> + <li>"合計数" 列では、現時点で割り当てられているオブジェクトの数をカテゴリー別に表示します。</li> + <li>"合計バイト" 列でそれぞれのカテゴリーのオブジェクトが占めるメモリーのバイト数と、タブの合計ヒープサイズに対する割合を表示します。</li> +</ul> + +<div class="pull-aside"> +<div class="moreinfo">このセクションのスクリーンショットは、<a href="/ja/docs/Tools/Memory/Monster_example">monster example page</a> のスナップショットから取得しました。</div> +</div> + +<p>例えば前出のスクリーンショットでは、以下のことがわかります:</p> + +<ul> + <li><code>Array</code> オブジェクトが 4 個ある。</li> + <li>それらはヒープ全体の 15% を占める。</li> +</ul> + +<p>タイプ名の隣に、3 つの星印が三角形のように配置されているアイコンがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13054/memory-tool-in-group-icon.png" style="display: block; height: 136px; margin-left: auto; margin-right: auto; width: 496px;"></p> + +<p>これをクリックすると、そのタイプのすべてのインスタンスを確認できます。例えば <code>Array</code> では、スナップショット内に <code>Array</code> オブジェクトが 4 個あると表示しています。3 つの星印をクリックすると、4 個の <code>Array</code> インスタンスを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13032/memory-tool-in-group.png" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>それぞれのインスタンスで、<a href="/ja/docs/Tools/Memory/Dominators#Shallow_and_retained_size">保持サイズとシャローサイズ </a>を確認できます。このスクリーンショットでは、上から 3 個の配列のシャローサイズがかなり多く (ヒープ全体の 5%)、またより多くの保持サイズ (全体の 26%) を占めていることがわかります。</p> + +<p>右側には、"保持パスを表示するノードを選択してください" と表示されているペインがあります。項目を選択すると、その項目の<a href="/ja/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel"> 保持パスパネル</a> を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13034/memory-tool-in-group-retaining-paths.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 716px;"></p> + +<p>{{EmbedYouTube("uLjzrvx_VCg")}}</p> + +<h2 id="Call_Stack" name="Call_Stack">Call Stack</h2> + +<p>Call Stack では、コードのどこでメモリーの割り当てを行っているかを表示します。</p> + +<p>メモリー割り当てのトレースは負荷が高いため、スナップショットでメモリー割り当てが行われる前に "割り当てスタックを記録" にチェックを入れて、明示的に有効化しなければなりません:</p> + +<p>オブジェクトの割り当てを行ったすべての関数を、割り当てたサイズ順に並べて表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13040/memory-tool-call-stack.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 762px;"><br> + <br> + このビューの構造は<a href="/ja/docs/Tools/Performance/Call_Tree"> コールツリー </a>の構造とよく似ていますが、プロセッサーのサンプルではなく割り当てのみ表示します。例えば、最初の項目では以下のことがわかります:</p> + +<ul> + <li>ヒープ全体の 93% を占める 4,832,592 バイトを、"alloc.js" の 35 行目にある関数<strong>またはその関数が呼び出した関数</strong>が割り当てました。</li> +</ul> + +<p>展開用の三角印を使用してコールツリーの細分化が可能であり、コード内で割り当てを行った箇所を正確に知ることができます。</p> + +<p>シンプルな例を使用して、簡単に説明します。ここでは <a href="/ja/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a> を使用します。このページは大量の DOM ノード (200 個の <code><a href="/ja/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> オブジェクトと 4000 個の <code><a href="/ja/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> オブジェクト) を生成するスクリプトを実行します。</p> + +<p>メモリ割り当てをトレースしてみましょう:</p> + +<ol> + <li>メモリツールを開きます。</li> + <li>"割り当てスタックを記録" にチェックを入れます。</li> + <li><a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a> を開きます。</li> + <li>スナップショットを採取します。</li> + <li>"表示/総計" を選択します。</li> + <li>"グループ化/Call Stack" を選択します。</li> +</ol> + +<p>{{EmbedYouTube("DyLulu9eoKY")}}</p> + +<p>ビューは以下のようになるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13040/memory-tool-call-stack.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 762px;"></p> + +<p>これは、ヒープスナップショット全体の 93% を "alloc.js" の 35 行目で呼び出した関数 (始めに呼び出す <code>createToolbars()</code>) が割り当てていることを示しています。</p> + +<p>展開用の三角印を使用してツリーを展開すると、どこでメモリーの割り当てを行っているかを正確に知ることができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13042/memory-tool-call-stack-expanded.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 762px;"></p> + +<p>ここでは "バイト" 列と "個数" 列が役に立ちます。これは割り当てたメモリーのサイズと、割り当て数を示します。</p> + +<p>前出の例では <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/dom-allocs/scripts/alloc.js#L9">alloc.js の 9 行目・23 桁目</a> にある <code>createToolbarButton()</code> で 4002 個のメモリー領域を割り当てており、それはヒープ全体の 84% を占めています。つまり正確な場所は、{{HTMLElement("span")}} 要素を生成している場所です。</p> + +<p>ファイル名と行番号はリンクになっています。クリックすると、デバッガーでその行を表示します:</p> + +<p>{{EmbedYouTube("zlnJcr1IFyY")}}</p> + +<h2 id="Inverted_Call_Stack" name="Inverted_Call_Stack">Inverted Call Stack</h2> + +<p>Call Stack ビューは、トップダウン型です。これは、メモリーの割り当てが発生した箇所を<strong>コールツリーの深部に表示します</strong>。よって、プログラムのどこでメモリーを大量に消費しているかの概要を知るのに適しています。しかし、このビューでは割り当てが発生した正確な場所を知るために、ツリーを長くたどらなければなりません。</p> + +<p>"Inverted Call Stack" ビューが役に立ちます。これはメモリー割り当てが発生した正確な場所を、割り当てサイズの順に並べたボトムアップ型のビューです。ツリーを展開すると、トップレベルに向かってコールツリーをたどります。</p> + +<p>上記の例で "Inverted Call Stack" を選択すると、どのようになるかを見てみましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13044/memory-tool-inverted-call-stack.png" style="display: block; height: 141px; margin-left: auto; margin-right: auto; width: 762px;"></p> + +<p>リストの最初に、ページでヒープの 89% を占めている <code>createToolbarButton()</code> があります。</p> + +<h2 id="(no_stack_available)" name="(no_stack_available)">(有効なスタックはありません)</h2> + +<p>前出の例で、ヒープの 7% が "(有効なスタックはありません)" であることに気づいているでしょう。これは、ヒープのすべてを JavaScript で使用しているわけではないためです。</p> + +<p>例えば、以下のようなものがあります:</p> + +<ul> + <li>ページで読み込んだスクリプトが、ヒープ領域を使用しています。</li> + <li>JavaScript がスタックに存在しないときに、オブジェクトが割り当てられる場合があります。例えば DOM の {{domxref("Event")}} は、JavaScript を実行してイベントハンドラーを呼び出す前に割り当てられます。</li> +</ul> + +<p>実在するページの多くは、"(有効なスタックはありません)" の割合が 7% を超えます。</p> diff --git a/files/ja/tools/memory/basic_operations/index.html b/files/ja/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..0684ae5d1b --- /dev/null +++ b/files/ja/tools/memory/basic_operations/index.html @@ -0,0 +1,64 @@ +--- +title: 基本操作 +slug: Tools/Memory/Basic_operations +translation_of: Tools/Memory/Basic_operations +--- +<div>{{ToolsSidebar}}</div><h2 id="Opening_the_Memory_tool" name="Opening_the_Memory_tool">メモリーツールを開く</h2> + +<p>Firefox 50 より前のバージョンでは、メモリーツールをデフォルトで無効化しています。有効化するには開発ツールのオプションを開き、"標準の Firefox 開発ツール" 配下の "メモリー" にチェックを入れてください:</p> + +<p>{{EmbedYouTube("qi-0CoCOXwc")}}</p> + +<p>Firefox 50 より、メモリーツールをデフォルトで有効化しています。</p> + +<h2 id="Taking_a_heap_snapshot" name="Taking_a_heap_snapshot">ヒープのスナップショットを採取する</h2> + +<p>" スナップショットを採取 " ボタンまたはツールの左側にあるカメラのアイコンをクリックすると、ヒープのスナップショットを採取します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13651/memory-1-small.png" style="display: block; height: 244px; margin: 0px auto; width: 900px;"></p> + +<p>スナップショットは、右側にある大きなペインを占めています。左側には、新しいスナップショットの項目をタイムスタンプ、サイズ、保存や削除のためのコントロールとともに表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13653/memory-2-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<h2 id="Clearing_a_snapshot" name="Clearing_a_snapshot">スナップショットを削除する</h2> + +<p>" X " 印のアイコンをクリックすると、スナップショットを削除します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13655/memory-3-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<h2 id="Saving_and_loading_snapshots" name="Saving_and_loading_snapshots">スナップショットの保存と読み込み</h2> + +<p>メモリーツールを閉じると、保存していないスナップショットはすべて破棄されます。" 保存 " をクリックすると、スナップショットを保存します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13657/memory-4-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<p>保存先やファイル名を求められます。そしてファイルは、<code>.fxsnapshot</code> という拡張子をつけて保存されます。</p> + +<p>既存の <code>.fxsnapshot</code> ファイルからスナップショットを読み込むには、四角形から上向きの矢印が出ているデザインのインポートボタン (Firefox 49 より前のバージョンでは、" Import... " というラベルがついていました) をクリックします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13659/memory-5-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<p>ディスク上のファイルを選択するよう、求められます。</p> + +<h2 id="Comparing_snapshots" name="Comparing_snapshots">スナップショットを比較する</h2> + +<p>Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリーのアロケートや空き状態の違いを表示します。</p> + +<p>差分を作成するには、カメラのアイコンの隣にあるベン図のボタンを押下してください (Firefox 47 より前は、" +/- " 印のアイコンでした)。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13661/memory-6-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<p>始めにベースラインのスナップショット、続いて比較するスナップショットを選択するよう求められます。ツールが 2 つのスナップショットの差分を表示します:</p> + +<p>{{EmbedYouTube("3Ow-mdK6b2M")}}</p> + +<div class="note"> +<p>差分を表示しているとき、ドミネータービューやツリーマップは使用できません。</p> +</div> + +<h2 id="Recording_call_stacks" name="Recording_call_stacks">コールスタックを記録する</h2> + +<p>メモリーツールは、コードのどこでメモリの割り当てを行っているかを表示できます。ただしこの情報の記録は実行時の負荷が高いため、スナップショット内でメモリー呼び出しを行った場所を確認したい場合は、メモリー割り当ての<em>前に</em>ツールに対してメモリー呼び出しを記録するよう要求しなければなりません。記録するには、"コールスタックを記録" (Firefox 49 より前は "割り当てスタックを記録" でした) にチェックを入れます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13663/memory-7-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> diff --git a/files/ja/tools/memory/comparing_heap_snapshots/index.html b/files/ja/tools/memory/comparing_heap_snapshots/index.html new file mode 100644 index 0000000000..ccd50f7618 --- /dev/null +++ b/files/ja/tools/memory/comparing_heap_snapshots/index.html @@ -0,0 +1,14 @@ +--- +title: ヒープのスナップショットを比較する +slug: Tools/Memory/Comparing_heap_snapshots +translation_of: Tools/Memory/Basic_operations +--- +<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/memory/dom_allocation_example/index.html b/files/ja/tools/memory/dom_allocation_example/index.html new file mode 100644 index 0000000000..e8449908ce --- /dev/null +++ b/files/ja/tools/memory/dom_allocation_example/index.html @@ -0,0 +1,54 @@ +--- +title: DOMの割り当て例 +slug: Tools/Memory/DOM_allocation_example +translation_of: Tools/Memory/DOM_allocation_example +--- +<div>{{ToolsSidebar}}</div><p>この記事では、メモリーツールの機能を示すために使用するシンプルなページについて説明します。</p> + +<p>これは <a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a> で試すことができます。</p> + +<p>このページは、大量の DOM ノードを生成するスクリプトが含まれています:</p> + +<pre class="brush: js">var toolbarButtonCount = 20; +var toolbarCount = 200; + +function getRandomInt(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +function createToolbarButton() { + var toolbarButton = document.createElement("span"); + toolbarButton.classList.add("toolbarbutton"); + // stop Spidermonkey from sharing instances + toolbarButton[getRandomInt(0,5000)] = "foo"; + return toolbarButton; +} + +function createToolbar() { + var toolbar = document.createElement("div"); + // stop Spidermonkey from sharing instances + toolbar[getRandomInt(0,5000)] = "foo"; + for (var i = 0; i < toolbarButtonCount; i++) { + var toolbarButton = createToolbarButton(); + toolbar.appendChild(toolbarButton); + } + return toolbar; +} + +function createToolbars() { + var container = document.getElementById("container"); + for (var i = 0; i < toolbarCount; i++) { + var toolbar = createToolbar(); + container.appendChild(toolbar); + } +} + +createToolbars();</pre> + +<p>このコードの動作を簡単に表現すると、以下のようになります:</p> + +<pre>createToolbars() + -> createToolbar() // 200 回呼び出され、毎回 1 個の DIV 要素を生成します + -> createToolbarButton() // Toolbar ごとに 20 回呼び出され、毎回 1 個の SPAN 要素を生成します</pre> + +<p>最終的に、200 個の <code><a href="/ja/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> オブジェクトと 4,000 個の <code><a href="/ja/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> オブジェクトを生成します。</p> diff --git a/files/ja/tools/memory/dominators/index.html b/files/ja/tools/memory/dominators/index.html new file mode 100644 index 0000000000..3db9506921 --- /dev/null +++ b/files/ja/tools/memory/dominators/index.html @@ -0,0 +1,61 @@ +--- +title: ドミネーター +slug: Tools/Memory/Dominators +translation_of: Tools/Memory/Dominators +--- +<div>{{ToolsSidebar}}</div><div class="summary" id="Concepts"> +<p>本記事では JavaScript のようなガベージコレクションを行う言語に適用される <em>到達可能性</em>、<em>シャロー</em>サイズと <em>保持</em>サイズ、支配ノードの概念を紹介します。</p> + +<p>オブジェクト自体は小さくても他の大きなオブジェクトを多数参照する場合があり、ガベージコレクターが多くのメモリーを解放できなくなる可能性があることから、この概念はメモリーの分析において重要です。</p> + +<p>メモリーツールの <a href="/ja/docs/Tools/Memory/Dominators_view">ドミネータービュー</a>を使用して、ページ内の支配ノードを確認できます。</p> +</div> + +<p>JavaScript のようにガベージコレクションを行う言語では、通常プログラマーはメモリーの解放について悩む必要はありません。プログラマーはオブジェクトを作成および使用するだけでよく、オブジェクトが不要になればランタイムがクリーンアップを引き受けて、オブジェクトが占有していたメモリを解放します。</p> + +<h2 id="Reachability" name="Reachability">到達可能性</h2> + +<p>現代の JavaScript 実装では、ランタイムは <em>Reachability</em> に基づいてオブジェクトが不要であるかを判断します。このシステムでは、ヒープを 1 つ以上のグラフで表します。グラフ内の各ノードはオブジェクトを表し、ノード (の縁) 同士の接続はあるオブジェクトから別のオブジェクトへの参照を表します。グラフはルートノードから始まります。本記事の図ではルートノードを "R" で示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12383/memory-graph.svg" style="display: block; height: 268px; margin-left: auto; margin-right: auto; width: 384px;"></p> + +<p>ガベージコレクションを行うとき、ランタイムはグラフをルートから走査して、発見したすべてのオブジェクトに印をつけます。発見されないオブジェクトは到達性がないので、解放できます。</p> + +<p>従ってオブジェクトの到達性がなくなると (例えば、スコープから外れたローカル変数1個からしか参照されていないオブジェクト)、そのオブジェクトが参照するオブジェクトも、他のオブジェクトから参照されていなければ到達性がなくなります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12375/memory-graph-unreachable.svg" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 383px;"></p> + +<p>逆に、到達性がある他のオブジェクトがそれらを参照し続けている間は、維持され続けることになります。</p> + +<h2 id="Shallow_and_retained_size" name="Shallow_and_retained_size">シャローサイズと保持サイズ</h2> + +<p>この考え方から、オブジェクトのサイズを調べる方法が 2 つに区別されます:</p> + +<ul> + <li><em>シャローサイズ</em>: オブジェクト自体のサイズ</li> + <li><em>保持サイズ</em>: オブジェクト自体のサイズと、オブジェクトが維持し続けている他のオブジェクトのサイズを合算したサイズ</li> +</ul> + +<p>通常、オブジェクトのシャローサイズは小さいのですが、保持サイズは参照により他のオブジェクトを含むために大きくなります。保持サイズは " このオブジェクトが存在しなくなると、メモリーがどれだけ解放されるか？ " という疑問への答えになりますので、メモリー使用量の分析において重要な概念です。</p> + +<h2 id="Dominators" name="Dominators">支配ノード</h2> + +<p>関連する概念として支配ノードがあります。ルートノードからノード A に至るすべてのパスがノード B を通るとき、ノード B はノード A を支配すると言います:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12379/memory-graph-dominators.svg" style="display: block; height: 309px; margin-left: auto; margin-right: auto; width: 471px;"></p> + +<p>ノード A の支配ノードのいずれかが解放されると、ノード A 自体はガベージコレクションの対象に適した状態になります。</p> + +<p><a id="immediate_dominator" name="immediate_dominator">ノード B はノード A を支配しているが、ノード A の他の支配ノードが支配していないとき、ノード B はノード A の隣接支配ノードとなります:</a></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12381/memory-graph-immediate-dominator.svg" style="display: block; height: 309px; margin-left: auto; margin-right: auto; width: 467px;"></p> + +<p><a id="multiple-paths" name="multiple-paths">オブジェクト A が別のオブジェクト B および C から参照されている場合は少々とらえにくいのですが、どちらも A の支配ノードではありません。</a>これは、B または C のどちらかをグラフから削除しても、A は他の参照元によって維持され続けるためです。代わりに A の隣接支配ノードは、最初の共通の祖先になります:<br> + <img alt="" src="https://mdn.mozillademos.org/files/12331/memory-graph-dominator-multiple-references.svg" style="display: block; height: 283px; margin-left: auto; margin-right: auto; width: 211px;"></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/Dominator_%28graph_theory%29">Dominators in graph theory</a></li> + <li><a href="https://en.wikipedia.org/wiki/Tracing_garbage_collection">Tracing garbage collection</a></li> +</ul> diff --git a/files/ja/tools/memory/dominators_view/index.html b/files/ja/tools/memory/dominators_view/index.html new file mode 100644 index 0000000000..de2e20efd6 --- /dev/null +++ b/files/ja/tools/memory/dominators_view/index.html @@ -0,0 +1,154 @@ +--- +title: ドミネータービュー +slug: Tools/Memory/Dominators_view +translation_of: Tools/Memory/Dominators_view +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>ドミネータービューは、Firefox 46 の新機能です。</p> +</div> + +<p>Firefox 46 より、メモリーツールに新たなビューであるドミネータービューが加わりました。これは、サイトによって割り当てられたオブジェクトの " 保持サイズ " を知るのに役立ちます。保持サイズはオブジェクト自身のサイズと、参照によって保持されているオブジェクトのサイズを合算したものです。</p> + +<p>シャローサイズ、保持サイズ、ドミネーターが何かを知っている場合は、ドミネーターの UI のセクションに進んでください。そうでない場合は、<a href="/ja/docs/Tools/Memory/Dominators">ドミネーターの概念</a>の記事でこれらを調べたいと思うかもしれません。</p> + +<h2 id="Dominators_UI" name="Dominators_UI">ドミネータの UI</h2> + +<p>" 表示 " のドロップダウンリストで " ドミネーター " を選択すると、ドミネータービューを表示します。以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13627/dominators-1.png" style="display: block; height: 230px; margin: 0px auto; width: 800px;"></p> + +<p>ドミネータービューは 2 つのパネルで構成されます:</p> + +<ul> + <li><a href="/ja/docs/Tools/Memory/Dominators_view#Dominators_Tree_panel">ドミネーターツリーパネル</a>は、スナップショット内でどのノードがもっとも多くのメモリーを保持しているかを表示します。</li> + <li><a href="/ja/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">保持パスパネル</a> (Firefox 47 の新機能) は、ひとつのノードに対して 5 つの最短保持パスを表示します。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13629/dominators-2.png" style="display: block; margin: 0px auto;"></p> + +<h3 id="Dominators_Tree_panel" name="Dominators_Tree_panel">ドミネーターツリーパネル</h3> + +<p>ドミネーターツリーは、スナップショット内でどのオブジェクトがもっとも多くのメモリーを保持しているかを表示します。</p> + +<p>UI のメインエリアで、最初の行が "GC ルート" という名前になっています。この直下に、以下の項目が並びます:</p> + +<ul> + <li>すべての GC ルートノード。Gecko では複数のメモリーグラフが存在しますので、ルートも複数あります。多くの (たいていは一時的な) ルートが存在する場合があります。例えば、スタック内で割り当てられた変数はルートになる必要があります。また、内部キャッシュはそれらの要素のルートにする必要があるでしょう。</li> + <li>2 つの異なるルートから参照される、他のノード (この場合、どちらのルートもそのノードを支配しません)。</li> +</ul> + +<p>それぞれの項目で、以下の内容を表示します:</p> + +<ul> + <li>ノードの保持サイズを、バイト数および合計に対するパーセント値で示す</li> + <li>ノードのシャローサイズを、バイト数および合計に対するパーセント値で示す</li> + <li>ノードの名前と、メモリー上のアドレス</li> +</ul> + +<p>項目は、メモリーの保持サイズの大きさ順に並びます。例えば:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13631/dominators-3.png" style="display: block; height: 228px; margin: 0px auto; width: 700px;"></p> + +<p>このスクリーンショットでは、" GC ルート " の配下に項目が 5 つあることがわかります。始めの 2 つは Call オブジェクトと Window オブジェクトであり、それぞれスナップショットの総メモリ量の 21% と 8% を保持しています。また、これらのオブジェクトは " シャローサイズ " が比較的小さく、保持サイズのほぼすべては、支配しているオブジェクト内にあることもわかります。</p> + +<p>各 GC ルートの直下に、そのルートが <a href="/ja/docs/Tools/Memory/Dominators#immediate_dominator">隣接支配ノード </a>であるすべてのノードを配置します。これらのノードも、保持サイズ順に並びます。</p> + +<p>例えば、最初の Window オブジェクトをクリックします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13633/dominators-4.png" style="display: block; height: 292px; margin: 0px auto; width: 700px;"></p> + +<p>この Window は CSS2Properties オブジェクトを支配しており、その保持サイズはスナップショット全体の 2% であることがわかります。やはりシャローサイズはとても小さく、保持サイズのほぼすべてが、支配しているノード内にあります。Function の隣にある展開用の三角印をクリックすると、それらのノードを確認できます。</p> + +<p>この方法で、スナップショット内でどのオブジェクトがもっとも多くのメモリーを保持しているかを、すばやく把握できます。</p> + +<p><kbd>Alt</kbd> + クリックで、ノード配下のグラフ全体を展開できます。</p> + +<h4 id="Call_Stack" name="Call_Stack">コールスタック</h4> + +<p>ツール上部のツールバーに、"ラベル" という名称のドロップダウンリストがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13635/dominators-5.png" style="display: block; height: 224px; margin: 0px auto; width: 800px;"></p> + +<p>デフォルトでは " Type " に設定されています。一方、これを " Call Stack " に切り替えると、コードの中でオブジェクトを割り当てている場所はどこかを表示します。</p> + +<div class="note"> +<p>Firefox 46 では、このオプションの名称は " Allocation Stack " でした。</p> +</div> + +<p>ビューを表示するには、オブジェクトを割り当てるコードを実行する<em>前に</em> " コールスタックを記録 " のチェックボックスにチェックを入れなければなりません。そしてスナップショットを採取して、" ラベル " ドロップダウンリストで " Call Stack " を選択します。</p> + +<p>するとノードを割り当てた関数の名前、およびその関数が存在するファイルの名前、行番号、何文字目かをノードの名前に含めて表示します。ファイル名をクリックすると、デバッガーで該当箇所を表示します。</p> + +<p>{{EmbedYouTube("qTF5wCSD124")}}</p> + +<div class="note"> +<p>ここに " (有効なスタックはありません) " と表示される場合があります。特に、現在割り当てスタックはオブジェクトのみ記録しており、配列、文字列、内部構造は記録していません。</p> +</div> + +<h3 id="Retaining_Paths_panel" name="Retaining_Paths_panel">保持パスパネル</h3> + +<div class="geckoVersionNote">保持パスパネルは Firefox 47 の新機能です。</div> + +<p>保持パスパネルではあるノードについて、そのノードから GC ルートに戻る最短パスを 5 つ表示します。これによって、そのノードがガベージコレクションの対象にならないようにしているすべてのノードを知ることができます。オブジェクトがリークしていると思われる場合に、どのオブジェクトが参照を保持しているかを的確に示します。</p> + +<p>ドミネータツリーパネルでノードを選択すると、ノードの保持パスを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13637/dominators-6.png" style="display: block; height: 415px; margin: 0px auto; width: 800px;"></p> + +<p>ここでは Object を選択しており、GC ルートに戻るパスが 1 つあることがわかります。</p> + +<p>GC ルート <code>Window</code> は <code>HTMLDivElement</code> オブジェクトへの参照を保持しており、またそのオブジェクトが <code>Object</code> への参照を保持しています。ドミネーターツリーパネルを見ると、同じパスをたどることができます。これらの参照のどちらかが削除されると、配下のアイテムはガベージコレクションの対象になるでしょう。</p> + +<p>グラフ内の各接続に、参照されるオブジェクト用の変数の名称がついています。</p> + +<p>ノードから戻る保持パスが複数存在することがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13639/dominators-7.png" style="display: block; height: 455px; margin: 0px auto; width: 700px;"></p> + +<p>この図では、<code>DocumentPrototype</code> ノードから GC ルートに戻るパスが 3 つあります。ひとつが削除されても、ほかのパスが維持されていますので <code>DocumentPrototype</code> はガベージコレクションの対象になりません。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>シンプルなコードがどのようにドミネータービューへ反映されるかを見ていきましょう。</p> + +<p>ここでは <a href="/ja/docs/Tools/Memory/Monster_example">monster allocation example</a> を使用します。これは 3 個の配列を生成しており、それぞれに 5,000 体のモンスターが含まれています。また、それぞれのモンスターはランダムに生成された名前を持っています。</p> + +<h3 id="Taking_a_snapshot" name="Taking_a_snapshot">スナップショットを採取する</h3> + +<p>これがドミネータービューでどのように見えるかを確認します:</p> + +<ul> + <li>ページを読み込みます。</li> + <li>メモリーツールを有効化していない場合は、<a href="/ja/docs/Tools/Tools_Toolbox#Settings">オプション </a>で有効化します。</li> + <li>メモリーツールを開きます。</li> + <li>"コールスタックを記録" にチェックを入れます。</li> + <li>"Make monsters!" ボタンを押します。</li> + <li>スナップショットを採取します。</li> + <li>" ドミネーター " ビューに切り替えます。</li> +</ul> + +<p>{{EmbedYouTube("HiWnfMoMs2c")}}</p> + +<h3 id="Analyzing_the_Dominators_Tree" name="Analyzing_the_Dominators_Tree">ドミネーターツリーを分析する</h3> + +<p>上位 3 件の GC ルートが Array であり、それぞれ総メモリー使用量の約 23% を保持しています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13641/dominators-8.png" style="display: block; height: 165px; margin: 0px auto; width: 700px;"></p> + +<p>Array を展開すると、含まれているオブジェクト (モンスター) を表示します。それぞれのモンスターは、シャローサイズが 160 バイトと比較的小さくなっています。これは、目の数と触手の数の整数値を含んでいます。また各モンスターの保持サイズは大きく、これはモンスターの名前の文字列が占めています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13643/dominators-9.png" style="display: block; height: 327px; margin: 0px auto; width: 700px;"></p> + +<p>これらはすべて、<a href="/ja/docs/Tools/Memory/Monster_example#allocation-graph">予想したメモリーグラフ</a> に近い形で並んでいます。しかし、ひとつ不思議に思う点があるでしょう。3 つの Array を保持するトップレベルオブジェクトはどこにあるのでしょうか？ ある Array の保持パスを確認すると、以下のようになっているでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13645/dominators-10.png" style="display: block; height: 467px; margin: 0px auto; width: 700px;"></p> + +<p>ここでは保持するオブジェクトが見えており、またオブジェクト固有の Array は <code>fierce</code> モンスターの Array です。しかし Array はルートでもあるため、オブジェクトが Array を参照しなくなってもガベージコレクションの対象にはならないでしょう。</p> + +<p>これはオブジェクトが Array を支配していないため、ドミネータツリービューに表示されないということです。<a href="/ja/docs/Tools/Memory/Dominators#multiple-paths">ドミネータの概念の記事で関連する章をご覧ください</a>。</p> + +<h3 id="Using_the_Call_Stack_view" name="Using_the_Call_Stack_view">コールスタックビューを使用する</h3> + +<p>最後に、Call Stack ビューへ切り替えると、オブジェクトがどこで割り当てられたかを確認できます。また、デバッガーでその場所にジャンプできます:</p> + +<p>{{EmbedYouTube("qTF5wCSD124")}}</p> diff --git a/files/ja/tools/memory/index.html b/files/ja/tools/memory/index.html new file mode 100644 index 0000000000..5ead5856b4 --- /dev/null +++ b/files/ja/tools/memory/index.html @@ -0,0 +1,65 @@ +--- +title: メモリー +slug: Tools/Memory +tags: + - DevTools + - Firefox + - Mozilla + - Tools +translation_of: Tools/Memory +--- +<div>{{ToolsSidebar}}</div><p>メモリーツールを使用して、カレントタブのメモリー <a href="http://en.wikipedia.org/wiki/Memory_management#HEAP" title="heap">ヒープ</a> のスナップショットを取得できます。そして、どのオブジェクトがどれだけメモリーを使用しているかや、コードのどこでメモリーを割り当てているかを表示可能な、ヒープのさまざまなビューを提供します。</p> + +<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p> + +<hr> +<h3 id="The_basics" name="The_basics">基礎</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/ja/docs/Tools/Memory/Basic_operations#Opening_the_Memory_tool">メモリーツールを開く</a></li> + <li><a href="/ja/docs/Tools/Memory/Basic_operations#Taking_a_heap_snapshot">ヒープのスナップショットを採取する</a></li> + <li><a href="/ja/docs/Tools/Memory/Basic_operations#Comparing_snapshots">スナップショットを比較する</a></li> + <li><a href="/ja/docs/Tools/Memory/Basic_operations#Clearing_a_snapshot">スナップショットを削除する</a></li> + <li><a href="/ja/docs/Tools/Memory/Basic_operations#Saving_and_loading_snapshots">スナップショットの保存と読み込み</a></li> + <li><a href="/ja/docs/Tools/Memory/Basic_operations#Recording_call_stacks">コールスタックを記録する</a></li> +</ul> +</div> + +<hr> +<h3 id="Analyzing_snapshots" name="Analyzing_snapshots">スナップショットを分析する</h3> + +<div class="geckoVersionNote"> +<p>ツリーマップビューは Firefox 48 の新機能、ドミネータービューは Firefox 46 の新機能です。</p> +</div> + +<p>スナップショットを採取すると、メモリーツールは 3 つの主要なビューを提供します:</p> + +<ul> + <li><a href="/ja/docs/Tools/Memory/Tree_Map_view">ツリーマップビュー </a>はメモリーの使用状況を、<a href="https://en.wikipedia.org/wiki/Treemapping">ツリーマップ</a> で表示します。</li> + <li><a href="/ja/docs/Tools/Memory/Aggregate_view">総計ビュー</a> はメモリーの使用状況を、割り当てられた型による表形式で表示します。</li> + <li><a href="/ja/docs/Tools/Memory/Dominators_view">ドミネータービュー </a>は、オブジェクトの "保持サイズ" を表示します。これはオブジェクトのサイズと、そのオブジェクトが参照しているために維持されているオブジェクトのサイズを合算したものです。</li> +</ul> + +<p>スナップショットで割り当てスタックの記録を有効にすると、コードのどこで割り当てが行われたかを総計ビューとドミネータービューで表示できます。</p> + +<hr> +<h3 id="Concepts" name="Concepts">概念</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/ja/docs/Tools/Memory/Dominators">ドミネーター</a></li> +</ul> +</div> + +<hr> +<h3 id="Example_pages" name="Example_pages">サンプルページ</h3> + +<p>メモリーツールのドキュメントで使用しているサンプルです。</p> + +<div class="twocolumns"> +<ul> + <li><a href="/ja/docs/Tools/Memory/Monster_example">Monster example</a></li> + <li><a href="/ja/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a></li> +</ul> +</div> diff --git a/files/ja/tools/memory/monster_example/index.html b/files/ja/tools/memory/monster_example/index.html new file mode 100644 index 0000000000..3458550a5f --- /dev/null +++ b/files/ja/tools/memory/monster_example/index.html @@ -0,0 +1,81 @@ +--- +title: Monster example +slug: Tools/Memory/Monster_example +translation_of: Tools/Memory/Monster_example +--- +<div>{{ToolsSidebar}}</div><p>この記事では、メモリツールの機能を示すために使用するシンプルなページについて説明します。</p> + +<p>これは <a class="external external-icon" href="https://mdn.github.io/performance-scenarios/js-allocs/alloc.html">https://mdn.github.io/performance-scenarios/js-allocs/alloc.html</a> で試すことができます。コードは以下のとおりです:</p> + +<pre class="brush: js">var MONSTER_COUNT = 5000; +var MIN_NAME_LENGTH = 2; +var MAX_NAME_LENGTH = 48; + +function Monster() { + + function randomInt(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + } + + function randomName() { + var chars = "abcdefghijklmnopqrstuvwxyz"; + var nameLength = randomInt(MIN_NAME_LENGTH, MAX_NAME_LENGTH); + var name = ""; + for (var j = 0; j &lt; nameLength; j++) { + name += chars[randomInt(0, chars.length-1)]; + } + return name; + } + + this.name = randomName(); + this.eyeCount = randomInt(0, 25); + this.tentacleCount = randomInt(0, 250); +} + +function makeMonsters() { + var monsters = { + "friendly": [], + "fierce": [], + "undecided": [] + }; + + for (var i = 0; i &lt; MONSTER_COUNT; i++) { + monsters.friendly.push(new Monster()); + } + + for (var i = 0; i &lt; MONSTER_COUNT; i++) { + monsters.fierce.push(new Monster()); + } + + for (var i = 0; i &lt; MONSTER_COUNT; i++) { + monsters.undecided.push(new Monster()); + } + + console.log(monsters); +} + +var makeMonstersButton = document.getElementById("make-monsters"); +makeMonstersButton.addEventListener("click", makeMonsters);</pre> + +<p>このページにはボタンがあります。このボタンを押すと、コードがモンスターを生成します。詳細は以下のとおりです:</p> + +<ul> + <li>コードが 3 つのプロパティを持つオブジェクトを生成します。それぞれのプロパティは配列です: + <ul> + <li>どう猛なモンスター</li> + <li>友好的なモンスター</li> + <li>タイプがわかっていないモンスター</li> + </ul> + </li> + <li>コードはそれぞれの配列に、ランダムに初期化したモンスター 5000 体を生成および追加します。それぞれのモンスターは以下の属性を持ちます: + <ul> + <li>モンスターの名前を示す文字列</li> + <li>モンスターの目の数を表す数値</li> + <li>モンスターの触手の数を表す数値</li> + </ul> + </li> +</ul> + +<p>従って、JavaScript のヒープ上に割り当てられるメモリの構造は、3 つの配列を持つオブジェクトになります。それぞれの配列は 5000 個のオブジェクト (モンスター) を持ち、そのオブジェクトが文字列と 2 つの数値を持ちます:</p> + +<p><a name="allocation-graph"><img alt="" src="https://mdn.mozillademos.org/files/12369/monsters.svg" style="display: block; height: 521px; margin-left: auto; margin-right: auto; width: 500px;"></a></p> diff --git a/files/ja/tools/memory/tree_map_view/index.html b/files/ja/tools/memory/tree_map_view/index.html new file mode 100644 index 0000000000..2001846a58 --- /dev/null +++ b/files/ja/tools/memory/tree_map_view/index.html @@ -0,0 +1,45 @@ +--- +title: ツリーマップビュー +slug: Tools/Memory/Tree_map_view +translation_of: Tools/Memory/Tree_map_view +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>ツリーマップビューは、Firefox 48 の新機能です。</p> +</div> + +<p>ツリーマップビューはスナップショットを視覚的に表現して、どのオブジェクトがもっとも多くのメモリを使用しているかの見解をすばやく得る助けになります。</p> + +<p>ツリーマップは、<a href="https://en.wikipedia.org/wiki/Treemapping">"入れ子の長方形で表現した階層型 (木構造) のデータ"</a> を表示します。長方形のサイズは、データの量的な比率に対応します。</p> + +<p>メモリツールのツリーマップは、ヒープの内容物をトップレベルで 4 つのカテゴリに分類します:</p> + +<ul> + <li><strong>objects</strong>: JavaScript および DOM のオブジェクト。例えば <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> や、<code><a href="/ja/docs/Web/API/Window">Window</a></code>、<code><a href="/ja/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> などの DOM 型。</li> + <li><strong>scripts</strong>: ページで読み込んだ JavaScript ソース。</li> + <li><strong>strings</strong></li> + <li><strong>other</strong>: 内部の <a href="/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> オブジェクトを含みます。</li> +</ul> + +<p>それぞれのカテゴリを長方形で表現して、長方形のサイズはカテゴリ内のアイテムがヒープ内で占める割合に対応します。よって、あなたのサイトでどの種類のものがもっとも多くのメモリを使用しているかについて、おおまかな見解をすばやく得ることができます。</p> + +<p>トップレベルのカテゴリ内では、以下のように分割します:</p> + +<ul> + <li><strong>objects</strong> は、オブジェクトの型で分類します。</li> + <li><strong>scripts</strong> は、スクリプトの生成元で分類します。これは JIT で最適化されたコードなど、ファイルに関連付けることができないコードも、別の長方形として含まれます。</li> + <li><strong>other</strong> は、オブジェクトの型で分類します。</li> +</ul> + +<p>こちらが、ツリーマップビューで表示したスナップショットのサンプルです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13048/treemap-domnodes.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p> + +<p>このツリーマップは <a href="/ja/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a> で取得しました。このページは大量の DOM ノード (200 個の <code><a href="/ja/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> オブジェクトと 4000 個の <code><a href="/ja/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> オブジェクト) を生成するスクリプトを実行します。ヒープのほとんどすべてが、スクリプトで生成した <code>HTMLSpanElement</code> オブジェクトであることがわかります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13046/treemap-monsters.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p> + +<p>このツリーマップは、<a href="/ja/docs/Tools/Memory/Monster_example">monster allocation example</a> で取得しました。これは 3 個の配列を生成しており、それぞれに 5000 体のモンスターが含まれています。また、それぞれのモンスターはランダムに生成された名前を持っています。ヒープのほとんどがモンスターの名前で使用する文字列と、モンスターの他の属性を収めるために使用するオブジェクトで占められていることがわかります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13050/treemap-bbc.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p> + +<p>このツリーマップは <a href="http://www.bbc.com/">http://www.bbc.com/</a> で取得しました。前出のサンプルより現実的な見本であるといえるでしょう。ヒープの多くがスクリプトで占められており、それらは多数の生成元から読み込まれていることがわかります。</p> diff --git a/files/ja/tools/migrating_from_firebug/index.html b/files/ja/tools/migrating_from_firebug/index.html new file mode 100644 index 0000000000..79bb2c9bca --- /dev/null +++ b/files/ja/tools/migrating_from_firebug/index.html @@ -0,0 +1,245 @@ +--- +title: Firebug から移行する +slug: Tools/Migrating_from_Firebug +tags: + - Firebug + - Migration +translation_of: Tools/Migrating_from_Firebug +--- +<div>{{ToolsSidebar}}</div><p>Firebug から Firefox 開発ツールへ移行する際に、Firebug で愛用していた機能が開発ツールのどこにあるかと考えるかもしれません。以下のリストは、Firebug のユーザーが開発ツールへ移行するための支援を目指しています。</p> + +<h2 id="General" name="General">一般</h2> + +<h3 id="Activation" name="Activation">アクティブ化</h3> + +<p><a href="https://getfirebug.com/wiki/index.php/Activation">Firebug のアクティブ化</a> は、URL に基づいて <a href="https://ja.wikipedia.org/wiki/%E5%90%8C%E4%B8%80%E7%94%9F%E6%88%90%E5%85%83%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC">同一生成元ポリシー</a> に従います。すなわち、生成元が同じページを別のタブで開くと、Firebug が自動的に開きます。また、生成元が異なるページを同じタブで開くと、Firebug は自動的に閉じます。一方、開発ツールのアクティブ化はタブに基づきます。すなわち、あるタブで開発ツールを開くと、ウェブサイトを切り替えてもツールは開いたままです。しかし、別のタブに切り替えるとツールが閉じます。</p> + +<h3 id="Open_the_tools" name="Open_the_tools">ツールを開く</h3> + +<p>F12 を押下して Firebug を開くことができます。また、要素を調査するために Firebug を開くには <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>C</kbd> を押下します。開発ツールのキーボードショートカットも同じですが、<a href="/ja/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">別のパネルを開くキーボードショートカット</a> もあります。例えば <a href="/ja/docs/Tools/Network_Monitor">ネットワークモニター</a> を <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Q</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>Q</kbd>、<a href="/ja/docs/Tools/Web_Console">ウェブコンソール</a> を <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>K</kbd>、デバッガーを <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>S</kbd> で開くことができます。</p> + +<h2 id="Web_Console" name="Web_Console">ウェブコンソール</h2> + +<p><a href="/ja/docs/Tools/Web_Console">ウェブコンソール</a> は Firebug の <a href="https://getfirebug.com/wiki/index.php/Console_Panel">コンソールパネル</a> と同等です。これは、ウェブページに関する情報を記録します。また、<a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドライン</a> を使用して JavaScript の式を実行することができます。両者の表示は若干異なっています。これは {{bug(1269730)}} で変更する予定です。</p> + +<h3 id="Filter_log_messages" name="Filter_log_messages">ログメッセージのフィルタリング</h3> + +<p>Firebug にはログメッセージのフィルタリング方法が 2 つあり、ひとつは <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Options_Menu">オプションメニュー</a>、もう一つはツールバーの <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Filter_buttons">フィルターボタン</a> です。開発ツールのコンソールは、<a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category">ツールバー内のフィルターボタン</a> で同様の機能を提供しており、ひとつの方法にまとめられています。</p> + +<h3 id="Command_Line_API" name="Command_Line_API">コマンドライン API</h3> + +<p><a href="https://getfirebug.com/wiki/index.php/Command_Line_API">Firebug のコマンドライン API</a> は、利便性のための特別な機能を提供します。開発ツールのコマンドラインに <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">ある程度共通の機能</a> がありますが、異なる機能や欠けている機能があります。</p> + +<h3 id="Console_API" name="Console_API">コンソール API</h3> + +<p>ウェブページ内からコンソールに何かを記録するために Firebug は、ウェブページで使用できる <a href="https://getfirebug.com/wiki/index.php/Console_API">Console API</a> を作成しました。開発ツールも <a href="/ja/docs/Web/API/console">同じ API</a> を共有しており、<code>console.*</code> 文が引き続き動作します。</p> + +<h3 id="Persist_logs" name="Persist_logs">ログを残す</h3> + +<p>Firebug ではツールバーの <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Persist"><em>持続</em> ボタン</a> を押すと、ページを移動したり再読み込みしたりしてもメッセージを残すことができます。開発ツールではこの設定が <em><a href="/ja/docs/Tools/Settings#Common_preferences">ログ出力を残す</a></em> という名称であり、ツールボックスのオプションパネル内にあります。</p> + +<h3 id="Server_logs" name="Server_logs">サーバーのログ</h3> + +<p><a href="https://addons.mozilla.org/firefox/addon/firephp/">FirePHP</a> のような Firebug 拡張で、サーバーサイドのメッセージを Firebug のコンソールに記録できます。この機能は <a href="https://craig.is/writing/chrome-logger">ChromeLogger</a> プロトコルを使用してすでに <a href="/ja/docs/Tools/Web_Console/Console_messages#Server">開発ツールに統合されており</a>、拡張機能のインストールは不要です。</p> + +<h3 id="Command_history" name="Command_history">コマンド履歴</h3> + +<p>Firebug のコマンドラインにあるボタンで使用できる <a href="https://getfirebug.com/wiki/index.php/Command_Line#Command_History">コマンド履歴</a> は、<a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter#Command_history">開発ツールのコマンドラインで <kbd>↑</kbd>/<kbd>↓</kbd> を押下する</a> ことで使用できます。</p> + +<h3 id="Inspect_object_properties" name="Inspect_object_properties">オブジェクトの特性を調査する</h3> + +<p>コンソールに記録されたオブジェクトをクリックすると、<a href="https://getfirebug.com/wiki/index.php/DOM_Panel">DOM パネル</a> でオブジェクトのプロパティやメソッドを調査できます。Firefox 開発ツールでも、オブジェクトを調査できます。Firebug との違いは、<a href="/ja/docs/Tools/Web_Console/Rich_output#Examining_object_properties">ウェブコンソール内のサイドパネルにプロパティやメソッドを表示する</a> ことです。</p> + +<h3 id="Show_network_requests" name="Show_network_requests">ネットワークリクエストを表示する</h3> + +<p>Firebug のコンソールパネルで、({{Glossary("XMLHttpRequest", "XMLHttpRequests")}} による) {{Glossary("AJAX")}} リクエストを記録できます。この設定は開発ツールのウェブコンソールでも、<em>ネットワーク</em> > <em>XHR</em> で使用できます。さらにウェブコンソールでは <em>ネットワーク</em> > <em>ログ</em> で、ほかのネットワークリクエストもすべて表示できます。</p> + +<h3 id="View_JSON_and_XML_structures" name="View_JSON_and_XML_structures">JSON や XML 構造を表示する</h3> + +<p>JSON や {{Glossary("AJAX")}} リクエストの XML レスポンスを表示するために、Firebug にはコンソールパネル内でリクエストを展開する特別なタブがあります。開発ツールのウェブコンソールはこのような構造を、"応答" タブに直接表示します。</p> + +<h3 id="Multi-line_command_line" name="Multi-line_command_line">複数行のコマンドライン</h3> + +<p>Firebug のコンソールは <a href="https://getfirebug.com/wiki/index.php/Command_Editor">Command Editor</a> と呼ばれる、複数行のコマンドラインです。開発ツールには Command Editor のようなサイドパネルはありませんが (これは {{bug(1133849)}} で要望されています)、<a href="/ja/docs/Tools/Scratchpad">スクラッチパッド</a> と呼ばれる別のツールがあります。これは <a href="/ja/docs/Tools/Settings#Default_Firefox_Developer_Tools">パネルとしてツールボックスに追加する</a> か、Firefox メニュー > <em>開発ツール</em> > <em>スクラッチパッド</em> または <kbd>Shift</kbd> + <kbd>F4</kbd> で個別のウィンドウとして開くことができます。また通常のコマンドラインも、<code>document.</code> のような未完了のコマンドを認識した場合は、<kbd>Enter</kbd> を押下すると賢く改行を入力します。さらに、<kbd>Shift</kbd> + <kbd>Enter</kbd> を押下すれば手動で改行を入力できます。</p> + +<h3 id="Response_preview" name="Response_preview">レスポンスのプレビュー</h3> + +<p>Firebug でコンソールに記録されたネットワークリクエストを展開すると、<em>プレビュー</em> タブがあります。ウェブコンソールでは、<em>応答</em> タブでプレビューを表示します。現在は HTML、XML、SVG のプレビュー機能が欠けていますが、{{bug(1247392)}} および {{bug(1262796)}} で要望されています。ただし、リクエストの URL をクリックすると <a href="/ja/docs/Tools/Network_Monitor">ネットワークモニター</a> に切り替わり、こちらに <em>プレビュー</em> タブがあります。</p> + +<h2 id="Inspector" name="Inspector">インスペクター</h2> + +<p>Firebug には <a href="https://getfirebug.com/wiki/index.php/HTML_Panel">HTML パネル</a> があり、HTML/XML/SVG や、それらに関係する CSS を編集できます。開発ツールでは、<a href="/ja/docs/Tools/Page_Inspector">インスペクター</a> でこの機能を提供します。</p> + +<h3 id="Edit_HTML" name="Edit_HTML">HTML を編集する</h3> + +<p>インスペクターでは Firebug と同様に、タグの属性やコンテンツをインラインで編集できます。さらに、タグ名もインラインで編集できます。</p> + +<p>HTML を直接編集することもできます。Firebug ではノードを右クリックして、コンテキストメニューの [<a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Edit">HTML を編集</a>] を選択します。開発ツールのコンテキストメニューにも、このメニュー項目があります。開発ツールでは [<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Editing_HTML_2">HTML として編集</a>] という名称です。変更箇所のライブプレビュー機能だけが現時点で欠けており、{{bug(1067318)}} および {{bug(815464)}} で扱っています。</p> + +<h3 id="Copy_HTML_and_related_information" name="Copy_HTML_and_related_information">HTML や関連情報をコピーする</h3> + +<p>Firebug の HTML パネルでは要素のコンテキストメニューで、要素の innerHTML や outerHTML、CSS、XPath をコピーできます。インスペクターは XPath のコピーを除く、同じ機能を提供します。XPath のコピーは {{bug(987877)}} で扱っています。</p> + +<h3 id="Edit_CSS" name="Edit_CSS">CSS を編集する</h3> + +<p>どちらのツールも、ノードビューで選択した要素に関係する CSS ルールを、同様の方法で閲覧および編集できます。Firebug には <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel">スタイル サイドパネル</a>、開発ツールには <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">ルール サイドパネル</a> があります。</p> + +<p>Firebug では、右クリックしてコンテキストメニューの [<em><a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Context_Menu">ルールを追加</a></em>] を選択すると、新しいルールを追加します。開発ツールでも新しいルールを作成するために、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Add_rules">コンテキストメニューの [<em>新しいルールを追加</em>] という項目と、ルールパネルのツールバーの [+] ボタン</a> があります。</p> + +<p>要素のスタイルを編集する、すなわち要素の {{htmlattrxref("style")}} 属性の CSS プロパティを編集するために、Firebug ではスタイルパネルを右クリックして、コンテキストメニューの [<a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Context_Menu">要素のスタイルを編集</a>] を選択しなければなりません。開発ツールでは、この目的で <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#element_rule">要素 {} ルール</a> があり、ここを 1 回クリックするだけでプロパティを編集できます。</p> + +<h3 id="Auto-completion_of_CSS" name="Auto-completion_of_CSS">CSS のオートコンプリート</h3> + +<p>Firebug と同様に、ルールビューで CSS プロパティの名称や値のオートコンプリートを提供します。一部のプロパティ値はまだオートコンプリートができず、{{bug(1337918)}} で扱っています。</p> + +<h3 id="Copy_paste_CSS" name="Copy_paste_CSS">CSS のコピーと貼り付け</h3> + +<p>Firebug の スタイル サイドパネルも開発ツールの ルール サイドパネルもコンテキストメニューに、CSS ルールやスタイル宣言をコピーするためのメニュー項目があります。さらに開発ツールには、ルールのセレクターをコピーするメニュー項目や、コメントアウトにより無効なプロパティ宣言をコピーする機能があります。スタイル宣言全体をコピーする項目が欠けていますが、パネル内でそれらを選択して <kbd>Ctrl</kbd>+<kbd>C</kbd> またはコンテキストメニューを使用してコピーすることにより実現できます。</p> + +<p>開発ツールの ルール サイドパネルは、CSS を貼り付けるときの動作がよりスマートです。コメントアウトされたプロパティ宣言を自動的に無効化して、スタイル宣言全体を既存のルールに貼り付けできます。</p> + +<h3 id="Toggle_pseudo-classes" name="Toggle_pseudo-classes">疑似クラスを切り替える</h3> + +<p>Firebug の <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Options_Menu">スタイル サイドパネルのオプションメニュー</a> で、要素の {{cssxref(":hover")}}、{{cssxref(":active")}}、{{cssxref(":focus")}} 疑似クラスを切り替えることができます。開発ツールでは、同じことを行う方法が 2 つあります。ひとつは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Setting_hover_active_focus">ルール サイドパネル内の疑似クラスパネル</a> で切り替える方法です。もうひとつはノードビューで要素を右クリックして、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Context_menu_reference">コンテキストメニュー</a> で疑似クラスを切り替える方法です。</p> + +<h3 id="Examine_CSS_shorthand_properties" name="Examine_CSS_shorthand_properties">CSS ショートハンドプロパティを調査する</h3> + +<p>スタイル サイドパネルで [<em><a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Options_Menu">簡略プロパティを展開</a></em>] を設定すると、CSS <a href="/ja/docs/Web/CSS/Shorthand_properties">ショートハンドプロパティ</a> を、関係があるロングハンドプロパティに展開できます。開発ツールのルールパネルはよりスマートであり、プロパティのそばにある三角印をクリックすると、個々のショートハンドプロパティを展開できます。</p> + +<h3 id="Only_show_applied_styles" name="Only_show_applied_styles">適用されたスタイルのみ表示する</h3> + +<p><a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Options_Menu">Firebug のスタイル サイドパネル</a> に、選択した要素に適用された CSS ルールのプロパティのみ表示して、上書きされたスタイルはすべて隠す設定があります。開発ツールの <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">ルール サイドパネル</a> にそのような機能はありませんが、{{bug(1335327)}} で要望されています。</p> + +<h3 id="Inspect_box_model" name="Inspect_box_model">ボックスモデルを調査する</h3> + +<p>Firebug では、<a href="https://getfirebug.com/wiki/index.php/Layout_Side_Panel">レイアウト サイドパネル</a> で <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">ボックスモデル</a> を調査できます。開発ツールでは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">ボックスモデルが 計算済み サイドパネルの一部になっています</a>。どちらのツールもボックスモデルビューにマウスポインタを載せると、ページ上でボックスモデルのさまざまな部分を強調表示します。また、どちらのツールもボックスモデルをクリックすると、さまざまな値をインラインで編集できます。</p> + +<h3 id="Inspect_computed_styles" name="Inspect_computed_styles">計算済みスタイルを調査する</h3> + +<p>Firebug の <a href="https://getfirebug.com/wiki/index.php/Computed_Side_Panel">累積 サイドパネル</a> と同様に、開発ツールの <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">計算済み サイドパネル</a> で CSS プロパティの計算済みの値を表示します。両者の違いは、開発ツールはプロパティを常にアルファベット順に並べておりグループ化しないこと ({{bug(977128)}} をご覧ください) と、Mozilla 特有のスタイルを隠すオプションがないことです。このため、開発ツールにはプロパティをフィルタリングするための入力フィールドがあります。</p> + +<h3 id="Inspect_events" name="Inspect_events">イベントを調査する</h3> + +<p>Firebug では、要素に割り当てられたイベントを <a href="https://getfirebug.com/wiki/index.php/Events_Side_Panel">イベント サイドパネル</a> に表示します。開発ツールでは、ノードビューで要素のそばにある小さな 'ev' アイコンをクリックすると、イベントを表示します。どちらのツールも、ラップされたイベントリスナー (例えば、 jQuery の関数でラップしたリスナー) を表示できます。開発ツールの UI を改善するため、Firebug のようなイベントサイドパネルを追加する要望が出ています ({{bug(1226640)}} をご覧ください)。</p> + +<h3 id="Stop_script_execution_on_DOM_mutation" name="Stop_script_execution_on_DOM_mutation">DOM が変化したときにスクリプトの実行を止める</h3> + +<p>Firebug は DOM が変化したとき、すなわち要素が変更されたときにブレークして、JavaScript ファイルの関連する行でスクリプトの実行を止めます。これは、DOM の変化を起こした場所です。この機能は <a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Break_On_Mutate"><em>変化したらブレーク</em> ボタン</a> でグローバルに有効化するか、<a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Context_Menu">要素ごと</a> および属性変化・内容の変化・要素削除といった種類ごとに有効化できます。残念ながら、開発ツールにはまだこの機能がありません ({{bug(1004678)}} をご覧ください)。スクリプトの実行を止めるには、変化させている行に <a href="/ja/docs/Tools/Debugger">デバッガー パネル</a> でブレークポイントを設定しなければなりません。</p> + +<h3 id="Search_for_elements_via_CSS_selectors_or_XPaths" name="Search_for_elements_via_CSS_selectors_or_XPaths">CSS セレクターや XPath で要素を検索する</h3> + +<p>Firebug は、<a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Search">HTML パネルで CSS セレクターや XPath で要素を検索できます</a>。開発ツールの インスペクター パネルも、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">CSS セレクターで検索できます</a>。また、マッチする ID やクラスのリストを表示します。しかし、XPath による検索は未サポートです ({{bug(963933)}} をご覧ください)。</p> + +<h2 id="Debugger" name="Debugger">デバッガー</h2> + +<p>Firebug の <a href="https://getfirebug.com/wiki/index.php/Script_Panel">スクリプト パネル</a> に相当するものが、開発ツールの <a href="/ja/docs/Tools/Debugger">デバッガー パネル</a> です。どちらも、ウェブサイトで実行する JavaScript コードをデバッグできます。</p> + +<h3 id="Switch_between_sources" name="Switch_between_sources">ソースを切り替える</h3> + +<p>Firebug には、ウェブサイトに関係するすべての JavaScript ソースを表示する <a href="https://getfirebug.com/wiki/index.php/Script_Panel#Script_Location_Menu">スクリプトロケーションメニュー</a> があります。これらのソースは静的なもの (すなわち、ファイル) や、動的に生成されるもの (すなわち、イベントハンドラで実行するスクリプト、<code>eval()</code>、<code>new Function()</code> など) があり得ます。開発ツールの デバッガー パネルでは、スクリプトを左側の <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソース サイドパネル</a> に一覧表示します。動的に生成されるスクリプトは、<a href="/ja/docs/Tools/Debugger/How_to/Debug_eval_sources"><code>//# sourceURL</code> コメントで名前を付けた</a> 場合に限り表示します。</p> + +<h3 id="Managing_breakpoints" name="Managing_breakpoints">ブレークポイントを管理する</h3> + +<p>Firebug ではさまざまな種類のブレークポイントを設置でき、すべてのブレークポイントを <a href="https://getfirebug.com/wiki/index.php/Breakpoints_Side_Panel">ブレークポイント サイドパネル</a> に表示します。開発ツールでは、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソース サイドパネル</a> でそれぞれのスクリプトソースの下にブレークポイントを表示します。このパネルで、ひとつあるいはすべてのブレークポイントを有効化または無効化する、およびブレークポイントを削除することができます。現在は、スクリプトのブレークポイントのみ設置できます。XHR、DOM、Cookie、エラーのブレークポイントは未サポートです ({{bug(821610)}}、{{bug(1004678)}}、{{bug(895893)}}、{{bug(1165010)}} をご覧ください)。単一の JavaScript エラーに対するブレークポイントはありませんが、<a href="/ja/docs/Tools/Debugger/Settings">デバッガー パネルのオプション</a> に、<em>例外発生で停止</em> する設定があります。</p> + +<h3 id="Step_through_code" name="Step_through_code">コードでステップ実行を行う</h3> + +<p>スクリプトの実行が停止すると、コンティニュー (<kbd>F8</kbd>)、ステップオーバー (<kbd>F10</kbd>)、ステップイン (<kbd>F11</kbd>)、ステップアウト (<kbd>Shift</kbd>+<kbd>F11</kbd>) を使用してコードをステップ実行できます。これらは、どちらのツールでも動作します。</p> + +<h3 id="Examine_call_stack" name="Examine_call_stack">コールスタックを調査する</h3> + +<p>スクリプトの実行が停止したとき、Firebug は <a href="https://getfirebug.com/wiki/index.php/Stack_Side_Panel">スタック サイドパネル</a> に、関数のコールスタックを表示します。ここでは、呼び出し時の引数とともに関数を一覧表示します。開発ツールでは、<a href="/ja/docs/Tools/Debugger/UI_Tour#Call_stack_pane">コールスタック サイドパネル</a> に関数のコールスタックを表示します。開発ツールで引数を確認するには、<a href="/ja/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables#Examine_variables">変数 サイドパネル</a> を見なければなりません。</p> + +<h3 id="Examine_variables" name="Examine_variables">変数を調査する</h3> + +<p>Firebug は <a href="https://getfirebug.com/wiki/index.php/Watch_Side_Panel">ウォッチ サイドパネル</a> に、既定で {{domxref("window")}} オブジェクト (グローバルスコープ) を表示します。スクリプトの実行が停止すると、現在のコールスタックフレームで使用できるさまざまな変数スコープを表示します。さらに、ウォッチ式を追加および操作できます。開発ツールには <a href="/ja/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">変数 サイドパネル</a> があり、基本的な働きは同じです。大きな違いは、変数 サイドパネルはスクリプトの実行が停止していないときに空である、すなわち <code>window</code> オブジェクトを表示しないことです。ただし、<a href="/ja/docs/Tools/DOM_Property_Viewer">DOM プロパティビューア</a> または <a href="/ja/docs/Tools/Web_Console">ウェブコンソール</a> を使用してオブジェクトを調査できます。</p> + +<h2 id="Style_Editor" name="Style_Editor">スタイルエディター</h2> + +<p>Firefox 開発ツールの <a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a> で、Firebug の <a href="https://getfirebug.com/wiki/index.php/CSS_Panel">CSS パネル</a> と同様に、さまざまな CSS スタイルシートを調査および編集できます。さらに、新しいスタイルシートの作成や、既存のスタイルシートをインポートしてページに適用することもできます。また、個々のスタイルシートの有効・無効を切り替えることができます。</p> + +<h3 id="Switch_between_sources_2" name="Switch_between_sources_2">ソースを切り替える</h3> + +<p>Firebug の CSS パネルでは <a href="https://getfirebug.com/wiki/index.php/CSS_Panel#CSS_Location_Menu">CSS ロケーションメニュー</a> を使用して、さまざまな CSS ソースを切り替えることができます。スタイルエディターでは <a href="/ja/docs/Tools/Style_Editor#The_style_sheet_pane">サイドバー</a> を使用します。</p> + +<h3 id="Edit_a_style_sheet" name="Edit_a_style_sheet">スタイルシートを編集する</h3> + +<p>Firebug の <a href="https://getfirebug.com/wiki/index.php/CSS_Panel">CSS パネル</a> は、3 つのスタイルシート編集方法を提供します。既定の方法は、<a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel">スタイル サイドパネル</a> でのインライン編集です。このほかに <a href="https://getfirebug.com/wiki/index.php/CSS_Panel#Edit_Button">ソース編集モードとライブ編集モード</a> があり、選択したスタイルシートをテキストエディターで編集できます。開発ツールのスタイルエディターの編集方法は、Firebug のライブ編集モードに相当する 1 つだけです。</p> + +<h3 id="Try_out_CSS_selectors" name="Try_out_CSS_selectors">CSS セレクターを試用する</h3> + +<p>Firebug のセレクタ サイドパネルに、CSS セレクタを検証する機能があります。これは、入力したセレクタにマッチするすべての要素を表示します。開発ツールにこの機能はありませんが、{{bug(1323746)}} で要望されています。</p> + +<h3 id="Searching_within_the_style_sheets" name="Searching_within_the_style_sheets">スタイルシート内で検索する</h3> + +<p>Firebug では、検索フィールドでスタイルシート内を検索できます。開発ツールのスタイルエディターにもスタイルシート内を検索する機能がありますが、現在は複数のスタイルシートを検索する機能 ({{bug(889571)}} を参照) および正規表現で検索する機能 ({{bug(1362030)}} を参照) がありません。</p> + +<h2 id="Performance_Tool" name="Performance_Tool">パフォーマンスツール</h2> + +<p>Firebug では <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Profile">コンソール パネルの "プロファイル" ボタン</a>、または <code><a href="https://getfirebug.com/wiki/index.php/Console.profile">console.profile()</a></code> および <code><a href="https://getfirebug.com/wiki/index.php/Console.profileEnd">console.profileEnd()</a></code> コマンドを使用して、JavaScript のパフォーマンスをプロファイリングできます。開発ツールでは、パフォーマンスのプロファイリングについて高度なツールを提供します。Firebug と同様に <code><a href="/ja/docs/Web/API/Console/profile">console.profile()</a></code> および <code><a href="/ja/docs/Web/API/Console/profileEnd">console.profileEnd()</a></code> を使用するか、<a href="/ja/docs/Tools/Performance">パフォーマンスツール</a> の "パフォーマンス記録の状態を切り替えます" ボタンを使用してプロファイルを作成できます。<a href="/ja/docs/Tools/Performance/Call_Tree">コールツリー</a> の出力が Firebug の出力にもっとも似ていますが、パフォーマンスパネルでは単なる JavaScript のパフォーマンスだけでなく、より多くの情報を提供します。例えば、HTML のパースやレイアウトに関する情報も提供します。</p> + +<p>これは Firebug と開発ツールで出力内容が完全に異なるため、もっとも違いが大きい部分です。Firebug は JavaScript のパフォーマンスに注目しており、プロファイリングセッション内の JavaScript 関数呼び出しに関する詳細情報を提供します。一方開発ツールは JavaScript の関数呼び出しに限らず、ウェブ際のパフォーマンスに関する広範な情報を提供します。</p> + +<h3 id="View_JavaScript_call_performance" name="View_JavaScript_call_performance">JavaScript の呼び出しパフォーマンスを表示する</h3> + +<p>Firebug の <a href="https://getfirebug.com/wiki/index.php/Profiler">プロファイラーの出力</a> にもっとも近いものが、パフォーマンス パネルの <a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリービュー</a> です。これは Firebug と同様に、<em>合計時間</em> にそれぞれの関数呼び出しの総実行時間、<em>サンプル</em> に呼び出し回数、<em>時間</em> に関数内で費やした時間、そして総実行時間に対する関数の実行時間の割合を表示します。</p> + +<div class="note"> +<p><strong>注記:</strong> 開発ツールの呼び出しツリービューに表示する時間と割合は、Firebug が表示する値と同等ではありません。これは、JavaScript コードの実行状態をサンプリングするために使用する API が異なるためです。</p> +</div> + +<h3 id="Jump_to_function_declaration" name="Jump_to_function_declaration">関数の宣言に移動する</h3> + +<p>Firebug のプロファイラーと同様に、開発ツールのパフォーマンスツールの <a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリービュー</a> から、呼び出した JavaScript 関数が定義されているコードの行に移動できます。Firebug では関数へのリンクが <a href="https://getfirebug.com/wiki/index.php/Console_Panel">コンソールパネル</a> の出力の右側にありますが、開発ツールでは呼び出しツリービューの右側にリンクがあります。</p> + +<h2 id="Network_Monitor" name="Network_Monitor">ネットワークモニター</h2> + +<p>ネットワークリクエストを監視するために、Firebug には <a href="https://getfirebug.com/wiki/index.php/Net_Panel">ネット パネル</a> があります。Firefox 開発ツールでは <a href="/ja/docs/Tools/Network_Monitor">ネットワークモニター</a> を使用して、ネットワーク通信を調査できます。どちらのツールも、ネットワークリクエストの要求や応答を表すタイムラインなど、よく似た情報を提供します。</p> + +<h3 id="Inspect_request_information" name="Inspect_request_information">リクエストの情報を調査する</h3> + +<p>Firebug も Firefox 開発ツールのネットワークモニターも、リクエストをクリックすると、リクエストに関する情報を調査できます。唯一の違いは、Firebug はリクエストの下に情報を表示しますが、ネットワークモニターはサイドパネルに情報を表示することです。</p> + +<p>どちらのツールも、選択したリクエストのさまざまな情報を表示するタブがあります。<em>ヘッダー</em>、<em>パラメーター</em>、<em>応答</em>、<em>Cookie</em> のパネルがあります。レスポンスのプレビューは、<em>HTML</em> のように具体的な名称のパネルで表示します。ネットワークモニターでは、プレビュー用に <em>プレビュー</em> パネルがあります。キャッシュ済みデータの情報を提供する機能は未実装です ({{bug(859051)}})。一方、Firebug の情報に加えて <em>セキュリティ</em> の情報を表示します。また、ネットワークのタイミングに関する詳細情報を提供する <em>タイミング</em> タブもあります。</p> + +<h3 id="View_request_timings" name="View_request_timings">リクエストのタイミングを表示する</h3> + +<p>Firebug では <a href="https://getfirebug.com/wiki/index.php/Net_Panel#Timeline">ネットパネルのタイムライン列</a> にマウスポインターを載せると、リクエストに関するネットワークタイミングの詳細情報を表示します。ネットワークモニターはこの情報を、リクエストを選択したときに <a href="/ja/docs/Tools/Network_Monitor#Timings">タイムライン サイドパネル</a> で表示します。</p> + +<h3 id="View_remote_address" name="View_remote_address">リモートアドレスを表示する</h3> + +<p>Firebug では、リクエストのリモートアドレスを リモート IP 列に表示します。ネットワークモニターでは、リクエストを選択したときに <em>ヘッダー</em> タブの <em>リモートアドレス</em> に表示します。</p> + +<h3 id="Search_within_requests" name="Search_within_requests">リクエストを検索する</h3> + +<p>Firebug の検索フィールドで、リクエストを検索できます。Firefox の開発ツールの検索フィールドは、入力した文字列でリクエストをフィルタリングします。</p> + +<p>Firebug では <a href="https://getfirebug.com/wiki/index.php/Search_Field#Options">検索フィールドのオプション</a> で <em>レスポンス本文</em> にチェックを入れると、ネットワークリクエストのレスポンスボディを検索できます。ネットワークモニターではこの機能が未提供ですが、{{bug(1334408)}} で要望されています。レスポンスボディはまだ検索できませんが、ネットワークモニターでは <a href="/ja/docs/Tools/Network_Monitor#Filtering_by_properties">さまざまなリクエスト属性でフィルタリングする</a> ことができます。</p> + +<h2 id="Storage_Inspector" name="Storage_Inspector">ストレージインスペクター</h2> + +<p>Firebug の <a href="https://getfirebug.com/wiki/index.php/Cookies_Panel">Cookie パネル</a> はページが作成した Cookie に関する情報を表示しており、Cookie が保存している情報を操作できます。開発ツールでは、<a href="/ja/docs/Tools/Storage_Inspector">ストレージインスペクター</a> にこの機能があります。Firebug と比較すると、ストレージインスペクターは Cookie だけでなくローカルストレージ、セッションストレージ、キャッシュ、<a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> データベースといったストレージも調査できます。</p> + +<h3 id="Inspect_cookies" name="Inspect_cookies">Cookie を調査する</h3> + +<p>Firebug は、ウェブサイトに関係するすべての Cookie を <a href="https://getfirebug.com/wiki/index.php/Cookies_Panel">Cookie パネル</a> に表示します。開発ツールでは Cookie を、<a href="/ja/docs/Tools/Storage_Inspector">ストレージインスペクター</a> の Cookie セクションに、ドメインごとにグループ化して表示します。どちらも Cookie ごとに名前、値、ドメイン、パス、有効期限、Cookie が HttpOnly であるかといった、ほとんど同じ情報を表示します。</p> + +<p>開発ツールは Cookie が Secure であるかをデフォルトで表示しませんが、表の見出しを右クリックしてコンテキストメニューで <em>Secure</em> にチェックを入れると有効化できます。さらに開発ツールは、Cookie の作成日時、最終アクセス日時、HostOnly であるかの情報も表示できます。</p> + +<h3 id="Edit_cookies" name="Edit_cookies">Cookie を編集する</h3> + +<p>Firebug で Cookie を編集するには、Cookie を右クリックしてコンテキストメニューで <em>編集</em> を選択しなければなりません。ダイアログボックスがポップアップしますので、Cookie を編集して保存します。ストレージインスペクターでは、編集したいデータをダブルクリックするだけです。インラインエディターで、値を編集できます。</p> + +<h3 id="Delete_cookies" name="Delete_cookies">Cookie を削除する</h3> + +<p>Firebug の Cookie パネルでは、メニューの <em><a href="https://getfirebug.com/wiki/index.php/Cookies_Panel#Cookies">Cookie</a></em> > <em>Cookie を削除</em> または <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> で、ウェブサイトのすべての Cookie を削除できます。また、<em>Cookie</em> > <em>セッション Cookie を削除</em> でセッション Cookie のみ削除、Cookie を右クリックして <em>削除</em> を選択するとひとつの Cookie を削除できます。開発ツールのストレージインスペクターでは、Cookie を右クリックして <em>すべて削除</em> を選択するとすべての Cookie を削除、それぞれの <em>"<Cookie 名>" を削除</em> を選択するとひとつの Cookie を削除できます。さらに、コンテキストメニューの <em>"<ドメイン名>" のすべてのアイテムを削除</em> で、特定のドメインのすべての Cookie を削除できます。現在、セッション Cookie のみ削除することはできません ({{bug(1336934)}})。</p> + +<h2 id="Developer_Toolbar" name="Developer_Toolbar">開発ツールバー</h2> + +<h3 id="Display_of_error_count" name="Display_of_error_count">エラー数を表示する</h3> + +<p>ページで JavaScript エラーがあるとき、Firebug はその数を <a href="https://getfirebug.com/wiki/index.php/Start_Button#Error_info">スタートボタンにバッジで表示します</a>。開発ツールでは、<a href="/ja/docs/Tools/GCLI">開発ツールバー</a> にエラー数を表示します。</p> + +<h3 id="Command_API" name="Command_API">コマンド API</h3> + +<p>Firebug はさまざまな <a href="https://getfirebug.com/wiki/index.php/Command_Line_API">コマンド</a> を提供しており、コマンドラインで実行できます。開発ツールバーも、開発ツールを制御してさまざまなタスクを実行するための <a href="/ja/docs/Tools/GCLI#Commands">多種多様なコマンドとともに API</a> を提供します。</p> diff --git a/files/ja/tools/network_monitor/index.html b/files/ja/tools/network_monitor/index.html new file mode 100644 index 0000000000..6a2d2aea2a --- /dev/null +++ b/files/ja/tools/network_monitor/index.html @@ -0,0 +1,61 @@ +--- +title: ネットワークモニター +slug: Tools/Network_Monitor +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools + - 'l10n:priority' +translation_of: Tools/Network_Monitor +--- +<div>{{ToolsSidebar}}</div> + +<p>ネットワークモニターは、 Firefox が実行したすべてのネットワーク要求 (たとえばページの読み込みや <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a> による) について、各要求でどれだけ時間がかかったかや要求の詳細情報を表示します。</p> + +<h2 id="Opening_the_Network_Monitor" name="Opening_the_Network_Monitor">ネットワークモニターを開く</h2> + +<p>ネットワークモニターを開く方法はいくつかあります。</p> + +<ul> + <li><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> (Mac では <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd>) を押下します。</li> + <li>[ウェブ開発] メニュー (OS X や Linux では、[ツール] メニューのサブメニューです) で、[ネットワーク] を選択します。</li> + <li>メインツールバーまたはハンバーガーメニュー (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">) の中にあるレンチのアイコン (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">) をクリックして、[ネットワーク] を選択します。</li> +</ul> + +<p>ブラウザーウィンドウの下部にネットワークモニターが現れます。要求を見るために、ページを再読み込みしましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16245/network_monitor.png" style="border: 1px solid black; display: block; height: 541px; margin: 0px auto; width: 800px;"></p> + +<p>ツールバーを開いているときは、ネットワークモニターを選択していなくても常にネットワーク要求を記録します。つまり、例えばウェブコンソールを開いてページをデバッグした後、ページを再読み込みすることなくネットワークモニターに切り替えて、ネットワークアクティビティを確認できます。</p> + +<h2 id="UI_overview" name="UI_overview">UI の概要</h2> + +<p>UI は 4 つの主要な部分に分けられます:</p> + +<ul> + <li>メイン画面には<a href="/ja/docs/Tools/Network_Monitor#Toolbar">ツールバー</a>、<a href="/ja/docs/Tools/Network_Monitor/request_list">ネットワーク要求のリスト</a>、<a href="/ja/docs/Tools/Network_Monitor/request_details">ネットワーク要求の詳細ペイン</a>があります:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16246/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin: 0 auto; width: 800px;"></p> + +<ul> + <li>別の画面に<a href="/ja/docs/Tools/Network_Monitor/Performance_Analysis">パフォーマンス解析</a>があります:</li> +</ul> + +<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/16276/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 1382px;" title=""></p> + +<h2 id="ネットワークモニタの操作">ネットワークモニタの操作</h2> + +<p>次の記事では、ネットワークモニタを使用するさまざまな側面について説明します。</p> + +<ul> + <li><a href="/ja/docs/Tools/Network_Monitor/toolbar">ツールバー</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor/request_list">ネットワークリクエストリスト</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor/request_details">ネットワークリクエストの詳細</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor/recording">ネットワークトラフィックの記録</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor/Performance_Analysis">パフォーマンス分析</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor/Throttling">スロットリング</a></li> +</ul> diff --git a/files/ja/tools/network_monitor/performance_analysis/index.html b/files/ja/tools/network_monitor/performance_analysis/index.html new file mode 100644 index 0000000000..5532efabec --- /dev/null +++ b/files/ja/tools/network_monitor/performance_analysis/index.html @@ -0,0 +1,32 @@ +--- +title: パフォーマンス分析 +slug: Tools/Network_Monitor/Performance_Analysis +tags: + - '110n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/Performance_Analysis +--- +<p>{{ToolsSidebar}}</p> + +<p>ネットワークモニタにはパフォーマンス分析ツールが含まれており、ブラウザーがサイトのさまざまな部分をダウンロードするのに必要な時間を表示できます。</p> + +<h2 id="パフォーマンス分析ツールの使用">パフォーマンス分析ツールの使用</h2> + +<p>パフォーマンス分析ツールを実行するには<a href="/ja/docs/Tools/Network_Monitor#Toolbar">ツールバー</a>のストップウォッチアイコンをクリックします。</p> + +<p>(また、ネットワークモニタを開いたばかりのときに、まだリクエストのリストが表示されていない場合は、メインウィンドウにストップウォッチアイコンが表示されます。)</p> + +<p>その後、ネットワークモニタはサイトを2回読み込みます。1回は空のブラウザキャッシュ、もう1回はプライム付きブラウザキャッシュです。これはユーザーが初めてサイトを訪問し、その後の訪問をシミュレートします。 それぞれの実行結果を並べて表示するか、ブラウザウィンドウが狭い場合は垂直方向に表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16277/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>各実行結果は表と円グラフにまとめられています。テーブルはリソースをタイプ別にグループ化し、各リソースの合計サイズとそれらのロードに要した合計時間を表示します。付随する円グラフは、各リソースタイプの相対的なサイズを示しています。</p> + +<p>ネットワークモニターのネットワークリクエストリストに戻るには、左側の「戻る」ボタンをクリックします。</p> + +<p>円グラフのスライスをクリックすると、その実行のためのネットワークモニタが表示され、フィルタが自動的に適用されて<a href="/ja/docs/Tools/Network_Monitor#Filtering_by_content_type">そのリソースタイプのみ</a>が表示されます。</p> diff --git a/files/ja/tools/network_monitor/recording/index.html b/files/ja/tools/network_monitor/recording/index.html new file mode 100644 index 0000000000..e6f7ad6677 --- /dev/null +++ b/files/ja/tools/network_monitor/recording/index.html @@ -0,0 +1,28 @@ +--- +title: ネットワークモニターの記録 +slug: Tools/Network_Monitor/recording +tags: + - '110n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/recording +--- +<p>{{ToolsSidebar}}</p> + +<p>一時停止ボタンを使用してネットワークトラフィックの監視を一時停止および再開できます。</p> + +<h2 id="ネットワークトラフィックの記録を一時停止および再開する">ネットワークトラフィックの記録を一時停止および再開する</h2> + +<p>ネットワークモニタには、現在のページのネットワークトラフィックの記録を一時停止および再開するボタンがあります。これは、たとえば、デバッグ目的でページの安定したビューを取得しようとしているような状況で便利ですが、通常の状況下では永続的なネットワークリクエストによりビューが変化し続けます。一時停止ボタンを使用すると特定のスナップショットを見ることができます。</p> + +<p>メインネットワークモニターツールバーの左端の方にボタンが見つかりますが、それは典型的なポーズボタン、つまり <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;"> のように見えます。</p> + +<p>あなたはコンテキストでそれをここで見ることができます：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15624/play-pause-network-traffic.png" style="border-style: solid; border-width: 1px; display: block; height: 305px; margin: 0px auto; width: 930px;"></p> + +<p>押すたびに、ボタンが再生アイコンに変わり、もう一度押すと記録したネットワークトラフィックを切り替えることができます。</p> diff --git a/files/ja/tools/network_monitor/request_details/index.html b/files/ja/tools/network_monitor/request_details/index.html new file mode 100644 index 0000000000..c8c41d4975 --- /dev/null +++ b/files/ja/tools/network_monitor/request_details/index.html @@ -0,0 +1,184 @@ +--- +title: ネットワークリクエストの詳細 +slug: Tools/Network_Monitor/request_details +tags: + - '110n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/request_details +--- +<p>{{ToolsSidebar}}</p> + +<p>リクエストの詳細ペインはリクエストリストのネットワークリクエストをクリックすると表示されます。このペインには、リクエストに関するより詳細な情報が表示されます。</p> + +<h2 id="ネットワークリクエストの詳細">ネットワークリクエストの詳細</h2> + +<p>行をクリックするとネットワークモニターの右側に新しいペインが表示され、リクエストに関するより詳細な情報が表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16261/network_request_details.png" style="display: block; height: 741px; margin-left: auto; margin-right: auto; width: 930px;"></p> + +<p>このペインの上部にあるタブを使用すると、次のページを切り替えることができます。</p> + +<ul> + <li><strong>Headers</strong></li> + <li><strong>Cookies</strong></li> + <li><strong>Params</strong></li> + <li><strong>Response</strong></li> + <li><strong>Cache</strong></li> + <li><strong>Timings</strong></li> + <li><strong>Security </strong>(安全なページのみ)</li> + <li><strong>Stack trace</strong> (リクエストにスタックトレースがある場合、たとえば、別のスクリプトによって呼び出されたスクリプトのみ)。これは Firefox 55 以降で利用可能です。</li> +</ul> + +<p>ツールバーの右端にあるアイコンをクリックすると詳細ペインが閉じ、リストビューに戻ります。</p> + +<h3 id="Headers">Headers</h3> + +<p>このタブには、リクエストに関する基本情報がリストされます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16262/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>これには次のものが含まれます：</p> + +<ul> + <li>リクエスト URL</li> + <li>リクエストメソッド</li> + <li>リモート IP アドレスとポート <em>(Firefox 39 から)</em></li> + <li>詳細を確認するためのMDN ドキュメントにリンクしている疑問符アイコン付きステータスコード (利用可能な場合)</li> + <li>送信された HTTP リクエストとレスポンスヘッダー</li> + <li>リクエストを編集して再送信するための <a href="/ja/docs/Tools/Network_Monitor">編集と再送信</a> ボタン</li> + <li>rawリクエストとレスポンスヘッダーを表示するRawヘッダーボタン</li> +</ul> + +<p>表示されるヘッダをフィルタリングすることができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16266/network_headers.png" style="border: 1px solid black; display: block; height: 295px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>ステータスコード行の各ヘッダーの横に疑問符のアイコンが表示されます。これは <a href="/ja/docs/Web/HTTP/Headers">HTTP ヘッダーの MDN ドキュメント</a>で、特定のステータスコードに関する詳細情報へのリンクです。</p> + +<h3 id="Cookies">Cookies</h3> + +<p>このタブには、リクエストまたはレスポンスとともに送信されたすべてのクッキーの詳細が一覧表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16265/network_cookies.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> + +<p>ヘッダーと同様に、表示されるクッキーのリストをフィルタリングできます。 Cookie属性の完全なリストが表示されます。レスポンスのクッキーの例の下のスクリーンショットを参照してください。</p> + +<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p> + +<p>Firefox 62 ({{bug("1452715")}}) 以降、<code>samesite</code> 属性が表示されています。</p> + +<h3 id="パラメータ">パラメータ</h3> + +<p>このタブにはリクエストの GET パラメータと POST データが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16333/params.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h3 id="レスポンス">レスポンス</h3> + +<p>レスポンスの完全な内容。レスポンスが HTML、JS、または CSS の場合、テキストとして表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16268/network_response.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>レスポンスが JSON の場合、検査可能オブジェクトとして表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16332/response_json.png" style="display: block; height: 268px; margin: 0 auto; width: 900px;"></p> + +<p>レスポンスが画像の場合、タブにプレビューが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16331/response_pane_image.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h4 id="キャッシュ">キャッシュ</h4> + +<p>レスポンスがキャッシュされると(すなわち、304)、"Cache" タブにキャッシュされたリソースに関する詳細が表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16329/response_cache.png" style="border: 1px solid black; display: block; height: 245px; margin: 0px auto; width: 567px;"></p> + +<p>詳細には次のものが含まれています:</p> + +<ul> + <li>Last fetched: リソースが最後にフェッチされた日付。</li> + <li>Fetched count: リソースがフェッチされた現在のセッション内の回数。</li> + <li>Data size: リソースのサイズ。</li> + <li>Last modified: リソースが最後に変更された日付。</li> + <li>Expires: リソースの有効期限が切れる日付。</li> + <li>Device: リソースが取得されたデバイス ("disk" など)。</li> +</ul> + +<h4 id="HTML_プレビュー">HTML プレビュー</h4> + +<p>レスポンスが HTML の場合、レンダリングされた HTML のプレビューがレスポンスペイロードの上にある [Response] タブ内に表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16272/settings_for_browser_debugger.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 744px; margin: 0px auto; width: 900px;"></p> + +<h3 id="タイミング">タイミング</h3> + +<p>[タイミング] タブでは、ネットワークリクエストを、<a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP アーカイブ</a>仕様で定義された次のサブセットに分解します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">名前</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>Blocked</td> + <td> + <p>ネットワーク接続を待っているキューで費やされた時間。</p> + + <p>ブラウザは、単一のサーバーに対して行うことができる同時接続の数に制限を設けています。Firefox のデフォルトは 6 ですが、<code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> の設定を使用して変更できます。すべての接続が使用中の場合、ブラウザは接続が解放されるまで、より多くのリソースをダウンロードすることはできません。</p> + </td> + </tr> + <tr> + <td>DNS resolution</td> + <td>ホスト名を解決するのにかかる時間。</td> + </tr> + <tr> + <td>Connecting</td> + <td>TCP 接続を作成するのにかかる時間。</td> + </tr> + <tr> + <td>Sending</td> + <td>HTTP リクエストをサーバーに送信するのにかかる時間。</td> + </tr> + <tr> + <td>Waiting</td> + <td>サーバーからのレスポンスを待っています。</td> + </tr> + <tr> + <td>Receiving</td> + <td>サーバー (またはキャッシュ) からのレスポンス全体を読み取るのにかかる時間。</td> + </tr> + </tbody> +</table> + +<p>それは、そのリクエストに対するタイムラインバーのより詳細な注釈付きのビューを提示します。これは、合計待ち時間がさまざまな段階にどのように分割されるかを示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16271/network_timings.png" style="border: 1px solid black; display: block; height: 749px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h3 id="セキュリティ">セキュリティ</h3> + +<p>サイトが HTTPS 経由でサービスされている場合は、"Security" というラベルのタブが追加されます。これには、プロトコル、暗号スイート、証明書の詳細など、使用される安全な接続に関する詳細が含まれています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16269/network_security.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> + +<p>[セキュリティ] タブには、セキュリティの弱点に関する警告が表示されます。 現在、2つの弱点について警告しています。</p> + +<ol> + <li>Using SSLv3 instead of TLS</li> + <li>Using the RC4 cipher</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p> + +<h3 id="スタックトレース">スタックトレース</h3> + +<p>Stack Trace タブには、スタックトレースがあるレスポンスのスタックトレースが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16270/network_stack_trace.png" style="border: 1px solid black; display: block; height: 205px; margin: 0px auto; width: 900px;"></p> diff --git a/files/ja/tools/network_monitor/request_list/index.html b/files/ja/tools/network_monitor/request_list/index.html new file mode 100644 index 0000000000..ffc68317a5 --- /dev/null +++ b/files/ja/tools/network_monitor/request_list/index.html @@ -0,0 +1,337 @@ +--- +title: ネットワークリクエストリスト +slug: Tools/Network_Monitor/request_list +tags: + - '110n:priority' +translation_of: Tools/Network_Monitor/request_list +--- +<p>{{ToolsSidebar}}</p> + +<p>ネットワークモニターのリクエストリストには、ページのロード中に行われたすべてのネットワークリクエストの一覧が表示されます。</p> + +<h2 id="ネットワークリクエストリスト">ネットワークリクエストリスト</h2> + +<p>デフォルトでは、ネットワークモニタにはページの読み込み中に行われたすべてのネットワークリクエストの一覧が表示されます。各リクエストはそれ自身の行に表示されます：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16258/Network_request_list.png" style="border: 1px solid black; display: block; height: 328px; margin: 0px auto; width: 900px;"></p> + +<p>デフォルトでは、新しいページに移動するか現在のページをリロードするたびに、ネットワークモニタがクリアされます。<a href="/ja/docs/Tools/Tools_Toolbox#Common_preferences">設定</a>の [永続ログを有効にする] をオンにするとこの動作を無効にすることができます。</p> + +<h3 id="ネットワークリクエスト列">ネットワークリクエスト列</h3> + +<p>テーブルヘッダーを右クリックし、コンテキストメニューから特定の列を選択することによって、異なる列を切り替えることができます。"Reset Columns" オプションで初期設定に戻すこともできます。使用可能なすべての列のリストは次のとおりです。</p> + +<ul> + <li><strong>Status</strong>: 返された HTTP ステータスコード。これは、色分けされたアイコンとして表示されます。 + + <ul> + <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;"> 情報のための青い丸 (1XXコード)。特に WebSocket のアップグレードには 101 (スイッチングプロトコル) が含まれています</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> 緑の丸は成功 (2XX コード)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> オレンジの三角はリダイレクト (3XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> 赤い四角はエラー (4XX と 5XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> 中空の灰色の円はブラウザのキャッシュから取得されたレスポンス。</li> + </ul> + 正確なコードはアイコンの直後に表示されます。</li> + <li><strong>Method</strong>: 使用された HTTP リクエストメソッド。</li> + <li><strong>File</strong>: リクエストされたファイルのベース名。</li> + <li><strong>Protocol:</strong> データを転送するために使用されたネットワークプロトコル。この列はデフォルトでは表示されません。これは Firefox 55 の新機能です。</li> + <li><strong>Scheme:</strong> リクエストされたパスのスキーム (https/http/ftp/...)。 この列はデフォルトで非表示になっています。これは Firefox 55 の新機能です。</li> + <li><strong>Domain</strong>: リクエストされたパスのドメイン。 + <ul> + <li>リクエストに SSL/TLS を使用し、接続に弱い暗号などのセキュリティの弱点があった場合は、ドメインの横に警告の三角形が表示されます。問題の詳細は <a href="/ja/docs/Tools/Network_Monitor#Security">[セキュリティ] タブ</a>で確認できます</li> + <li>IP アドレスを表示するにはドメインにカーソルを合わせます。</li> + <li>ドメインの横には、そのリクエストのセキュリティステータスに関する追加情報を示すアイコンがあります。 <a href="/ja/docs/Tools/Network_Monitor#Security_icons">セキュリティアイコン</a>を参照してください。</li> + </ul> + </li> + <li><strong>Remote IP</strong>: リクエストに応答しているサーバーの IP アドレス。この列はデフォルトで非表示になっています。これは Firefox 55 の新機能です。</li> + <li><strong>Cause</strong>: XHR リクエスト、{{htmlelement("img")}}、スクリプト、画像を要求するスクリプトなど、ネットワーク要求が発生した理由。これは Firefox 49 で新しく追加されました。</li> + <li><strong>Type</strong>: レスポンスの <code>Content-type</code></li> + <li><strong>Cookies:</strong> リクエストに関連付けられたリクエストクッキーの数。 この列はデフォルトで非表示になっています。これは Firefox 55 の新機能です。</li> + <li><strong>Set-Cookies:</strong> リクエストに関連付けられたレスポンスクッキーの数。この列はデフォルトで非表示になっています。これは Firefox 55 の新機能です。</li> + <li><strong>Transferred</strong>: リソースをロードするために実際に転送されたバイト数。リソースが圧縮されている場合は <strong>Size</strong> より小さくなります。Firefox 47 から、リソースが<a href="/ja/docs/Web/API/ServiceWorker_API">サービスワーカー</a>キャッシュからフェッチされた場合、このセルには "service worker" が表示されます。</li> + <li><strong>Size</strong>: 転送されたリソースのサイズ。</li> +</ul> + +<p>上部のツールバーはこれらの列にラベルを付け、ラベルをクリックするとその列によるすべての要求がソートされます。</p> + +<h4 id="イメージサムネイル">イメージサムネイル</h4> + +<p>ファイルがイメージの場合、行にはイメージのサムネイルが含まれ、ファイル名の上にマウスを置くとツールチップのプレビューが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16257/image_preview.png" style="border: 1px solid black; display: block; height: 334px; margin: 0px auto; width: 900px;"></p> + +<h4 id="セキュリティアイコン">セキュリティアイコン</h4> + +<p>ネットワークモニタは [ドメイン] 列にアイコンを表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16194/network_message_list_63.png" style="border: 1px solid black; display: block; height: 191px; margin: 0 auto; width: 845px;"></p> + +<p>これによりリクエストのセキュリティステータスに関する追加情報が得られます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">アイコン</th> + <th scope="col">意味</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td> + <td>HTTPS</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td> + <td>弱い HTTPS (例えば、弱い暗号が使用された場合)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td> + <td>失敗した HTTPS (たとえば、証明書が無効だった場合)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td> + <td>HTTP</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td> + <td>Localhost</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16192/tracker_icon.png" style="height: 16px; width: 16px;"></td> + <td>URL がコンテンツブロッキングを有効にしてブロックされる既知のトラッカーに属していることを示します。</td> + </tr> + </tbody> +</table> + +<p>弱い HTTPS リクエストと失敗した HTTPS リクエストについては、<a href="/ja/docs/Tools/Network_Monitor#Security">[セキュリティ]タブ</a>に問題の詳細が表示されます。</p> + +<h4 id="原因列">原因列</h4> + +<p>「原因」列には、リクエストの原因を示します。これは通常かなり明白であり、一般的にこれとタイプの列項目との間の相関を見ることができます。最も一般的な値は次のとおりです。</p> + +<ul> + <li>document: ソースHTMLドキュメント</li> + <li>img: {{htmlelement("img")}} 要素</li> + <li>imageset: {{htmlelement("img")}} 要素</li> + <li>script: JavaScriptファイル</li> + <li>stylesheet: CSSファイル</li> +</ul> + +<h3 id="タイムライン">タイムライン</h3> + +<p>リクエストリストには、各リクエストのさまざまな部分のタイムラインも表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16259/timeline.png" style="border: 1px solid black; display: block; height: 331px; margin: 0px auto; width: 900px;"></p> + +<p>各タイムラインには、その行の他のネットワークリクエストに対する相対的な水平位置が与えられているため、ページのロードに要した合計時間を確認できます。ここで使用される色分けの詳細については、<a href="/ja/docs/Tools/Network_Monitor#Timings">タイミング</a>ページのセクションを参照してください。</p> + +<p>Firefox 45 以降、タイムラインには 2 つの垂直線も含まれています：</p> + +<ul> + <li><span style="color: blue;">青い</span>線はページの <code><a href="/ja/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> イベントがトリガーされるポイントを示します</li> + <li><span style="color: red;">赤い</span>線はページのロードイベントがトリガーされるポイントを示します</li> +</ul> + +<h3 id="リクエストのフィルタリング">リクエストのフィルタリング</h3> + +<p>リクエストをコンテンツタイプ、XMLHttpRequests リクエスト、WebSocket リクエスト、URL、リクエストプロパティ別のいずれかでフィルタリングできます。</p> + +<h4 id="コンテンツタイプによるフィルタリング">コンテンツタイプによるフィルタリング</h4> + +<p>コンテンツタイプ別にフィルタリングするには、<a href="/ja/docs/Tools/Network_Monitor#Toolbar">ツールバー</a>のボタンを使用します。</p> + +<h4 id="XHRのフィルタリング">XHRのフィルタリング</h4> + +<p>{{Glossary("XHR (XMLHttpRequest)", "XHR")}} のみを表示するには、<a href="/ja/docs/Tools/Network_Monitor#Toolbar">ツールバー</a>の "XHR" ボタンを使用します。</p> + +<h4 id="WebSocketsのフィルタリング">WebSocketsのフィルタリング</h4> + +<p>WebSocket接続のみを表示するには、<a href="/ja/docs/Tools/Network_Monitor#Toolbar">ツールバー</a>の "WS" ボタンを使用します。</p> + +<p>WebSocket 接続で交換されるデータを監視するには、<a href="https://addons.mozilla.org/ja/firefox/addon/websocket-monitor/">WebSocket Monitor アドオン</a>を試してください。</p> + +<h4 id="URLによるフィルタリング">URLによるフィルタリング</h4> + +<p>URL でフィルタリングするには、<a href="/ja/docs/Tools/Network_Monitor#Toolbar">ツールバー</a>の検索ボックスを使用します。検索ボックスの中をクリックするか、あるいは <kbd>Ctrl</kbd> + <kbd>F</kbd> (または Mac の場合は <kbd>Cmd</kbd> + <kbd>F</kbd> )を押して、入力を開始します。ネットワークリクエストのリストは、フィルタ文字列を含むリクエストのみをドメインまたはファイルの部分に含めるようにフィルタリングされます。</p> + +<p>Firefox 45 では、クエリ文字列に "-" 演算子をつけることでフィルタ文字列を含まないリクエストをフィルタリングできます。たとえば、"-google.com" というクエリでは、URL に "google.com" がないすべてのリクエストが表示されます。</p> + +<h4 id="プロパティによるフィルタリング">プロパティによるフィルタリング</h4> + +<p>特定のリクエストプロパティでフィルタリングするには、<a href="/ja/docs/Tools/Network_Monitor">ツールバー</a>の検索ボックスを使用します。検索ボックスは特定のキーワードを認識し、特定のリクエストプロパティによってリクエストをフィルタリングするために使用できます。これらのキーワードの後にコロンと関連するフィルター値が続きます。フィルター値は大文字と小文字を区別しません。マイナス (<code>-</code>) を前に付けると、フィルタは無効になります。異なるフィルタをスペースで区切って組み合わせることができます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">キーワード</th> + <th scope="col">意味</th> + <th scope="col">例</th> + </tr> + <tr> + <td><code>status-code</code></td> + <td>特定の HTTP ステータスコードを持つリソースを表示します。</td> + <td><code>status-code:304</code></td> + </tr> + <tr> + <td><code>method</code></td> + <td>特定の HTTP リクエストメソッドを介して要求されたリソースを表示します。</td> + <td><code>method:post</code></td> + </tr> + <tr> + <td><code>domain</code></td> + <td>特定のドメインからのリソースを表示します。</td> + <td><code>domain:mozilla.org</code></td> + </tr> + <tr> + <td><code>remote-ip</code></td> + <td>指定された IP を持つサーバーからのリソースを表示します。</td> + <td><code>remote-ip:63.245.215.53</code><br> + <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td> + </tr> + <tr> + <td><code>cause</code></td> + <td>特定の原因タイプに一致するリソースを表示します。 タイプは、<a href="/ja/docs/Tools/Network_Monitor/request_list#Cause_column">原因列</a>の説明に記載されています。</td> + <td><code>cause:js</code><br> + <code>cause:stylesheet<br> + cause:img</code></td> + </tr> + <tr> + <td><code>transferred</code></td> + <td>特定の転送サイズまたは転送サイズが指定されたサイズに近いリソースを示します。<code>k</code> はキロバイトの接尾辞として、<code>m</code> はメガバイトに使用できます。例えば <code>1k</code> の値は <code>1024</code> に相当します。</td> + <td><code>transferred:1k</code></td> + </tr> + <tr> + <td><code>size</code></td> + <td> + <p>特定のサイズ (圧縮解除後) または指定されたサイズに近いサイズのリソースを表示します。<code>k</code> はキロバイトの接尾辞として、<code>m</code> はメガバイトに使用できます。<code>1k</code> の値は <code>1024</code> に相当します。</p> + </td> + <td><code>size:2m</code></td> + </tr> + <tr> + <td><code>larger-than</code></td> + <td>指定したサイズ (バイト単位) を超えるリソースを表示します。<code>k</code> はキロバイトの接尾辞として、<code>m</code> はメガバイトに使用できます。<code>1k</code> の値は <code>1024</code> に相当します。</td> + <td><code>larger-than:2000</code><br> + <code>-larger-than:4k</code></td> + </tr> + <tr> + <td><code>mime-type</code></td> + <td>指定された MIME タイプに一致するリソースを表示します。</td> + <td><code>mime-type:text/html</code><br> + <code>mime-type:image/png</code><br> + <code>mime-type:application/javascript</code></td> + </tr> + <tr> + <td><code>is</code></td> + <td><code>is:cached</code> および <code>is:from-cache</code> はキャッシュから来るリソースのみを示します。<br> + <code>is:running</code> は現在転送中のリソースのみを表示します。</td> + <td><code>is:cached</code><br> + <code>-is:running</code></td> + </tr> + <tr> + <td><code>scheme</code></td> + <td>指定されたスキームを介して転送されたリソースを表示します。</td> + <td><code>scheme:http</code></td> + </tr> + <tr> + <td><code>has-response-header</code></td> + <td>指定された HTTP レスポンスヘッダを含むリソースを表示します。</td> + <td><code>has-response-header:cache-control</code><br> + <code>has-response-header:X-Firefox-Spdy</code></td> + </tr> + <tr> + <td><code>set-cookie-domain</code></td> + <td>指定された値と一致する <code>Domain</code> 属性を持つ <code>Set-Cookie</code> ヘッダを持つリソースを表示します。</td> + <td><code>set-cookie-domain:.mozilla.org</code></td> + </tr> + <tr> + <td><code>set-cookie-name</code></td> + <td>指定された値と一致する名前を持つ <code>Set-Cookie</code> ヘッダを持つリソースを表示します。</td> + <td><code>set-cookie-name:_ga</code></td> + </tr> + <tr> + <td><code>set-cookie-value</code></td> + <td>指定された値と一致する値を持つ <code>Set-Cookie</code> ヘッダを持つリソースを表示します。</td> + <td><code>set-cookie-value:true</code></td> + </tr> + <tr> + <td><code>regexp</code></td> + <td>指定された {{Glossary("regular expression")}} と一致する URL を持つリソースを表示します。</td> + <td><code>regexp:\d{5}<br> + regexp:mdn|mozilla</code></td> + </tr> + </thead> +</table> + +<h3 id="コンテキストメニュー">コンテキストメニュー</h3> + +<p>リスト内の行の"コンテキストクリック"は、次のオプションを含むコンテキストメニューを表示します。</p> + +<ul> + <li>Copy URL</li> + <li>Copy URL Parameters</li> + <li>Copy POST Data (only for POST requests)</li> + <li>Copy as cURL</li> + <li>Copy Request Headers</li> + <li>Copy Response Headers</li> + <li>Copy Response</li> + <li>Copy Image as Data URI (only for images)</li> + <li>Copy All As HAR</li> + <li>Save All As HAR</li> + <li>Save Image As (only for images)</li> + <li>Edit and Resend</li> + <li>Open in New Tab</li> + <li>Start <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page</li> +</ul> + +<h4 id="Edit_and_Resend">Edit and Resend</h4> + +<p>このオプションを使用すると、リクエストのメソッド、URL、パラメータ、およびヘッダーを編集し、リクエストを再送信できるエディタが開きます。</p> + +<h4 id="新規タブで開く">新規タブで開く</h4> + +<p>リクエストを新しいタブで再送信します。非同期リクエストのデバッグには非常に便利です。</p> + +<h4 id="Copy_as_cURL">Copy as cURL</h4> + +<p>このオプションはネットワークリクエストを cURL コマンドとしてクリップボードにコピーするので、コマンドラインから実行することができます。 このコマンドには、次のオプションが含まれます。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>-X [METHOD]</code></td> + <td>メソッドが GET または POST でない場合</td> + </tr> + <tr> + <td><code>--data</code></td> + <td>URL エンコードされたリクエストパラメータ</td> + </tr> + <tr> + <td><code>--data-binary</code></td> + <td>マルチパートリクエストパラメータの場合</td> + </tr> + <tr> + <td><code>--http/VERSION</code></td> + <td>HTTP バージョンが 1.1 でない場合</td> + </tr> + <tr> + <td><code>-I</code></td> + <td>メソッドが HEAD の場合</td> + </tr> + <tr> + <td><code>-H</code></td> + <td> + <p>各リクエストヘッダーごとに1つ。</p> + + <p>Firefox 34から、"Accept-Encoding" ヘッダが存在する場合、cURL コマンドに <code>-H "Accept-Encoding: gzip, deflate"</code> の代わりに <code>--compressed</code> が含まれます。これは、レスポンスが自動的に解凍されることを意味します。</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="CopySave_All_As_HAR">Copy/Save All As HAR</h4> + +<p>これらのオプションはリストされたすべての要求に対して HTTP アーカイブ (HAR) を作成します。HAR 形式を使用すると、ネットワークリクエストに関する詳細情報をエクスポートできます。'Copy All As HAR' はデータをクリップボードにコピーし、'Save All As HAR' はアーカイブをディスクに保存するダイアログを開きます。</p> + +<p>Firefox 61 以降では、これらのオプションを簡単に発見できるようにツールバーメニューを追加しました ({{bug(1403530)}})。新しい 'HAR' ドロップダウンメニューには、'Copy All As HAR' コマンドと 'Save All As HAR' コマンドの両方と、'Import...' オプションがあります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16056/har-dropdown.png" style="border-style: solid; border-width: 1px; height: 262px; width: 723px;"></p> diff --git a/files/ja/tools/network_monitor/throttling/index.html b/files/ja/tools/network_monitor/throttling/index.html new file mode 100644 index 0000000000..92b46a0b78 --- /dev/null +++ b/files/ja/tools/network_monitor/throttling/index.html @@ -0,0 +1,93 @@ +--- +title: スロットリング +slug: Tools/Network_Monitor/Throttling +tags: + - '110n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/Throttling +--- +<p>{{ToolsSidebar}}</p> + +<p>ネットワークモニタを使用するとネットワーク速度を調整してさまざまな接続速度をエミュレートすることができるため、アプリケーションがさまざまな接続タイプでどのように動作するかを確認できます。</p> + +<h2 id="スロットリング">スロットリング</h2> + +<p>ツールバーにはさまざまなネットワーク速度条件をエミュレートするためにネットワーク速度を抑制することを可能にする Throttling ドロップダウンが含まれています。メニューからオプションを選択するだけで、リロードしても維持されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16260/throttling.png" style="border: 1px solid black; display: block; height: 177px; margin: 0px auto; width: 150px;"></p> + +<p>エミュレートされる特性は次のとおりです。</p> + +<ul> + <li>ダウンロード速度</li> + <li>アップロード速度</li> + <li>最小レイテンシー</li> +</ul> + +<p>以下の表は各ネットワークタイプに関連する数値を示していますが、正確な性能測定にはこの機能を使用しないでください。さまざまな条件でのユーザーエクスペリエンスの概算を示すことを意図しています。</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Selection</th> + <th scope="col">ダウンロード速度</th> + <th scope="col">アップロード速度</th> + <th scope="col">最小レイテンシー (ms)</th> + </tr> + </thead> + <tbody> + <tr> + <td>GPRS</td> + <td>50 Kb/s</td> + <td>20 Kb/s</td> + <td>500</td> + </tr> + <tr> + <td>Regular 2G</td> + <td>250 Kb/s</td> + <td>50 Kb/s</td> + <td>300</td> + </tr> + <tr> + <td>Good 2G</td> + <td>450 Kb/s</td> + <td>150 Kb/s</td> + <td>150</td> + </tr> + <tr> + <td>Regular 3G</td> + <td>750 Kb/s</td> + <td>250 Kb/s</td> + <td>100</td> + </tr> + <tr> + <td>Good 3G</td> + <td>1.5 Mb/s</td> + <td>750 Kb/s</td> + <td>40</td> + </tr> + <tr> + <td>Regular 4G/LTE</td> + <td>4 Mb/s</td> + <td>3 Mb/s</td> + <td>20</td> + </tr> + <tr> + <td>DSL</td> + <td>2 Mb/s</td> + <td>1 Mb/s</td> + <td>5</td> + </tr> + <tr> + <td>Wi-Fi</td> + <td>30 Mb/s</td> + <td>15 Mb/s</td> + <td>2</td> + </tr> + </tbody> +</table> diff --git a/files/ja/tools/network_monitor/toolbar/index.html b/files/ja/tools/network_monitor/toolbar/index.html new file mode 100644 index 0000000000..35aa0ce0a1 --- /dev/null +++ b/files/ja/tools/network_monitor/toolbar/index.html @@ -0,0 +1,48 @@ +--- +title: ネットワークモニターツールバー +slug: Tools/Network_Monitor/toolbar +tags: + - '119n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/toolbar +--- +<p>{{ToolsSidebar}}</p> + +<p>ネットワークモニタには2つのツールバー領域があり、1つはメインセクションの上に、もう１つは下にあります。</p> + +<h2 id="ツールバー">ツールバー</h2> + +<p>ツールバーは、メインネットワークモニタウィンドウの上部にあります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16247/network_toolbar.png" style="display: block; height: 98px; margin-left: auto; margin-right: auto; width: 1200px;"></p> + +<p>It provides:</p> + +<ul> + <li><a href="/ja/docs/Tools/Network_Monitor">ネットワークリクエストリスト</a>をクリアするアイコン</li> + <li><a href="/ja/docs/Tools/Network_Monitor#Filtering_by_URL">URL</a>と<a href="/ja/docs/Tools/Network_Monitor#Filtering_by_properties">プロパティ</a>でリクエストをフィルタできるようにするボックス</li> + <li>タイプ別にネットワークリクエストリストをフィルタリングするための一連のアイコン： + <ul> + <li>レスポンスのコンテンツタイプ別</li> + <li>XHR リクエスト</li> + <li>WebSocketのアップグレード（WSとラベル付け）</li> + </ul> + デフォルトでは、新しいページに移動するか現在のページをリロードするたびにネットワークモニタがクリアされます。[Persist Logs] チェックボックスをオンにするとこの動作を変更できます。</li> + <li>キャッシュを無効にするためのチェックボックス。</li> + <li>スロットリング</li> + <li>HAR</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16248/network_monitor_bottom_toolbar.png" style="border: 1px solid black; height: 48px; width: 2010px;"></p> + +<p>ネットワークモニタの下部にある2番目のツールバー領域には、次の項目があります。</p> + +<ul> + <li><a href="/ja/docs/Tools/Network_Monitor#Performance_analysis">パフォーマンス分析</a>を開始するアイコン。</li> + <li>リクエスト数、合計サイズ、合計時間など、このページの概要。</li> +</ul> diff --git a/files/ja/tools/page_inspector/3-pane_mode/index.html b/files/ja/tools/page_inspector/3-pane_mode/index.html new file mode 100644 index 0000000000..a7a9fd3966 --- /dev/null +++ b/files/ja/tools/page_inspector/3-pane_mode/index.html @@ -0,0 +1,69 @@ +--- +title: 3ペインモードのページインスペクタ +slug: Tools/Page_Inspector/3-pane_mode +tags: + - 3-pane + - CSS + - インスペクタ + - ガイド + - ツール +translation_of: Tools/Page_Inspector/3-pane_mode +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">この記事では、ページインスペクタの3ペインモードを使用する方法について説明します。</p> + +<h2 id="機能の概要">機能の概要</h2> + +<p>Firefox 62以降では、<a href="/en-US/docs/Tools/Page_Inspector">ページインスペクター</a> に新しいモード (<strong>3ペインモード</strong>) が用意されています。これを有効にすると、同時に以下を見ることができます：</p> + +<ul> + <li>The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML pane</a> on the left hand side, as usual.</li> + <li>The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">CSS Rules</a> in the middle in their own separate pane, rather than as a tab.</li> + <li>The other CSS related features — such as <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed styles view</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animations view</a>, and <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">Fonts view</a> — in tabs on the right hand side, as usual.</li> +</ul> + +<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p> + +<div class="note"> +<p><strong>Note</strong>: 幅の狭いブラウザウィンドウの幅では、CSSルールペインの下にタブが表示されます。</p> +</div> + +<p>独自のペインに CSS ルールを設定すると、HTML を検査して CSS を編集するだけでなく、計算されたスタイルやグリッドなどの CSS 機能にリアルタイムで反映させることができます。効果を見るには、該当するタブを開いておく必要があります。</p> + +<h2 id="簡単なウォークスルー"><span class="short_text" id="result_box" lang="ja"><span>簡単なウォークスルー</span></span></h2> + +<p>3ペインのインスペクタはデフォルトで無効になっています。 これは、左側のタブペインにあるトグルコントロールで有効になります。</p> + +<p><img alt="a view of the tabs panel, showing the 2 to 3 pane toggle icon" src="https://mdn.mozillademos.org/files/15937/toggle-icon-final.png" style="display: block; height: 241px; margin: 0px auto; width: 410px;"></p> + +<p>トグルコントロールを押して、2ペインと3ペインの表示を切り替えます。</p> + +<p><img alt="The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15936/2-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 1195px;"></p> + +<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p> + +<p>3ペインモードを有効にすると、ページに適用されたルールを編集するときに CSS 機能の実際の変更を確認できます。 たとえば、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>プロパティを編集し、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">グリッドインスペクタ</a>ですぐに変更を観察できます。</p> + +<p>{{EmbedYouTube("ELS2OOUvxIw")}}</p> + +<h2 id="Firefox_62_以前で3ペインのインスペクタを有効にする">Firefox 62 以前で3ペインのインスペクタを有効にする</h2> + +<p>以前のバージョンの Firefox (Firefox 59/60 以降) では、about:config に移動して次の prefs を <code>true</code> に切り替えることで、Release/Beta で3ペインモードを有効にすることができます：</p> + +<p><code>devtools.inspector.split-rule-enabled</code> — 3ペインモードのオンとオフを切り替えます。</p> + +<p><code>devtools.inspector.split-sidebar-toggle</code> — これにより UI トグルボタンが追加され、オン/オフを切り替えることができます。</p> + +<p>Firefox 61 では、これらの設定が次のように変更されました。</p> + +<ul> + <li><code>devtools.inspector.three-pane-enabled</code></li> + <li><code>devtools.inspector.three-pane-toggle</code></li> +</ul> + +<p>Firefox 61の機能をテストするには、リリース/ベータ版でこれらの2つを <code>true</code> に切り替える必要があります。</p> + +<div class="note"> +<p><strong>Note</strong>: 3ペインのインスペクタは、Firefox 62 より前のNightly/Developer 版ですでに有効になっています。</p> +</div> diff --git a/files/ja/tools/page_inspector/3d_view/index.html b/files/ja/tools/page_inspector/3d_view/index.html new file mode 100644 index 0000000000..daac55be01 --- /dev/null +++ b/files/ja/tools/page_inspector/3d_view/index.html @@ -0,0 +1,103 @@ +--- +title: 3D ビュー +slug: Tools/Page_Inspector/3D_view +tags: + - HTML + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/3D_View +--- +<div>{{ToolsSidebar}}</div><div class="warning"> +<p>Firefox 47 より、3D ビューは使用できません。</p> + +<p>同様の機能を提供するアドオンがあります: <a href="https://addons.mozilla.org/firefox/addon/tilt/">https://addons.mozilla.org/firefox/addon/tilt/</a>。ただし組み込み版と同じく、このアドオンは<a href="/ja/docs/Mozilla/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> で動作しません。</p> +</div> + +<p>3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。</p> + +<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p> + +<p>ビューをクリックしてドラッグすると、ページの DOM 階層構造の 3D 表示を別の視点から見たり、構造を確認しやすくするために回転することや向きの変更ができます。オフスクリーンの要素が見えるようになりますので、見えているコンテンツに対して要素がどこに配置されているかを確認できます。また要素をクリックすると、その HTML を <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML パネル</a> や <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane" title="Style panel">スタイルパネル</a> で参照できます。逆にパンくずリストで要素をクリックすると、3D ビュー内で選択されている要素を変更できます。</p> + +<p>ページ調査ツールに 3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する必要があるかもしれません。詳しくは、<a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">ブロックリストに登録されたドライバのページ</a>をご覧ください。</p> + +<h2 id="Controlling_the_3D_view" name="Controlling_the_3D_view">3D ビューのコントロール</h2> + +<p>3D ビューで使用できるキーボードショートカットとマウス操作を以下に示します。</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">機能</td> + <td class="header">キーボード</td> + <td class="header">マウス</td> + </tr> + <tr> + <td>ズームイン/アウト</td> + <td><kbd>+</kbd> / <kbd>-</kbd></td> + <td>ホイールの上回転/下回転</td> + </tr> + <tr> + <td>左右の回転</td> + <td><kbd>a</kbd> / <kbd>d</kbd></td> + <td>左右へのドラッグ</td> + </tr> + <tr> + <td>上下の回転</td> + <td><kbd>w</kbd> / <kbd>s</kbd></td> + <td>上下へのドラッグ</td> + </tr> + <tr> + <td>左右の移動</td> + <td><kbd>←</kbd> / <kbd>→</kbd></td> + <td>左右へのドラッグ</td> + </tr> + <tr> + <td>上下の移動</td> + <td><kbd>↑</kbd> / <kbd>↓</kbd></td> + <td>上下へのドラッグ</td> + </tr> + <tr> + <td>ズームレベルの初期化</td> + <td><kbd>0</kbd></td> + <td>ズームレベルを既定の状態に初期化します。</td> + </tr> + <tr> + <td>選択したノードへフォーカス</td> + <td><kbd>f</kbd></td> + <td>選択したノードが見えるようにビューを移動します。 {{fx_minversion_inline("13.0")}}</td> + </tr> + <tr> + <td>ビューの初期化</td> + <td><kbd>r</kbd></td> + <td>ズーム、回転、移動を既定の状態に初期化します。{{fx_minversion_inline("12.0")}}</td> + </tr> + <tr> + <td>選択中のノードを隠す</td> + <td><kbd>x</kbd></td> + <td>現在選択しているノードを非表示にします。これは覆い隠されているノードを明らかにする必要がある場合に役立ちます。{{fx_minversion_inline("12.0")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Use_cases_for_the_3D_view" name="Use_cases_for_the_3D_view">3D ビューの用途</h2> + +<p>さまざまな状況で 3D ビューは役に立ちます:</p> + +<ul> + <li>壊れた HTML によりレイアウトの問題が発生している場合に 3D ビューで確認することで、どこに誤りがあるかを見つけることの助けになります。レイアウトの問題は、コンテンツの入れ子関係の誤りによって発生することがよくあります。3D ビューで表示してどの要素が誤った入れ子になっているかを見ると、入れ子の誤りがより明確になります。</li> + <li>コンテンツが表示されない場合に、その理由がわかるかもしれません。3D ビューではページの可視領域の外側に表示されている要素を見るためにズームアウトすることができますので、この方法で外れているコンテンツを見つけることができます。</li> + <li>レイアウトを最適化する方法があるかを調べるために、ページがどのような構造であるかを確認することができます。</li> + <li>また、3D ビューの表示は<strong>印象的</strong>です。</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector" title="Page Inspector">ページインスペクタ</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML パネル</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane" title="Style panel">スタイルパネル</a></li> + <li><a href="/ja/docs/Tools" title="Tools">開発ツール</a></li> + <li><a href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (ブログ記事)</li> +</ul> diff --git a/files/ja/tools/page_inspector/how_to/edit_css_filters/index.html b/files/ja/tools/page_inspector/how_to/edit_css_filters/index.html new file mode 100644 index 0000000000..5f9a89304f --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/edit_css_filters/index.html @@ -0,0 +1,36 @@ +--- +title: CSS フィルターを編集する +slug: Tools/Page_Inspector/How_to/Edit_CSS_filters +tags: + - CSS + - DevTools + - Filters + - Page Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters +--- +<div>{{ToolsSidebar}}</div><p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> で、<code><a href="/ja/docs/Web/CSS/filter">filter</a></code> プロパティの隣に丸い灰色と白色のマークを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10873/filter-editor-swatch.png" style="display: block; height: 70px; margin-left: auto; margin-right: auto; width: 768px;"></p> + +<p>このマークをクリックすると、フィルターエディターが開きます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11309/filter-editor.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 603px;"></p> + +<p>フィルターを追加、削除、編集、およびドラッグしてフィルターの適用順序を変更できます:</p> + +<p>{{EmbedYouTube("yws01SEPTvg")}}</p> + +<h2 id="Saving_filter_presets" name="Saving_filter_presets">フィルターのプリセットを保存する</h2> + +<p>Firefox 42 より、プリセットのリストにフィルターを追加することもできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11311/filter-editor-presets.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 603px;"></p> + +<p>現在のフィルターをプリセットのリストに保存します:</p> + +<p>{{EmbedYouTube("bHcfLlZE8T8")}}</p> + +<p>保存したフィルターを、新たな要素に対して適用できます:</p> + +<p>{{EmbedYouTube("PK85L7ztQto")}}</p> diff --git a/files/ja/tools/page_inspector/how_to/edit_css_shapes/index.html b/files/ja/tools/page_inspector/how_to/edit_css_shapes/index.html new file mode 100644 index 0000000000..485ac68a01 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/edit_css_shapes/index.html @@ -0,0 +1,89 @@ +--- +title: CSS シェイプのパスを編集する +slug: Tools/Page_Inspector/How_to/Edit_CSS_shapes +tags: + - CSS + - DevTools + - Page Inspector + - Rules view + - Tools + - highlighter + - shapes +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_shapes +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">シェイプパスエディターは、CSS の {{cssxref("clip-path")}}、{{cssxref("shape-outside")}} プロパティと {{cssxref("<basic-shape>")}} 値を使用して作成したシェイプの確認や編集を支援するツールです。このガイドでは、ツールで使用可能なオプションを見ていきます。</p> + +<h2 id="Activate_deactivate_the_Shape_Path_Editor" name="Activate_deactivate_the_Shape_Path_Editor">シェイプパスエディターを起動および終了する</h2> + +<p>シェイプパスエディターは CSS ルールパネルからアクセスできます。パネルの開き方は <a href="/ja/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">インスペクターを開く</a> のガイドで説明しています。要素を選択すると、<code>shape-outside</code> など有効な値のそばにシェイプのアイコンが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15915/enable-shapes-editor.png" style="border-style: solid; border-width: 1px; height: 370px; width: 1836px;"></p> + +<p>アイコンをクリックすると、シェイプをハイライト表示するエディターが現れます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15916/circle.png" style="height: 686px; width: 1210px;"></p> + +<p>アイコンを再度クリックするとエディターが閉じます。あるいは別の要素を選択すると、別のエディターが現れます。シェイプパスエディターは、ページの再読み込み後に維持されません。再読み込みすると、もう一度要素を選択しなければなりません。</p> + +<h2 id="Understanding_the_lines_drawn_by_the_editor" name="Understanding_the_lines_drawn_by_the_editor">エディターが表示する線を理解する</h2> + +<p>ページ上のシェイプを選択するとシェイプパスエディターが、作成されたパスの理解を支援する線を表示します。</p> + +<ul> + <li><strong>実線</strong>は、テキストを折り返すシェイプの輪郭を表します。これはあなたが指定したシェイプです。シェイプがマージンボックスによって切り抜かれる場合は、マージンボックスがこの線の一部を構成します。</li> + <li><strong>破線</strong>は、マージンボックスを超えるシェイプの輪郭を表します。これは、マージンボックスによって切り抜かれる領域です。マージンボックスや、CSS シェイプで使用されるほかのボックスについては、<a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values">ボックス値からのシェイプ</a> のガイドをご覧ください。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15917/clipped-margin-box.png" style="height: 692px; width: 1290px;"></p> + +<h2 id="Editing_Basic_Shapes" name="Editing_Basic_Shapes">基本シェイプを編集する</h2> + +<p>この機能は、編集する基本シェイプの種類に応じて異なるツールが提供されます。アイコンをクリックしてシェイプパスエディターを起動すると、この機能を使用できます。また、コンテキストメニュー (<kbd>Ctrl</kbd> または <kbd>Cmd</kbd> + クリック) から付加機能を使用できます。</p> + +<h3 id="circle()" name="circle()">circle()</h3> + +<p><code>shape-outside</code> の値が <code>circle()</code> である場合は、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes#circle()">円形の基本シェイプ</a> を作成します。<code>circle()</code> 値の隣にあるシェイプアイコンをクリックすると、シェイプをハイライト表示して、円のサイズ変更と中心の移動を行う機能を提供します。マージンボックスを超えるように円を移動したりサイズを変更したりすると、マージンボックスによって輪郭が切り抜かれます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15917/clipped-margin-box.png" style="height: 692px; width: 1290px;"></p> + +<p>シェイプの編集に応じて、ルールパネルで <code>circle()</code> の値が変化します。これらの値をコピーしてスタイルシートに貼り付けると、編集後のパスで新しいシェイプを作成できます。</p> + +<h3 id="ellipse()" name="ellipse()">ellipse()</h3> + +<p><code>shape-outside</code> の値が <code>ellipse()</code> である場合は、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes#ellipse()">楕円形の基本シェイプ</a> を作成します。シェイプパスエディターは <code>ellipse()</code> 値でも、<code>circle()</code> とほぼ同様に機能します。楕円形はつぶれた円形ですので、シェイプのアイコンをクリックすると水平および垂直方向にサイズを変更する機能を提供します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15920/ellipse.png" style="height: 570px; width: 1216px;"></p> + +<h3 id="inset()" name="inset()">inset()</h3> + +<p><code>shape-outside</code> の値が <code>inset()</code> である場合は、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes#inset()">inset 型の基本シェイプ</a> を作成します。これは、マージンボックスの中で内容物を切り抜くオフセット値によってシェイプを作成できます。</p> + +<p>シェイプアイコンをクリックすると、矩形のそれぞれの辺を対象にしたシェイプパスエディターが起動しきます。辺をドラッグすると、オフセット値の top、right、bottom、left が更新されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15923/inset.png" style="height: 606px; width: 1214px;"></p> + +<h3 id="polygon()" name="polygon()">polygon()</h3> + +<p><code>shape-outside</code> の値が <code>polygon()</code> である場合は、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes#polygon()">多角形の基本シェイプ</a> を作成します。これは基本シェイプでもっとも複雑な値であり、シェイプを編集する際にツールが多くの機能を提供します:</p> + +<ul> + <li>シェイプのアイコンをクリックするとシェイプパスエディターが起動して、多角形シェイプの頂点を移動する機能を提供します。</li> + <li>辺の任意の場所をダブルクリックすると、新しい頂点を作成します。</li> + <li>既存の頂点をダブルクリックすると、頂点を削除します。<em>多角形は少なくとも 3 つの頂点が必要ですので注意してください</em>。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15918/polygon-edit.png" style="height: 660px; width: 1260px;"></p> + +<h3 id="Moving_and_scaling_shapes" name="Moving_and_scaling_shapes">シェイプを移動および拡大縮小する</h3> + +<p>ハイライト表示したシェイプで付加機能を使用できます。シェイプのアイコンを <kbd>Ctrl</kbd> または <kbd>Cmd</kbd> + クリックすると、シェイプの拡大・縮小や移動が可能なハイライト表示に替わります。こちらも、マージンボックスの境界を超える部分は切り抜かれます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15924/scaled-circle.png"></p> + +<p>多角形シェイプでは、軸にそって回転させる機能も提供します。</p> + +<h2 id="Browser_support" name="Browser_support">ブラウザーのサポート</h2> + +<p>シェイプパスエディターは現在、{{cssxref("clip-path")}} で生成したシェイプで機能します。Firefox 62 では {{cssxref("shape-outside")}} で生成したシェイプでも機能します。</p> diff --git a/files/ja/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/ja/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..7390574960 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,244 @@ +--- +title: CSS の調査と編集 +slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +<div>{{ToolsSidebar}}</div> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS ペイン</a> で、ページの CSS の調査や編集を行えます。</p> + +<h2 id="Examine_CSS_rules" name="Examine_CSS_rules">CSS ルールの調査</h2> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> では選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>未サポートや無効なスタイルの隣に、警告アイコンを表示します。これにより、あるスタイルがなぜ適用されないかを知る助けになります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Rule_display" name="Rule_display">ルールの表示</h3> + +<p>ここでは各ルールを、セレクターのリストと <code>property:value;</code> の宣言という形式で、スタイルシートのように表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<ul> + <li><em>一致する要素を強調</em>: セレクターの隣に、標的のアイコンがあります。これをクリックすると、ページ内でセレクターにマッチするすべてのノードを強調表示します。</li> + <li><em>オーバーライドされた宣言</em>: 後のルールでオーバーライドされた宣言には、打ち消し線が引かれます。<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">オーバーライドされた宣言</a> をご覧ください。</li> + <li><em>カスケードを表示</em>: オーバーライドされた宣言の隣に、拡大鏡のアイコンがあります。これをクリックすると、オーバーライドされたプロパティを含むルールのカスケード状況を確認できます。<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">オーバーライドされた宣言</a> をご覧ください。</li> + <li><em>有効/無効</em>: 宣言の上にマウスポインターを載せると、隣にチェックボックスが表示されます。このチェックボックスで宣言の有効・無効を切り替えできます。</li> + <li><em>ファイル名と行番号</em>: 右側に、ルールへのリンクがあります。詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">CSS ファイルへのリンク</a> をご覧ください。</li> +</ul> + +<p>Firefox 52 より <code><a href="/ja/docs/Web/CSS/display">display: grid</a></code> 宣言がある要素で、グリッドのアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) が表示されます。このアイコンをクリックすると、グリッドラインやグリッドトラックを含むグリッドの状態を、ページに重ねて表示します。詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">グリッドレイアウトを調査する</a> をご覧ください。</p> + +<p><a href="/ja/docs/Web/CSS/Cascade">ユーザーエージェントのスタイル</a> (<em>すなわち</em>、ブラウザーのデフォルトの CSS ルール) を表示するには、<a href="/ja/docs/Tools/Settings">開発ツールのオプション</a> パネルで "ブラウザー CSS を表示" を有効化します (この設定は <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">計算済みビュー</a> の [ブラウザー CSS] チェックボックスとは独立した設定ですので注意してください)。</p> + +<p>ユーザーエージェントのスタイルは背景が異なり、ファイル名と行番号のリンクに接頭辞 <code>(ユーザーエージェント)</code> がつきます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p> + +<h3 id="element_rule" name="element_rule">要素 {} ルール</h3> + +<p>ルール一覧の先頭にある <code>要素 {}</code> ルールは、本物の CSS ルールではありません。これは、要素の {{htmlattrxref("style")}} 属性で割り当てられた CSS プロパティを表します。</p> + +<p>Firefox 52 より標的のアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14520/target-icon.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) も表示しており、これはページで現在選択している要素を強調表示するための便利な手段です。</p> + +<p>{{EmbedYouTube("bQzOAFvEDco")}}</p> + +<h3 id="Filtering_rules" name="Filtering_rules">ルールのフィルタリング</h3> + +<p>ルールビューの上部に "スタイルを絞り込み" と記載されたボックスがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;"></p> + +<p>ここに入力すると以下のようになります:</p> + +<ul> + <li>入力した文字列を含まないルールは、すべて非表示になります。</li> + <li>入力した文字列を含む宣言をハイライト表示します。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>検索ボックス末尾の "X" 印をクリックすると、フィルターを削除します。</p> + +<div class="note"> +<p>ルールビューで <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、<kbd>Esc</kbd> を押下すると入力内容を削除できます。</p> +</div> + +<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p> + +<h4 id="Strict_search" name="Strict_search">厳密な検索</h4> + +<p>デフォルトで検索ボックスは、文字列を一部に含むすべての宣言を強調表示します。例えば "color" を検索すると、<code><a href="/ja/docs/Web/CSS/color">color</a></code> だけでなく <code><a href="/ja/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> や <code><a href="/ja/docs/Web/CSS/background-color">background-color</a></code> を含む宣言も強調表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>`color` のように検索語をバッククォートで括ると、完全一致に限定して検索します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Expanding_shorthand_properties" name="Expanding_shorthand_properties">ショートハンドプロパティを展開する</h3> + +<p><a href="/ja/docs/Web/CSS/Shorthand_properties">ショートハンドプロパティ</a> のそばにある三角印をクリックすると、関連するロングハンドプロパティを表示するように展開できます。</p> + +<h3 id="Displaying_pseudo-elements" name="Displaying_pseudo-elements">疑似要素を表示する</h3> + +<p>選択した要素に以下の <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a> が適用されている場合に、それらをルールビューで表示します:</p> + +<p><code>::after<br> + ::backdrop<br> + ::before<br> + ::first-letter<br> + ::first-line<br> + ::selection<br> + :-moz-color-swatch<br> + :-moz-number-spin-box<br> + :-moz-number-spin-down<br> + :-moz-number-spin-up<br> + :-moz-number-text<br> + :-moz-number-wrapper<br> + :-moz-placeholder<br> + :-moz-progress-bar<br> + :-moz-range-progress<br> + :-moz-range-thumb<br> + :-moz-range-track<br> + :-moz-selection</code></p> + +<p>選択した要素に適用している疑似要素がある場合は、選択した要素より前にそれらを表示します。ただし、展開しない状態で隠されています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p> + +<p>三角印をクリックすると、疑似要素を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<h3 id="Setting_hover_active_focus" name="Setting_hover_active_focus">:hover、:active、:focus を設定する</h3> + +<p>フィルターボックスの右側にボタンがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;"></p> + +<p>ボタンをクリックすると 3 つのチェックボックスが現れます。これを使用して、選択した要素に {{cssxref(":hover")}}、{{cssxref(":active")}}、{{cssxref(":focus")}} の各疑似クラスを設定できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>この機能は、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">HTML ビューのポップアップメニュー</a> から使用することもできます。</p> + +<p>いずれかの疑似クラスを設定するとマークアップビューで、疑似クラスが適用されたすべてのノードの隣に橙色の印を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Link_to_CSS_file" name="Link_to_CSS_file">CSS ファイルへのリンク</h3> + +<p>各ルールの右上に、ソースファイルの名前と行番号をリンクとして表示します。このリンクをクリックすると、ファイルを <a href="/ja/docs/Tools/Style_Editor" title="Tools/Style_Editor">スタイルエディター</a> で開きます。</p> + +<p>ソースファイルの場所をコピーできます。リンクを右クリックして [URL をコピー] を選択してください。</p> + +<p>インスペクターは CSS ソースマップを理解します。ソースマップをサポートする CSS プリプロセッサーを使用しており、また <a href="/ja/docs/Tools_Toolbox#Style_Editor">スタイルエディターの設定</a> でソースマップのサポートを有効にしている場合は、生成された CSS ではなく元のソースファイルへのリンクになります。CSS ソースマップのサポートについて、詳しくは <a href="/ja/docs/Tools/Style_Editor#Source_map_support">スタイルエディターのドキュメント</a> をご覧ください。</p> + +<h3 id="Overridden_declarations" name="Overridden_declarations">オーバーライドされた宣言</h3> + +<p>CSS 宣言がよりウェイトの大きい別の CSS ルールにオーバーライドされた場合、オーバーライドされた宣言に打ち消し線を表示します。</p> + +<p>オーバーライドされた宣言の隣に拡大鏡のアイコンがあります。アイコンをクリックすると、カレントノードに適用されているプロパティで、同じプロパティを設定しようとしたものだけを表示するようにルールビューをフィルタリングします。これは、そのプロパティのカスケードの全体像です。</p> + +<p>どのルールが宣言をオーバーライドしているかを、簡単に確認できます:</p> + +<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p> + +<h2 id="Examine_computed_CSS" name="Examine_computed_CSS">計算済み CSS の調査</h2> + +<p>選択した要素向けに計算された CSS を確認するには、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Computed_view">計算済みビュー</a> に切り替えてください。ここでは選択した要素について、各 CSS プロパティの計算済みの値を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p><kbd>Tab</kbd> を使用して、これらを選択できます。また Firefox 49 より、これらのプロパティについて詳しい情報を確認できます。プロパティを選択して <kbd>F1</kbd> を押下すると、MDN のリファレンスページが開きます。</p> + +<p>プロパティ名の隣にある三角印をクリックする (または選択中に <kbd>Enter</kbd> または <kbd>Space</kbd> を押下する) と、その値を設定したルールおよびそのルールが存在するソースファイルのファイル名と行番号を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>デフォルトでは、ページで明示的に設定された値のみ表示します。すべての値を見るには、[ブラウザー CSS] チェックボックスをクリックしてください。<kbd>Tab</kbd> を使用してファイル名/行番号に移動できます。そして <kbd>Enter</kbd>/<kbd>Return</kbd> を押下すると、関連するファイルを <a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a> で開きます。</p> + +<p>検索ボックスに入力すると、その場で一覧を絞り込みます。例えばフォント関連の設定だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティのみ表示します。同様に、プロパティの値も検索できます。フォントを "Lucida Grande" に設定したルールを探すには、フォント名を検索ボックスに入力します。</p> + +<div class="note"> +<p>計算済みビューで <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、<kbd>Esc</kbd> を押下すると入力内容を削除できます。</p> +</div> + +<h2 id="Edit_rules" name="Edit_rules">ルールの編集</h2> + +<p>ルールビューで宣言またはセレクターをクリックすると、ルールを編集して結果を直ちに確認できます。また、<kbd>Tab</kbd> を使用して別の既存プロパティや値を選択でき、<kbd>Enter</kbd> または <kbd>Space</kbd> を押下するとそれらを編集できます。新しい宣言をルールに追加するには、ルールの最後の行 (閉じ括弧がある行) をクリックします。</p> + +<p>プロパティ名を入力するのに応じて、オートコンプリート候補のリストを表示します。<kbd>Tab</kbd> を押下して現在の候補を受け入れるか、<kbd>↑</kbd> および <kbd>↓</kbd> を押下してリスト内を移動します。デフォルトで選択される項目は、入力した文字から始まるプロパティでもっとも一般的なものです。例えばユーザが "c" を入力すると、デフォルトで "color" を選択します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>プロパティに対して無効な値や未知のプロパティ名を編集中に入力すると、宣言の後ろに黄色の警告アイコンを表示します。</p> + +<p>ルールビューで編集した内容が <a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a> に反映されます。逆も同様です。実施した変更点は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。</p> + +<p>CSS を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h3 id="CSS_variable_autocompletion" name="CSS_variable_autocompletion">CSS 変数のオートコンプリート</h3> + +<p>CSS で定義した変数に応じて、<a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数名</a> のオートコンプリートを行います。プロパティの値に <code>var(</code> と入力してダッシュ (<code>-</code>) を押下すると、CSS で宣言した変数をオートコンプリートのリストに表示します。Firefox 61 より、それぞれの変数にどの色の値が保存されているかを明確にするために色見本を表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16053/variable-autocomplete.png" style="display: block; height: 335px; margin: 0px auto; width: 546px;"></p> + +<p>さらに、CSS 変数名にマウスポインターを載せると、変数に保存されている色の値をツールチップで表示します ({{bug(1431949)}})。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16054/variable-tooltip.png" style="display: block; height: 166px; margin: 0px auto; width: 480px;"></p> + +<h3 id="Editing_keyboard_shortcuts" name="Editing_keyboard_shortcuts">キーボードショートカットで編集する</h3> + +<p>編集中は、矢印キーや Page Up/Down キーを (ほかのキーと組み合わせて) 使用して数値のルールを増減できます:</p> + +<ul> + <li><kbd>↑</kbd> 矢印キーで値を 1 増やします (例えば "1px" が "2px" に変わります)。</li> + <li><kbd>Shift</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd> で値を 10 増減します。</li> + <li><kbd>Alt</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd> で値を 0.1 増減します。Firefox 60 でこの組み合わせを、Linux および Windows で OS のデフォルトのショートカットと衝突しないようにするため <kbd>Ctrl</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd> に変更しましたので注意してください ({{bug("1413314")}})。Mac では変わりません。macOS は <kbd>Ctrl</kbd> + <kbd>↑</kbd> がデフォルトで、Mission Control を表示するショートカットキーです。</li> + <li><kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> で値を 100 増減します。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h2 id="Add_rules" name="Add_rules">ルールの追加</h2> + +<p>ルールビューでルールを追加できます。右クリックで表示されるコンテキストメニューで [新しいルールを追加] を選択してください。選択中のノードにマッチするセレクターの配下に、新たな CSS ルールを追加します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>また、同じことができるボタンもあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h2 id="Copy_rules" name="Copy_rules">ルールをコピーする</h2> + +<p>ルールビューのコンテキストメニュー項目を使用して、ルールやルールの一部分をコピーできます:</p> + +<ul> + <li>ルールをコピー</li> + <li>セレクタをコピー</li> + <li>プロパティ宣言をコピー</li> + <li>プロパティ名をコピー</li> + <li>プロパティの値をコピー</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>インスペクターのすべての <a href="/ja/docs/Tools/Page_Inspector/Keyboard_shortcuts">キーボードショートカット</a> の一覧</li> + <li>インスペクターには、色・フォント・アニメーションといった個々の CSS 機能を扱うことに特化したツールがあります。これらのツールについては、<a href="/ja/docs/Tools/Page_Inspector">ハウツーガイド</a> をご覧ください。</li> +</ul> diff --git a/files/ja/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/ja/tools/page_inspector/how_to/examine_and_edit_html/index.html new file mode 100644 index 0000000000..243421f8fe --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_and_edit_html/index.html @@ -0,0 +1,387 @@ +--- +title: HTML の調査と編集 +slug: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +tags: + - インスペクタ + - ガイド + - ツール +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +<div>{{ToolsSidebar}}</div> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a> で、ページの HTML の調査や編集を行えます。</p> + +<h2 id="Navigating_the_HTML" name="Navigating_the_HTML">HTML のナビゲーション</h2> + +<h3 id="HTML_breadcrumbs" name="HTML_breadcrumbs">HTML パンくずリスト</h3> + +<p>HTML ペインの下部に、パンくずリストのツールバーがあります。これは選択した要素を含む枝の、ドキュメント内での階層構造を表します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15499/57-html-panel.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 633px;"></p> + +<p>パンくずリストにマウスポインターを載せると、その要素をページ上でハイライト表示します。</p> + +<p>パンくずリストの <a href="/ja/docs/Tools/Page_Inspector/Keyboard_shortcuts#Breadcrumbs_bar">キーボードショートカット</a> があります。</p> + +<div class="note"> +<p>Firefox 48 より前のバージョンでは、パンくずリストのツールバーがマークアップペインの上にありました。</p> +</div> + +<h3 id="Searching" name="Searching">検索</h3> + +<p>Firefox 45 より、インスペクターの検索ボックスは、カレントドキュメントおよびすべてのフレーム内のマークアップから検索します。</p> + +<p>検索ボックスをクリックして広げるか、<kbd>Ctrl</kbd> + <kbd>F</kbd> または Mac で <kbd>Cmd</kbd> + <kbd>F</kbd> を押下して、マークアップの検索を始めます。</p> + +<p>検索ボックスに入力すると、検索文字列にマッチする class 属性や id 属性を表示するオートコンプリートをポップアップします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15495/html-code-search.png" style="display: block; height: 398px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p><kbd>↑</kbd> および <kbd>↓</kbd> キーを押下すると候補を行き来でき、<kbd>Tab</kbd> で選択中の候補を選択、さらに <kbd>Enter</kbd> でその属性を持つ最初のノードを選択します。</p> + +<p>オートコンプリートを選択せずにセレクターなしの検索文字列を入力すると、すべての属性名および属性値、ノードのテキストコンテンツを含むドキュメントの全文から検索します。</p> + +<p>{{EmbedYouTube("AKBhnfp1Opo")}}</p> + +<p>マッチした箇所を巡回するには、<kbd>Enter</kbd> を押下します。Firefox 48 より、<kbd>Shift</kbd> + <kbd>Enter</kbd> を使用して、マッチした箇所を逆方向に巡回できます。</p> + +<h3 id="HTML_tree" name="HTML_tree">HTML ツリー</h3> + +<p>ペインの残りの部分に、ページの HTML をツリー形式で表示します (この UI はマークアップビューとも呼ばれます)。各ノードの左側に三角印があります。この印をクリックすると、ノードを展開します。Alt キーを押しながら三角印をクリックすると、配下のノードをすべて展開します。</p> + +<p><img alt="The new Firefox 57 inspector HTML tree." src="https://mdn.mozillademos.org/files/15503/57-html-tree.png" style="display: block; height: 433px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<p>ツリー内のノードにマウスポインターを載せると、その要素をページ上でハイライト表示します。</p> + +<p><code><a href="/ja/docs/Web/CSS/display">display: none</a></code> を使用して非表示にしているノードは、淡色で (例えば {{HTMLElement("head")}} などレンダリングされない要素と同様に) 表示します。</p> + +<p>Firefox 53 より、内容物が大きなノードが折りたたまれているとき、開始タグと終了タグの間に省略記号を表示します。Firefox 53 より前のバージョンでは、折りたたまれたノードに子が存在するかを判別できませんでした。現在は、ツリー内に存在する子孫をこのアイコンで示します: <img alt="" src="https://mdn.mozillademos.org/files/14925/child-node-indicator.png" style="height: 24px; width: 32px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: HTML ツリーで使用できる便利なキーボードショートカットがいくつかあります - <a href="/ja/docs/Tools/Keyboard_shortcuts#HTML_pane">HTML ペインのキーボードショートカットリスト</a>をご覧ください。</p> +</div> + +<h3 id="before_and_after" name="before_and_after">::before と ::after</h3> + +<p>Firefox 35 より、{{cssxref("::before")}} および {{cssxref("::after")}} を使用して追加した疑似要素を調査できます。</p> + +<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p> + +<h3 id="カスタム要素定義">カスタム要素定義</h3> + +<p>カスタム要素を含むページでインスペクタを開くと、デバッガでカスタム要素のクラス定義を表示できます。</p> + +<ol> + <li>要素を検査します</li> + <li><code>custom</code> という単語をクリックします。</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16306/custom_pc_01.png" style="display: block; height: 580px; margin: 0px auto; width: 852px;"></p> + +<p>要素のクラスのソースがデバッガに表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16307/custom_pc_02.png" style="display: block; height: 290px; margin: 0px auto; width: 852px;"></p> + +<h3 id="Whitespace-only_text_nodes" name="Whitespace-only_text_nodes">ホワイトスペースのみのテキストノード</h3> + +<div class="geckoVersionNote">Firefox 52 の新機能</div> + +<p>ウェブ開発者は、1 行のテキストにすべてのコードを記述するわけではありません。マークアップが読みやすくなりますので、空白・改行・タブといったホワイトスペースを HTML 要素の間に置きます。</p> + +<p>通常はこれらのホワイトスペースに効果がなく視覚的に出力されませんが、実際はブラウザーが HTML をパースするときに、ノード内に含まれていない要素のために無名のテキストノードを自動的に生成します。これは (あらゆるテキストの後にある) ホワイトスペースも含まれます。</p> + +<p>これらの自動生成されたテキストノードは <a href="/ja/docs/Web/Guide/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">インラインレベル</a> のノードであり、幅・高さともに 0 ではない領域をブラウザーが与えます。そして、マージンやパティングを設定していないにもかかわらず、要素の間に謎の隙間が現れるでしょう。</p> + +<p>Firefox 52 より、インスペクターでホワイトスペースのノードを表示しますので、マークアップ内の隙間がどこから発生したかがわかります。ホワイトスペースのノードを丸印 (<img alt="" src="https://mdn.mozillademos.org/files/14931/new-whitespace-text-indicator.png" style="height: 23px; width: 30px;">) で表して、マウスポインターを載せると説明のツールチップを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14929/whitespace-text-nodes-2.png" style="display: block; height: 1010px; margin-left: auto; margin-right: auto; width: 912px;"></p> + +<p><a href="https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html">https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html</a> のデモで、実際の動作をご覧ください。</p> + +<h3 id="仮想ルート">仮想ルート</h3> + +<p>DOM に存在する仮想ルートは、通常の DOM と同じ方法で HTML ページに公開されます。仮想ルートは <code>#shadow-root</code> というノードによって表されます。拡張矢印をクリックすると、仮想 DOM の完全な内容が表示され、ページの DOM の他の部分と同様の方法で含まれるノードを操作できます 限られたフィーチャセット - 仮想 DOM ノードのドラッグアンドドロップや削除はできません。</p> + +<p><img alt="A view of a shadow root shown inside the DOM tree in the Firefox DevTools" src="https://mdn.mozillademos.org/files/16051/shadow-root-in-html-pane.png" style="height: 485px; width: 1303px;"></p> + +<p>仮想 DOM に "slotted" 要素が含まれている場合({{htmlelement("slot")}} 要素の内部に挿入された後の <code>slot</code> 属性を持つ要素 - これらの使用方法の説明については、<a href="/ja/docs/Web/Web_Components/Using_templates_and_slots#Adding_flexibility_with_slots">slot に柔軟性を追加する</a>を参照してください)、"slotted" 要素は対応する {{htmlelement("slot")}} 要素の内部に表示され、その横に "公開" リンクが表示されます。「公開」リンクをクリックすると、仮想 DOM の外に存在する <code>slot</code> 属性を持つ要素が強調表示されます。</p> + +<p><img alt="A view of a shadow root shown inside the DOM tree in the Firefox DevTools" src="https://mdn.mozillademos.org/files/16063/slots.png" style="height: 208px; width: 672px;"></p> + +<p>これは <code><slot></code> 要素があり、そのコンテンツのソースを見つけることができない場合に非常に便利です。</p> + +<div class="note"> +<p><strong>メモ</strong>: 仮想 DOM 検査は Firefox 61 で実装されましたが、現在は dom.webcomponents.shadowdom.enabled プレフィックスの後ろに隠れています。現在、Firefox 63 のようになっているプラットフォームで Web コンポーネント/仮想 DOM が利用可能になると、この機能が有効になります。</p> +</div> + +<h2 id="Element_popup_context_menu" name="Element_popup_context_menu">要素のポップアップコンテキストメニュー</h2> + +<p>ポップアップコンテキストメニューを使用して、特定のノードに対して共通的なタスクを実行できます。要素をコンテキストクリックすると、メニューを表示します。メニューには、以下の項目があります。リンクをクリックすると、{{anch("Context menu reference", "コンテキストメニューリファレンス")}} のコマンド説明を確認できます:</p> + +<ul> + <li><a href="#Edit as HTML">HTML として編集</a></li> + <li><a href="#Create New Node">新しいノードを作成</a></li> + <li><a href="#Duplicate Node">ノードを複製</a></li> + <li><a href="#Delete Node">ノードを削除</a></li> + <li>属性 + <ul> + <li><a href="#Attribute/Add Attribute">属性を追加</a></li> + <li><a href="#Attribute/Edit Attribute">属性を編集</a></li> + <li><a href="#Attribute/Remove Attribute">属性を削除</a></li> + </ul> + </li> + <li><a href="#:hover">hover</a></li> + <li><a href="#:active">active</a></li> + <li><a href="#:focus">focus</a></li> + <li>コピー + <ul> + <li><a href="#Copy Inner HTML">innerHTML</a></li> + <li><a href="#Copy Outer HTML">outerHTML</a></li> + <li><a href="#Copy Unique Selector">CSS セレクター</a></li> + <li><a href="#Copy CSS Path">CSS パス</a></li> + <li><a href="#Copy Image Data-URL">画像のデータ URI</a></li> + <li><a href="#Copy Attribute">属性</a></li> + </ul> + </li> + <li>貼り付け + <ul> + <li><a href="#Paste Inner HTML">innerHTML</a></li> + <li><a href="#Paste Outer HTML">outerHTML</a></li> + <li><a href="#Paste/Before">前</a></li> + <li><a href="#Paste/After">後</a></li> + <li><a href="#Paste/As First Child">最初の子要素として</a></li> + <li><a href="#Paste/As Last Child">最後の子要素として</a></li> + </ul> + </li> + <li><a href="#Expand All">すべて展開</a></li> + <li><a href="#Collapse">折りたたむ</a></li> + <li><a href="#Scroll Into View">この要素の位置にスクロール</a></li> + <li><a href="#Screenshot Node">ノードのスクリーンショットを撮影</a></li> + <li><a href="#Use in Console">コンソールで使う</a></li> + <li><a href="#Show DOM Properties">DOM プロパティを表示</a></li> + <li><a href="#Open Link in New Tab">リンクを新しいタブで開く</a> *</li> + <li><a href="#Open File in Debugger">デバッガーでファイルを開く</a> *</li> + <li><a href="#Open File in Style-Editor">スタイルエディターでファイルを開く</a> *</li> + <li><a href="#Copy Link Address">リンクの URL をコピー</a> *</li> +</ul> + +<p>* これらの項目は特定の状況に限り表示されます。例えば [スタイルエディターでファイルを開く] は、CSS ファイルへのリンクの上でコンテキストクリックしたときに表示されます。</p> + +<h3 id="Context_menu_reference" name="Context_menu_reference">コンテキストメニューリファレンス</h3> + +<div class="note"> +<p><strong>注記</strong>: Firefox 49 よりコンテキストメニューは、よりコンパクトにするため大きく再編されました。メニューの構造が上で示したものと若干異なっていても、悩まないでください。それでも同じ項目を使用できます。</p> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 30%;"><a id="Edit as HTML">HTML として編集</a></td> + <td><a href="#Editing_HTML">要素の HTML を編集する</a></td> + </tr> + <tr> + <td><a id="Copy Inner HTML">(コピー) innerHTML</a></td> + <td>要素の innerHTML をコピーする</td> + </tr> + <tr> + <td><a id="Copy Outer HTML">(コピー) outerHTML</a></td> + <td> + <p>要素の outerHTML をコピーする</p> + + <p><kbd>Ctrl</kbd> + <kbd>C</kbd> (Mac では <kbd>Cmd</kbd> + <kbd>C</kbd>) を押下すると同じことができます。</p> + </td> + </tr> + <tr> + <td><a id="Copy Unique Selector">(コピー) 一意なセレクタ/CSS セレクター</a></td> + <td>要素を一意に選択する CSS セレクターをコピーする</td> + </tr> + <tr> + <td><a id="Copy CSS Path">(コピー) CSS パス</a></td> + <td>要素へのフルパスを表す CSS セレクターをコピーする</td> + </tr> + <tr> + <td><a id="Copy Image Data-URL">(コピー) 画像のデータ URI</a></td> + <td>選択した要素が画像である場合に、画像を data:// URL としてコピーする</td> + </tr> + <tr> + <td><a id="Copy Attribute">(Copy) 属性</a></td> + <td>要素の属性をコピーする</td> + </tr> + <tr> + </tr> + <tr> + <td><a id="Show DOM Properties">DOM プロパティを表示</a></td> + <td><a href="/ja/docs/Tools/Web_Console#The_split_console">常時表示コンソール</a> を開いて、選択中の要素を <a href="/ja/docs/Tools/Web_Console#Inspecting_objects">調査</a> するために "<code>inspect($0)</code>" コマンドを実行する</td> + </tr> + <tr> + <td><a id="Use in Console">コンソールで使う</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 43 の新機能</p> + </div> + 現在選択しているノードを <code>temp0</code> という名前の変数 (<code>temp0</code> がすでに使用中である場合は、<code>temp1</code> などを使用) に代入して <a href="/ja/docs/Tools/Web_Console#The_split_console">常時表示コンソール</a> を開くことにより、コンソールのコマンドラインを使用してノードと対話できます。</td> + </tr> + <tr> + <td><a id="Expand All">すべて展開</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + ツリービューで、選択した要素および配下の要素をすべて展開します。これは、要素の隣にある展開用矢印を <kbd>Alt</kbd> キーを押下しながらクリックすることと同じです。</td> + </tr> + <tr> + <td><a id="Collapse">折りたたむ</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + ツリービューで、選択した要素を折りたたみます。これは、展開されている要素の展開用矢印をクリックすることと同じです。</td> + </tr> + <tr> + <td><a id="Paste Inner HTML">(貼り付け) innerHTML</a></td> + <td>クリップボード内のコンテンツを、ノードの <a href="/ja/docs/Web/API/element.innerHTML">innerHTML</a> として貼り付ける</td> + </tr> + <tr> + <td><a id="Paste Outer HTML">(貼り付け) outerHTML</a></td> + <td>クリップボード内のコンテンツを、ノードの <a href="/ja/docs/Web/API/element.outerHTML">outerHTML</a> として貼り付ける</td> + </tr> + <tr> + <td><a id="Paste/Before">(貼り付け) 前</a></td> + <td>クリップボード内のコンテンツを、ノードの直前に貼り付ける</td> + </tr> + <tr> + <td><a id="Paste/After">(貼り付け) 後</a></td> + <td>クリップボード内のコンテンツを、ノードの直後に貼り付ける</td> + </tr> + <tr> + <td><a id="Paste/As First Child">(貼り付け) 最初の子要素として</a></td> + <td>クリップボード内のコンテンツを、ノードの最初の子要素として貼り付ける</td> + </tr> + <tr> + <td><a id="Paste/As Last Child">(貼り付け) 最後の子要素として</a></td> + <td>クリップボード内のコンテンツを、ノードの最後の子要素として貼り付ける</td> + </tr> + <tr> + <td><a id="Scroll Into View">この要素の位置にスクロール</a></td> + <td> + <p>選択したノードを表示するように、ページをスクロールする</p> + + <p>Firefox 44 よりキーボードショートカット <kbd>S</kbd> でも、選択した要素の位置にスクロールします。</p> + </td> + </tr> + <tr> + <td><a id="Screenshot Node">ノードのスクリーンショットを撮影</a></td> + <td>選択したノードのスクリーンショットを撮影して、ダウンロードディレクトリーに保存します。<a href="/ja/docs/Tools/Taking_screenshots">スクリーンショットを撮影する</a> をご覧ください。</td> + </tr> + <tr> + <td><a id="Create New Node">新しいノードを作成</a></td> + <td>選択中の要素の最後の子要素として、空の <div> 要素を作成します。<a href="#Inserting_new_nodes">新しいノードを挿入する</a> をご覧ください。</td> + </tr> + <tr> + <td><a id="Duplicate Node">ノードを複製</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + 要素をコピーして、当該要素の直後へ挿入します。</td> + </tr> + <tr> + <td><a id="Delete Node">ノードを削除</a></td> + <td>要素を DOM から削除する</td> + </tr> + <tr> + <td><a id="Attribute/Add Attribute">属性/属性を追加</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + 要素に属性を追加する</td> + </tr> + <tr> + <td><a id="Attribute/Edit Attribute">属性/属性を編集</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + (属性でメニューを開いた場合のみ) 属性を編集する</td> + </tr> + <tr> + <td><a id="Attribute/Remove Attribute">属性/属性を削除</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + (属性でメニューを開いた場合のみ) 属性を削除する</td> + </tr> + <tr> + <td><a id="Open Link in New Tab">リンクを新しいタブで開く</a></td> + <td>(href 属性など、リンク上でメニューを開いた場合のみ) リンク先のアイテムを新しいタブで開く</td> + </tr> + <tr> + <td><a id="Open File in Debugger">デバッガーでファイルを開く</a></td> + <td>(JS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをデバッガーで開く</td> + </tr> + <tr> + <td><a id="Open File in Style-Editor">スタイルエディターでファイルを開く</a></td> + <td>(CSS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをスタイルエディターで開く</td> + </tr> + <tr> + <td><a id="Copy Link Address">リンクの URL をコピー</a></td> + <td>(URL 上でメニューを開いた場合のみ) URL をコピーする</td> + </tr> + <tr> + <td><a id=":hover">:hover</a></td> + <td><a href="/ja/docs/Web/CSS/:hover" title="Web/CSS/:hover">:hover</a> CSS 疑似クラスを設定する</td> + </tr> + <tr> + <td><a id=":active">:active</a></td> + <td><a href="/ja/docs/Web/CSS/:active" title="Web/CSS/:active">:active</a> CSS 疑似クラスを設定する</td> + </tr> + <tr> + <td><a id=":focus">:focus</a></td> + <td><a href="/ja/docs/Web/CSS/:focus" title="Web/CSS/:focus">:focus</a> CSS 疑似クラスを設定する</td> + </tr> + </tbody> +</table> + +<h2 id="Editing_HTML" name="Editing_HTML">HTML として編集</h2> + +<p>HTML ペインで、HTML (タグ、属性、内容物) を直接編集できます。編集したい要素をダブルクリックして、編集してください。Enter キーを押下すると、変更点が直ちに反映されます。</p> + +<p>要素の <a href="/ja/docs/Web/API/Element.outerHTML">outerHTML</a> を編集するには、要素のポップアップメニューを開いて [HTML として編集] を選択します。HTML ペイン内にテキストボックスが現れます:</p> + +<p><img alt="Edit HTML directly in the Inspector panel in Firefox 57" src="https://mdn.mozillademos.org/files/15505/57-edit-as-html.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<p>ここに任意の HTML を追加できます。要素のタグを変更する、既存の要素を変更する、新たな要素を追加するといったことが可能です。ボックスの外部をクリックすると、変更点をページに適用します。</p> + +<p>Firefox 52 より、HTML を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h3 id="Copy_and_paste" name="Copy_and_paste">コピーと貼り付け</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">ポップアップメニュー</a> を使用して、HTML ツリー内のノードのコピーや希望する場所へノードを貼り付けることができます。</p> + +<h3 id="Drag_and_drop" name="Drag_and_drop">ドラッグ・アンド・ドロップ</h3> + +<p>HTML ツリーでノードを移動することができます。要素をクリックアンドホールドして、ツリー内でドラッグしてください。マウスボタンを離すと、対応する場所に要素を挿入します:</p> + +<p>{{EmbedYouTube("oI-a035nfWk")}}</p> + +<p>Firefox 44 より、<kbd>Esc</kbd> キーを押下するとドラッグ・アンド・ドロップをキャンセルできます。</p> + +<h3 id="Inserting_new_nodes" name="Inserting_new_nodes">新しいノードを挿入する</h3> + +<div class="geckoVersionNote">Firefox 48 の新機能</div> + +<p>Firefox 48 より、マークアップビューの上部に "+" 印のアイコンがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13082/inspector-insert-node.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 547px;"></p> + +<p>このアイコンをクリックすると、現在選択している要素の最後の子要素として、空の <code><a href="/ja/docs/Web/HTML/Element/div"><div></a></code> 要素をドキュメントに挿入します。そしてドキュメント内の他のノードと同様に、新しいノードの内容やスタイルを編集できます。</p> + +<p>{{EmbedYouTube("NG5daffvVZM")}}</p> + +<p>ポップアップメニューの [新しいノードを作成] を使用して、同じ機能にアクセスできます。</p> + +<p>最後に子要素を追加しても効果がないタイプの要素 (例えば <code><a href="/ja/docs/Web/HTML/Element/html"><html></a></code> や <code><a href="/ja/docs/Web/HTML/Element/iframe"><iframe></a></code> 要素など) を選択しているときは、このボタンが無効になりますので注意してください。ただし、<code><div></code> を挿入することが無効である場所 (<code><a href="/ja/docs/Web/HTML/Element/style"><style></a></code> や <code><a href="/ja/docs/Web/HTML/Element/link"><link></a></code> など) では有効になります。このような場合は、要素をテキストとして挿入します。</p> diff --git a/files/ja/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/ja/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html new file mode 100644 index 0000000000..64ca2fbbda --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html @@ -0,0 +1,41 @@ +--- +title: ボックスモデルの調査と編集 +slug: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +tags: + - Guide + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +<div>{{ToolsSidebar}}</div><h2 id="Viewing_the_box_model" name="Viewing_the_box_model">ボックスモデルの確認</h2> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">要素選択ボタン</a> を押しているとき、ページ上で要素にマウスポインターを載せると、要素の <a href="/ja/docs/Web/CSS/box_model">ボックスモデル</a> をオーバーレイで表示します:</p> + +<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p> + +<p>HTML ペインで要素のマークアップにマウスポインターを載せた場合も、同様にオーバーレイで表示します:</p> + +<p>{{EmbedYouTube("xA4IxTttNLk")}}</p> + +<p>要素がインライン要素であり複数の行ボックスに分かれている場合は、要素を構成するそれぞれの行ボックスをハイライト表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display: block; height: 186px; margin-left: auto; margin-right: auto; width: 351px;"></p> + +<h3 id="The_Box_Model_view" name="The_Box_Model_view">ボックスモデルビュー</h3> + +<p>要素を選択すると、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Computed_view">ボックスモデルビュー</a> でボックスモデルを詳しく調べることができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14241/box-model.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>値にマウスポインターを載せると、その値がどのルールに由来するかを示すツールチップを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14243/box-model-tooltip.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 620px;"></p> + +<p>ボックスモデルビューでボックスモデルの一部にマウスポインターを載せると、ページ上で対応する部分をハイライト表示します:</p> + +<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p> + +<h2 id="Editing_the_box_model" name="Editing_the_box_model">ボックスモデルの編集</h2> + +<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">ボックスモデルビュー</a> では値の編集も可能であり、変更結果はページへ即座に反映します:</p> + +<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p> diff --git a/files/ja/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/ja/tools/page_inspector/how_to/examine_event_listeners/index.html new file mode 100644 index 0000000000..da04aa7673 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_event_listeners/index.html @@ -0,0 +1,33 @@ +--- +title: イベントリスナーの調査 +slug: Tools/Page_Inspector/How_to/Examine_event_listeners +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +<p>{{ToolsSidebar}}</p> + +<p>インスペクタでは <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a>の要素の横に「イベント」という単語が表示され、イベントリスナーがバインドされています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16253/inspect_element_with_eventhandler.png" style="border: 1px solid black; display: block; height: 24px; margin-left: auto; margin-right: auto; width: 491px;"></p> + +<p>アイコンをクリックすると、この要素にバインドされているすべてのイベントリスナーを一覧表示するポップアップが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16254/inspector_event_handlers.png" style="border: 1px solid black; display: block; height: 702px; margin-left: auto; margin-right: auto; width: 828px;">各行には以下が含まれます。</p> + +<ul> + <li>右向きの矢頭。クリックして行を展開し、リスナー関数のソースコードを表示します。</li> + <li>スタックを指し示すカーブした矢印。それをクリックすると、デバッガにハンドラのコードが表示されます。</li> + <li>この要素にハンドラがアタッチされたイベントの名前</li> + <li>リスナーの名前と行番号。ここをクリックして行を展開し、リスナー関数のソースコードを表示することもできます</li> + <li>イベントがバブルかどうかを示すラベル</li> + <li>イベントを定義するシステムを示すラベル。Firefox は次のように表示できます： + <ul> + <li>標準の DOM イベント</li> + <li><a class="external external-icon" href="http://api.jquery.com/category/events/">jQuery イベント</a></li> + <li><a href="https://facebook.github.io/react/docs/events.html">React イベント</a></li> + </ul> + </li> +</ul> diff --git a/files/ja/tools/page_inspector/how_to/examine_flexbox_layouts/index.html b/files/ja/tools/page_inspector/how_to/examine_flexbox_layouts/index.html new file mode 100644 index 0000000000..27c8d283c5 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_flexbox_layouts/index.html @@ -0,0 +1,80 @@ +--- +title: 'CSS FlexBox インスペクタ: Flexbox レイアウトを調査する' +slug: Tools/Page_Inspector/How_to/Examine_Flexbox_layouts +tags: + - flexbox + - インスペクタ + - ガイド + - ツール +translation_of: Tools/Page_Inspector/How_to/Examine_Flexbox_layouts +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary"><strong>FlexBox Inspector</strong> を使用すると、Firefox DevTools を使用して <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox のレイアウト</a>を調べたり、ページにある flex コンテナを見つけたり、レイアウトを調べたり修正したり、レイアウトの問題をデバッグするなどの作業を行うことができます。</p> + +<h2 id="Flex_コンテナの検出">Flex コンテナの検出</h2> + +<p>ページ上の HTML 要素に <code><a href="/ja/docs/Web/CSS/display">display: flex</a></code> が適用されている場合、flexbox のレイアウト機能に簡単にアクセスできるように DevTools にいくつかの機能が用意されています。</p> + +<h3 id="HTML_ペインから">HTML ペインから</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a>では、flexbox コンテナを使用してレイアウトされた要素の横に <code>flex</code> という単語があります。</p> + +<p><img alt="The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it" src="https://mdn.mozillademos.org/files/16342/flexbox_html.png" style="display: block; height: 458px; margin: 0px auto; width: 586px;"></p> + +<h3 id="CSS_ペインから">CSS ペインから</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS ペイン</a>のルールビューでは、<code><a href="/ja/docs/Web/CSS/display">display: flex</a></code> 宣言のインスタンスは <code>flex</code> という単語の隣に小さなフレックスボックスアイコン <img alt="" src="https://mdn.mozillademos.org/files/16345/flexbox_icon.gif" style="height: 15px; width: 17px;"> を表示します。アイコンをクリックすると、flexbox の子要素の詳細がどのように表示されるかを示すオーバーレイの表示が切り替わります。</p> + +<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/16343/flexbox_css.png" style="display: block; height: 177px; margin: 0px auto; width: 353px;"></p> + +<p>アイコンをクリックすると、要素の上に表示されるページ上のオーバーレイの表示が切り替わり、グリッド線とトラックの位置が表示されます。</p> + +<p><img alt="A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid " src="https://mdn.mozillademos.org/files/16344/flexbox_overlay.png" style="display: block; height: 743px; margin: 0px auto; width: 950px;"></p> + +<p>他の要素を選択するとオーバーレイが表示されるので、関連する CSS プロパティを編集して flexbox がどのように影響を受けているかを確認できます。</p> + +<h3 id="レイアウト_Flex_コンテナセクション">レイアウト Flex コンテナセクション</h3> + +<p>ページが1つ以上の flexbox コンテナで構成される場合、CSS ペインのレイアウトビューには、コンテナのコンポーネントを表示するための多数のオプションを含む「Flex コンテナ」セクションが含まれています。これらの詳細については、以下のセクションで調べることができます。</p> + +<div class="note"> +<p><strong>メモ</strong>: レイアウトビューはページインスペクタの右側のペインにあるレイアウトタブの下にあります。上記および以下のスクリーンショットは、これに到達する方法に関するさらなるヒントを与えるはずです。</p> +</div> + +<h2 id="Flex_コンテナオプション">Flex コンテナオプション</h2> + +<p>レイアウトビューの Flex コンテナセクションは次のようになります。</p> + +<p><img alt="The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed" src="https://mdn.mozillademos.org/files/16346/flexbox_settings.png" style="border-style: solid; border-width: 1px; display: block; height: 319px; margin: 0px auto; width: 351px;"></p> + +<p>Flex Container セクションで変更できる設定は2つあります。</p> + +<ul> + <li>この例をクリックすると、オーバーレイの色を制御できます。カラースウォッチをクリックすると、カラーピッカーがポップアップし、オーバーレイの別の色を選択できます。</li> + <li>Flex コンテナセクションの右側にあるスイッチは、オーバーレイのオンとオフを切り替えます。</li> +</ul> + +<h2 id="Flex_アイテムプロパティ">Flex アイテムプロパティ</h2> + +<p>flexbox の各コンポーネントには、要素名とそのクラス (存在する場合) を含む番号付きのエントリがあります。要素の上にカーソルを置くと、ページ上で強調表示されます。</p> + +<p><img alt="An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more." src="https://mdn.mozillademos.org/files/16347/flexbox_component.png" style="border: 1px solid black; display: block; height: 23px; margin: 0px auto; width: 117px;"></p> + +<p>アイテムをクリックすると、そのコンポーネントの詳細が表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16348/flexbox_component_detail.png" style="border: 1px solid black; display: block; height: 379px; margin: 0 auto; width: 337px;"></p> + +<p>このビューには、コンポーネントに関する3つの情報が表示されます。</p> + +<ul> + <li>コンポーネントの形状</li> + <li>ベースサイズ - 親による制約が課せられていないコンポーネントのサイズ</li> + <li>最終サイズ - フレックスボックスによってサイジング制約が課された後にコンポーネントが持つサイズが適用されます。</li> +</ul> + +<p>セクションの上部に、選択された項目の名前は、flexboxコンテナのすべてのコンポーネントのドロップダウンリストです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16349/flexbox_component_list.png" style="border: 1px solid black; display: block; height: 379px; margin: 0px auto; width: 338px;"></p> + +<p>このドロップダウンを使用して、flexbox 内の他のコンポーネントを選択できます。</p> diff --git a/files/ja/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/ja/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..f46ebfea79 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,135 @@ +--- +title: 'CSS グリッドインスペクター: グリッドレイアウトを調査する' +slug: Tools/Page_Inspector/How_to/Examine_grid_layouts +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary"><strong>グリッドインスペクター</strong>で、Firefox の開発ツールを使用して <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a> を調査できます。ページ上にあるグリッドを見つける、グリッドを調査および変更する、レイアウトのの問題をデバッグするといったことが可能です。</p> + +<div class="note"> +<p><strong>注記</strong>: この記事にあるスクリーンショットで示す例は、Jen Simmons による <a href="http://labs.jensimmons.com/2016/examples/futurismo-1.html">Futurismo</a> や <a href="http://labs.jensimmons.com/2017/01-003.html">Variations on a grid</a>、および Rachel Andrew による <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Naming_a_grid_area">名前付きグリッド領域の例</a> です。</p> +</div> + +<h2 id="Discovering_CSS_grids" name="Discovering_CSS_grids">CSS グリッドを発見する</h2> + +<p>ページ内に <code><a href="/ja/docs/Web/CSS/display">display: grid</a></code> が適用された HTML 要素があるとき、グリッドの機能へ簡単にアクセスできるようにするため、開発ツールでいくつかの機能を使用できます。</p> + +<h3 id="In_the_HTML_pane" name="In_the_HTML_pane">HTML ペインの機能</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a> では、グリッド方式でレイアウトされる要素のそばに "grid" マークがつきます。</p> + +<p><img alt="The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it" src="https://mdn.mozillademos.org/files/15977/html-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 400px;"></p> + +<h3 id="In_the_CSS_pane" name="In_the_CSS_pane">CSS ペインの機能</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS ペイン</a> のルールビューでは、<code><a href="/ja/docs/Web/CSS/display">display: grid</a></code> 宣言の実体にグリッドアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) を表示します。</p> + +<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/15978/css-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 399px; margin: 0px auto; width: 1146px;"></p> + +<p>アイコンをクリックすると、ページ上にグリッドをオーバーレイ表示する機能の有効・無効を切り替えます。これは要素に重ねて表示され、グリッドの線やトラックの位置を示すためにグリッドのように並べられます。</p> + +<p><img alt="A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid " src="https://mdn.mozillademos.org/files/15979/grid-overlay.png" style="border-style: solid; border-width: 1px; display: block; height: 1383px; margin: 0px auto; width: 1842px;"></p> + +<p>このオーバーレイは別の要素を選択しても表示し続けますので、関連する CSS プロパティを編集して、グリッドにどのような影響があるかを確認できます。</p> + +<h3 id="The_Layout_view_Grid_section" name="The_Layout_view_Grid_section">レイアウトビューのグリッドセクション</h3> + +<p>ページ内にグリッドがあるとき、グリッドを確認するためのさまざまなオプションがある "グリッド" セクションが CSS ペインのレイアウトビューに表示されます。詳しくは後の章で説明します。</p> + +<div class="note"> +<p><strong>注記</strong>: レイアウトビューは、ページインスペクターの右側のペインにある<em>Layout</em>タブの中にあります。この記事内のスクリーンショットで、どこにあるかのヒントを得られるでしょう。</p> +</div> + +<h2 id="Grid_options" name="Grid_options">グリッドのオプション</h2> + +<p>レイアウトビューのグリッドセクションは以下のようなものです:</p> + +<p><img alt="The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed" src="https://mdn.mozillademos.org/files/15980/grid-options.png" style="border-style: solid; border-width: 1px; display: block; height: 408px; margin: 0px auto; width: 500px;"></p> + +<p>セクション内にオプションがいくつかあります:</p> + +<ul> + <li>グリッドをオーバーレイ表示: さまざまな設定とともに、ページ上にそれぞれのグリッドを表示するためのチェックボックスがあります。オーバーレイ表示のオン・オフを切り替えできます。</li> + <li>グリッドの表示設定: + <ul> + <li>線番号を表示: それぞれのグリッドオーバーレイで線番号の表示をオン・オフできます (デフォルトでオン)。</li> + <li>領域名を表示: グリッドの領域に名前がある場合に、領域名の表示をオン・オフできます (妥当であればデフォルトでオン)。</li> + <li>グリッド線を無限に延伸: デフォルトで、グリッドの線やトラックは <code>display: grid</code> が設定された要素の内部に限って表示します。このオプションを有効にすると、グリッド線がそれぞれの軸にそってビューポートの端まで延伸します。</li> + </ul> + </li> + <li>ミニグリッドビュー: 現在オーバーレイ表示しているグリッドを縮小表示します。</li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: オーバーレイの色や表示設定は、ページごとに再読み込み後も維持します。</p> +</div> + +<p>これらの機能を、さらに詳しく見ていきましょう</p> + +<h3 id="Overlay_grid" name="Overlay_grid">グリッドをオーバーレイ表示</h3> + +<p>"グリッドをオーバーレイ表示" セクションに、ページ上のそれぞれのグリッドの項目が表示されます:</p> + +<p><img alt="An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more." src="https://mdn.mozillademos.org/files/15981/overlay-grid-entry.png" style="border-style: solid; border-width: 1px; display: block; height: 37px; margin: 0px auto; width: 300px;"></p> + +<p>それぞれの項目の構成は (左から右の順に) 以下のとおりです:</p> + +<ul> + <li>グリッドのオーバーレイ表示のオン・オフを切り替えるチェックボックス。現在、オーバーレイは同時に 1 つしか表示しませんので注意してください。</li> + <li>グリッドを表すラベル。グリッドが適用された HTML 要素を識別するセレクターです。ここをクリックしても、オーバーレイ表示のオン・オフを切り替えできます。</li> + <li>標的のアイコン。クリックすると、このグリッドに関連する HTML 要素を HTML ペインで選択します。</li> + <li>グリッドオーバーレイの主要な色を変更できるカラーピッカー。グリッドを区別しやすくするため、色を変えるのに便利です。</li> +</ul> + +<h3 id="Display_line_numbers" name="Display_line_numbers">線番号を表示</h3> + +<p>デフォルトで、グリッドオーバーレイに線番号を表示します。</p> + +<p><img alt="A CSS grid overlay with grid line numbers displayed" src="https://mdn.mozillademos.org/files/15982/line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 582px; margin: 0px auto; width: 600px;"></p> + +<p>"線番号を表示" のチェックを外すと、線番号が消えます。</p> + +<p><img alt="A CSS grid overlay with grid line numbers not displayed" src="https://mdn.mozillademos.org/files/15983/no-line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Display_area_names" name="Display_area_names">領域名を表示</h3> + +<p>領域名があるグリッドでは、デフォルトで領域名をグリッドオーバーレイに表示します。</p> + +<p><img alt="A CSS grid overlay with named area names displayed" src="https://mdn.mozillademos.org/files/15984/grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 777px; margin: 0px auto; width: 1396px;"></p> + +<p>"領域名を表示" のチェックを外すと、領域名が消えます。</p> + +<p><img alt="A CSS grid overlay with named area names not displayed" src="https://mdn.mozillademos.org/files/15990/no-grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 788px; margin: 0px auto; width: 1400px;"></p> + +<h3 id="Extend_lines_infinitely" name="Extend_lines_infinitely">グリッド線を無限に延伸</h3> + +<p>デフォルトで、グリッドの線やトラックは <code>display: grid</code> が設定された要素の内部に限って表示します。</p> + +<p><img alt="A CSS grid overlay with grid lines not extended infinitely" src="https://mdn.mozillademos.org/files/15987/no-extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 499px; margin: 0px auto; width: 1000px;"></p> + +<p>"グリッド線を無限に延伸" にチェックを入れると、グリッド線がそれぞれの軸にそってビューポートの端まで延伸します。</p> + +<p><img alt="A CSS grid overlay with grid lines extended infinitely" src="https://mdn.mozillademos.org/files/15986/extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 501px; margin: 0px auto; width: 1000px;"></p> + +<h3 id="Mini_grid_view" name="Mini_grid_view">ミニグリッドビュー</h3> + +<p>現在オーバーレイ表示しているグリッドを、実際のグリッドに比例して小さく表示します。</p> + +<p><img alt="A mini CSS grid view from the Firefox DevTools" src="https://mdn.mozillademos.org/files/15988/mini-grid-view.png" style="border-style: solid; border-width: 1px; display: block; height: 246px; margin: 0px auto; width: 600px;"></p> + +<p>ミニグリッドのさまざまな領域にマウスポインターを載せると、グリッドオーバーレイで対応する領域もハイライト表示されます。また、領域の寸法や列番号・行番号などの有用な情報をツールチップで表示します。</p> + +<p><img alt="A firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page." src="https://mdn.mozillademos.org/files/15989/mini-grid-highlight.png" style="border-style: solid; border-width: 1px; display: block; height: 793px; margin: 0px auto; width: 1200px;"></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> — さまざまな興味深いグリッドの例</li> + <li><a href="https://gridbyexample.com/">Grid by Example</a> — Rachel Andrew による、CSS グリッドを学ぶための資料</li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> — MDN の CSS グリッドレイアウトのリファレンスやチュートリアル</li> +</ul> diff --git a/files/ja/tools/page_inspector/how_to/index.html b/files/ja/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..370529a6d4 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">ここには様々な HOW TO へのリンクがあります。これらのリンク先では、各技術の HOW TO について詳しく説明しています。</span></p> + +<p>{{ ListSubpages () }}</p> + +<p> </p> diff --git a/files/ja/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/ja/tools/page_inspector/how_to/inspect_and_select_colors/index.html new file mode 100644 index 0000000000..4da5c5c3c3 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/inspect_and_select_colors/index.html @@ -0,0 +1,26 @@ +--- +title: 色の調査と選択 +slug: Tools/Page_Inspector/How_to/Inspect_and_select_colors +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +<div>{{ToolsSidebar}}</div><p>CSS ペインの <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> ではルールに色の値が含まれる場合に、値の隣に色のサンプルを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> + +<p>色サンプルをクリックすると、その色を変更できるカラーピッカーがポップアップします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p> + +<p>カラーピッカーに、スポイトのアイコンがあります。このアイコンをクリックすると、要素の色をページ内から新たに選択するスポイトツールを使用できます:</p> + +<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<p>Firefox 40 より、Shift キーを押しながら色サンプルをクリックすると、色単位を切り替えます:</p> + +<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p> + +<p>Firefox 53 以降で、<a href="https://drafts.csswg.org/css-color/">CSS color level 4</a> の色の値をサポートします。</p> diff --git a/files/ja/tools/page_inspector/how_to/open_the_inspector/index.html b/files/ja/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..fe2d531143 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/open_the_inspector/index.html @@ -0,0 +1,23 @@ +--- +title: インスペクターを開く +slug: Tools/Page_Inspector/How_to/Open_the_Inspector +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>インスペクターを開く方法は、主に 2 つあります:</p> + +<ul> + <li><strong><em>要素を選択せずに開く</em></strong>: メニューバーで [ツール] → [ウェブ開発] → [インスペクター] を選択するか、同等の <a href="/ja/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">キーボードショートカット</a> を押下する。</li> + <li><strong><em>要素を選択して開く</em></strong>: ウェブページ上で要素を右クリックして、[要素を調査] を選択する。</li> +</ul> + +<p>インスペクターがブラウザーウィンドウの下部に現れます:</p> + +<p><img alt="The all-new Inspector in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15493/57-inspector-starfish.png" style="display: block; height: 647px; margin-left: auto; margin-right: auto; width: 845px;"></p> + +<p>インスペクターで何を行うかを知るために、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour">UI ツアー</a> をご覧ください。</p> diff --git a/files/ja/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html b/files/ja/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html new file mode 100644 index 0000000000..6c7084a728 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html @@ -0,0 +1,22 @@ +--- +title: ページ内の要素を再配置する +slug: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">Firefox 48 の新機能</div> + +<p>Firefox 48 より、絶対的に配置されている要素をページ上でドラッグして移動できるようになりました。</p> + +<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p> + +<p><code>{{cssxref("position")}}</code> プロパティが <code>absolute</code>、<code>relative</code> または <code>fixed</code> に設定されており、また {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} プロパティのいずれかが指定されていると、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Computed_view">ボックスモデルビュー</a> にボタンを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>ボタンをクリックすると、要素の隣にハンドルを 2 つ表示します:</p> + +<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p> + +<p>このハンドルを使用して、ページ内で要素を移動できます。</p> + +<p>要素が絶対配置されている場合は、オフセット元を表す波線を表示します。相対配置の要素では、ノードの元の位置を波線で示します。オフセット量は、それぞれの方向について線とツールチップで示します。</p> diff --git a/files/ja/tools/page_inspector/how_to/select_an_element/index.html b/files/ja/tools/page_inspector/how_to/select_an_element/index.html new file mode 100644 index 0000000000..aba60ca71c --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/select_an_element/index.html @@ -0,0 +1,36 @@ +--- +title: 要素を選択する +slug: Tools/Page_Inspector/How_to/Select_an_element +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +<div>{{ToolsSidebar}}</div><p><em>選択された要素</em> は、ページ内でインスペクターが現在注目している要素です。選択された要素は <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a> に表示します。また、要素の CSS を <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS ペイン</a> に表示します。</p> + +<p><em>ハイライト表示された要素</em> は、ボックスモデルを表す図や、タグやサイズを表すツールチップをページ内で重ね合わせている要素です:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p> + +<h2 id="With_the_context_menu" name="With_the_context_menu">コンテキストメニューで選択する</h2> + +<p>ページ内の要素上でコンテキストメニューを開いて [要素を調査] を選択すると、インスペクターが開いて即座に要素を選択します:</p> + +<p>{{EmbedYouTube("db83PCnPiNM")}}</p> + +<h2 id="With_the_HTML_pane" name="With_the_HTML_pane">HTML ペインで選択する</h2> + +<p>インスペクターを開いているとき、HTML ペイン内に並んでいる要素上でマウスポインターを動かすのに応じて、対応する要素をページ内でハイライト表示します。HTML ペインでクリックすると、要素を選択します:</p> + +<p>{{EmbedYouTube("EojH_vCMesI")}}</p> + +<p>キーボードの矢印キーを使用して、DOM 内を移動することもできます。</p> + +<h2 id="With_the_node_picker" name="With_the_node_picker">ノードピッカーで選択する</h2> + +<p>"ノードピッカー" のアイコン <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> (<em>要素を選択</em> アイコンとも呼ばれます) をクリックしてノードピッカーを起動すると、ページ自体で要素を選択できます。ページ内でマウスポインターを動かすと、ポインターの下にある要素をハイライト表示します。要素をクリックすると、選択します:</p> + +<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> + +<p>Firefox 52 より、<kbd>Shift</kbd> を押しながら要素をクリックすると、要素を選択しますがピッカーを引き続き使用できます。これにより CSS ペインで要素のルールを確認でき、ページ内の別の要素を簡単に選択できます。</p> diff --git a/files/ja/tools/page_inspector/how_to/select_and_highlight_elements/index.html b/files/ja/tools/page_inspector/how_to/select_and_highlight_elements/index.html new file mode 100644 index 0000000000..744c59e0e6 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/select_and_highlight_elements/index.html @@ -0,0 +1,32 @@ +--- +title: 要素の選択と強調表示 +slug: Tools/Page_Inspector/How_to/Select_and_highlight_elements +translation_of: Tools/Page_Inspector/How_to/Select_and_highlight_elements +--- +<div>{{ToolsSidebar}}</div> + +<p><em>選択された</em>要素は、インスペクタが現在フォーカスしているページの要素です。 選択した要素が<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTMLペイン</a>に表示され、そのCSSが<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSSペイン</a>に表示されます。</p> + +<p>強調表示された要素は、ページにオーバーレイされた要素で、ボックスモデルを示すグラフィックとそのタグとサイズを示すツールチップです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p> + +<h2 id="コンテキストメニューを使用する">コンテキストメニューを使用する</h2> + +<p>インスペクタを開いて要素をすぐに選択するには、ページ内の要素のコンテキストメニューをアクティブにして、「要素の検証」を選択します。</p> + +<p>{{EmbedYouTube("db83PCnPiNM")}}</p> + +<h2 id="HTML_ペインを使用する">HTML ペインを使用する</h2> + +<p>インスペクタが開いているときに、HTMLペインにリストされている要素の周りにマウスを移動すると、対応する要素がページ内で強調表示されます。 HTMLペインで要素をクリックして選択します。</p> + +<p>{{EmbedYouTube("EojH_vCMesI")}}</p> + +<p>矢印キーを使用して、キーボードでDOMの周りを移動することもできます。</p> + +<h2 id="ノードピッカーを使用する">ノードピッカーを使用する</h2> + +<p>ページ自体の要素を選択するには、その要素のアイコン <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> (「要素の選択」アイコンとも呼ばれます) をクリックして"node picker"をアクティブにします。その後、ページ上でマウスを動かすと、マウスの下の要素が強調表示されます。要素をクリックして選択します。</p> + +<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> diff --git a/files/ja/tools/page_inspector/how_to/use_the_inspector_api/index.html b/files/ja/tools/page_inspector/how_to/use_the_inspector_api/index.html new file mode 100644 index 0000000000..65d0f7cfb8 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/use_the_inspector_api/index.html @@ -0,0 +1,44 @@ +--- +title: インスペクターの API を使用する +slug: Tools/Page_Inspector/How_to/Use_the_Inspector_API +tags: + - Inspector + - Reference + - Référence(2) + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_API +--- +<div>{{ToolsSidebar}}</div><p>Firefox アドオンは、chrome://browser/content/devtools/inspector/inspector.xul コンテキストから以下のオブジェクトにアクセスできます:</p> + +<h3 id="window.inspector" name="window.inspector">window.inspector</h3> + +<p><a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a> で定義しています。属性と関数:</p> + +<ul> + <li>.selection - インスペクターで選択したものに関する情報: + <ul> + <li>.isNode() - 選択したものがノードである場合に true を返します。</li> + <li>.node - ページから実際の要素を返します。</li> + <li>.window - 選択したものが含まれているフレームの window オブジェクトです。</li> + </ul> + </li> + <li>.markDirty() - インスペクターによって変更されたページをマークします。インスペクターで施した変更点は再読み込みによって書き換えられるため、ページから去るときに警告を表示します。</li> +</ul> + +<p>バインド可能なイベント:</p> + +<h4 id="markuploaded" name="markuploaded">markuploaded</h4> + +<p>ページを変更した後、左側のパネルが更新されたときに呼び出されます。</p> + +<h4 id="ready" name="ready">ready</h4> + +<p>最初の markuploaded で呼び出されます。</p> + +<h4 id="pseudoclass" name="pseudoclass">pseudoclass</h4> + +<p>疑似クラスの切り替え後に呼び出されます。</p> + +<h4 id="layout-change" name="layout-change">layout-change</h4> + +<p>"描画やリサイズなどのための、低優先度の変更イベント"</p> diff --git a/files/ja/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html b/files/ja/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html new file mode 100644 index 0000000000..be82d54870 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html @@ -0,0 +1,16 @@ +--- +title: ウェブコンソールからインスペクターを使用する +slug: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console +--- +<div>{{ToolsSidebar}}</div><p>インスペクターで選択されている要素は、変数 <code>$0</code> を使用してウェブコンソールから参照できます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10057/console-$0.png" style="display: block; margin-left: auto; margin-right: auto; width: 761px;"></p> + +<p>ウェブコンソールに出力された DOM 要素の隣に、標的のアイコンがあります。このアイコンにマウスポインターを載せると、ページ上で要素をハイライト表示します。またアイコンをクリックすると、要素がインスペクターで選択されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10059/console-highlight.png" style="display: block; margin-left: auto; margin-right: auto; width: 760px;"></p> diff --git a/files/ja/tools/page_inspector/how_to/view_background_images/index.html b/files/ja/tools/page_inspector/how_to/view_background_images/index.html new file mode 100644 index 0000000000..8946153638 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/view_background_images/index.html @@ -0,0 +1,12 @@ +--- +title: 背景画像を確認する +slug: Tools/Page_Inspector/How_to/View_background_images +translation_of: Tools/Page_Inspector/How_to/View_background_images +--- +<div>{{ToolsSidebar}}</div><p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> で、<a href="/ja/docs/Web/CSS/background-image">background-image</a> で指定した画像のプレビューを確認できます。ルールにマウスポインターを載せてください:</p> + +<p id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/11215/css-image-preview.png" style="display: block; height: 422px; margin-left: auto; margin-right: auto; width: 585px;"></p> + +<p>Firefox 41 より、画像の宣言上で右クリックすると、画像を data: URL としてコピーするメニュー項目があります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11213/css-copy-image-data-url.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 587px;"></p> diff --git a/files/ja/tools/page_inspector/how_to/view_fonts/index.html b/files/ja/tools/page_inspector/how_to/view_fonts/index.html new file mode 100644 index 0000000000..dc20a581e8 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/view_fonts/index.html @@ -0,0 +1,233 @@ +--- +title: フォントを確認する +slug: Tools/Page_Inspector/How_to/View_fonts +tags: + - Fonts + - Guide + - Inspector + - Tools + - variable fonts +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">この記事は、Firefox 開発ツールで使用可能なフォントツールのツアーです。このツールはブラウザーに読み込んだ文書に適用されたフォントに対して、適用されたすべてのフォントを調査する、あるいはバリアブルフォントの軸の値を細かく調整するなど、表示や調査のために役に立つツールが含まれています。</p> + +<div class="note"> +<p><strong>注記:</strong> この記事に示されているように、更新されたフォントツールは Firefox 63 以降で利用できます。古いバージョンの Firefox を使用している場合、ツールは見た目や動作が全く同じではありませんが、似ています (特にフォントエディターは利用できません)。</p> +</div> + +<h2 id="The_Fonts_tab" name="The_Fonts_tab">フォントタブ</h2> + +<p><a href="/ja/docs/Tools/Page_Inspector">インスペクター</a> をウィンドウの下側に表示している場合は、右側にフォントタブがあります。右側または左側に表示している場合は、HTML ペインの下にフォントタブがあります。タブは以下のようにして表示できます:</p> + +<ol> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">インスペクターを開きます</a>。</li> + <li>フォントタブを選択します。CSS ペインの右側に表示されるタブの末尾にあります。</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16157/full-fonts-tab-new63.png" style="border: 1px solid black; display: block; height: 663px; margin: 0px auto; width: 500px;"></p> + +<p>フォントタブは 3 つの主要なセクションに分かれています:</p> + +<ul> + <li>"Fonts used" : 現在調査中の要素で使用しているフォント。</li> + <li>新しいフォントエディター。Firefox 61 および 62 では、このセクションがありません。</li> + <li>"All fonts on page" : このセクションは、ページで使用しているすべてのフォントを表示します。Firefox 61 および 62 ではこの領域が "ページ内の他のフォント" という名前であり、"Fonts used" セクションにあるフォントが含まれません。</li> +</ul> + +<h2 id="Fonts_used" name="Fonts_used">Fonts used</h2> + +<p>フォントエディターの最初のセクションは、現在調査中の要素で使用しているフォントを、フォントファミリーでグループ化して表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16150/fonts-used.png" style="border-style: solid; border-width: 1px; display: block; height: 114px; margin: 0px auto; width: 400px;"></p> + +<p>調査中の要素にフォントが適用されたテキストコンテンツがある場合に、フォントが "使用されている" と判断します。空要素はフォントが使用されませんので、"No fonts were found for the current element." というメッセージが表示されます。</p> + +<p>以下の理由のいずれかを理由として、このセクションにフォントが表示されます:</p> + +<ul> + <li>要素の <code>font-family</code> CSS 宣言の値に指定されている。</li> + <li>ブラウザーのデフォルトスタイル (ラテン文字ではほとんどのブラウザーで Times New Roman) が要素に適用されており、作者が定義したフォントは与えらえていない。</li> + <li>フォントが適用されたテキストコンテンツを持つほかの要素を包含しているなど、調査中の要素の子孫でフォントが使用されている。</li> + <li><code>font-family</code> CSS 宣言で指定されたフォントがないため、システムの既定のフォントが使用されている。</li> +</ul> + +<h2 id="Fonts_Editor" name="Fonts_Editor">フォントエディター</h2> + +<p>Firefox 63 でフォントエディターを追加しました。"Fonts used" の下にある新たな領域であり、フォントの特性を編集するコントロールがあります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16159/fonts-editor-closeup-63-cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 134px; margin: 0px auto; width: 500px;"></p> + +<p>通常の (静的な) フォントでは、以下の設定を変更できます。</p> + +<h3 id="Size" name="Size">サイズ</h3> + +<p>調査中の要素の {{cssxref("font-size")}} です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16160/font-size_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 26px; margin: 0px auto; width: 360px;"></p> + +<p><code>em</code>、<code>rem</code>、<code>%</code>、<code>px</code>、<code>vh</code>、<code>vw</code> の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。</p> + +<div class="note"> +<p><strong>注記</strong>: <code>pt</code> など、ほかの単位を <code>font-size</code> や <code>line-height</code> で使用したい場合は、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> で調査中の要素に、その単位を使用する値を適用します。フォントエディターが自動的に値を拾って単位のドロップダウンメニューに割り当てて、単位が使用可能になります。</p> +</div> + +<p>単位を変更すると数値を新しい単位で同等の値に変換しますので、同じ計算値が維持されます。</p> + +<p>例: <code>1rem</code> が 10 ピクセルと等価である場合に単位を <code>rem</code> から <code>px</code> に変更すると、<code>2rem</code> は <code>20px</code> になります。</p> + +<h3 id="Line_height" name="Line_height">Line height</h3> + +<p>調査中の要素の {{cssxref("line-height")}} です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16166/line-height_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> + +<p>単位なし、または <code>em</code>、<em>%</em>、<code>px</code> の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。</p> + +<p>単位を変更すると、<code>font-size</code> の設定に応じて値を変換します。</p> + +<p>例: フォントのサイズが 20 ピクセルで line-height が <code>1.5em</code> である場合に単位を <code>em</code> から <code>px</code> に変更すると、値が <code>30px</code> になります。</p> + +<h3 id="Weight" name="Weight">太さ</h3> + +<p>調査中の要素の {{cssxref("font-weight")}} です。</p> + +<p><img alt="Font weight setting" src="https://mdn.mozillademos.org/files/16162/font-weight_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> + +<p>スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。バリアブルではないフォントではスライダーの範囲が 100 から 900 であり、100 ずつ増えます。</p> + +<div class="note"> +<p><strong>注記</strong>: <code>wght</code> バリエーション軸を定義する <a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">バリアブルフォント</a> (後述) は、独自の範囲を持ちます。</p> +</div> + +<h3 id="Italic" name="Italic">イタリック</h3> + +<p>調査中の要素の {{cssxref("font-style")}} です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16163/font-italic_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> + +<p>この設定は、<code>font-style</code> プロパティの値 <code>italic</code> と <code>normal</code> を切り替えます。</p> + +<div class="note"> +<p><strong>注記</strong>: この設定を変更すると、Firefox はページ上の表示を直ちに変更するためにインラインスタイルを適用します。</p> +</div> + +<h2 id="All_fonts_on_page" name="All_fonts_on_page">All fonts on page</h2> + +<p>フォントタブの最後にある領域に、ページ上で使用しているすべてのフォントを、展開可能なリストで表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16158/all-fonts-on-page_new63.png" style="border: 1px solid black; display: block; height: 641px; margin: 0px auto; width: 500px;"></p> + +<p>このリストは、フォントがウェブフォントかシステムのフォントかを簡単に判別できますので便利です。</p> + +<p>このセクションでは、それぞれのフォントで以下の情報を提供します:</p> + +<ul> + <li>フォントの、<code>font-family</code> における識別子と正式名称。</li> + <li>システムで使用できないウェブフォントである場合は、フォントファイルの URL。あるいはコンピューターから読み込んだフォント (既定のシステムフォント、または以前システムにインストールしたウェブフォント) である場合は "システム" と表示します。URL の右にあるアイコンをクリックすると、フォントファイルの URL をコピーします。</li> + <li>ウェブフォントである場合に、フォントをページに読み込む際の {{cssxref("@font-face")}} ディスクリプター。ディスクリプターは展開可能であり、展開するとスタイルシートで定義されたすべての構文を表示します。</li> + <li>フォントをレンダリングした結果を理解するための文字列サンプル。既定のサンプル文字列は "Abc" ですが、セクションの最上部にある入力フィールドをクリックして新しい値を入力することで、編集可能です。入力した文字列は、すべてのサンプル文字列に設定されます。</li> +</ul> + +<h2 id="Variable_font_support_in_Firefox_Developer_Tools" name="Variable_font_support_in_Firefox_Developer_Tools">Firefox 開発ツールでバリアブルフォントをサポート</h2> + +<p>Firefox 62 でバリアブルフォントをサポートして、Firefox 63 ではフォントエディターでバリアブルフォントプロパティの編集機能をサポートしました。</p> + +<h3 id="What_are_variable_fonts" name="What_are_variable_fonts">バリアブルフォントとは?</h3> + +<p><a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">バリアブルフォント</a> または <strong>OpenType Font Variations</strong> は、フォントデザイナーがひとつのフォントファイルに複数のタイプフェイスのバリエーションを含むことを可能にする、新しいフォントファイル形式を定義します。これはバリアブルフォントが使用可能なタイプフェイス全体を表すときは、ひとつのページに複数の異なるウェブフォントを適用する必要がなく、変更したい特性で望む値を含めて提供すればよいことを意味します。</p> + +<p>バリアブルフォントは許容範囲が <strong>バリエーション軸</strong> (詳しくは <a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Introducing_the_'variation_axis'">Introducing the 'variation axis'</a> をご覧ください) で定義されていますので、フォントの特性を細かい粒度で簡単に変更できます。例えば、バリアブルフォントでは {{cssxref("font-weight")}} を 1 から 1000 の任意の値に設定できます (ただし、バリアブルフォントがこの範囲全体をサポートすることは保証されません)。</p> + +<p>登録済みの軸がいくつかあります。これらの軸をすべてのフォントが定義する必要はありませんが、フォントデザイナーが登録済みの軸を<em>実装する</em>場合は、その動作が定義済みの動作に<em>従うことが必要です</em>。</p> + +<p>すべてのバリアブルフォント軸に、4 文字の軸タグがあります。CSS の <code>{{cssxref("font-variation-settings")}}</code> プロパティは、キーと値のペアでタグを使用します。例えば <code>font-variation-settings</code> を使用して {{cssxref("font-weight")}} を設定するには以下のようにします:</p> + +<pre class="brush: css">font-variation-settings: "wght" 350;</pre> + +<p>ただし <code>font-variation-settings</code> は、(独自の軸など) 特性値を設定するために基本的なフォントプロパティを使用できない場合の最終手段に限って使用するべきです。</p> + +<div class="note"> +<p><strong>注記</strong>: <code>font-variation-settings</code> を使用して設定したフォントの特性値は、対応する基本的なフォントプロパティ (<code>font-weight</code> など) で設定した値に必ず上書きされます。これはカスケーディングによって現れた値も含まれます。</p> +</div> + +<p>登録済みの軸と対応する CSS プロパティを以下に示します:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">軸タグ</th> + <th scope="col">CSS プロパティ</th> + </tr> + </thead> + <tbody> + <tr> + <td>"wght"</td> + <td>{{cssxref("font-weight")}}</td> + </tr> + <tr> + <td>"wdth"</td> + <td>{{cssxref("font-stretch")}}</td> + </tr> + <tr> + <td>"slnt" (slant)</td> + <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td> + </tr> + <tr> + <td>"ital"</td> + <td>{{cssxref("font-style")}}: <code>italic</code></td> + </tr> + <tr> + <td>"opsz"</td> + <td> + <p>{{cssxref("font-optical-sizing")}}</p> + </td> + </tr> + </tbody> +</table> + +<p>登録済みの軸のリストに含まれない軸は、独自の軸であると考えられます。独自の軸に対応する CSS フォントプロパティはありません。フォントデザイナーは、希望する軸をなんでも定義できます。それぞれの軸に、一意の 4 文字のタグが必要です。軸の名前と範囲の定義は、フォントデザイナー次第です。</p> + +<div class="note"> +<p><strong>注記</strong>: 登録済みの軸タグは小文字のタグであるのに対して、独自の軸は大文字のタグにするべきです。フォントデザイナーがこの慣習に従うことは強制されておらず、従っていないものもあることに注意してください。ここで重要なことは、軸タグが大文字と小文字を区別することです。</p> +</div> + +<div class="warning"> +<p><strong>警告</strong>: バリアブルフォントを使用するために、オペレーティングシステムを最新の状態にしておくことが必要です。例えば Linux OS では最新バージョンの Linux Freetype が必要であり、また 10.13 より古い macOS はバリアブルフォントをサポートしていません。最新ではないオペレーティングシステムでは、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できない場合があります。</p> +</div> + +<h4 id="Working_with_Variable_fonts_in_the_Font_Editor" name="Working_with_Variable_fonts_in_the_Font_Editor">フォントエディターでバリアブルフォントを扱う</h4> + +<p>調査中の要素でバリアブルフォントを使用している場合に、個々のフォントに実装されている軸と、軸の値を変更するコントロールをフォントタブに表示します。これは、個々のフォントでどの軸が使用可能かをすばやく見つける際に役に立ちます。フォントデザイナーが基本的に自由に軸を実装できるようになると、劇的に役に立つでしょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16164/v_fonts_example_cropped.png" style="border: 1px solid black; display: block; height: 379px; margin: 0px auto; width: 350px;"></p> + +<p>これらの軸は個別に調節できます。またフォントデザイナーが定義済みのインスタンスを含めていれば "Instance" ドロップダウンリストでそれらを選択でき、ページの表示も更新します。</p> + +<p>以下に、さまざまな軸を定義したフォントの例を 2 つ示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16167/v_fonts-examples_cropped.png" style="display: block; height: 29px; margin: 0px auto; width: 700px;"></p> + +<p>以下の例では、"Cheee Variable" フォントに Yeast や Gravity の設定があることがわかります。これらはフォントデザイナーが定義した独自の軸です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16169/change_font_before_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 889px;"></p> + +<p>1 番目の画像は、既定の設定のフォントをページで使用した状態です。2 番目の画像は、同じフォントで "Hi Yeast Hi Gravity" バリエーションを選択した後の状態です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16168/change_font_after_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 897px;"></p> + +<ul> +</ul> + +<h2 id="Tips" name="Tips">ヒント</h2> + +<p>最後に、フォントタブを有効に使用するためのヒントをいくつか紹介します:</p> + +<ul> + <li>インスペクターの <a href="/ja/docs/Tools/Page_Inspector/3-pane_mode">3 ペインモード</a> を使用しているとき、フォントタブの隣に調査中の要素の CSS ルールを同時に表示します。</li> + <li>ルールビューで {{cssxref("font-family")}} プロパティにマウスポインターを載せると、フォントのサンプルをツールチップで表示します: + <p><img alt="" src="https://mdn.mozillademos.org/files/16170/fonts_62_tooltip_cropped.png" style="border: 1px solid black; display: block; height: 153px; margin: 0px auto; width: 450px;"></p> + </li> + <li>上のスクリーンショットでは、<code>font-family</code> のフォントの羅列で、調査中の要素へ実際に適用されたフォントに下線が引かれていることにも気づくでしょう。これは、指定された多くのフォントでどれが適用されたかを簡単に発見できるようにします。</li> +</ul> diff --git a/files/ja/tools/page_inspector/how_to/visualize_transforms/index.html b/files/ja/tools/page_inspector/how_to/visualize_transforms/index.html new file mode 100644 index 0000000000..9b4b4f3b66 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/visualize_transforms/index.html @@ -0,0 +1,12 @@ +--- +title: Transform の可視化 +slug: Tools/Page_Inspector/How_to/Visualize_transforms +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Visualize_transforms +--- +<div>{{ToolsSidebar}}</div><p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> で <a href="/ja/docs/Web/CSS/transform"><code>transform</code></a> プロパティにマウスポインターを載せると、ページ上に変形操作をオーバーレイ表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9961/transform.png" style="display: block; height: 1670px; margin-left: auto; margin-right: auto; width: 1968px;"></p> diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html new file mode 100644 index 0000000000..a971196e9a --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html @@ -0,0 +1,24 @@ +--- +title: アニメーションインスペクタ (Firefox 41 および 42) +slug: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>アニメーションインスペクタの UI は、Firefox 43 で改良しました。Firefox 43 以降でアニメーションインスペクタがどのようになったかを知りたい場合は、<a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">"アニメーションを扱う" のメインページ</a>をご覧ください。</p> +</div> + +<p>Firefox 41 および 42 では、アニメーションインスペクタで以下のことができます:</p> + +<ul> + <li>ページ上で実行しているすべてのアニメーションの情報</li> + <li>すべてのアニメーションの再生/一時停止</li> + <li>それぞれのアニメーションの再生/一時停止/早戻し/早送り (Firefox 39 の新機能)</li> + <li>アニメーションの特定の時点にジャンプする (Firefox 39 の新機能)</li> + <li>アニメーションするノードのハイライト表示と調査 (Firefox 40 の新機能)</li> + <li>それぞれのアニメーションの再生レートを調節する (Firefox 40 の新機能)</li> + <li>アニメーションを Compositor スレッドで実行しているかを表示する (それぞれのアニメーションの隣に、稲妻のアイコンを表示します) (Firefox 41 の新機能)</li> +</ul> + +<p>{{EmbedYouTube("0vSIuKaqD8o")}}</p> diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html new file mode 100644 index 0000000000..2335fd6df5 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html @@ -0,0 +1,118 @@ +--- +title: アニメーションインスペクターの例：Web Animations API +slug: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="firefox-logo-animation" name="firefox-logo-animation">firefox-logo-animation</h2> + +<p><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a> を使用するアニメーションのサンプルです。</p> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html"><div class="channel"> + <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/> + <span id="note">Firefox Developer Edition</span> +</div></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css">.channel { + padding: 2em; + margin: 0.5em; + box-shadow: 1px 1px 5px #808080; + margin: 1.5em; +} + +.channel > * { + vertical-align: middle; + line-height: normal; +} + +#icon { + width: 50px; + height: 50px; + filter: grayscale(100%); +} + +#note { + margin-left: 1em; + font: 1.5em "Open Sans",Arial,sans-serif; + overflow: hidden; + white-space: nowrap; + display: inline-block; + opacity: 0; + width: 0; +} +</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js">var iconKeyframeSet = [ + { transform: 'scale(1)', filter: 'grayscale(100%)'}, + { filter: 'grayscale(100%)', offset: 0.333}, + { transform: 'scale(1.5)', offset: 0.666 }, + { transform: 'scale(1.5)', filter: 'grayscale(0%)'} +]; + +var noteKeyframeSet = [ + { opacity: '0', width: '0'}, + { opacity: '1', width: '300px'} +]; + +var iconKeyFrameOptions = { + duration: 750, + fill: 'forwards', + easing: 'ease-in', + endDelay: 100 +} + +var noteKeyFrameOptions = { + duration: 500, + fill: 'forwards', + easing: 'ease-in', + delay: 150 +} + +var icon = document.getElementById("icon"); +var note = document.getElementById("note"); + +var iconKeyframes = new KeyframeEffect( + icon, + iconKeyframeSet, + iconKeyFrameOptions +); + +var noteKeyframes = new KeyframeEffect( + note, + noteKeyframeSet, + noteKeyFrameOptions +); + +var iconAnimation = new Animation(iconKeyframes, document.timeline); +var noteAnimation = new Animation(noteKeyframes, document.timeline); + +var firstTime = true; + +function animateChannel(e) { + if (e.button != 0) { + return; + } + if (e.target.id != "icon") { + return; + } + if (firstTime) { + iconAnimation.play(); + noteAnimation.play(); + firstTime = false; + } else { + iconAnimation.reverse(); + noteAnimation.reverse(); + } +} + +document.addEventListener("click", animateChannel); +</pre> 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/animations_examples/index.html new file mode 100644 index 0000000000..3f0900fd07 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html @@ -0,0 +1,86 @@ +--- +title: アニメーションインスペクタの例：CSS トランジション +slug: Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="firefox-logo-animation" name="firefox-logo-animation">firefox-logo-animation</h2> + +<p><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>を使用したアニメーションの例。</p> + +<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> + +<pre class="brush: html"><div class="channel"> + <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/> + <span class="note">Firefox Developer Edition</span> +</div></pre> + +<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> + +<pre class="brush: css">.channel { + padding: 2em; + margin: 0.5em; + box-shadow: 1px 1px 5px #808080; + margin: 1.5em; +} + +.channel > * { + vertical-align: middle; + line-height: normal; +} + +.icon { + width: 50px; + height: 50px; + filter: grayscale(100%); + transition: transform 750ms ease-in, filter 750ms ease-in-out; +} + +.note { + margin-left: 1em; + font: 1.5em "Open Sans",Arial,sans-serif; + overflow: hidden; + white-space: nowrap; + display: inline-block; + + opacity: 0; + width: 0; + transition: opacity 500ms 150ms, width 500ms 150ms; +} + +.icon#selected { + filter: grayscale(0%); + transform: scale(1.5); +} + +.icon#selected+span { + opacity: 1; + width: 300px; +} +</pre> + +<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> + +<pre class="brush: js">function toggleSelection(e) { + if (e.button != 0) { + return; + } + if (e.target.classList.contains("icon")) { + var wasSelected = (e.target.getAttribute("id") == "selected"); + clearSelection(); + if (!wasSelected) { + e.target.setAttribute("id", "selected"); + } + } +} + +function clearSelection() { + var selected = document.getElementById("selected"); + if (selected) { + selected.removeAttribute("id"); + } +} + +document.addEventListener("click", toggleSelection);</pre> diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..6a458e58a6 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,180 @@ +--- +title: アニメーションを扱う +slug: Tools/Page_Inspector/How_to/Work_with_animations +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +<div>{{ToolsSidebar}}</div><p>本記事では、アニメーションの視覚化と編集が可能な 3 つのツールを扱います:</p> + +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">アニメーションインスペクター</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">@keyframes の編集</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">タイミング関数の編集</a></li> +</ul> + +<h2 id="Animation_inspector" name="Animation_inspector">アニメーションインスペクター</h2> + +<p>ページインスペクターの <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Animations_view">アニメーションビュー</a> では、ページ内のアニメーションを時間の時系列に沿って表示します。また、時系列上の任意の位置に移動するために使用する、ドラッグ可能なウィジェットがあり、ある時点のページの状態を確認できます。</p> + +<p>このビューでは <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS @keyframes 規則</a>、<a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a> を使用して作成したアニメーションを表示します。Firefox 48 より、<code><a href="/ja/docs/Web/CSS/::before">::before</a></code> および <code><a href="/ja/docs/Web/CSS/::after">::after</a></code> 疑似要素に適用したアニメーションも表示します。</p> + +<p>ビューの動作を知るために、サンプルを使用してひととおり見ていきましょう。以下のボックス内に、<a href="/ja/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a> を表すグレースケールのアイコンがあります。アイコンをクリックすると膨張して色がつき、ブラウザ名が現れます。もう一度アイコンをクリックすると、元に戻ります。</p> + +<p>{{EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API")}}</p> + +<p>これらのアニメーションは、<a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a> を使用して作成しました。</p> + +<p>このサンプルで何が起きているかを、アニメーションインスペクターで見ていきましょう。</p> + +<ol> + <li>ボックス内を右クリックして [要素を調査] を選択します。</li> + <li><code><div class="channel"></code> 要素が選択されていることを確認します。</li> + <li>[アニメーション] タブに切り替えます。</li> + <li>アニメーションを再生します。</li> +</ol> + +<p>{{EmbedYouTube("3f_vtdHqt9o")}}</p> + +<p>ここで、アニメーションインスペクターの内容を詳しく見ていきましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14508/animation-inspector-1.png" style="display: block; height: 216px; margin-left: auto; margin-right: auto; width: 738px;"></p> + +<p>これは、選択中の要素や子要素に適用されているすべてのアニメーションをひとつの時系列に表示したタイムラインです。時系列は最初のアニメーションの開始時点から始まり、最後のアニメーションの終了時点で終わります。また、250 ミリ秒ごとにマーカーがついています (表示しているアニメーションの時間規模に依存します)。</p> + +<h3 id="Animation_bars" name="Animation_bars">アニメーションバー</h3> + +<p>それぞれのアニメーションやトランジションは、時系列に沿って水平方向に並ぶバーとして表示します。また、バーは以下のように表示します:</p> + +<ul> + <li>プロパティを変化させる <code><a href="/ja/docs/Web/CSS/transition">transition</a></code> を使用している場合は青色で表示</li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> アニメーション</a> を使用している場合は橙色で表示</li> + <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a> を使用している場合は緑色で表示</li> +</ul> + +<p>Compositor スレッドを使用してプロパティのアニメーションを行っている場合は稲妻のアイコン (<img alt="" src="https://mdn.mozillademos.org/files/13106/compositor.png" style="width: 15px;">) を表示します (詳しくは <a href="/ja/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">さまざまな CSS プロパティでアニメーションを行うコスト</a> をご覧ください)。</p> + +<p>Firefox 52 よりバーの形状が、アニメーションで使用するイージング効果を反映するようになりました。前出の例では 1 番目のバーが凹型で ease-in、2番目のバーが凸型で ease-out を表していることがわかります。</p> + +<p>CSS トランジションのアニメーションでは、それぞれのプロパティのトランジションをひとつのバーで表し、トランジションを行うプロパティの名称を記載します。CSS <code>@keyframes</code> のアニメーションでは、それぞれのアニメーションをひとつのバーで表し、キーフレームの名前を記載します。</p> + +<p>アニメーションやトランジションに遅延がある場合は、その部分を斜線で網掛け表示します。<a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>delay</code> および <code>endDelay</code></a> の両方を表します。</p> + +<p>バーにマウスポインターを載せると以下の情報を含む、アニメーションやトランジションの詳細情報を記載したツールチップを表示します:</p> + +<ul> + <li>アニメーションの種類: CSS トランジション、CSS アニメーション、Web Animations API</li> + <li>アニメーションの再生時間</li> + <li>アニメーションの開始および終了時の遅延</li> + <li>アニメーションのイージング (またはタイミング関数)</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14510/animation-inspector-2.png" style="display: block; height: 291px; margin-left: auto; margin-right: auto; width: 738px;"></p> + +<h3 id="Information_about_the_animated_element" name="Information_about_the_animated_element">アニメーションする要素の情報</h3> + +<p>バーの左側に、アニメーションを適用した要素のセレクターがあります。セレクターにマウスポインターを載せると、ページ上で要素をハイライト表示します。セレクターをクリックすると、要素をインスペクターで選択します。</p> + +<p>{{EmbedYouTube("ygATdrzQz0I")}}</p> + +<p>セレクターの左側に、"標的" のアイコン (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">) があります。このアイコンをクリックすると、要素をハイライト表示したままにします。</p> + +<h3 id="Animation_details" name="Animation_details">アニメーションの詳細情報</h3> + +<p>バーをクリックすると、アニメーションで変化するすべてのプロパティについて詳細情報を表示します。例えば、<code>img#icon</code> のアニメーションのバーをクリックしてみましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14512/animation-inspector-3.png" style="display: block; height: 260px; margin-left: auto; margin-right: auto; width: 738px;"></p> + +<p><code><a href="/ja/docs/Web/CSS/filter">filter</a></code> と <code><a href="/ja/docs/Web/CSS/transform">transform</a></code> の、2 つのプロパティが変化していることがわかります。それぞれのドットは、アニメーションで使用しているキーフレームのセット内にある、プロパティの項目を示します。どちらのプロパティも 0ms で開始、750ms で終了しています。<code>filter</code> は 250ms で、<code>transform</code> は 500ms で値が与えられています。ドットにマウスポインターを載せると、タイムライン上の特定の時点でプロパティに与えられた値を確認できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14514/animation-inspector-4.png" style="display: block; height: 260px; margin-left: auto; margin-right: auto; width: 738px;"></p> + +<p>これは要するに、アニメーションの <a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API#JavaScript_Content">キーフレーム</a> を視覚化したものです:</p> + +<pre class="brush: js line-numbers language-js">var iconKeyframeSet = [ + { transform: 'scale(1)', filter: 'grayscale(100%)' }, + { filter: 'grayscale(100%)', offset: 0.333 }, + { transform: 'scale(1.5)', offset: 0.666 }, + { transform: 'scale(1.5)', filter: 'grayscale(0%)' } +];</pre> + +<h3 id="Application_to_the_example" name="Application_to_the_example">サンプルに応用する</h3> + +<p>これらすべてをサンプルに適用すると、以下のことがわかります:</p> + +<ul> + <li>アニメーションは <code>span#note</code> および <code>img#icon</code> の、2 つの要素で行っています。これらのセレクターにマウスポインターを載せると、それぞれブラウザー名 "Firefox Developer Edition" とブラウザーのアイコンであることがわかります。</li> + <li><code>img#icon</code> のアニメーションについて: + <ul> + <li>アイコンのサイズ変更と着色のため、<code><a href="/ja/docs/Web/CSS/filter">filter</a></code> および <code><a href="/ja/docs/Web/CSS/transform">transform</a></code> プロパティでアニメーションを行っています。</li> + <li>終端は 750ms で、100ms の <code>endDelay</code> があります。</li> + <li>Compositor スレッドを使用します。</li> + <li><code><a href="/ja/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> の値 <code>ease-in</code> が指定されました。緑色のバーが凹型形状であることからわかります。</li> + </ul> + </li> + <li><code>span#note</code> のアニメーションについて: + <ul> + <li>名称を徐々に表示するため、<code><a href="/ja/docs/Web/CSS/width">width</a></code> および <code><a href="/ja/docs/Web/CSS/opacity">opacity</a></code> プロパティでアニメーションを行っています。</li> + <li>終端は 500ms で、150ms の <code>delay</code> があります。</li> + <li><code><a href="/ja/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> の値 <code>ease-out</code> が指定されました。緑色のバーが凸型形状であることからわかります。</li> + </ul> + </li> +</ul> + +<h3 id="Animation_playback" name="Animation_playback">アニメーションを再生する</h3> + +<p>アニメーションインスペクターの上部に、以下のウィジェットがあります:</p> + +<ul> + <li>アニメーションの再生/一時停止および再実行するボタン</li> + <li>アニメーションの再生速度を変更するドロップダウンリスト</li> + <li>アニメーションの経過時間を表示する</li> +</ul> + +<p>最後に、時系列の上部にあるバーの内部をクリックすると、左右にドラッグしてアニメーションを前後に遷移させることが可能なスクラバーを使用できます。これにより、いつ何が起きているかを正確に把握できます:</p> + +<p>{{EmbedYouTube("9fxRm3i_aDQ")}}</p> + +<h3 id="Further_information_about_animation_compositing" name="Further_information_about_animation_compositing">アニメーションの合成に関する詳細情報</h3> + +<p>Firefox 49 よりアニメーションインスペクターで、アニメーションのパフォーマンスや合成に関する情報を提供する機能が向上しました。これを説明するために、サンプルを 2 つ作成しました。<a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing.html">animation-inspector-compositing.html</a> を開いて赤色の長方形をクリックすると、シンプルな {{cssxref("opacity")}} のアニメーションが始まります。Firefox 49 以降でこれをアニメーションインスペクターで見ると、以下のことがわかります:</p> + +<ul> + <li>白色の稲妻アイコンは、すべてのアニメーションプロパティが Compositor を使用して実行するよう最適化されているかを示しており、有効になっています。</li> + <li>バーのツールチップにも、リマインダーとしてこの情報が含まれています。"すべてのアニメーションのプロパティが最適化されています" というメッセージがあります。</li> + <li>アニメーション情報を展開すると、Compositor によってアニメーションが最適化されているプロパティ名の隣に稲妻のアイコンを表示します。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13589/compositing-information-1.png" style="display: block; height: 349px; margin: 0px auto; width: 1065px;"></p> + +<p>次に <a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing-silly.html">animation-inspector-compositing-silly.html</a> を見てみましょう。こちらも同様のサンプルですが、赤色の長方形をクリックすると {{cssxref("opacity")}} と同時に、{{cssxref("left")}} や {{cssxref("transform")}} (translation なし) プロパティもアニメーションする点が異なります。位置プロパティと translation を同時に実行することにはあまり意味がありません (2 つの効果は同期しません) ので、<code>transform</code> プロパティは意図的に Compositor で扱われません。Firefox 49 以降、アニメーションインスペクターはこれをより役に立つように伝えます。アニメーションインスペクターで見ると、以下のことがわかります:</p> + +<ul> + <li>バーにあった白色の稲妻アイコンが灰色の稲妻アイコンに変わっており、関連プロパティの一部しか Compositor によって最適化されていないことを示します。</li> + <li>バーのツールチップにも、リマインダーとしてこの情報が含まれています。"一部のアニメーションのプロパティが最適化されています" というメッセージがあります。</li> + <li>アニメーションが<strong>最適化されていない</strong>プロパティで、コードを改良すれば最適化できるものに、点線の下線を表示します。以下のスクリーンショットで transform をご覧ください。プロパティ名にマウスポインターを載せると、理由を説明するツールチップを表示します。この例では、"同一要素上の位置プロパティを同時にアニメーションする場合、このコンポジタでは ‘transform’ のアニメーションを実行できません。" というメッセージです。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13591/compositing-information-2.png" style="display: block; height: 394px; margin: 0px auto; width: 1158px;"></p> + +<h2 id="Edit_keyframes" name="Edit_keyframes">@keyframes の編集</h2> + +<p>選択中の要素に関連付けられた <a href="/ja/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes 規則</a> を <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> に表示します。また、編集も可能です:</p> + +<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p> + +<h2 id="Edit_timing_functions" name="Edit_timing_functions">タイミング関数の編集</h2> + +<p><a href="/ja/docs/Web/Guide/CSS/Using_CSS_animations">CSS アニメーション</a> を作成する際に、<a href="/ja/docs/Web/CSS/animation-timing-function">タイミング関数</a> を指定できます。これはアニメーションが進むペースを定義します。タイミング関数の指定方法のひとつが、3 次ベジェ曲線による指定です。</p> + +<p>ルールビューで、3 次ベジェ曲線で定義したタイミング関数の隣にアイコンを表示します。このアイコンをクリックすると視覚的な曲線エディターを表示します。<a href="/ja/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 および P2</a> をドラッグして、その結果をページ上で確認できます。</p> + +<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p> + +<p>この機能は、<a href="http://cubic-bezier.com">Lea Verou の cubic-bezier.com</a> 由来のオープンソースコードを使用しています。</p> + +<p>3 次ベジェ曲線エディターに多くのプリセットを用意しました。これらは "Ease-in"、"Ease-out"、"Ease-in-out" にグループ化されています:</p> + +<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p> diff --git a/files/ja/tools/page_inspector/html_panel/index.html b/files/ja/tools/page_inspector/html_panel/index.html new file mode 100644 index 0000000000..49ef474f32 --- /dev/null +++ b/files/ja/tools/page_inspector/html_panel/index.html @@ -0,0 +1,34 @@ +--- +title: HTML panel +slug: Tools/Page_Inspector/HTML_panel +translation_of: Tools/Page_Inspector/UI_Tour +--- +<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/index.html b/files/ja/tools/page_inspector/index.html new file mode 100644 index 0000000000..cb87d85681 --- /dev/null +++ b/files/ja/tools/page_inspector/index.html @@ -0,0 +1,60 @@ +--- +title: インスペクター +slug: Tools/Page_Inspector +tags: + - CSS + - DOM + - HTML + - Stylesheets + - Web Development + - 'Web Development:Tools' + - 'l10n:priority' +translation_of: Tools/Page_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>ページの HTML や CSS の調査や変更を行うために、インスペクターを使用しましょう。</p> + +<p>Firefox でローカルへのコピーとして読み込んだページの他に、Android 版 Firefox などリモートで読み込んだページも調査できます。開発ツールをリモート環境に接続する手順については、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a> をご覧ください。</p> + +<hr> +<h2 id="User_Interface_Tour" name="User_Interface_Tour">ユーザーインターフェイスツアー</h2> + +<p>インスペクターについてひととおり理解するために、<a href="/ja/docs/Tools/Page_Inspector/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/Page_Inspector/How_to/Open_the_Inspector">インスペクターを開く</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML の調査と編集</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">ボックスモデルの調査と編集</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">色の調査と選択</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/Page_Inspector/How_to/View_fonts">フォントを確認する</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Transform の可視化</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">インスペクターの API を使用する</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Select_an_element">要素を選択する</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS の調査と編集</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">イベントリスナーの調査</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/Edit_CSS_filters">CSS フィルターを編集する</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">CSS shape を編集する</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/View_background_images">背景画像を確認する</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">ウェブコンソールからインスペクターを使用する</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS グリッドレイアウトを調査する</a></li> +</ul> +</div> + +<hr> +<h2 id="Reference" name="Reference">リファレンス</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector/Keyboard_shortcuts">キーボードショートカット</a></li> + <li><a href="/ja/docs/Tools/Tools_Toolbox#Inspector">オプション</a></li> +</ul> +</div> diff --git a/files/ja/tools/page_inspector/keyboard_shortcuts/index.html b/files/ja/tools/page_inspector/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..b21a0a16c0 --- /dev/null +++ b/files/ja/tools/page_inspector/keyboard_shortcuts/index.html @@ -0,0 +1,10 @@ +--- +title: キーボードショートカット +slug: Tools/Page_Inspector/Keyboard_shortcuts +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "page-inspector")}}</p> + +<h3 id="Global_shortcuts" name="Global_shortcuts">共通ショートカット</h3> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}</p> diff --git a/files/ja/tools/page_inspector/style_panel/index.html b/files/ja/tools/page_inspector/style_panel/index.html new file mode 100644 index 0000000000..12ff9868fb --- /dev/null +++ b/files/ja/tools/page_inspector/style_panel/index.html @@ -0,0 +1,68 @@ +--- +title: Style panel +slug: Tools/Page_Inspector/Style_panel +translation_of: Tools/Page_Inspector#CSS_pane +--- +<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/page_inspector/ui_tour/index.html b/files/ja/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..627d52e4fd --- /dev/null +++ b/files/ja/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,110 @@ +--- +title: UI ツアー +slug: Tools/Page_Inspector/UI_Tour +tags: + - インスペクタ + - ガイド + - ツール +translation_of: Tools/Page_Inspector/UI_Tour +--- +<p>{{ToolsSidebar}}</p> + +<p>本記事は、インスペクターのユーザーインターフェイスの主要部を紹介するクイックツアーです。</p> + +<p>ここでは、インスペクターの UI に存在する 3 つのトップレベルコンポーネントを扱います:</p> + +<ul> + <li>[ページから要素を選択します] ボタン</li> + <li>HTML ペイン</li> + <li>CSS ペイン</li> +</ul> + +<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>本ガイドは、あえて可能な限り簡潔にします。そしてインスペクターの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。</p> + +<h2 id="Select_element_button" name="Select_element_button">要素選択ボタン</h2> + +<p>インスペクターは、選択中の要素に関する詳細情報を提供します。要素選択ボタンは、調査する要素を選択する手段のひとつです:</p> + +<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p> </p> + +<p>このボタンは、実際は <a href="/ja/docs/Tools/Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> の一部ですので、インスペクター以外のツールからでも即座にアクセスできます。</p> + +<p>要素の選択方法については、<a href="/ja/docs/Tools/Page_Inspector/How_to/Select_an_element">要素を選択する</a> のガイドをご覧ください。</p> + +<h2 id="HTML_pane" name="HTML_pane">HTML ペイン</h2> + +<p>インスペクターは 2 つのペインに分かれています。左半分は HTML ペインが占めています:</p> + +<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p> </p> + +<p>HTML ペインの構造について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML の調査と編集</a> のガイドをご覧ください。</p> + +<h2 id="CSS_pane" name="CSS_pane">CSS ペイン</h2> + +<p>インスペクターの右半分は、CSS ペインが占めています:</p> + +<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<p> </p> + +<p>CSS ペインは 5 つのビューに分かれています:</p> + +<ul> + <li>ルールビュー</li> + <li>計算済みビュー</li> + <li>レイアウトビュー</li> + <li>アニメーションビュー</li> + <li>フォントビュー</li> +</ul> + +<p>ペインの上部にあるタブを使用して、別のビューに切り替えます。</p> + +<div class="note"> +<p><strong>メモ</strong>: Firefox 62 以降では、ルールビューを CSS ペインの他のタブとは別の独自のペインに分割することができます。これは<a href="/ja/docs/ja/docs/Tools/Page_Inspector/3-pane_mode">3ペインモード</a>と呼ばれます。</p> +</div> + +<p> </p> + +<h3 id="Rules_view" name="Rules_view">ルールビュー</h3> + +<p>ルールビューでは選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:</p> + +<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS の調査と編集</a> をご覧ください。</p> + +<h3 id="Computed_view" name="Computed_view">計算済みビュー</h3> + +<p>計算済みビューでは選択した要素について、各 CSS 属性の計算済みの値と、要素のボックスモデルを編集可能な形で視覚化したものを表示します。</p> + +<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p> </p> + +<p>ボックスモデルビューについて詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">ボックスモデルの調査と編集</a> をご覧ください。Firefox 50 より前のバージョンでは、ボックスモデルビューを [計算済みビュー] タブの中ではなく、個別のタブで表示していました。</p> + +<p>このビューに表示される CSS 宣言について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">計算済み CSS の調査</a> をご覧ください。</p> + +<h3 id="Fonts_view" name="Fonts_view">フォントビュー</h3> + +<p>フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。</p> + +<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p> </p> + +<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/View_fonts">フォントを確認する</a> をご覧ください。</p> + +<h3 id="Animations_view" name="Animations_view">アニメーションビュー</h3> + +<p>アニメーションビューでは、選択した要素に適用されているアニメーションの詳細情報を表示します。また、アニメーションを一時停止する機能もあります:</p> + +<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p> </p> + +<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">アニメーションを扱う</a> をご覧ください。</p> diff --git a/files/ja/tools/paint_flashing_tool/index.html b/files/ja/tools/paint_flashing_tool/index.html new file mode 100644 index 0000000000..9e62cfd697 --- /dev/null +++ b/files/ja/tools/paint_flashing_tool/index.html @@ -0,0 +1,93 @@ +--- +title: Paint Flashing Tool +slug: Tools/Paint_Flashing_Tool +translation_of: Tools/Paint_Flashing_Tool +--- +<div>{{ToolsSidebar}}</div><p>Paint Flashing Tool はアクティブ時に、何らかの入力 (例えばユーザーがマウスを動かしたりスクロールしたりするなど) への応答としてブラウザーが再描画を行わなければならない部分を強調表示します。このツールにより、ウェブサイトがブラウザーに過剰な再描画を行わせていないかを明らかにできます。再描画はパフォーマンスへの影響が大きい処理になりえるため、不必要な再描画をなくすことでウェブサイトの応答性を改善できます。</p> + +<h2 id="Repaints_and_responsiveness" name="Repaints_and_responsiveness">再描画と応答性</h2> + +<p>ブラウザーはウェブページをレンダリングするときに、HTML や CSS の解析、どのようにレイアウトするかの決定、そして実際に画面へコンテンツを表示するために描画を行います。ウェブページで見えている部分が変更するイベントが発生するたびに、ブラウザーはページの一部分を再描画しなければなりません。例えばユーザーがページをスクロールしたり、要素のスタイルを変更する <a href="/ja/docs/Web/CSS/:hover" title="Web/CSS/:hover"><code>:hover</code></a> 疑似クラスを持つ要素にマウスポインターを載せたりすると、再描画が必要です。</p> + +<p>再描画は高コストな処理であるため、ブラウザーは必要な再描画量の最小化を図ります。ブラウザーは画面上のどの部分が "損傷" しているかを解析して、そこだけを再描画しようとします。また、互いに独立して更新されると考えられるレイヤーに、ページのモデルを分割します。レイヤーは独立して描画された後に合成されますので、ひとつのレイヤーで外観が変更しても他のレイヤーでの再描画を引き起こしません。また 2 つのレイヤーの関係が変化するだけ (例えばアニメーションで) では、再描画はまったく必要ありません。</p> + +<p>ウェブ開発者によってなされた選択がブラウザーの上記動作を妨げる場合があり、必要以上の画面領域に対してより多くの再描画を引き起こします。これにより、ユーザーの入力に対するサイトの応答が遅くなるかもしれません ("janky" とも言われます)。Paint Flashing Tool はここで役立ちます。イベントへの応答としてブラウザーが再描画した領域を示すことで、過剰な再描画ではないかを確認できます。</p> + +<h2 id="Using_the_paint_flashing_tool" name="Using_the_paint_flashing_tool">Paint Flashing Tool を使用する</h2> + +<p>Paint Flashing を有効にする方法は 2 つあります:</p> + +<ul> + <li><a href="/ja/docs/Tools_Toolbox" title="Tools_Toolbox">ツールボックス</a> を開いて、[描画された領域を強調表示します] というラベルのアイコンをクリックします:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5929/paint-flashing-open-from-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<ul> + <li><a href="/ja/docs/Tools/GCLI" title="Tools/GCLI">開発ツールバー</a> を起動して、"paintflashing on" と入力して Enter キーを押下します:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5931/paint-flashing-open-from-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>ページを使用してみましょう。マウスを動かしたり少しスクロールしたりすると、上図のページが下図のようになります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5935/paint-flashing-activated.png" style="display: block; margin-left: auto; margin-right: auto;">この例では、再描画の主な原因が 2 つあります:</p> + +<ul> + <li>リンクに <a href="/ja/docs/Web/CSS/:hover" title="Web/CSS/:hover"><code>:hover</code></a> 疑似クラスが適用されたスタイルがあるため、リンク上でマウスを動かすと、ブラウザーが再描画を行います。</li> + <li>スクロールを行うと、画面の下部に現れるページの新たな一部分をブラウザーが再描画します。また、右上でスクロールバーも再描画します。</li> +</ul> + +<p>Paint Flashing を無効にするには、ツールバーで [描画された領域を強調表示します] のアイコンを再度クリックするか、開発ツールバーに "paintflashing off" と入力して Enter キーを押下します。</p> + +<h2 id="Example_CSS_transitions" name="Example_CSS_transitions">例: CSS トランジション</h2> + +<p>実装の選択が再描画の効率に影響を与える可能性がある分野のひとつが、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions" title="Web/Guide/CSS/Using_CSS_transitions">CSS トランジション</a> です。以下の例は、CSS トランジションを使用して要素を動かすための、2 つの異なる方法を示しています。第一の方法は要素の <a href="/ja/docs/Web/CSS/margin-left" title="Web/CSS/margin-left"><code>margin-left</code></a> に対してトランジションを適用する、第二の方法は <a href="/ja/docs/Web/CSS/transform" title="Web/CSS/transform"><code>transform</code></a> プロパティを使用して要素を動かします。</p> + +<pre class="brush: html"><body> + <div id="container"> + <div class="moving-box" id="moving-box-left-margin">Transition using margin-left</div> + <div class="moving-box" id="moving-box-transform">Transition using transform</div> + </div> +</body> +</pre> + +<pre class="brush: css">#container { + border: 1px solid; +} + +.moving-box { + height: 20%; + width:20%; + margin: 2%; + padding: 2%; + background-color: blue; + color: white; + font-size: 24px; +} + +#moving-box-left-margin { + transition: margin-left 4s; +} + +#moving-box-transform { + transition: transform 4s; +} + +body:hover #moving-box-left-margin{ + margin-left: 74%; +} + +body:hover #moving-box-transform { + transform: translate(300%); +}</pre> + +<p>以下の領域にマウスポインターを動かすと、トランジションをご覧いただけます:</p> + +<p>{{EmbedLiveSample('Example_CSS_transitions', 600, 300)}}</p> + +<p>ここで Paint Flashing を有効にして、もう一度試してみましょう。<code>margin-left</code> 版では要素が動くにつれて一連の再描画が発生するのに対して、<code>transform</code> 版では始点と終点だけで再描画が発生します。</p> + +<p>なぜでしょう? <code>transform</code> を使用するとき、ブラウザーは要素のために別のレイヤーを生成します。よって要素が移動するときは、すべての変更点が 2 つのレイヤー相互の関係であり、合成処理によって対処されます: どちらのレイヤーも再描画が不要です。</p> + +<p>シンプルなスタイルである本ケースでは、追加の再描画は大きな違いにはなりません。しかしスタイルが描画処理的に高コストなものになると、大きな違いになるでしょう。ブラウザーの再描画を最小化する最適化は何かを知るのは難しく、またバージョンが変わると最適化の方法が変わる可能性があります。よって Paint Flashing Tool でウェブサイトのテストを行うと、最適な動作であることを確かめるのに役立ちます。</p> diff --git a/files/ja/tools/performance/allocations/index.html b/files/ja/tools/performance/allocations/index.html new file mode 100644 index 0000000000..29a7719108 --- /dev/null +++ b/files/ja/tools/performance/allocations/index.html @@ -0,0 +1,86 @@ +--- +title: メモリ割り当て +slug: Tools/Performance/Allocations +translation_of: Tools/Performance/Allocations +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>パフォーマンスツールのメモリ割り当てビューは、プロファイルの中でページ内のどの関数がもっとも多くのメモリ割り当てを行ったかを表示します。</p> + +<p>メモリを大量に割り当てたりメモリ割り当てを多数行ったりすると<a href="/ja/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">ガベージコレクション</a>を引き起こすため、パフォーマンスの観点で重要です。ガベージコレクションは、ページの応答性を損なう可能性があります。</p> +</div> + +<div class="geckoVersionNote"> +<p>メモリ割り当てビューは、Firefox 46 の新機能です。</p> +</div> + +<p>メモリ割り当てビューを有効にするため、プロファイルを記録する<em>前に</em>パフォーマンスツールの設定で "メモリ割り当てを記録" にチェックを入れなければなりません。そして通常どおり<a href="/ja/docs/Tools/Performance/How_to#Record_a_profile">プロファイルの記録</a>を行うと、ツールバーに "メモリ割り当て" という新たなタブが現れます:</p> + +<p>{{EmbedYouTube("Le9tTo7bqts")}}</p> + +<h2 id="Anatomy_of_the_allocations_view" name="Anatomy_of_the_allocations_view">メモリ割り当てビューを分析する</h2> + +<p>メモリ割り当てビューは、以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12393/allocations-view-1.png" style="display: block; height: 156px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>メモリ割り当てビューは、記録中に行われたメモリ割り当てを定期的にサンプリングします。それぞれの行は、記録中に少なくとも 1 回、メモリ割り当てのサンプルを取得した関数を表します。</p> + +<p>各行に、以下の列があります:</p> + +<ul> + <li>Self Count: 関数内で取得したメモリ割り当てサンプルの数 (合計に対するパーセント値も表示します)</li> + <li>Self Bytes: 関数内のメモリ割り当てサンプルで割り当てたメモリの総バイト数 (合計に対するパーセント値も表示します)</li> +</ul> + +<p>行は "Self Bytes" 列の値でソートします。</p> + +<p>よって、前出の例では以下のことが分かります:</p> + +<ul> + <li><code>signalLater()</code> で 8904 個のサンプルを取得しており、これは総サンプル数の 28.57% です。</li> + <li>それらのサンプルで 1102888 バイトのメモリを割り当てており、これはすべてのサンプルが割り当てたメモリの 30.01% です。</li> +</ul> + +<p>それぞれの関数名の隣に、展開用の三角印があります。これをクリックすると、関数を呼び出した場所がわかります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>この例では <code>signalLater()</code> が 2 つの場所から呼び出されたことが分かります。<code>removeInner()</code> と <code>setSelectionInner()</code> です。この方法でコールスタックを戻ることができ、メモリ割り当ての状況をよく理解できます。</p> + +<h3 id="Self_Cost_and_Total_Cost" name="Self_Cost_and_Total_Cost">Self Cost と Total Cost</h3> + +<ul> +</ul> + +<p>このビューでは、列が "Self" と "Total" の 2 つのセットに分けられていることがわかるでしょう。"Self" は、関数自体で取得したサンプルを記録します。"Total" は関数自体と、この関数から呼び出した関数で取得したサンプルを記録します。ビューではツリーの葉に位置する関数をトップレベルに置きます (つまり、コールスタックを反転して表示します) ので、トップレベルではどちらも同じ値になります。一方、コールスタックを戻っていくと違いが出てくることがわかるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>この図では、<code>signalLater()</code> で 8904 個のサンプルを取得しています。しかし <code>signalLater()</code> は、<code>removeInner()</code> と <code>setSelectionInner()</code> の 2 か所から呼び出されています。これらの関数はどちらも Self Count が 0 であり、その関数内で直接メモリ割り当ては行っていないことを意味します。一方、<code>removeInner()</code> の Total Count は 8901、<code>setSelectionInner()</code> の Total Count はわずか 3 です。これは 8904 回のメモリ割り当てが、<code>removeInner()</code> の枝で行われた 3回を除き、すべて <code>signalLater()</code> で発見されたことを語ります。</p> + +<h2 id="Allocations_and_garbage_collection" name="Allocations_and_garbage_collection">メモリ割り当てとガベージコレクション</h2> + +<p>当然ながらサイト内で割り当てたメモリは、知っておくと役に立つ情報です。しかし、サイトのメモリ割り当てのプロファイルとサイトの応答性を主に結びつけるものは、ガベージコレクション (GC) のコストです。</p> + +<p>ガベージコレクションを行う JavaScript などの言語は、<a href="/ja/docs/Tools/Memory/Dominators#Reachability">到達性</a>がなくなったオブジェクトを発見するためにランタイムが定期的にヒープを走査して、そのようなオブジェクトが占めていたメモリを解放しなければなりません。このような GC イベントを実行する間は JavaScript エンジンが一時停止しますので、プログラムが休止して応答性が完全になくなります。</p> + +<p>応答性への影響を軽減するため <a href="/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (Firefox の JavaScript エンジン) は少しずつ増加する GC を実施でき、GC の合間にプログラムを実行できます。それでも時にはノンインクリメンタルガベージコレクションが必要であり、この場合プログラムは完了するまで待たなければなりません。</p> + +<p>GC イベントは<a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a>ビューで赤色のマーカーで示され、時には数百ミリ秒続くなど応答性に危険信号がともります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12399/allocations-view-long-gc.png" style="display: block; height: 160px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>サイトのパフォーマンスプロファイルに GC イベントがある場合、何ができるのでしょうか? SpiderMonkey は、いつどのようなガベージコレクションを行うかを決めるために<a href="https://dxr.mozilla.org/mozilla-central/rev/584870f1cbc5d060a57e147ce249f736956e2b62/js/src/gc/GCRuntime.h#192">複雑なヒューリスティック技術</a>を使用しています。</p> + +<p>ただし、通常は<em>メモリ割り当ての圧力 (大量のメモリを割り当てる、または高い頻度でメモリを割り当てる) によって SpiderMonkey がガベージコレクションを行う可能性が高くなり、さらにインクりメンタルではないガベージコレクションを行う可能性も高くなります</em>。</p> + +<p>メモリ割り当ての圧力によってガベージコレクションが発生した場合は、タイムラインのマーカーの右側にあるサイドバーで "Show allocation triggers" という名前のリンクを表示します。このリンクをクリックすると開発ツールがメモリ割り当てビューに切り替わり、前回の GC が終了したときからクリックした GC が始まるときまでの時間帯を選択します。これにより、GC イベントを引き起こしたメモリ割り当てを集約して表示します:</p> + +<p>{{EmbedYouTube("tO5ovD9Jw4k")}}</p> + +<p>このような問題がみられる場合は、そのときに行っているメモリ割り当ての回数や量を削減できないか検討してください。例えば:</p> + +<ul> + <li>始めにメモリを割り当てるのではなく、実際必要なときに順次メモリを割り当てられませんか?</li> + <li>ループ内でメモリを割り当てている場合、ひとつのメモリ領域を毎回の処理で再使用できませんか?</li> +</ul> diff --git a/files/ja/tools/performance/call_tree/index.html b/files/ja/tools/performance/call_tree/index.html new file mode 100644 index 0000000000..d0472584d4 --- /dev/null +++ b/files/ja/tools/performance/call_tree/index.html @@ -0,0 +1,128 @@ +--- +title: コールツリー +slug: Tools/Performance/Call_Tree +tags: + - JavaScript + - パフォーマンス + - メモリ +translation_of: Tools/Performance/Call_Tree +--- +<div>{{ToolsSidebar}}</div> + +<div class="summary"> +<p>コールツリーは、どの JavaScript 関数がもっともブラウザで時間をかけているかを示します。この結果を分析すると、コードのボトルネック (ブラウザが不相応に多くの時間をかけている場所) を見つけることができます。</p> + +<p>これらのボトルネックは、最適化により最大の効果を得られる場所です。</p> +</div> + +<p>コールツリーは、サンプリングプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。</p> + +<div class="note"> +<p>本記事では、例としてシンプルなプログラムから出力した結果を使用します。自身のプロファイルで実験するためにプログラムを取得したい場合は、<a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/">こちら</a>をご覧ください。ここで言及するプロファイルは<a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/profile/call-tree.json">こちら</a>にあります。読み進めるために、インポートしてください。</p> + +<p>プログラムの構造を説明するページは<a href="/ja/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">こちら</a>です。</p> + +<p>なお<a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a>のドキュメントページでも、同じプログラムおよび同じプロファイルを使用しています。</p> +</div> + +<p>以下のスクリーンショットはバブルソート、選択ソート、クイックソートの 3 種類のソートアルゴリズムを比較するプログラムの出力です。整数の乱数を埋めた配列をいくつか生成して、それぞれのアルゴリズムで順にソートします。</p> + +<p>記録内で長い JavaScript マーカーを示している部分を<a href="/ja/docs/Tools/Performance/UI_Tour#Zooming_in">ズームイン</a>しました:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10981/perf-call-tree.png" style="display: block; height: 574px; margin-left: auto; margin-right: auto; width: 1052px;"></p> + +<p>コールツリーは、表形式で結果を表示します。それぞれの行は 1 個以上のサンプルを取得した関数を表し、これらの行は関数内で取得したサンプル数の降順で並べられます。</p> + +<p><em>Samples は、この特定の関数を実行していたときに取得されたサンプル (この関数によって呼び出された他の関数) の数です。</em></p> + +<p><em>Total Time</em> <em>は、記録の選択された部分がカバーする合計時間に基づいて、その数値をミリ秒に変換したものです。これらの数値は、サンプル数とほぼ同じでなければなりません。</em></p> + +<p><em>Total Cost は、記録の選択された部分のサンプルの合計数に対するパーセンテージとしての数値です。</em></p> + +<p><em>Self Time</em> <em>は、その特定の機能で費やされた時間 (その子を除く) として計算されます。これは、キャプチャされたスタックから来ており、この関数は最も近い関数です。</em></p> + +<p><em>Self Cost は、録音の選択された部分のサンプルの合計数に対するパーセンテージとしてセルフタイムから計算されます。</em></p> + +<p>現在のバージョンのコールツリーでは、これらが最も重要な列です。<em>Self Cost </em>が比較的高い関数は、実行に時間がかかり、頻繁に呼び出されるため、最適化の候補となります。</p> + +<div class="note"> +<p><a href="https://developer.mozilla.org/ja/docs/Tools/Performance/Call_Tree$edit#Using_an_inverted_aka_Bottom-Up_Call_Tree">The inverted call tree</a> は、これらの <em>Self Cost </em>値に集中する良い方法です。</p> +</div> + +<p>このスクリーンショットは、私たちがすでに知っていると思われるものを示しています。バブルソートは非常に非効率的なアルゴリズムです。 バブルソートは選択ソートの約6倍、クイックソートの13倍です。</p> + +<h2 id="Walking_up_the_call_tree" name="Walking_up_the_call_tree">コールツリーを渡り歩く</h2> + +<p>各関数名の隣に、展開用の矢印があります。クリックすると、サンプルを取得した関数からルートに向けて、コールツリーを戻るパスを確認できます。例えば、<code>bubbleSort()</code> のエントリを展開します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10983/perf-call-tree-expanded-bubblesort.png" style="display: block; height: 512px; margin-left: auto; margin-right: auto; width: 1054px;"></p> + +<p>コールグラフは以下のとおりであるとわかります:</p> + +<pre>sortAll() + + -> sort() + + -> bubbleSort()</pre> + +<p>ここで <code>sort()</code> の<em>コスト</em> は 1.45% であり、これはリストの後方にある個別の <code>sort()</code> の値と同じであることに注意してください。これは、一部のサンプルが呼び出した関数内ではなく <code>sort()</code> 自身で取得されたことを表します。</p> + +<p>トップレベルへ戻るパスが複数存在することがあります。<code>swap()</code> のエントリを展開してみましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10985/perf-call-tree-expanded-sawp.png" style="display: block; height: 636px; margin-left: auto; margin-right: auto; width: 1052px;"></p> + +<p><code>swap()</code> 内で 253 個のサンプルを取得しました。しかし <code>swap()</code> は 2 つの異なるパスで到達しています。<code>bubbleSort()</code> と <code>selectionSort()</code> が使用しています。<code>swap()</code> の 253 サンプルのうち 252 個は <code>bubbleSort()</code> の枝で、また 1 個だけ <code>selectionSort()</code> の枝で取得したこともわかります。</p> + +<p>これは、私たちが考えていた以上にバブルソートの効率が低いということです! 自身以外に 252 サンプル、または総コストのほぼ 10% を抱えています。</p> + +<p>このような探求によりコールグラフ全体を、関連付けられたサンプル数とともに明らかにできます:</p> + +<pre>sortAll() // 8 + + -> sort() // 37 + + -> bubbleSort() // 1345 + + -> swap() // 252 + + -> selectionSort() // 190 + + -> swap() // 1 + + -> quickSort() // 103 + + -> partition() // 12</pre> + +<h2 id="Platform_data" name="Platform_data">プラットフォームのデータ</h2> + +<p><em>Gecko</em>、<em>入力とイベント</em>などと記載された行がいくつかあるでしょう。これらは内部のブラウザ呼び出しを表します。</p> + +<p>これらも役に立つ情報です。あなたのサイトがブラウザを懸命に働かせている場合、あなたのコードではサンプルが記録されないかもしれませんが、問題は残されています。</p> + +<p>本記事の例では、679 個のサンプルが <em>Gecko </em> に割り当てられており、<code>bubbleSort()</code> に次いで 2 番目に大きいグループです。これを展開してみましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10987/perf-call-tree-expanded-gecko.png" style="display: block; height: 478px; margin-left: auto; margin-right: auto; width: 1050px;"></p> + +<p>これは 614 個のサンプル、または総コストの役 20% が <code>sort()</code> の呼び出しに由来することを表します。<code>sort()</code> のコードを見ると、プラットフォームのデータの高いコストの理由は <code>console.log()</code> を繰り返し呼び出しているためであることが明白でしょう:</p> + +<pre class="brush: js">function sort(unsorted) { + console.log(bubbleSort(unsorted)); + console.log(selectionSort(unsorted)); + console.log(quickSort(unsorted)); +}</pre> + +<p>より効率がよい実装方法を検討することは、間違いなく有益でしょう。</p> + +<p>ここでわかることとして、アイドル時間は <em>Gecko</em> として分類されますので、プロファイル内で JavaScript を実行していない部分は <em>Gecko</em> のサンプルが増えます。これらはサイトのパフォーマンスとは関係がありません。</p> + +<div class="note"> +<p>デフォルトで、コールツリーはプラットフォームのデータを個別の関数に分割しません。これは大量のノイズを加えてしまうことと、Firefox 自体に取り組んでいる人々以外には役立たないと思われるためです。これらの詳細を確認したい場合は、<a href="/ja/docs/Tools/Performance/UI_Tour#Toolbar">設定</a>で "Gecko プラットフォームのデータを表示" にチェックを入れてください。</p> +</div> + +<h2 id="反転されたボトムアップコールツリーを使用する">反転されたボトムアップコールツリーを使用する</h2> + +<p>反転されたコールツリーはすべてのスタックの順序を逆転させ、一番近い関数コールを一番上に置きます。直接的な結果は、これは関数の Self Time 情報に焦点を当てたビューであるということです。 これはコード内のホットスポットを見つけるのに非常に便利なビューです。</p> + +<p>このビューを表示するには、[パフォーマンス]タブの右端にある歯車アイコンをクリックし、<strong>Invert Call Tree</strong> を選択します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16093/performance_menu_invert_call_tree.png" style="border-style: solid; border-width: 1px; display: block; height: 201px; margin: 0 auto; width: 492px;"></p> diff --git a/files/ja/tools/performance/examples/index.html b/files/ja/tools/performance/examples/index.html new file mode 100644 index 0000000000..06fadd2aca --- /dev/null +++ b/files/ja/tools/performance/examples/index.html @@ -0,0 +1,12 @@ +--- +title: Examples +slug: Tools/Performance/Examples +tags: + - TopicStub +translation_of: Tools/Performance/Examples +--- +<div>{{ToolsSidebar}}</div> + +<p>パフォーマンスシナリオとチュートリアルのデモページのリストです。</p> + +<p>{{ ListSubpages ("/ja/docs/Tools/Performance/Examples", 5) }}</p> diff --git a/files/ja/tools/performance/examples/sorting_algorithms_comparison/index.html b/files/ja/tools/performance/examples/sorting_algorithms_comparison/index.html new file mode 100644 index 0000000000..70e8a8f7b5 --- /dev/null +++ b/files/ja/tools/performance/examples/sorting_algorithms_comparison/index.html @@ -0,0 +1,73 @@ +--- +title: ソートアルゴリズムの比較 +slug: Tools/Performance/Examples/Sorting_algorithms_comparison +translation_of: Tools/Performance/Examples/Sorting_algorithms_comparison +--- +<div>{{ToolsSidebar}}</div> + +<p>この記事では、2つのパフォーマンスガイドで使用する簡単なサンプルプログラムについて説明します。<a href="/ja/docs/Tools/Performance/Call_Tree">コールツリー</a>のガイドと<a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a>のガイドです。</p> + +<p>このプログラムは、3つの異なるソートアルゴリズムのパフォーマンスを比較します。</p> + +<ul> + <li>バブルソート</li> + <li>選択ソート</li> + <li>クイックソート</li> +</ul> + +<p>これは以下の機能で構成されています。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong><code>sortAll()</code></strong></td> + <td>トップレベルの関数。 （200回）反復的に配列を生成し、<code>sort()</code>を呼び出します。</td> + </tr> + <tr> + <td><strong><code>sort()</code></strong></td> + <td><code>bubbleSort()</code>、<code>selectionSort()</code>、<code>quickSort()</code>を順に選択し、結果を記録します。</td> + </tr> + <tr> + <td><strong><code>bubbleSort()</code></strong></td> + <td>バブルソートを実装し、ソートされた配列を返します。</td> + </tr> + <tr> + <td><strong><code>selectionSort()</code></strong></td> + <td>選択ソートを実装し、ソートされた配列を返します。</td> + </tr> + <tr> + <td><strong><code>quickSort()</code></strong></td> + <td>クイックソートを実装し、ソートされた配列を返します。</td> + </tr> + <tr> + <td><code><strong>swap()</strong></code></td> + <td><code>bubbleSort()</code>と<code>selectionSort()</code>のヘルパー関数。</td> + </tr> + <tr> + <td><code><strong>partition()</strong></code></td> + <td><code>quickSort()</code>のヘルパー関数。</td> + </tr> + </tbody> +</table> + +<p>コールグラフは次のようになります。</p> + +<pre>sortAll() // (generate random array, then call sort) x 200 + + -> sort() // sort with each algorithm, log the result + + -> bubbleSort() + + -> swap() + + -> selectionSort() + + -> swap() + + -> quickSort() + + -> partition()</pre> + +<p>プログラムのソートアルゴリズムの実装は、<a href="https://github.com/nzakas/computer-science-in-javascript/">https://github.com/nzakas/computer-science-in-javascript/</a>から取得され、MITライセンスで使用されます。</p> + +<p><a href="https://mdn.github.io/performance-scenarios/js-call-tree-1/index.html">ここ</a>でサンプルプログラムを試してみて、<a href="https://github.com/mdn/performance-scenarios">ここ</a>でコードをクローンすることができます（gh-pagesブランチを確認してください）。 <a href="https://github.com/mdn/performance-scenarios/tree/gh-pages/js-call-tree-1/profile">私たちが議論した特定のプロフィールをダウンロードする</a>こともできます。あなたがフォローしたい場合は、パフォーマンスツールにインポートするだけです。 もちろん、独自のプロファイルを生成することもできますが、数字は少し異なります。</p> diff --git a/files/ja/tools/performance/flame_chart/index.html b/files/ja/tools/performance/flame_chart/index.html new file mode 100644 index 0000000000..3a2cf0c069 --- /dev/null +++ b/files/ja/tools/performance/flame_chart/index.html @@ -0,0 +1,103 @@ +--- +title: フレームチャート +slug: Tools/Performance/Flame_Chart +translation_of: Tools/Performance/Flame_Chart +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>フレームチャートはパフォーマンスのプロファイリングを行っている間、ミリ秒ごとにコードの JavaScript スタックの状態を表示します。</p> + +<p>これは記録中の任意の時点でどの関数を実際に実行しているか、またどれだけの期間実行したか、さらにどこから呼び出されたかを知る手段を提供します。</p> +</div> + +<p>呼び出しツリーとフレームチャートはどちらもサイトの JavaScript を分析するために使用します。またどちらも、記録している間定期的に取得する JavaScript エンジンのスタックのサンプルをデータとして使用します。</p> + +<p>しかし、呼び出しツリーは記録全体の合計に対してプログラムのどこでもっとも多くの時間がかかっているかを示すためにこれらのデータを編成するのに対して、フレームチャートは記録中のどこで特定の関数を実行していたかを示すためにこれらのデータを使用します。本質的には、記録中の任意の位置のコールスタックの状態を表示します。</p> + +<p>こちらは、プロファイルの一部分のフレームチャートを示したスクリーンショットです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10989/perf-flame-chart-overview.png" style="display: block; height: 622px; margin-left: auto; margin-right: auto; width: 1676px;"></p> + +<p>始めに<a href="/ja/docs/Tools/Performance/UI_Tour#Recording_overview">記録の概要ペイン</a>で、フレームチャートに表示したい記録の一部分を選択していることがわかるでしょう。フレームチャートは大量のデータを表示しており、見やすい結果を得るためには通常、ズームインが必要です。</p> + +<p>フレームチャートビュー自体は、X 軸に沿って時間を表します。前出のスクリーンショットでは、1435ms から 1465ms の間を表示しています。Y 軸に沿ってその時点のコールスタックに存在する関数を、上にトップレベル、下に葉の関数の順に並べます。関数は区別しやすいように色分けします。</p> + +<p>これは記録中の任意の時点でどの関数を実際に実行しているか、またどれだけの期間実行したか、さらにどこから呼び出されたかを知る手段を提供します。</p> + +<h2 id="Zooming_and_panning" name="Zooming_and_panning">ズームとパン</h2> + +<p>フレームチャートを効果的に使用するため、ナビゲーションできることが必要でしょう。フレームチャートのナビゲーションに使用できる主要な操作が 2 つあります:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>ズーム</strong>: プロファイル全体のうち、フレームチャートに表示する選択範囲を増減します。</td> + <td> + <p>1) フレームチャート上でマウスホイールを上下に回します。</p> + + <p>2) フレームチャート上で、トラックパッドで 2 本の指を上下に動かします。</p> + </td> + </tr> + <tr> + <td><strong>パン</strong>: プロファイル全体内で、選択範囲を左右に動かします。</td> + <td> + <p>1) <a href="/ja/docs/Tools/Performance/UI_Tour#Recording_overview">記録の概要ペイン</a>で、選択範囲をクリック・アンド・ドラッグします。</p> + + <p>2) フレームチャートでクリック・アンド・ドラッグします。</p> + </td> + </tr> + </tbody> +</table> + +<p>{{EmbedYouTube("BzfkBRFucp8")}}</p> + +<h2 id="An_example" name="An_example">例</h2> + +<p>フレームチャートがプログラムの動作をどのように明らかにできるかを見るため、シンプルな例を見ていきましょう。<a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリー</a>のページとで使用したものと同じサンプルを使用します。これは、3 種類の異なるソートアルゴリズムを比較するものです。このプログラムの構造の概要は、<a href="/ja/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">別のページ</a>で説明しています。</p> + +<p>ここでは、呼び出しツリーで使用したものと同じプロファイルのファイルを使用します。呼び出しツリーのページではプロファイル内のプログラム呼び出しグラフと、関連付けられたサンプル数を以下のように明らかにしました:</p> + +<pre>sortAll() // 8 + + -> sort() // 37 + + -> bubbleSort() // 1345 + + -> swap() // 252 + + -> selectionSort() // 190 + + -> swap() // 1 + + -> quickSort() // 103 + + -> partition() // 12</pre> + +<p>始めに、ぷろぐらむがアクティブであった部分の全体を選択します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10991/perf-flame-chart-zoomed-out.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p> + +<p>最上段の紫色の箇所は <code>sortAll()</code> の呼び出しであり、プログラムの始めから終りまで実行されています。その下にあるオリーブグリーン色は、<code>sort()</code> を呼び出しています。さらに下にあるくしの歯のようなものは、それぞれのソートアルゴリズムを実行する呼び出しです。</p> + +<p>ズームしましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10993/perf-flame-chart-zoom-1.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p> + +<p>この部分は約 140 ミリ秒間です。また、<code>sort()</code> が呼び出した関数をより詳しく示しています。<code>sort()</code> のコードは以下のようなものです:</p> + +<pre class="brush: js">function sort(unsorted) { + console.log(bubbleSort(unsorted)); + console.log(selectionSort(unsorted)); + console.log(quickSort(unsorted)); +}</pre> + +<p>"bubb..." と記載されたオリーブグリーン色のマーカーは、おそらく <code>bubbleSort()</code> です。緑色のマーカーは、おそらく別のソートアルゴリズムです。ひと目見ただけで、バブルソートのブロックが他のアルゴリズムより幅が広い (存続時間が長い) ことがわかります。</p> + +<p>また、<code>bubbleSort()</code> から呼ばれている関数 (紫色) がいくつかあることもわかります。</p> + +<p>もう一度ズームしましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10995/perf-flame-chart-zoom-2.png" style="display: block; height: 348px; margin-left: auto; margin-right: auto; width: 1212px;"></p> + +<p>この部分は約 20 ミリ秒間です。<code>bubbleSort()</code> の下にある紫色のマーカーは、<code>swap()</code> の呼び出しであることがわかります。それらをすべて数えると 253 個あることが、呼び出しツリービューで示されています。ズームした範囲内ではすべて <code>bubbleSort()</code> の下にありますが、呼び出しツリービューによればプロファイル内で 1 個は <code>selectionSort()</code> の下にあります。</p> + +<p>また、緑色のマーカーのうち 2 個は <code>selectionSort()</code> および <code>quickSort()</code> であることがわかる一方で、ソート関数の呼び出しの合間にプラットフォーム (Gecko) のコードを呼び出していることもわかります。これは、<code>sort()</code> 内で <code>console.log()</code> を呼び出していることに由来する可能性が高いと考えられます。</p> diff --git a/files/ja/tools/performance/frame_rate/index.html b/files/ja/tools/performance/frame_rate/index.html new file mode 100644 index 0000000000..bbd66f03d0 --- /dev/null +++ b/files/ja/tools/performance/frame_rate/index.html @@ -0,0 +1,58 @@ +--- +title: フレームレート +slug: Tools/Performance/Frame_rate +translation_of: Tools/Performance/Frame_rate +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>フレームレートは、Web サイトの応答性を測定したものです。低い、あるいは不安定なフレームレートによりサイトの応答性が低い、あるいはジャンキーな状態になり、ユーザエクスペリエンスを損ないます。</p> + +<p><strong>60fps のフレームレートがなめらかなパフォーマンスの目標値であり、あるイベントに対して必要なすべての更新に与えられた時間は 16.7 ミリ秒です。</strong></p> + +<p>パフォーマンスツールでフレームレートのグラフは、記録していた間のフレームレートを表示します。サイトのどこに問題があると思われるかを迅速に示して、より深く分析するために他のツールを使用できるようにします。</p> +</div> + +<h2 id="Frame_rate_and_responsiveness" name="Frame_rate_and_responsiveness">フレームレートと応答性</h2> + +<p>フレームレートは、ビデオデバイスが生成できる画像 (またはフレーム) のペースです。これは映画やゲームで特に知られていますが、現在は Web サイトや Web アプリのパフォーマンス測定として広く使用されます。</p> + +<p>Web のパフォーマンスにおいて、フレームにはブラウザがスクリーンを更新および再描画するために必要な作業が含まれます。フレームレートは、アニメーションに対してもっとも明らかな効用があります。フレームレートが低すぎるとアニメーションがぎこちない動きになり、フレームレートが高ければスムーズになります。一方でユーザと対話することから、サイトの応答性の一般的な指標としてもフレームレートは有用です。</p> + +<p>例えばページ上のある要素にマウスポインタを動かすと要素の外見を変える JavaScript が実行されてリフローや再描画が発生する場合、すべての作業をフレーム内で完了させることが必要です。ブラウザがフレームを処理するのにかかる時間が長すぎると、ブラウザが一時的に応答しなくなった (ジャンキー) ように見えるでしょう。</p> + +<p>同様に、ページをスクロールすると多くの複雑なページ更新が発生して、許容できるフレームレートをブラウザが維持できない場合、スクロールが遅くなったりときどきフリーズするように見えたりするかもしれません。</p> + +<p>一般的に高く安定したフレームレートにより、ユーザとサイトの対話はより快適かつ魅力的になるでしょう。</p> + +<div class="note"> +<p>60fps のフレームレートがなめらかなパフォーマンスの目標値と考えられており、あるイベントに対して同時に必要なすべての更新に与えられた時間は 16.7 ミリ秒です。</p> + +<p>しかし、安定性は特に重要です。60fps を実現できない場合は低いフレームレートを安定的に実現して、サイトのフリーズをもたらすフレームレートの急な落ち込みを避けるとよいでしょう。</p> +</div> + +<h2 id="Frame_rate_graph" name="Frame_rate_graph">フレームレートのグラフ</h2> + +<p>フレームレートのグラフは、パフォーマンスツールの<a href="/ja/docs/Tools/Performance/UI_Tour#Recording_overview">記録の概要</a>の部分にあります。これはブラウザがフレームの処理を終えたときのタイムスタンプを取得して、記録していた期間のフレームレートを追跡するために使用します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11025/perf-frame-rate.png" style="display: block; height: 66px; margin-left: auto; margin-right: auto; width: 900px;">X 軸はプロファイルを採取した期間の経過時間です。また最大フレームレート、平均フレームレート、最小フレームレートを注釈として表示します。</p> + +<h2 id="Using_the_frame_rate_graph" name="Using_the_frame_rate_graph">フレームレートのグラフを使用する</h2> + +<p>フレームレートのグラフの大きな価値は、<a href="/ja/docs/Tools/Web_Console">Web コンソール</a>と同様に、サイトのどこに問題があると思われるかを迅速に示して、より深く分析するために他のツールを使用できるようにすることです。例えば、以下にパフォーマンスツールのスクリーンショットを示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11023/perf-fr-waterfall.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>平均フレームレートはおおむね良好な値ですが、フレームレートが数十ミリ秒間落ち込むときが 3 か所あります。これはきっと、ページで実行しているアニメーションが目立ってぎこちない状況を引き起こすでしょう。</p> + +<p>フレームレートのグラフは、上部にある<a href="/ja/docs/Tools/Performance/UI_Tour#Waterfall_overview">ウォーターフォールの概要</a>と直接的に関連性があります。フレームレートが落ち込んでいる始めの 2 か所は橙色のバーと関連性があり、これは JavaScript の実行に時間をかけていることを示します。</p> + +<p>落ち込んでいる部分のひとつを選択すると、下部にあるメインの<a href="/ja/docs/Tools/Performance/Waterfall">ウォーターフォールビュー</a>をその部分だけに拡大表示して、問題を起こしている機能を知ることができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11027/perf-zoom.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>click イベントで実行される JavaScript 関数が、メインスレッドを 170 ミリ秒間ブロックしています。</p> + +<p>どの関数でしょう? この時点のコールスタックを見るため、<a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a>に切り替えてください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11021/perf-fr-flame-chart.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>問題を起こしている関数は <code>doPointlessComputations()</code> であり、"main.js" で定義されています。これを修正するには、関数を分割して部品を <code><a href="/ja/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code> で実行するか、関数全体を <a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">Worker</a> で実行します。<a href="/ja/docs/Tools/Performance/Scenarios/Intensive_JavaScript">集約的な JavaScript</a> の記事では、長く実行される同期式の JavaScript が引き起こす応答性の問題を解決するために、本記事のような手段をどのように利用できるかを説明します。</p> diff --git a/files/ja/tools/performance/how_to/index.html b/files/ja/tools/performance/how_to/index.html new file mode 100644 index 0000000000..ff4d540ffe --- /dev/null +++ b/files/ja/tools/performance/how_to/index.html @@ -0,0 +1,62 @@ +--- +title: 操作手順 +slug: Tools/Performance/How_to +translation_of: Tools/Performance/How_to +--- +<div>{{ToolsSidebar}}</div><h2 id="Open_the_Performance_tools" name="Open_the_Performance_tools">パフォーマンスツールを開く</h2> + +<p>パフォーマンスツールを開く方法は以下のとおりです:</p> + +<ul> + <li>Shift + F5 を押下する</li> + <li>Firefox メニューの Web 開発サブメニュー (メニューバーを表示している場合や OS X ではツールメニュー) で "パフォーマンス" を選択する</li> + <li>ツールバーに Web 開発ツールボタンがある場合は、ボタンを押して "パフォーマンス" を選択する:<img alt="" src="https://mdn.mozillademos.org/files/10997/devtools-button.png" style="height: 76px; width: 728px;"></li> +</ul> + +<h2 id="Record_a_profile" name="Record_a_profile">プロファイルを記録する</h2> + +<p>記録ペインでストップウォッチのアイコンを押下すると、新しい記録を開始します。もう一度押下すると、記録を終了します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10999/perf-start-stop-recording.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 744px;"></p> + +<p><code><a href="/ja/docs/Web/API/Console/profile">console.profile()</a></code> や <code><a href="/ja/docs/Web/API/Console/profileEnd">console.profileEnd()</a></code> を使用して、Web コンソールから記録を開始および終了することもできます。</p> + +<h2 id="Save_a_profile" name="Save_a_profile">プロファイルを保存する</h2> + +<p>記録ペインで "保存" と記載されたリンクをクリックすると、プロファイルを保存します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11001/perf-howto-save.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Load_a_profile" name="Load_a_profile">プロファイルを読み込む</h2> + +<p>"インポート..." をクリックしてファイルを選択すると、プロファイルを読み込みます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11005/perf-import.png" style="display: block; height: 622px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Clear_all_loaded_profiles" name="Clear_all_loaded_profiles">すべてのプロファイルを消去する</h2> + +<p>"消去" をクリックすると、すべての読み込み済みプロファイルを消去します。</p> + +<div class="note"> +<p>これを行うと、すべての未保存プロファイルを失います。</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11007/perf-clear.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Select_a_tool" name="Select_a_tool">ツールを選択する</h2> + +<p>ツールバーのボタンを使用して<a href="/ja/docs/Tools/Performance/Waterfall">ウォーターフォール</a>、<a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリー</a>、<a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a>を切り替えます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11009/perf-switch-tool.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Configure_markers_displayed" name="Configure_markers_displayed">表示するマーカーを設定する</h2> + +<p>ツールバーのボタンを使用して、<a href="/ja/docs/Tools/Performance/Waterfall">ウォーターフォール</a>でどのマーカーを表示するかを設定できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11011/perf-marker-filter.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> + +<h2 id="Zoom_in" name="Zoom_in">拡大</h2> + +<p>記録の概要で一部分を選択すると、その部分を拡大表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11013/perf-zoom.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p> diff --git a/files/ja/tools/performance/index.html b/files/ja/tools/performance/index.html new file mode 100644 index 0000000000..8abebb675e --- /dev/null +++ b/files/ja/tools/performance/index.html @@ -0,0 +1,80 @@ +--- +title: パフォーマンス +slug: Tools/Performance +translation_of: Tools/Performance +--- +<div>{{ToolsSidebar}}</div><p>パフォーマンスツールは、サイトの一般的な応答性、JavaScript やレイアウトのパフォーマンスを知ることができるツールです。パフォーマンスツールを使用してあなたのサイトで、ある期間の記録やプロファイルを作成できます。記録後は、プロファイル内でサイトをレンダリングするためにブラウザーが行ったことの<a href="/ja/docs/Tools/Performance/UI_Tour#Waterfall_overview">概要</a>や、プロファイル内の<a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a>を表示します。</p> + +<p>プロファイルのさまざまな側面を詳しく調査するために、4 つのサブツールを使用できます:</p> + +<ul> + <li><a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a>はレイアウトの実行、JavaScript の実行、再描画、ガベージコレクションといった、ブラウザーが実行したさまざまな操作を明らかにします。</li> + <li><a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリー</a>は、ブラウザーがもっとも多くの時間を費やした JavaScript 関数を明らかにします。</li> + <li><a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a>は、記録全体の JavaScript コールスタックを明らかにします。</li> + <li><a href="/ja/docs/Tools/Performance/Allocations">メモリ割り当て</a>ビューは、記録の中でコードが実行したヒープ割り当てを表示します。</li> +</ul> + +<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> + +<hr> +<h2 id="Getting_started" name="Getting_started">はじめに</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/docs/Tools/Performance/UI_Tour">UI ツアー</a></dt> + <dd>パフォーマンスツールについてひととおり理解するために、UI のクイックツアーを用意しました。</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ja/docs/Tools/Performance/How_to">操作手順</a></dt> + <dd>基本操作: ツールを開く、記録を作成・保存・読み込み・設定する</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Components_of_the_Performance_tool" name="Components_of_the_Performance_tool">パフォーマンスツールのコンポーネント</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a></dt> + <dd>サイトの全体的な応答性を理解します。</dd> + <dt><a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリー</a></dt> + <dd>サイトの JavaScript のボトルネックを発見します。</dd> + <dt><a href="/ja/docs/Tools/Performance/Allocations">メモリ割り当て</a></dt> + <dd>記録の中でコードが実施したメモリ割り当てを表示します。</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a></dt> + <dd>サイトとの対話として、ブラウザーが実行した作業を理解します。</dd> + <dt><a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a></dt> + <dd>記録全体で、どの JavaScript 関数をいつ実行したかを明らかにします。</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Scenarios" name="Scenarios">シナリオ</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/docs/Tools/Performance/Scenarios/Animating_CSS_properties">CSS プロパティのアニメーション</a></dt> + <dd>ブラウザーがどのようにページを更新するか、およびさまざまな CSS プロパティのアニメーションがパフォーマンスにどのような影響を与えるかを、タイムラインを使用して理解します。</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ja/docs/Tools/Performance/Scenarios/Intensive_JavaScript">集約的な JavaScript</a></dt> + <dd>長時間実行される JavaScript によって引き起こされるパフォーマンスの問題、およびこのような状況で Worker がどのように役立つかを明らかにするために、フレームチャートとタイムラインを使用します。</dd> +</dl> +</div> +</div> diff --git a/files/ja/tools/performance/profiler_walkthrough/index.html b/files/ja/tools/performance/profiler_walkthrough/index.html new file mode 100644 index 0000000000..35e36bc3a9 --- /dev/null +++ b/files/ja/tools/performance/profiler_walkthrough/index.html @@ -0,0 +1,113 @@ +--- +title: プロファイラのチュートリアル +slug: Tools/Performance/Profiler_walkthrough +translation_of: Tools/Performance/Call_Tree +--- +<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/performance/scenarios/animating_css_properties/index.html b/files/ja/tools/performance/scenarios/animating_css_properties/index.html new file mode 100644 index 0000000000..106a08aecc --- /dev/null +++ b/files/ja/tools/performance/scenarios/animating_css_properties/index.html @@ -0,0 +1,156 @@ +--- +title: CSS プロパティのアニメーション +slug: Tools/Performance/Scenarios/Animating_CSS_properties +translation_of: Tools/Performance/Scenarios/Animating_CSS_properties +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>CSS プロパティのアニメーションにかかるパフォーマンスのコストは、プロパティにより異なります。また、高コストな CSS プロパティのアニメーションは、ブラウザがスムーズなフレームレートを確保しようと努力するために <a href="/ja/docs/Glossary/Jank">jank</a> が発生する場合があります。</p> + +<p><a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a>や<a href="/ja/docs/Tools/Performance/Waterfall">ウォーターフォール</a>は CSS アニメーションにおいてブラウザが何を行っているかを明らかにして、パフォーマンスの問題の診断を支援します。</p> +</div> + +<p><a href="/ja/docs/Web/Guide/CSS/Using_CSS_animations">CSS アニメーション</a>では複数の<a href="/ja/docs/Web/CSS/@keyframes">キーフレーム</a>を指定して、それぞれのキーフレームではアニメーションの特定の段階における要素の外見を定義するために CSS を使用します。ブラウザは、それぞれのキーフレームから次のキーフレームへ遷移することでアニメーションを作成します。</p> + +<p>JavaScript を使用して要素のアニメーションを行うのに比べて、CSS アニメーションは簡単に作れます。またブラウザはいつフレームを描画するかをより制御でき、また必要に応じてフレームを破棄できますので、パフォーマンスが高くなります。</p> + +<p>しかし CSS プロパティを変更するためのパフォーマンスコストは、プロパティにより異なります。高コストな CSS プロパティのアニメーションは、ブラウザがスムーズなフレームレートを確保しようと努力するために <a href="/ja/docs/Glossary/Jank">jank</a> が発生する場合があります。</p> + +<h2 id="The_CSS_rendering_waterfall" name="The_CSS_rendering_waterfall">CSS レンダリングのウォーターフォール</h2> + +<p>CSS が変更されたときにブラウザがページを更新するためのプロセスは、以下のステップで構成されるウォーターフォールで説明できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10821/css-rendering-waterfall.png" style="display: block; height: 203px; margin-left: auto; margin-right: auto; width: 546px;"></p> + +<ol> + <li><strong>スタイルを再計算</strong>: 要素の CSS プロパティが変更されるたびに、ブラウザは算出スタイルを再計算しなければなりません。</li> + <li><strong>レイアウト</strong>: 続いて、要素の位置や形状を計算するために算出スタイルを使用します。この操作は "レイアウト" と名付けられていますが、"リフロー" とも呼ばれます。</li> + <li><strong>描画</strong>: そして、ブラウザはスクリーンに要素を再描画しなければなりません。最後のステップはこの流れで示していません。ページは複数のレイヤーに分割され、それぞれを独立して描画した後に、"コンポジション" と呼ばれるプロセスで合成されます。</li> +</ol> + +<p>この流れが完了しなければスクリーンを更新できませんので、ひとつのフレーム内に一連の操作を収めなければなりません。毎秒 60 フレームが、アニメーションがスムーズに見えるレートとして広く受け入れられています。毎秒 60 フレームのレートのために、ブラウザが一連の操作を実行する時間として 16.7 ミリ秒が与えられます。</p> + +<h2 id="CSS_property_cost" name="CSS_property_cost">CSS プロパティのコスト</h2> + +<p>レンダリングのウォーターフォールにおいて、一部のプロパティは他のプロパティに比べて特にコストが高くなります:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">プロパティの種類</th> + <th scope="col">コスト</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td>要素の<em>形状</em>や<em>位置</em>に影響を与えるプロパティ。これらはスタイルの再計算、レイアウト、再描画を発生させる。</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10825/layout.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td> + <td> + <p><code><a href="/ja/docs/Web/CSS/left">left</a></code><br> + <code><a href="/ja/docs/Web/CSS/max-width">max-width</a></code><br> + <code><a href="/ja/docs/Web/CSS/border-width">border-width</a></code><br> + <code><a href="/ja/docs/Web/CSS/margin-left">margin-left</a></code><br> + <code><a href="/ja/docs/Web/CSS/font-size">font-size</a></code></p> + </td> + </tr> + <tr> + <td> + <p>形状や位置への影響はないが、個別のレイヤーでは描画されないプロパティ。レイアウトは発生しない。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td> + <td> + <p><code><a href="/ja/docs/Web/CSS/color">color</a></code></p> + </td> + </tr> + <tr> + <td>個別のレイヤーで描画されるプロパティは、再描画が発生しない。更新はコンポジションで制御される。</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10839/paint-faint.png" style="height: 26px; width: 123px;"></td> + <td><code><a href="/ja/docs/Web/CSS/transform">transform</a></code><br> + <code><a href="/ja/docs/Web/CSS/opacity">opacity</a></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><a href="http://csstriggers.com/">CSS Triggers</a> の Web サイトで、各 CSS プロパティでどれだけのウォーターフォールが発生するかをまとめています。WebKit 固有の情報ですが、ほとんどはすべての最新ブラウザで同じです。</p> +</div> + +<h2 id="An_example.3A_margin_versus_transform" name="An_example.3A_margin_versus_transform">例: margin と transform</h2> + +<p>本章では、<a href="/ja/docs/Tools/Performance/Waterfall">ウォーターフォール</a>が <code><a href="/ja/docs/Web/CSS/margin">margin</a></code> を使用したアニメーションと <code><a href="/ja/docs/Web/CSS/transform">transform</a></code> を使用したアニメーションの違いを、どのように明らかにできるかを示します。</p> + +<p>このシナリオは、<code>margin</code> を使用したアニメーションは例外なく悪いアイデアであると納得させる意図はありません。サイトを描画するためにブラウザが何を行っているかをツールがどのようにして明らかにするか、およびパフォーマンスの問題の診断や解決のためにその情報をどのように適用できるかを示すものです。</p> + +<p>自身でも試してみたい場合は、デモ Web サイトが<a href="http://mdn.github.io/performance-scenarios/animation-transform-margin/index.html">こちら</a>にあります。サンプルは以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11029/css-animations-demo.png" style="display: block; height: 677px; margin-left: auto; margin-right: auto; width: 1000px;">ここには 2 つのコントロールがあります。アニメーションを開始/停止するボタンと、<code>margin</code> のアニメーションまたは <code>transform</code> のアニメーションを選択するラジオボタンです。</p> + +<p>ページ上には複数の要素を置いており、それらに <code><a href="/ja/docs/Web/CSS/linear-gradient">linear-gradient</a></code> の背景と <code><a href="/ja/docs/Web/CSS/box-shadow">box-shadow</a></code> を追加しています。これは、双方のプロパティは描画のコストが比較的高いためです。</p> + +<p>動画版のウォークスルーも用意しています:</p> + +<p>{{EmbedYouTube("Tvu6_j8Qzfk")}}</p> + +<h3 id="Animating_using_margin" name="Animating_using_margin">margin を使用したアニメーション</h3> + +<p>"Use margin" を選択したままでアニメーションを開始して、パフォーマンスツールを開いて記録を始めましょう。記録時間は数秒だけでかまいません。</p> + +<p>最初の記録を開きます。どのような結果になるかはマシンやシステム負荷に大きく依存しますが、おそらく以下のようになるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10853/margin-recording.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>ここでは 3 つの視点で示しています: (a) ウォーターフォールの概要、(b) フレームレート、(c) タイムラインの詳細 です。</p> + +<h4 id="Waterfall_overview" name="Waterfall_overview">ウォーターフォールの概要</h4> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10857/margin-timeline-overview.png" style="display: block; height: 58px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>これは、<a href="/ja/docs/Tools/Performance/Waterfall">ウォーターフォール</a>をコンパクトに表示したビューです。</p> + +<p>緑色が圧倒的に多いことは、<a href="/ja/docs/Tools/Performance/Timeline#timeline-color-coding">描画に多くの時間を費やしている</a>ことを示しています。</p> + +<p> </p> + +<h4 id="Frame_rate" name="Frame_rate">フレームレート</h4> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10859/margin-frame-rate.png" style="display: block; height: 64px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>これは、<a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a>を表示します。ここでは平均フレームレートが 46.67fps であり、目標の 60fps をかなり下回っています。さらに悪いことにフレームレートが何度も 10 から 20 fps 台に低下しており、グラフがぎざぎざになっています。特にユーザとの対話が加わると、スムーズなアニメーションではなくなるでしょう。</p> + +<h4 id="Waterfall" name="Waterfall">ウォーターフォール</h4> + +<p>記録表示領域の残りの部分で、ウォーターフォールを表示します。ウォーターフォールをスクロールすると、以下のようなパターンが見られるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10861/margin-timeline.png" style="display: block; height: 532px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>これは<a href="/ja/docs/Tools/Performance/Scenarios/Animating_CSS_properties#The_CSS_rendering_waterfall">レンダリングのウォーターフォール</a>を表します。それぞれのアニメーションフレームで、すべての要素のスタイルを再計算してからレイアウト処理を 1 回実施して、再描画を行います。</p> + +<p>ここでは、描画が特にパフォーマンスへ悪影響を与えていることがわかります。前出のスクリーンショットでは描画処理をハイライトしており、この処理は 13.11 ミリ秒かかっていることが右側のボックスでわかります。すべての処理に割り当てられた時間は 16.7 ミリ秒しかありませんので、高いフレームレートを維持できないのは驚くことではありません。</p> + +<p>ここで<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">インスペクタを使用して</a> box-shadow を削除すると、描画時間にどのような影響があるかを実験できます。しかし次は、<code><a href="/ja/docs/Web/CSS/margin">margin</a></code> の代わりに <code><a href="/ja/docs/Web/CSS/transform">transform</a></code> を使用して高コストな描画を完全になくす方法を見ていきます。</p> + +<h3 id="Animating_using_transform" name="Animating_using_transform">transform を使用したアニメーション</h3> + +<p>Web ページのラジオボタンを "Use transform" に切り替えて、新たに記録してみましょう。すると、以下のようになるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10863/transform-recording.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h4 id="Waterfall_overview_2" name="Waterfall_overview_2">ウォーターフォールの概要</h4> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10869/transform-timeline-overview.png" style="display: block; height: 57px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p><a href="/ja/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview">margin を使用した場合</a>と比べて緑色がとても少なく、また桃色がとても多くなっています。桃色は<a href="/ja/docs/Tools/Performance/Waterfall#timeline-color-coding">レイアウトやスタイルの再計算</a>でしょう。</p> + +<h4 id="Frame_rate_2" name="Frame_rate_2">フレームレート</h4> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10865/transform-frame-rate.png" style="display: block; height: 62px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p><a href="/ja/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Frame_rate">margin を使用した場合</a>と比べて、良好であるように見えます。平均値は 60fps に近く、また開始付近で 1 回落ち込んでいることを除けば高いフレームレートを維持しています。</p> + +<h4 id="Waterfall_2" name="Waterfall_2">ウォーターフォール</h4> + +<p>タイムラインビューで、フレームレートが向上した理由が示されています。<a href="/ja/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall">margin を使用した場合</a>と比べて、レイアウトや (この例ではさらに重要な) 描画に少しも時間を費やしていません:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10867/transform-timeline.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>この例では <code>transform</code> を使用することでサイトのパフォーマンスが著しく向上しており、またどのようにおよびなぜ向上したかを、パフォーマンスツールで示すことができました。</p> diff --git a/files/ja/tools/performance/scenarios/index.html b/files/ja/tools/performance/scenarios/index.html new file mode 100644 index 0000000000..0b1a33b018 --- /dev/null +++ b/files/ja/tools/performance/scenarios/index.html @@ -0,0 +1,10 @@ +--- +title: シナリオ +slug: Tools/Performance/Scenarios +tags: + - TopicStub +translation_of: Tools/Performance/Scenarios +--- +<div>{{ToolsSidebar}}</div> + +<p>パフォーマンスシナリオ</p> diff --git a/files/ja/tools/performance/scenarios/intensive_javascript/index.html b/files/ja/tools/performance/scenarios/intensive_javascript/index.html new file mode 100644 index 0000000000..34cc1db672 --- /dev/null +++ b/files/ja/tools/performance/scenarios/intensive_javascript/index.html @@ -0,0 +1,231 @@ +--- +title: 集約的な JavaScript +slug: Tools/Performance/Scenarios/Intensive_JavaScript +translation_of: Tools/Performance/Scenarios/Intensive_JavaScript +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>デフォルトでブラウザはレイアウト、リフロー、ガベージコレクションだけでなく、ページ内のすべての JavaScript もひとつのスレッドで実行します。これは長い間実行する JavaScript がスレッドをブロックして、ページの不応答やユーザエクスペリエンスの悪化を招くおそれがあるということです。</p> + +<p><a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a>および<a href="/ja/docs/Tools/Performance/Waterfall">ウォーターフォール</a>ツールを使用して、いつ JavaScript がパフォーマンスの問題を起こしているかを知る、および特に注意が必要な関数を選び出すことができます。</p> + +<p>本記事では長い間実行する JavaScript が応答性の問題を起こしているサンプルサイトを使用して、問題を修正するために 2 種類の方法を適用していきます。ひとつは長い間実行する JavaScript を複数の部品に分けて、それらのスケジューリングに <code><a href="/ja/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code> を使用する方法、もうひとつは <a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">web worker</a> を使用して関数全体を別のスレッドに分ける方法です。</p> +</div> + +<p>自身でも試してみたい場合は、デモ Web サイトが<a class="external external-icon" href="http://mdn.github.io/performance-scenarios/js-worker/index.html">こちら</a>にあります。</p> + +<p>動画版のウォークスルーも用意しています:</p> + +<p>{{EmbedYouTube("Pcc6jQX6JDI")}}</p> + +<p>デモ Web サイトは以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11031/js-worker-demo.png" style="display: block; height: 677px; margin-left: auto; margin-right: auto; width: 1000px;">ここには 3 つのコントロールがあります:</p> + +<ul> + <li>JavaScript の実行方法を制御するラジオボタン。ブロックが発生するひとつの操作をメインスレッドで実行する、<code>requestAnimationFrame()</code> を使用して小規模な操作の集まりをメインスレッドで実行する、Worker を使用して別のスレッドで実行する。</li> + <li>"Do pointless computations!" と記載された、JavaScript を実行するボタン。</li> + <li>CSS アニメーションを開始・終了するボタン。これはブラウザに、バックグラウンドで実行するタスクを与えます。</li> +</ul> + +<p>ラジオボタンで "Use blocking call in main thread" を選択して、記録を始めましょう:</p> + +<ul> + <li>"Start animations" ボタンを押します。</li> + <li>パフォーマンスプロファイルの記録を始めます。</li> + <li>"Do pointless computations!" ボタンを 2～3 回押します。</li> + <li>プロファイルの記録を終了します。</li> +</ul> + +<p>どのような結果になるかはマシンにより異なりますが、おそらく以下のようになるでしょう:</p> + +<p><a id="js-blocking-overview" name="js-blocking-overview"><img alt="" src="https://mdn.mozillademos.org/files/10891/perf-js-blocking-overview.png" style="display: block; height: 113px; margin-left: auto; margin-right: auto; width: 800px;"></a></p> + +<p>この画像の上半分は<a href="/ja/docs/Tools/Performance/UI_Tour#Waterfall_overview">ウォーターフォールの概要</a>です。これは<a href="/ja/docs/Tools/Performance/Waterfall">ウォーターフォール</a>をコンパクトに表示したビューであり、記録中にブラウザが行った処理は何かを示します。<a href="/ja/docs/Tools/Performance/Waterfall#Markers">桃色はほとんどの場合 CSS の再計算、一部はリフローです</a>。これは、プロファイルで終始実行している CSS アニメーションです。また連続したの橙色のブロックが 3 つありますが、これは JavaScript を実行していることを表します。それぞれ、ボタンを押したときです。</p> + +<p>下半分はタイムラインの概要と時系列が合わせられており、<a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a>を示しています。記録中のほとんどはフレームレートが良好ですが、ボタンを押すたびに大きく落ち込んでいます。</p> + +<p>それら 3 か所のうちひとつを選択して、メインのウォーターフォールビューで詳しく見ることができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10895/perf-js-blocking-waterfall.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>ここではボタンを押したときに、ブラウザが JavaScript の関数をひとつまたは連続的に実行して、メインスレッドを 71.73 ミリ秒、言い換えるとフレーム 4 つ分の時間ブロックしています。</p> + +<p>どの関数でしょう? <a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a>ビューに切り替えると、それがわかります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10893/perf-js-blocking-flame-chart.png" style="display: block; height: 230px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>これは、その時点で実行している JS のコールスタックを表示します。スタックの一番上は <code>calculatePrimes()</code> という関数であり、ファイル名や行番号がわかります。以下に掲載したコードで、直近の呼び出し元を見てみましょう:</p> + +<pre class="brush: js">const iterations = 50; +const multiplier = 1000000000; + +function calculatePrimes(iterations, multiplier) { + var primes = []; + for (var i = 0; i < iterations; i++) { + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + return primes; +} + +function doPointlessComputationsWithBlocking() { + var primes = calculatePrimes(iterations, multiplier); + pointlessComputationsButton.disabled = false; + console.log(primes); +} +</pre> + +<p>ここではかなり大きな数に対して、(とても非効率な) 素数の判定を 50 回行っています。</p> + +<h2 id="Using_requestAnimationFrame" name="Using_requestAnimationFrame">requestAnimationFrame を使用する</h2> + +<p>この問題を解決するための最初の試みとして、関数をいくつかの自己充足した小さな関数に分割して、<code><a href="/ja/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> を使用してそれらをスケジューリングします。</p> + +<p><code>requestAnimationFrame()</code> は与えられた関数を、各フレームで再描画を行う直前に実行するようブラウザに指示します。それぞれの関数が適度に小さければ、ブラウザは実行時間を、フレーム間に与えられた時間内に収めることができるでしょう。</p> + +<p><code>calculatePrimes()</code> の分割はとてもシンプルです。別の関数で、それぞれの値が素数であるかの計算を行います:</p> + +<pre class="brush: js">function doPointlessComputationsWithRequestAnimationFrame() { + + function testCandidate(index) { + // finishing condition + if (index == iterations) { + console.log(primes); + pointlessComputationsButton.disabled = false; + return; + } + // test this number + var candidate = index * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + // schedule the next + var testFunction = testCandidate.bind(this, index + 1); + window.requestAnimationFrame(testFunction); + } + + var primes = []; + var testFunction = testCandidate.bind(this, 0); + window.requestAnimationFrame(testFunction); +}</pre> + +<p>こちらのバージョンを試してみましょう。"Use requestAnimationFrame" と記載されたラジオボタンを選択して、新たにプロファイルを記録します。すると、記録は以下のようになるでしょう:</p> + +<p><a id="js-raf-overview" name="js-raf-overview"><img alt="" src="https://mdn.mozillademos.org/files/10897/perf-js-raf-overview.png" style="display: block; height: 112px; margin-left: auto; margin-right: auto; width: 800px;"></a></p> + +<p>これはまさに、私たちが期待していたものです。<a href="#js-blocking-overview">一続きの橙色のブロック</a>に代わり、ボタンを押すたびにとても短い橙色のブロックがたくさん並んでいます。橙色のブロックは 1 個ずつのフレームに分かれて現れており、またそれぞれのブロックが、<code>requestAnimationFrame()</code> から呼び出された関数 1 個を表しています。なお、このプロファイルではボタンを 2 回しか押していないことに注意してください。</p> + +<p>関数の呼び出しは CSS アニメーションに由来する桃色のブロックの間に挟み込まれており、またそれぞれの関数は、全体のフレームレートを落とすことなく処理できるほど十分に小さくなっています。</p> + +<p>ここでは <code>requestAnimationFrame</code> が応答性の問題の解決策として機能しましたが、潜在的な問題点が 2 つあります:</p> + +<ul> + <li>長い間実行する関数を、個別の自己充足した関数に分割することが難しい場合があります。今回のシンプルなケースでも、より複雑なコードになりました。</li> + <li>分割したバージョンでは、実行時間が長くなります。実は、処理にどれだけかかるかをかなり正確に言うことができます。処理は 50 回繰り返しており、またブラウザは 1 秒間に約 60 個のフレームを生成します。よって、すべての計算を実行するためにはほぼ 1 秒かかり、これはユーザエクスペリエンスやプロファイルから明らかになります。</li> +</ul> + +<h2 id="Using_web_workers" name="Using_web_workers">Web Worker を使用する</h2> + +<p>ここでは、Web Worker を使用して問題を解決します。Web Worker を使用すると、別のスレッドで JavaScript を実行できます。メインスレッドと Worker スレッドは互いに直接呼び出すことはできませんが、非同期メッセージ API を使用して通信できます。</p> + +<p>メインスレッドのコードは以下のようになります:</p> + +<pre class="brush: js">const iterations = 50; +const multiplier = 1000000000; + +var worker = new Worker("js/calculate.js"); + +function doPointlessComputationsInWorker() { + + function handleWorkerCompletion(message) { + if (message.data.command == "done") { + pointlessComputationsButton.disabled = false; + console.log(message.data.primes); + worker.removeEventListener("message", handleWorkerCompletion); + } + } + + worker.addEventListener("message", handleWorkerCompletion, false); + + worker.postMessage({ + "multiplier": multiplier, + "iterations": iterations + }); +}</pre> + +<p>元のコードと比べたときの主な違いは、以下のものが必要であることです:</p> + +<ul> + <li>Worker を作成する</li> + <li>計算の準備ができたときに、Worker へメッセージを送信する</li> + <li>"done" メッセージをリッスンする。これは、Worker が完了したことを示すメッセージです。</li> +</ul> + +<p>また、新たに "calculate.js" ファイルが必要であり、こちらは以下のようになります:</p> + +<pre class="brush: js">self.addEventListener("message", go); + +function go(message) { + var iterations = message.data.iterations; + var multiplier = message.data.multiplier; + primes = calculatePrimes(iterations, multiplier); + + self.postMessage({ + "command":"done", + "primes": primes + }); +} + +function calculatePrimes(iterations, multiplier) { + var primes = []; + for (var i = 0; i < iterations; i++) { + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + return primes; +}</pre> + +<p>Worker では処理の開始を指示するメッセージをリッスンする、および処理が完了したときに "done" メッセージを送ることが必要です。実際に計算を行っている部分のコードは、最初のバージョンのコードと完全に同じです。</p> + +<p>このバージョンはどのように実行されるのでしょう? ラジオボタンを "Use a worker" に切り替えて、新たにプロファイルを記録してください。結果は以下のようになるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10899/perf-js-worker-overview.png" style="display: block; height: 112px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>このプロファイルでは、ボタンを 3 回押しています。ウォーターフォールの概要で<a href="#js-blocking-overview">元のバージョンと比べると</a>、ボタンを押したときにはとても短い橙色のマーカーが 2 個あることがわかります:</p> + +<ul> + <li>click イベントの処理と Worker の処理開始を行う、<code>doPointlessComputationsInWorker()</code> 関数</li> + <li>Worker が "done" を発信したときに実行される、<code>handleWorkerCompletion()</code> 関数</li> +</ul> + +<p>これら 2 つの関数の間で Worker は素数の判定を行っていますが、メインスレッドの応答性には少しも影響を与えていないように見受けられます。これはあり得ないと思うかもしれませんが、Worker は別のスレッドで実行しますのでマルチコアプロセッサの利点を享受できます。これはシングルスレッドの Web サイトでは得られません。</p> + +<p>Web Worker の主な制限は、Worker で実行するコードでは DOM API を使用できないことです。</p> diff --git a/files/ja/tools/performance/ui_tour/index.html b/files/ja/tools/performance/ui_tour/index.html new file mode 100644 index 0000000000..ed58a0c021 --- /dev/null +++ b/files/ja/tools/performance/ui_tour/index.html @@ -0,0 +1,125 @@ +--- +title: UI ツアー +slug: Tools/Performance/UI_Tour +translation_of: Tools/Performance/UI_Tour +--- +<div>{{ToolsSidebar}}</div><p>パフォーマンスツールの UI は、大きく 4 つに分けられます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p> + +<ul> + <li><a href="/ja/docs/Tools/Performance/UI_Tour#Toolbar">ツールバー</a></li> + <li><a href="/ja/docs/Tools/Performance/UI_Tour#Recordings_pane">記録ペイン</a></li> + <li><a href="/ja/docs/Tools/Performance/UI_Tour#Recording_overview">記録の概要</a></li> + <li><a href="/ja/docs/Tools/Performance/UI_Tour#Details_pane">詳細ペイン</a>、これは以下のいずれかが入ります: + <ul> + <li><a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a></li> + <li><a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリー</a></li> + <li><a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a></li> + </ul> + </li> +</ul> + +<h2 id="Toolbar" name="Toolbar">ツールバー</h2> + +<p>ツールバーには、以下のボタンがあります:</p> + +<ul> + <li>記録を開始および終了する</li> + <li>過去に保存した記録をインポートする</li> + <li>記録ペインを消去する。<em>これを行うと、未保存の記録をすべて失うので注意してください。</em></li> + <li>タイムラインビューで表示する<a href="/ja/docs/Tools/Performance/Waterfall#Markers">マーカー</a>をフィルタリングする</li> + <li><a href="/ja/docs/Tools/Performance/UI_Tour#Details_pane">詳細ペイン</a>のツールを切り替える</li> + <li>設定用のポップアップメニューを開く</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 836px;"></p> + +<h2 id="Recordings_pane" name="Recordings_pane">記録ペイン</h2> + +<p>記録ペインでは、現在のセッションで取得した記録やインポートした記録を含む、読み込み済みの全記録を一覧表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p> + +<p>いつでも記録を選択すると、その記録の情報を他のペインに表示します。記録ペインで別の項目をクリックすると、その記録を選択できます。"保存" をクリックすると、記録を JSON ファイルとして保存できます。</p> + +<h2 id="Recording_overview" name="Recording_overview">記録の概要</h2> + +<p>ここでは、X 軸を時間として記録全体の概要を表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>ここにはタイムラインの概要とフレームレートのグラフという、2 つの要素があります。</p> + +<h3 id="Waterfall_overview" name="Waterfall_overview">タイムラインの概要</h3> + +<p>ここでは、<a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a>をコンパクトに表示したビューを提供します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>記録した処理は、<a href="/ja/docs/Tools/Performance/Waterfall#Markers">タイムラインビューと同じ方式</a>で色分けされます。</p> + +<h3 id="Frame_rate_graph" name="Frame_rate_graph">フレームレートのグラフ</h3> + +<p>フレームレートは、記録している間のブラウザの応答性を概観します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p><a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a>の個別記事をご覧ください。</p> + +<h3 id="Correlating_events" name="Correlating_events">イベントを関連づける</h3> + +<p>複数の要素が同期しているため、ある要素のイベントと別の要素のイベントに関連性を見いだせる場合があります。</p> + +<p>例えば以下のスクリーンショットでは、長時間の描画操作 (タイムラインの概要では<a href="/ja/docs/Tools/Performance/Waterfall#Markers">緑色のバーで表示</a>) とフレームレートの落ち込みに関連性があります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h3 id="Zooming_in" name="Zooming_in">拡大</h3> + +<p>記録を詳しく調査するため、概要ビューで記録の一部分を選択できます。一部分を選択すると、その部分だけを含むようにメインビューを更新します。以下のスクリーンショットではフレームレートが落ち込んだ部分を選択して、長時間の描画操作を詳しく見ています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h2 id="Details_pane" name="Details_pane">詳細ペイン</h2> + +<p>詳細ペインでは、選択したツールの情報を表示します。ツールを切り替えるには、<a href="/ja/docs/Tools/Performance/UI_Tour#Toolbar">ツールバー</a>のボタンを使用してください。</p> + +<h3 id="Waterfall" name="Waterfall">タイムライン</h3> + +<p>タイムラインでは、記録中にブラウザが実行した操作 (JavaScript を実行、CSS を更新、ページのレイアウトを更新、再描画を実行など) を表示します。X 軸は時間を表し、記録した操作を滝のように、またブラウザが実行した操作の連続性を反映するように配置します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>タイムラインについて詳しくは、<a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a>のページをご覧ください。</p> + +<h3 id="Call_Tree" name="Call_Tree">呼び出しツリー</h3> + +<p>呼び出しツリーは、ページで実行している JavaScript のサンプリングプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br> + 呼び出しツリーについて詳しくは、<a href="/ja/docs/Tools/Performance/Call_Tree">コールツリー</a>のページをご覧ください。</p> + +<h3 id="Flame_Chart" name="Flame_Chart">フレームチャート</h3> + +<p>呼び出しツリーが記録中にサイトのどの関数で、もっとも多くの実行時間がかかったかを示すものであるなら、フレームチャートは実行中のある時点のコールスタックを示すものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>フレームチャートについて詳しくは、<a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a>のページをご覧ください。</p> + +<h3 id="Allocations" name="Allocations">メモリ割り当て</h3> + +<div class="geckoVersionNote"> +<p>メモリ割り当てビューは、Firefox 46 の新機能です。</p> +</div> + +<p>メモリ割り当てビューは呼び出しツリービューと似ていますが、こちらはメモリ割り当てに特化したビューです。プロファイルの中でページ内のどの関数がもっとも多くのメモリ割り当てを行ったかを表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>メモリ割り当てビューは、プロファイルを記録する前にパフォーマンスツールの設定で "メモリ割り当てを記録" にチェックを入れた場合に限り表示します:</p> + +<p>{{EmbedYouTube("Le9tTo7bqts")}}</p> + +<p>メモリ割り当てビューについて詳しくは、<a href="/ja/docs/Tools/Performance/Allocations">メモリ割り当てビュー</a>のページをご覧ください。</p> diff --git a/files/ja/tools/performance/waterfall/index.html b/files/ja/tools/performance/waterfall/index.html new file mode 100644 index 0000000000..738de4cd72 --- /dev/null +++ b/files/ja/tools/performance/waterfall/index.html @@ -0,0 +1,478 @@ +--- +title: タイムライン +slug: Tools/Performance/Waterfall +translation_of: Tools/Performance/Waterfall +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>タイムラインは、サイトやアプリの実行でブラウザが行ったさまざまなことについて知見を得るものです。これは、サイトを実行するときにブラウザが行ったことはさまざまな種類 (JavaScript を実行、レイアウトを更新など) に分類でき、またある時点でブラウザはそれらのいずれかを行っているという考え方に基づいています。</p> + +<p>よって、例えばフレームレートが落ち込むなどパフォーマンスの問題の兆候があるときはタイムラインを開いて、記録中のある時点でブラウザが何を行っていたかを知ることができます。</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10951/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>X 軸に沿って時間を表します。記録した操作はマーカーと呼び、ブラウザが実行した操作の連続性を反映する滝のような配置で、水平方向のバーとして表示します。</p> + +<p>マーカーを選択すると、詳細情報を右側のサイドバーで表示します。そこではマーカーの長さや、<a href="/ja/docs/Tools/Performance/Waterfall#Markers">マーカーの種類</a>に特有の詳細情報を表示します。</p> + +<h2 id="Markers" name="Markers"><a id="timeline-color-coding" name="timeline-color-coding"></a>マーカー</h2> + +<p>操作を示すマーカーは、色分けおよび名前付けされています。以下の操作を記録します:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col" style="width: 20%;">名称および説明</th> + <th scope="col">色</th> + <th scope="col">詳細情報</th> + </tr> + </thead> + <tbody> + <tr> + <td style="width: 40%;"> + <p><a id="DOM_Event_Marker" name="DOM_Event_Marker"><strong>DOM イベント</strong></a></p> + + <p>DOM イベントへの応答として実行する JavaScript コード。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td style="width: 45%;"> + <dl> + <dt>イベント種別</dt> + <dd>例えば "click" や "message" など。</dd> + </dl> + + <dl> + <dt>フェーズ</dt> + <dd>例えば "ターゲット" や "キャプチャ" など。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p>ページ内で実行される JavaScript 関数は、関数が呼び出された理由に応じて名前付けします:</p> + + <p><strong>Script Tag<br> + setInterval<br> + setTimeout<br> + requestAnimationFrame<br> + Promise Callback<br> + Promise Init<br> + Worker<br> + JavaScript URI<br> + Event Handler</strong></p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>スタック</dt> + <dd>関数につながるコールスタック。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>HTML パース</strong></p> + + <p>ページの HTML をパースするために費やした時間。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>スタック</dt> + <dd>関数につながるコールスタック。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>XML パース</strong></p> + + <p>ページの XML をパースするために費やした時間。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>スタック</dt> + <dd>関数につながるコールスタック。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>CSS 再計算</strong></p> + + <p>ページの要素に適用する算出スタイルを算出する。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>CSS 再計算のヒント</dt> + <dd>どのようなスタイル再適用が必要かを示す文字列。以下のいずれかを手がかりとして提示します:<br> + Self<br> + Subtree<br> + LaterSiblings<br> + CSSTransitions<br> + CSSAnimations<br> + SVGAttrAnimations<br> + StyleAttribute<br> + StyleAttribute_Animations<br> + Force<br> + ForceDescendants</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>レイアウト</strong></p> + + <p>ページの要素の位置やサイズを計算する。この操作は、"リフロー" と呼ばれることがあります。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>描画</strong></p> + + <p>スクリーンにピクセルを描画する。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10705/green.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>ガベージコレクション</strong></p> + + <p><a href="/ja/docs/Tools/Performance/Waterfall#Garbage_collection">ガベージコレクションイベント</a>。ノンインクリメンタル GC イベントには "(非インクリメンタル)" を付加する。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>発生源</dt> + <dd>GC を実行した理由を示す文字列。</dd> + <dt>非インクリメンタル GC の発生源</dt> + <dd>GC がインクリメンタルではない場合に、ノンインクリメンタル GC を実行した理由を示す文字列を表示。</dd> + </dl> + + <div class="geckoVersionNote"> + <p>Firefox 46 の新機能: GC イベントがメモリ割り当ての圧力によって発生した場合は、"Show Allocation Triggers" というリンクを表示します。このリンクをクリックすると、GC イベントの原因になったメモリ割り当てのプロファイルを表示します。</p> + + <p>詳しくは<a href="/ja/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">メモリ割り当てとガベージコレクション</a>をご覧ください。</p> + </div> + </td> + </tr> + <tr> + <td> + <p><strong>サイクルコレクション</strong></p> + + <p>C++ の参照カウントを持つデータ構造を回収します。</p> + + <p>ガベージコレクションに似ていますが、こちらは C++ のオブジェクト向けです。<a href="http://blog.kylehuey.com/post/27564411715/cycle-collection">Kyle Huey のサイクルコレクションに関するブログ記事</a>をご覧ください。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>種別</dt> + <dd>常に "Collect" になります。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>CC グラフ削減</strong></p> + + <p>サイクルコレクションの準備や事前の最適化です。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>種別</dt> + <dd>常に "ForgetSkippable" になります。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>コンソール</strong></p> + + <p><code>console.time()</code> および <code>console.timeEnd()</code> を呼び出した間の時間に合致する。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10955/gray.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>タイマー名</dt> + <dd><code>console</code> に渡した引数。</dd> + <dt>スタック開始</dt> + <dd>関数につながるコールスタック <code>console.time()</code>。</dd> + <dt>スタック終了</dt> + <dd>(Firefox 41 の新機能) <code>console.timeEnd()</code> 時点のコールスタック。<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> 由来のコールバック内にある場合は、<a href="/ja/docs/Tools/Performance/Waterfall#Async_stack">"Async stack"</a> とも表示します。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>タイムスタンプ</strong></p> + + <p><code><a href="/ja/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code> を 1 回呼び出す。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10953/blue.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>Label</dt> + <dd><code>timeStamp()</code> に渡した引数。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>DOMContentLoaded</strong></p> + + <p>ドキュメントの <code><a href="/ja/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> イベント。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12191/red.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Load</strong></p> + + <p>ドキュメントの <code><a href="/ja/docs/Web/Events/load">load</a></code> イベント。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12193/blue.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>メインスレッドの Worker イベント</strong></p> + + <p>メインスレッドが Worker にメッセージを送信したとき、または Worker からメッセージを受け取ったときに表示します。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12195/orange2.png" style="height: 21px; width: 60px;"></td> + <td> + <p>以下のいずれか:</p> + + <dl> + <dt>メインスレッドでデータをシリアライズ</dt> + <dd>メインスレッドは、Worker に送信するメッセージをシリアライズします。</dd> + <dt>メインスレッドでデータをデシリアライズ</dt> + <dd>メインスレッドは、Worker から受け取ったメッセージをデシリアライズします。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Worker スレッドの Worker イベント</strong></p> + + <p>Worker がメインスレッドからメッセージを受け取ったとき、またはメインスレッドにメッセージを送信したときに表示します。</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12197/orange2-hollow.png" style="height: 21px; width: 60px;"></td> + <td> + <p>以下のいずれか:</p> + + <dl> + <dt>Worker でデータをシリアライズ</dt> + <dd>Worker は、メインスレッドに送信するメッセージをシリアライズします。</dd> + <dt>Worker でデータをデシリアライズ</dt> + <dd>Worker は、メインスレッドから受け取ったメッセージをデシリアライズします。</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p>マーカーとその色はタイムラインツールと<a href="/ja/docs/Tools/Performance/UI_Tour#Waterfall_overview">タイムラインの概要</a>で同じであり、双方を関連づけることが容易になります。</p> + +<h3 id="Filtering_markers" name="Filtering_markers">マーカーのフィルタリング</h3> + +<p><a href="/ja/docs/Tools/Performance/UI_Tour#Toolbar">ツールバー</a>のボタンを使用して、表示するマーカーを制御できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13238/perf-markers.png" style="display: block; height: 694px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Waterfall_patterns" name="Waterfall_patterns">タイムラインのパターン</h2> + +<p>タイムラインがどう見えるかは、サイトで行っていることの種類に強く依存します。JavaScript を多く使用するサイトでは橙色が多く表示され、視覚的に動的なサイトでは紫色や緑色が多くなるでしょう。それでもパフォーマンスの問題がある可能性を警告する、一般的なパターンがあります。</p> + +<h3 id="Rendering_waterfall" name="Rendering_waterfall">タイムラインの描画</h3> + +<p>タイムラインビューでよく見るパターンは、以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10711/perf-timeline-waterfall.png" style="display: block; height: 286px; margin-left: auto; margin-right: auto; width: 727px;"></p> + +<p>これは、ブラウザがイベントへの応答としてページの更新を行うときの基本的なアルゴリズムを視覚しています:</p> + +<ol> + <li><strong>JavaScript 関数呼び出し</strong>: DOM イベントなどのイベントが、ページ内の JavaScript を実行します。JavaScript は、ページの DOM や CSSOM を変更します。</li> + <li><strong>スタイルを再計算</strong>: ページの要素の算出スタイルが変化したとブラウザが判断した場合は、それらを再計算しなければなりません。</li> + <li><strong>レイアウト</strong>: 続いて、要素の位置や形状を計算するために算出スタイルを使用します。この操作は "レイアウト" と名付けられていますが、"リフロー" とも呼ばれます。</li> + <li><strong>描画</strong>: そして、ブラウザはスクリーンに要素を再描画しなければなりません。最後のステップはこの流れで示していません。ページは複数のレイヤーに分割され、それぞれを独立して描画した後に、"コンポジション" と呼ばれるプロセスで合成されます。</li> +</ol> + +<p>この流れが完了しなければスクリーンを更新できませんので、ひとつのフレーム内に一連の操作を収めなければなりません。毎秒 60 フレームが、アニメーションがスムーズに見えるレートとして広く受け入れられています。毎秒 60 フレームのレートのために、ブラウザが一連の操作を実行する時間として 16.7 ミリ秒が与えられます。</p> + +<p>応答性のために重要なこととして、ブラウザは必ずしもすべてのステップを通らなければならないわけではありません:</p> + +<ul> + <li><a href="/ja/docs/Web/Guide/CSS/Using_CSS_animations">CSS アニメーション</a>は JavaScript を実行する必要なくページを更新します。</li> + <li>変更してもリフローを発生させない CSS プロパティがあります。オブジェクトの形状や位置を変更できるプロパティ、例えば <code><a href="/ja/docs/Web/CSS/width">width</a></code>、<code><a href="/ja/docs/Web/CSS/display">display</a></code>、<code><a href="/ja/docs/Web/CSS/font-size">font-size</a></code>、<code><a href="/ja/docs/Web/CSS/top">top</a></code> などを変更すると、リフローが発生します。一方、形状や位置を変更しないプロパティ、例えば <code><a href="/ja/docs/Web/CSS/color">color</a></code> や <code><a href="/ja/docs/Web/CSS/opacity">opacity</a></code> などを変更してもリフローは発生しません。</li> + <li>変更しても再描画を発生させない CSS プロパティがあります。特に <code><a href="/ja/docs/Web/CSS/transform">transform</a></code> プロパティを使用して要素をアニメーションさせる場合、ブラウザはトランスフォームを行う要素を別のレイヤーに分離して、要素が移動しても再描画を行う必要がなくなります。要素の新しい位置は、コンポジションで制御されます。</li> +</ul> + +<p><a href="/ja/docs/Tools/Performance/Scenarios/Animating_CSS_properties">CSS プロパティのアニメーション</a>の記事では、さまざまな CSS プロパティのアニメーションによるパフォーマンスの違いを示すとともに、タイムラインがそれらをどのように知らせるかを説明します。</p> + +<h3 id="Blocking_JavaScript" name="Blocking_JavaScript">妨害する JavaScript</h3> + +<p>デフォルトで JavaScript を実行するスレッドは、ブラウザがレイアウトの更新、再描画、DOM イベントなどに使用するスレッドと同じです。これは、長い間実行する JavaScript 関数が不応答性 (jank) を引き起こす可能性があるということです。アニメーションがぎこちない、あるいはサイトがフリーズするでしょう。</p> + +<p>フレームレートツールとタイムラインを組み合わせると、長い間実行する JavaScript が応答性の問題を引き起こしていることが簡単にわかります。以下のスクリーンショットでは、フレームレートの落ち込みを引き起こしている JS 関数を拡大表示しています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10973/perf-js-blocking-waterfall.png" style="display: block; height: 432px; margin-left: auto; margin-right: auto; width: 1128px;"></p> + +<p><a href="/ja/docs/Tools/Performance/Scenarios/Intensive_JavaScript">集約的な JavaScript</a> の記事では、長大な JavaScript 関数によって引き起こされる応答性の問題をタイムラインがどのように目立たせるか、またメインスレッドの応答性を維持するために非同期メソッドをどのように使用できるかを説明します。</p> + +<h3 id="Expensive_paints" name="Expensive_paints">高コストな描画</h3> + +<p><code><a href="/ja/docs/Web/CSS/box-shadow">box-shadow</a></code> など負担が大きい描画効果があり、特に毎フレーム計算が必要なトランジションに適用した場合に顕著です。特に、グラフィックを集中的に扱う操作でフレームレートの落ち込みがみられる場合は、タイムラインで緑色のマーカーがないか確認してください。</p> + +<h3 id="Garbage_collection" name="Garbage_collection">ガベージコレクション</h3> + +<p>タイムラインで赤色のマーカーはガベージコレクション (GC) のイベントを表しており、このとき <a href="/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (Firefox の JavaScript エンジン) は到達不能なメモリを探すためにヒープを確認して、そのようなメモリを解放します。GC を実行している間は JavaScript エンジンを一時停止しなければならないので、プログラムが休止して完全に応答しない状態になるため、GC はパフォーマンスと関係性があります。</p> + +<p>一時停止する時間を短縮するため、SpiderMonkey は<em>インクリメンタル GC</em> を実装しています。これはガベージコレクションを少しずつ実行でき、合間にプログラムを実行することが可能になります。それでも時にはノンインクリメンタルガベージコレクションが必要であり、この場合プログラムは完了するまで待たなければなりません。</p> + +<ul> +</ul> + +<p>GC イベント、特にノンインクリメンタル GC イベントを避けようとして、特定の JavaScript エンジンの実装に最適化しようとすることは賢くありません。SpiderMonkey は GC がいつ必要か、および特にノンインクリメンタル GC がいつ必要かを検出するために、複雑に組み合わせた発見方法を使用しています。ただし、一般に以下のことが言えます:</p> + +<ul> + <li>GC は多くのメモリが割り当てられているときに必要です。</li> + <li>ノンインクリメンタル GC は通常、SpiderMonkey がインクリメンタル GC の実行中にメモリ不足になる可能性があるほどメモリ使用量が高いときに発生します。</li> +</ul> + +<p>タイムラインで GC マーカーを記録するときは、以下の情報を示します:</p> + +<ul> + <li>GC がインクリメンタルか否か</li> + <li>GC を実行した理由</li> + <li>ノンインクリメンタル GC である場合は、インクリメンタルではない理由</li> + <li>Firefox 46 より、GC イベントがメモリ割り当ての圧力によって発生した場合は、"Show Allocation Triggers" というリンクを表示します。このリンクをクリックすると、GC イベントの原因になったメモリ割り当てのプロファイルを表示します。詳しくは<a href="/ja/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">メモリ割り当てとガベージコレクション</a>をご覧ください。</li> +</ul> + +<h2 id="Adding_markers_with_the_console_API" name="Adding_markers_with_the_console_API">console API でマーカーを追加する</h2> + +<p><a href="/ja/docs/Web/API/Console">console API</a> を呼び出すことで直接制御できるマーカーが 2 つあります。"コンソール" と "Timestamp" です。</p> + +<h3 id="Console_markers" name="Console_markers">コンソールマーカー</h3> + +<p>これは、記録内の特定のセクションにマークをつけるものです。</p> + +<p>コンソールマーカーを作成するにはセクションの始めで <code>console.time()</code> を、セクションの終わりで <code>console.timeEnd()</code> を呼び出します。これらの関数は、セクションの名前として使用される引数を取ります。</p> + +<p>例えば、以下のようなコードで考えてみましょう:</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + + console.timeEnd("calculating..."); + + return primes; +}</pre> + +<p>タイムラインの出力は、以下のようになります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10967/perf-console-time.png" style="display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1192px;"></p> + +<p>マーカーは <code>console.time()</code> に渡した引数で名付けられており、マーカーを選択すると右側のサイドバーでプログラムスタックを確認できます。</p> + +<h4 id="Async_stack" name="Async_stack">Async stack</h4> + +<p class="geckoVersionNote">Firefox 41 の新機能</p> + +<p>Firefox 41 より、右側のサイドバーに終了時点、すなわち <code>console.timeEnd()</code> を呼び出した時点のスタックも表示します。<code>console.timeEnd()</code> が <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> の成功によって呼び出された場合は、"(非同期: Promise)" と表示します。これは "async stack" を表すものであり、その時点のコールスタックで promise が生成されています。</p> + +<p>例えば、以下のコードで考えてみましょう:</p> + +<pre class="brush: js">var timerButton = document.getElementById("timer"); +timerButton.addEventListener("click", handleClick, false); + +function handleClick() { + console.time("timer"); + runTimer(1000).then(timerFinished); +} + +function timerFinished() { + console.timeEnd("timer"); + console.log("ready!"); +} + +function runTimer(t) { + return new Promise(function(resolve) { + setTimeout(resolve, t); + }); +}</pre> + +<p>タイムラインでは <code>time()</code> と <code>timeEnd()</code> の間をマーカーで表示します。このマーカーを選択すると、サイドバーに async stack が表示されるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11179/async-stack.png" style="display: block; height: 378px; margin-left: auto; margin-right: auto; width: 352px;"></p> + +<h3 id="Timestamp_markers" name="Timestamp_markers">Timestamp マーカー</h3> + +<p>タイムスタンプで、記録中にその場でマークすることができます。</p> + +<p>タイムスタンプマーカーを作成するには、<code><a href="/ja/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code> を呼び出します。タイムスタンプのラベルを引数として渡すことができます。</p> + +<p>例えば前出のコードで繰り返し 10 回ごとにタイムスタンプを生成して、繰り返し回数を名前として付加します:</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + + if (i % 10 == 0) { + console.timeStamp(i.toString()); + } + + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + console.timeEnd("calculating..."); + return primes; +}</pre> + +<p>タイムラインは以下のようになります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10971/perf-timestamp.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 1192px;"></p> diff --git a/files/ja/tools/profiler/index.html b/files/ja/tools/profiler/index.html new file mode 100644 index 0000000000..44135aed3d --- /dev/null +++ b/files/ja/tools/profiler/index.html @@ -0,0 +1,144 @@ +--- +title: JavaScript プロファイラ +slug: Tools/Profiler +tags: + - Debugging + - Firefox + - Guide + - Profiler + - Profiling + - Tools +translation_of: Tools/Performance +--- +<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 new file mode 100644 index 0000000000..482c5dcf3b --- /dev/null +++ b/files/ja/tools/release_notes/index.html @@ -0,0 +1,415 @@ +--- +title: リリースノート +slug: Tools/Release_notes +translation_of: Mozilla/Firefox/Releases +--- +<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/chrome_desktop/index.html b/files/ja/tools/remote_debugging/chrome_desktop/index.html new file mode 100644 index 0000000000..6289a985ba --- /dev/null +++ b/files/ja/tools/remote_debugging/chrome_desktop/index.html @@ -0,0 +1,48 @@ +--- +title: デスクトップ版 Chrome のリモートデバッグ +slug: Tools/Remote_Debugging/Chrome_Desktop +translation_of: Tools/Remote_Debugging/Chrome_Desktop +--- +<div>{{ToolsSidebar}}</div><p>デスクトップ環境で実行している <a href="/ja/docs/Glossary/Google_Chrome">Google Chrome</a> に <a href="/ja/docs/Tools">Firefox 開発ツール</a>を接続する方法を説明します。</p> + +<div class="note"> +<p>本機能のサポート状況は、Firefox のデバッグプロトコルと Chrome のデバッグプロトコルの橋渡しを行う Valence アドオンに依存します。Valence のサポート状況は、まだ初期段階です。</p> +</div> + +<p>本ガイドは 2 つのパートに分けています: パート 1 "事前準備" では 1 回だけ必要な作業を、パート 2 "接続" ではデバイスへ接続するたびに必要な作業を扱います。</p> + +<h2 id="Prerequisites" name="Prerequisites">事前準備</h2> + +<p>以下のものが必要です:</p> + +<ul> + <li><a href="/ja/docs/Tools/Valence">Valence</a> アドオン (旧 Firefox ツールアダプタ) をインストールした、Firefox 35 以降。<a href="/ja/Firefox/Developer_Edition">Firefox Developer Edition</a> を使用している場合は、Valence はインストール済みです。他のエディションでは、<a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxdt-adapters/">最新バージョンの Valence をダウンロード</a>して、XPI ファイルを Firefox で開いてインストールしてください。</li> + <li>Chrome バージョン 37 以降。</li> +</ul> + +<h2 id="Connecting" name="Connecting">接続</h2> + +<p>{{EmbedYouTube("g5p9__OiaMY")}}</p> + +<h3 id="Running_Chrome" name="Running_Chrome">Chrome を実行する</h3> + +<p>デスクトップ版 を以下の特別なフラグ付きで起動して、リモートデバッグを有効にします。重要なフラグは <code>--remote-debugging-port=9222</code> です。<a class="external external-icon" href="http://www.chromium.org/developers/how-tos/run-chromium-with-flags">これらのフラグ付きで Chrome プロセスを実行する方法</a>のガイドをご覧ください。</p> + +<p>他にもいくつか便利かもしれないフラグがあります。<code>--no-first-run</code>、<code>--no-default-browser-check</code>、<code>--user-data-dir</code> 付きで実行すれば、他の Chrome プロファイルと同時に実行できます。</p> + +<p>例えば OS X では以下のコマンドを実行すると、他のインスタンスとは分離されたかたちで、デバッグ可能な Chrome を起動できます:</p> + +<pre class="language-html"><code class="language-html">/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')</code></pre> + +<h3 id="Connecting_using_WebIDE" name="Connecting_using_WebIDE">WebIDE を使用して接続する</h3> + +<p>Firefox で <a href="/ja/docs/Tools/WebIDE#Opening_WebIDE">WebIDE</a>を開きます。WebIDE で "ランタイムを選択" をクリックして、ドロップダウンメニューから "Chrome Desktop" を選択してください。</p> + +<p>そして、WebIDE で "アプリを開く" をクリックしてください。ここに、デバイスで開いているすべてのタブを表示します。タブ名をクリックすると、そのタブに開発ツールを接続します。ほとんどの Firefox 開発ツールを使用できます。ただし、以下のツールは未サポートです:</p> + +<ul> + <li><a href="/ja/docs/Tools/Performance">パフォーマンス</a></li> + <li>タイムライン</li> + <li><a href="/ja/docs/Tools/Network_Monitor">ネットワーク</a></li> + <li><a href="/ja/docs/Tools/Storage_Inspector">ストレージ</a></li> +</ul> diff --git a/files/ja/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/ja/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..adfd3563fb --- /dev/null +++ b/files/ja/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,82 @@ +--- +title: デスクトップ版 Firefox のデバッグを行う +slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +<div>{{ToolsSidebar}}</div><p>このガイドでは、同じマシン上の別のインスタンスとして実行しているデスクトップ版 Firefox に、Firefox 開発ツールを接続する方法を説明します。ここでは、デバッグされる Firefox のインスタンスを<em>デバッグ先</em>、デバッグを行う Firefox のインスタンスを<em>デバッグ元</em>と呼びます。</p> + +<h2 id="Enable_remote_debugging" name="Enable_remote_debugging">リモートデバッグを有効化する</h2> + +<p>始めにデバッグ元とデバッグ先の <a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション</a> で、"ブラウザーとアドオンのデバッガーを有効" および "リモートデバッガーを有効" を有効にしなければなりません。</p> + +<p>この作業は 1 回だけ必要です。設定値は再起動後も維持されます。</p> + +<h2 id="Start_the_debugger_server" name="Start_the_debugger_server">デバッガーサーバを開始する</h2> + +<p>次に、デバッグ先でデバッガーサーバーを開始します。</p> + +<h3 id="Before_Firefox_37" name="Before_Firefox_37">Firefox 37 より前のバージョン</h3> + +<p>Firefox 37 より前のバージョンでは、<a href="/ja/docs/Tools/GCLI">開発ツールバー</a> を開いて以下のコマンドを実行します:</p> + +<pre>listen 6000</pre> + +<p>このコマンドは、ポート 6000 番でデバッガークライアントの接続を待ち受けするよう、デバッグ先に指示します。6000 番以外も使用できます。</p> + +<p>デバッグ先を再起動した場合は、再度コマンドを実行しなければなりません。</p> + +<h3 id="Firefox_37_onwards" name="Firefox_37_onwards">Firefox 37 以降のバージョン</h3> + +<p>Firefox 37 以降でも前出の方法を使用できますが、もうひとつ方法があります。<code>--start-debugger-server</code> オプションを渡して、コマンドラインからデバッグ先を起動します:</p> + +<pre>/path/to/firefox --start-debugger-server</pre> + +<p>引数を渡さない場合、--start-debugger-server はデバッガーサーバーをポート 6000 番で待ち受けさせます。別のポートを使用する場合は、希望するポート番号を渡します:</p> + +<pre>/path/to/firefox --start-debugger-server 1234</pre> + +<p>注記: Windows では、<code>start-debugger-server</code> をハイフン 1 個で呼び出します:</p> + +<pre>firefox.exe -start-debugger-server 1234</pre> + +<div class="note"> +<p><strong>注記</strong>: デフォルトではセキュリティ上の理由で、<code>devtools.debugger.force-local</code> を設定しています。外部のマシンから Firefox インスタンスのデバッグを行いたい場合はこの設定を変更してもかまいませんが、信頼済みのネットワークまたはどのマシンがアクセスできるかを厳しく制御するファイアウォール規則が設定された環境でのみ行ってください。</p> +</div> + +<h2 id="Connect" name="Connect">接続</h2> + +<p>接続方法は 2 種類あります。接続画面を使用する方法と、WebIDE を使用する方法です。</p> + +<h3 id="Connect_screen" name="Connect_screen">接続画面</h3> + +<p>デバッグ元のツール/ウェブ開発メニュー配下に、[接続...] という項目があります。この項目をクリックすると、以下のようなページが開きます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10063/remote-connect-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 640px;"></p> + +<p>デバッグ先に待ち受けさせているポート番号を入力して、"接続" をクリックします。すると、デバッグ先で接続確認を求めるダイアログが表示されるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10073/remote-warning.png" style="display: block; height: 193px; margin-left: auto; margin-right: auto; width: 502px;">"OK" をクリックしてデバッグ元に戻ると、以下のようなページが表示されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10065/remote-connect-2.png" style="display: block; margin-left: auto; margin-right: auto; width: 640px;"></p> + +<ul> + <li>"利用可能なリモートのタブ" に、デバッグ先で開いているすべてのタブを表示します。タブ名をクリックすると、そのタブに開発ツールを接続します。</li> + <li>"利用可能なリモートのアドオン" に、デバッグ先にインストールしているすべてのアドオンを表示します。アドオン名をクリックすると、そのアドオンに開発ツールを接続します。</li> + <li>"利用可能なリモートのプロセス" に、Firefox のプロセスを表示します。"メインプロセス" をクリックすると、ブラウザー自体に開発ツールを接続します。</li> +</ul> + +<h3 id="WebIDE" name="WebIDE">WebIDE</h3> + +<p>デバッグ元で WebIDE を開くと、"ランタイムを選択" の中に "リモートランタイム" があります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10069/remote-webide-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 786px;">リモートランタイムを選択すると、ホスト名とポート番号を求められます。"localhost:6000"、またはデバッグ先で別のポート番号で待ち受けさせている場合はポート番号を指定します。</p> + +<p>すると、警告ダイアログを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10073/remote-warning.png" style="display: block; height: 193px; margin-left: auto; margin-right: auto; width: 502px;">OK をクリックします。WebIDE が、メインプロセスに開発ツールを接続します。content タブに接続したい場合は、左側のメニューを開いてデバッグを行いたいタブを選択してください。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10071/remote-webide-2.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 786px;"></p> 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_clone/index.html new file mode 100644 index 0000000000..a2f726cd33 --- /dev/null +++ b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html @@ -0,0 +1,68 @@ +--- +title: WebIDE を使用した Firefox for Android のデバッグ +slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +tags: + - ガイド + - ツール + - デバッグ +translation_of: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +--- +<div>{{ToolsSidebar}}</div> + +<p>この記事では、<a href="/ja/docs/Tools">Firefox開発ツール</a>を Firefox 36 以降の Android 用 Firefox に接続する方法について説明します。</p> + +<p>長い間、Firefox Developer Tools を Android 用 Firefox に接続してモバイル Web サイトをデバッグすることは可能でした。これまでは、かなり複雑でエラーが発生しやすいプロセスでした。Firefox 36 では、このプロセスをもっと簡単にしました。特に、adb ツールをまったく直接処理する必要はありません。これで WebIDE を使用して接続します。これは舞台裏での adb の設定を担当します。</p> + +<div class="note"> +<p>これを行うには、デスクトップに Firefox 36 以上、モバイルデバイスに Firefox 35 が必要です。以前のバージョンを使用する必要がある場合は、<a href="/ja/docs/Tools/Remote_Debugging/Firefox_for_Android">デベロッパーツールを Android 用 Firefox に接続する</a>ための古い手順を参照してください。</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9011/remote-debugging-overview-fx36.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>このガイドは2つの部分に分かれています。最初の部分「前提条件」は、1回だけ行う必要のあるものをカバーし、2番目の部分の「接続する」は、デバイスを接続するたびに行う必要がある作業をカバーします。</p> + +<h2 id="前提条件">前提条件</h2> + +<p>まず、次のものが必要です。</p> + +<ul> + <li>Firefox 36 以降が動作するデスクトップまたはラップトップコンピュータ</li> + <li>Android 35 以上の Android 用 Firefox を搭載した <a href="https://support.mozilla.org/ja/kb/will-firefox-work-my-mobile-device">Android 用 Firefox を実行できる</a> Android デバイス</li> + <li>2つのデバイスを接続する USB ケーブル</li> +</ul> + +<h3 id="ADB_ヘルパー">ADB ヘルパー</h3> + +<p>デスクトップ上の Firefox には、ADB ヘルパーアドオンのバージョン 0.7.1 以上が必要です。これは、初めて WebIDE を開くときに自動的にインストールされます。バージョンを確認するには、ブラウザのアドレスバーに <code>about:addons</code> と入力すると、ADB が表示されます。</p> + +<p>ADB ヘルパーのバージョンが 0.7.1 以上でない場合は、「Projects」メニューから「Extra Components を管理」を選択すると、「Extra Components」ウィンドウが表示されます。このウィンドウには ADB ヘルパーのエントリが含まれています：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9021/extra-components.png" style="display: block; margin-left: auto; margin-right: auto;">「アンインストール」をクリックし、「インストール」をクリックすると、最新のバージョンになります。</p> + +<h3 id="Android_端末のセットアップ">Android 端末のセットアップ</h3> + +<p>まず、<a href="http://developer.android.com/guide/developing/device.html#setting-up">このリンクの手順 2 と 3 を実行して</a>、USB デバッグを有効にします。</p> + +<p>次に Firefox for Android でリモートデバッグを有効にします。ブラウザを開き、メニューを開き、[設定]、[デベロッパーツール] を選択します (一部の Android 搭載端末では、[詳細] を選択して [設定] オプションを表示する必要があります)。[リモートデバッグ] チェックボックスをオンにします。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>ブラウザはポート転送を設定することを通知する通知を表示することがありますが、無視することができます。</p> + +<h2 id="接続する">接続する</h2> + +<p>Android 端末を USB ケーブルでデスクトップに接続し、WebIDE を開き、「ランタイム」メニューを開きます。「USBデバイス」の下に Android 用 Firefox がデバッグ対象として表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9013/remote-debugging-android-runtime.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>それを選択してください。Android 搭載端末では警告メッセージが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9031/incoming-warning.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>[OK] をクリックします。WebIDE の「アプリケーションを開く」メニューをクリックします。デバイス上に開いているすべてのタブのリストが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9015/remote-debugging-android-open-tabs.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>開発ツールを添付するタブを選択する：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9029/remote-debugging-android-attached.png" style="display: block; margin-left: auto; margin-right: auto;">これでリモートデバッグをサポートするすべての Firefox 開発ツールを使用できるようになります。詳細については<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a>のページを参照してください。</p> diff --git a/files/ja/tools/remote_debugging/firefox_for_android/index.html b/files/ja/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..af3bdfbb64 --- /dev/null +++ b/files/ja/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,146 @@ +--- +title: Android 版 Firefox のリモートデバッグ +slug: Tools/Remote_Debugging/Firefox_for_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +<div>{{ToolsSidebar}}</div><p>このガイドでは、<a href="/ja/docs/Mozilla/Firefox_for_Android">Android 版 Firefox</a> で実行しているコードを USB 経由で調査あるいはデバッグするために、<a href="/docs/Tools/Remote_Debugging">リモートデバッグ</a>を使用する方法を説明します。</p> + +<div class="note"> +<p>最近、Android 版 Firefox に開発ツールを接続する方法を大幅にシンプル化しました。デスクトップ版 の Firefox 36 以降および Android 版の Firefox 35 以降を使用している場合は、本記事の代わりに<a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">新しい方法をご確認ください</a>。</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>本ガイドは 2 つのパートに分けています: パート 1 "事前準備" では 1 回だけ行う必要がある作業を、パート 2 "接続" ではデバイスへ接続するたびに行う必要がある作業を扱います。</p> + +<h2 id="Prerequisites" name="Prerequisites">事前準備</h2> + +<p>まず、以下のものが必要です:</p> + +<ul> + <li>Firefox 15 以降を実行するデスクトップまたはノート型コンピュータ</li> + <li>Android 版 Firefox 15 以降を実行している、<a href="https://support.mozilla.org/ja/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/ja/kb/will-firefox-work-my-mobile-device">Android 版 Firefox が動作する</a> Android デバイス</li> + <li>2 つのデバイスを接続する USB ケーブル</li> +</ul> + +<h3 id="ADB_setup" name="ADB_setup">ADB のセットアップ</h3> + +<p>次に <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> コマンドラインツールを使用して、デスクトップと Android デバイスが相互に対話できるようにしなければなりません。</p> + +<h4 class="note" id="Android_デバイスで行う作業">Android デバイスで行う作業</h4> + +<ul> + <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">USB デバッグの有効化 (このリンクのステップ 2 のみ実施)</a>。</li> + <li>USB 経由で Android デバイスとデスクトップを接続します。</li> +</ul> + +<h4 class="note" id="デスクトップで行う作業">デスクトップで行う作業</h4> + +<ul> + <li>デバイスに合うバージョンの <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> をインストールします。</li> + <li>Android SDK を使用して、<a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a> をインストールします。</li> + <li>Android Platform Tools が、Android SDK をインストールしたディレクトリ配下の "platform-tools" ディレクトリ内に、adb をインストールします。"platform-tools" ディレクトリにパスを通すようにしてください。</li> +</ul> + +<p>動作確認を行うには、デスクトップでコマンドシェルを開いて以下のコマンドを入力してください:</p> + +<pre>adb devices</pre> + +<p>以下のように出力するでしょう:</p> + +<pre>List of devices attached +51800F220F01564 device +</pre> + +<p>(長い 16 進文字列は異なります。)</p> + +<p>これで <code>adb</code> があなたのデバイスを発見できており、また ADB の設定が成功しました。</p> + +<h3 id="Enable_remote_debugging" name="Enable_remote_debugging">リモートデバッグの有効化</h3> + +<p>次に、Android デバイスとデスクトップの双方でリモートデバッグを有効にしなければなりません。</p> + +<h4 id="Firefox_for_Android_24_and_earlier" name="Firefox_for_Android_24_and_earlier">Android 版 24 以前</h4> + +<p>デバイスでリモートデバッグを有効にするには、設定項目 <code>devtools.debugger.remote-enabled</code> を <code>true</code> にしなければなりません。</p> + +<p>Android 版 Firefox で <code>about:config</code> を開いて、検索ボックスに "devtools" と入力して検索キーを押下してください。すると、開発ツール関連の全設定が表示されます。設定 <code>devtools.debugger.remote-enabled</code> を探して、"切り替え" を押下してください。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 class="note" id="Android_版_Firefox_25_以降">Android 版 Firefox 25 以降</h4> + +<p>Android 版 Firefox 25 以降では、リモートデバッグを有効化するメニュー項目があります。メニューを開き "設定" を選択して、"デベロッパーツール" (一部の Android デバイスでは、"設定" を表示するために "More" を選択しなければならないでしょう) を選択してください。"リモートデバッグ" チェックボックスにチェックを入れてください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>ブラウザが、ポートフォワーディングの設定を忘れないようにという通知を表示します。これは後で行います。</p> + +<h4 id="On_the_desktop_2" name="On_the_desktop_2">デスクトップで行う作業</h4> + +<p>デスクトップでは、ツールボックスの設定でリモートデバッグを有効化します。<a href="/ja/docs/Tools_Toolbox" title="Tools_Toolbox">ツールボックスを開いて</a>、<a href="/ja/docs/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールバー</a>内の "オプション" ボタンをクリックします。そして<a href="/ja/docs/Tools_Toolbox#Settings" title="Tools_Toolbox#Settings">設定</a>タブで "リモートデバッガを有効" にチェックを入れてください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="note">バージョン 27 より前の Firefox を使用している場合は、設定を反映するためにブラウザの再起動が必要です。</div> + +<p>Web 開発メニュー配下に、新たな項目 "接続..." が現れます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Connecting" name="Connecting">接続</h2> + +<p>以上で、デバイスにリモートデバッグツールを接続できます。始めに、デバイスとデスクトップを接続していない場合は、デバイスとデスクトップを USB ケーブルで接続してください。</p> + +<h4 class="note" id="デスクトップで行う作業_2">デスクトップで行う作業</h4> + +<p>Android 版 Firefox 35 以降では、コマンドプロンプトを開いて以下のように入力します:</p> + +<pre>adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket</pre> + +<p>リリース版以外のチャンネルの Android 版 Firefox を使用する場合は、<code>org.mozilla.firefox</code> の部分を以下のように変更してください:</p> + +<ul> + <li>Beta は <code>org.mozilla.firefox_beta</code></li> + <li>Aurora は <code>org.mozilla.fennec_aurora</code></li> + <li>Nightly は <code>org.mozilla.fennec</code></li> +</ul> + +<p>Android 版 Firefox 34 以前では以下のように入力します:</p> + +<pre>adb forward tcp:6000 tcp:6000</pre> + +<p>(Android デバイスが使用するデバッグ用ポートの値を変更した場合は、このコマンドも適宜変更しなければなりません。)</p> + +<p>Firefox OS では以下のコマンドを入力します:</p> + +<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + +<p>デスクトップとデバイスを USB ケーブルで物理的に接続するたびに、このコマンドを実行しなければなりません。</p> + +<p>そして Firefox で Web 開発メニューを開いて、"接続..." を選択してください。以下のようなページが表示されるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">ポート番号を変更した場合を除き、6000 を選択して "接続" ボタンを押下してください。</p> + +<h4 class="note" id="Android_デバイスで行う作業_2">Android デバイスで行う作業</h4> + +<p>続いて、Android デバイスで接続の確認を問い合わせるダイアログが表示されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">"OK" を押下してください。デスクトップ側は、このダイアログを許可するまで数秒待ちます: タイムアウトしたときは、デスクトップ側のダイアログで再度 "接続" を押下してください。</p> + +<h4 class="note" id="デスクトップで行う作業_3">デスクトップで行う作業</h4> + +<p>続いて、デスクトップ側で以下のようなダイアログが表示が表示されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">これは、ブラウザタブで実行している Web コンテンツのデバッグを行いたいか、あるいはブラウザコード自体のデバッグを行うかを問い合わせるものです。</p> + +<ul> + <li>"利用可能なリモートのタブ" 配下は開いているタブごとに 1 つずつ項目があり、その項目をクリックすると当該タブで開いている Web コンテンツにデバッグツールを接続します。Web コンテンツのデバッグを行いたい場合は、適切なコンテンツタブを選択してください。</li> + <li>"利用可能なリモートのプロセス" 配下はエントリが 1 つあります: これはブラウザのプロセスそのものです。ブラウザ自身のコードのデバッグを行いたい場合は、この項目を選択してください。</li> +</ul> + +<p>mozilla.org の Web サイトに接続してみましょう。ツールボックスが独自のウィンドウで開いて、mozilla.org を開いている Android 版 Firefox のタブに接続します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>ツールボックスやツールボックス内のツールは、ローカルのコンテンツに接続した場合と同様に動作します。<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ja/tools/remote_debugging/index.html b/files/ja/tools/remote_debugging/index.html new file mode 100644 index 0000000000..d922cf39b0 --- /dev/null +++ b/files/ja/tools/remote_debugging/index.html @@ -0,0 +1,21 @@ +--- +title: リモートデバッグ +slug: Tools/Remote_Debugging +tags: + - Tools + - 'l10n:priority' +translation_of: Tools/Remote_Debugging +--- +<div>{{ToolsSidebar}}</div> + +<p>デスクトップ版の <a href="/ja/docs/Tools">Firefox の開発ツール</a> を使用すると、別のブラウザーやランタイムで実行しているウェブサイトやウェブアプリをデバッグできます。別のブラウザーとはツールと同じ端末上のものであったり、 USB で接続した電話機など別の端末上のものを使用したりすることができます。</p> + +<p>開発ツールの詳細な接続手順は、ランタイムにより異なります。</p> + +<p>開発ツールと接続できるのは、デスクトップ版 Firefox、Android 版 Firefox、Thunderbird などの Gecko ベースのランタイムです。</p> + +<ul> + <li><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">デスクトップ版 Firefox</a></li> + <li>Android 版 Firefox を<a href="/docs/Tools/about:debugging">USB 経由</a>で</li> + <li><a href="/ja/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li> +</ul> diff --git a/files/ja/tools/remote_debugging/thunderbird/index.html b/files/ja/tools/remote_debugging/thunderbird/index.html new file mode 100644 index 0000000000..0f05609669 --- /dev/null +++ b/files/ja/tools/remote_debugging/thunderbird/index.html @@ -0,0 +1,44 @@ +--- +title: Thunderbird のリモートデバッグ +slug: Tools/Remote_Debugging/Thunderbird +tags: + - Debug + - Tutorial + - thunderbird +translation_of: Tools/Remote_Debugging/Thunderbird +--- +<div>{{ToolsSidebar}}</div><p>このガイドでは、<a href="/ja/docs/Mozilla/Thunderbird">Thunderbird</a> で実行しているコードの調査やデバッグを <a href="/ja/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">リモートデバッグ</a> する方法を説明します。</p> + +<p>Firefox のリモート接続機能を使用して、さまざまな開発ツールが Thunderbird をサポートします。現在サポートしているツールセットはウェブコンソール、インスペクター、デバッガー、スタイルエディター、プロファイラー、ネットワークモニターです。他のツールは、将来利用可能になる予定です。</p> + +<h2 id="Setting_up_Thunderbird" name="Setting_up_Thunderbird">Thunderbird の設定</h2> + +<p>Thunderbird では、デバッガーサーバーを有効にすることが必要です。メニューバーの [<code>ツール</code>] メニュー (alt + ツール) で [<code>リモートデバッグを許可</code>] を選択してください。デフォルトでは、デバッガーサーバーがポート 6000 番を使用して開始します。複数のプロファイルをデバッグするなど、デバッガーサーバーのポート番号を変更したい場合は、高度な設定のエディターを開いて設定項目 <code>devtools.debugger.remote-port</code> を変更してください。</p> + +<h2 id="Setting_up_Firefox" name="Setting_up_Firefox">Firefox の設定</h2> + +<p>Firefox はクライアントとして動作して、Thunderbird 用の開発ツールを操作するユーザーインターフェイスを提供します。Firefox と Thunderbird のメジャーバージョン番号を合わせるともっともよいのですが、異なるバージョンでも動作する場合があります。</p> + +<p>Firefox の設定として、ツールボックスのオプションでリモートデバッグを有効にします。<a href="/ja/docs/Tools_Toolbox" title="Tools_Toolbox">ツールボックスを開いて</a>、<a href="/ja/docs/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールバー</a> 内の "オプション" ボタンをクリックします。そして <a href="/ja/docs/Tools_Toolbox#Settings" title="Tools_Toolbox#Settings">設定</a> タブで "リモートデバッガーを有効" にチェックを入れてください:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png"></p> + +<p>以上で、Firefox のツールメニューから接続ページを開くことができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="height: 503px; width: 583px;"></p> + +<p>ブラウザーで接続ページが開きます。必要に応じてこのページをブックマークツールバーに追加できます。リモートポート番号を変更していなければ、フィールドにはすでに適切な値が入っています。接続ボタンをクリックすると、開発ツールのリモート接続を開始します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="height: 686px; width: 732px;"></p> + +<p>接続すると、リモートのタブやプロセスの一覧が提示されます。Thunderbird と Firefox ではタブの概念が異なっており、リモートのタブの一覧に Thunderbird のすべての xul:browser 要素を表示します。これはコンテンツタブまたはメッセージリーダーになります。ほとんどの場合、Thunderbird 自体のコードをデバッグするために "メインプロセス" を選択するでしょう。開発ツールのセットを含む新しいウィンドウが開いて、Thunderbird のインスタンスに対して使用できます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png"></p> + +<h2 id="Using_the_Developer_Tools" name="Using_the_Developer_Tools">開発ツールを使用する</h2> + +<p>ツールの使用方法は、ほぼ一目瞭然でしょう。なんらかのツールで問題が発生した場合は、<a href="/ja/docs/Tools/Remote_Debugging">開発ツールのドキュメント</a> をご覧ください。リモート接続を使用するため、若干の差異が発生する可能性があります。一部のツールは使用できず、またローカルと同等のパフォーマンスを実現できない可能性もあります。例えばリモートデバッガーツールを使用すると、内部のネットワーク接続を使用してファイルを転送しなければならないため、かなり時間がかかります。</p> + +<h2 id="Troubleshooting" name="Troubleshooting">トラブルシューティング</h2> + +<p>エラーが発生した場合は、まずはバージョン番号が一致しているかを確認してください。Thunderbird 24 を使用している場合は、Firefox もバージョン 24 を使用して接続してください。次に、Firefox の開発ツールの問題であるか、あるいは Thunderbird のリモート接続機能の問題であるかを明らかにすることが重要です。これを確認するには、Firefox だけを使用して問題が再現するかを試してください。例えばインスペクターツールで属性の値を設定できない場合は、Firefox のブラウザーデバッガーで属性の値を変更してみてください。ブラウザーデバッガーで再現しない場合は、Thunderbird のバグとして報告してください。再現する場合は、Firefox/開発ツールのバグとして報告してください。</p> diff --git a/files/ja/tools/responsive_design_mode/index.html b/files/ja/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..f5d713a53d --- /dev/null +++ b/files/ja/tools/responsive_design_mode/index.html @@ -0,0 +1,222 @@ +--- +title: レスポンシブデザインモード +slug: Tools/Responsive_Design_Mode +tags: + - Design + - Dev Tools + - Firefox + - Guide + - Responsive Design + - Tools + - Web Development + - 'l10n:priority' +translation_of: Tools/Responsive_Design_Mode +--- +<p>{{ToolsSidebar}}</p> + +<p><a href="/ja/Apps/Progressive/Responsive">レスポンシブデザイン</a> は、さまざまな端末、特にデスクトップやラップトップだけでなく携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。</p> + +<p>もっとも明らかな要素は画面のサイズですが、ほかにもディスプレイの画素密度やタッチをサポートするかといった要素があります。レスポンシブデザインモードは、さまざまな端末でウェブサイトがどのように表示および動作するかを確認するために、これらの要素をシミュレーションする手段を提供します。</p> + +<h2 id="Toggling_Responsive_Design_Mode" name="Toggling_Responsive_Design_Mode">レスポンシブデザインモードを切り替える</h2> + +<p>レスポンシブデザインモードを切り替える方法は 3 つあります:</p> + +<ul> + <li>Firefox メニュー (メニューバーを表示している場合や macOS では [ツール] メニュー) の [ウェブ開発] サブメニューで [レスポンシブデザインモード] を選択します。</li> + <li>開発ツールのツールボックスで、<a href="/ja/docs/Tools/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールバー</a> の [レスポンシブデザインモード] ボタンを押します。<img alt="" src="https://mdn.mozillademos.org/files/16318/RDM_button.png" style="display: block; height: 664px; margin-left: auto; margin-right: auto; width: 852px;"></li> + <li>キーボードで Ctrl + Shift + M (OS X では Cmd + Opt + M) を押下します。</li> +</ul> + +<h2 id="Using_Responsive_Design_Mode" name="Using_Responsive_Design_Mode">レスポンシブデザインモードを使用する</h2> + +<p>レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。初期状態は 320 x 480 ピクセルです:</p> + +<div class="note"> +<p><strong>メモ:</strong> レスポンシブデザインモードで選択したデバイスは、セッション間で保存されます。</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16319/RDM.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 852px;"></p> + +<p>レスポンシブデザインモード自体の切り替えとは別に、開発ツールのツールボックスを表示または非表示にすることができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16320/RDMdevtools.png" style="display: block; height: 799px; margin-left: auto; margin-right: auto; width: 852px;"></p> + +<p>レスポンシブデザインモードを有効にした状態で、コンテンツ領域がリサイズされたまま通常どおりにブラウジングを続けることができます。</p> + +<h2 id="Device_selection" name="Device_selection">端末選択</h2> + +<p>ビューポートの上に [端末が選択されていません] と表示されています。ここをクリックすると、端末名の一覧が開きます。端末を選択すると、レスポンシブデザインモードは以下の特定を、その端末に合わせて設定します:</p> + +<ul> + <li>画面のサイズ</li> + <li>端末の画素密度 (端末の物理ピクセルと端末に依存しないピクセルの比率)</li> + <li>タッチイベントのシミュレーション</li> +</ul> + +<p>さらに Firefox は <a href="/ja/docs/Web/HTTP/Headers/User-Agent">User-Agent</a> HTTP リクエストヘッダーを、選択した端末の既定のブラウザーであると名乗るように設定します。例えば iPhone を選択すると、Firefox は自身が Safari であると名乗ります。<code><a href="/ja/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> プロパティも同じ値を設定します。</p> + +<p>{{EmbedYouTube("JNAyKemudv0")}}</p> + +<p>ドロップダウンリストにある端末は、選択可能な端末のサブセットです。ドロップダウンリストの末尾に [リストを編集...] という項目があります。これを選択するとすべての選択肢を含むパネルが表れて、ドロップダウンリストに表示したい端末を選択できます。端末一式や各端末に関連付けられている値は、<span class="im"><a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices</a></span> から取得できます。</p> + +<h3 id="Saving_custom_devices" name="Saving_custom_devices">カスタム端末を保存する</h3> + +<p>Firefox 54 より、レスポンシブデザインモードでカスタム端末を保存できます。それぞれの端末で以下の特性を持つことができます:</p> + +<ul> + <li>サイズ</li> + <li>端末の画素密度 (devicePixelRatio)</li> + <li>ユーザーエージェント</li> + <li>タッチのサポート</li> +</ul> + +<p>また、端末モデル名にマウスポインターを乗せると、既存の端末の特性をツールチップでプレビューできます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14797/RDM%20Custom%20Device.gif" style="display: block; height: 800px; margin: 0px auto; width: 800px;"></p> + +<h2 id="Device_controls" name="Device_controls">端末の制御</h2> + +<p>ほとんどの端末の特性について、特別な値を与えることもできます。</p> + +<h3 id="Setting_screen_size" name="Setting_screen_size">画面のサイズを設定する</h3> + +<p>画面のサイズを設定するには、ビューポートの下にある値をクリックして編集します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14939/rdm-set-size-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<p>ビューポートの右下の角をドラッグして、サイズを変更することもできます。</p> + +<p>また Firefox 59 より、キーボードで画面のサイズを編集できます。2 つの寸法の値のいずれかにフォーカスがある (またはカーソルがある) ときに上下のカーソルキーを押すか押し続けて、寸法を 1 ピクセルずつ増減できます。</p> + +<p>より早く寸法を変えたい場合は、Shift キーを押しながら上下カーソルキーを押すか押し続けると、寸法を 10 ピクセルずつ増減できます。</p> + +<h3 id="Setting_device_pixel_ratio" name="Setting_device_pixel_ratio">端末の画素密度を設定する</h3> + +<p>端末の画素密度を設定するには、[DPR] のリストボックスをクリックして希望する値を選択します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14941/rdm-set-dpr-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<h3 id="Toggling_touch_event_simulation" name="Toggling_touch_event_simulation">タッチイベントのシミュレーションを切り替える</h3> + +<p>タッチイベントのシミュレーションを有効化/無効化するには、人差し指を立てている手のアイコンをクリックします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14935/rdm-toggle-touch-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<p>タッチイベントのシミュレーションを有効化すると、マウスイベントを <a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events">タッチイベント</a> に変換します。</p> + +<h3 id="Controlling_page_reload_behavior" name="Controlling_page_reload_behavior">ページ再読み込みの動作を制御する</h3> + +<p><em>自動再読み込み</em> ドロップダウンメニューは、Firefox 60 の新機能です:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15841/reload-behavior-controls.png" style="display: block; margin: 0 auto;"></p> + +<p>メニューをクリックすると 2 つの項目があり、どちらもデフォルトで表示されます:</p> + +<ul> + <li>タッチシミュレーションが変更されたときに再読み込み: チェックボックスにチェックを入れると、タッチイベントのシミュレーションを有効化すると自動的にページを再読み込みします。</li> + <li>ユーザーエージェントが変更されたときに再読み込み: チェックボックスにチェックを入れると、ユーザーエージェントを変更すると自動的にページを再読み込みします。</li> +</ul> + +<p>Firefox 60 より前のバージョンでは、自動的に再読み込みしていました。これは、再読み込みしなければ適用されないページがあるためです。例えば、多くのページが読み込み時にタッチのサポートを確認して、サポートされている場合に限りイベントハンドラーを追加したり、特定のブラウザーでのみ特定の機能を有効化したりしています。</p> + +<p>しかし、このような機能を実行することに興味がない場合 (さまざまなサイズで全体のレイアウトを確認するなど) は、再読み込みで時間を浪費してよい仕事ができなくなるかもしれませんので、再読み込みを制御できると役に立ちます。</p> + +<p>はじめてこの設定を変更したときに再読み込みを自動的に行わないことと、自動的に再読み込みできるようにする方法を示す警告メッセージを表示します。例えば:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15840/page-reload-warning.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Toggling_orientation" name="Toggling_orientation">向きを切り替える</h3> + +<p>画面の向きをポートレートまたはランドスケープに切り替えるには、端末選択の隣にあるアイコンをクリックします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14937/rdm-toggle-orientation-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<h2 id="Network_throttling" name="Network_throttling">ネットワークを調整する</h2> + +<p>とても高速なネットワーク接続を使用してすべての開発やテストを行っている場合は、低速な接続を使用してアクセスしたときにサイトで問題が発生するかもしれません。レスポンシブデザインモードで、さまざまな種類のネットワークの特徴をほぼエミュレートするようブラウザに指示できます。</p> + +<p>以下の特徴をエミュレートします:</p> + +<ul> + <li>ダウンロード速度</li> + <li>アップロード速度</li> + <li>最小の遅延</li> +</ul> + +<p>以下の表で各ネットワークに関連付けられた値を示しますが、正確なパフォーマンスを測定するためにこの機能を頼らないようにしてください。これは、さまざまな状況におけるユーザーエクスペリエンスのおおまかな見解を示そうとするものです。</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">選択肢</th> + <th scope="col">ダウンロード速度</th> + <th scope="col">アップロード速度</th> + <th scope="col">最小の遅延 (ms)</th> + </tr> + </thead> + <tbody> + <tr> + <td>GPRS</td> + <td>50 Kb/s</td> + <td>20 Kb/s</td> + <td>500</td> + </tr> + <tr> + <td>Regular 2G</td> + <td>250 Kb/s</td> + <td>50 Kb/s</td> + <td>300</td> + </tr> + <tr> + <td>Good 2G</td> + <td>450 Kb/s</td> + <td>150 Kb/s</td> + <td>150</td> + </tr> + <tr> + <td>Regular 3G</td> + <td>750 Kb/s</td> + <td>250 Kb/s</td> + <td>100</td> + </tr> + <tr> + <td>Good 3G</td> + <td>1.5 Mb/s</td> + <td>750 Kb/s</td> + <td>40</td> + </tr> + <tr> + <td>Regular 4G/LTE</td> + <td>4 Mb/s</td> + <td>3 Mb/s</td> + <td>20</td> + </tr> + <tr> + <td>DSL</td> + <td>2 Mb/s</td> + <td>1 Mb/s</td> + <td>5</td> + </tr> + <tr> + <td>Wi-Fi</td> + <td>30 Mb/s</td> + <td>15 Mb/s</td> + <td>2</td> + </tr> + </tbody> +</table> + +<p>ネットワークを選択するには、初期値として [No throttling] と表示されているリストをクリックします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14945/rdm-network-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<h2 id="Taking_a_screenshot" name="Taking_a_screenshot">スクリーンショットを取得する</h2> + +<p>カメラのアイコンをクリックすると、ビューポートのスクリーンショットを取得します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14943/rdm-screenshot-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<p>スクリーンショットは、Firefox の既定のダウンロード先に保存します。</p> + +<p>Firefox 53 より、開発ツールの <a href="/ja/docs/Tools/Settings">オプション</a> ページで "Screenshot to clipboard" にチェックを入れると、スクリーンショットをシステムのクリップボードにもコピーします。</p> 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 new file mode 100644 index 0000000000..4e7ccec365 --- /dev/null +++ b/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html @@ -0,0 +1,70 @@ +--- +title: レスポンシブデザインモード (Firefox 52 より前) +slug: Tools/Responsive_Design_Mode_(before_Firefox_52) +translation_of: Tools/Responsive_Design_Mode +--- +<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/rulers/index.html b/files/ja/tools/rulers/index.html new file mode 100644 index 0000000000..1e5c8eae3e --- /dev/null +++ b/files/ja/tools/rulers/index.html @@ -0,0 +1,31 @@ +--- +title: 定規 +slug: Tools/Rulers +tags: + - DevTools + - Firefox + - Rulers + - Tools +translation_of: Tools/Rulers +--- +<div>{{ToolsSidebar}}</div><p class="geckoVersionNote">Firefox 40 の新機能</p> + +<p>Firefox 40 以降では、ページに対して水平方向と垂直方向に定規を表示できるようになりました。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15783/rulers-display.png" style="display: block; margin-left: auto; margin-right: auto;">定規で表示されている数値の単位はピクセルとなります。</p> + +<p>Firefox 59 よりビューポートの右上付近に、ビューポートの寸法を表示します。</p> + +<p>次のどちらかで、定規を表示できます:</p> + +<ul> + <li>開発者ツールバー (Shift + F2) で <code>rulers</code> コマンドを実行する</li> + <li>開発者ツールの定規の表示切替ボタンを利用する。このボタンは標準では表示されていません。<a href="/ja/docs/Tools/Tools_Toolbox#Settings">設定</a> の「利用可能なツールボックスのボタン」でチェックを入れることで、ボタンが表示されるようになります。チェックを入れると、ツールボックスの右上のオプションボタンと同じ場所に、"ページに定規を表示します" ボタンが現れます。<img alt="" src="https://mdn.mozillademos.org/files/15784/rulers-button.png" style="display: block; height: 216px; margin-left: auto; margin-right: auto; width: 328px;"></li> +</ul> + +<p>定規を使用するときは、以下の動作に留意してください。</p> + +<ul> + <li><strong>新しいタブ</strong>を開いたり<strong>ページの再読み込み</strong>を行った場合は、rulers コマンドを再実行しなければなりません。</li> + <li>このコマンドの効果は永続的ではありません。</li> +</ul> diff --git a/files/ja/tools/scratchpad/index.html b/files/ja/tools/scratchpad/index.html new file mode 100644 index 0000000000..a741bb2517 --- /dev/null +++ b/files/ja/tools/scratchpad/index.html @@ -0,0 +1,117 @@ +--- +title: スクラッチパッド +slug: Tools/Scratchpad +tags: + - Tools + - Web Development + - 'Web Development:Tools' + - 'l10n:priority' +translation_of: Archive/Tools/Scratchpad +--- +<p>{{ToolsSidebar}}</p> + +<p>スクラッチパッドは、JavaScript の実験環境を提供します。ウェブページと対話するコードの記述、実行、結果の確認ができます。</p> + +<p>一度に 1 行のコードを実行するよう設計されている <a href="/ja/docs/Tools/Web_Console" title="Using the Web Console">Web コンソール </a>とは異なり、スクラッチパッドはより大きな JavaScript コードのかたまりを編集でき、そして出力結果の用途に応じたさまざまな方法でコードを実行することができます。</p> + +<p>{{EmbedYouTube("Pt7DZACyClM")}}</p> + +<h2 id="Usage" name="Usage">使用方法</h2> + +<h3 id="Opening_Scratchpad_in_its_own_window" name="Opening_Scratchpad_in_its_own_window">個別のウィンドウでスクラッチパッドを開く</h3> + +<p>個別のウィンドウでスクラッチパッドを開く方法がいくつかあります:</p> + +<ul> + <li><kbd>Shift</kbd> + <kbd>F4</kbd> を押下するか、Web 開発メニュー (macOS や Linux ではツールメニューのサブメニューとして存在します) でスクラッチパッドを選択します。</li> + <li>メインツールバーまたはハンバーガーメニュー (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">) の中にあるレンチのアイコン (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">) をクリックして、"スクラッチパッド" を選択します。</li> +</ul> + +<p>個別のウィンドウでスクラッチパッドが開きます。</p> + +<h3 id="Opening_Scratchpad_in_the_Toolbox" name="Opening_Scratchpad_in_the_Toolbox">ツールボックス内にスクラッチパッドを開く</h3> + +<div class="blockIndicator geckoVersionNote">Firefox 47 の新機能</div> + +<p>Firefox 47 より、<a href="/ja/docs/Tools/Tools_Toolbox">ツールボックス</a> の内部にスクラッチパッドを開くことができます。始めに、<a href="/ja/docs/Tools/Tools_Toolbox#Settings_2">オプション </a>ページで "標準の Firefox 開発ツール" の "スクラッチパッド" にチェックを入れなければなりません。</p> + +<p>以上でスクラッチパッドが、ページインスペクターや Web コンソールなど他のツールと並んで、ツールボックス内で使用できます。これは、<a href="/ja/docs/Tools/Web_Console/Split_console">コンソールの常時表示</a> で特に役立ちます。スクラッチパッドを持続的なマルチランエディターとして、またコンソールをページと対話するツールとして使用できます。</p> + +<h3 id="Editing" name="Editing">編集</h3> + +<p>スクラッチパッドのウィンドウは以下のような外見です (macOS では画面上部にメニューバーが表示されます):</p> + +<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p> + +<p>ファイルメニューでは JavaScript コードの保存や読み込みを行うことができますので、後でコードを再利用することができます。</p> + +<h4 id="Code_completion" name="Code_completion">コード補完</h4> + +<p>スクラッチパッドに <a href="http://ternjs.net/">tern コード解析エンジン</a> を統合して、オートコンプリートの候補やカレントシンボルに関する情報を表示するポップアップを提供するために使用しています。<kbd>Ctrl</kbd> + <kbd>Space</kbd> を押下すると、オートコンプリート候補を表示します。</p> + +<p>例えば、<kbd>d</kbd> と入力して <kbd>Ctrl</kbd> + <kbd>Space</kbd> を押下してみましょう。以下のように、オートコンプリートボックスを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">各候補の隣にあるアイコンは、型を示します。またハイライト中の候補について、詳細情報をポップアップで表示します。<kbd>↑</kbd> および <kbd>↓</kbd> キーで候補を行き来でき、<kbd>Enter</kbd> または <kbd>Tab</kbd> でハイライト中の候補を選択します。</p> + +<h4 id="Inline_documentation" name="Inline_documentation">インラインドキュメント</h4> + +<p>識別子にカーソルがあるときに <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd> を押下すると、インラインドキュメントをポップアップ表示します。例えば <code>document</code>.<code>addEventListener</code> と入力して <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd> を押下すると、関数の構文や簡単な説明といった概要を記載したポップアップを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;">"[docs]" は、そのシンボルに関する MDN のドキュメントへのリンクです。</p> + +<h3 id="Executing" name="Executing">実行</h3> + +<p class="note">コードを記述したら、実行したいコードを選択してください。何も選択しない場合は、ウィンドウ内のコードすべてを実行します。そして、コードの実行方法を上部のボタン、実行メニュー、またはコンテキストメニューで選択してください。コードは現在選択しているタブのスコープで実行します。関数の外部で宣言した変数は、そのタブのグローバルオブジェクトに追加されます。</p> + +<p>実行方法は 4 種類あります。</p> + +<h4 id="Run" name="Run">実行</h4> + +<p>実行を選択すると、選択したコードが実行されます。これは結果を確認する必要性がない、ページのコンテンツを操作する関数や他のコードを実行するものです。</p> + +<h4 id="Inspect" name="Inspect">調査</h4> + +<p>調査は、コードを実行オプションのように実行します。ただし、実行後に戻り値の検証を行うことができるオブジェクトインスペクターが開きます。</p> + +<p>例えば、以下のコードを入力します:</p> + +<pre class="brush: js">window +</pre> + +<p>そして調査を選択すると、以下のようなオブジェクトインスペクターが表示されます:</p> + +<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p> + +<h4 id="Display" name="Display">表示</h4> + +<p>表示は選択されたコードを実行して、その結果をスクラッチパッドのエディター内にコメントとして挿入しますので、<a href="http://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a> として使用できます。</p> + +<h4 id="Reload_And_Run" name="Reload_And_Run">再読み込みして実行</h4> + +<p>再読み込みして実行は、実行メニューからのみ使用できます。始めにページを再読み込みして、ページの "load" イベントが発生したときのコードを実行します。これは、クリーンな環境でコードを実行するのに役立ちます。</p> + +<h2 id="Running_Scratchpad_in_the_browser_context" name="Running_Scratchpad_in_the_browser_context">ブラウザーコンテキストでスクラッチパッドを実行する</h2> + +<p>スクラッチパッドは特定のウェブページだけでなく、ブラウザー全体のコンテキストでも実行できます。これは Firefox 自体での作業やアドオンの開発で役立ちます。これを行うには、<a href="/ja/docs/Tools/Tools_Toolbox#Settings_2">開発ツールのオプション</a> で "ブラウザーとアドオンのデバッガーを有効" にチェックを入れてください。すると、実行環境メニューにブラウザーという選択肢が加わります。これを選択すると、いくつかのグローバルオブジェクトを調査するとわかるとおり、スコープがページのコンテンツではなくブラウザー全体になります:</p> + +<pre class="brush: js">window +/* +[object ChromeWindow] +*/ + +gBrowser +/* +[object XULElement] +*/</pre> + +<p>スニペットファイルの先頭行に<br> + <code>// -sp-context: browser</code><br> + と記入した場合は、スクラッチパッドの実行コンテキストがブラウザーに設定されます。</p> + +<h2 id="Keyboard_shortcuts" name="Keyboard_shortcuts">キーボードショートカット</h2> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "scratchpad")}}</p> + +<h3 id="Source_editor_shortcuts" name="Source_editor_shortcuts">ソースエディタのショートカット</h3> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "source-editor")}}</p> diff --git a/files/ja/tools/settings/index.html b/files/ja/tools/settings/index.html new file mode 100644 index 0000000000..dd567a77a4 --- /dev/null +++ b/files/ja/tools/settings/index.html @@ -0,0 +1,180 @@ +--- +title: 設定 +slug: Tools/Settings +translation_of: Tools/Settings +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Opening_Settings" name="Opening_Settings">オプションを開く</h2> + +<p>Firefox 62 から、開発者ツールの設定を開くためのアイコンがタブの右側にある ...(エリプシス) をクリックもしくはタッチすることでアクセスするメニューに移動しました。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16085/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p> + +<p>メニューには、開発者ツールの場所を制御する設定が含まれています。 ウィンドウの下部にある既定の設定を選択するか、ツールを画面の左側または右側に移動することができます。これらの設定はワイドスクリーンモニターを使用している場合に特に便利です。別のウィンドウでツールを開くこともできます。</p> + +<p><strong>Show split console</strong> は、コンソールを示すツールの一番下にセクションを追加します。コマンドラインとコンソール出力の1行または2行を表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16086/split_console.png" style="height: 352px; width: 902px;"></p> + +<p>その他の設定は、開発者ツール設定ウィンドウにあります。設定を表示するには、開発者ツールを開き、次の操作を行います。</p> + +<ul> + <li>メニューの [設定] コマンドをクリックします。<img alt="" src="https://mdn.mozillademos.org/files/16082/DevTools_Menu.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></li> + <li>もしくは <kbd>F1</kbd> を押してアクティブなツールと設定ペインを切り替えます</li> +</ul> + +<p>設定ペインは次のようになります。</p> + +<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/16081/dev_tools_settings.png"></p> + +<h2 id="Categories" name="Categories">カテゴリー</h2> + +<h3 id="Default_Firefox_Developer_Tools" name="Default_Firefox_Developer_Tools">デフォルトの Firefox 開発ツール</h3> + +<p>このチェックボックスのグループでは、ツールボックスで有効にするツールを決定します。新しいツールは、Firefox に搭載されていてもデフォルトで無効になっていることがあります。</p> + +<h3 id="Available_Toolbox_Buttons" name="Available_Toolbox_Buttons">利用可能なツールボックスのボタン</h3> + +<p>このチェックボックスのグループでは、どのツールを <a href="/ja/docs/Tools/Tools_Toolbox#Extra_tools">ツールボックスのツールバーアイコンとして表示するか</a> を決定します。</p> + +<p>Firefox 62 以降、「現在の対象ドキュメントとしてiframeを選択」オプションがチェックされている場合、現在のページに iframe が含まれていなくても、設定タブが表示されている間、ツールバーにアイコンが表示されます。</p> + +<p>Firefox 52 では、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"要素を選択" ボタン</a> を切り替えるチェックボックスを削除しました。"要素を選択" ボタンは常に表示します。</p> + +<h3 id="Themes" name="Themes">テーマ</h3> + +<p> </p> + +<p>これにより、2つのテーマのいずれかを選択できます。</p> + +<ul> + <li> + <p>デフォルトは明るいテーマです：</p> + + <p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/16083/theme-light.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></p> + </li> + <li> + <p>暗いテーマ (<a href="/ja/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a> のデフォルト)：</p> + + <p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/16084/theme-dark.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></p> + </li> +</ul> + +<p> </p> + +<h3 id="Common_preferences" name="Common_preferences">共通設定</h3> + +<p>複数のツールに適用する設定です。ひとつだけあります:</p> + +<dl> + <dt><em>ログ出力を残す</em></dt> + <dd>ウェブコンソールおよびネットワークモニターで、別のページへ移動するときに出力内容を消去するかを設定します。</dd> +</dl> + +<div class="note"> +<p>共通設定が設定に含まれていない場合、ブラウザのアドレスバーにある 'about:config' URLを使用して、'devtools.webconsole.persistlog' を検索してこの値を true に切り替えることで、Web コンソールログを永続化できます</p> +</div> + +<h3 id="Inspector" name="Inspector">調査</h3> + +<dl> + <dt><em>ブラウザー CSS を表示</em></dt> + <dd>ブラウザーが適用するスタイル (<a href="/ja/docs/Web/CSS/Cascade">ユーザーエージェントスタイル</a>) をインスペクターの <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">ルールビュー</a> に表示するかを設定します。この設定はインスペクターの <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">計算済みビュー</a> にある "ブラウザー CSS" チェックボックスとは無関係であることに注意してください。</dd> + <dt><em>DOM 属性値を省略</em></dt> + <dd>デフォルトでは、インスペクターは 120 文字を超える DOM 属性を切り詰めて表示します。チェックボックスのチェックを外すと、この動作を行いません。この設定は、about:config の "devtools.markup.collapseAttributes" を切り替えます。属性を切り詰める文字数のしきい値を変更するには、about:config で "devtools.markup.collapseAttributeLength" を編集してください。</dd> + <dt><em>既定の色単位</em></dt> + <dd>調査時に色をどのように表現するかの設定です: + <ul> + <li>16 進数</li> + <li>HSL(A)</li> + <li>RGB(A)</li> + <li>色の名前</li> + <li>記述通りの単位</li> + </ul> + </dd> + <dt><em>レイアウトパネルを有効化</em></dt> + <dd>実験的なレイアウトパネルを有効化します。この設定は Firefox Nightly にのみ存在します。</dd> +</dl> + +<h3 id="Web_Console" name="Web_Console">ウェブコンソール</h3> + +<dl> + <dt><em>タイムスタンプを表示</em></dt> + <dd>ウェブコンソールでタイムスタンプを表示するかの設定です。デフォルトでウェブコンソールはタイムスタンプを表示しません。</dd> + <dt><em>新しいコンソールフロントエンドを有効化</em></dt> + <dd>実験的な新しいコンソールに切り替えます。この設定は Firefox Nightly にのみ存在します。</dd> +</dl> + +<h3 id="Debugger" name="Debugger">デバッガー</h3> + +<dl> + <dt><em>ソースマップを有効化</em></dt> + <dd>デバッガーで <a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップのサポート</a> を有効化します。</dd> + <dt><em>新しいデバッガーフロントエンドを有効化</em></dt> + <dd>新しいデバッガーを有効化します。この設定は Firefox Nightly にのみ存在します。</dd> +</dl> + +<h3 id="Style_Editor" name="Style_Editor">スタイルエディター</h3> + +<dl> + <dt><em>元のソースを表示</em></dt> + <dd>この設定を有効にすると、ソースマップをサポートする CSS プリプロセッサーを使用している場合にスタイルエディターが、生成された CSS ではなく元のプリプロセッサーのソースを表示できます。<a href="/ja/docs/Tools/Style_Editor#Source_map_support">スタイルエディターの CSS ソースマップのサポートについて確認してください</a>。この設定を有効にすると、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">ページインスペクターのルールビューでも元のソースへリンクするようになります</a>。</dd> + <dt><em>CSS 自動補完</em></dt> + <dd>スタイルエディターで候補の自動補完が可能になります。</dd> +</dl> + +<h3 id="Screenshot_Behavior" name="Screenshot_Behavior">スクリーンショットの動作</h3> + +<dl> + <dt><em>スクリーンショットをクリップボードへコピー</em></dt> + <dd><a href="/ja/docs/Tools/Screenshot_tool">スクリーンショットツール</a> のアイコンをクリックすると、スクリーンショットの画像をクリップボードにコピーします (ダウンロードディレクトリーへの保存も行います)。Firefox 53 の新機能です。</dd> + <dt><em>カメラのシャッター音を再生</em></dt> + <dd><a href="/ja/docs/Tools/Screenshot_tool">スクリーンショットツール</a> のアイコンをクリックしたとき、シャッターの音を鳴らします。Firefox 53 の新機能です。</dd> +</dl> + +<h3 id="Editor_Preferences" name="Editor_Preferences">エディター設定</h3> + +<p>これは <a href="http://codemirror.net/">CodeMirror</a> ソースエディターの設定です。このエディターは Firefox に内蔵されており、<a href="/ja/docs/Tools/Scratchpad">スクラッチパッド</a> や <a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a> など、いくつかの開発ツールで使用しています。</p> + +<dl> + <dt><em>インデントを検知</em></dt> + <dd>カーソルがある行のインデント状態に基づいて、新しい行を自動的にインデントします。</dd> + <dt><em>閉じ括弧自動入力</em></dt> + <dt> </dt> + <dt><em>インデントにスペース文字を使う</em></dt> + <dt> </dt> + <dt><em>タブ幅</em></dt> + <dt> </dt> + <dt><em>キー割り当て</em></dt> + <dd>既定の CodeMirror のキー割り当て、またはいくつかの著名なエディターのキー割り当てから選択します: + <ul> + <li>Vim</li> + <li>Emacs</li> + <li>Sublime Text</li> + </ul> + </dd> +</dl> + +<h3 id="Advanced_settings" name="Advanced_settings">詳細設定</h3> + +<dl> + <dt><em>Gecko プラットフォームのデータを表示</em></dt> + <dd>プロファイルに Gecko プラットフォームのシンボルを含めるかを設定します。</dd> + <dt><em>HTTP キャッシュを無効化 (ツールボックスを開いているとき)</em></dt> + <dd>ツールボックスを開いているすべてのタブで、最初に読み込む場合のパフォーマンスをシミュレーションするため、ブラウザーの HTTP キャッシュを無効にします。この設定は持続的ですので、設定を行った後にツールボックスを開き直しても、キャッシュは無効化されたままになります。開発ツールを閉じた状態では、キャッシュが有効になります。なお、Service Workers はこの設定の影響を受けません。 + <div class="note">バージョン 49 より前の Firefox ではこのオプションの名称が [キャッシュを無効] でしたが、HTTP キャッシュに影響があって <a href="/ja/docs/Web/API/Service_Worker_API">Service Workers</a> や <a href="/ja/docs/Web/API/Cache">Cache API</a> には影響がないことを明確にするため改名しました。</div> + </dd> + <dt><em>JavaScript を無効化</em></dt> + <dd>JavaScript が無効な状態でタブをリロードします。</dd> + <dt><em>HTTP による Service Workers を有効化 (ツールボックスを開いたとき)</em></dt> + <dd>安全ではないウェブサイトから Service Worker を登録可能にします</dd> + <dt><em>ブラウザーとアドオンのデバッガーを有効化</em></dt> + <dd>ウェブコンテンツだけではなく、ブラウザー自体のコンテキストで開発ツールを使用できます。</dd> + <dt><em>リモートデバッガーを有効化</em></dt> + <dd>開発ツールで <a href="/ja/docs/Tools/Remote_Debugging">リモートの Firefox インスタンスのデバッグ</a> を可能にします。</dd> + <dt><em>Worker のデバッグを有効化 (開発ツール)</em></dt> + <dd>デバッガーで、Worker をデバッグするためのパネルを有効化します。 + <p class="note">注記: Firefox 56 から <a href="/ja/docs/Tools/Debugger">新しいデバッガーのUI</a> を搭載したため、このオプションを UI から削除しました。ただし、設定項目 <code>devtools.debugger.workers</code> を <code>true</code> に設定すると、古い UI を有効化できます。</p> + </dd> +</dl> diff --git a/files/ja/tools/shader_editor/index.html b/files/ja/tools/shader_editor/index.html new file mode 100644 index 0000000000..43b1f5035b --- /dev/null +++ b/files/ja/tools/shader_editor/index.html @@ -0,0 +1,60 @@ +--- +title: シェーダーエディター +slug: Tools/Shader_Editor +translation_of: Tools/Shader_Editor +--- +<div>{{ToolsSidebar}}</div><p>シェーダーエディターで、<a href="/ja/docs/Web/WebGL">WebGL</a> で使用するバーテックスシェーダーおよびフラグメントシェーダーの参照や編集ができます。</p> + +<p>{{EmbedYouTube("hnoKqFuJhu0")}}</p> + +<p>WebGL は、プラグインを使用せずにブラウザーでインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。WebGL では、<a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">OpenGL レンダリングパイプライン</a> の適切なステージで名付けられている、"シェーダー" というプログラムを 2 つ提供します。ひとつは <a href="https://www.opengl.org/wiki/Vertex_Shader">バーテックスシェーダー</a> であり、これは描画する各頂点の座標を提供します。もうひとつは <a href="https://www.opengl.org/wiki/Fragment_Shader">フラグメントシェーダー</a> であり、こちらは描画する各ピクセルの色を提供します。</p> + +<p>これらのシェーダーは OpenGL Shading Language、別名 <a href="https://www.opengl.org/documentation/glsl/">GLSL</a> で記述します。WebGL では、それらをさまざまな方法でページに含めることができます。JavaScript のソース内にハードコードする、<script> タグでインクルードする別ファイルに書き込む、プレーンテキストとしてサーバーから取得する、といった方法があります。それらはページで実行する JavaScript コードによって、コンパイルのために WebGL API を使用して送出され、そしてデバイスの GPU で実行されます。</p> + +<p>シェーダーエディターでは、バーテックスシェーダーおよびフラグメントシェーダーのソースを調査および編集できます。</p> + +<p>こちらは複雑なアプリケーション (<a href="http://www.unrealengine.com/html5/">Unreal Engine</a> のデモ) でシェーダーエディターをどのように使用できるかを示したスクリーンキャストです:</p> + +<p>{{EmbedYouTube("YBErisxQkPQ")}}</p> + +<h2 id="Opening_the_Shader_Editor" name="Opening_the_Shader_Editor">シェーダーエディターを開く</h2> + +<p>シェーダーエディターはデフォルトで無効です。有効にするには <a href="/ja/docs/Tools_Toolbox#Settings">開発ツールのオプション</a> を開いて、[標準の Firefox 開発ツール] で [シェーダーエディター] にチェックを入れてください。これで、ツールバーに [シェーダーエディター] が現れます。これをクリックすると、シェーダーエディターが開きます。</p> + +<p>始めはページの再読み込みを求めるボタンが表示された、ブランクのウィンドウが現れます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>作業を始めるには、WebGL コンテキストを生成するページおよびプログラムを読み込みます。以降のスクリーンショットは、<a href="http://www.unrealengine.com/html5/">Unreal Engine</a> のデモを使用して取得しました。</p> + +<p>3 つのペインに分割されたウィンドウが現れます。左側はすべての GLSL プログラムのリスト、中央は選択したプログラムのバーテックスシェーダー、右側は選択したプログラムのフラグメントシェーダーです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Managing_programs" name="Managing_programs">プログラムの制御</h2> + +<p>左側のペインでは、現在の WebGL コンテキストで使用しているすべてのプログラムを一覧表示します。リストの項目にマウスポインタを載せると、そのプログラムで描画したジオメトリーを赤色でハイライトします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>プログラム項目の左側にある目玉のアイコンをクリックすると、そのプログラムを無効化します。これは特定のシェーダーに注目したり、重なっているジオメトリーを隠したりするのに役立ちます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>項目をクリックすると、そのバーテックスシェーダーとフラグメントシェーダーが他の 2 つのペインに表示され、編集ができます。</p> + +<h2 id="Editing_shaders" name="Editing_shaders">シェーダーの編集</h2> + +<p>中央および右側のペインでは、選択したプログラムのバーテックスシェーダーおよびフラグメントシェーダーを表示します。</p> + +<p>これらのプログラムは編集することが可能であり、編集結果は次に WebGL コンテキストが再描画されるとき (例えば次のアニメーションフレーム) で確認できます。例えば、色を変更できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>エディターは、コード中の構文エラーをハイライトします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>エラーがある行の横に表示される×印にマウスポインタを載せると、詳しい問題点を確認できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ja/tools/storage_inspector/index.html b/files/ja/tools/storage_inspector/index.html new file mode 100644 index 0000000000..ca4b762a17 --- /dev/null +++ b/files/ja/tools/storage_inspector/index.html @@ -0,0 +1,206 @@ +--- +title: ストレージインスペクター +slug: Tools/Storage_Inspector +tags: + - Cookies + - Dev Tools + - Firefox + - Guide + - IndexedDB + - Local Storage + - Session Storage + - Storage + - Tools +translation_of: Tools/Storage_Inspector +--- +<p>{{ToolsSidebar}}</p> + +<div class="geckoVersionNote"> +<p>ストレージインスペクターはデフォルトで無効です。<a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション</a> で有効化できます。</p> +</div> + +<p>ストレージインスペクターで、ウェブページが使用できるさまざまな種類のストレージを調査できます。現在は、以下の種類のストレージの調査に使用できます:</p> + +<ul> + <li><em>キャッシュストレージ</em> - <a href="/ja/docs/Web/API/Cache">Cache API</a> を使用して作成した DOM キャッシュ</li> + <li><em>Cookie</em> - ページ自身およびページ内の iframe が作成したすべての <a href="/ja/docs/Web/API/Document/cookie">Cookie</a> を確認できます。ネットワーク呼び出しの応答の一部として作成された Cookie も表示しますが、ツールを開いている間に発生した呼び出しによるものだけが対象です。</li> + <li><em>IndexedDB</em> - ページ自身およびページ内の iframe が作成したすべての <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> データベースで、データベースのオブジェクトストアおよびオブジェクトストア内に保存しているアイテムを確認できます。</li> + <li><em>ローカルストレージ</em> - ページ自身およびページ内の iframe が作成したすべての <a href="/ja/docs/Web/API/Window/localStorage">ローカルストレージ</a> アイテムを確認できます。</li> + <li><em>セッションストレージ</em> - ページ自身およびページ内の iframe が作成したすべての <a href="/ja/docs/Web/API/Window/sessionStorage">セッションストレージ</a> アイテムを確認できます。</li> +</ul> + +<p>ストレージインスペクターは当分の間、読み取り専用のビューのみでストレージを表示します。将来のリリースでストレージコンテンツの編集を可能にするよう、作業しています。</p> + +<h2 id="Opening_the_Storage_Inspector" name="Opening_the_Storage_Inspector">ストレージインスペクターを開く</h2> + +<p>ストレージインスペクターを有効化すると、Firefox メニューパネル (メニューバーを表示している場合や Mac OS X では [ツール] メニュー) 内の [ウェブ開発] サブメニューで [ストレージインスペクター] を選択して開くことができます。または、キーボードショートカット Shift + F9 も使用できます。</p> + +<p>ストレージインスペクターがアクティブな状態で、<a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a> がブラウザウィンドウの下部に現れます。開発ツールボックスでは "ストレージ" という名称です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14247/1-storage-inspector-open.png" style="display: block; height: 846px; margin-left: auto; margin-right: auto; width: 1311px;"></p> + +<h2 id="Storage_Inspector_User_Interface" name="Storage_Inspector_User_Interface">ストレージインスペクターのユーザーインターフェイス</h2> + +<p>ストレージインスペクターの UI は 3 つの主要コンポーネントに分かれます:</p> + +<ul> + <li><a href="#storage-tree">ストレージツリー</a></li> + <li><a href="#table-widget">テーブルウィジェット</a></li> + <li><a href="#sidebar">サイドバー</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14249/2-storage-inspector-annotated.png" style="display: block; height: 858px; margin-left: auto; margin-right: auto; width: 1323px;"></p> + +<h3 id="Storage_tree" name="Storage_tree"><a name="storage-tree">ストレージツリー</a></h3> + +<p>ストレージツリーは、ストレージインスペクターが調査可能なすべてのストレージタイプを一覧表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14251/3-storage-types.png" style="display: block; height: 166px; margin-left: auto; margin-right: auto; width: 386px;"></p> + +<p>ストレージの種類の配下で、オブジェクトは生成元で分類します。Cookie では、生成元の区別にプロトコルを使用しません。IndexedDB やローカルストレージでは、生成元がプロトコルとホスト名の組み合わせになります。例えば "http://mozilla.org" と "https://mozilla.org" は異なる 2 つの生成元になりますので、ローカルストレージのアイテムは双方で共有できません。</p> + +<p>"キャッシュストレージ" では、オブジェクトを生成元とキャッシュ名で分類します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14253/4-cachestorage.png" style="display: block; height: 210px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>IndexedDB のオブジェクトは生成元、データベース名、さらにオブジェクトストア名で分類します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14255/5-indexeddb.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>Cookie、ローカルストレージ、セッションストレージは階層が 1 つだけであり、保存されているアイテムは各生成元の直下に表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14257/6-cookies.png" style="display: block; height: 598px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>ツリー内の各項目をクリックすると、子項目を展開または折りたたみできます。ツリーは最新の状況を表示しますので、新たな生成元が追加される (例えば iframe を追加するなど) と、自動的に各ストレージタイプに追加されます。</p> + +<p>ツリーでアイテムをクリックすると、アイテムの詳細情報を表形式で右側に表示します。例えばストレージタイプ Cookie 配下の生成元をクリックすると、そのドメインに属するすべての Cookie を表示します。</p> + +<h3 id="Table_Widget" name="Table_Widget"><a name="table-widget">テーブルウィジェット</a></h3> + +<p>テーブルウィジェットは、選択したツリー項目 (生成元やデータベース) に関するすべてのアイテムを表示する場所です。ストレージタイプやツリー項目に応じて、テーブルの列の数が変わります。</p> + +<p>テーブルのすべての列がリサイズ可能です。テーブルのヘッダーをコンテキストクリックして列名を選択すると、列を隠したり表示したりすることができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14259/7-col-selection.png" style="display: block; height: 594px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h3 id="Search" name="Search">検索</h3> + +<p>テーブルウィジェットの上部に検索ボックスがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14261/8-search.png" style="display: block; height: 646px; margin-left: auto; margin-right: auto; width: 912px;"></p> + +<p>これは、検索文字列にマッチするアイテムのみテーブルに表示するようフィルタリングします。検索文字列にマッチするアイテムは、いずれかのフィールド (列を非表示にしているフィールドを含む) に検索文字列を含むアイテムです。</p> + +<p>Firefox 50 より、<kbd>Ctrl</kbd> + <kbd>F</kbd> (Mac では <kbd>Cmd</kbd> + <kbd>F</kbd>) を使用して検索ボックスにフォーカスを当てることができます。</p> + +<h3 id="Add_and_refresh_storage" name="Add_and_refresh_storage">ストレージの追加と更新</h3> + +<p>新しいバージョンの Firefox では、現在表示しているストレージ種別のビューを最新の情報に更新するボタンと、可能であれば新しいストレージアイテムを追加するボタンがあります (IndexedDB や キャッシュストレージでは新しいアイテムを追加できません):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15812/add-refresh-storage.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Sidebar" name="Sidebar"><a name="sidebar">サイドバー</a></h3> + +<p>テーブルウィジェットで任意の行を選択すると、その行の詳細情報を表示するサイドバーが開きます。Cookie を選択すると、その Cookie に関するすべての詳細情報を表示します。</p> + +<p>サイドバーでは Cookie、ローカルストレージ、IndexedDB のアイテムの値を解析して、単なる文字列を有意義なものに変換します。例えば:</p> + +<ul> + <li><code>'{"foo": "bar"}'</code> のように stringify 処理が施された JSON を、<code>{foo: "bar"}</code> のように元の JSON として表示します。</li> + <li><code>"1~2~3~4"</code> や <code>"1=2=3=4"</code> のようにキーで区切られた値を、<code>[1, 2, 3, 4]</code> のように配列として表示します。</li> + <li><code>"ID=1234:foo=bar"</code> のようにキーと値のペアを含む文字列を、<code>{ID:1234, foo: "bar"}</code> のように JSON として表示します。</li> +</ul> + +<p>サイドバーの上部にある検索ボックスを使用して、表示された値をフィルタリングすることもできます。</p> + +<h2 id="Cache_Storage" name="Cache_Storage">キャッシュストレージ</h2> + +<p>キャッシュストレージの配下で、<a href="/ja/docs/Web/API/Cache">Cache API</a> を使用して作成した DOM キャッシュの内容を確認できます。キャッシュを選択すると、キャッシュに含まれているリソースの一覧を表示します。各リソースについて、以下の情報を表示します:</p> + +<ul> + <li>リソースの URL</li> + <li>リソースを取り出したリクエストに対するステータスコード</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14263/9-cachedstorage-details.png" style="display: block; height: 213px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h2 id="Cookies" name="Cookies">Cookie</h2> + +<p>ストレージツリーで Cookie ストレージ内の生成元を選択すると、その生成元向けの Cookie をテーブルウィジェットに表示します。Cookie のテーブルには以下の列があります:</p> + +<ul> + <li><em>名前</em> - Cookie の名称</li> + <li><em>パス</em> - Cookie の path プロパティ</li> + <li><em>ドメイン</em> - Cookie のドメイン</li> + <li><em>有効期限</em> - Cookie の有効期限。セッション Cookie である場合は、この値は "セッション" になります。</li> + <li><em>アクセス日時</em> - Cookie が最後に読み取られた日時</li> + <li><em>作成日時</em> — Cookie が作成された日時</li> + <li><em>値</em> - Cookie の値</li> + <li><em>HostOnly</em> - ドメイン Cookie であるか。ドメイン Cookie である場合は、ドメインの値が "." から始まります。</li> + <li><em>Secure</em> - セキュア Cookie であるか</li> + <li><em>HttpOnly</em> - HTTP Only の Cookie であるか</li> + <li><em>sameSite</em> — same-site Cookie であるかsame-site Cookie は、同一の registrable domain によって開始されたリクエストに伴う場合に限って特定の Cookie を送信するべきであると宣言することによって、CSRF や情報漏えい攻撃の危険性を緩和できます。</li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: 一部の列は、デフォルトで表示されていません。表示する列を変更するには、表示中のテーブルの見出しを右クリックまたは <kbd>Ctrl</kbd> を押しながらクリックして、コンテキストメニューで表示・非表示を選択します。</p> +</div> + +<div class="note"> +<p><strong>注記:</strong> Firefox 51 より前のバージョンでは <em>HostOnly</em>、<em>Secure</em>、<em>HttpOnly</em> の列がそれぞれ <em>isDomain</em>、<em>isSecure</em>、<em>isHttpOnly</em> という名称でした。</p> +</div> + +<p><a href="/ja/docs/Tools/Storage_Inspector#Table_Widget">テーブルウィジェット</a> 内のセルをダブルクリックして値を編集することで、Cookie を編集できます。また、"プラス" (+) ボタンをクリックして追加された行の値を希望する値に変更することで、新しい Cookie を追加できます:</p> + +<p>それぞれの行のコンテキストメニューを使用して、Cookie を削除することもできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14273/delete-cookies.png" style="display: block; height: 208px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h2 id="Local_storage_Session_storage" name="Local_storage_Session_storage">ローカルストレージ / セッションストレージ</h2> + +<p>ローカルストレージおよびセッションストレージの生成元を選択すると、ローカルストレージおよびセッションストレージに関するすべてのアイテムの名称と値をテーブルに表示します。</p> + +<p><a href="/ja/docs/Tools/Storage_Inspector#Table_Widget">テーブルウィジェット</a>内のセルをダブルクリックして値を編集することで、ローカルストレージやセッションストレージのアイテムを編集できます:</p> + +<p>{{EmbedYouTube("oeQzhpoMByw")}}</p> + +<p>コンテキストメニューを使用して、ローカルストレージやセッションストレージの項目を削除することもできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14275/14-delete-localstorage.png" style="display: block; height: 444px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>また、"プラス" (+) ボタンをクリックして追加された行の値を希望する値に変更することで、新しいストレージアイテムを追加できます。</p> + +<h2 id="IndexedDB" name="IndexedDB">IndexedDB</h2> + +<p>ストレージツリーで IndexedDB ストレージ内の生成元を選択すると、その生成元向けのすべてのデータベースの詳細情報をテーブルに表示します。データベースの詳細情報は以下のとおりです:</p> + +<ul> + <li><em>データベース名</em> - データベースの名称</li> + <li><em>Storage</em> - データベースに対して指定した、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Different_types_of_data_storage">ストレージの種類</a> (Firefox 53 の新機能)</li> + <li><em>オリジン</em> - データベースの生成元</li> + <li><em>バージョン</em> - データベースのバージョン</li> + <li><em>オブジェクトストア</em> - データベース内にあるオブジェクトストアの数</li> +</ul> + +<p>ストレージツリーで IndexedDB のデータベースを選択すると、保存されているすべてのオブジェクトストアの詳細情報をテーブルに表示します。オブジェクトストアの詳細情報は以下のとおりです:</p> + +<ul> + <li><em>オブジェクトストア名</em> - オブジェクトストアの名称</li> + <li><em>キー</em> - オブジェクトストアの keyPath プロパティ</li> + <li><em>自動インクリメント</em> - 自動インクリメントが有効であるか</li> + <li><em>インデックス</em> - オブジェクトストアのインデックスの配列を下図のように表示する</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14265/10-indexeddb-details.png" style="display: block; height: 205px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>ストレージツリーでオブジェクトストアを選択すると、オブジェクトストア内のすべてのアイテムをテーブルに表示します。すべてのアイテムは、キーとキーに関連づけられた値があります。</p> + +<p>Firefox 49 よりストレージツリービューのコンテキストメニューを使用して、IndexedDB データベースを削除できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14277/15-delete-database.png" style="display: block; height: 194px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>データベースを削除できない (もっとも多い理由は、データベースへのアクティブな接続が存在するため) 場合は、ストレージインスペクターで警告メッセージを表示します:<img alt="" src="https://mdn.mozillademos.org/files/14267/11-indexeddb-delete-warning.png" style="display: block; height: 255px; margin: 0px auto; width: 900px;"></p> + +<p>Firefox 50 よりテーブルウィジェットのコンテキストメニューを使用して、オブジェクトストア内のすべてのアイテムあるいは特定のアイテムを削除できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14279/16-delete-database-entries.png" style="display: block; height: 195px; margin-left: auto; margin-right: auto; width: 900px;"></p> diff --git a/files/ja/tools/style_editor/index.html b/files/ja/tools/style_editor/index.html new file mode 100644 index 0000000000..b80ce442a0 --- /dev/null +++ b/files/ja/tools/style_editor/index.html @@ -0,0 +1,109 @@ +--- +title: スタイルエディター +slug: Tools/Style_Editor +tags: + - CSS + - Stylesheets + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Style_Editor +--- +<div>{{ToolsSidebar}}</div><p>スタイルエディターでできること:</p> + +<ul> + <li>ページに関連づけられているすべてのスタイルシートの閲覧と編集</li> + <li>フロムスクラッチで新たなスタイルシートを作成して、ページに適用する</li> + <li>既存のスタイルシートをインポートして、ページに適用する</li> +</ul> + +<p>{{EmbedYouTube("7839qc55r7o")}}</p> + +<p>スタイルエディターを開くには、[ウェブ開発] メニュー (Mac では、[ツール] メニューのサブメニューです) で、[スタイルエディター] を選択します。スタイルエディターをアクティブにして、ブラウザーウィンドウの下部に <a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a> が現れます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; height: 238px; margin-left: auto; margin-right: auto; width: 816px;"></p> + +<p>スタイルエディターは 3 つの主要なセクションに分かれています:</p> + +<ul> + <li><a href="/ja/docs/Tools/Style_Editor#The_style_sheet_pane">左側のスタイルシートペイン</a></li> + <li><a href="/ja/docs/Tools/Style_Editor#The_editor_pane">右側のエディター</a></li> + <li><a href="/ja/docs/Tools/Style_Editor#The_media_sidebar">メディアサイドバー</a></li> +</ul> + +<h2 id="The_style_sheet_pane" name="The_style_sheet_pane">スタイルシートペイン</h2> + +<p>ウィンドウ左側のスタイルシートペインには、現在のドキュメントで使用しているすべてのスタイルシートの一覧を表示します。スタイルシート名の左にある目玉のアイコンをクリックすると、そのスタイルシートの有効/無効をすばやく切り替えることができます。一覧の各シート項目の右下にある保存ボタンをクリックすると、スタイルシートの変更内容をローカルコンピューターに保存することができます。</p> + +<p>Firefox 40 より、選択したスタイルシートを新しいタブで開くことができるコンテキストメニューが、スタイルシートペインにあります。</p> + +<h2 id="The_editor_pane" name="The_editor_pane">エディターペイン</h2> + +<p>右側はエディターペインです。ここでは選択したスタイルシートのソースの閲覧や編集が可能です。変更した内容は、ページへ直ちに反映されます。これにより、実験・修正・確認がとても簡単にできます。変更内容に満足したら、スタイルシートペインの項目にある保存ボタンをクリックして、スタイルシートのコピーをローカルに保存できます。</p> + +<p>CSS を読みやすくするために、エディターには行番号の表示や文法のハイライト機能があります。また、いくつもの <a href="/ja/docs/Tools/Style_Editor#Source_editor_shortcuts">キーボードショートカット</a> をサポートしています。</p> + +<p>最小化されたスタイルシートを検出すると、元のシートに影響がない形で自動的に最小化を解除します。これは、最適化済みのページで行う作業をより容易にします。</p> + +<p>スタイルエディターはオートコンプリートをサポートしています。入力を始めると、候補のリストを提供します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"><a href="/ja/docs/Tools/Tools_Toolbox#Style_Editor">スタイルエディターの設定</a> でオートコンプリートを無効にできます。</p> + +<h2 id="The_media_sidebar" name="The_media_sidebar">メディアサイドバー</h2> + +<p>選択中のスタイルシートに <a href="/ja/docs/Web/Guide/CSS/Media_queries"><code>@media</code> 規則</a> が含まれている場合に、スタイルエディターの右側にサイドバーを表示します。このサイドバーは規則を一覧表示して、スタイルシートで規則が定義されている行へのリンクも提供します。項目をクリックすると、スタイルシート内で規則が存在する場所にジャンプします。現在適用していないメディアクエリー規則の条件文は、グレーアウト表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">メディアサイドバーはレスポンシブレイアウトの作成やデバッグにおいて、<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a> と組み合わせることで特に役立ちます:</p> + +<p>{{EmbedYouTube("aVUXmvLSwoM")}}</p> + +<p>Firefox 46 より、<code>@media</code> 規則にスクリーンサイズの条件が含まれている場合に、条件をクリックできます。クリックするとレスポンシブデザインモードを使用して、条件に合うようにスクリーンをリサイズします:</p> + +<p>{{EmbedYouTube("XeocxoW2NYY")}}</p> + +<h2 id="Creating_and_importing_style_sheets" name="Creating_and_importing_style_sheets">スタイルシートの作成とインポート</h2> + +<p>ツールバーの新規作成ボタンをクリックすると、新しいスタイルシートを作成できます。そして、新しいエディターに CSS の入力を始めて、他のシートに対する変更と同様にページへリアルタイムに適用された結果を確認できます。</p> + +<p>インポートボタンをクリックすると、スタイルシートをディスクから読み込んでページに適用できます。</p> + +<h2 id="Source_map_support" name="Source_map_support">ソースマップのサポート</h2> + +<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p> + +<p>ウェブ開発者は <a href="http://sass-lang.com/">Sass</a>、<a href="http://lesscss.org/">Less</a>、<a href="http://learnboost.github.io/stylus/">Stylus</a> といったプリプロセッサーを使用して CSS ファイルを作成することがよくあります。これらのツールは、リッチかつ表現性の高い構文から CSS ファイルを生成します。これを行うとメンテナンスするものが、生成された CSS ではなくプリプロセッサーの構文になりますので、生成された CSS の閲覧や編集が可能でもあまり役に立ちません。よって生成された CSS を編集してから、元のソースへどのようにして再適用するかを手作業で考えなければなりません。</p> + +<p>ソースマップにより、生成された CSS から元の構文への対応づけをツールが行えるようになりますので、元の構文を表示して編集および保存が可能になります。Firefox 29 より、スタイルエディターが CSS ソースマップを理解します。</p> + +<p>例えば Sass を使用すると、スタイルエディターは Sass ファイルから生成された CSS ではなく、Sass ファイルを表示して編集することが可能になります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">ソースマップが動作するための必要条件は以下のとおりです:</p> + +<ul> + <li><a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a> を理解する CSS プリプロセッサーを使用する。現在は <a href="http://sass-lang.com/">Sass</a> 3.3.0 以上または <a href="http://roots.io/using-less-source-maps/">Less のバージョン 1.5.0</a> が該当します。他のプリプロセッサーはサポートするために作業中、またはサポートを検討中です。</li> + <li>プリプロセッサーにソースマップを生成するよう指示する。例えば Sass コマンドラインツールでは <code>--sourcemap</code> パラメーターを与えます。</li> +</ul> + +<h3 id="Viewing_original_sources" name="Viewing_original_sources">元のソースを表示</h3> + +<p><a href="/ja/docs/Tools/Tools_Toolbox#Style_Editor">スタイルエディターの設定</a> で [元のソースを表示] にチェックを入れると、<a href="/ja/docs/Tools/Page_Inspector#Rules_view">ルールビュー</a> で CSS 規則の隣にあるリンクが、スタイルエディター内にある元のソースへのリンクになります。</p> + +<p>Firefox 35 より、デフォルトで元のソースを表示します。</p> + +<h3 id="Editing_original_sources" name="Editing_original_sources">元のソースを編集</h3> + +<p>スタイルエディターで元のソースを編集することや、それがページへ直ちに適用された結果を見ることも可能です。これを実現するための追加作業が 2 つあります。</p> + +<p>まずプリプロセッサーが元のソースを監視して、ソースが変更された際は自動的に CSS を再生成するようにセットアップします。Sass では <code>--watch</code> オプションを渡すことで可能になります:</p> + +<pre>sass index.scss:index.css --sourcemap --watch</pre> + +<p>次にスタイルエディターで、ファイル名の隣にある [保存] ボタンをクリックして元のファイルを上書き保存します。</p> + +<p>これで、スタイルエディターでソースファイルを変更したときに CSS が再生成され、変更結果をすぐに確認できます。</p> + +<h2 id="Keyboard_shortcuts" name="Keyboard_shortcuts">キーボードショートカット</h2> + +<h3 id="Source_editor_shortcuts" name="Source_editor_shortcuts">ソースエディターのショートカット</h3> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "source-editor")}}</p> diff --git a/files/ja/tools/taking_screenshots/index.html b/files/ja/tools/taking_screenshots/index.html new file mode 100644 index 0000000000..41c1b1a30c --- /dev/null +++ b/files/ja/tools/taking_screenshots/index.html @@ -0,0 +1,52 @@ +--- +title: スクリーンショットを撮影する +slug: Tools/Taking_screenshots +tags: + - Tools +translation_of: Tools/Taking_screenshots +--- +<div>{{ToolsSidebar}}</div> + +<p>開発ツールを使用して、ページ全体またはページ内のひとつの要素のスクリーンショットを撮影できます。</p> + +<h2 id="Taking_a_screenshot_of_the_page" name="Taking_a_screenshot_of_the_page">ページのスクリーンショットを撮影する</h2> + +<p>現在のページ全体のスクリーンショットを撮影するには、スクリーンショットのアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14713/camera-icon.png" style="height: 16px; margin-bottom: -4px; width: 18px;">) を使用します。</p> + +<p>デフォルトでは、スクリーンショットのアイコンが有効化されていません。有効にする方法は以下のとおりです:</p> + +<ul> + <li><a href="/ja/docs/Tools/Settings">オプション</a> ページを開きます。</li> + <li>"利用可能なツールボックスのボタン" のセクションを探します。</li> + <li>"ページ全体のスクリーンショットを撮影します" にチェックを入れます。</li> +</ul> + +<p>以上で、ツールバーにアイコンが表示されます:</p> + +<p>{{EmbedYouTube("KB5V9uJgcS4")}}</p> + +<p>アイコンをクリックすると、現在のページのスクリーンショットを撮影します。スクリーンショットは、ブラウザーの "ダウンロード" ディレクトリーに保存します:</p> + +<p>{{EmbedYouTube("HKS6MofdXVE")}}</p> + +<h2 id="Taking_a_screenshot_of_an_element" name="Taking_a_screenshot_of_an_element">要素のスクリーンショットを撮影する</h2> + +<p>ページ内のひとつの要素のスクリーンショットを撮影するには、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">インスペクターの HTML ペイン</a> でその要素のコンテキストメニューを開いて、"ノードのスクリーンショットを撮影" を選択します。スクリーンショットは、ブラウザーの "ダウンロード" ディレクトリーに保存します:</p> + +<p>{{EmbedYouTube("p2pjF_BrE1o")}}</p> + +<h2 id="Copying_screenshots_to_the_clipboard" name="Copying_screenshots_to_the_clipboard">スクリーンショットをクリップボードにコピーする</h2> + +<p>Firefox 53 より、スクリーンショットをクリップボードにコピーすることもできます。開発ツールのオプションで "Screenshot to clipboard" にチェックを入れてください:</p> + +<p>{{EmbedYouTube("AZedFGh6F78")}}</p> + +<p>スクリーンショットを撮影すると、クリップボードへのコピーも行います。</p> + +<p> </p> + +<h2 id="アディショナルオプション">アディショナルオプション</h2> + +<p>別のデバイスとピクセルの比率を指定する必要がある場合、スクリーンショットを撮る前に遅延を設定するか、独自のファイル名を指定する必要がある場合は、Web コンソールで <code>:screenshot</code> <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">ヘルパー関数</a>を使用できます。</p> + +<p> </p> diff --git a/files/ja/tools/tips/index.html b/files/ja/tools/tips/index.html new file mode 100644 index 0000000000..6abb84f7fc --- /dev/null +++ b/files/ja/tools/tips/index.html @@ -0,0 +1,130 @@ +--- +title: Tips +slug: Tools/Tips +tags: + - Dev Tools + - Tools + - Web Development +translation_of: Tools/Tips +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="General" name="General">一般</h2> + +<p>スクリーンショット:</p> + +<ul> + <li>ページ全体: スクリーンショットボタン (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;"> をクリックします (始めに <a href="/ja/docs/Tools/Tools_Toolbox#Extra_tools">有効化しなければなりません</a>)。</li> + <li>ビューポート: <a href="/ja/docs/Tools/Responsive_Design_Mode#Responsive_Design_Mode_controls">レスポンシブデザインモード</a> でスクリーンショットボタン (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">) をクリックします。</li> + <li>ノード: インスペクターで右クリックして [<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Screenshot Node">ノードのスクリーンショットを撮影</a>] をクリックします。</li> + <li><a href="/ja/docs/Tools/GCLI#Commands">開発ツールバーのコマンド</a>: <code>screenshot [filename] [options]</code></li> +</ul> + +<p>設定:</p> + +<ul> + <li>開発ツールのテーマを <a href="/ja/docs/Tools/Settings#Choose_DevTools_theme">Light、Dark、Firebug</a> から選択します。</li> + <li>通常とは異なるショートカットに慣れている場合は、Vim、Emacs、あるいは Sublime Text の <a href="/ja/docs/Tools/Settings#Editor_Preferences">キー割り当てに変更します</a>。</li> + <li>チェックボックスで、さまざまなツールを有効化または無効化します (デフォルトで有効化していないツールがあります!)。</li> +</ul> + +<h2 id="Page_Inspector" name="Page_Inspector">ページインスペクター</h2> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">マークアップビュー</a>:</p> + +<ul> + <li>ノードを選択して <kbd>H</kbd> を押下すると、そのノードを非表示/再表示します。</li> + <li>ノードを選択して <kbd>Backspace</kbd> または <kbd>Del</kbd> を押下すると、そのノードを削除します。</li> + <li><kbd>Alt</kbd> を押しながらノードをクリックすると、すべての子孫を展開/折りたたみます。</li> + <li>ツール下部にある <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">パンくずリストのボタン</a> をクリックすると、そのノードを表示するようにインスペクターがスクロールします。</li> + <li>ノードのそばにある "ev" アイコンをクリックすると、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">そのノードに関連付けられたすべてのイベントリスナーがわかります</a>。</li> + <li>ノードを選択して <kbd>S</kbd> を押下すると、ページでそのノードを表示します (ノードを右クリックして [<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Scroll Into View">この要素の位置にスクロール</a>] を選択することと同じです)。</li> + <li>ノードを右クリックして [<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">コンソールで使う</a>] をクリックすると、そのノードを変数 <code>temp<var>N</var></code> として <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドライン</a> で使用できます。</li> +</ul> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">要素を選択する</a>:</p> + +<ul> + <li><kbd>Shift</kbd> + クリックでは、要素を選択しますが選択可能な状態を維持します (選択モードを解除しません)。</li> + <li><kbd>←</kbd>/<kbd>→</kbd> を使用して、親要素/子要素に移動します (選択するのが困難である場合)。</li> +</ul> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">ルールビュー</a>:</p> + +<ul> + <li>セレクターの隣にあるインスペクターアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) をクリックすると、マッチするすべての要素を強調表示します。</li> + <li><code>要素 {}</code> ルールの隣にあるインスペクターアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) をクリックすると、選択中の要素を強調表示します。</li> + <li>任意のプロパティを右クリックして [MDN ドキュメントを表示] を選択すると、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">そのプロパティの MDN ドキュメントを表示します</a>。</li> + <li>オーバーライドされたルールの隣にあるフィルターアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14187/filter.png" style="height: 19px; width: 18px;">) をクリックすると、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">オーバーライドしたプロパティが見つかります</a>。</li> + <li>名称、値、ルールを右クリックして、それらの名称、値、宣言、ルール全体をクリップボードにコピーできます。</li> +</ul> + +<h2 id="Web_Console" name="Web_Console">ウェブコンソール</h2> + +<p>すべてのパネル:</p> + +<ul> + <li><kbd>Esc</kbd> を押下すると <a href="/ja/docs/Tools/Web_Console/Split_console">常時表示コンソール</a> を開きます。デバッグやノードの調査を行う際に役立ちます。</li> +</ul> + +<p><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドライン</a>:</p> + +<ul> + <li><code><a href="/ja/docs/Tools/Web_Console/Helpers#$0">$0</a></code> は、現在選択しているノードを参照します。</li> + <li><code><a href="/ja/docs/Tools/Web_Console/Helpers#$">$()</a></code> は、{{domxref("document.querySelector()")}} のショートカットです。</li> + <li><code><a href="/ja/docs/Tools/Web_Console/Helpers#$$">$$()</a></code> は、{{domxref("document.querySelectorAll()")}} の結果を含む配列を返します。</li> + <li><code><a href="/ja/docs/Tools/Web_Console/Helpers#copy">copy</a></code> は、あらゆるものを文字列としてコピーします。</li> + <li>インスペクターでノードを右クリックして [<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">コンソールで使う</a>] をクリックすると、そのノードを示す変数 <code><a href="/ja/docs/Tools/Web_Console/Helpers#tempN">temp<em>N</em></a></code> を作成します。</li> + <li><code><a href="/ja/docs/Tools/Web_Console/Helpers#cd">cd</a></code> で、JavaScript の実行コンテキストを、ページ内の別の iframe に切り替えます。</li> + <li><code><a href="/ja/docs/Web/API/Console/table">console.table()</a></code> で、表形式のデータを表で表示します。</li> + <li><code><a href="/ja/docs/Tools/Web_Console/Helpers#help">help</a></code> で、使用可能なコマンドを説明する MDN ページを開きます。</li> + <li><code>:screenshot <filename.png> --fullpage</code> は、オプションのファイル名を使用して、ダウンロードディレクトリにスクリーンショットを保存します。ファイル名が含まれていない場合、ファイル名は次の形式になります。<br> + <br> + <code>Screen Shot date at time.png</code><br> + <br> + --fullpage パラメーターはオプションです。それを含めると、スクリーンショットはブラウザウィンドウに表示されるセクションだけでなくページ全体になります。ファイル名にも -fullpage が付加されます。<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Helpers">Web コンソールヘルパー</a>の全てのパラメータを参照してください。</li> +</ul> + +<p>コンソールの出力:</p> + +<ul> + <li>出力領域で要素の隣にあるインスペクターアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) をクリックすると、<a href="/ja/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">その要素をインスペクターで選択します</a>。</li> + <li>設定で [<a href="/ja/docs/Tools/Settings#Common_preferences">ログ出力を残す</a>] にチェックを入れると、記録したメッセージを移動前および移動後も維持します。</li> + <li>設定で [<a href="/ja/docs/Tools/Settings#Web_Console">タイムスタンプを表示</a>] にチェックを入れると、記録したメッセージのそばにタイプスタンプを表示します。</li> +</ul> + +<h2 id="Debugger" name="Debugger">デバッガー</h2> + +<ul> + <li>ブラックボックスアイコン (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">) を使用して、デバッグセッションで JavaScript ライブラリーをスキップできます。</li> + <li><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F</kbd> を押下すると、すべてのスクリプトから検索します。</li> + <li><kbd>Ctrl</kbd>+<kbd>D</kbd> を押下すると、関数定義を検索します。</li> + <li><kbd>Ctrl</kbd>+<kbd>L</kbd> を押下すると、特定の行に移動します。</li> +</ul> + +<h2 id="Style_Editor" name="Style_Editor">スタイルエディター</h2> + +<ul> + <li>スタイルシートペインのブラックボックスアイコン (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">) で、スタイルシートの適用状態を切り替えできます。</li> + <li><a href="/ja/docs/Tools/Style_Editor#The_media_sidebar">@media 規則</a> をクリックすると、その規則を <a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a> で適用します。</li> + <li>インポートボタン (<img alt="Button to import a style sheet from the file system" src="https://mdn.mozillademos.org/files/14193/Import%20button.png" style="height: 18px; width: 18px;">) をクリックすると、スタイルシートをインポートします。作成ボタン (<img alt="Button to create a new style sheet" src="https://mdn.mozillademos.org/files/14195/Create%20style%20sheet%20button.png" style="height: 18px; width: 18px;">) をクリックすると、新しいスタイルシートを作成します。</li> + <li><a href="/ja/docs/Tools/Style_Editor#The_style_sheet_pane">スタイルシートペイン</a> のオプションボタンをクリックして [<a href="/ja/docs/Tools/Style_Editor#Source_map_support">元のソースを表示</a>] を選択すると、CSS プリプロセッサーのファイルの表示を切り替えます。</li> +</ul> + +<h2 id="Network_Monitor" name="Network_Monitor">ネットワークモニター</h2> + +<ul> + <li>リクエストの概要をクリックすると、<a href="/ja/docs/Tools/Network_Monitor#Performance_analysis">キャッシュあり/キャッシュなしのページ読み込みのパフォーマンスを比較します</a>。</li> + <li>リクエストを選択している状態で [<a href="/ja/docs/Tools/Network_Monitor#Edit_and_Resend">編集して再送信</a>] をクリックすると、ヘッダーを変更して再度リクエストを送信できます。</li> + <li>設定で [<a href="/ja/docs/Tools/Settings#Common_preferences">ログ出力を残す</a>] にチェックを入れると、リクエストを移動前および移動後も維持します。</li> + <li><a href="/ja/docs/Tools/Network_Monitor#Cause_column">"発生源" 列の "js" アイコン</a> にマウスポインタを載せると、JavaScript のスタックトレースを表示します。これは、リクエストの発生源です。</li> + <li>設定で [<a href="/ja/docs/Tools/Settings#Advanced_settings">HTTP キャッシュを無効化 (ツールボックスを開いているとき)</a>] にチェックを入れると、ネットワークの問題をデバッグしている間はキャッシュを無効化します。</li> +</ul> + +<h2 id="Storage_Inspector" name="Storage_Inspector">ストレージインスペクター</h2> + +<ul> + <li>列見出しを右クリックすると、列の表示/非表示を切り替えできるメニューが開きます。</li> + <li>項目を右クリックして [<var>名称</var> を削除] を選択するとその項目を削除、[すべて削除] をクリックするとすべての項目を削除します。</li> + <li>項目を選択すると、解析した値をサイドバーに表示します。</li> +</ul> diff --git a/files/ja/tools/tools_toolbox/index.html b/files/ja/tools/tools_toolbox/index.html new file mode 100644 index 0000000000..d794b3b47d --- /dev/null +++ b/files/ja/tools/tools_toolbox/index.html @@ -0,0 +1,99 @@ +--- +title: ツールボックス +slug: Tools/Tools_Toolbox +translation_of: Tools/Tools_Toolbox +--- +<div>{{ToolsSidebar}}</div><p>ツールボックスは、Firefox に組み込まれている開発ツールのほとんどを提供するホームです。</p> + +<p>ツールボックスを開く方法がいくつかあります:</p> + +<ul> + <li>[ウェブ開発] メニュー (OS X や Linux では [ツール] メニューの配下、Windows では [Firefox] メニューの配下にあります) の [開発ツールを表示] を選択します。</li> + <li>メインツールバーまたはハンバーガーメニュー (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">) の中にあるレンチのアイコン (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">) をクリックして、[開発ツールを表示] を選択します。</li> + <li>ツールボックスに含まれているいずれかのツール (例えば JavaScript デバッガーやページインスペクターなど) を開きます。</li> + <li>Windows および Linux では <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>、OS X では <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> を押下します。<a href="/ja/docs/Tools/Keyboard_shortcuts">キーボードショートカット</a> もご覧ください。</li> +</ul> + +<p>デフォルトでは Firefox のウィンドウの下側にドッキングした状態で表示されますが、好みに応じて切り離すこともできます。ドッキングしているときは以下のような表示になります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>ウィンドウ自体は 2 つのパーツに分かれています。上部のツールバーと、その下にあるメインペインです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; height: 471px; margin-left: auto; margin-right: auto; width: 876px;"></p> + +<h2 id="Docking_mode" name="Docking_mode">ドッキングモード</h2> + +<p>デフォルトでツールボックスはブラウザーウィンドウの下部にドッキングした状態で表示しますが、<a href="/ja/docs/Tools/Tools_Toolbox#Toolbox_controls">ツールバーのボタン</a>を使用してウィンドウの右側にドッキングしたり、個別のウィンドウで表示することもできます。</p> + +<h2 id="Toolbar" name="Toolbar">ツールバー</h2> + +<p>ツールバーには個々のツールをアクティブ化、ウィンドウのドッキングや切り離し、およびウィンドウを閉じるためのコントロールがあります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Node_picker" name="Node_picker">ノードの選択</h3> + +<p>ツールバーの左端に、ノード選択ツールを起動するボタンがあります。このツールで、ページ内で調査する要素を選択できます。"<a href="/ja/docs/Tools/Page_Inspector/How_to/Select_an_element">要素を選択する</a>" をご覧ください。</p> + +<h3 id="Toolbox-hosted_tools" name="Toolbox-hosted_tools">ツールボックスで提供するツール</h3> + +<p>その隣にはツールボックスで提供するさまざまなツールを切り替えるための、ラベルがついたボタンが並んでいます。この並びには以下のツールが含まれています:</p> + +<ul> + <li><a href="/ja/docs/Tools/Web_Console" title="Tools/Web_Console">ウェブコンソール</a></li> + <li><a href="/ja/docs/Tools/Debugger" title="Tools/Debugger">JavaScript デバッガー</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">ページインスペクター</a></li> + <li><a href="/ja/docs/Tools/Style_Editor" title="Tools/Style_Editor">スタイルエディター</a></li> + <li><a href="/ja/docs/Tools/Profiler" title="Performance/Profiling_with_the_Built-in_Profiler">プロファイラー</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor" title="Performance/Profiling_with_the_Built-in_Profiler">ネットワークモニター</a></li> +</ul> + +<p>すべてのツールが表示されるとは限らない点に注意してください。その状況で実際に使用可能なツールだけが表示されます (例えば、リモートデバッグが未サポートのツールがあるため、デバッグ対象がツールボックスを起動した Firefox のインスタンスではない場合は、一部のツールしか表示されません)。</p> + +<h3 id="Extra_tools" name="Extra_tools">付加ツール</h3> + +<p>ツールボタンの隣には、<a href="#Settings">開発ツールのオプション</a> で追加および削除可能なボタンが並んでいます。デフォルトでは以下のボタンがあります:</p> + +<ul> + <li><a href="/ja/docs/Tools/Web_Console#The_split_console">コンソールの常時表示の切り替え</a></li> + <li><a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a></li> + <li><a href="/ja/docs/tools/Working_with_iframes">作業対象のドキュメントとしてフレームを選択</a> (Firefox 41 より、デフォルトで表示します)</li> +</ul> + +<p>以下のツールはデフォルトでツールバーに含まれていませんが、<a href="#Settings">オプション</a> で追加できます:</p> + +<ul> + <li><a href="/ja/docs/Tools/Paint_Flashing_Tool">描画された領域のハイライト</a></li> + <li><a href="/ja/docs/Tools/3D_View">3D ビュー</a> (Firefox 40 では使用できません)</li> + <li><a href="/ja/docs/Tools/Scratchpad">スクラッチパッド</a></li> + <li><a href="/ja/docs/Tools/Eyedropper">ページから色を選択</a></li> + <li>ページ全体のスクリーンショットを撮影: ウェブページ全体のスクリーンショットを撮影して、ダウンロードディレクトリーに保存します。</li> + <li><a href="/ja/docs/Tools/Rulers">ルーラーの表示切り替え</a></li> + <li>ページの一部を測定: ページ内の領域を選択することにより、ウェブサイトの一部分を測定します。</li> +</ul> + +<h3 id="Toolbox_controls" name="Toolbox_controls">ツールボックスのコントロール</h3> + +<p>右端には以下のボタンが並んでいます:</p> + +<ul> + <li>ウィンドウを閉じる</li> + <li>ツールボックスをブラウザーウィンドウの下側にドッキングするか、横にドッキングするかを切り替える</li> + <li>ツールボックスを単独で表示するか、ブラウザーウィンドウにドッキングするかを切り替える</li> + <li><a href="#Settings" title="#Settings">開発ツールのオプション</a> を開く</li> +</ul> + +<h2 id="Settings_2" name="Settings_2"><a name="Settings">設定</a></h2> + +<p><a href="/ja/docs/Tools/Settings">開発ツールのオプションについては、別個のページをご覧ください</a>。</p> + +<h2 id="Main_Pane" name="Main_Pane">メインペイン</h2> + +<p>ツールボックスのメインペインの内容は選択されているツールに特有であり、またツールによって全面的に制御されます。</p> + +<h2 id="Keyboard_shortcuts" name="Keyboard_shortcuts">キーボードショートカット</h2> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts")}}</p> + +<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}</p> diff --git a/files/ja/tools/using_the_source_editor/index.html b/files/ja/tools/using_the_source_editor/index.html new file mode 100644 index 0000000000..1136a4a15f --- /dev/null +++ b/files/ja/tools/using_the_source_editor/index.html @@ -0,0 +1,99 @@ +--- +title: ソースエディタの使用 +slug: Tools/Using_the_Source_Editor +translation_of: tools/Keyboard_shortcuts#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/validators/index.html b/files/ja/tools/validators/index.html new file mode 100644 index 0000000000..e21686ced4 --- /dev/null +++ b/files/ja/tools/validators/index.html @@ -0,0 +1,74 @@ +--- +title: バリデータ +slug: Tools/Validators +tags: + - Website validator + - html5 validator + - ツール + - バリデータ +translation_of: Tools/Validators +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary"><span class="seoSummary">このドキュメントでは開発者がWeb ページを検証するためのさまざまなリソースを一覧にしています。</span></p> + +<pre class="eval">この時点でサイドバータブは利用できません。 +チューンアップウィザードはリンクを解除して戻ります +</pre> + +<p>すぐに検証されない新しいコードを書く場合は、利用可能な標準に準拠した<a href="/ja/docs/Archive/Web/Standards-Compliant_Authoring_Tools">オーサリングツール</a>と<a href="/ja/docs/Tools">開発ツール</a>を参照してください。</p> + +<h3 id="Firefox_Extensions_for_Validation" name="Firefox_Extensions_for_Validation">Firefox Extensions for Validation</h3> + +<h4 id="Quick_Reference_Sidebar_Tabs" name="Quick_Reference_Sidebar_Tabs">Quick Reference Sidebar Tabs</h4> + +<p>DevEdge Toolbox Sidebarsをインストールすると、Web開発リファレンスにすばやくアクセスできます。</p> + +<h4 id="Checky" name="Checky">Checky</h4> + +<p>Checky は Netscape または Mozilla のコンテキストメニューにサブメニューを追加します。これにより、(現在)18種類のオンラインバリデーションおよび分析サービスのいずれか利用しているものをページに対して実行できます。</p> + +<h3 id="Applications_and_Services" name="Applications_and_Services">アプリケーションとサービス</h3> + +<h4 id="DevEdge_Web_Tune-Up_Wizard" name="DevEdge_Web_Tune-Up_Wizard">DevEdge Web Tune-Up Wizard</h4> + +<p><a class="external external-icon" href="http://devedge-temp.mozilla.org/toolbox/tools/2001/tune-up/">This interface to W3C services</a> は、W3C標準をサポートするNetscape 7.x、Mozilla、その他のブラウザをサポートするためにコンテンツを更新するプロセスを通じて、初めから中間のWeb作者を導くものです。</p> + +<h4 id="W3C_HTML_Validator" name="W3C_HTML_Validator">W3C HTML Validator</h4> + +<p><a href="http://validator.w3.org/">W3C HTML Validator</a> は、W3C HTML 標準に従ってすべての Web ページを検証します。独自の HTML と無効な HTML の使用を検出するのに非常に便利です。</p> + +<h4 id="W3C_CSS_Validator" name="W3C_CSS_Validator">W3C CSS Validator</h4> + +<p><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validator</a> は、W3C CSS 標準に従って、任意の Web ページまたは外部 CSS ファイル内の CSS を検証します。</p> + +<h4 id="W3C_RDF_Validator" name="W3C_RDF_Validator">W3C RDF Validator</h4> + +<p><a href="https://www.w3.org/RDF/Validator/">RDF Validator</a> サービスは指定された URI に含まれる RDF/XML を検証します。</p> + +<h4 id="Link_Checker" name="Link_Checker">Link Checker</h4> + +<p><a href="http://validator.w3.org/checklink">このツール</a>は特定の Web ページ上のリンクをチェックします。</p> + +<h4 id="HTML_Tidy" name="HTML_Tidy">HTML Tidy</h4> + +<p><a href="http://tidy.sourceforge.net/">HTML Tidy</a> は HTML ページのエラーを報告し、ウェブページをより読みやすくするために使用できるツールです。(<a href="http://www.chami.com/html-kit/">HTML-Kit</a> などの一部のオーサリングソフトウェアは HTML Tidy で構築されているため、検証が迅速かつ容易になります)。</p> + +<h4 id="HTML_Validator_Pro">HTML Validator Pro</h4> + +<p>これは、W3C と同じバリデーターを使用する<a href="http://html.validator.pro/">自動 HTML5 チェッカー</a>です。開始 URL を入力するとウェブサイト内のすべてのページが検索され、検証されます。</p> + +<h3 id="Accessibility_Services" name="Accessibility_Services">アクセシビリティサービス</h3> + +<h4 id="Lynx_Viewer" name="Lynx_Viewer">Lynx Viewer</h4> + +<p>Lynx のビジュアライゼーションを使用して <a href="http://www.delorie.com/web/lynxview.html">Web ページをチェック</a>し、アクセシビリティ機能の検証を可能にするツールです。</p> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">原文情報</h3> + +<ul> + <li>Last Updated Date: August 16th, 2002</li> + <li>Copyright © 2001-2003 Netscape.</li> +</ul> +</div> diff --git a/files/ja/tools/web_audio_editor/index.html b/files/ja/tools/web_audio_editor/index.html new file mode 100644 index 0000000000..0a56bfa7f6 --- /dev/null +++ b/files/ja/tools/web_audio_editor/index.html @@ -0,0 +1,81 @@ +--- +title: Web Audio エディター +slug: Tools/Web_Audio_Editor +tags: + - Tools +translation_of: Tools/Web_Audio_Editor +--- +<div>{{ToolsSidebar}}</div> + +<div> </div> + +<div class="blockIndicator note"> +<p>注意：このツールは廃止予定であり、まもなくFirefoxから削除される予定です。 詳しくは、<a href="https://developer.mozilla.org/en-US/docs/Tools/Deprecated_tools">非推奨ツール</a>を参照してください。</p> +</div> + +<p><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a> を使うとき、開発者は {{domxref ("AudioContext")}} を生成します。そのコンテキストでは、以下のようないくつもの {{domxref ("AudioNode")}} を構築します:</p> + +<ul> + <li>発振回路やデータバッファーによるソースなど、<a href="/ja/docs/Web/API/Web_Audio_API#Defining_audio_sources">オーディオソース</a> を与えるノード</li> + <li>ディレイやゲイン調整など、<a href="/ja/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">変換処理</a> を行うノード</li> + <li>スピーカーなど、<a href="/ja/docs/Web/API/Web_Audio_API#Defining_audio_destinations">オーディオストリームの出力先</a> を表すノード</li> +</ul> + +<p>各々のノードは、ノードの動作を設定するために 0 個以上の {{domxref ("AudioParam")}} プロパティを持ちます。例えば {{domxref ("GainNode")}} は <code>gain</code> プロパティ 1 個を、また {{domxref ("OscillatorNode")}} は <code>frequency</code> プロパティおよび <code>detune</code> プロパティを持っています。</p> + +<p>開発者はノードをグラフで接続して、完成したグラフがオーディオストリームの動作を定義します。</p> + +<p>Web Audio エディターはページ内で構築したオーディオコンテキストを調査して、そのグラフを可視化します。これはグラフの動作について高レベルなビューを表示して、すべてのノードが想定どおりに接続されていることを確実にできます。そして、グラフ内の各ノードの <code>AudioParam</code> プロパティの調査や編集も可能です。<code>OscillatorNode</code> の <code>type</code> プロパティなど、<code>AudioParam</code> ではないプロパティの一部も、同様に表示や編集が可能です。</p> + +<p>このツールはまだ試行段階です。バグを発見した場合は、<a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Web%20Audio%20Editor">Bugzilla で報告</a>していただければ幸いです。フィードバックや新機能の提案がある場合は、<a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> または <a href="https://twitter.com/firefoxdevtools">Twitter</a> に登録してください。</p> + +<h2 id="Opening_the_Web_Audio_Editor" name="Opening_the_Web_Audio_Editor">Web Audio エディターを開く</h2> + +<p>Firefox 32 では、Web Audio エディターはデフォルトで無効化しています。<a href="/ja/docs/Tools/Tools_Toolbox#Settings_2">開発ツールのオプション</a> を開いて [Web Audio] にチェックを入れることで有効化できます。有効化すると、<a href="/ja/docs/Tools/Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> に [Web Audio] という名前のタブが現れます。タブをクリックして、オーディオコンテキストを構築するページを読み込んでください。デモを 2 つ紹介します:</p> + +<ul> + <li><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>: マイク入力にさまざまなエフェクトを適用できます。また、その結果を可視化して表示します。</li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>: マウスポインターの移動に応じて、正弦波のピッチやボリュームを変化させます。</li> +</ul> + +<h2 id="Visualizing_the_graph" name="Visualizing_the_graph">グラフの可視化</h2> + +<p>Web Audio エディターが、読み込まれたオーディオコンテキストのグラフを表示します。Violent Theremin のグラフを以下に示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10171/web-audio-editor.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;"></p> + +<p>ここでは 3 つのノードを使用していることがわかります。ソースとして {{domxref ("OscillatorNode")}}、ボリュームの制御に {{domxref ("GainNode")}}、出力先として {{domxref ("GainNode")}} です。</p> + +<h3 id="Connections_to_AudioParams" name="Connections_to_AudioParams">AudioParam への接続</h3> + +<div class="geckoVersionNote"> +<p>AudioParam への接続の表示は、Firefox 34 の新機能です。</p> +</div> + +<p>ノード間の接続は、実線で表示します。一方、<a href="/ja/docs/Web/API/AudioNode.connect%28AudioParam%29">あるノードと別のノードの AudioParam を接続</a> した場合は、その接続を破線で示して <code>AudioParam</code> の名称を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Inspecting_and_modifying_AudioNodes" name="Inspecting_and_modifying_AudioNodes">AudioNode の調査と変更</h2> + +<p>ノードをクリックすると強調表示して、右側にノード調査ツールを表示します。ここにはノードの <code>AudioParam</code> プロパティの値を一覧表示します。例えば、OscillatorNode がどのようになるかを示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10173/web-audio-editor-props.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;"></p> + +<p>Violent Theremin ではユーザーがマウスを左右に動かすのに応じてパラメーター frequency を変えており、それがノード調査ツールに反映されるのを確認できます。ただし、値はリアルタイムには更新されません。更新された値を確認するには、ノードを再度クリックしなければなりません。</p> + +<p>ノード調査ツールで値をクリックすると、その値を変更できます。<kbd>Enter</kbd> または <kbd>Tab</kbd> を押下すると、変更後の値が直ちに反映されます。</p> + +<h2 id="Bypassing_nodes" name="Bypassing_nodes">ノードをバイパスする</h2> + +<div class="geckoVersionNote"> +<p>Firefox 38 の新機能</p> +</div> + +<p>ノードの詳細情報を表示するペインに、オン/オフボタンがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10183/web-audio-editor-on-off.png" style="display: block; height: 97px; margin-left: auto; margin-right: auto; width: 316px;"></p> + +<p>このボタンをクリックするとノードを迂回するようにグラフが変更されますので、ノードの効果がなくなります。迂回されたノードは、背景に斜線が引かれます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10181/web-audio-editor-bypassed.png" style="display: block; height: 74px; margin-left: auto; margin-right: auto; width: 348px;"></p> diff --git a/files/ja/tools/web_console/console_messages/index.html b/files/ja/tools/web_console/console_messages/index.html new file mode 100644 index 0000000000..5c61678136 --- /dev/null +++ b/files/ja/tools/web_console/console_messages/index.html @@ -0,0 +1,383 @@ +--- +title: コンソールのメッセージ +slug: Tools/Web_Console/Console_messages +translation_of: Tools/Web_Console/Console_messages +--- +<div>{{ToolsSidebar}}</div><p>ウェブコンソールのほとんどは、メッセージ表示ペインが占めています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p> + +<p>それぞれのメッセージは、個別の行に表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>時刻</strong></td> + <td>メッセージを記録した時刻です。これはデフォルトで表示しません。<a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション</a> で、タイムスタンプを表示するように設定できます。</td> + </tr> + <tr> + <td><strong>カテゴリー</strong></td> + <td> + <p>メッセージの種類を示します:</p> + + <ul style="margin-left: 40px;"> + <li><strong>黒色</strong>: ネットワークリクエスト</li> + <li><span style="color: #0099ff;"><strong>青色</strong></span>: CSS の警告/エラー/ログ</li> + <li><strong><span style="color: #ff8c00;">橙色</span></strong>: JavaScript の警告/エラー</li> + <li><span style="color: #ff0000;"><strong>赤色</strong></span>: セキュリティの警告/エラー</li> + <li><span style="color: #90b090;"><strong>緑色</strong></span>: サーバーのログ</li> + <li><span style="color: #a9a9a9;"><strong>薄い灰色</strong></span>: <a href="/ja/docs/Web/API/console" title="Web/API/console">Console</a> API のメッセージ</li> + <li><span style="color: #696969;"><strong>濃い灰色</strong></span>: 対話式 <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドラインインタープリター</a> の入出力</li> + </ul> + </td> + </tr> + <tr> + <td><strong>タイプ</strong></td> + <td>ネットワークリクエストと対話式の入出力を除くすべてのメッセージにおいて、メッセージがエラー (X)、警告 (!)、ログ (i) のどれかを示すアイコンです。</td> + </tr> + <tr> + <td><strong>メッセージ</strong></td> + <td>メッセージ本文です。</td> + </tr> + <tr> + <td><strong>発生回数</strong></td> + <td>警告やエラーを表す行が複数発生した場合はログを 1 回だけ記録して、何回発生したかを示すカウンターを表示します。</td> + </tr> + <tr> + <td><strong>ファイル名と行番号</strong></td> + <td> + <p>JavaScript、CSS、console API のメッセージでは、メッセージからコードの特定の行までたどることができます。コンソールはメッセージが発生したファイル名および行へのリンクを提供します。</p> + + <p>Firefox 36 より、列番号も表示します。</p> + </td> + </tr> + </tbody> +</table> + +<p>デフォルトでは、新しいページに移動したり現在のページを再読み込みしたりするたびにコンソールの内容が消去されます。<a href="/ja/docs/Tools/Tools_Toolbox#Common_preferences">オプション</a> で "ログ出力を残す" にチェックを入れると、この動作が変わります。</p> + +<h2 id="Message_categories" name="Message_categories">メッセージのカテゴリー</h2> + +<h3 id="Network" name="Network">ネットワーク</h3> + +<div class="note"> +<p>ネットワークのログメッセージは、デフォルトで表示しません。ログを表示するには、<a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category">フィルタリング</a>機能を使用してください。</p> +</div> + +<p>ネットワークリクエストは、以下のような行で記録されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>時刻</strong></td> + <td>メッセージを記録した時刻</td> + </tr> + <tr> + <td><strong>カテゴリー</strong></td> + <td>メッセージが HTTP リクエストであることを示す</td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td> + <p>具体的な HTTP リクエストメソッド</p> + + <p><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> として実行したリクエストである場合は、それを示すマークをつけます:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p> + </td> + </tr> + <tr> + <td><strong>URI</strong></td> + <td>ターゲットの URI</td> + </tr> + <tr> + <td><strong>サマリー</strong></td> + <td>HTTP バージョン、ステータスコード、完了までにかかった時間</td> + </tr> + </tbody> +</table> + +<h4 id="Viewing_network_request_details" name="Viewing_network_request_details">ネットワークリクエストを詳しく確認する</h4> + +<p>メッセージをクリックすると <a href="/ja/docs/Tools/Network_Monitor">ネットワークパネル</a> に移動します。ネットワークパネルでは該当するリクエストを選択して、詳細なリクエストおよびレスポンスの情報を右側のパネルに表示します。Firefox 43 以前では、ポップアップウィンドウでこれらの情報表示します。</p> + +<p>Firefox 48 より、これらの詳細情報の多くをウェブコンソールから離れることなくインラインで確認できます。ネットワークリクエストの項目の隣に、展開用の三角印があります。クリックすると以下の情報を表示します:</p> + +<ul> + <li><strong>ヘッダー:</strong> 要求ヘッダーと応答ヘッダー</li> + <li><strong>応答:</strong> 応答ボディ</li> + <li><strong>Cookie:</strong> リクエストとともに送信した Cookie</li> + <li><strong>コールスタック</strong> (Firefox 50 の新機能): <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest</a> や <a href="/ja/docs/Web/API/Fetch_API">Fetch</a> のように JavaScript が開始したリクエストで、リクエストを行った個所のコールスタックを確認できます。</li> +</ul> + +<p>{{EmbedYouTube("cFlcWzJ9j4I")}}</p> + +<h3 id="JS" name="JS">JS</h3> + +<p>JavaScript のメッセージは以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Learn_more_link" name="Learn_more_link">"詳細" リンク</h4> + +<div class="geckoVersionNote">Firefox 49 の新機能</div> + +<p>JavaScript のエラーには、問題を解決するための付加的なアドバイスを提供する <a href="/ja/docs/Web/JavaScript/Reference/Errors">JavaScript エラーリファレンス</a> に案内する、"詳細" リンクがあります:</p> + +<p>{{EmbedYouTube("OabJc2QR6o0")}}</p> + +<h4 id="Source_maps" name="Source_maps">ソースマップ</h4> + +<div class="geckoVersionNote">Firefox 55 の新機能</div> + +<p>Firefox 55 より、ウェブコンソールが <a href="http://blog.teamtreehouse.com/introduction-source-maps">ソースマップ</a> を理解します。つまり JavaScript のソースが圧縮されている場合に、ソースマップを与えることができます。ソース内でメッセージやエラーが発生すると、ウェブコンソールは非圧縮版の元のソースに基づいてそれらを表示します。</p> + +<h3 id="CSS" name="CSS">CSS</h3> + +<div class="note"> +<p>CSS の警告とリフローのメッセージは、デフォルトで表示しません。ログを表示するには、<a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category">フィルタリング</a> 機能を使用してください。</p> +</div> + +<p>CSS のメッセージは以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Reflow_events" name="Reflow_events">リフローイベント</h4> + +<p>ウェブコンソールは、CSS カテゴリーでリフローのイベントも記録します。リフローは、ブラウザーがページの全体あるいは一部分のレイアウトを計算する処理に与えられた名称です。レイアウトに影響があるとブラウザーが考えるような変化がページで起きたときに、リフローが発生します。以下に挙げるものを含めて、多くのイベントがリフローを発生させます: ブラウザーウィンドウのリサイズ、<a href="/ja/docs/Web/CSS/:hover">:hover</a> のような疑似クラスのアクティブ化、JavaScript による DOM の操作。</p> + +<p>リフローは計算負荷が高い場合があり、またユーザーインターフェイスに直接作用するため、ウェブサイトやウェブアプリの応答性に大きな影響を与えることがあります。ウェブコンソールはリフローイベントを記録することにより、リフローイベントが発生した時の実行にどれだけ時間がかかったか、またリフローが JavaScript によって発生された <a href="/ja/docs/Tools/Web_Console/Console_messages#Synchronous_and_asynchronous_reflows">同期リフロー</a> である場合に、どのコードが発生させたかの情報を手供します。</p> + +<p>リフローイベントは "リフロー" メッセージとして、CSS のエラーや警告とは別に記録されます。デフォルトでは、これは無効になっています。有効にするには <a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category">ツールバー</a> の "CSS" ボタンをクリックして、"リフロー" を選択してください。</p> + +<p>各々のメッセージは "リフロー" というラベルがつき、リフローの実行にかかった時間を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">リフローが JavaScript によって発生された同期リフローである場合は、リフローを発生させたコードの行へのリンクも表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">リンクをクリックすると、そのファイルを <a href="/ja/docs/Tools/Debugger">デバッガー</a> で開きます。</p> + +<h4 id="Synchronous_and_asynchronous_reflows" name="Synchronous_and_asynchronous_reflows">同期リフローと非同期リフロー</h4> + +<p>現在のレイアウトを無効にする変更がなされる、例えばブラウザーのウィンドウをリサイズしたり、ある JavaScript が要素の CSS を変更したりしても、レイアウトが直ちに再計算されるわけではありません。代わりにリフローは非同期に、ブラウザーが必要と判断した時点 (通常、ブラウザーが次に再描画を行うとき) で実行します。この方法により、ブラウザーは無効化する変更点を蓄えておいて一度にそれらの影響を再計算することができます。</p> + +<p>しかし、ある JavaScript コードが変更されたスタイルを読み取ると、ブラウザーは返す計算値を算出するために同期リフローを実行しなければなりません。例えば以下のようなコードでは、<code>window.getComputedStyle(thing).height</code> を呼び出したときに直ちに同期リフローが発生します:</p> + +<pre class="brush: js">var thing = document.getElementById("the-thing"); +thing.style.display = "inline-block"; +var thingHeight = window.getComputedStyle(thing).height;</pre> + +<p>以前のスタイル書き込みによって無効化されたスタイルを読み取るたびに同期リフローを強いるため、DOM の操作中に要素のスタイルの読み書きを挟み込むことを避けるのはよいアイデアです。</p> + +<h3 id="Security" name="Security">セキュリティ</h3> + +<p>セキュリティの警告とエラーは以下のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">ウェブコンソールに表示されるセキュリティメッセージは、サイト内の潜在的あるいは実在の脆弱性を開発者が発見することを支援します。加えて、これらのメッセージの多くは開発者の教育に役立ちます。これは、背景に関する情報や問題を緩和するためのアドバイスを記載したページに案内する、"詳細" リンクが終わりにあるためです。</p> + +<p>すべてのセキュリティメッセージの一覧を以下に掲載します:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <th scope="col">メッセージ</th> + <th scope="col">詳細</th> + </tr> + <tr> + <td>混在アクティブコンテンツの読み込みをブロックしました</td> + <td>ページに混在アクティブコンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーはスクリプトなどの "アクティブコンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこのアクティブコンテンツをブロックしました。詳しくは <a href="/ja/docs/Security/MixedContent">混在コンテンツ</a> をご覧ください。</td> + </tr> + <tr> + <td>混在表示コンテンツの読み込みをブロックしました</td> + <td>ページに混在表示コンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーは画像などの "表示コンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこの表示コンテンツをブロックしました。詳しくは <a href="/ja/docs/Security/MixedContent">混在コンテンツ</a> をご覧ください。</td> + </tr> + <tr> + <td>安全なページ上で (安全でない) 混在アクティブコンテンツを読み込んでいます</td> + <td>ページに混在アクティブコンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーはスクリプトなどの "アクティブコンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこのアクティブコンテンツを読み込みました。詳しくは <a href="/ja/docs/Security/MixedContent">混在コンテンツ</a> をご覧ください。</td> + </tr> + <tr> + <td>安全なページ上で (安全でない) 混在表示コンテンツを読み込んでいます</td> + <td>ページに混在表示コンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーは画像などの "表示コンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこの表示コンテンツを読み込みました。詳しくは <a href="/ja/docs/Security/MixedContent">混在コンテンツ</a> をご覧ください。</td> + </tr> + <tr> + <td>サイトに X-Content-Security-Policy/Report-Only ヘッダーと Content-Security-Policy/Report-Only ヘッダーの両方が指定されています。X-Content-Security-Policy/Report-Only ヘッダーは無視されます。</td> + <td>詳しくは <a href="/ja/docs/Security/CSP">Content Security Policy</a> をご覧ください。</td> + </tr> + <tr> + <td>X-Content-Security-Policy ヘッダーと X-Content-Security-Report-Only ヘッダーは推奨されなくなります。代わりに CSP 仕様に準拠した構文の Content-Security-Policy ヘッダーと Content-Security-Report-Only ヘッダーを使用してください。</td> + <td>詳しくは <a href="/ja/docs/Security/CSP">Content Security Policy</a> をご覧ください。</td> + </tr> + <tr> + <td>パスワードフィールドが安全でない (http://) ページ上にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。</td> + <td>ログインフォームを含むページは、HTTP ではなく HTTPS で提供しなければなりません。</td> + </tr> + <tr> + <td>パスワードフィールドが安全でない (http://) フォームアクションを持つフォーム要素内にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。</td> + <td>パスワードフィールドを含むフォームは、HTTP ではなく HTTPS で送信しなければなりません。</td> + </tr> + <tr> + <td>パスワードフィールドが安全でない (http://) iframe 内にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。</td> + <td>ログインフォームを含む iframe は、HTTP ではなく HTTPS で提供しなければなりません。</td> + </tr> + <tr> + <td>サイトに無効な Strict-Transport-Security ヘッダーが指定されています。</td> + <td>詳しくは <a href="/ja/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> をご覧ください。</td> + </tr> + <tr> + <td> + <p>このサイトは SHA-1 証明書を利用しています。SHA-1 より強固なハッシュアルゴリズムを使用した証明書の利用をお勧めします。</p> + </td> + <td> + <p>SHA-1 アルゴリズムを署名で使用している証明書を、サイトで使用しています。</p> + + <p>SHA-1 はまだ証明書で広く使用されていますが、陳腐化し始めています。ウェブサイトや認証局は将来、より強いハッシュアルゴリズムに切り替えることを推奨します。詳しくは <a href="/ja/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> の記事をご覧ください。</p> + + <p>サイト自体の証明書が SHA-1 証明書ではないとしても、サイトの証明書への署名に使用する認証局の証明書で SHA-1 を使用している場合がありますので注意してください。</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> は、ウェブコンソールで適切なセキュリティメッセージを記録することに関するメタバグです。ここで議論されているような役に立つ機能のアイデアがある、あるいは貢献に興味がある場合は、メタバグとその依存関係を確認してください。</p> + +<h3 id="Logging" name="Logging">ロギング</h3> + +<div class="note"> +<p><a href="/ja/docs/Web/API/SharedWorker">Shared Worker</a>、<a href="/ja/docs/Web/API/ServiceWorker_API">Service Worker</a>、アドオン、<a href="/ja/docs/Mozilla/ChromeWorkers">ブラウザー Worker</a> から発生したメッセージは、デフォルトで表示しません。ログを表示するには、<a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category">フィルタリング</a> 機能を使用してください。</p> +</div> + +<p>ロギングカテゴリーには、<a href="/ja/docs/Web/API/Console">Console</a> API を使用して発生させたログが含まれます。<br> + <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>ウェブコンソールでは、以下の <a href="/ja/docs/Web/API/Console">Console API</a> のメッセージをサポートします:</p> + +<ul> + <li><a href="/ja/docs/Web/API/Console.assert"><code>assert()</code></a></li> + <li><code><a href="/ja/docs/Web/API/Console/clear">clear()</a></code> (Firefox 48 の新機能)</li> + <li><a href="/ja/docs/Web/API/Console.count"><code>count()</code></a></li> + <li><a href="/ja/docs/Web/API/Console.dir"><code>dir()</code></a></li> + <li><a href="/ja/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></li> + <li><a href="/ja/docs/Web/API/Console.error"><code>error()</code></a></li> + <li><code>exception()</code></li> + <li><code><a href="/ja/docs/Web/API/Console.group">group()</a></code></li> + <li><code><a href="/ja/docs/Web/API/Console/groupEnd">groupEnd()</a></code></li> + <li><code>info()</code></li> + <li><a href="/ja/docs/Web/API/Console.log"><code>log()</code></a></li> + <li><a href="/ja/docs/Web/API/Console.table"><code>table()</code></a></li> + <li><a href="/ja/docs/Web/API/Console.time"><code>time()</code></a></li> + <li><a href="/ja/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></li> + <li><a href="/ja/docs/Web/API/Console.trace"><code>trace()</code></a></li> + <li><a href="/ja/docs/Web/API/Console.warn"><code>warn()</code></a></li> +</ul> + +<p>コンソールは以下のように、すべてのエラーメッセージでスタックトレースを表示します:</p> + +<pre class="brush: js">function foo() { + console.error("it explodes"); +} + +function bar() { + foo(); +} + +function doStuff() { + bar(); +} + +doStuff();</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11665/error-stack.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 465px;"></p> + +<h3 id="Server" name="Server">サーバー</h3> + +<div class="note"> +<p>サーバーサイドのログメッセージは、Firefox 43で導入されましたが、Firefox 56で削除されました。この機能を(再度)使用するには <a href="https://addons.mozilla.org/en-US/firefox/addon/chromelogger/">Chrome Logger extension</a> インストールしてください。</p> +</div> + +<p><a href="https://addons.mozilla.org/en-US/firefox/addon/chromelogger/">Chrome Logger extension</a>を使うと、サーバーから送信されたメッセージをウェブコンソールで表示できます。これにより、サーバーサイドのコードのデバッグにウェブコンソールを使用できます。</p> + +<p>これは、<a href="https://craig.is/writing/chrome-logger">Chrome Logger</a> プロトコルを使用します。手短に言えば、仕組みは以下のとおりです:</p> + +<ul> + <li>サーバーサイドのコード (Python、PHP、Node.js など) に、console API を提供するライブラリーを含めます。</li> + <li>サーバーサイドのコードで、console API を使用してメッセージを記録します。</li> + <li>サーバーサイドのライブラリーがメッセージから JSON オブジェクトを作成して、送信用にエンコードします。</li> + <li>メッセージを <code>X-ChromeLogger-Data</code> というレスポンスヘッダーで、クライアントに送信します。</li> + <li>ウェブコンソールが、ヘッダーをデコードして表示します。</li> +</ul> + +<p>サーバー側のコードに適したライブラリーを探すには、<a href="https://craig.is/writing/chrome-logger">Chrome Logger のドキュメント</a> をご覧ください。</p> + +<h3 id="Command_line_inputoutput" name="Command_line_inputoutput">コマンドラインの入力/出力</h3> + +<p><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">ウェブコンソールのコマンドライン</a> を使用してブラウザーに送信したコマンドとそれに対する応答は、以下のような行で記録されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">濃い灰色のバーは入力/出力メッセージであることを表し、また三角印の向きで入力と出力を区別します。</p> + +<h2 id="Filtering_and_searching" name="Filtering_and_searching"><a name="filtering-and-searching">フィルタリングと検索</a></h2> + +<h3 id="Filtering_by_category" name="Filtering_by_category">カテゴリーでフィルタリング</h3> + +<p>上段のツールバーで、表示する結果を制限できます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13284/console-toolbar.png" style="display: block; height: 297px; margin-left: auto; margin-right: auto; width: 877px;">カテゴリー名 ("ネットワーク"、"CSS" など) が記載されたボタンをクリックすると、特定の種類のメッセージのみ表示することができます。ボタン本体をクリックすると、そのカテゴリー全体のオン/オフを切り替えます。また右側の矢印部分をクリックすると、より細かいフィルタリング方法を表示します。</p> + +<ul> + <li>ネットワーク + <ul> + <li>エラー</li> + <li>警告</li> + <li>XHR</li> + <li>ログ</li> + </ul> + </li> + <li>CSS + <ul> + <li>エラー</li> + <li>警告</li> + <li>リフロー</li> + </ul> + </li> + <li>JS + <ul> + <li>エラー</li> + <li>警告</li> + </ul> + </li> + <li>セキュリティ + <ul> + <li>エラー</li> + <li>警告</li> + </ul> + </li> + <li>ロギング + <ul> + <li>エラー</li> + <li>警告</li> + <li>メッセージ</li> + <li>ログ</li> + <li>Shared Worker</li> + <li>Service Worker</li> + <li>アドオンまたはブラウザー Worker</li> + </ul> + </li> + <li>サーバー + <ul> + <li>エラー</li> + <li>警告</li> + <li>メッセージ</li> + <li>ログ</li> + </ul> + </li> +</ul> + +<h3 id="Filtering_by_text" name="Filtering_by_text">文字列でフィルタリング</h3> + +<p>"出力を絞り込み" と表示されているテキストボックスに文字列を入力すると、その文字列を含むメッセージのみ表示します。</p> + +<h3 id="Clearing_the_log" name="Clearing_the_log">ログを消去する</h3> + +<p>最後に、このツールバーでログを消去することもできます。Firefox 48 より前のバージョンでは、ツールバーの右側にある "消去" ボタンです。Firefox 48 以降では、左側にあるゴミ箱のアイコンです。</p> diff --git a/files/ja/tools/web_console/helpers/index.html b/files/ja/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..a460b6915c --- /dev/null +++ b/files/ja/tools/web_console/helpers/index.html @@ -0,0 +1,141 @@ +--- +title: Web コンソールヘルパー +slug: Tools/Web_Console/Helpers +tags: + - Debugging + - Web Development + - web console +translation_of: Tools/Web_Console/Helpers +--- +<p>{{ToolsSidebar}}</p> + +<h2 id="コマンド">コマンド</h2> + +<p>ウェブコンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。</p> + +<dl> + <dt id="$"><code>$(selector, element)</code></dt> + <dd> + <p>CSS セレクタ文字列 <code>selector</code> を検索し、一致する <code>element</code> の子孫ノードを返します。未指定の場合、<code>element</code> のデフォルトは <code>document</code> です。{{ domxref("document.querySelector()") }} と同等で、ページ内に $ 関数が存在する場合はそれを呼び出します。</p> + + <p><a href="/ja/docs/Code_snippets/QuerySelector">QuerySelector コードスニペット</a>参照してください。</p> + </dd> + <dt id="$$"><code>$$(selector, element)</code></dt> + <dd>CSS セレクタ文字列 <code>selector</code> を検索し、一致する <code>element</code> の子孫である DOM ノードの配列を返します。未指定の場合、<code>element</code> のデフォルトは <code>document</code> です。これは {{ domxref("document.querySelectorAll()") }} と似ていますが、{{ domxref("NodeList") }} ではなく配列を返します。</dd> + <dt id="$0"><code>$0</code></dt> + <dd>ページ内で現在調査されている要素です。</dd> + <dt id="$_"><code>$_</code></dt> + <dd>コンソールのコマンドラインで最後に実行した式の結果を保持します。例えば "2+2 <enter>" と入力した後に "$_ <enter>" と入力すると、コンソールは 4 と出力します。</dd> + <dt id="$x"><code>$x(xpath, element, resultType)</code></dt> + <dd><code>element</code> のコンテキストで <a href="/ja/docs/XPath">XPath</a> <code>xpath</code> 式を評価し、一致するノードの配列を返します。 未指定の場合、<code>element</code> のデフォルトは <code>document</code> です。<code>resultType</code>には戻り値の型を指定します。取りうる値は <a href="https://developer.mozilla.org/ja/docs/Web/API/XPathResult#Constants">XPathResult定数</a>か <code>"number"</code>、 <code>"string"</code>、 <code>"bool"</code>、 <code>"node"</code>、 <code>"nodes"</code> のいずれかです。指定されなかった場合、 <code>ANY_TYPE</code> になります。</dd> + <dt id="keys"><code>keys()</code></dt> + <dd>オブジェクトを与えると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a> のショートカットです。</dd> + <dt id="values"><code>values()</code></dt> + <dd>オブジェクトを与えると、そのオブジェクトの値の一覧を返します。これは <code>keys()</code> と対をなすものです。</dd> + <dt id="clear"><code>clear()</code></dt> + <dd>コンソールの出力エリアをクリアします。</dd> + <dt id="inspect"><code>inspect()</code></dt> + <dd>オブジェクトを与えると、そのオブジェクトのオブジェクトインスペクターを開きます。</dd> + <dt id="pprint"><code>pprint()</code></dt> + <dd>指定された値を、読みやすい形式に整形します。これはオブジェクトや配列の内容をダンプするのに役立ちます。</dd> + <dt id="help"><code>help()</code>{{Deprecated_Inline(62)}}<br> + <code style="margin-right: 1ch;">:help</code>{{Gecko_MinVersion_Inline(62)}}</dt> + <dd>ヘルプテキストを表示します。 実のところ、再びこのページに移動するという愉快な挙動を示します。</dd> + <dt id="cd"><code>cd()</code></dt> + <dd> + <p>JavaScript の評価を行うコンテキストを、ページ内の別の iframe に切り替えます。このコマンドは切り替え先のフレームを識別するための、さまざまな方法を受け入れます。以下のいずれかを与えることができます:</p> + + <ul> + <li>iframe 要素を特定するため、<code>document.querySelector</code> に渡すセレクター文字列</li> + <li>iframe 要素自体</li> + <li>iframe 内部の content window</li> + </ul> + + <p><a href="/ja/docs/Tools/Working_with_iframes">iframe での作業</a> をご覧ください。</p> + </dd> + <dt id="copy"><code>copy()</code></dt> + <dd><em>Firefox 38 の新機能。</em> 引数で指定したものをクリップボードにコピーします。引数が文字列である場合は、そのままコピーします。また引数が DOM ノードである場合は、ノードの <code><a href="/ja/docs/Web/API/Element/outerHTML">outerHTML</a></code> をコピーします。他の値である場合は引数に対して <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a></code> を呼び出して、その結果をコピーします。</dd> + <dt id="clearHistory"><code>clearHistory()</code></dt> + <dd><em>Firefox 39 の新機能。</em>一般的なコマンドラインと同様に、コンソールのコマンドラインも <a href="/ja/docs/Tools/Web_Console#Command_history">過去に入力したコマンドを覚えています</a>。この関数を実行すると、コンソールのコマンドラインの履歴を消去します。</dd> + <dt id="screenshot"><code>:screenshot</code></dt> + <dd>提供されたファイル名で現在のページのスクリーンショットを作成します。ファイル名を指定しない場合、画像ファイルの名前は次のようになります。<br> + <br> + <code>Screen Shot yyy-mm-dd at hh.mm.ss.png</code><br> + <br> + このコマンドには、次のオプションのパラメータがあります。<br> + + <table class="standard-table"> + <tbody> + <tr> + <th>コマンド</th> + <th>型</th> + <th>説明</th> + </tr> + <tr> + <td><code style="white-space: nowrap;">--clipboard</code></td> + <td>boolean</td> + <td>このパラメータがある場合は、スクリーンショットがクリップボードにコピーされます。</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--delay</code></td> + <td>number</td> + <td>スクリーンショットを撮るまでに遅らせる秒数。</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--dpr</code></td> + <td>number</td> + <td>スクリーンショットを撮るときに使用するデバイスのピクセル比率。</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--file</code></td> + <td>boolean</td> + <td>これがある場合、他のオプション (<code style="white-space: nowrap;">--clipboard</code> など) が含まれていても、スクリーンショットはファイルに保存されます。</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--filename</code></td> + <td>string</td> + <td>ファイルの保存に使用する名前。ファイルの拡張子は ".png" にする必要があります。</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--fullpage</code></td> + <td>boolean</td> + <td>これがある場合は、Web ページ全体が保存されます。このパラメータを使用すると、ウィンドウの現在の範囲外にある Web ページの部分であってもスクリーンショットに含まれます。使用したときは、ファイル名に "<span style="white-space: nowrap;">-fullpage</span>" が追加されます。</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--selector</code></td> + <td>string</td> + <td>ページ上の単一要素の CSS クエリーセレクタ。これが渡されると、この要素のみがスクリーンショットに含まれます。</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<p>コンテンツからログを出力する機能について、詳しくは <a href="/ja/docs/Web/API/console">Console API</a> をご覧ください。</p> + +<h2 id="Variables" name="Variables">変数</h2> + +<dl> + <dt id="tempN">temp<em>N</em></dt> + <dd>インスペクターの "<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use in Console">コンソールで使う</a>" は、参照しているノードを表す変数 <code>temp0</code>、<code>temp1</code>、<code>temp2</code> などを生成します。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="DOM_ノードの内容を閲覧する">DOM ノードの内容を閲覧する</h3> + +<p>例えば、ID 値 "title" を持つ DOM ノードがあるとします。実際は、今見ているこのページに該当する DOM ノードがありますので、ここでウェブコンソールを開いて試してみることができます。</p> + +<p><code>$()</code> および <code>inspect()</code> を用いて、ノードのコンテンツを確認してみましょう:</p> + +<pre class="brush: js; no-line-numbers notranslate">inspect($("#title"))</pre> + +<p>自動的にオブジェクトインスペクターが開き、CSS セレクター "#title" にマッチする DOM ノードの内容を表示します。もちろんそれは、ID が "title" である要素です。</p> + +<h3 id="DOM_ノードの内容をダンプする">DOM ノードの内容をダンプする</h3> + +<p>これは、あなたがブラウザー上で起きている問題を調査することになり、ユーザーのために遠隔地でデバッグを行うことや、ノードの内容を閲覧する必要があるような場合に役立ちます。ユーザーにウェブコンソールを開いてもらい、<code>pprint()</code> を用いてノードの内容をログにダンプし、その出力結果をメールにコピー & 貼り付けして送付してもらうことができます:</p> + +<pre class="brush: js; no-line-numbers notranslate">pprint($("#title"))</pre> + +<p>これはノードの内容を読みやすい形式で出力します。もちろん、このコマンドは DOM ノード以外のオブジェクトに対しても役に立ちますので、アイデアを考えてみてください。</p> diff --git a/files/ja/tools/web_console/index.html b/files/ja/tools/web_console/index.html new file mode 100644 index 0000000000..ab647c2924 --- /dev/null +++ b/files/ja/tools/web_console/index.html @@ -0,0 +1,48 @@ +--- +title: Webコンソール +slug: Tools/Web_Console +tags: + - Guide + - Security + - Web Development + - 'Web Development:Tools' + - 'l10n:priority' + - web console + - ツール + - デバッグ +translation_of: Tools/Web_Console +--- +<div>{{ToolsSidebar}}</div> + +<p><strong>Webコンソールとは:</strong></p> + +<ol> + <li>ウェブページに関する情報、ネットワークリクエスト、JavaScript、CSS、セキュリティのエラーや警告のほか、ページ内で実行されている JavaScript コードによって記録されたエラー、警告、情報メッセージを記録できます。</li> + <li>ページコンテキスト内で JavaScript の式を実行することにより、ウェブページと対話できます。</li> +</ol> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/docs/Tools/Web_Console/Opening_the_Web_Console">Webコンソールを開く</a></dt> + <dd>Webコンソールを開く方法です。</dd> + <dt><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドラインインタープリター</a></dt> + <dd>コンソールを使用してドキュメントと対話する方法です。</dd> + <dt><a href="/ja/docs/Tools/Web_Console/Split_console">コンソールの分割</a></dt> + <dd>コンソールを別のツールと並べて使用します。</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ja/docs/Tools/Web_Console/Console_messages">コンソールのメッセージ</a></dt> + <dd>コンソールが記録するメッセージを詳しく説明します。</dd> + <dt><a href="/ja/docs/Tools/Web_Console/Rich_output">高度な出力</a></dt> + <dd>コンソールが記録したオブジェクトを確認して対話する方法です。</dd> + <dt><a href="/ja/docs/Tools/Web_Console/Keyboard_shortcuts">キーボードショートカット</a></dt> + <dd>ショートカットのリファレンスです。</dd> +</dl> +</div> +</div> diff --git a/files/ja/tools/web_console/keyboard_shortcuts/index.html b/files/ja/tools/web_console/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..890a011a3f --- /dev/null +++ b/files/ja/tools/web_console/keyboard_shortcuts/index.html @@ -0,0 +1,10 @@ +--- +title: キーボードショートカット +slug: Tools/Web_Console/Keyboard_shortcuts +translation_of: Tools/Web_Console/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "web-console")}}</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/web_console/opening_the_web_console/index.html b/files/ja/tools/web_console/opening_the_web_console/index.html new file mode 100644 index 0000000000..a71b4568e1 --- /dev/null +++ b/files/ja/tools/web_console/opening_the_web_console/index.html @@ -0,0 +1,25 @@ +--- +title: ウェブコンソールを開く +slug: Tools/Web_Console/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +<div>{{ToolsSidebar}}</div> + +<p>ウェブコンソールを開く方法は以下のとおりです:</p> + +<ul> + <li>Firefox メニュー (メニューバーがある場合や Mac OS X では、ツールメニュー) のウェブ開発サブメニューで "ウェブコンソール" を選択する。</li> + <li>または、キーボードショートカット <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (OS X では <kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd>) を押下します。</li> +</ul> + +<p>ウェブコンソールがアクティブになっている <a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a> がブラウザーウィンドウの下部に現れます (<a href="/ja/docs/Tools/Tools_Toolbox#Toolbar" title="Tools/Tools_Toolbox#Toolbar">開発ツールのツールバー</a> では "コンソール" という名称です):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16191/console_63.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 845px;"></p> + +<p>ウェブコンソールのインターフェイスは 3 つに分けられます:</p> + +<ul> + <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">ツールバー</a>: 上段にボタンを 2 つ置いているツールバーがあります。ゴミ箱のボタンをクリックすると、コンソールの内容を消去できます。漏斗のアイコンをクリックすると、コンソールに表示されているメッセージをフィルターできます。</li> + <li><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">コマンドライン</a>: コマンドラインは、二重山かっこ (>>) で始まります。ここに JavaScript の式を入力します。</li> + <li><a href="/ja/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">メッセージ表示ペイン</a>: ページ内のコードやコマンドラインに入力したコマンドによって生成されたメッセージです。コマンドによって生成されメッセージは、それぞれのコマンドに続いて表示します。</li> +</ul> diff --git a/files/ja/tools/web_console/remoting/index.html b/files/ja/tools/web_console/remoting/index.html new file mode 100644 index 0000000000..f59789f31b --- /dev/null +++ b/files/ja/tools/web_console/remoting/index.html @@ -0,0 +1,686 @@ +--- +title: Webコンソールリモーティング +slug: Tools/Web_Console/remoting +translation_of: Tools/Web_Console/remoting +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="イントロダクション">イントロダクション</h2> + +<p>このドキュメントでは、Webコンソールのリモート処理のしくみについて説明します。Webコンソールはユーザーインターフェイスを備えたクライアントと、タブ内で発生するすべてのもののリスナーを持つサーバーに分割されています。サーバーとクライアント間の通信には、<a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">リモートデバッグプロトコル</a>を使用します。このアーキテクチャでは、WebコンソールクライアントインスタンスをB2G、Fennecまたはその他のFirefoxインスタンス上で動作するサーバーに接続できます。</p> + +<p>Webコンソールのアーキテクチャをよりよく理解するために、<a href="https://wiki.mozilla.org/Debugger_Architecture">デバッガのアーキテクチャ</a>について学ぶことをお勧めします。</p> + +<div class="note"> +<p>リモートWebコンソールは、Firefox 18で導入された機能です。このドキュメントでは、最新のプロトコルについて説明しています。</p> +</div> + +<h2 id="WebConsoleActor_と_WebConsoleClient"><code>WebConsoleActor</code> と <code>WebConsoleClient</code></h2> + +<p><code>WebConsoleActor</code> は、<a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/"><code>toolkit/devtools/webconsole</code></a> フォルダの <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/dbg-webconsole-actors.js" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/dbg-webconsole-actors.js"><code>dbg-webconsole-actors.js</code></a> にあります。</p> + +<p><code>WebConsoleClient</code> は (<a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/"><code>toolkit/devtools/webconsole</code></a> の) <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/WebConsoleClient.jsm" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/WebConsoleClient.jsm"><code>WebConsoleClient.jsm</code></a> にあり、Web コンソールアクターで作業するときにWeb コンソールで使用されます。</p> + +<p>デバッガが Web コンソールコードでどのように使用されているかを確認するには、<a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/webconsole/webconsole.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/webconsole/webconsole.js"><code>browser/devtools/webconsole/webconsole.js</code></a> を開き、<code>WebConsoleConnectionProxy</code> を検索します。</p> + +<p>新しい Web コンソールアクターは次のとおりです。</p> + +<ul> + <li><code>WebConsoleActor</code> は JS 評価、オートコンプリート、リスナーの開始/停止などを許可します。</li> + <li><code>NetworkEventActor</code> は、新しいネットワークリクエストごとに使用されます。クライアントは、レスポンス本文やリクエストヘッダーなど、詳細なネットワークイベントの詳細を要求できます。</li> +</ul> + +<p><code>WebConsoleActor</code> に接続するには、次の手順を実行します。</p> + +<pre class="brush:js;">connectToServer() // the usual +listTabs() +pickTheTabYouWant() +debuggerClient.attachConsole(tab.consoleActor, listeners, onAttachConsole) +</pre> + +<p><code>listeners</code> 引数は、Web コンソールで開始するリスナーを指定する配列です。ページエラー、<code>window.console</code> API メッセージ、ネットワークアクティビティ、ファイルアクティビティなどがあります。例えば：</p> + +<pre class="brush:js;">["PageError", "ConsoleAPI", "NetworkActivity", "FileActivity"]</pre> + +<div class="note"> +<p>Webコンソールアクタはデフォルトではリスナーを起動しません。クライアントには、必要なときに各リスナーを起動するオプションがあります。この方法で、サーバーでのリソース使用率を低く抑えることができます。これは、サーバーが少ないリソースでデバイスを実行する場合に起こりうる問題です。</p> +</div> + +<p><code>onAttachConsole</code> コールバックは <code>WebConsoleClient</code> オブジェクトの新しいインスタンスを受け取ります。このオブジェクトは <code>startListeners()</code>、<code>stopListeners()</code> などのプロトコルパケットを抽象化するメソッドを提供します。</p> + +<p>プロトコルパケットは次のようになります。</p> + +<pre class="brush:json;">{ + "to": "root", + "type": "listTabs" +} +{ + "from": "root", + "consoleActor": "conn0.console9", + "selected": 2, + "tabs": [ + { + "actor": "conn0.tab2", + "consoleActor": "conn0.console7", + "title": "", + "url": "https://tbpl.mozilla.org/?tree=Fx-Team" + }, +// ... + ] +} +</pre> + +<p><code>consoleActor</code> は<strong>グローバルアクター</strong>としても利用可能であることに注意してください。グローバル <code>consoleActor</code> にアタッチすると、すべてのネットワークリクエスト、ページエラー、およびその他のイベント (クロムエラーやネットワークイベントなど) がすべてのタブとウィンドウから受信されます。このアクターはブラウザコンソールの実装や、リモート Firefox/B2G インスタンスのデバッグに使用されます。</p> + +<h3 id="startListeners(listeners_onResponse)"><code>startListeners(listeners, onResponse)</code></h3> + +<p>新しい <code>startListeners</code> パケット：</p> + +<pre class="brush:json;">{ + "to": "conn0.console9", + "type": "startListeners", + "listeners": [ + "PageError", + "ConsoleAPI", + "NetworkActivity", + "FileActivity" + ] +} +</pre> + +<p>返答：</p> + +<pre class="brush:json;">{ + "startedListeners": [ + "PageError", + "ConsoleAPI", + "NetworkActivity", + "FileActivity" + ], + "nativeConsoleAPI": true, + "from": "conn0.console9" +} +</pre> + +<p>レスポンスは開始されたリスナーを示し、<code>window.console</code> オブジェクトがページ内のスクリプトによってオーバーライドされたかどうかを示す <code>nativeConsoleAPI</code> フラグを含みます。</p> + +<h3 id="タブナビゲーション">タブナビゲーション</h3> + +<p>タブナビゲーションイベントを待ち受けるには、指定したタブのタブアクターにアタッチする必要もあります。<code>tabNavigated</code> 通知はタブのアクターから来ます。</p> + +<div class="warning"> +<p>Firefox 20 以前では、Web コンソールの実行者は<code>LocationChange</code>リスナを提供し、<code>locationChanged</code> 通知を関連付けました。これはもはや当てはまりません。Web コンソールクライアントが <code>tabNavigated</code> 通知を再利用 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=792062" title="https://bugzilla.mozilla.org/show_bug.cgi?id=792062">bug 792062</a>) できるように変更しました。</p> +</div> + +<p>ページナビゲーションが開始されると、次のパケットがタブアクターから送信されます。</p> + +<pre class="brush: json"><code class="brush: json">{ + "from": tabActor, + "type": "tabNavigated", + "state": "start", + "url": newURL, + "nativeConsoleAPI": true +}</code> +</pre> + +<p><code>nativeConsoleAPI</code> プロパティは、<code>window.console</code> オブジェクトがネイティブかどうかを、指定されたタブのトップレベルウィンドウオブジェクトに対して示します。これは、ナビゲーションが開始されると常に <code>true</code> になります。ナビゲーションが停止すると、次のパケットが送信されます。</p> + +<pre class="brush: json"><code>{ + "from": tabActor, + "type": "tabNavigated", + "state": "stop", + "url": newURL, + "title": newTitle, + "nativeConsoleAPI": true|false +}</code></pre> + +<h3 id="getCachedMessages(types_onResponse)"><code>getCachedMessages(types, onResponse)</code></h3> + +<p><code>webConsoleClient.getCachedMessages(types, onResponse)</code> メソッドは、次のパケットをサーバーに送信します。</p> + +<pre class="brush:json;">{ + "to": "conn0.console9", + "type": "getCachedMessages", + "messageTypes": [ + "PageError", + "ConsoleAPI" + ] +} +</pre> + +<p><code>getCachedMessages</code> パケットを使用すると、Web コンソールを開く前にキャッシュされたメッセージを取得できます。 ページエラーとコンソール API 呼び出しのキャッシュメッセージしか取得できません。 返信は次のようになります。</p> + +<pre class="brush:json;">{ + "messages": [ ... ], + "from": "conn0.console9" +} +</pre> + +<p>配列内の各メッセージは、典型的なページエラーやコンソール API コールを送信するときと同じタイプです。これらについては、本書の以下のセクションで説明します。</p> + +<h3 id="アクター設定">アクター設定</h3> + +<p>Web コンソールが実行中にログオプションを設定できるように、<code>setPreferences</code>パケットを追加しました。</p> + +<pre class="brush:json;">{ + "to": "conn0.console9", + "type": "setPreferences", + "preferences": { + "NetworkMonitor.saveRequestAndResponseBodies": false + } +} +</pre> + +<p>返答:</p> + +<pre class="brush:json;">{ + "updated": [ + "NetworkMonitor.saveRequestAndResponseBodies" + ], + "from": "conn0.console10" +} +</pre> + +<p>便宜上 <code>webConsoleClient.setPreferences(prefs, onResponse)</code>を使用できます。<code>prefs</code> 引数は <code>{ prefName: prefValue, ... }</code> のようなオブジェクトです。</p> + +<p>Firefox 25 では <code>getPreferences</code> リクエストパケットが追加されました：</p> + +<pre class="brush:json;">{ + "to": "conn0.console34", + "type": "getPreferences", + "preferences": [ + "NetworkMonitor.saveRequestAndResponseBodies" + ] +} +</pre> + +<p>返答パケット：</p> + +<pre class="brush:json;">{ + "preferences": { + "NetworkMonitor.saveRequestAndResponseBodies": false + }, + "from": "conn0.console34" +} +</pre> + +<p><code>webConsoleClient.getPreferences(prefs, onResponse)</code> を使用することもできます。<code>prefs</code> 引数は、名前で値を取得したい設定の配列です。</p> + +<h3 id="プライベートブラウジング">プライベートブラウジング</h3> + +<p>ブラウザコンソールは、ユーザーがプライベートウィンドウを開いているときに使用できます。各ページエラー、コンソール API メッセージ、およびネットワークリクエストにはプライベートフラグが付いています。プライベートメッセージは、最後のプライベートウィンドウが閉じられるたびにクリアされます。コンソールアクタは <code>lastPrivateContextExited</code> 通知を提供します。</p> + +<pre class="brush:json;">{ + "from": "conn0.console19", + "type": "lastPrivateContextExited" +} +</pre> + +<p>この通知はクライアントがグローバルコンソールアクターに接続されている場合にのみ送信され、タブコンソールアクターには意味をなしません。</p> + +<div class="note"> +<p>この通知は Firefox 24 で導入されました。</p> +</div> + +<h3 id="HTTP_リクエストの送信">HTTP リクエストの送信</h3> + +<p>Firefox 25 から、コンソールアクタを使用して HTTP リクエストを送信することができます：</p> + +<pre class="brush:json;">{ + "to": "conn0.console9", + "type": "sendHTTPRequest", + "request": { + "url": "http://localhost", + "method": "GET", + "headers": [ + { + name: "Header-name", + value: "header value", + }, + // ... + ], + }, +} +</pre> + +<p>レスポンスパケットは、ネットワークイベントアクターグリップです。</p> + +<pre class="brush:json;">{ + "to": "conn0.console9", + "eventActor": { + "actor": "conn0.netEvent14", + "startedDateTime": "2013-08-26T19:50:03.699Z", + "url": "http://localhost", + "method": "GET" + "isXHR": true, + "private": false + } +} +</pre> + +<p><code>webConsoleClient.sendHTTPRequest(request, onResponse)</code> メソッドを使用することもできます。<code>request</code> 引数は上記のリクエストパケットの <code>request</code> オブジェクトと同じです。</p> + +<h2 id="ページエラー">ページエラー</h2> + +<p>ページエラーは <a href="/ja/docs/XPCOM_Interface_Reference/nsIConsoleService" title="/en-US/docs/XPCOM_Interface_Reference/nsIConsoleService"><code>nsIConsoleService</code></a> から発生します。許可される各ページエラーは <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIScriptError" title="/en-US/docs/XPCOM_Interface_Reference/nsIScriptError"><code>nsIScriptError</code></a> オブジェクトです。</p> + +<p><code>pageError</code> パケットは次のとおりです。</p> + +<pre class="brush:json;">{ + "from": "conn0.console9", + "type": "pageError", + "pageError": { + "errorMessage": "ReferenceError: foo is not defined", + "sourceName": "http://localhost/~mihai/mozilla/test.js", + "lineText": "", + "lineNumber": 6, + "columnNumber": 0, + "category": "content javascript", + "timeStamp": 1347294508210, + "error": false, + "warning": false, + "exception": true, + "strict": false, + "private": false, + } +} +</pre> + +<p>単純化のため、パケットは <code>nsIScriptError</code> に似ています。いくつかの不必要なプロパティを削除し、フラグの働きを変更しました。</p> + +<p><code>private</code> フラグは、エラーがプライベートウィンドウ/タブ (Firefox 24で追加されたもの) から来たものかどうかを示します。</p> + +<p>Firefox 24 以降、文字列が非常に長い場合、<code>errorMessage</code> および <code>lineText</code> プロパティは長い文字列アクターグリップになることがあります。</p> + +<h2 id="Console_API_メッセージ">Console API メッセージ</h2> + +<p><a href="/ja/docs/Web/API/console"><code>window.console</code> API</a> 呼び出しは、Gecko を通して内部メッセージを送信します。これにより、各呼び出しに必要な処理を実行できます。Web コンソールのアクターは、これらのメッセージをリモートデバッグクライアントに送信します。</p> + +<p><a href="https://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/debugger/server/dbg-script-actors.js" title="https://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/debugger/server/dbg-script-actors.js">dbg-script-actors.js</a> の <code>ObjectActor</code> を <code>ThreadActor</code> なしで使用すると、ページスクリプトの速度低下を避けることができます。デバッガはターゲットページで JavaScript の実行を非最適化します。Web コンソールの<a href="https://searchfox.org/mozilla-central/source/devtools/docs/backend/protocol.md">オブジェクトアクタの有効期間</a>は、デバッガ内のこれらのオブジェクトの存続期間とは異なります。通常、一時停止またはスレッドごとです。 Web コンソールは <code>ObjectActors</code> の有効期間を手動で管理します。</p> + +<div class="warning"> +<p>Firefox 23以前は、プロトコルを通じてJavaScriptオブジェクトを操作するために、別のアクタ<code>(WebConsoleObjectActor</code>)を使用しました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783499" title="https://bugzilla.mozilla.org/show_bug.cgi?id=783499">bug 783499</a>では、デバッガから<code>ObjectActor</code>を再利用するためにいくつかの変更を行いました。</p> +</div> + +<p>コンソール API メッセージは <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIObserverService" title="/en-US/docs/XPCOM_Interface_Reference/nsIObserverService"><code>nsIObserverService</code></a> を経由します。コンソールオブジェクトの実装は <a href="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js" title="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js"><code>dom/base/ConsoleAPI.js</code></a> にあります。</p> + +<p>サーバーで受信したコンソールメッセージごとに、次の <code>consoleAPICall</code> パケットをクライアントに送信します。</p> + +<pre class="brush:json;">{ + "from": "conn0.console9", + "type": "consoleAPICall", + "message": { + "level": "error", + "filename": "http://localhost/~mihai/mozilla/test.html", + "lineNumber": 149, + "functionName": "", + "timeStamp": 1347302713771, + "private": false, + "arguments": [ + "error omg aloha ", + { + "type": "object", + "className": "HTMLBodyElement", + "actor": "conn0.consoleObj20" + }, + " 960 739 3.141592653589793 %a", + "zuzu", + { "type": "null" }, + { "type": "undefined" } + ] + } +} +</pre> + +<p>ページエラーを送信する方法と同様に、ここでは <code>nsIObserverService</code> から受信した実際のコンソールイベントを送信します。<code>arguments</code> の配列を変更します - 引数として渡される各オブジェクトの <code>ObjectActor</code> インスタンスを作成し、最後に不要なプロパティ (ウィンドウIDなど) を削除します。長い文字列の場合、<code>LongStringActor</code> を使用します。Web コンソールは引き数を検査できます。</p> + +<p><code>private</code> フラグは、コンソール API 呼び出しがプライベートウィンドウ/タブ (Firefox 24 で追加されたもの) から来ているかどうかを示します。</p> + +<p>オブザーバーサービスから受け取ったコンソールイベントオブジェクトには小さな違いがあるように、コンソール API 呼び出しメソッドに応じて、オブジェクトの小さなバリエーションがあります。これらの相違点を確認するには、コンソール API 実装の <a href="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js" title="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js">dom/base/ConsoleAPI.js</a> を参照してください。</p> + +<h3 id="JavaScript_評価">JavaScript 評価</h3> + +<h4 id="evaluateJS_リクエストとレスポンスパケット"><code>evaluateJS</code> リクエストとレスポンスパケット</h4> + +<p>Web コンソールクライアントは <code>evaluateJS(requestId, string, onResponse)</code> メソッドを提供し、次のパケットを送信します。</p> + +<pre class="brush:json;">{ + "to": "conn0.console9", + "type": "evaluateJS", + "text": "document", + "bindObjectActor": null, + "frameActor": null, + "url": null, + "selectedNodeActor": null, +} +</pre> + +<p><code>bindObjectActor</code> プロパティは、<code>Debugger.Object</code> を指すオプションの <code>ObjectActor</code> IDです。このオプションを使用すると、文字列の評価中に <code>_self</code> を指定されたオブジェクトアクターの <code>Debugger.Object</code> にバインドできます。バインディングについては <a href="/ja/docs/Tools/Debugger-API/Debugger.Object"><code>evalInGlobalWithBindings()</code></a> を参照してください。</p> + +<div class="note"> +<p>変数ビューはオブジェクトを更新する必要があり、表示されている<code>ObjectActor</code>の<code>Debugger.Object</code>に<code>_self</code>をバインドすることによってオブジェクトを更新する必要があります。 そのため、変数ビューは評価のために次のような文字列を送信します。</p> + +<pre class="brush:js;"> _self["prop"] = value; +</pre> +</div> + +<p><code>frameActor</code> プロパティは、オプションの <code>FrameActor</code> IDです。FAは <a href="/ja/docs/Tools/Debugger-API/Debugger.Frame"><code>Debugger.Frame</code></a> への参照を保持します。このオプションを使用すると指定された FA のフレーム内の文字列を評価できます。</p> + +<p><code>url</code> プロパティはスクリプトを評価するためのオプションの URL です(Firefox 25 の新機能)。評価のためのデフォルトのソース URL は "debugger eval code" です。</p> + +<p><code>selectedNodeActor</code> プロパティはオプションの <code>NodeActor</code> ID であり、Inspector で現在選択されているノードがある場合はそのノードを示すために使用されます。この <code>NodeActor</code> は <code>$0</code> JSTerm ヘルパーによって参照できます。</p> + +<p>レスポンスパケット：</p> + +<pre class="brush:json;">{ + "from": "conn0.console9", + "input": "document", + "result": { + "type": "object", + "className": "HTMLDocument", + "actor": "conn0.consoleObj20" + "extensible": true, + "frozen": false, + "sealed": false + }, + "timestamp": 1347306273605, + "exception": null, + "exceptionMessage": null, + "helperResult": null +} +</pre> + +<ul> + <li><code>exception</code> は、評価中にスローされた例外の JSON-ification を保持します。</li> + <li><code>exceptionMessage</code> は <code>exception.toString()</code> の結果を保持します。</li> + <li><code>result</code> は結果の <code>ObjectActor</code> インスタンスを保持します。</li> + <li><code>helperResult</code> は JSTerm ヘルパーの結果、JSON のもの (コンテンツオブジェクトではありません) から来るものです。</li> +</ul> + +<div class="warning"> +<p>Firefox 23では、プロトコルエラーが発生したときに使用されるデフォルトプロパティとの競合を避けるために、<code>error</code>および<code>errorMessage</code>プロパティの名前をそれぞれ<code>exception</code>および<code>exceptionMessage</code>に変更しました。</p> +</div> + +<h3 id="Autocomplete_など">Autocomplete など</h3> + +<p><code>autocomplete</code> リクエストパケット:</p> + +<pre class="brush:json;">{ + "to": "conn0.console9", + "type": "autocomplete", + "text": "d", + "cursor": 1 +} +</pre> + +<p>レスポンスパケット:</p> + +<pre class="brush:json;">{ + "from": "conn0.console9", + "matches": [ + "decodeURI", + "decodeURIComponent", + "defaultStatus", + "devicePixelRatio", + "disableExternalCapture", + "dispatchEvent", + "doMyXHR", + "document", + "dump" + ], + "matchProp": "d" +} +</pre> + +<p>また、レスポンスがない <code>clearMessagesCache</code> リクエストパケットもあります。これにより、コンソール API コールキャッシュがクリアされ、ページエラーキャッシュがクリアされるはずです。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717611">バグ 717611</a> を参照してください。</p> + +<h2 id="ネットワークロギング">ネットワークロギング</h2> + +<h3 id="networkEvent_パケット"><code>networkEvent</code> パケット</h3> + +<p>新しいネットワークリクエストがログに記録されるたびに <code>networkEvent</code> パケットが送信されます。</p> + +<pre class="brush:json;">{ + "from": "conn0.console10", + "type": "networkEvent", + "eventActor": { + "actor": "conn0.netEvent14", + "startedDateTime": "2012-09-17T19:50:03.699Z", + "url": "http://localhost/~mihai/mozilla/test2.css", + "method": "GET" + "isXHR": false, + "private": false + } +} +</pre> + +<p>このパケットは Web コンソールに新しいネットワークイベントを通知するために使用されます。リクエストごとに新しい <code>NetworkEventActor</code> インスタンスが作成されます。<code>isXHR</code> フラグはリクエストが <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> インスタンスを介して開始されたかどうかを示します。つまり、<a href="/ja/docs/XPCOM_Interface_Reference/nsIHttpChannel">nsIHttpChannel</a> の通知は <a href="/ja/docs/XPCOM_Interface_Reference/nsIXMLHttpRequest">nsIXMLHttpRequest</a> インターフェイスです。</p> + +<p><code>private</code> フラグは、ネットワークリクエストがプライベートウィンドウ/タブ (Firefox 24 で追加されたもの) から来たものかどうかを示します。</p> + +<h3 id="NetworkEventActor"><code>NetworkEventActor</code></h3> + +<p>新しいネットワークイベントアクターは、さらにリクエストおよびレスポンス情報を格納します。</p> + +<h4 id="networkEventUpdate_パケット"><code>networkEventUpdate</code> パケット</h4> + +<p>変更が発生したとき、新しいものが追加されたときに Web コンソール UI を最新の状態に保つ必要があります。この目的のために新しい <code>networkEventUpdate</code> パケットが送信されます。例：</p> + +<pre class="brush:json;">{ + "from": "conn0.netEvent14", + "type": "networkEventUpdate", + "updateType": "requestHeaders", + "headers": 10, + "headersSize": 425 +}, +{ + "from": "conn0.netEvent14", + "type": "networkEventUpdate", + "updateType": "requestCookies", + "cookies": 0 +}, +{ + "from": "conn0.netEvent14", + "type": "networkEventUpdate", + "updateType": "requestPostData", + "dataSize": 1024, + "discardRequestBody": false +}, +{ + "from": "conn0.netEvent14", + "type": "networkEventUpdate", + "updateType": "responseStart", + "response": { + "httpVersion": "HTTP/1.1", + "status": "304", + "statusText": "Not Modified", + "headersSize": 194, + "discardResponseBody": true + } +}, +{ + "from": "conn0.netEvent14", + "type": "networkEventUpdate", + "updateType": "eventTimings", + "totalTime": 1 +}, +{ + "from": "conn0.netEvent14", + "type": "networkEventUpdate", + "updateType": "responseHeaders", + "headers": 6, + "headersSize": 194 +}, +{ + "from": "conn0.netEvent14", + "type": "networkEventUpdate", + "updateType": "responseCookies", + "cookies": 0 +}, +{ + "from": "conn0.netEvent14", + "type": "networkEventUpdate", + "updateType": "responseContent", + "mimeType": "text/css", + "contentSize": 0, + "discardResponseBody": true +} +</pre> + +<p>実際のヘッダー、Cookie、および本文は送信されません。</p> + +<h4 id="getRequestHeaders_とその他のパケット"><code>getRequestHeaders</code> とその他のパケット</h4> + +<p>ネットワークイベントの詳細については、次のパケットリクエスト (およびレスポンス) を使用できます。</p> + +<p><code>getRequestHeaders</code> パケット:</p> + +<pre class="brush:json;">{ + "to": "conn0.netEvent15", + "type": "getRequestHeaders" +} +{ + "from": "conn0.netEvent15", + "headers": [ + { + "name": "Host", + "value": "localhost" + }, ... + ], + "headersSize": 350 +} +</pre> + +<p><code>getRequestCookies</code> パケット:</p> + +<pre class="brush:json;">{ + "to": "conn0.netEvent15", + "type": "getRequestCookies" +} +{ + "from": "conn0.netEvent15", + "cookies": [] +} +</pre> + +<p><code>getResponseHeaders</code> パケット:</p> + +<pre class="brush:json;">{ + "to": "conn0.netEvent15", + "type": "getResponseHeaders" +} +{ + "from": "conn0.netEvent15", + "headers": [ + { + "name": "Date", + "value": "Mon, 17 Sep 2012 20:05:27 GMT" + }, ... + ], + "headersSize": 320 +} +</pre> + +<p><code>getResponseCookies</code> パケット:</p> + +<pre class="brush:json;">{ + "to": "conn0.netEvent15", + "type": "getResponseCookies" +} +{ + "from": "conn0.netEvent15", + "cookies": [] +} +</pre> + +<div class="note"> +<p>Firefox19より提供開始：上記のパケットのすべてのヘッダーとCookieの値に対して、値が非常に長い場合は<a href="https://wiki.mozilla.org/Remote_Debugging_Protocol#Objects" title="https://wiki.mozilla.org/Remote_Debugging_Protocol#Objects"><code>LongStringActor</code> grips</a>を使用します。 これにより、ネットワーク帯域幅の使い過ぎを避けることができます。</p> +</div> + +<p><code>getRequestPostData</code> パケット:</p> + +<pre class="brush:json;">{ + "to": "conn0.netEvent15", + "type": "getRequestPostData" +} +{ + "from": "conn0.netEvent15", + "postData": { text: "foobar" }, + "postDataDiscarded": false +}</pre> + +<p><code>getResponseContent</code> パケット:</p> + +<pre class="brush:json;">{ + "to": "conn0.netEvent15", + "type": "getResponseContent" +} +{ + "from": "conn0.netEvent15", + "content": { + "mimeType": "text/css", + "text": "\n@import \"test.css\";\n\n.foobar { color: green }\n\n" + }, + "contentDiscarded": false +} +</pre> + +<p>リクエストとレスポンスの内容のテキスト値は、LongStringActorグリップを使用して最も一般的に送信されます。 非常に短いリクエスト/レスポンスのボディについては、生のテキストを送信します。</p> + +<div class="note"> +<p>Firefox19から：非テキストレスポンスタイプの場合、Base64エンコーディング（これはおそらく<code>LongStringActor</code>グリップです）でコンテンツを送信します。違いを伝えるには、<code>response.content.encoding == "base64"</code>かどうかを確認してください。</p> +</div> + +<p><code>getEventTimings</code> パケット:</p> + +<pre class="brush:json;">{ + "to": "conn0.netEvent15", + "type": "getEventTimings" +} +{ + "from": "conn0.netEvent15", + "timings": { + "blocked": 0, + "dns": 0, + "connect": 0, + "send": 0, + "wait": 16, + "receive": 0 + }, + "totalTime": 16 +} +</pre> + +<h3 id="fileActivity_パケット"><code>fileActivity</code> パケット</h3> + +<p>ファイルのロードが監視されると、次の <code>fileActivity</code> パケットがクライアントに送信されます。</p> + +<pre class="brush:json;">{ + "from": "conn0.console9", + "type": "fileActivity", + "uri": "file:///home/mihai/public_html/mozilla/test2.css" +} +</pre> + +<h2 id="ヒストリー">ヒストリー</h2> + +<p>Firefoxバージョンによるプロトコルの変更：</p> + +<ul> + <li>Firefox 18: 初期バージョン。</li> + <li>Firefox 19: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=787981" title="https://bugzilla.mozilla.org/show_bug.cgi?id=787981">bug 787981</a> - いくつかの場所で <code>LongStringActor</code> の使用法を追加しました。</li> + <li>Firefox 20: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=792062" title="https://bugzilla.mozilla.org/show_bug.cgi?id=792062">bug 792062</a> - removed <code>locationChanged</code> packet and updated the <code>tabNavigated</code> packet for tab actors.</li> + <li>Firefox 23: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783499" title="https://bugzilla.mozilla.org/show_bug.cgi?id=783499">bug 783499</a> - removed the <code>WebConsoleObjectActor</code>. Now the Web Console uses the JavaScript debugger API and the <code>ObjectActor</code>.</li> + <li>Firefox 23: added the <code>bindObjectActor</code> and <code>frameActor</code> options to the <code>evaluateJS</code> request packet.</li> + <li>Firefox 24: new <code>private</code> flags for the console actor notifications, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=874061">bug 874061</a>. Also added the <code>lastPrivateContextExited</code> notification for the global console actor.</li> + <li>Firefox 24: new <code>isXHR</code> flag for the <code>networkEvent</code> notification, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=859046">bug 859046</a>.</li> + <li>Firefox 24: removed the <code>message</code> property from the <code>pageError</code> packet notification, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=877773">bug 877773</a>. The <code>lineText</code> and <code>errorMessage</code> properties can be long string actors now.</li> + <li>Firefox 25: added the <code>url</code> option to the <code>evaluateJS</code> request packet.</li> + <li>Firefox 25: added the <code>getPreferences</code> and <code>sendHTTPRequest</code> request packets to the console actor, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=886067" title="Bug 886067 - Netmonitor displays request sizes as '0 KB' after opening Console">bug 886067</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=731311" title="Bug 731311 - Network monitor should allow to replay and edit requests">bug 731311</a>.</li> +</ul> + +<h2 id="まとめ">まとめ</h2> + +<p>この文書の執筆時点では、この文書は <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=768096" title="https://bugzilla.mozilla.org/show_bug.cgi?id=768096">バグ 768096</a> で行った作業とそれに続く変更をまとめたものです。このドキュメントを最新の状態に保つよう努めています。これがあなたの役立つことを願っています。</p> + +<p>Webコンソールサーバーを変更する場合は、このドキュメントを更新してください。 ありがとうございました！</p> diff --git a/files/ja/tools/web_console/rich_output/index.html b/files/ja/tools/web_console/rich_output/index.html new file mode 100644 index 0000000000..385586dd91 --- /dev/null +++ b/files/ja/tools/web_console/rich_output/index.html @@ -0,0 +1,75 @@ +--- +title: 高度な出力 +slug: Tools/Web_Console/Rich_output +translation_of: Tools/Web_Console/Rich_output +--- +<div>{{ToolsSidebar}}</div><p>ウェブコンソールでオブジェクトを出力する際は、オブジェクト名だけでなく、より高度な情報も表示します。特に、以下のような情報です:</p> + +<ul> + <li><a href="/ja/docs/Tools/Web_Console/Rich_output#Type-specific_rich_output">特定の型について追加情報を提供</a></li> + <li><a href="/ja/docs/Tools/Web_Console/Rich_output#Examining_object_properties">オブジェクトのプロパティを詳しく調査</a></li> + <li><a href="/ja/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">DOM 要素の詳細情報を提供、およびインスペクターで要素の選択が可能</a></li> +</ul> + +<h2 id="Type-specific_rich_output" name="Type-specific_rich_output">型に固有の高度な出力</h2> + +<p>ウェブコンソールでは以下のように、さまざまなオブジェクト型について高度な情報を提供します:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>Object</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Array</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Date</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Promise</code></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 36 の新機能</p> + </div> + + <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p> + </td> + </tr> + <tr> + <td><code>RegExp</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Window</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Document</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Element</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Event</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/14434/webconsole-events.png" style="height: 51px; width: 600px;"></td> + </tr> + </tbody> +</table> + +<h2 id="Examining_object_properties" name="Examining_object_properties">オブジェクトのプロパティを調査</h2> + +<p>オブジェクトをコンソールに出力すると、斜体で表示します。それをクリックすると、オブジェクトの詳細情報を表示している新たなパネルが現れます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7381/commandline-inspecting.png" style="display: block; margin-left: auto; margin-right: auto;"><kbd>Esc</kbd> を押下すると、このパネルを閉じます。</p> + +<h2 id="Highlighting_and_inspecting_DOM_nodes" name="Highlighting_and_inspecting_DOM_nodes">DOM ノードのハイライト表示と調査</h2> + +<p>コンソールに出力された DOM 要素にマウスポインターを乗せると、そのノードをページ上でハイライト表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">上のスクリーンショットでは、コンソールの出力領域でノードの隣に "標的" のアイコンがあります。このアイコンをクリックすると、そのノードを選択した <a href="/ja/docs/Tools/Page_Inspector">インスペクター</a> に切り替わります。</p> diff --git a/files/ja/tools/web_console/split_console/index.html b/files/ja/tools/web_console/split_console/index.html new file mode 100644 index 0000000000..69ca618a7e --- /dev/null +++ b/files/ja/tools/web_console/split_console/index.html @@ -0,0 +1,26 @@ +--- +title: コンソールの常時表示 +slug: Tools/Web_Console/Split_console +translation_of: Tools/Web_Console/Split_console +--- +<div>{{ToolsSidebar}}</div> + +<p>コンソールを別のツールと並べて使用できます。ツールボックスで別のツールを使用しているときに <kbd>Esc</kbd> キーまたは <a href="/ja/docs/Tools/Tools_Toolbox#Toolbar">ツールバー</a> の "コンソールの常時表示を切り替えます" ボタンを押下してください。ツールボックスが分割表示されて元のツールが上段、ウェブコンソールが下段に表示されます。</p> + +<p> </p> + +<p><kbd>Esc</kbd> をもう一度押すか、「スプリットコンソールを隠す」メニューコマンドを選択して、スプリットコンソールを閉じることができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16106/split-console.png" style="border-style: solid; border-width: 1px; height: 77px; width: 350px;"></p> + +<p> </p> + +<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> + +<p>通常のコンソールと同様に、<code>$0</code> はインスペクターで選択している要素のショートハンドとして働きます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16105/split-console-debugger.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p> + +<p>デバッガでスプリットコンソールを使用するとき、コンソールのスコープは現在実行中のスタックフレームになります。よって関数内でブレークポイントに当たった場合、コンソールのスコープは関数のスコープになります。関数内で定義したオブジェクトのオートコンプリートが可能であり、実行中にそれらを簡単に変更できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16107/split-console-show-debug.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p> diff --git a/files/ja/tools/web_console/the_command_line_interpreter/index.html b/files/ja/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..45c0958db4 --- /dev/null +++ b/files/ja/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,123 @@ +--- +title: コマンドラインインタープリター +slug: Tools/Web_Console/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +<p>{{ToolsSidebar}}</p> + +<p>ウェブコンソールのコマンドラインで、JavaScript の構文を即座に評価することができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13280/console-cli.png" style="display: block; height: 296px; margin-left: auto; margin-right: auto; width: 877px;"></p> + +<h2 id="Entering_expressions" name="Entering_expressions">式を入力する</h2> + +<p>式の入力方法は、コマンドラインに入力して <kbd>Enter</kbd> を押下するだけです。複数行の式を入力する場合は、<kbd>Enter</kbd> の代わりに <kbd>Shift</kbd>+<kbd>Enter</kbd> を使用します。</p> + +<p>入力した式をメッセージ表示ウィンドウにエコー出力して、その後に結果を出力します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="geckoVersionNote">Firefox 47 の新機能</div> + +<p>Firefox 47 より、<kbd>Enter</kbd> を押下したときに入力が完了していないと思われる場合は、<kbd>Shift</kbd>+<kbd>Enter</kbd> として扱い、入力を完了できるようになりました。</p> + +<p>例えば、以下のように入力します:</p> + +<pre class="brush: js">function foo() {</pre> + +<p>そして <kbd>Enter</kbd> を押下すると、コンソールは直ちに入力内容を実行せずに <kbd>Shift</kbd>+<kbd>Enter</kbd> を押下したかのように動作しますので、関数定義の入力を完了できます。</p> + +<h2 id="Accessing_variables" name="Accessing_variables">変数にアクセスする</h2> + +<p>ページで定義している変数にアクセスすることができ、<code>window</code> のように組み込み済みの変数と <code>jQuery</code> のように JavaScript で追加した変数のどちらでも可能です:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Autocomplete" name="Autocomplete">オートコンプリート</h2> + +<p>コマンドラインにオートコンプリート機能があります。最初の数文字を入力すると、考えられる完成形を示すポップアップを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7375/commandline-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">候補を受け入れるには <kbd>Enter</kbd> または <kbd>Tab</kbd> を押下します。また上/下矢印キーで別の候補へ移動できます。どの候補も望まない場合は入力を続けてください。</p> + +<p>コンソールは、現在実行中のスタックフレームのスコープから候補を提示します。これにより関数内でブレークポイントに当たった場合は、関数内のローカルオブジェクトもオートコンプリートの対象になります。</p> + +<p>配列要素向けのオートコンプリート候補も表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Defining_variables" name="Defining_variables">変数を定義する</h2> + +<p>独自の変数を定義したり、その変数にアクセスしたりできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Command_history" name="Command_history">コマンド履歴</h2> + +<p>コマンドラインは、あなたが入力したコマンドを覚えています: 上下矢印キーで、履歴を行き来できます。</p> + +<p>Firefox 39 より、この履歴はセッションをまたいで維持するようになりました。履歴をクリアするには、<code>clearHistory()</code> <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">支援コマンド</a> を使用してください。</p> + +<h2 id="Working_with_iframes" name="Working_with_iframes">iframe で作業する</h2> + +<p>ページに <a href="/ja/docs/Web/HTML/Element/iframe">インラインフレーム</a> を埋め込んでいる場合は、<code>cd()</code> コマンドで特定のインラインフレームにコンソールのスコープを切り替えることができます。また、インラインフレームで表示しているドキュメントで定義した関数を実行できます。<code>cd()</code> でインラインフレームを選択する方法は 3 通りあります:</p> + +<p>インラインフレームの DOM 要素を渡すことができます:</p> + +<pre class="brush: js">var frame = document.getElementById("frame1"); +cd(frame);</pre> + +<p>インラインフレームにマッチする CSS セレクターを渡すことができます:</p> + +<pre class="brush: js">cd("#frame1");</pre> + +<p>インラインフレームの window グローバルオブジェクトを渡すことができます:</p> + +<pre class="brush: js">var frame = document.getElementById("frame1"); +cd(frame.contentWindow); +</pre> + +<p>トップレベルの window にコンテキストを戻す場合は、引数を与えずに <code>cd()</code> を呼び出してください:</p> + +<pre class="brush: js">cd();</pre> + +<p>例えば、インラインフレームを埋め込んだドキュメントがあるものとします:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>インラインフレームで新たな関数を定義しています:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "I'm frame1"; + } + </script> + </head> + <body> + </body> +</html></pre> + +<p>以下のようにしてコンテキストをインラインフレームに切り替えることができます:</p> + +<pre class="brush: js">cd("#frame1");</pre> + +<p>グローバル window の document がインラインフレームであることがわかります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">また、インラインフレーム内で定義した関数を呼び出すことができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h2 id="Helper_commands" name="Helper_commands">支援コマンド</h2> + +<p>{{page("/ja/Using_the_Web_Console/Helpers", "The commands")}}</p> diff --git a/files/ja/tools/webide/index.html b/files/ja/tools/webide/index.html new file mode 100644 index 0000000000..dbf0d9acf3 --- /dev/null +++ b/files/ja/tools/webide/index.html @@ -0,0 +1,42 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Apps + - Debugging + - Firefox OS + - WebIDE + - tool + - アプリ + - ツール +translation_of: Archive/WebIDE +--- +<div>{{ToolsSidebar}}</div> + +<div class="summary"> +<p>WebIDEでは、Android 版 Firefox や Android 版 Chrome 、iOS 版 Safari といったさまざまなブラウザに、<a href="/ja/docs/Tools">Firefox の開発ツール</a>を接続できます。各ブラウザに接続する手順については、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a>のページをご覧ください。</p> +</div> + +<p>WebIDE では、始めに <a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes">1 つ以上のランタイムをセットアップ</a>します。ランタイムは、アプリの実行やデバッグを行う環境です。ランタイムは USB (<a href="/ja/Firefox/Releases/39">Firefox 39</a> 以降では Wi-Fi も可能) でパソコンに接続した Firefox OS デバイスか、パソコン自体にインストールした Firefox OS シミュレータを使用できます。</p> + +<p>次に、<a href="/ja/docs/Tools/WebIDE/Creating_and_editing_apps">アプリを作成するか既存のアプリを開きます</a>。アプリを新規作成する場合は、アプリを作り始めるのに必要なディレクトリ構造や最小限の標準モデルを収めたテンプレートか、Privileged API を使用する方法を示す、より充実したテンプレートを使用できます。WebIDE はアプリ内のファイルをツリーに表示します。また内蔵のソースエディタでそれらの編集や保存が可能です。もちろん、内蔵のエディタを使用しないことも可能です。アプリの開発は WebIDE の外部で行い、デバッグにのみ WebIDE を使用できます。</p> + +<p>そして、<a href="/ja/docs/Tools/WebIDE/Running_and_debugging_apps">アプリをいずれかのランタイムにインストールして実行できます</a>。また実行中のアプリを調査または変更するために<a href="/ja/docs/Tools/Page_Inspector">インスペクタ</a>、<a href="/ja/docs/Tools/Web_Console">コンソール</a>、<a href="/ja/docs/Tools/Debugger">JavaScript デバッガ</a>などの開発ツール一式を開くことができます。</p> + +<hr> +<dl> + <dt><a href="/ja/docs/Tools/WebIDE/Opening_WebIDE">WebIDE を開く</a></dt> + <dd>Firefox で WebIDE を開く方法を説明します。</dd> + <dt><a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes">ランタイムのセットアップ</a></dt> + <dd>Firefox OS デバイス、Firefox OS シミュレータ、Android 版 Firefox といった、アプリのインストールが可能なランタイムに接続する方法を説明します。</dd> + <dt><a href="/ja/docs/Tools/WebIDE/Creating_and_editing_apps">アプリの作成と編集</a></dt> + <dd>WebIDE を使用してアプリを作成し、開いて、開発する方法を説明します。</dd> + <dt><a href="/ja/docs/Tools/WebIDE/The_runtime_menu">ランタイムメニュー</a></dt> + <dd>ランタイムを選択するとランタイムメニューを使用して、ランタイムやアプリの情報を確認したり、設定を変更したり、スクリーンショットを取得することができます。</dd> + <dt><a href="/ja/docs/Tools/WebIDE/Running_and_debugging_apps">アプリの実行とデバッグ</a></dt> + <dd>アプリをランタイムにインストールする方法や、Firefox の開発ツールを使用してデバッグする方法を説明します。</dd> + <dt><a href="/ja/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">WebIDE で Cordova アプリを扱う</a></dt> + <dd>Firefox 39 より、WebIDE で Cordova アプリの編集やデバッグが可能になりました。</dd> + <dt><a href="/ja/docs/Tools/WebIDE/Troubleshooting">トラブルシューティング</a></dt> + <dd>WebIDE のトラブル、特にランタイムとの接続に関するトラブルのヘルプです。</dd> +</dl> diff --git a/files/ja/tools/webide/monitor/index.html b/files/ja/tools/webide/monitor/index.html new file mode 100644 index 0000000000..a869b6e659 --- /dev/null +++ b/files/ja/tools/webide/monitor/index.html @@ -0,0 +1,158 @@ +--- +title: モニタ +slug: Tools/WebIDE/Monitor +translation_of: Archive/WebIDE/Monitor +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>WebIDE のモニタは、<a href="/ja/Firefox_OS">Firefox OS</a> アプリや端末のパフォーマンスの追跡を支援するように設計された汎用データツールです。</p> +</div> + +<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="height: 464px; width: 800px;"></p> + +<p>モニタは時系列を可視化するため、リアルタイムにインタラクティブなグラフを表示できます。</p> + +<h2 id="Available_graphs" name="Available_graphs">使用可能なグラフ</h2> + +<p>モニタは、さまざまなグラフを提供します。これらは通常、WebIDE を Firefox OS のランタイムに接続したときから表示します。</p> + +<h3 id="Unique_Set_Size" name="Unique_Set_Size">Unique Set Size</h3> + +<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="height: 310px; width: 879px;"></p> + +<p>このグラフは、すべての Firefox OS プロセスのメモリフットプリントを時系列で表示します。Firefox OS アプリのメモリ消費に関心がある場合はこのグラフを表示すれば、アプリのプロセスが使用するプライベートメモリが表示されます。</p> + +<h2 id="Displaying_your_own_data" name="Displaying_your_own_data">独自データを表示する</h2> + +<p>モニタは多くのさまざまな発信元から自由な形式のデータを受け入れますので、どのような種類のデータでも比較的容易に表示できます。</p> + +<h3 id="From_a_Firefox_OS_device" name="From_a_Firefox_OS_device">Firefox OS デバイスから</h3> + +<p>Observer 通知の送信により、接続した端末からデータを送信できます。</p> + +<p>注記: <a href="/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app">認定アプリ</a>でこれを行いたい場合は、<a href="/ja/docs/Tools/WebIDE/Running_and_debugging_apps#Unrestricted_app_debugging_(including_certified_apps_main_process_etc.)" title="Debugging certified apps">こちらの手順</a>に従ってください。</p> + +<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p> + +<p>chrome 権限を持つ JS コードから、データを送信できます。ある JS コードの実行時間を測定する例を示します:</p> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js">const Services = require('Services'); + +var start = Date.now(); +// code to benchmark +var stop = Date.now(); + +var data = { graph: 'Performance', myFeature: stop-start, time: stop }; +Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</pre> + +<h4 id="C" name="C">C++</h4> + +<pre class="brush: cpp">observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);</pre> + +<p>Gecko のどこからでもデータを送信できます。あるコードの実行時間を測定する例を示します:</p> + +<pre class="brush: cpp">#include <time.h> +#include "nsPrintfCString.h" +#include "nsIObserverService.h" + +clock_t start = clock(); +// code to benchmark +clock_t stop = clock(); +double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000); + +nsCOMPtr<nsIObserverService> observerService = services::GetObserverService(); +if (observerService) { + nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time); + nsAutoString data = NS_ConvertUTF8toUTF16(str); + observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get()); +}</pre> + +<h3 id="From_your_computer" name="From_your_computer">コンピュータから</h3> + +<p>WebSocket サーバを通して、簡単にモニタへデータを送信できます。Firefox の拡張機能、コマンドラインツール、Web サービスを作成する場合に役立つでしょう。</p> + +<p>デフォルトでは、モニタはコンピュータの 9000 番ポートで実行するサーバを見ています。これは、設定項目 <code>devtools.webide.monitorWebSocketURL</code> で変更できます。</p> + +<p>モニタはローカルネットワーク内だけでなく、インターネットのどこからでもデータを受け入れるようにすることができます。</p> + +<h4 id="Node.js" name="Node.js">Node.js</h4> + +<pre class="brush: js">TODO</pre> + +<h4 id="Python" name="Python">Python</h4> + +<pre class="brush: python">TODO</pre> + +<h3 id="Supported_formats" name="Supported_formats">サポートする形式</h3> + +<p>モニタは、概ね以下のような JSON オブジェクト形式のデータを受け入れます:</p> + +<pre class="brush: json">{ + "graph": "myGraph", + "curve": "myCurve", + "value": 42, + "time": 1234567890 +}</pre> + +<p>この形式は高い柔軟性を持たせようとするものです。指定されたグラフが存在しない場合は、自動的に作成します。</p> + +<h4 id="Arbitrary_names" name="Arbitrary_names">任意の名称</h4> + +<p>認識できない項目は、グラフの名称と値であるとみなします。</p> + +<p>送信可能な最小のパケットは以下のようなものです:</p> + +<pre class="brush: json">{ "myCurve": 42 }</pre> + +<p>これは無名のグラフの "myCurve" に、データポイントを追加します。<code>time</code> がない場合の既定値は、モニタがパケットを受け取った時刻です。</p> + +<p>精度を高めるため、データで常に <code>timestamp</code> を指定するとよいでしょう:</p> + +<pre class="brush: json">{ + "current": 60, + "voltage": 500, + "time": 1234567890 +}</pre> + +<h4 id="Multiple_values" name="Multiple_values">複数の値</h4> + +<p>1 回の更新で、複数のグラフのデータを送信できます:</p> + +<pre class="brush: json">{ + "graph": "myGraph", + "myCurve1": 50, + "myCurve2": 300, + "myCurve3": 9000, + "time": 1234567890 +}</pre> + +<p>または、ひとつのグラフに複数のデータポイントを示すことができます:</p> + +<pre class="brush: json">{ + "graph": "myGraph", + "curve": "myCurve", + "values": [ + { "time": 1234567890, "value": 42 }, + { "time": 1234567981, "value": 51 } + ] +}</pre> + +<h4 id="Multiple_updates" name="Multiple_updates">複数の更新</h4> + +<p>配列形式で、複数の更新データを送信することもできます:</p> + +<pre class="brush: json">[ + { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 }, + { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 } +]</pre> + +<h4 id="Punctual_events" name="Punctual_events">時間指定のイベント</h4> + +<p>グラフ内の垂直線で特定のイベントを示すため、更新データに <code>event</code> キーを付加します:</p> + +<pre class="brush: json">{ + "graph": "myGraph", + "event": "myEvent", + "time": 1234567980 +}</pre> diff --git a/files/ja/tools/webide/opening_webide/index.html b/files/ja/tools/webide/opening_webide/index.html new file mode 100644 index 0000000000..eacbcba536 --- /dev/null +++ b/files/ja/tools/webide/opening_webide/index.html @@ -0,0 +1,30 @@ +--- +title: WebIDE を開く +slug: Tools/WebIDE/Opening_WebIDE +tags: + - DevTools + - WebIDE + - opening +translation_of: Archive/WebIDE/Opening_WebIDE +--- +<div>{{ToolsSidebar}}</div><p>WebIDE を開く方法は 3 つあります:</p> + +<ul> + <li><em>ツール > Web 開発</em> メニューで <em>WebIDE</em> をクリックする。</li> + <li>キーボードショートカット <em>Shift + F8</em> を使用する。</li> + <li>Firefox ツールバーのアイコンをクリックする。<a href="/ja/Firefox/Developer_Edition">Firefox Developer Edition</a> では始めから表示されています。また <a href="/ja/Firefox/Releases/36">バージョン 36</a> 以降では、WebIDE を一度でも開くと表示されるようになります:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> + +<p>WebIDE は以下のようなものです:<img alt="" src="https://mdn.mozillademos.org/files/12147/webide.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">左側のサイドバーで、既存のアプリの起動や新しいアプリの作成ができます。右側のサイドバーで、ランタイムの選択や<a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes">新しいランタイムのセットアップ</a>ができます。</p> + +<p>中央にあるボタンでアプリの実行・停止・デバッグを行います。これらのボタンはアプリを開いていて、かつランタイムが選択済みである場合にのみ使用できます。</p> + +<p>WebIDE のフォントサイズは、標準的なキーボードショートカットを使用して変更できます (OS X では <code>Control</code> の代わりに <code>Command</code> を使用します):</p> + +<ul> + <li><code>Ctrl +</code> でフォントサイズを拡大</li> + <li><code>Ctrl -</code> でフォントサイズを縮小</li> + <li><code>Ctrl 0</code> でフォントサイズを既定に戻す</li> +</ul> diff --git a/files/ja/tools/webide/setting_up_runtimes/index.html b/files/ja/tools/webide/setting_up_runtimes/index.html new file mode 100644 index 0000000000..e14ff0af69 --- /dev/null +++ b/files/ja/tools/webide/setting_up_runtimes/index.html @@ -0,0 +1,126 @@ +--- +title: ランタイムのセットアップ +slug: Tools/WebIDE/Setting_up_runtimes +translation_of: Archive/WebIDE/Setting_up_runtimes +--- +<div>{{ToolsSidebar}}</div><p>ランタイムは Web ブラウザなど、アプリの実行やデバッグを行う環境です。以下のようなランタイムがあります:</p> + +<ul> + <li>Firefox のインスタンス。デスクトップ版あるいは携帯電話で実行する Android 版 Firefox のインスタンスです。</li> + <li>Firefox OS を実行するデバイス、またはデスクトップ環境にインストールした Firefox OS シミュレータ。</li> + <li>デスクトップまたはモバイルデバイスで実行する Google Chrome や Safari といった、別のブラウザエンジン。</li> +</ul> + +<p>WebIDE では、右側のサイドバーでランタイムを管理します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12149/webide-right-sidebar.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;"></p> + +<p>サイドバーでは、ランタイムを 4 種類にグループ分けしています:</p> + +<dl> + <dt><a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_a_Firefox_OS_device">USB デバイス</a></dt> + <dd>USB で接続した Firefox OS デバイス。Firefox 36 より、<a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">USB 経由で Android 版 Firefox</a> への接続も可能です。</dd> + <dt><a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">WI-FI デバイス</a></dt> + <dd>Wi-Fi 経由で接続した Firefox OS デバイス。<em>Firefox 39 の新機能</em></dd> + <dt><a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Adding_a_Simulator">シミュレータ</a></dt> + <dd>インストール済みの、Firefox OS シミュレータのインスタンス。</dd> + <dt><a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Other_runtimes">その他</a></dt> + <dd>任意のホスト名とポートを使用して、リモートランタイムに WebIDE を接続します。<a href="/ja/docs/Tools/Valence">Valence</a> アドオンをインストールしている場合は、<a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Valence-enabled_runtimes">アドオンで使用可能になるランタイム</a>をこのセクションに表示します。</dd> +</dl> + +<p>ここでは、ランタイムを追加する方法を説明します。</p> + +<h2 id="Connecting_a_Firefox_OS_device" name="Connecting_a_Firefox_OS_device">Firefox OS デバイスを接続する</h2> + +<p>十分に新しいバージョンの Firefox と Firefox OS がある場合は、<a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">Wi-Fi 経由で Firefox OS デバイスに接続できます</a>。そうでない場合は、USB 経由で接続しなければなりません。</p> + +<ul> + <li id="Connecting_over_USB"><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_USB">USB 経由で接続する方法</a></li> + <li><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">Wi-Fi 経由で接続する方法</a></li> +</ul> + +<h2 id="Connecting_to_Firefox_for_Android" name="Connecting_to_Firefox_for_Android">Android 版 Firefox に接続する</h2> + +<p>USB で接続した Android デバイスおよび Android 版 Firefox を、"USB デバイス" 配下のランタイムとして表示します。また Firefox 42 より、Wi-Fi 経由でAndroid 版 Firefox に接続できます。</p> + +<ul> + <li id="Connecting_over_USB"><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">USB 経由で接続する方法</a></li> + <li><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Wi-Fi 経由で接続する方法</a></li> +</ul> + +<h2 id="Adding_a_Simulator" name="Adding_a_Simulator">シミュレータを追加する</h2> + +<p><a href="/ja/docs/Tools/Firefox_OS_Simulator">Firefox OS シミュレータ</a>は Firefox OS の上位層であり、パソコン上で動作して Firefox OS デバイスのシミュレーションを行います。これは Firefox OS デバイスと同じサイズのウィンドウで動作し、Firefox OS のユーザインターフェイスや同梱アプリを含み、そして Firefox OS デバイスの API の多くをシミュレーションします。</p> + +<p>これは多くの場合、アプリのテストやデバッグに実機が必要ないということです。</p> + +<p>シミュレータは Firefox に同梱せず、<a href="/ja/docs/Mozilla/Add-ons">アドオン</a>として提供しています。ランタイムサイドバーで "シミュレータをインストール" をクリックすると、さまざまなバージョンの Firefox OS シミュレータをインストールできるページが開きます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12151/webide-extra-components.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">シミュレータはいくつでもインストールできます。シミュレータはダウンロードに時間がかかりますので、お待ちください。</p> + +<div class="note"> +<p>Firefox OS シミュレータ 2.6 以降を使用するには、Firefox 45 以降を使用しなければなりません。</p> +</div> + +<p>シミュレータをインストールしたら "追加のコンポーネント" ウィンドウを閉じてください。ランタイムサイドバーの項目として、インストールしたシミュレータが表示されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12153/webide-installed-simulators.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;"></p> + +<p>シミュレータについて詳しくは、<a href="/ja/docs/Tools/Firefox_OS_Simulator">ドキュメント</a>をご覧ください。</p> + +<h3 id="Configuring_Simulators" name="Configuring_Simulators">シミュレータの設定</h3> + +<div class="note"> +<p>Firefox 42 の新機能</p> +</div> + +<p>Firefox 42 より、サイドバー上のシミュレータの項目の隣に設定アイコンがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11321/webide-settings.png" style="display: block; height: 50px; margin-left: auto; margin-right: auto; width: 364px;"></p> + +<p>アイコンをクリックすると、シミュレータの設定を行う画面を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12155/webide-simulator-options.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">以下の設定が可能です:</p> + +<ul> + <li>名前</li> + <li>カスタム<a href="/ja/Firefox_OS/Building_the_Firefox_OS_simulator">デスクトップ B2G ビルド</a>を使用する</li> + <li>カスタム Gaia プロファイルを使用する</li> + <li>シミュレータで特定のデバイスやスクリーンサイズをシミュレーションする</li> +</ul> + +<h2 id="Other_runtimes" name="Other_runtimes">その他のランタイム</h2> + +<h3 id="Remote_runtime" name="Remote_runtime">リモートランタイム</h3> + +<p>リモートランタイムによって、任意のホスト名とポート番号を使用してリモートデバイスに接続できます。</p> + +<p>内部で Firefox OS デバイスや Android デバイスは、Android Debug Bridge あるいは <a href="http://developer.android.com/tools/help/adb.html">ADB</a> と呼ばれるプログラムを用いてパソコンと接続しています。デフォルトで WebIDE は、ADB Helper を使用します。これは ADB のインストールやポートフォワーディングの設定により手続きを単純化しますので、Firefox のデスクトップツールとデバイスがメッセージを交換できるようになります。</p> + +<p>これはほとんどの場合に便利ですが、ADB を WebIDE の外部で使用したい場合があるかもしれません。例えば、コマンドラインから直接 ADB を実行することがあるでしょう。その場合は <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> コマンドを使用して、ホスト名とポート番号を指定することによりデバイスと接続します (例: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>)。<br> + さらに WebIDE も接続したい場合は <a href="https://support.mozilla.org/ja/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">ADB Helper アドオンを無効化</a>したうえでカスタムランタイムにより、<code>adb forward</code> に渡すホスト名とポート番号を入力 (例: <code>localhost:6000</code>) して WebIDE を接続します。</p> + +<p>また Firefox 36 より前のバージョンでは、ADB Helper は Android 版 Firefox への接続をサポートしていないため、Android 版 Firefox に WebIDE を接続したい場合はポートフォワーディングを設定したうえで、カスタムランタイムを使用して接続することが必要です。詳しくは Firefox 36 より前のバージョンで <a href="/ja/docs/Tools/Remote_Debugging/Firefox_for_Android">ADB を使用して Android 版 Firefox に接続する方法</a>のドキュメントをご覧ください。</p> + +<h3 id="Valence-enabled_runtimes" name="Valence-enabled_runtimes">Valence で使用できるランタイム</h3> + +<p><a href="/ja/docs/Tools/Valence">Valence</a> アドオンをインストールしている場合は、以下 3 種類のランタイムが追加されます:</p> + +<ul> + <li>Android 版 Chrome</li> + <li>iOS 版 Safari</li> + <li>デスクトップ版 Chrome</li> +</ul> + +<p>これらのランタイムに接続する手順は、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a>の該当するページで確認してください。</p> + +<h2 id="Selecting_a_runtime" name="Selecting_a_runtime">ランタイムの選択</h2> + +<p>ランタイムをセットアップすると、ランタイムサイドバーで選択できるようになります。</p> + +<ul> + <li>シミュレータを選択すると、WebIDE はシミュレータを起動します。</li> + <li>Firefox OS デバイスを選択すると、WebIDE はデバイスに接続します。デバイスでは接続を望むかを問い合わせるダイアログが表示されます。"OK" を押してください。</li> +</ul> + +<p>以上で、WebIDE のツールバーの中央にある "インストールして実行" ボタンが使用可能になります。このボタンをクリックして、選択したランタイムで<a href="/ja/docs/Tools/WebIDE/Running_and_debugging_apps">アプリのインストールや実行</a>を行います。</p> diff --git a/files/ja/tools/webide/the_runtime_menu/index.html b/files/ja/tools/webide/the_runtime_menu/index.html new file mode 100644 index 0000000000..447594845d --- /dev/null +++ b/files/ja/tools/webide/the_runtime_menu/index.html @@ -0,0 +1,53 @@ +--- +title: ランタイムメニュー +slug: Tools/WebIDE/The_runtime_menu +translation_of: Archive/WebIDE/The_runtime_menu +--- +<div>{{ToolsSidebar}}</div><p>ランタイムを選択すると、ランタイムの設定にアクセスできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12161/webide-runtime-settings.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">以下の作業に使用します:</p> + +<ul> + <li><a href="/ja/docs/Tools/WebIDE/The_runtime_menu#Runtime_info">ランタイムの情報を参照する</a></li> + <li><a href="/ja/docs/Tools/WebIDE/The_runtime_menu#Permissions_table">アプリの許可設定一覧を参照する</a></li> + <li><a href="/ja/docs/Tools/WebIDE/The_runtime_menu#Device_preferences">端末の設定を参照および変更する</a></li> + <li><a href="/ja/docs/Tools/WebIDE/The_runtime_menu#Device_settings">端末のオプションを参照および変更する</a></li> + <li><a href="/ja/docs/Tools/WebIDE/The_runtime_menu#Screenshot">スクリーンショットを撮影する</a></li> + <li>ランタイムを切断する</li> +</ul> + +<h2 id="Runtime_info" name="Runtime_info">ランタイム情報</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12163/webide-runtime-info.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;"></p> + +<h2 id="Permissions_table" name="Permissions_table">許可設定一覧</h2> + +<p>現在のランタイムにおける<a href="/ja/Apps/Build/App_permissions">アプリの許可設定</a>をまとめた一覧表です。API および<a href="/ja/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">アプリの種類</a>ごとにアクセスが許可 (✓)、拒否 (✗) またはユーザに問い合わせる (!) のいずれかを示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12165/webide-permissions-table.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 1013px;"></p> + +<h2 id="Device_preferences" name="Device_preferences">端末の設定</h2> + +<p><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrefService">Preferences service</a> を通して使用可能な端末の設定項目を、編集可能な一覧表で表示します。Firefox の about:config と同じプラットフォームレベルの設定値のデータセットを公開していますが、これは端末向けの設定です。</p> + +<p>これらの設定はセキュリティ上とてもデリケートですので、変更できるようにするためには<a href="/ja/docs/Tools/WebIDE/Running_and_debugging_apps#Unrestricted_app_debugging_(including_certified_apps.2C_main_process.2C_etc.)">開発ツールの権限を制限する設定</a>を無効にしなければなりません。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12167/webide-device-preferences.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 1013px;"></p> + +<h2 id="Device_settings" name="Device_settings">端末オプション</h2> + +<div class="note"> +<p>Firefox OS 2.5 の新機能</p> +</div> + +<p>Firefox OS の設定アプリで制御できる設定項目を、変更可能な一覧表で表示します。端末上に変更するための UI を持つ設定のほとんど (例えば音量やアラームなど) は、端末オプションの方にあります。</p> + +<p>このような設定項目は端末の設定よりデリケートではなく、権限を制限する設定を無効化しなくても変更できます。</p> + +<p>この機能を使用するには、Firefox 38 以降の WebIDE で Firefox OS 2.5 以降に接続しなければなりません。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12169/webide-device-settings.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 1013px;"></p> + +<h2 id="Screenshot" name="Screenshot"><strong>スクリーンショット</strong></h2> + +<p>ランタイムのスクリーンショットを撮影するコマンドです。</p> diff --git a/files/ja/tools/webide/troubleshooting/index.html b/files/ja/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..4bd534047c --- /dev/null +++ b/files/ja/tools/webide/troubleshooting/index.html @@ -0,0 +1,101 @@ +--- +title: WebIDE のトラブルシューティング +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +<div>{{ToolsSidebar}}</div><h2 id="Connecting_to_Firefox_OS_over_USB" name="Connecting_to_Firefox_OS_over_USB">USB 経由で Android 版 Firefox に接続する</h2> + +<p>Android OS で実行している Firefox のインスタンスに接続できない場合は、以下の項目を確認してください:</p> + +<ul> + <li>Firefox のバージョンを確認する: デバイスで <strong>Android 版 Firefox 36 以降</strong>を実行していることを確認してください。WebIDE はこれより古いバージョンを自動的に検出できず、ポートフォワーディングを有効化してデバイスのポートに接続しなければなりません。<a class="external external-icon" href="/ja/docs/Tools/Remote_Debugging/Firefox_for_Android">こちら</a>の手順に従ってください。</li> + <li>Firefox でリモートデバッグを有効化しているか確認する: Android 版 Firefox を起動してメニューを開き、<code>設定</code>を選択します。そして、<code>高度な設定 > USB 経由でリモートデバッグする</code>にチェックを入れてください。</li> + <li>デバイスの開発者向けオプションで、USB デバッグを有効にしてください。</li> + <li>まだ WebIDE のウィンドウにデバイスが表示されない場合は、電話機で<code>リモートデバッグ</code>の有効化を再度行ってください。 + <ul> + <li>デバイスをコンピューターから切り離して、デバイス側で<code>リモートデバッグ</code>を無効にします。</li> + <li>デバイスをコンピューターに接続して、<code>リモートデバッグ</code>を有効化します。ここで、デバイス側のデバッガのインスタンスが再起動します。</li> + <li>WebIDE から再び接続してみてください。</li> + </ul> + </li> + <li>使用している USB ケーブルの確認: + <ul> + <li>USB ケーブルをいったん外し、再び接続してください。</li> + <li>USB ケーブルを、コンピューターの別の USB ポートに接続してください。つなぎ替えが必要であるかもしれません。</li> + <li>別の USB ケーブルで試してください。電話機に同梱されるケーブルは低品質で、接続が失敗することがあります。</li> + <li>短い USB ケーブルを使用してください。長い USB ケーブルではうまく動作しないことがあります。</li> + </ul> + </li> + <li>Linux を使用している場合の確認事項: + <ul> + <li><a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">開発用に端末をセットアップする</a> のステップ 3 に記載されているとおりに、<code>udev</code> のルールファイルにルールを追加してください。Android の <a href="http://developer.android.com/tools/device.html#VendorIds"><code>idVendor</code> 値</a>のリストが役に立つでしょう。そして、デバイスを表示させるために <code>adb devices</code> を実行してください。デバイスが "no permission" と表示される場合は、adb サーバーの再起動が必要です (例: <code>adb kill-server;adb start-server</code>)。</li> + <li>Debian が提供する <code>android-tools-adb</code> パッケージを使用する場合は、ADB Helper を使用するために既存の ADB サーバーをすべて終了しなければならないでしょう。このパッケージは ADB Helper が依存している、サーバーへの TCP 接続を無効化します。</li> + </ul> + </li> + <li>Windows を使用している場合の確認事項: + <ul> + <li>Android デバイスが正常に認識されていて、Android SDK に含まれている Google USB Driver を使用していることを確認してください。</li> + </ul> + </li> + <li>Mac OS X を使用している場合の確認事項: + <ul> + <li>EasyTether を使用している場合は、EasyTether のアンインストールまたは無効化が必要です: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> + </ul> + </li> +</ul> + +<h2 id="Connecting_to_Firefox_for_Android_over_Wi-Fi" name="Connecting_to_Firefox_for_Android_over_Wi-Fi">Wi-Fi 経由で Android 版 Firefox に接続する</h2> + +<ul> + <li>Firefox のバージョンを確認する: Wi-Fi デバッグを使用するには Firefox 42 以降と、Android 版 Firefox 42 以降を実行している Android デバイスが必要です。</li> + <li>デスクトップ版 Firefox を実行するコンピューターと Android デバイスの両方を、同じ Wi-Fi ネットワークに接続しなければなりません。 + <ul> + <li>詳しくいうとデスクトップ側で、Wi-Fi ネットワークへのルートがある有線ネットワークを使用することは<strong>できません</strong>。代わりに、両方を Wi-Fi に直接接続してください。</li> + </ul> + </li> + <li>バーコードスキャンアプリをインストール済みなのを確認してください。<a href="https://play.google.com/store/apps/details?id=com.google.zxing.client.android">これ</a>を推奨します。</li> + <li>Wi-Fi ネットワークによっては Wi-Fi 端末検索に使うパケットをブロックすることがあります。ネットワーク管理者にこうした行為が許可されているかを確認してください: + <ul> + <li>コンピューターと Android デバイスは UDP マルチキャストパケットをポート 50624-50625 からマルチキャストアドレス 224.0.0.115 に送受信できなければなりません。</li> + <li>ネットワークルーターが UDP マルチキャストパケットをサポートしていなければなりません。</li> + <li>ルーターはこの UDP マルチキャストパケットをフォワードせず、実効的にはつまり、両方の端末は他のホップを経由せずに直接同じルーターと通信する必要があります。</li> + </ul> + </li> +</ul> + +<h2 id="Unable_to_load_project_list" name="Unable_to_load_project_list">プロジェクトの一覧を読み込みできない</h2> + +<p>あるバージョンの Firefox で WebIDE を開いた後に、同じプロファイルを使用したまま Firefox をダウングレードすると、ダウングレード後の Firefox で WebIDE を開いた際に "Unable to load project list" というエラーが表示されることがあります。</p> + +<p>これは WebIDE が使用するストレージシステム (<a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>) で、新しいバージョンの Firefox 向けに内部ファイルの移動や再構築が必要になったときに発生します。古いバージョンの Firefox では、プロジェクトの一覧にアクセスできなくなります。</p> + +<p>データは失われていませんがプロジェクトの一覧にアクセスするには、プロファイルを使用していた新しいバージョンの Firefox を使用し続けなければなりません。</p> + +<p>やむを得ず古いバージョンの Firefox を使用する場合は以下の手順でプロジェクト一覧のみ削除できますが、サポート外の手順ですのでさらなるトラブルやデータの喪失を招く可能性があります:</p> + +<ol> + <li>Firefox を閉じます。</li> + <li>Firefox のプロファイルのディレクトリーを開きます。</li> + <li>プロファイルのディレクトリー内で <code>storage</code> フォルダを探します。</li> + <li>このフォルダ配下のファイルツリー内に、<code>4268914080AsptpcPerjo</code> (データベース名のハッシュ) で始まる名前のファイルやフォルダが見つかるでしょう。 + <ul> + <li>例えば、<code><profile>/storage/permanent/indexeddb+++fx-devtools/idb</code> に存在します。</li> + </ul> + </li> + <li>該当するファイルやフォルダを削除します。</li> + <li>再び Firefox と WebIDE を開きます。</li> +</ol> + +<h2 id="Enable_logging" name="Enable_logging">ログ取得を有効化する</h2> + +<p>診断情報を収集するために、詳細なログを取得できます:</p> + +<ol start="1" style="list-style-type: decimal;"> + <li><a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a> を開き、新しい設定項目 <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code> を作成して、文字列値 <code>all</code> を設定します。また、<code>extensions.adbhelper@mozilla.org.debug</code> を <code>true</code> に設定します。</li> + <li><a class="external external-icon" href="https://support.mozilla.org/ja/kb/disable-or-remove-add-ons">アドオンマネージャ</a>で ADB Helper アドオンを無効化して、再び有効化します。</li> + <li><a href="/ja/docs/Tools/Browser_Console">ブラウザーコンソール</a>を開くと、接頭辞 <code>adb</code> が付加されたメッセージが表示されます。メッセージが表示されない場合は、<a href="/ja/docs/Tools/WebIDE/Troubleshooting#Get_help">支援を求めてください</a>。</li> +</ol> + +<h2 id="Get_help" name="Get_help">支援を求める</h2> + +<p><a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">IRC の #devtools ルーム</a>を訪れて、支援を求めてください。</p> diff --git a/files/ja/tools/webide/working_with_cordova_apps_in_webide/index.html b/files/ja/tools/webide/working_with_cordova_apps_in_webide/index.html new file mode 100644 index 0000000000..c6f6beb7dc --- /dev/null +++ b/files/ja/tools/webide/working_with_cordova_apps_in_webide/index.html @@ -0,0 +1,42 @@ +--- +title: WebIDE で Cordova アプリを扱う +slug: Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE +translation_of: Archive/WebIDE/Working_with_Cordova_apps_in_WebIDE +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>Firefox 39 の新機能</p> +</div> + +<p><a href="http://cordova.apache.org/">Apache Cordova</a> を使用すると HTML、JavaScript、CSS を使用してアプリを作成できます。また iOS や Android といったモバイルプラットフォーム向けのネイティブアプリも生成できます。Cordova では、<a href="/ja/Apps/Tools_and_frameworks/Cordova_support_for_Firefox_OS">Firefox OS 向けのアプリも作成できます</a>。</p> + +<p>Firefox 39 より、WebIDE で Cordova アプリを直接扱えます。すなわち WebIDE で Cordova アプリを編集する、あるいは WebIDE で Firefox OS 向けのアプリを生成することができます。</p> + +<p>始めに、通常どおりの手順で Cordova アプリを作成します:</p> + +<ul> + <li>Cordova が未インストールでしたら、インストールします: + <pre class="brush: bash"><code>npm install -g cordova</code></pre> + </li> +</ul> + +<ul> + <li>Cordova アプリを新規作成します: + <pre class="brush: bash"><code>cordova create my-app</code></pre> + </li> +</ul> + +<ul> + <li>アプリの対象プラットフォームに Firefox OS を追加します: + <pre class="brush: bash">cd my-app +cordova platform add firefoxos</pre> + </li> +</ul> + +<p>次に:</p> + +<ul> + <li><a href="/ja/docs/Tools/WebIDE/Opening_WebIDE">WebIDE を開きます</a>。</li> + <li><a href="/ja/docs/Tools/WebIDE/Creating_and_editing_apps#Open_a_packaged_app">"パッケージ型アプリを開く"</a> を選択して、Cordova アプリの <code>config.xml</code> ファイルがあるディレクトリを指定します。</li> +</ul> + +<p>以上で Cordova アプリを編集できます。また<a href="/ja/docs/Tools/WebIDE/Running_and_debugging_apps#Running_apps">アプリを実行</a>するたびに、WebIDE はバックグラウンドで Firefox OS 版のアプリを生成します。WebIDE はアプリの<a href="/ja/Apps/Build/Manifest">マニフェスト</a>に影響を与える変更が施された際も Firefox OS 版を再生成しますので、<a href="/ja/docs/Tools/WebIDE/Creating_and_editing_apps#Manifest_validation">マニフェストの検証</a>も実施できます。</p> diff --git a/files/ja/tools/working_with_iframes/index.html b/files/ja/tools/working_with_iframes/index.html new file mode 100644 index 0000000000..34814b28a1 --- /dev/null +++ b/files/ja/tools/working_with_iframes/index.html @@ -0,0 +1,30 @@ +--- +title: iframe での作業 +slug: Tools/Working_with_iframes +tags: + - Debugging + - DevTools + - Developer Tools + - Frames + - Tools +translation_of: Tools/Working_with_iframes +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>これは Firefox 34 の新機能です。</p> +</div> + +<p>Firefox 34 より開発ツールで、ドキュメント内にある特定の <a href="/ja/docs/Web/HTML/Element/iframe"><code>iframe</code></a> を対象にすることができます。</p> + +<p>{{EmbedYouTube("Me9hjqd74m8")}}</p> + +<p>ツールバーに新たなボタンが現れます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8547/frame-selection-button.png" style="display: block; margin-left: auto; margin-right: auto;">ボタンをクリックするとドキュメント自身に加えて、ドキュメント内にあるすべての iframe をポップアップで一覧表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8549/frame-selection-popup.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="note"> +<p>現時点ではポップアップを表示するために、ページの再読み込みまたは開発ツールをいったん閉じて再び開く作業が必要です。この問題は <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1062233">bug 1062233</a> で追跡しています。</p> +</div> + +<p>このリストで項目を選択すると、ツールボックス内の全ツール (<a href="/ja/docs/Tools/Page_Inspector">インスペクター</a>、<a href="/ja/docs/Tools/Web_Console">コンソール</a>、<a href="/ja/docs/Tools/Debugger">デバッガー</a> など) は iframe だけを対象にして、基本的にページの残りの部分は存在しないような状態で動作します。</p> |