From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- files/ja/tools/3d_view/index.html | 103 +++++ files/ja/tools/add-ons/index.html | 18 - files/ja/tools/css_coverage/index.html | 149 -------- .../debugger/break_on_dom_mutation/index.html | 23 ++ .../debugger/how_to/black_box_a_source/index.html | 20 - .../how_to/break_on_a_dom_event/index.html | 23 -- .../index.html | 47 --- .../debugger/how_to/ignore_a_source/index.html | 20 + .../debugger/how_to/search_and_filter/index.html | 69 ---- .../limitations_of_the_new_debugger/index.html | 29 -- .../disable_breakpoints/index.html | 18 - .../how_to/access_debugging_in_add-ons/index.html | 32 -- .../how_to/black_box_a_source/index.html | 28 -- .../how_to/break_on_a_dom_event/index.html | 22 -- .../how_to/debug_eval_sources/index.html | 36 -- .../how_to/disable_breakpoints/index.html | 22 -- .../index.html | 46 --- .../highlight_and_inspect_dom_nodes/index.html | 16 - .../debugger_(before_firefox_52)/how_to/index.html | 13 - .../how_to/open_the_debugger/index.html | 21 -- .../how_to/pretty-print_a_minified_file/index.html | 18 - .../how_to/search_and_filter/index.html | 74 ---- .../how_to/set_a_breakpoint/index.html | 29 -- .../how_to/set_a_conditional_breakpoint/index.html | 22 -- .../how_to/step_through_code/index.html | 21 -- .../how_to/use_a_source_map/index.html | 20 - .../tools/debugger_(before_firefox_52)/index.html | 55 --- .../keyboard_shortcuts/index.html | 16 - .../settings/index.html | 63 ---- .../ui_tour/index.html | 129 ------- .../memory/comparing_heap_snapshots/index.html | 15 - files/ja/tools/page_inspector/3d_view/index.html | 103 ----- .../page_inspector/how_to/edit_fonts/index.html | 233 ++++++++++++ .../page_inspector/how_to/view_fonts/index.html | 233 ------------ .../index.html | 86 +++++ .../animations_examples/index.html | 86 ----- .../ja/tools/page_inspector/html_panel/index.html | 35 -- .../ja/tools/page_inspector/style_panel/index.html | 69 ---- .../performance/profiler_walkthrough/index.html | 114 ------ files/ja/tools/profiler/index.html | 145 ------- files/ja/tools/release_notes/index.html | 416 --------------------- .../index.html | 68 ++++ .../index.html | 68 ---- .../index.html | 71 ---- files/ja/tools/using_the_source_editor/index.html | 100 ----- files/ja/tools/view_source/index.html | 75 ++++ .../web_console/opening_the_web_console/index.html | 25 -- files/ja/tools/web_console/ui_tour/index.html | 25 ++ 48 files changed, 633 insertions(+), 2536 deletions(-) create mode 100644 files/ja/tools/3d_view/index.html delete mode 100644 files/ja/tools/add-ons/index.html delete mode 100644 files/ja/tools/css_coverage/index.html create mode 100644 files/ja/tools/debugger/break_on_dom_mutation/index.html delete mode 100644 files/ja/tools/debugger/how_to/black_box_a_source/index.html delete mode 100644 files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html delete mode 100644 files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/ja/tools/debugger/how_to/ignore_a_source/index.html delete mode 100644 files/ja/tools/debugger/how_to/search_and_filter/index.html delete mode 100644 files/ja/tools/debugger/limitations_of_the_new_debugger/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/settings/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html delete mode 100644 files/ja/tools/memory/comparing_heap_snapshots/index.html delete mode 100644 files/ja/tools/page_inspector/3d_view/index.html create mode 100644 files/ja/tools/page_inspector/how_to/edit_fonts/index.html delete mode 100644 files/ja/tools/page_inspector/how_to/view_fonts/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html delete mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html delete mode 100644 files/ja/tools/page_inspector/html_panel/index.html delete mode 100644 files/ja/tools/page_inspector/style_panel/index.html delete mode 100644 files/ja/tools/performance/profiler_walkthrough/index.html delete mode 100644 files/ja/tools/profiler/index.html delete mode 100644 files/ja/tools/release_notes/index.html create mode 100644 files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html delete mode 100644 files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html delete mode 100644 files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html delete mode 100644 files/ja/tools/using_the_source_editor/index.html create mode 100644 files/ja/tools/view_source/index.html delete mode 100644 files/ja/tools/web_console/opening_the_web_console/index.html create mode 100644 files/ja/tools/web_console/ui_tour/index.html (limited to 'files/ja/tools') diff --git a/files/ja/tools/3d_view/index.html b/files/ja/tools/3d_view/index.html new file mode 100644 index 0000000000..daac55be01 --- /dev/null +++ b/files/ja/tools/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 +--- +
{{ToolsSidebar}}
+

Firefox 47 より、3D ビューは使用できません。

+ +

同様の機能を提供するアドオンがあります: https://addons.mozilla.org/firefox/addon/tilt/。ただし組み込み版と同じく、このアドオンはマルチプロセス Firefox で動作しません。

+
+ +

3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。

+ +

+ +

ビューをクリックしてドラッグすると、ページの DOM 階層構造の 3D 表示を別の視点から見たり、構造を確認しやすくするために回転することや向きの変更ができます。オフスクリーンの要素が見えるようになりますので、見えているコンテンツに対して要素がどこに配置されているかを確認できます。また要素をクリックすると、その HTML を HTML パネル や スタイルパネル で参照できます。逆にパンくずリストで要素をクリックすると、3D ビュー内で選択されている要素を変更できます。

+ +

ページ調査ツールに 3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する必要があるかもしれません。詳しくは、ブロックリストに登録されたドライバのページをご覧ください。

+ +

3D ビューのコントロール

+ +

3D ビューで使用できるキーボードショートカットとマウス操作を以下に示します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能キーボードマウス
ズームイン/アウト+ / -ホイールの上回転/下回転
左右の回転a / d左右へのドラッグ
上下の回転w / s上下へのドラッグ
左右の移動← / →左右へのドラッグ
上下の移動↑ / ↓上下へのドラッグ
ズームレベルの初期化0ズームレベルを既定の状態に初期化します。
選択したノードへフォーカスf選択したノードが見えるようにビューを移動します。 {{fx_minversion_inline("13.0")}}
ビューの初期化rズーム、回転、移動を既定の状態に初期化します。{{fx_minversion_inline("12.0")}}
選択中のノードを隠すx現在選択しているノードを非表示にします。これは覆い隠されているノードを明らかにする必要がある場合に役立ちます。{{fx_minversion_inline("12.0")}}
+ +

3D ビューの用途

+ +

さまざまな状況で 3D ビューは役に立ちます:

+ + + +

関連情報

+ + diff --git a/files/ja/tools/add-ons/index.html b/files/ja/tools/add-ons/index.html deleted file mode 100644 index 9478dd0d88..0000000000 --- a/files/ja/tools/add-ons/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: アドオン -slug: Tools/Add-ons -tags: - - NeedsTranslation - - TopicStub - - Web Development - - 'Web Development:Tools' -translation_of: Tools/Add-ons ---- -
{{ToolsSidebar}}
- -

Firefoxには組み込まれていないが、別々のアドオンとして提供される開発ツールです。

- -
-
WebSocket Monitor
-
WebSocket接続でやりとりされるデータを調べます。
-
diff --git a/files/ja/tools/css_coverage/index.html b/files/ja/tools/css_coverage/index.html deleted file mode 100644 index cf45c2988e..0000000000 --- a/files/ja/tools/css_coverage/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: CSSカバレッジ -slug: Tools/CSS_Coverage -tags: - - Experimental - - Firefox - - ガイド - - ツール - - 初心者 -translation_of: Tools/CSS_Coverage ---- -

{{ToolsSidebar}}

- -
-

この機能は実験的なもので、Firefoxではまだ利用できません。

-
- -

CSSカバレッジは、Firefox開発者向けのコマンドセットで、使い古されていないCSSを指摘し、初期レンダリングに必要なCSSファイルの部分を示すことで、乱雑なCSSを解くのに役立ちます。

- -

これらのツールは、「使用」の定義が複雑であるため、多少実験的ですが、実際に何が起こっているかを理解する手助けとなることが期待されます。

- -

それらが一般的に使用される方法は次のとおりです。

- - - -

もう1つのコマンド("csscoverage oneshot")では、効果的に実行("csscoverage start; csscoverage stop")できます。

- -

「使用」が意味するのは?

- -

TL;DR:

- -

CSSカバレッジは、以下の例のtag#id.classセレクタが一連のWebページに存在するかどうかを確認します。

- -
@media thing {
-  tag#id.class:hover {
-    foo: bar;
-  }
-}
- -

なぜ?

- -

あなたのCSSに次のものが設定されているとします。テスト中にマウスがスパンに入っていない場合。 ルールは使用されるでしょうか？

- -
<style>
-  span:hover {
-    color: purple;
-  }
-</style>
-
-<span>Test</span>
-
- -

技術的には span:hover は、「テスト」という言葉がいつも紫色ではなかったという点で使われていませんでした。しかしながら CSS のカバレッジは実際にルールが関連性があるか無関係かを調べることです。また span:hover は明らかにページとの関連性があります。

- -

同様に、あなたのCSSが次のものを持っているとします：

- -
<style>
-  @media tv {
-    span {
-      color: purple;
-    }
-  }
-</style>
-
-<span>Test</span>
-
- -

関連性を測定するには、テレビを自分の環境に接続する必要がありますか？

- -

しかし、「使用」は関連性だけではありません...
- 次のルールは適切ですか？

- -
<style>
-  span { }
-</style>
-
-<span>Test</span>
-
- -

ページに影響を及ぼさず安全に削除できるため、関連性がないと主張することができます。

- -

しかし、次のものはどうでしょうか？

- -
<style>
-  span {
-    -o-text-curl: minor;
-  }
-</style>
-
-<span>Test</span>
-
- -

それが使用されているかどうかを知っているかどうかは、おそらく検索エンジンと分析技術の使用を必要とし、おそらくサイトのサポートされているブラウザのバージョンに関する知識です。 これらはすべて特異点までこのツールの範囲を超えているとみなされます。

- -

以下の例で div ルールが "used" とみなされる理由についても説明します。

- -
<style>
-  div { color: red; }
-  span { color: blue; }
-</style>
-
-<div><span>Test</span></div>
-
- -

div ルールはページの最終的なレンダリングには影響しないので未使用だと主張できますが、この代替定義を検討してください：

- -
<style>
-  div { color: red; border: none; }
-  span { color: blue; }
-</style>
-
- -

ボーダールールが使用されているかどうかを知ることは難しく、他にもさまざまなバリエーションがあります。 「使用」の定義をさらに複雑にする不透明度、可視性および色変換を考慮する。 物事を単純にするために、 "use"はセレクタが要素にマッチすることを意味します。

- -

明らかに、テスト中にタッチしたスタイルシートに、テスト中に見られない特定のページだけのルールが含まれている場合は、そのルールが使用されているにもかかわらず、そのルールを「未使用」としてマークします。 実際にCSSファイルからルールを削除する前に、二重チェックの価値があります。

- -

警告

- -

知っておくべきこと：

- - - -

バグ

- -

私たちはいくつかの重要なバグに取り組んでいます：

- - - -

代替候補

- -

Firefox を使わずに未使用のCSSを見つけるのに役立つ複数のツールがあります。

- - diff --git a/files/ja/tools/debugger/break_on_dom_mutation/index.html b/files/ja/tools/debugger/break_on_dom_mutation/index.html new file mode 100644 index 0000000000..4aca9399f6 --- /dev/null +++ b/files/ja/tools/debugger/break_on_dom_mutation/index.html @@ -0,0 +1,23 @@ +--- +title: DOM イベントでブレークする +slug: Tools/Debugger/How_to/Break_on_a_DOM_event +translation_of: Tools/Debugger/Break_on_DOM_mutation +translation_of_original: Tools/Debugger/How_to/Break_on_a_DOM_event +--- +
{{ToolsSidebar}}
+

この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を false に設定して、古いデバッガーに戻すことができます。

+ +

古いデバッガーのドキュメントは、デバッガー (Firefox 52 より前) をご覧ください。

+
+ +

特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。

+ +

始めに ツールバー 上の変数/イベントペインを開くボタンをクリックして、イベントペイン を開きます。そして、"イベント" タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:

+ +

+ +

そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。

+ +

イベントが発生すると、リスナーの始点でコードがブレークします。

+ +

{{EmbedYouTube("f-tbR8kj0K0")}}

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 deleted file mode 100644 index 0378307727..0000000000 --- a/files/ja/tools/debugger/how_to/black_box_a_source/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: ソースをブラックボックス化する -slug: Tools/Debugger/How_to/Black_box_a_source -translation_of: Tools/Debugger/How_to/Ignore_a_source ---- -

{{ToolsSidebar}}

- -

現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。

- -

ソースリストペイン でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:

- -

- -

ソースをブラックボックス化すると以下のようになります:

- - 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 deleted file mode 100644 index 4aca9399f6..0000000000 --- a/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: DOM イベントでブレークする -slug: Tools/Debugger/How_to/Break_on_a_DOM_event -translation_of: Tools/Debugger/Break_on_DOM_mutation -translation_of_original: Tools/Debugger/How_to/Break_on_a_DOM_event ---- -
{{ToolsSidebar}}
-

この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を false に設定して、古いデバッガーに戻すことができます。

- -

古いデバッガーのドキュメントは、デバッガー (Firefox 52 より前) をご覧ください。

-
- -

特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。

- -

始めに ツールバー 上の変数/イベントペインを開くボタンをクリックして、イベントペイン を開きます。そして、"イベント" タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:

- -

- -

そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。

- -

イベントが発生すると、リスナーの始点でコードがブレークします。

- -

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html deleted file mode 100644 index 74c0db4345..0000000000 --- a/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 変数を調査、編集、ウォッチする -slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' -translation_of: Tools/Debugger/How_to/Set_Watch_Expressions -translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' ---- -
{{ToolsSidebar}}
-

この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を false に設定して、古いデバッガーに戻すことができます。

- -

古いデバッガーのドキュメントは、デバッガー (Firefox 52 より前) をご覧ください。

-
- -

変数を調査する

- -

コードがブレークポイントで停止したときはデバッガーの 変数ペイン で、変数の状態を調査できます:

- -

- -

変数はスコープによってグループ化されます: Function スコープには user や greeting といった関数で定義したローカル変数はもちろん、ビルトインの arguments および this 変数も表示します。同様にグローバルスコープでは localStorage や console といったビルトインのグローバル変数だけでなく、greetme といった独自に定義したグローバル変数も表示します。

- -

それぞれのオブジェクトは三角印をクリックすると、プロパティを表示するように拡張できます。

- -

変数名にマウスポインターを重ねると、その変数に関する付加情報を提供するツールチップを表示します。これらのプロパティの意味について、詳しくは Object.defineProperty() をご覧ください。

- -

スクリプトフィルター で "*" 修飾子を使用するか、(デバッガーの設定 で有効にしている場合は) 変数フィルターボックスに入力することで、表示する変数をフィルターできます。

- -

{{EmbedYouTube("dxCvnixpM_Q")}}

- -

ソース内に存在する変数が JavaScript エンジンの最適化により削除されている場合は、変数ビューに変数を表示しますが値は (optimized away) となっており、編集ができません。以下のスクリーンショットでは、変数 upvar が最適化で削除されています:

- -

- -

変数を変更する

- -

コードがブレークポイントで停止したときに、デバッガーの 変数ペイン で変数を変更できます。変数の現在の値をクリックすると、そこに入力できるようになります:

- -

{{EmbedYouTube("FKG-jkvSpq8")}}

- -

式をウォッチする

- -

ウォッチ式は、実行が停止するたびに評価される式です。よって、これらの式の結果を調査できます。これらは、コード内で必ずしも調査を行える状態であるとは限らない不変量の調査ができる点が役に立ちます。"ウォッチ式を追加" と表示されているボックスをクリックして、コードをステップ実行したときに出力内容を監視したい JavaScript 式を入力することで、ウォッチ式を追加します。

- -

そして、コードの実行を開始します。コードのステップ実行を始めるまでウォッチ式は何も行いませんので、ブレークポイントに達するまでは何も起きません。ブレークポイントに達すると、アクティブな式とその値を表示するボックスが現れます:

- -

{{EmbedYouTube("CwGU-5wKRw0")}}

- -

コードをステップ実行して、値の変化に応じた式の結果をウォッチできます。値が変わるたびに、ボックスが一時的に黄色に光ります。式の隣にある "x" 印のアイコンをクリックすると、ウォッチ式を削除できます。またもちろん、ウォッチ式は同時に複数設定できます。

diff --git a/files/ja/tools/debugger/how_to/ignore_a_source/index.html b/files/ja/tools/debugger/how_to/ignore_a_source/index.html new file mode 100644 index 0000000000..0378307727 --- /dev/null +++ b/files/ja/tools/debugger/how_to/ignore_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 +--- +

{{ToolsSidebar}}

+ +

現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。

+ +

ソースリストペイン でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:

+ +

+ +

ソースをブラックボックス化すると以下のようになります:

+ + diff --git a/files/ja/tools/debugger/how_to/search_and_filter/index.html b/files/ja/tools/debugger/how_to/search_and_filter/index.html deleted file mode 100644 index 4f3391c8b1..0000000000 --- a/files/ja/tools/debugger/how_to/search_and_filter/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 検索とフィルタ -slug: Tools/Debugger/How_to/Search_and_filter -translation_of: Tools/Debugger/How_to/Search -translation_of_original: Tools/Debugger/How_to/Search_and_filter ---- -
{{ToolsSidebar}}

ツールバーのスクリプトフィルタを使用して、デバッガ内にある項目を検索できます:

- -

- -

接頭辞をつけずに文字列を入力すると、ソースリストペインに一覧表示されているソースから検索します。

- -

いずれかの特殊文字による検索演算子を接頭辞として付加することで、さまざまな検索機能を提供します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
接頭辞機能
なしソースリストペインに表示しているスクリプトの絞り込みを行います。
!すべてのファイルから文字列を検索します。
@すべてのファイルから、指定した文字列を含む関数定義を検索します。
# -

現在ソースペインで開いているファイルから文字列を検索します。

- -

検索した後に Enter キーを押下すると、マッチした箇所を巡ります。

-
:現在ソースペインで開いているファイルで、指定した行へ移動します。
*変数ペインに表示している変数の絞り込みを行います。
- -

これらのオプションは、フィルタ内をクリックしたときにポップアップ表示します。また、ソースペインのコンテキストメニューでもアクセスできます。

- -

接頭辞を組み合わせて、より強力な問い合わせが可能です。例えば:

- - - - - - - - - - - - -
file.js:12"file.js" を開いて 12 行目へ移動します。
mod#onLoadファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。
diff --git a/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html b/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html deleted file mode 100644 index b6ef21e414..0000000000 --- a/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: 新しいデバッガーの制限事項 -slug: Tools/Debugger/Limitations_of_the_new_debugger -translation_of: Tools/Debugger/Limitations_of_the_new_debugger ---- -
{{ToolsSidebar}}

バージョン 52 より、新しいデバッガーを Firefox に内蔵しています。現在、新しいデバッガーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。新しいデバッガーは旧デバッガーより高速かつ信頼性が高く、将来の開発のための基盤を提供します。

- -

しかし、旧デバッガーの一部機能をまだサポートしていません。このページでは、新しいデバッガーで未サポートである、旧デバッガーの機能を掲載します。

- -

これらの機能のほとんどは将来のリリースでサポートする予定であり、このページは適宜更新しますので注意してください。

- -

これらの機能のいずれかが必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に false を設定すると、旧デバッガーに戻すことができます。

- -

以下の機能は、新しいデバッガーでまったくサポートしていません。

- - - -

検索機能 は部分的にサポートしています。ファイル名の検索やファイル内の文字列の検索 は可能です。しかし、以下の検索は未サポートです:

- - diff --git a/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html deleted file mode 100644 index 88d3b0d7bb..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: ブレークポイントの無効化 -slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints -translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints ---- -
{{ToolsSidebar}}
- -

ブレークポイントを無効にするには、ソースリストペインでブレークポイントのエントリの横にあるチェックボックスをオフにします。

- -

- -

または、マウスポインタがソースリストペインのブレークポイントのエントリの上にあるときにコンテキストメニューをアクティブにし、"Disable breakpoint"を選択します。

- -

ブレークポイントを表す矢印をクリックするだけでブレークポイントを削除することもできます。

- -

すべてのブレークポイントを無効/有効にするには、ソースリストペインで"Toggle all breakpoints"ボタンを使用します。

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html deleted file mode 100644 index 573456e364..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: アドオンでデバッグにアクセスする -slug: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -
-

このドキュメントで説明する方法を Firefox のアドオンで使用することは、非推奨にする予定です。これらの方法を使用する新たなアドオンを作成しないでください。

-
- -

以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます:

- - - -

関連ファイル:

- - - -

残念ながらデバッグを行っている範囲内のウォッチ/式を評価する API や、デバッグを行っている範囲内の変数として参照されている、ページ内の要素をハイライトする API はまだありません。(現在作業中であり、バグ 653545 をご覧ください)

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html deleted file mode 100644 index f16826cf46..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: ソースをブラックボックス化する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。

- -

ソースリストペイン でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:

- -

- -

開発ツールバー を開いて dbg blackbox コマンドを使用すると、複数のソースをまとめてブラックボックス化できます:

- -

- -

ソースをブラックボックス化すると以下のようになります:

- - diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html deleted file mode 100644 index 706d844280..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM イベントでブレークする -slug: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。

- -

始めに ツールバー 上の変数/イベントペインを開くボタンをクリックして、イベントペイン を開きます。そして、[イベント] タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:

- -

- -

そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。

- -

イベントが発生すると、リスナーの始点でコードがブレークします。

- -

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html deleted file mode 100644 index bbd25b285e..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: eval ソースをデバッグする -slug: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

eval() に渡される文字列や Function コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。

- -

これを行うために、//# sourceURL ディレクティブを使用してソースに名前をつけなければなりません:

- -
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);
-}
- -

これは、スクリプトに "my-foo.js" という名前をつけます。

- -

文字列が評価されるとデバッガーでは別のソースとして表示され、他のソースと同様にデバッグできます。また、ソースを 整形 できます:

- -

{{EmbedYouTube("nFm8F8Anmic")}}

- -

ソースにつけた名前は、ウェブコンソール に現れるスタックトレースでも表示されます。

- -

また、無名の eval ソース内にある debugger; 文でもデバッガーが停止します。

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html deleted file mode 100644 index 73595678bf..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: ブレークポイントの無効化 -slug: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

ソースリストペイン で、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります:

- -

- -

または、ソースリストペインのブレークポイントの項目にマウスポインターを載せてコンテキストメニューを開き、[ブレークポイントを無効にする] を選択します。

- -

ブレークポイントを示す矢印をクリックして、ブレークポイントを削除することもできます。

- -

すべてのブレークポイントのオン/オフを切り替えるには、ソースリストペイン で [すべてのブレークポイントを有効化/無効化] ボタンをクリックしてください:

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html deleted file mode 100644 index 7d08b706a5..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: 変数を調査、編集、ウォッチする -slug: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' -translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

変数を調査する

- -

コードがブレークポイントで停止したときはデバッガーの 変数ペイン で、変数の状態を調査できます:

- -

- -

変数はスコープによってグループ化されます: Function スコープには user や greeting といった関数で定義したローカル変数はもちろん、ビルトインの arguments および this 変数も表示します。同様にグローバルスコープでは localStorage や console といったビルトインのグローバル変数だけでなく、greetme といった独自に定義したグローバル変数も表示します。

- -

それぞれのオブジェクトは三角印をクリックすると、プロパティを表示するように拡張できます。

- -

変数名にマウスポインターを重ねると、その変数に関する付加情報を提供するツールチップを表示します。これらのプロパティの意味について、詳しくは Object.defineProperty() をご覧ください。

- -

スクリプトフィルター で "*" 修飾子を使用するか、(デバッガーの設定 で有効にしている場合は) 変数フィルターボックスに入力することで、表示する変数をフィルターできます。

- -

{{EmbedYouTube("dxCvnixpM_Q")}}

- -

ソース内に存在する変数が JavaScript エンジンの最適化により削除されている場合は、変数ビューに変数を表示しますが値は (optimized away) となっており、編集ができません。以下のスクリーンショットでは、変数 upvar が最適化で削除されています:

- -

- -

変数を変更する

- -

コードがブレークポイントで停止したときに、デバッガーの 変数ペイン で変数を変更できます。変数の現在の値をクリックすると、そこに入力できるようになります:

- -

{{EmbedYouTube("FKG-jkvSpq8")}}

- -

式をウォッチする

- -

ウォッチ式は、実行が停止するたびに評価される式です。よって、これらの式の結果を調査できます。これらは、コード内で必ずしも調査を行える状態であるとは限らない不変量の調査ができる点が役に立ちます。[ウォッチ式を追加] と表示されているボックスをクリックして、コードをステップ実行したときに出力内容を監視したい JavaScript 式を入力することで、ウォッチ式を追加します。

- -

そして、コードの実行を開始します。コードのステップ実行を始めるまでウォッチ式は何も行いませんので、ブレークポイントに達するまでは何も起きません。ブレークポイントに達すると、アクティブな式とその値を表示するボックスが現れます:

- -

{{EmbedYouTube("CwGU-5wKRw0")}}

- -

コードをステップ実行して、値の変化に応じた式の結果をウォッチできます。値が変わるたびに、ボックスが一時的に黄色に光ります。式の隣にある [x] 印のアイコンをクリックすると、ウォッチ式を削除できます。またもちろん、ウォッチ式は同時に複数設定できます。

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html deleted file mode 100644 index da2ab1e637..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: DOM ノードのハイライトと調査 -slug: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

変数ペイン で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。

- -

また、変数の隣に標的のアイコンが表示されます。このアイコンをクリックすると、その DOM ノードを選択した インスペクター が開きます。

- -

{{EmbedYouTube("0JWxXp2Qql8")}}

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html deleted file mode 100644 index b792199c59..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: How to -slug: Tools/Debugger_(before_Firefox_52)/How_to -tags: - - NeedsTranslation - - TopicStub -translation_of: Tools/Debugger_(before_Firefox_52)/How_to ---- -
{{ToolsSidebar}}
- -

これらの記事では、デバッガの使用方法について説明します。

- -

{{ ListSubpages () }}

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html deleted file mode 100644 index 2408127b78..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: デバッガーを開く -slug: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

メニューボタン ( new fx menu ) をクリックして [開発ツール]、 [デバッガー] の順にクリックすると、デバッガーが開きます。あるいは、以下のキーボードショートカットを使用します:

- - - -

インスペクターがアクティブになっている ツールボックス が、ブラウザーのウィンドウ下部に現れます。こちらが始めにデバッガーを開いたときの様子です:

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html deleted file mode 100644 index 13146945a0..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: 圧縮されたファイルを整形する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

圧縮された (minified) ファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください:

- -

- -

ファイルを読みやすい形式で表示します。

- -

デバッガーの設定 で [圧縮されたソースを自動的に整形表示] を選択すると、デバッガーが圧縮されたソースを検出して自動的に整形するように指定できます。

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html deleted file mode 100644 index 881571f63e..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 検索とフィルター -slug: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

ツールバー のスクリプトフィルターを使用して、デバッガー内にある項目を検索できます:

- -

- -

接頭辞をつけずに文字列を入力すると、ソースリストペイン に一覧表示されているソースのファイル名から検索します。Enter キーや矢印キーを押下して、マッチしたファイル名のソースを表示します。

- -

いずれかの特殊文字による検索演算子を接頭辞として付加することで、さまざまな検索機能を提供します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
接頭辞機能
なしソースリストペイン に表示しているスクリプトの絞り込みを行います。
!すべてのファイルから文字列を検索します。
@すべてのファイルから、文字列を含む関数定義を検索します。
# -

現在 ソースペイン で開いているファイルから文字列を検索します。

- -

検索した後に Enter キーを押下すると、マッチした箇所を巡ります。

-
:現在 ソースペイン で開いているファイルで、指定した行へ移動します。
*変数ペイン に表示している変数の絞り込みを行います。
- -

これらのオプションは、フィルター内をクリックしたときにポップアップ表示します。また、ソースペイン のコンテキストメニューでもアクセスできます。

- -

接頭辞を組み合わせて、より強力な問い合わせが可能です。例えば:

- - - - - - - - - - - - -
file.js:12"file.js" を開いて 12 行目へ移動します。
mod#onLoadファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html deleted file mode 100644 index cb8ae2d4bf..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: ブレークポイントを設置する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

デバッガーで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。

- - - -

それぞれのブレークポイントは、デバッガー内の 2 カ所に表示します:

- - - -

以下のスクリーンショットでは、ファイルの 20 行目と 28 行目にブレークポイントがあります。また、20 行目のブレークポイントにヒットしています:

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html deleted file mode 100644 index 3a3958596c..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 条件付きブレークポイントを設置する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

条件付きブレークポイントを設置するには ソースペイン で、設置したい行でコンテキストメニューを開いて [条件付きブレークポイントを設置] を選択します。そして、表示されたポップアップに条件式を入力します:

- -

- -

条件付きブレークポイントは、ソースペインで橙色の矢印がつきます:

- -

- -

条件を編集したり通常のブレークポイントに条件を追加したりするには、コンテキストメニューを開いて [条件付きブレークポイントを設定する] を選択します:

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html deleted file mode 100644 index 634315dd13..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: コードをステップ実行する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

コードがブレークポイントで止まったときは、ツールバー の左側にある 4 つのボタンを使用してステップ実行を実施できます:

- -

ボタンは順に以下のとおりです:

- - diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html deleted file mode 100644 index 1f41177f80..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: ソースマップを使用する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

JavaScript のソースは、より効率よくサーバーから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript や TypeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第にプログラムによって作られる傾向があります。ソースマップ の使用によって、デバッグをとても容易にするために、デバッガーが実行中のコードを元のソースファイルと対応づけることができます。

- -

デフォルトでは、デバッガーは使用可能であればソースマップを使用します。ソースマップのサポートが有効かを確認する、あるいは必要に応じて無効化する場合は、[デバッガーのオプション] ボタンをクリックして、ポップアップした設定一覧で [元のソースを表示] を確認してください:

- -

- -

もちろん、これを動作させるためにはページで実行する JavaScript にソースマップを与えることが必要です。ソースファイルにコメントディレクティブを追加してください:

- -
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
diff --git a/files/ja/tools/debugger_(before_firefox_52)/index.html b/files/ja/tools/debugger_(before_firefox_52)/index.html deleted file mode 100644 index 404974a00f..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: デバッガー (Firefox 52 より前) -slug: Tools/Debugger_(before_Firefox_52) -translation_of: Tools/Debugger_(before_Firefox_52) ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。

- -

Firefox でローカル実行しているコードや、例えば Firefox OS デバイスや Android 版 Firefox などのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、リモートデバッグ のページをご覧ください。

- -

{{EmbedYouTube("sK8KU8oiF8s")}}

- -
-

ユーザーインターフェイスツアー

- -

デバッガーについてひととおり理解するために、 UI のクイックツアー を用意しました。

- -
-

使い方

- -

デバッガーで何ができるかを知るために、以下のガイドをご覧ください:

- -
- -
- -
-

リファレンス

- -
- -
diff --git a/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html deleted file mode 100644 index 8625bb75bb..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: キーボードショートカット -slug: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts -translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

{{Page ("ja/docs/tools/Keyboard_shortcuts", "デバッガー(Firefox_52より前)")}}

- -

共通ショートカット

- -

{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}

diff --git a/files/ja/tools/debugger_(before_firefox_52)/settings/index.html b/files/ja/tools/debugger_(before_firefox_52)/settings/index.html deleted file mode 100644 index a9f0a505b3..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/settings/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: オプション -slug: Tools/Debugger_(before_Firefox_52)/Settings -translation_of: Tools/Debugger_(before_Firefox_52)/Settings ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

デバッガーには独自の設定メニューがあり、ツールバー 上のアイコンからアクセスできます:

- -

- -

それぞれのオプションは、オン/オフの切り替え式になっています:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
圧縮されたソースを自動的に整形表示このオプションを有効にすると、デバッガーは圧縮された JS ファイルを自動的に検出して 整形 します。
例外発生で停止このオプションが有効であるときは、JavaScript の例外が発生した際にスクリプトの実行が自動的に停止します。
キャッチした例外を無視 -

このオプションを有効 (デフォルトで有効) にして [例外発生で停止] も有効にすると、キャッチされていない例外だけで実行が停止します。

- -

これは通常、望ましい動作です。例外がキャッチされたということは通常、プログラムが例外を適切に扱っていることを示しますので、一般的にそのような例外での停止は望まれません。

-
起動時にデバッガを開くこのオプションが有効であるときは、始めにデバッガーを起動した時点で 変数ペイン が開くようになります。
計算可能なプロパティのみ表示{{原語併記("列挙可能", "enumerable")}} ではない JavaScript プロパティを表示しません。
変数フィルターボックスを表示このオプションを有効にすると 変数ペイン に [変数を検索] ボックスが表示されますので、表示されている変数一覧をフィルターできます。
元のソースを表示このオプションを有効にすると、デバッガーは可能であれば ソースマップ を使用します。これはコンバイン、ミニファイ、あるいは CoffeeScript のような言語からコンパイルした JavaScript の、元のソースコードを表示するためのオプションです。デフォルトで有効です。
圧縮されたソースを自動的にブラックボックス化する -
-

Firefox 33 の新機能

-
- -

URL の末尾が ".min.js" であるソースファイルを自動的に ブラックボックス化 します。デフォルトで有効です。

-
diff --git a/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html b/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html deleted file mode 100644 index 8a8b6645f3..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: UI ツアー -slug: Tools/Debugger_(before_Firefox_52)/UI_Tour -translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。デバッガーの UI は 6 つの主要なセクションに分かれており、順番に説明していきます:

- - - -

- -

ツールバー

- -

ツールバーは 4 つのセクションで構成されます:

- - - -

- -

左側にある 4 つのボタンは、以下の機能を実行します:

- - - -

コールスタックの可視化では、実行を停止している時点のコールスタックを表示します。

- -

ソースリストペイン

- -

ソースリストペインでは、ページに読み込まれたすべての JS ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースリストペインと コールスタックペイン は画面上の場所を共有しており、ペインの上部にあるタブでこれらを切り替えできます。

- -

- -

ソースファイルは、読み込み元に応じたさまざまな見出しによってグループ化しています。これらから任意のファイルを選択でき、選択したファイルは ソースペイン に読み込みます。

- -


- ソースファイルに設置したブレークポイントはすべて、ファイル名の下に一覧表示します。各ブレークポイントの隣にあるチェックボックスで、ブレークポイントの有効化/無効化が可能です。リストにあるブレークポイントの項目を右クリックすると、以下の操作が可能なコンテキストメニューを表示します:

- - - -

ソースリストの下部にある 3 個のアイコンで、ソースのブラックボックス化、圧縮された JS ファイルの整形、すべてのブレークポイントの有効/無効 の切り替えが可能です。

- -

ソースリストの項目にコンテキストメニューがあり、ソースの提供元の URL をコピーしたり、URL を新しいタブで開くことができます:

- -

- -

コールスタックペイン

- -

デバッガーの左側にあるもうひとつのタブでは、コールスタックを縦に並べて表示します:

- -

- -

各行でコールスタックのレベルを示しており、現在のスタックフレームが最上段に置かれます。行では現在実行している関数の名前と、ソースファイルおよび行番号へのリンクを表示します。

- -

ソースペイン

- -

- -

ここでは、現在読み込んでいる JavaScript ファイルを表示します。ブレークポイントは青色の矢印を行番号に重ねて表示しており、またヒットしているブレークポイントは緑色の矢印で表示します:

- -

ソースペインでは、コンテキストメニューで以下の操作が可能です:

- - - -

Firefox 44 より、関数を呼び出している箇所から関数を定義している箇所へジャンプできます。control キー (Mac OS X では command キー) を押下しながら、関数名をクリックしてください。

- -

変数のポップアップ

- -

ソースペインで変数にマウスポインターを載せると、現在の変数の値を表示するポップアップが現れます:

- -

- -

この機能により 変数ペイン を開いて検索することなく、すばやく変数の値を確認できます。

- -

変数ペイン

- -

変数ペインはスクリプトの実行中に、内部状態の調査や変更が可能です:

- -

- -

変数ペインは画面領域を イベントペイン と共有しており、ペイン上部のタブでそれらを切り替えることができます。

- -

イベントペイン

- -

イベントペインでは、現在コードからリスナが割り当てられている、すべての DOM イベントを一覧表示します:

- -

- -

これは画面領域を 変数ペイン と共有しており、ペイン上部のタブでそれらを切り替えることができます。

- -

イベントはタイプごとにグループ化します。前出のスクリーンショットでは 4 つのタイプがあります: Interaction、Keyboard、Mouse、Navigation です。各タイプの下に、コードにリスナーが存在するすべてのイベントを以下の構文で列挙します:

- -
[イベント名] on [イベントターゲット] in [ソースファイル]
- -

イベント名の隣にあるチェックボックスにチェックを入れると、デバッガーはイベントリスナーの最初の行でブレークします。イベントタイプの隣にあるチェックボックスにチェックを入れると、デバッガーはタイプの下に列挙しているすべてのイベントでブレークします。

diff --git a/files/ja/tools/memory/comparing_heap_snapshots/index.html b/files/ja/tools/memory/comparing_heap_snapshots/index.html deleted file mode 100644 index 74fa47f372..0000000000 --- a/files/ja/tools/memory/comparing_heap_snapshots/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: ヒープのスナップショットを比較する -slug: Tools/Memory/Comparing_heap_snapshots -translation_of: Tools/Memory/Basic_operations -translation_of_original: Tools/Memory/Comparing_heap_snapshots ---- -
{{ToolsSidebar}}
-

これは Firefox 45 の新機能です。

-
- -

Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。

- -

差分を作成するにはカメラのアイコンの隣にある "+/-" ボタンを押下して、基準とするスナップショットを選択します。そして、比較するスナップショットを選択してください。ツールが 2 つのスナップショットの差分を表示します。単体のスナップショットの場合と同じビューを使用して、差分を分析できます。

- -

{{EmbedYouTube("rbDHVxCzqhU")}}

diff --git a/files/ja/tools/page_inspector/3d_view/index.html b/files/ja/tools/page_inspector/3d_view/index.html deleted file mode 100644 index daac55be01..0000000000 --- a/files/ja/tools/page_inspector/3d_view/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 3D ビュー -slug: Tools/Page_Inspector/3D_view -tags: - - HTML - - Tools - - Web Development - - 'Web Development:Tools' -translation_of: Tools/3D_View ---- -
{{ToolsSidebar}}
-

Firefox 47 より、3D ビューは使用できません。

- -

同様の機能を提供するアドオンがあります: https://addons.mozilla.org/firefox/addon/tilt/。ただし組み込み版と同じく、このアドオンはマルチプロセス Firefox で動作しません。

-
- -

3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。

- -

- -

ビューをクリックしてドラッグすると、ページの DOM 階層構造の 3D 表示を別の視点から見たり、構造を確認しやすくするために回転することや向きの変更ができます。オフスクリーンの要素が見えるようになりますので、見えているコンテンツに対して要素がどこに配置されているかを確認できます。また要素をクリックすると、その HTML を HTML パネル や スタイルパネル で参照できます。逆にパンくずリストで要素をクリックすると、3D ビュー内で選択されている要素を変更できます。

- -

ページ調査ツールに 3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する必要があるかもしれません。詳しくは、ブロックリストに登録されたドライバのページをご覧ください。

- -

3D ビューのコントロール

- -

3D ビューで使用できるキーボードショートカットとマウス操作を以下に示します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
機能キーボードマウス
ズームイン/アウト+ / -ホイールの上回転/下回転
左右の回転a / d左右へのドラッグ
上下の回転w / s上下へのドラッグ
左右の移動← / →左右へのドラッグ
上下の移動↑ / ↓上下へのドラッグ
ズームレベルの初期化0ズームレベルを既定の状態に初期化します。
選択したノードへフォーカスf選択したノードが見えるようにビューを移動します。 {{fx_minversion_inline("13.0")}}
ビューの初期化rズーム、回転、移動を既定の状態に初期化します。{{fx_minversion_inline("12.0")}}
選択中のノードを隠すx現在選択しているノードを非表示にします。これは覆い隠されているノードを明らかにする必要がある場合に役立ちます。{{fx_minversion_inline("12.0")}}
- -

3D ビューの用途

- -

さまざまな状況で 3D ビューは役に立ちます:

- - - -

関連情報

- - diff --git a/files/ja/tools/page_inspector/how_to/edit_fonts/index.html b/files/ja/tools/page_inspector/how_to/edit_fonts/index.html new file mode 100644 index 0000000000..dc20a581e8 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/edit_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 +--- +
{{ToolsSidebar}}
+ +

この記事は、Firefox 開発ツールで使用可能なフォントツールのツアーです。このツールはブラウザーに読み込んだ文書に適用されたフォントに対して、適用されたすべてのフォントを調査する、あるいはバリアブルフォントの軸の値を細かく調整するなど、表示や調査のために役に立つツールが含まれています。

+ +
+

注記: この記事に示されているように、更新されたフォントツールは Firefox 63 以降で利用できます。古いバージョンの Firefox を使用している場合、ツールは見た目や動作が全く同じではありませんが、似ています (特にフォントエディターは利用できません)。

+
+ +

フォントタブ

+ +

インスペクター をウィンドウの下側に表示している場合は、右側にフォントタブがあります。右側または左側に表示している場合は、HTML ペインの下にフォントタブがあります。タブは以下のようにして表示できます:

+ +
    +
  1. インスペクターを開きます。
    2. +
  2. フォントタブを選択します。CSS ペインの右側に表示されるタブの末尾にあります。
    3. +
+ +

+ +

フォントタブは 3 つの主要なセクションに分かれています:

+ + + +

Fonts used

+ +

フォントエディターの最初のセクションは、現在調査中の要素で使用しているフォントを、フォントファミリーでグループ化して表示します。

+ +

+ +

調査中の要素にフォントが適用されたテキストコンテンツがある場合に、フォントが "使用されている" と判断します。空要素はフォントが使用されませんので、"No fonts were found for the current element." というメッセージが表示されます。

+ +

以下の理由のいずれかを理由として、このセクションにフォントが表示されます:

+ + + +

フォントエディター

+ +

Firefox 63 でフォントエディターを追加しました。"Fonts used" の下にある新たな領域であり、フォントの特性を編集するコントロールがあります。

+ +

+ +

通常の (静的な) フォントでは、以下の設定を変更できます。

+ +

サイズ

+ +

調査中の要素の {{cssxref("font-size")}} です。

+ +

+ +

em、rem、%、px、vh、vw の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

+ +
+

注記: pt など、ほかの単位を font-size や line-height で使用したい場合は、ルールビュー で調査中の要素に、その単位を使用する値を適用します。フォントエディターが自動的に値を拾って単位のドロップダウンメニューに割り当てて、単位が使用可能になります。

+
+ +

単位を変更すると数値を新しい単位で同等の値に変換しますので、同じ計算値が維持されます。

+ +

例: 1rem が 10 ピクセルと等価である場合に単位を rem から px に変更すると、2rem は 20px になります。

+ +

Line height

+ +

調査中の要素の {{cssxref("line-height")}} です。

+ +

+ +

単位なし、または em、%、px の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

+ +

単位を変更すると、font-size の設定に応じて値を変換します。

+ +

例: フォントのサイズが 20 ピクセルで line-height が 1.5em である場合に単位を em から px に変更すると、値が 30px になります。

+ +

太さ

+ +

調査中の要素の {{cssxref("font-weight")}} です。

+ +

Font weight setting

+ +

スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。バリアブルではないフォントではスライダーの範囲が 100 から 900 であり、100 ずつ増えます。

+ +
+

注記: wght バリエーション軸を定義する バリアブルフォント (後述) は、独自の範囲を持ちます。

+
+ +

イタリック

+ +

調査中の要素の {{cssxref("font-style")}} です。

+ +

+ +

この設定は、font-style プロパティの値 italic と normal を切り替えます。

+ +
+

注記: この設定を変更すると、Firefox はページ上の表示を直ちに変更するためにインラインスタイルを適用します。

+
+ +

All fonts on page

+ +

フォントタブの最後にある領域に、ページ上で使用しているすべてのフォントを、展開可能なリストで表示します。

+ +

+ +

このリストは、フォントがウェブフォントかシステムのフォントかを簡単に判別できますので便利です。

+ +

このセクションでは、それぞれのフォントで以下の情報を提供します:

+ + + +

Firefox 開発ツールでバリアブルフォントをサポート

+ +

Firefox 62 でバリアブルフォントをサポートして、Firefox 63 ではフォントエディターでバリアブルフォントプロパティの編集機能をサポートしました。

+ +

バリアブルフォントとは?

+ +

バリアブルフォント または OpenType Font Variations は、フォントデザイナーがひとつのフォントファイルに複数のタイプフェイスのバリエーションを含むことを可能にする、新しいフォントファイル形式を定義します。これはバリアブルフォントが使用可能なタイプフェイス全体を表すときは、ひとつのページに複数の異なるウェブフォントを適用する必要がなく、変更したい特性で望む値を含めて提供すればよいことを意味します。

+ +

バリアブルフォントは許容範囲が バリエーション軸 (詳しくは Introducing the 'variation axis' をご覧ください) で定義されていますので、フォントの特性を細かい粒度で簡単に変更できます。例えば、バリアブルフォントでは {{cssxref("font-weight")}} を 1 から 1000 の任意の値に設定できます (ただし、バリアブルフォントがこの範囲全体をサポートすることは保証されません)。

+ +

登録済みの軸がいくつかあります。これらの軸をすべてのフォントが定義する必要はありませんが、フォントデザイナーが登録済みの軸を実装する場合は、その動作が定義済みの動作に従うことが必要です。

+ +

すべてのバリアブルフォント軸に、4 文字の軸タグがあります。CSS の {{cssxref("font-variation-settings")}} プロパティは、キーと値のペアでタグを使用します。例えば font-variation-settings を使用して {{cssxref("font-weight")}} を設定するには以下のようにします:

+ +
font-variation-settings: "wght" 350;
+ +

ただし font-variation-settings は、(独自の軸など) 特性値を設定するために基本的なフォントプロパティを使用できない場合の最終手段に限って使用するべきです。

+ +
+

注記: font-variation-settings を使用して設定したフォントの特性値は、対応する基本的なフォントプロパティ (font-weight など) で設定した値に必ず上書きされます。これはカスケーディングによって現れた値も含まれます。

+
+ +

登録済みの軸と対応する CSS プロパティを以下に示します:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
軸タグCSS プロパティ
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" +

{{cssxref("font-optical-sizing")}}

+
+ +

登録済みの軸のリストに含まれない軸は、独自の軸であると考えられます。独自の軸に対応する CSS フォントプロパティはありません。フォントデザイナーは、希望する軸をなんでも定義できます。それぞれの軸に、一意の 4 文字のタグが必要です。軸の名前と範囲の定義は、フォントデザイナー次第です。

+ +
+

注記: 登録済みの軸タグは小文字のタグであるのに対して、独自の軸は大文字のタグにするべきです。フォントデザイナーがこの慣習に従うことは強制されておらず、従っていないものもあることに注意してください。ここで重要なことは、軸タグが大文字と小文字を区別することです。

+
+ +
+

警告: バリアブルフォントを使用するために、オペレーティングシステムを最新の状態にしておくことが必要です。例えば Linux OS では最新バージョンの Linux Freetype が必要であり、また 10.13 より古い macOS はバリアブルフォントをサポートしていません。最新ではないオペレーティングシステムでは、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できない場合があります。

+
+ +

フォントエディターでバリアブルフォントを扱う

+ +

調査中の要素でバリアブルフォントを使用している場合に、個々のフォントに実装されている軸と、軸の値を変更するコントロールをフォントタブに表示します。これは、個々のフォントでどの軸が使用可能かをすばやく見つける際に役に立ちます。フォントデザイナーが基本的に自由に軸を実装できるようになると、劇的に役に立つでしょう。

+ +

+ +

これらの軸は個別に調節できます。またフォントデザイナーが定義済みのインスタンスを含めていれば "Instance" ドロップダウンリストでそれらを選択でき、ページの表示も更新します。

+ +

以下に、さまざまな軸を定義したフォントの例を 2 つ示します:

+ +

+ +

以下の例では、"Cheee Variable" フォントに Yeast や Gravity の設定があることがわかります。これらはフォントデザイナーが定義した独自の軸です。

+ +

+ +

1 番目の画像は、既定の設定のフォントをページで使用した状態です。2 番目の画像は、同じフォントで "Hi Yeast Hi Gravity" バリエーションを選択した後の状態です。

+ +

+ + + +

ヒント

+ +

最後に、フォントタブを有効に使用するためのヒントをいくつか紹介します:

+ + 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 deleted file mode 100644 index dc20a581e8..0000000000 --- a/files/ja/tools/page_inspector/how_to/view_fonts/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -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 ---- -
{{ToolsSidebar}}
- -

この記事は、Firefox 開発ツールで使用可能なフォントツールのツアーです。このツールはブラウザーに読み込んだ文書に適用されたフォントに対して、適用されたすべてのフォントを調査する、あるいはバリアブルフォントの軸の値を細かく調整するなど、表示や調査のために役に立つツールが含まれています。

- -
-

注記: この記事に示されているように、更新されたフォントツールは Firefox 63 以降で利用できます。古いバージョンの Firefox を使用している場合、ツールは見た目や動作が全く同じではありませんが、似ています (特にフォントエディターは利用できません)。

-
- -

フォントタブ

- -

インスペクター をウィンドウの下側に表示している場合は、右側にフォントタブがあります。右側または左側に表示している場合は、HTML ペインの下にフォントタブがあります。タブは以下のようにして表示できます:

- -
    -
  1. インスペクターを開きます。
    2. -
  2. フォントタブを選択します。CSS ペインの右側に表示されるタブの末尾にあります。
    3. -
- -

- -

フォントタブは 3 つの主要なセクションに分かれています:

- - - -

Fonts used

- -

フォントエディターの最初のセクションは、現在調査中の要素で使用しているフォントを、フォントファミリーでグループ化して表示します。

- -

- -

調査中の要素にフォントが適用されたテキストコンテンツがある場合に、フォントが "使用されている" と判断します。空要素はフォントが使用されませんので、"No fonts were found for the current element." というメッセージが表示されます。

- -

以下の理由のいずれかを理由として、このセクションにフォントが表示されます:

- - - -

フォントエディター

- -

Firefox 63 でフォントエディターを追加しました。"Fonts used" の下にある新たな領域であり、フォントの特性を編集するコントロールがあります。

- -

- -

通常の (静的な) フォントでは、以下の設定を変更できます。

- -

サイズ

- -

調査中の要素の {{cssxref("font-size")}} です。

- -

- -

em、rem、%、px、vh、vw の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

- -
-

注記: pt など、ほかの単位を font-size や line-height で使用したい場合は、ルールビュー で調査中の要素に、その単位を使用する値を適用します。フォントエディターが自動的に値を拾って単位のドロップダウンメニューに割り当てて、単位が使用可能になります。

-
- -

単位を変更すると数値を新しい単位で同等の値に変換しますので、同じ計算値が維持されます。

- -

例: 1rem が 10 ピクセルと等価である場合に単位を rem から px に変更すると、2rem は 20px になります。

- -

Line height

- -

調査中の要素の {{cssxref("line-height")}} です。

- -

- -

単位なし、または em、%、px の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

- -

単位を変更すると、font-size の設定に応じて値を変換します。

- -

例: フォントのサイズが 20 ピクセルで line-height が 1.5em である場合に単位を em から px に変更すると、値が 30px になります。

- -

太さ

- -

調査中の要素の {{cssxref("font-weight")}} です。

- -

Font weight setting

- -

スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。バリアブルではないフォントではスライダーの範囲が 100 から 900 であり、100 ずつ増えます。

- -
-

注記: wght バリエーション軸を定義する バリアブルフォント (後述) は、独自の範囲を持ちます。

-
- -

イタリック

- -

調査中の要素の {{cssxref("font-style")}} です。

- -

- -

この設定は、font-style プロパティの値 italic と normal を切り替えます。

- -
-

注記: この設定を変更すると、Firefox はページ上の表示を直ちに変更するためにインラインスタイルを適用します。

-
- -

All fonts on page

- -

フォントタブの最後にある領域に、ページ上で使用しているすべてのフォントを、展開可能なリストで表示します。

- -

- -

このリストは、フォントがウェブフォントかシステムのフォントかを簡単に判別できますので便利です。

- -

このセクションでは、それぞれのフォントで以下の情報を提供します:

- - - -

Firefox 開発ツールでバリアブルフォントをサポート

- -

Firefox 62 でバリアブルフォントをサポートして、Firefox 63 ではフォントエディターでバリアブルフォントプロパティの編集機能をサポートしました。

- -

バリアブルフォントとは?

- -

バリアブルフォント または OpenType Font Variations は、フォントデザイナーがひとつのフォントファイルに複数のタイプフェイスのバリエーションを含むことを可能にする、新しいフォントファイル形式を定義します。これはバリアブルフォントが使用可能なタイプフェイス全体を表すときは、ひとつのページに複数の異なるウェブフォントを適用する必要がなく、変更したい特性で望む値を含めて提供すればよいことを意味します。

- -

バリアブルフォントは許容範囲が バリエーション軸 (詳しくは Introducing the 'variation axis' をご覧ください) で定義されていますので、フォントの特性を細かい粒度で簡単に変更できます。例えば、バリアブルフォントでは {{cssxref("font-weight")}} を 1 から 1000 の任意の値に設定できます (ただし、バリアブルフォントがこの範囲全体をサポートすることは保証されません)。

- -

登録済みの軸がいくつかあります。これらの軸をすべてのフォントが定義する必要はありませんが、フォントデザイナーが登録済みの軸を実装する場合は、その動作が定義済みの動作に従うことが必要です。

- -

すべてのバリアブルフォント軸に、4 文字の軸タグがあります。CSS の {{cssxref("font-variation-settings")}} プロパティは、キーと値のペアでタグを使用します。例えば font-variation-settings を使用して {{cssxref("font-weight")}} を設定するには以下のようにします:

- -
font-variation-settings: "wght" 350;
- -

ただし font-variation-settings は、(独自の軸など) 特性値を設定するために基本的なフォントプロパティを使用できない場合の最終手段に限って使用するべきです。

- -
-

注記: font-variation-settings を使用して設定したフォントの特性値は、対応する基本的なフォントプロパティ (font-weight など) で設定した値に必ず上書きされます。これはカスケーディングによって現れた値も含まれます。

-
- -

登録済みの軸と対応する CSS プロパティを以下に示します:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
軸タグCSS プロパティ
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" -

{{cssxref("font-optical-sizing")}}

-
- -

登録済みの軸のリストに含まれない軸は、独自の軸であると考えられます。独自の軸に対応する CSS フォントプロパティはありません。フォントデザイナーは、希望する軸をなんでも定義できます。それぞれの軸に、一意の 4 文字のタグが必要です。軸の名前と範囲の定義は、フォントデザイナー次第です。

- -
-

注記: 登録済みの軸タグは小文字のタグであるのに対して、独自の軸は大文字のタグにするべきです。フォントデザイナーがこの慣習に従うことは強制されておらず、従っていないものもあることに注意してください。ここで重要なことは、軸タグが大文字と小文字を区別することです。

-
- -
-

警告: バリアブルフォントを使用するために、オペレーティングシステムを最新の状態にしておくことが必要です。例えば Linux OS では最新バージョンの Linux Freetype が必要であり、また 10.13 より古い macOS はバリアブルフォントをサポートしていません。最新ではないオペレーティングシステムでは、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できない場合があります。

-
- -

フォントエディターでバリアブルフォントを扱う

- -

調査中の要素でバリアブルフォントを使用している場合に、個々のフォントに実装されている軸と、軸の値を変更するコントロールをフォントタブに表示します。これは、個々のフォントでどの軸が使用可能かをすばやく見つける際に役に立ちます。フォントデザイナーが基本的に自由に軸を実装できるようになると、劇的に役に立つでしょう。

- -

- -

これらの軸は個別に調節できます。またフォントデザイナーが定義済みのインスタンスを含めていれば "Instance" ドロップダウンリストでそれらを選択でき、ページの表示も更新します。

- -

以下に、さまざまな軸を定義したフォントの例を 2 つ示します:

- -

- -

以下の例では、"Cheee Variable" フォントに Yeast や Gravity の設定があることがわかります。これらはフォントデザイナーが定義した独自の軸です。

- -

- -

1 番目の画像は、既定の設定のフォントをページで使用した状態です。2 番目の画像は、同じフォントで "Hi Yeast Hi Gravity" バリエーションを選択した後の状態です。

- -

- - - -

ヒント

- -

最後に、フォントタブを有効に使用するためのヒントをいくつか紹介します:

- - diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html new file mode 100644 index 0000000000..3f0900fd07 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/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 +--- +
{{ToolsSidebar}}
+ +

firefox-logo-animation

+ +

CSS トランジションを使用したアニメーションの例。

+ +

HTML コンテンツ

+ +
<div class="channel">
+  <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/>
+  <span class="note">Firefox Developer Edition</span>
+</div>
+ +

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;
+}
+
+ +

JavaScript コンテンツ

+ +
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);
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 deleted file mode 100644 index 3f0900fd07..0000000000 --- a/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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 ---- -
{{ToolsSidebar}}
- -

firefox-logo-animation

- -

CSS トランジションを使用したアニメーションの例。

- -

HTML コンテンツ

- -
<div class="channel">
-  <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/>
-  <span class="note">Firefox Developer Edition</span>
-</div>
- -

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;
-}
-
- -

JavaScript コンテンツ

- -
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);
diff --git a/files/ja/tools/page_inspector/html_panel/index.html b/files/ja/tools/page_inspector/html_panel/index.html deleted file mode 100644 index 3210682298..0000000000 --- a/files/ja/tools/page_inspector/html_panel/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: HTML panel -slug: Tools/Page_Inspector/HTML_panel -translation_of: Tools/Page_Inspector/UI_Tour -translation_of_original: Tools/Page_Inspector/HTML_panel ---- -
{{ToolsSidebar}}

{{ fx_minversion_header("10.0") }}

- -

ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。

- -
注意: HTML パネルの表示／非表示は Ctrl-H を押すことで切り替えできます。
- -

HTML のナビゲートを行う

- -

HTML 中のノードをクリックして、さらなる調査のために要素を選択することができます。また、要素を選択していないときに HTML パネルを開いている場合は、マウスポインタを載せている要素の HTML を表示するようにパネルの内容が自動更新されます。これは、コードの問題点の発見に役立つツールにもなります。

- -

html-panel.png

- -

HTML パネルを表示しているときは、ページ調査ツールのツールバーの右端にリサイズ用のウィジェットが表示されますので、一度に見たい HTML の量に合わせてサイズを調節することができます。

- -

属性の実験を行う

- -

ソース中の属性値をダブルクリックして新しい値を入力することで、HTML 属性の値を変更することができます:

- -

edit-html-attr.png

- -

参考情報

- - - -

{{ languages( { "en": "en/Tools/Page_Inspector/HTML_panel"} ) }}

diff --git a/files/ja/tools/page_inspector/style_panel/index.html b/files/ja/tools/page_inspector/style_panel/index.html deleted file mode 100644 index bbfb74ccca..0000000000 --- a/files/ja/tools/page_inspector/style_panel/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Style panel -slug: Tools/Page_Inspector/Style_panel -translation_of: Tools/Page_Inspector#CSS_pane -translation_of_original: Tools/Page_Inspector/Style_panel ---- -
{{ToolsSidebar}}

ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。

- -

{{ 英語版章題("The Rules view") }}

- -

ルールビュー

- -

style-rules.pngルールビュー (左図) では、スタイルがスタイルシートの編成方法に似た形式でまとめられています。ここには選択された要素に適用しているルールが、そのルールが要素に与えたプロパティ (およびその値) と共に表示されます。また、最後に適用したスタイルがリストの始めに表示されます。スタイルは供給源ごとにグループ化され、そのスタイルが読み込まれたファイルの名前が表示されます。なお、"インライン" グループは HTML の style 属性を用いて適用されたスタイルをリスト化します。

- -

継承されたスタイルはその旨が注記され、また後から適用されたスタイルに上書きされたスタイルには取り消し線が引かれます。よって、ある要素のスタイルの由来がどこかを明らかにすることを簡単にし、また要素のスタイルが予期しないものになってしまう問題のデバッグに役立つでしょう。

- -

また、ルールビューでは CSS に変更を加えることができます。あるスタイルの適用／非適用を切り替えるには、そのスタイルの隣にあるチェックボックスをクリックしてください。変更点はブラウザウィンドウ内へ直ちに反映されます。

- -

加えて、プロパティ名をクリックして新しい名前を入力することで、プロパティの名前を変えることができます。同様にプロパティの値をクリックして新しい値を入力することで、値を変えることもできます。

- -

閉じ括弧 ("}") がある行をクリックすることで、新しいプロパティを追加することができます。新しい行が追加されて、プロパティ名とその値を入力することができます。

- -

すべての変更内容は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。

- -

例えば "Sign in" ボタンの {{ HTMLElement("a") }} 要素に、以下に示したルールの新しいプロパティを追加してみましょう:

- -

font-size.png

- -

フォントサイズが大きくされたので、ボタンが以前よりも大きくなります。このように、コンテンツで実験を行ったり、作業中のコンテンツで何をすればどのような外見になるかをリアルタイムに確認したりすることにスタイルパネルを使用できます。

- -

{{ 英語版章題("New features in Firefox 13") }}

- -

ある宣言のために CSS の大規模な編集を行いたい場合は、背景が灰色の見出し行 (スクリーンショットで "mdn-min.css:1" などのような箇所) をクリックしましょう。すると、当該宣言を定義する場所にカーソルを置いた状態でスタイルエディタが開きます。

- -

宣言の部分で右クリックすると、その宣言をさまざまな方法でコピーする項目があるポップアップメニューを表示しますので、例えば別のドキュメントに貼り付けるといったことができます。

- -

編集中、あるプロパティに対して不正な値を入力したり未知のプロパティ名を入力したりすると、黄色の警告アイコンをプロパティの隣へ以下のように表示します:

- -

style-panel-warning-icon.png

- -

{{ 英語版章題("The Properties view") }}

- -

プロパティビュー

- -

一方プロパティビューでは、選択された要素に適用されているすべてのプロパティやその値を、どのスタイルシートやルールがその値を設定したかと共に表示します。これらはアルファベット順に並べられ、また見たい項目を簡単に発見できる検索機能も提供されています。

- -

style-properties.png既定の状態ではページのスタイルシートで設定したスタイルだけが表示されますが、"ユーザ CSS のみ" のチェックボックスのチェックを外すことで、ブラウザの既定のスタイルも表示することができます。

- -

検索ボックスに入力することでリアルタイムに一覧の絞り込みが行われます。例えばフォント関連の設定内容だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティだけが表示されます。同様に、プロパティの値を検索することもできます。例えば、フォントに "Lucida Grande" が適用されることの起因となるルールを探したいとします。その場合は、フォント名を検索ボックスに入力してください。

- -

プロパティ名の隣にある三角印をクリックすると、プロパティの値・プロパティがどのように適用されたか・そのプロパティの由来はどこかといった詳細情報が表示されます。

- -

{{ 英語版章題("Learning more about properties") }}

- -

プロパティについて詳しく学ぶ

- -

showing-info-icon.pngよく知らない CSS プロパティや、より詳しく知りたいプロパティがあるときにとても便利な機能があります: プロパティビューでプロパティ名にマウスポインタを載せると、小さな "情報" アイコンが表示されます。このアイコンをクリックすると、Mozilla Developer Network の Wiki にある当該プロパティのドキュメントが表示されます。

- -

{{ 英語版章題("See also") }}

- -

参考情報

- - - -

{{ languages( { "en": "en/Tools/Page_Inspector/Style_panel"} ) }}

diff --git a/files/ja/tools/performance/profiler_walkthrough/index.html b/files/ja/tools/performance/profiler_walkthrough/index.html deleted file mode 100644 index 858b944015..0000000000 --- a/files/ja/tools/performance/profiler_walkthrough/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: プロファイラのチュートリアル -slug: Tools/Performance/Profiler_walkthrough -translation_of: Tools/Performance/Call_Tree -translation_of_original: Tools/Performance/Profiler_walkthrough ---- -
{{ToolsSidebar}}

JavaScript プロファイラは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。

- -

プロファイルを分析する

- -

パフォーマンスツールがどのようにプロファイルを提供するかを理解するには、例を見ていくことがもっとも簡単です。以下のコードは 2 から 10,000 までの数値について素数であるかを確認して、その結果を表示します。少しおもしろくするため、素数の確認は setTimeout のコールバックとして実行します:

- -
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);
- -

このコードを Web ページに貼り付けて実行すると、コンソールへ以下のように出力します:

- -
"2 is prime"
-"3 is prime"
-"4 is not prime"
-"5 is prime"
-"6 is not prime"
- -

このコードのプロファイルを取得すると、以下のように表示されるでしょう:

- -

- -

最初の行は、関数列が常に (ルート) になります。ここでは 2 つのことを示しています: プロファイリングに 1,121.95 ミリ秒かかっており、またその間に 78 個のサンプルを取得しました。(ルート) の下に、サンプルの取得中にプログラムで経由した、さまざまなパスのツリーを表示します。(ルート) の直下に、スタックの底にあるトップレベルの関数が現れます。この例では、トップレベルの関数が 2 つあります:

- - - -

testPrimes() の行を見ていきましょう:

- -

- -

ここでは、78 個のサンプルのうち 29 個を testPrimes() 内で取得したことがわかります。合計コストの列は、サンプル数をパーセント値に置き換えたものです: (29/78) * 100 = 37.17

- -

ところが時間とコストは、ともに 0 です。これは、そのスタックフレームのコードを実行している間に取得したサンプルがないためです。サンプルはすべて、関数内にネストしているブロックまたは testPrimes() が呼び出した関数の内部で取得したものです。これは次の行でわかります:

- -

- -

この行も testPrimes という名称です。これは 19 行目から始まる for ループが作成した、testPrimes() の新たなスタックフレームを指しています。前のフレームのコストが 0 であったことから予想されるとおり、このフレームのサンプル列も 29 です。

- -

しかし、コストと時間は 0 ではありません。これはいくつかのサンプルが、このフレームを実行しているときに取得されたことを表します。プロファイルではサンプルをいくつ取得したかを明示していませんが、次の timedIsPrime という名前の行で取得したサンプルが 24 個であることから、5 個取得したはずです。これは簡単に確認できます。(5/78) * 100 = 6.41 であり、コストの値と一致します。

- -

この分岐で残る 24 個のサンプル (全体の 30.76%) は timedIsPrime() で取得されました。つまり、setTimeout() (12 行目) を呼び出している部分です。

- -

コールツリーの別の分岐は、setTimeout() (13 行目) に渡した無名のコールバック関数から始まっています。ここではサンプルを 1 個取得しており、残り 48 個のサンプル (全体の 61.53%) はコールバックで呼び出す isPrime() で取得されました。

- -

総括すると、もっとも多くのサンプルを isPrime() で取得しており (全体の 61.53%)、その次が timedIsPrime() (全体の 30.76%)、残りは取るに足らない量です。統計的に言えば、おそらくこれらの関数がほとんどの時間を消費していますので、プログラムを高速化したい場合の有力な最適化候補になります。

- -

合計時間と時間

- -

合計時間と時間の列は合計コストとコストから算出していますが、直接反映したものではありません。規則的にサンプルを取得しようとしていますが、そのとおりに取得できない場合もあります。適切な時期にサンプルを取得できなかった場合は、その不規則性を補正しようとします。

- -

呼び出しツリーを反転

- -

既定では、プロファイラは一般的なコールスタックと同様に、呼び出しツリーを根から葉の順に表示します。つまりそれぞれのトップレベル関数、トップレベル関数が呼び出す関数、その関数から呼び出される関数、といった順になります:

- -
testPrimes
-
-  -> timedIsPrime
-
-
-
-(setTimeout callback)
-
-  -> isPrime
- -

これは論理的かつスタックが積み上げられる時系列に従っており、コールスタックを表現するための慣習的な方法でもあります。一方、時間がかかっている場所が呼び出しツリーの深部にあることがよくあります。前出の例でわかるとおり、全サンプルの 90% は 2 つの主要な分岐の終端で発生しています。

- -

多くのサンプルを記録したスタックフレームに注目させるため、呼び出しツリーを反転させるオプションがプロファイラにあります。このオプションを選択すると、プロファイラは以下のようになります:

- - - -

例えば testPrimes の例を、既定の表示でもう一度示します:

- -

- -

呼び出しツリーを反転すると以下のようになります:

- -

- -

反転した表示では、プログラムで時間がかかっている場所を効果的に目立たせていることがわかるでしょう。

diff --git a/files/ja/tools/profiler/index.html b/files/ja/tools/profiler/index.html deleted file mode 100644 index c05f177c25..0000000000 --- a/files/ja/tools/profiler/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: JavaScript プロファイラ -slug: Tools/Profiler -tags: - - Debugging - - Firefox - - Guide - - Profiler - - Profiling - - Tools -translation_of: Tools/Performance -translation_of_original: Tools/Profiler ---- -
{{ToolsSidebar}}

プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。

- -

"Web 開発" メニューから "プロファイラ" を選択することで、プロファイラを起動できます。"Web 開発" メニューは、Linux や OS X では "ツール" メニューの配下に、Windows では "Firefox" メニューの直下にあります。

- -

ツールボックスが開いて、プロファイラが選択されます。

- -

サンプリング型プロファイラ

- -

JavaScript プロファイラは、サンプリング型のプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。
-
- 例えば、以下のようなプログラムについて考えてみましょう:

- -
function doSomething() {
-  var x = getTheValue();
-  x = x + 1;                   // -> サンプル A
-  logTheValue(x);
-}
-
-function getTheValue() {
-  return 5;
-}
-
-function logTheValue(x) {
- console.log(x);               // -> サンプル B、サンプル C
-}
-
-doSomething();
- -

プロファイラをアクティブにしてこのプログラムを実行したら、実行時にプロファイラは上記のインラインコメントで示したように 3 つのサンプルを取得します。

- -

これらはすべて doSomething() の内部から取得されますが、2 番目の 2 つは doSomething() から呼び出された logTheValue() 関数の内部です。よってプロファイルは、以下のように 3 つのスタックトレースで構成されます:

- -
サンプル A: doSomething()
-サンプル B: doSomething() > logTheValue()
-サンプル C: doSomething() > logTheValue()
- -

これは私たちに何も伝えられない不十分なデータであることが明らかですが、より多くのサンプルにより、logTheValue() がコード内のボトルネックであると断定できるかもしれません。

- -

プロファイルの作成

- -

プロファイラでストップウォッチのボタンをクリックして、サンプルの記録を始めます。プロファイラが記録を行っている間は、ストップウォッチのボタンがハイライトされます。ボタンを再度押すと記録を停止して、新たなプロファイルを保存します:

- -

- -

"終了" をクリックすると、新しいプロファイルが自動的に開きます:

- -

- -

このペインは 2 つのパーツに分かれています:

- - - -

プロファイルの分析

- -

プロファイルは 2 つのパーツに分かれています:

- - - -

プロファイルのタイムライン

- -

プロファイルのタイムラインは、プロファイル表示の上部を占めています:

- -

横軸は時間、縦軸はサンプルにおけるコールスタックのサイズを表します。コールスタックは、サンプルを取得したときにアクティブであった関数の量を表します。

- -

チャートで赤色のサンプルは、そのときにブラウザが応答していなかったことを示しており、ユーザはアニメーションや応答性が止まったことに気づいたかもしれません。プロファイルに赤色のサンプルがある場合は、そのコードをいくつかのイベントに分解することを検討したり、requestAnimationFrame や Worker の使用について調べたりしましょう。

- -

タイムラインでクリックアンドドラッグすることで、プロファイル内の特定の範囲を調査できます:

- -

- -

タイムラインの上に "サンプリング範囲 [AAA, BBB]" というラベルがついた、新たなボタンが現れます。そのボタンを押すとプロファイルがズームされて、そのタイムスライスの詳細なビューが下部に表示されます:

- -


-

- -

プロファイルの詳細

- -

プロファイルの詳細は、プロファイル表示の下部を占めています:

- -

始めに新しいサンプルを開くと、サンプルペインには上のスクリーンショットのように "(total)" という名前の行があります。"(total)" の隣にある三角印をクリックすると、サンプル内にあるすべてのトップレベル関数がリストアップされます。

- -

- -

実行時間は当該関数が現れたサンプルの総数を示し1、その後ろにプロファイル内で当該関数が現れた全サンプルのパーセント値があります。最上段の行はプロファイル全体で 2021 のサンプルがあることを表し、また 2 行目は 1914 サンプルすなわち全体の 94.7% が、detectImage() 関数内にいたことを表します。

- -

滞在 は当該関数そのものを実行する間に取得したサンプル数を示しており、関数を呼び出しているときではありません。前出のシンプルな例では、doSomething() は実行時間が 3 (サンプル A、B、C) ですが、滞在の値は 1 (サンプル A) になるでしょう。

- -

3 列目は関数名およびファイル名と行数 (ローカルの関数) またはベースネームとドメイン名を表示します。灰色の関数はブラウザ組み込みの関数です。黒色の関数がページで読み込んだ JavaScript を表します。行にマウスポインタを乗せると、関数の識別名の右側に矢印が現れます: 矢印をクリックすると関数のソースを表示します。

- -

コールツリーの展開

- -

ある行で、この関数から呼び出された関数に滞在している間のサンプルが存在する場合 (すなわち、実行時間がその行の滞在より大きい場合) は、関数名の左側に三角印が表示され、コールツリーを展開できます。

- -

前出のシンプルな例では、完全に展開したコールツリーは以下のようになります:

- - - - - - - - - - - - - - - - - - - -
実行時間滞在 
3            100%1doSomething()
2              67%2logTheValue()
- -

より実際的な例を見ましょう: 前出のスクリーンショットで、上から 2 行目を見ると detectImage() 関数の内部で 1914 サンプルかかっていることがわかります。しかし、そのすべては detectImage() から呼び出された関数でかかっています (滞在 セルが 0 です)。コールツリーを展開して、ほとんどのサンプルがかかっていたとき実際に実行していた関数は何かを明らかにできます:

- -

- -

これは、detectAtScale() を実際に実行しているときに 6 サンプル、getRect() の実行に 12 サンプルかかっていたことなどを表します。

- -

脚注

- -
    -
  1. 関数がさまざまなソースから複数回呼び出される場合、プロファイラの出力にも複数回現れます。よって、forEach など汎用的な関数はコールツリー内に複数回現れるでしょう。
    2. -
diff --git a/files/ja/tools/release_notes/index.html b/files/ja/tools/release_notes/index.html deleted file mode 100644 index 8067ad603e..0000000000 --- a/files/ja/tools/release_notes/index.html +++ /dev/null @@ -1,416 +0,0 @@ ---- -title: リリースノート -slug: Tools/Release_notes -translation_of: Mozilla/Firefox/Releases -translation_of_original: Tools/Release_notes ---- -
{{ToolsSidebar}}

Firefox 52

- - - -

Firefox 51 から Firefox 52 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 51

- - - -

Firefox 50 から Firefox 51 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 50

- - - -

Firefox 49 から Firefox 50 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 49

- - - -

Firefox 48 から Firefox 49 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 48

- -

ハイライト:

- - - -

Firefox 47 から Firefox 48 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 47

- -

ハイライト:

- - - -

Firefox 46 から Firefox 47 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 46

- -

ハイライト:

- - - -

Firefox 45 から Firefox 46 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 45

- -

ハイライト:

- - - -

Firefox 44 から Firefox 45 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 44

- -

ハイライト:

- - - -

Firefox 43 から Firefox 44 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 43

- -

ハイライト:

- - - -

Firefox 42 から Firefox 43 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 42

- -

ハイライト:

- - - -

Firefox 41 から Firefox 42 の間に解決した開発ツール関連のバグ一覧。

- -

Firefox 41

- -

ハイライト:

- - - -

Firefox 40 から Firefox 41 の間に解決した開発ツール関連のバグ一覧。特にパフォーマンスツールに関係する、これらのバグ修正の多くは Firefox 40 に反映されました。

- -

Firefox 40

- -

ハイライト:

- - - -

さらに:

- - - -

Firefox 39 から Firefox 40 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 39

- -

ハイライト:

- - - -

Firefox 38 から Firefox 39 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 38

- -

ハイライト:

- - - -

Firefox 37 から Firefox 38 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 37

- -

ハイライト:

- - - -

Firefox 36 から Firefox 37 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 36

- -

ハイライト:

- - - -

Firefox 35 から Firefox 36 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 35

- -

ハイライト:

- - - -

Firefox 34 から Firefox 35 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 34

- -

ハイライト:

- - - -

Firefox 33 から Firefox 34 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 33

- -

ハイライト:

- - - -

さらに:

- - - -

Firefox 32 から Firefox 33 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 32

- -

ハイライト:

- - - -

さらに:

- - - -

Firefox 31 から Firefox 32 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 31

- -

ハイライト:

- - - -

さらに:

- - - -

Firefox 30 から Firefox 31 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 30

- -

ハイライト:

- - - -

さらに:

- - - -

Firefox 29 から Firefox 30 の間に解決した開発ツール関連のバグ一覧

- -

Firefox 29

- -

Firefox 29 Hacks ブログの記事。ハイライト:

- - - -

Firefox 28

- -

Firefox 28 Hacks ブログ記事。ハイライト:

- - - -

Firefox 27

- -

Firefox 27 Hacks ブログ記事。ハイライト:

- - diff --git a/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html new file mode 100644 index 0000000000..a2f726cd33 --- /dev/null +++ b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide/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 +--- +
{{ToolsSidebar}}
+ +

この記事では、Firefox開発ツールを Firefox 36 以降の Android 用 Firefox に接続する方法について説明します。

+ +

長い間、Firefox Developer Tools を Android 用 Firefox に接続してモバイル Web サイトをデバッグすることは可能でした。これまでは、かなり複雑でエラーが発生しやすいプロセスでした。Firefox 36 では、このプロセスをもっと簡単にしました。特に、adb ツールをまったく直接処理する必要はありません。これで WebIDE を使用して接続します。これは舞台裏での adb の設定を担当します。

+ +
+

これを行うには、デスクトップに Firefox 36 以上、モバイルデバイスに Firefox 35 が必要です。以前のバージョンを使用する必要がある場合は、デベロッパーツールを Android 用 Firefox に接続するための古い手順を参照してください。

+
+ +

+ +

このガイドは2つの部分に分かれています。最初の部分「前提条件」は、1回だけ行う必要のあるものをカバーし、2番目の部分の「接続する」は、デバイスを接続するたびに行う必要がある作業をカバーします。

+ +

前提条件

+ +

まず、次のものが必要です。

+ + + +

ADB ヘルパー

+ +

デスクトップ上の Firefox には、ADB ヘルパーアドオンのバージョン 0.7.1 以上が必要です。これは、初めて WebIDE を開くときに自動的にインストールされます。バージョンを確認するには、ブラウザのアドレスバーに about:addons と入力すると、ADB が表示されます。

+ +

ADB ヘルパーのバージョンが 0.7.1 以上でない場合は、「Projects」メニューから「Extra Components を管理」を選択すると、「Extra Components」ウィンドウが表示されます。このウィンドウには ADB ヘルパーのエントリが含まれています：

+ +

「アンインストール」をクリックし、「インストール」をクリックすると、最新のバージョンになります。

+ +

Android 端末のセットアップ

+ +

まず、このリンクの手順 2 と 3 を実行して、USB デバッグを有効にします。

+ +

次に Firefox for Android でリモートデバッグを有効にします。ブラウザを開き、メニューを開き、[設定]、[デベロッパーツール] を選択します (一部の Android 搭載端末では、[詳細] を選択して [設定] オプションを表示する必要があります)。[リモートデバッグ] チェックボックスをオンにします。

+ +

+ +

ブラウザはポート転送を設定することを通知する通知を表示することがありますが、無視することができます。

+ +

接続する

+ +

Android 端末を USB ケーブルでデスクトップに接続し、WebIDE を開き、「ランタイム」メニューを開きます。「USBデバイス」の下に Android 用 Firefox がデバッグ対象として表示されます。

+ +

+ +

それを選択してください。Android 搭載端末では警告メッセージが表示されます。

+ +

+ +

[OK] をクリックします。WebIDE の「アプリケーションを開く」メニューをクリックします。デバイス上に開いているすべてのタブのリストが表示されます。

+ +

+ +

開発ツールを添付するタブを選択する：

+ +

これでリモートデバッグをサポートするすべての Firefox 開発ツールを使用できるようになります。詳細についてはリモートデバッグのページを参照してください。

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 deleted file mode 100644 index a2f726cd33..0000000000 --- a/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -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 ---- -
{{ToolsSidebar}}
- -

この記事では、Firefox開発ツールを Firefox 36 以降の Android 用 Firefox に接続する方法について説明します。

- -

長い間、Firefox Developer Tools を Android 用 Firefox に接続してモバイル Web サイトをデバッグすることは可能でした。これまでは、かなり複雑でエラーが発生しやすいプロセスでした。Firefox 36 では、このプロセスをもっと簡単にしました。特に、adb ツールをまったく直接処理する必要はありません。これで WebIDE を使用して接続します。これは舞台裏での adb の設定を担当します。

- -
-

これを行うには、デスクトップに Firefox 36 以上、モバイルデバイスに Firefox 35 が必要です。以前のバージョンを使用する必要がある場合は、デベロッパーツールを Android 用 Firefox に接続するための古い手順を参照してください。

-
- -

- -

このガイドは2つの部分に分かれています。最初の部分「前提条件」は、1回だけ行う必要のあるものをカバーし、2番目の部分の「接続する」は、デバイスを接続するたびに行う必要がある作業をカバーします。

- -

前提条件

- -

まず、次のものが必要です。

- - - -

ADB ヘルパー

- -

デスクトップ上の Firefox には、ADB ヘルパーアドオンのバージョン 0.7.1 以上が必要です。これは、初めて WebIDE を開くときに自動的にインストールされます。バージョンを確認するには、ブラウザのアドレスバーに about:addons と入力すると、ADB が表示されます。

- -

ADB ヘルパーのバージョンが 0.7.1 以上でない場合は、「Projects」メニューから「Extra Components を管理」を選択すると、「Extra Components」ウィンドウが表示されます。このウィンドウには ADB ヘルパーのエントリが含まれています：

- -

「アンインストール」をクリックし、「インストール」をクリックすると、最新のバージョンになります。

- -

Android 端末のセットアップ

- -

まず、このリンクの手順 2 と 3 を実行して、USB デバッグを有効にします。

- -

次に Firefox for Android でリモートデバッグを有効にします。ブラウザを開き、メニューを開き、[設定]、[デベロッパーツール] を選択します (一部の Android 搭載端末では、[詳細] を選択して [設定] オプションを表示する必要があります)。[リモートデバッグ] チェックボックスをオンにします。

- -

- -

ブラウザはポート転送を設定することを通知する通知を表示することがありますが、無視することができます。

- -

接続する

- -

Android 端末を USB ケーブルでデスクトップに接続し、WebIDE を開き、「ランタイム」メニューを開きます。「USBデバイス」の下に Android 用 Firefox がデバッグ対象として表示されます。

- -

- -

それを選択してください。Android 搭載端末では警告メッセージが表示されます。

- -

- -

[OK] をクリックします。WebIDE の「アプリケーションを開く」メニューをクリックします。デバイス上に開いているすべてのタブのリストが表示されます。

- -

- -

開発ツールを添付するタブを選択する：

- -

これでリモートデバッグをサポートするすべての Firefox 開発ツールを使用できるようになります。詳細についてはリモートデバッグのページを参照してください。

diff --git a/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html b/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html deleted file mode 100644 index 90596180ce..0000000000 --- a/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: レスポンシブデザインモード (Firefox 52 より前) -slug: Tools/Responsive_Design_Mode_(before_Firefox_52) -translation_of: Tools/Responsive_Design_Mode -translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52) ---- -
{{ToolsSidebar}}
-

このページでは、Firefox 52 より前のバージョンのレスポンシブデザインモードについて説明します。Firefox 52 以降については、レスポンシブデザインモード をご覧ください。

-
- -

レスポンシブデザイン は、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインモードは、ウェブサイトやウェブアプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。

- -

以下のスクリーンショットは Wikipedia のモバイル版を、コンテンツエリアのサイズが 320x480 の状態で表示した例です。

- -

- -

レスポンシブデザインモードは、コンテンツエリアのサイズをすばやくかつ正確に変更できるので便利です。

- -

もちろん、ブラウザーのウィンドウサイズを変えることもできるでしょう。しかしブラウザーのウィンドウを小さくするとほかのタブもすべて小さくなってしまい、ブラウザーのインターフェイスが使用しづらくなります。

- -

レスポンシブデザインモードを有効にした状態で、コンテンツエリアがリサイズされたまま通常どおりにブラウジングを続けることができます。

- -

有効化と無効化

- -

レスポンシブデザインモードの有効化方法は 3 つあります:

- - - -

また、レスポンシブデザインモードを無効化する方法も 3 つあります:

- - - -

リサイズ

- -

コンテンツエリアのサイズを変更する方法は 2 つあります:

- - - -

クリックアンドドラッグでリサイズする場合、Control キー (Mac OS X では Cmd キー) を押しながら操作するとリサイズ時の移動速度が遅くなります。これにより、精密なサイズ設定が容易になります。

- -

レスポンシブデザインモードの操作

- -

- -

レスポンシブデザインモードでページを表示しているときは、ウィンドウの上部に 5 個のコントロールがあります:

- -
-
終了
-
レスポンシブデザインモードを終了して、通常のブラウジングに戻ります。
-
サイズ選択
-
いくつかの幅と高さのプリセット、または独自に定義したサイズから選択します。
-
高さと幅を入れ替え
-
スクリーンの向きのポートレートとランドスケープを切り替えます。
-
タッチイベントをシミュレート
-
touch イベントのシミュレーションを有効化/無効化します。touch イベントのシミュレーションを有効化すると、mouse イベントを touch イベント に変換します。
-
スクリーンショット
-
コンテンツエリアのスクリーンショットを取得します。スクリーンショットは、Firefox の既定のダウンロード先に保存します。
-
Custom User Agent を設定
-
Firefox 47 の新機能。ユーザーエージェント文字列を入力して、入力ボックスからフォーカスを外します。入力ボックスを青色でハイライト表示して、入力した UA 文字列を使用していることを示します。Firefox はカレントタブから実行するリクエストに限り、指定した UA 文字列を含めます。これは、UA スニッフィング によってブラウザーごとに異なるコンテンツを提供するサイトで役に立ちます。文字列を選択および削除すると、通常の UA 文字列に戻ります。
-
diff --git a/files/ja/tools/using_the_source_editor/index.html b/files/ja/tools/using_the_source_editor/index.html deleted file mode 100644 index f546812c77..0000000000 --- a/files/ja/tools/using_the_source_editor/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: ソースエディタの使用 -slug: Tools/Using_the_Source_Editor -translation_of: tools/Keyboard_shortcuts#Source_editor -translation_of_original: Tools/Using_the_Source_Editor ---- -
{{ToolsSidebar}}

ソースエディタは source-editor.jsm によって提供されるエディタコンポーネントで、スクラッチパッド や スタイルエディタ などの開発ツールで共用しています。また、Firefox の拡張機能から使用することもできます。この記事では、テキストを編集するときのエディタ自身の使い方を説明します。

- -

キーボードコマンド

- -

以下は、各コマンドの標準的なキーボードショートカットです。これは一部のアドオンで異なる場合があることに注意してください。ただし、Firefox では常にこれらを使用します。

- -
注意: Mac OS X では、control キーの代わりに Command キーを使用します。
- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
機能キーボード
すべて選択Ctrl-A
コピーCtrl-C
検索Ctrl-F
再検索Ctrl-G
指定行へ移動Ctrl-L
やり直しCtrl-Shift-Z
貼り付けCtrl-V
切り取りCtrl-X
元に戻すCtrl-Z
行のインデントTab
行のインデント解除Shift-Tab
前の行へ移動Alt-↑ (Mac OS X では Ctrl-Option-↑)
後の行へ移動Alt-↓ (Mac OS X では Ctrl-Option-↓)
選択範囲のコメント化とコメント解除Ctrl-/ {{ fx_minversion_inline("14.0") }}
開き括弧へ移動Ctrl-[ {{ fx_minversion_inline("14.0") }}
閉じ括弧へ移動Ctlr-] {{ fx_minversion_inline("14.0") }}
- -

 

- -

参考情報

- - diff --git a/files/ja/tools/view_source/index.html b/files/ja/tools/view_source/index.html new file mode 100644 index 0000000000..30a3793e5c --- /dev/null +++ b/files/ja/tools/view_source/index.html @@ -0,0 +1,75 @@ +--- +title: ソースを表示 +slug: View_source +tags: + - DevTools + - Firefox + - view page source +translation_of: Tools/View_source +--- +
{{ToolsSidebar}}

ソース表示機能を使用して、表示しているページの HTML や XML を閲覧できます。ソースを表示する方法は以下のとおりです:

+ + + +

Firefox 42 より前のバージョンでは、ページのソースを表示する新しいウィンドウが開いていました。

+ +

Firefox 42 から、(新しいウィンドウに代わり) 新しいタブでソースを表示します。以前のウィンドウ表示を望む場合は、about:config を開いて設定項目 view_source.tab を false に設定してください。

+ +

Firefox 60 で設定項目 view_source.tab が削除されました ({{bug(1418403)}}) ので、ソース表示モードを切り替えできなくなりました。ソースは常に新しいタブで表示します。

+ +

ソース表示で提供する機能

+ +

ソース表示機能には 3 つの付加機能があり、Firefox 40 よりソース表示タブのコンテキストメニューからアクセスできます:

+ + + +

構文のハイライト機能を有効にすると、パースエラーが発生した箇所を赤色で表示します。エラー箇所にマウスポインタを載せると、エラー内容を説明するツールチップを表示します。

+ +

キーボードで指定行へ移動するには、Mac では Control + Option + L、Windows や Linux では Alt + Shift + L を押下してください。

+ +

選択した部分のソースを表示

+ +

Web ページの一部分を選択してコンテキストクリックすると、"選択した部分のソースを表示" というメニュー項目があります。これは "ページのソースを表示" と同様の機能ですが、選択した部分のソースだけを表示する点が異なります。

+ +

MathML のソースを表示

+ +

MathML 上にマウスポインタがある状態でコンテキストクリックすると、"MathML のソースを表示" というメニュー項目があります。この項目を選択すると、MathML のソースを確認できます。

+ +

ソース表示の制限事項

+ +

以下に、ソース表示が提供する機能について知っておくべき制限事項を挙げます。

+ +

エラー報告機能は検証ツールではない

+ +

ソース表示はパース処理のエラーを報告するだけであり、HTML の妥当性のエラーは報告しません。たとえば、{{HTMLElement("ul")}} 要素の子要素に {{HTMLElement("div")}} 要素を挿入することはパースエラーではありませんが、妥当な HTML でもありません。そのため、ソース表示ではこのエラーを報告しません。HTML が妥当かを確認したい場合は HTML 検証ツール、例えば W3C が提供するツール を使用しましょう。

+ +

報告されないエラーがある

+ +

ソース表示で報告されたエラーはすべて HTML 仕様書に関するパースエラーですが、報告されないパースエラーもあります。下記のエラーは報告されません:

+ + + +

XML 構文のハイライト

+ +

ソース表示では、XML ソースのハイライト表示に HTML トークン化プログラムを使用します。トークン化プログラムは XML ソースのハイライト時にプロセッシングインストラクションをサポートしますが、それは XML 固有の機能のみ提供されます。このため、内部サブセットを持つ doctype やカスタムエンティティへの実体参照は正しくハイライト表示されません。

+ +

誤ったハイライト表示は、(XUL ドキュメントのような) Firefox の chrome ファイルのソースを表示すると見ることができます。しかし実際のところ、典型的な XML ファイルを閲覧する際は問題にならいでしょう。

+ +

関連情報

+ + 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 deleted file mode 100644 index a71b4568e1..0000000000 --- a/files/ja/tools/web_console/opening_the_web_console/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: ウェブコンソールを開く -slug: Tools/Web_Console/Opening_the_Web_Console -translation_of: Tools/Web_Console/UI_Tour ---- -
{{ToolsSidebar}}
- -

ウェブコンソールを開く方法は以下のとおりです:

- - - -

ウェブコンソールがアクティブになっている ツールボックス がブラウザーウィンドウの下部に現れます (開発ツールのツールバー では "コンソール" という名称です):

- -

- -

ウェブコンソールのインターフェイスは 3 つに分けられます:

- - diff --git a/files/ja/tools/web_console/ui_tour/index.html b/files/ja/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..a71b4568e1 --- /dev/null +++ b/files/ja/tools/web_console/ui_tour/index.html @@ -0,0 +1,25 @@ +--- +title: ウェブコンソールを開く +slug: Tools/Web_Console/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}
+ +

ウェブコンソールを開く方法は以下のとおりです:

+ + + +

ウェブコンソールがアクティブになっている ツールボックス がブラウザーウィンドウの下部に現れます (開発ツールのツールバー では "コンソール" という名称です):

+ +

+ +

ウェブコンソールのインターフェイスは 3 つに分けられます:

+ + -- cgit v1.2.3-54-g00ecf