From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/tools/about_colon_debugging/index.html | 211 ++++ files/ja/tools/accessibility_inspector/index.html | 160 +++ .../tools/accessing_the_developer_tools/index.html | 22 + files/ja/tools/add-ons/index.html | 18 + files/ja/tools/browser_console/index.html | 179 +++ files/ja/tools/browser_toolbox/index.html | 74 ++ files/ja/tools/css_coverage/index.html | 149 +++ files/ja/tools/debugger.object/index.html | 321 ++++++ .../how_to/access_debugging_in_add-ons/index.html | 26 + .../debugger/how_to/black_box_a_source/index.html | 20 + .../how_to/break_on_a_dom_event/index.html | 22 + .../how_to/breaking_on_exceptions/index.html | 18 + .../debugger/how_to/debug_eval_sources/index.html | 29 + .../debugger/how_to/disable_breakpoints/index.html | 12 + .../index.html | 46 + .../highlight_and_inspect_dom_nodes/index.html | 16 + files/ja/tools/debugger/how_to/index.html | 14 + .../debugger/how_to/open_the_debugger/index.html | 16 + .../how_to/pretty-print_a_minified_file/index.html | 20 + files/ja/tools/debugger/how_to/search/index.html | 18 + .../debugger/how_to/search_and_filter/index.html | 68 ++ .../debugger/how_to/set_a_breakpoint/index.html | 28 + .../how_to/set_a_conditional_breakpoint/index.html | 16 + .../how_to/set_watch_expressions/index.html | 18 + .../debugger/how_to/step_through_code/index.html | 25 + .../debugger/how_to/use_a_source_map/index.html | 43 + files/ja/tools/debugger/index.html | 72 ++ .../tools/debugger/keyboard_shortcuts/index.html | 10 + .../limitations_of_the_new_debugger/index.html | 29 + files/ja/tools/debugger/settings/index.html | 57 + .../ja/tools/debugger/source_map_errors/index.html | 58 + files/ja/tools/debugger/ui_tour/index.html | 110 ++ .../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 +++ files/ja/tools/deprecated_tools/index.html | 119 ++ files/ja/tools/devtoolsapi/index.html | 836 ++++++++++++++ files/ja/tools/devtoolscolors/index.html | 343 ++++++ files/ja/tools/dom_property_viewer/index.html | 46 + files/ja/tools/eyedropper/index.html | 42 + files/ja/tools/firefox_os_1.1_simulator/index.html | 349 ++++++ .../ja/tools/firefox_os_simulator_clone/index.html | 90 ++ files/ja/tools/index.html | 229 ++++ files/ja/tools/index/index.html | 9 + files/ja/tools/json_viewer/index.html | 22 + files/ja/tools/keyboard_shortcuts/index.html | 1206 ++++++++++++++++++++ .../tools/measure_a_portion_of_the_page/index.html | 36 + files/ja/tools/memory/aggregate_view/index.html | 150 +++ files/ja/tools/memory/basic_operations/index.html | 64 ++ .../memory/comparing_heap_snapshots/index.html | 14 + .../tools/memory/dom_allocation_example/index.html | 54 + files/ja/tools/memory/dominators/index.html | 61 + files/ja/tools/memory/dominators_view/index.html | 154 +++ files/ja/tools/memory/index.html | 65 ++ files/ja/tools/memory/monster_example/index.html | 81 ++ files/ja/tools/memory/tree_map_view/index.html | 45 + files/ja/tools/migrating_from_firebug/index.html | 245 ++++ files/ja/tools/network_monitor/index.html | 61 + .../performance_analysis/index.html | 32 + .../ja/tools/network_monitor/recording/index.html | 28 + .../network_monitor/request_details/index.html | 184 +++ .../tools/network_monitor/request_list/index.html | 337 ++++++ .../ja/tools/network_monitor/throttling/index.html | 93 ++ files/ja/tools/network_monitor/toolbar/index.html | 48 + .../ja/tools/page_inspector/3-pane_mode/index.html | 69 ++ files/ja/tools/page_inspector/3d_view/index.html | 103 ++ .../how_to/edit_css_filters/index.html | 36 + .../how_to/edit_css_shapes/index.html | 89 ++ .../how_to/examine_and_edit_css/index.html | 244 ++++ .../how_to/examine_and_edit_html/index.html | 387 +++++++ .../examine_and_edit_the_box_model/index.html | 41 + .../how_to/examine_event_listeners/index.html | 33 + .../how_to/examine_flexbox_layouts/index.html | 80 ++ .../how_to/examine_grid_layouts/index.html | 135 +++ files/ja/tools/page_inspector/how_to/index.html | 13 + .../how_to/inspect_and_select_colors/index.html | 26 + .../how_to/open_the_inspector/index.html | 23 + .../reposition_elements_in_the_page/index.html | 22 + .../how_to/select_an_element/index.html | 36 + .../select_and_highlight_elements/index.html | 32 + .../how_to/use_the_inspector_api/index.html | 44 + .../index.html | 16 + .../how_to/view_background_images/index.html | 12 + .../page_inspector/how_to/view_fonts/index.html | 233 ++++ .../how_to/visualize_transforms/index.html | 12 + .../index.html | 24 + .../index.html | 118 ++ .../animations_examples/index.html | 86 ++ .../how_to/work_with_animations/index.html | 180 +++ .../ja/tools/page_inspector/html_panel/index.html | 34 + files/ja/tools/page_inspector/index.html | 60 + .../page_inspector/keyboard_shortcuts/index.html | 10 + .../ja/tools/page_inspector/style_panel/index.html | 68 ++ files/ja/tools/page_inspector/ui_tour/index.html | 110 ++ files/ja/tools/paint_flashing_tool/index.html | 93 ++ files/ja/tools/performance/allocations/index.html | 86 ++ files/ja/tools/performance/call_tree/index.html | 128 +++ files/ja/tools/performance/examples/index.html | 12 + .../sorting_algorithms_comparison/index.html | 73 ++ files/ja/tools/performance/flame_chart/index.html | 103 ++ files/ja/tools/performance/frame_rate/index.html | 58 + files/ja/tools/performance/how_to/index.html | 62 + files/ja/tools/performance/index.html | 80 ++ .../performance/profiler_walkthrough/index.html | 113 ++ .../scenarios/animating_css_properties/index.html | 156 +++ files/ja/tools/performance/scenarios/index.html | 10 + .../scenarios/intensive_javascript/index.html | 231 ++++ files/ja/tools/performance/ui_tour/index.html | 125 ++ files/ja/tools/performance/waterfall/index.html | 478 ++++++++ files/ja/tools/profiler/index.html | 144 +++ files/ja/tools/release_notes/index.html | 415 +++++++ .../remote_debugging/chrome_desktop/index.html | 48 + .../debugging_firefox_desktop/index.html | 82 ++ .../index.html | 68 ++ .../firefox_for_android/index.html | 146 +++ files/ja/tools/remote_debugging/index.html | 21 + .../tools/remote_debugging/thunderbird/index.html | 44 + files/ja/tools/responsive_design_mode/index.html | 222 ++++ .../index.html | 70 ++ files/ja/tools/rulers/index.html | 31 + files/ja/tools/scratchpad/index.html | 117 ++ files/ja/tools/settings/index.html | 180 +++ files/ja/tools/shader_editor/index.html | 60 + files/ja/tools/storage_inspector/index.html | 206 ++++ files/ja/tools/style_editor/index.html | 109 ++ files/ja/tools/taking_screenshots/index.html | 52 + files/ja/tools/tips/index.html | 130 +++ files/ja/tools/tools_toolbox/index.html | 99 ++ files/ja/tools/using_the_source_editor/index.html | 99 ++ files/ja/tools/validators/index.html | 74 ++ files/ja/tools/web_audio_editor/index.html | 81 ++ .../tools/web_console/console_messages/index.html | 383 +++++++ files/ja/tools/web_console/helpers/index.html | 141 +++ files/ja/tools/web_console/index.html | 48 + .../web_console/keyboard_shortcuts/index.html | 10 + .../web_console/opening_the_web_console/index.html | 25 + files/ja/tools/web_console/remoting/index.html | 686 +++++++++++ files/ja/tools/web_console/rich_output/index.html | 75 ++ .../ja/tools/web_console/split_console/index.html | 26 + .../the_command_line_interpreter/index.html | 123 ++ files/ja/tools/webide/index.html | 42 + files/ja/tools/webide/monitor/index.html | 158 +++ files/ja/tools/webide/opening_webide/index.html | 30 + .../ja/tools/webide/setting_up_runtimes/index.html | 126 ++ files/ja/tools/webide/the_runtime_menu/index.html | 53 + files/ja/tools/webide/troubleshooting/index.html | 101 ++ .../working_with_cordova_apps_in_webide/index.html | 42 + files/ja/tools/working_with_iframes/index.html | 30 + 165 files changed, 16450 insertions(+) create mode 100644 files/ja/tools/about_colon_debugging/index.html create mode 100644 files/ja/tools/accessibility_inspector/index.html create mode 100644 files/ja/tools/accessing_the_developer_tools/index.html create mode 100644 files/ja/tools/add-ons/index.html create mode 100644 files/ja/tools/browser_console/index.html create mode 100644 files/ja/tools/browser_toolbox/index.html create mode 100644 files/ja/tools/css_coverage/index.html create mode 100644 files/ja/tools/debugger.object/index.html create mode 100644 files/ja/tools/debugger/how_to/access_debugging_in_add-ons/index.html create mode 100644 files/ja/tools/debugger/how_to/black_box_a_source/index.html create mode 100644 files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html create mode 100644 files/ja/tools/debugger/how_to/breaking_on_exceptions/index.html create mode 100644 files/ja/tools/debugger/how_to/debug_eval_sources/index.html create mode 100644 files/ja/tools/debugger/how_to/disable_breakpoints/index.html create mode 100644 files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/ja/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html create mode 100644 files/ja/tools/debugger/how_to/index.html create mode 100644 files/ja/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/ja/tools/debugger/how_to/pretty-print_a_minified_file/index.html create mode 100644 files/ja/tools/debugger/how_to/search/index.html create mode 100644 files/ja/tools/debugger/how_to/search_and_filter/index.html create mode 100644 files/ja/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/ja/tools/debugger/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/ja/tools/debugger/how_to/set_watch_expressions/index.html create mode 100644 files/ja/tools/debugger/how_to/step_through_code/index.html create mode 100644 files/ja/tools/debugger/how_to/use_a_source_map/index.html create mode 100644 files/ja/tools/debugger/index.html create mode 100644 files/ja/tools/debugger/keyboard_shortcuts/index.html create mode 100644 files/ja/tools/debugger/limitations_of_the_new_debugger/index.html create mode 100644 files/ja/tools/debugger/settings/index.html create mode 100644 files/ja/tools/debugger/source_map_errors/index.html create mode 100644 files/ja/tools/debugger/ui_tour/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/settings/index.html create mode 100644 files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html create mode 100644 files/ja/tools/deprecated_tools/index.html create mode 100644 files/ja/tools/devtoolsapi/index.html create mode 100644 files/ja/tools/devtoolscolors/index.html create mode 100644 files/ja/tools/dom_property_viewer/index.html create mode 100644 files/ja/tools/eyedropper/index.html create mode 100644 files/ja/tools/firefox_os_1.1_simulator/index.html create mode 100644 files/ja/tools/firefox_os_simulator_clone/index.html create mode 100644 files/ja/tools/index.html create mode 100644 files/ja/tools/index/index.html create mode 100644 files/ja/tools/json_viewer/index.html create mode 100644 files/ja/tools/keyboard_shortcuts/index.html create mode 100644 files/ja/tools/measure_a_portion_of_the_page/index.html create mode 100644 files/ja/tools/memory/aggregate_view/index.html create mode 100644 files/ja/tools/memory/basic_operations/index.html create mode 100644 files/ja/tools/memory/comparing_heap_snapshots/index.html create mode 100644 files/ja/tools/memory/dom_allocation_example/index.html create mode 100644 files/ja/tools/memory/dominators/index.html create mode 100644 files/ja/tools/memory/dominators_view/index.html create mode 100644 files/ja/tools/memory/index.html create mode 100644 files/ja/tools/memory/monster_example/index.html create mode 100644 files/ja/tools/memory/tree_map_view/index.html create mode 100644 files/ja/tools/migrating_from_firebug/index.html create mode 100644 files/ja/tools/network_monitor/index.html create mode 100644 files/ja/tools/network_monitor/performance_analysis/index.html create mode 100644 files/ja/tools/network_monitor/recording/index.html create mode 100644 files/ja/tools/network_monitor/request_details/index.html create mode 100644 files/ja/tools/network_monitor/request_list/index.html create mode 100644 files/ja/tools/network_monitor/throttling/index.html create mode 100644 files/ja/tools/network_monitor/toolbar/index.html create mode 100644 files/ja/tools/page_inspector/3-pane_mode/index.html create mode 100644 files/ja/tools/page_inspector/3d_view/index.html create mode 100644 files/ja/tools/page_inspector/how_to/edit_css_filters/index.html create mode 100644 files/ja/tools/page_inspector/how_to/edit_css_shapes/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_and_edit_html/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_event_listeners/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_flexbox_layouts/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/ja/tools/page_inspector/how_to/index.html create mode 100644 files/ja/tools/page_inspector/how_to/inspect_and_select_colors/index.html create mode 100644 files/ja/tools/page_inspector/how_to/open_the_inspector/index.html create mode 100644 files/ja/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html create mode 100644 files/ja/tools/page_inspector/how_to/select_an_element/index.html create mode 100644 files/ja/tools/page_inspector/how_to/select_and_highlight_elements/index.html create mode 100644 files/ja/tools/page_inspector/how_to/use_the_inspector_api/index.html create mode 100644 files/ja/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html create mode 100644 files/ja/tools/page_inspector/how_to/view_background_images/index.html create mode 100644 files/ja/tools/page_inspector/how_to/view_fonts/index.html create mode 100644 files/ja/tools/page_inspector/how_to/visualize_transforms/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/index.html create mode 100644 files/ja/tools/page_inspector/html_panel/index.html create mode 100644 files/ja/tools/page_inspector/index.html create mode 100644 files/ja/tools/page_inspector/keyboard_shortcuts/index.html create mode 100644 files/ja/tools/page_inspector/style_panel/index.html create mode 100644 files/ja/tools/page_inspector/ui_tour/index.html create mode 100644 files/ja/tools/paint_flashing_tool/index.html create mode 100644 files/ja/tools/performance/allocations/index.html create mode 100644 files/ja/tools/performance/call_tree/index.html create mode 100644 files/ja/tools/performance/examples/index.html create mode 100644 files/ja/tools/performance/examples/sorting_algorithms_comparison/index.html create mode 100644 files/ja/tools/performance/flame_chart/index.html create mode 100644 files/ja/tools/performance/frame_rate/index.html create mode 100644 files/ja/tools/performance/how_to/index.html create mode 100644 files/ja/tools/performance/index.html create mode 100644 files/ja/tools/performance/profiler_walkthrough/index.html create mode 100644 files/ja/tools/performance/scenarios/animating_css_properties/index.html create mode 100644 files/ja/tools/performance/scenarios/index.html create mode 100644 files/ja/tools/performance/scenarios/intensive_javascript/index.html create mode 100644 files/ja/tools/performance/ui_tour/index.html create mode 100644 files/ja/tools/performance/waterfall/index.html create mode 100644 files/ja/tools/profiler/index.html create mode 100644 files/ja/tools/release_notes/index.html create mode 100644 files/ja/tools/remote_debugging/chrome_desktop/index.html create mode 100644 files/ja/tools/remote_debugging/debugging_firefox_desktop/index.html create mode 100644 files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html create mode 100644 files/ja/tools/remote_debugging/firefox_for_android/index.html create mode 100644 files/ja/tools/remote_debugging/index.html create mode 100644 files/ja/tools/remote_debugging/thunderbird/index.html create mode 100644 files/ja/tools/responsive_design_mode/index.html create mode 100644 files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html create mode 100644 files/ja/tools/rulers/index.html create mode 100644 files/ja/tools/scratchpad/index.html create mode 100644 files/ja/tools/settings/index.html create mode 100644 files/ja/tools/shader_editor/index.html create mode 100644 files/ja/tools/storage_inspector/index.html create mode 100644 files/ja/tools/style_editor/index.html create mode 100644 files/ja/tools/taking_screenshots/index.html create mode 100644 files/ja/tools/tips/index.html create mode 100644 files/ja/tools/tools_toolbox/index.html create mode 100644 files/ja/tools/using_the_source_editor/index.html create mode 100644 files/ja/tools/validators/index.html create mode 100644 files/ja/tools/web_audio_editor/index.html create mode 100644 files/ja/tools/web_console/console_messages/index.html create mode 100644 files/ja/tools/web_console/helpers/index.html create mode 100644 files/ja/tools/web_console/index.html create mode 100644 files/ja/tools/web_console/keyboard_shortcuts/index.html create mode 100644 files/ja/tools/web_console/opening_the_web_console/index.html create mode 100644 files/ja/tools/web_console/remoting/index.html create mode 100644 files/ja/tools/web_console/rich_output/index.html create mode 100644 files/ja/tools/web_console/split_console/index.html create mode 100644 files/ja/tools/web_console/the_command_line_interpreter/index.html create mode 100644 files/ja/tools/webide/index.html create mode 100644 files/ja/tools/webide/monitor/index.html create mode 100644 files/ja/tools/webide/opening_webide/index.html create mode 100644 files/ja/tools/webide/setting_up_runtimes/index.html create mode 100644 files/ja/tools/webide/the_runtime_menu/index.html create mode 100644 files/ja/tools/webide/troubleshooting/index.html create mode 100644 files/ja/tools/webide/working_with_cordova_apps_in_webide/index.html create mode 100644 files/ja/tools/working_with_iframes/index.html (limited to 'files/ja/tools') 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' +--- +

{{ToolsSidebar}}

+ +

about:debugging ページは、1 か所からさまざまなデバッグ対象に Firefox の開発ツールを接続できる場所を提供します。現在サポートしているデバッグ対象は、リスタートレスアドオン、タブ、Worker の 3 種類です。

+ +

about:debugging ページを開く

+ +

about:debugging を開く方法がいくつかあります:

+ + + +

about:debugging を開くと左側に、2 つの主要なビュー (アドオンと Worker) を切り替えることができるサイドバーがあります。

+ +

システムアドオンがこのページのリストに表示されるかどうかは、devtools.aboutdebugging.showSystemAddons プリファレンスの設定によって異なります。システムアドオンを表示する必要がある場合は about:config に移動し、この値が true に設定されていることを確認します。

+ +

アドオン

+ +
+

about:debugging のアドオンセクションは、基本的なブートストラップ型拡張機能、Add-on SDK を使用したアドオン、WebExtensions を含む、再起動不要なアドオンのみサポートしています。

+
+ +

このページでは 2 つのことを行えます:

+ + + +

+ +

アドオンデバッガーを接続する

+ +
+

現在、WebExtensions のデバッグにはアドオンデバッガーではなくブラウザーツールボックスを使用することを推奨していますので注意してください。詳しくは WebExtensions のデバッグ をご覧ください。

+
+ +

about:debugging のページに、現在インストールされているリスタートレスアドオンを一覧表示します (注記: このリストには、Firefox のプリインストールアドオンも含まれます)。アドオン名の隣に、[デバッグ] ボタンがあります。

+ +

[デバッグ] ボタンが無効化されている場合は、[アドオンのデバッグを有効化] にチェックを入れてください。

+ +

[デバッグ] をクリックすると、接続を許可するかを尋ねるダイアログボックスが表示されます。[OK] をクリックすると、アドオンデバッガー を新しいウィンドウで表示します。時々、デバッガーのウィンドウが Firefox のメインウィンドウの裏に隠れる場合がありますので注意してください。

+ +

{{EmbedYouTube("tGGcA3bT3VA")}}

+ +

このツールでできることについては、アドオンデバッガー のページをご覧ください。

+ +
+

[アドオンのデバッグを有効化] は、設定項目 devtools.chrome.enabled および devtools.debugger.remote-enabled を有効化することにより動作します。アドオンのデバッグを有効にするため、両方の設定を有効にしなければなりません。チェックボックスにチェックを入れると両方の設定を true に、またチェックを外すと両方の設定を false に変更します。

+ +

about:config で設定項目を変更する、あるいは 開発ツールのオプション で [ブラウザーとアドオンのデバッグを有効] および [リモートデバッガーを有効] にチェックを入れる方法も使用できます。

+
+ +

一時的にアドオンを読み込む

+ +

[一時的なアドオンを読み込む] ボタンを使用して、任意の種類のリスタートレスアドオンを、ディスク上のディレクトリーから一時的に読み込むことができます。ボタンをクリックして、アドオンのファイルがあるディレクトリーに移動してファイルを選択してください。一時的なアドオンが、"一時的な拡張機能" の見出しの下に表示されます。

+ +

アドオンのパッケージングや署名は不要です。Firefox を再起動するまで、アドオンがインストールされた状態になります。

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

XPI からアドオンをインストールする場合と比較して、この方法には以下の大きな利点があります:

+ + + +

一時的なアドオンを更新する

+ +

この方法でアドオンをインストールした場合に、アドオンのファイルを更新するとどうなるのでしょうか?

+ +

Firefox 48 より前

+ + + +
+

Firefox 48 より前のバージョンでは、Firefox を再起動せずに [一時的なアドオンを読み込む] ボタンを押してアドオンを再度読み込むことはできませんので注意してください。

+
+ +

Firefox 48 以降

+ + + +

Firefox 48 から以下のようになります:

+ + + +
+

Firefox 49 より、再読み込みボタンは一時的なアドオンに限り使用できますので注意してください。他のアドオンでは無効になります。

+
+ +

タブ

+ +

Firefox 49 より、about:debugging で タブ ページを使用できます。これは現在の Firefox のインスタンスで開いている、デバッグ可能なすべてのタブを一覧表示します。

+ +

+ +

それぞれの項目の隣に、デバッグ ボタンがあります。ボタンをクリックするとそのタブに特化したツールボックスが開き、タブの内容をデバッグできます。

+ +

+ +
+

この機能は、デスクトップ版のタブのデバッグで即座に有用なものではありません。すでに十分なほど簡単に、タブをデバッグするためのツールボックスを開くことができます。一方、リモートデバッグのサポートを始めるために about:debugging を使うときはとても有用であり、またこのページは、モバイルデバイスのブラウザーやシミュレーターなどでデバッグが可能なタブを表示します。この作業の最新状況については {{bug(1212802)}} をご覧ください。

+
+ +

Worker

+ +

Worker ページでは、Worker を以下のようにカテゴライズして表示します:

+ + + +

それぞれの Worker に開発ツールを接続する、および Service Worker にプッシュ通知を送ることができます。

+ +

+ +

Service Worker の状態

+ +

Firefox 52 より Service Worker のリストで、Service Worker の ライフサイクル における状態を表示します。以下の 3 種類の状態に分類します:

+ + + +

+ +
+

この章では https://serviceworke.rs/push-simple/ にある、シンプルな Service Worker のデモを使用しています。

+
+ +

Worker をデバッグする

+ +

すでに Service Worker が実行中である場合は、Worker の隣に [デバッグ] ボタンおよび [プッシュ] ボタンがあります。Worker が未実行である場合は、[開始] ボタン 1 つだけがあります。ボタンをクリックすると Service Worker が開始します。

+ +

[デバッグ] ボタンを押すと、JavaScript デバッガーとコンソールを Worker に接続します。ブレークポイントを設置する、コードをステップ実行する、変数を確認する、コードを評価するなどの操作ができます:

+ +

{{EmbedYouTube("Z8ax79sHWDU")}}

+ +

Worker を登録する

+ +

最初は、Service Worker や Shared Worker の配下に Worker が表示されていないでしょう。Worker を登録すると、リストが更新されます:

+ +

{{EmbedYouTube("wy4kyWFhFF4")}}

+ +
+

Firefox 47 より前のバージョンでは、Service Worker が実際に動作したときにのみ表示します。

+
+ +

Service Worker の登録を解除する

+ +
+

Firefox 48 の新機能

+
+ +

Firefox 48 より、登録済みの Service Worker の隣に [登録解除] という名称のリンクがあります:

+ +

+ +

リンクをクリックすると、Service Worker の登録を解除します。

+ +

Service Worker に Push イベントを送る

+ +
+

about:debugging での Push イベント送信は、Firefox 47 の新機能です。

+
+ +

プッシュ通知をデバッグするには、PushEvent のリスナーにブレークポイントを設定してください。ただし、プッシュ通知のデバッグはサーバーが不要であり、ローカルで実施できます。[プッシュ] ボタンをクリックすると、Service Worker に Push イベントを送信できます:

+ +

{{EmbedYouTube("62SkLyA-Zno")}}

+ +

互換性がない Service Worker

+ +
+

Firefox 49 より、現在のブラウザーの設定に対して互換性がないため使用やデバッグが行えない Service Worker について、Worker ページの Service Worker セクションで警告メッセージを表示します。

+ +

+
+ +

Service Worker は、いくつかの理由で使用できない場合があります:

+ + 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 +--- +
{{ToolsSidebar}}
+ +

アクセシビリティインスペクターは、アクセシビリティツリーによって現在のページで支援技術に公開される重要な情報へアクセスする手段を提供して、欠けている情報やほかに注意が必要なことを確認できます。この記事では、アクセシビリティインスペクターの主な機能や使用方法を説明します。

+ +

アクセシビリティの (とても) 簡単なガイド

+ +

アクセシビリティは、可能な限り多くの人々があなたのウェブサイトを利用できるようにするための慣習です。これは利用者の障がいや、使用する端末・ネットワーク速度・地理的な位置といった個人の状況によって情報へアクセスできない状態にしないように、最善を尽くすことです。

+ +

ここでは主に、視覚障がいを持つ人々に情報を提供すること (これはウェブブラウザーで使用できる accessibility API で実現します) について扱います。それは、あなたのページでさまざまな要素がどのような役割を持つかという情報を提供します (例えば単純なテキスト、ボタン、リンク、フォーム要素など)。

+ +

セマンティック DOM 要素はデフォルトで、その用途を示唆する役割が割り当てられています。しかし、時には複雑な独自のコントロールを作成するためにセマンティックではないマークアップ (例えば {{htmlelement("div")}}) を使用しなければならず、これは用途を反映するデフォルトの役割を持っていません。このような状況では、自身の役割を与えるために WAI-ARIA ロール属性を使用できます。

+ +

ブラウザーの accessibility API によって公開される役割やほかの情報は、アクセシビリティツリーと呼ばれる階層構造で提供されます。これは DOM ツリーに少し似ていますが、含まれる要素一式がより制限されており、またツリーが持つ情報も若干異なっています。

+ +

スクリーンリーダーなどの支援技術は、ウェブページに何があるかを見つけるためにこの情報を使用して、ユーザーにそれが何であるかを伝えて、ページと対話できるようにします。開発ツールのアクセシビリティインスペクターもこの情報を使用して、価値があるアクセシビリティのデバッグ機能を提供します。

+ +

アクセシビリティインスペクターにアクセスする

+ +

アクセシビリティインスペクター (Firefox 61 から使用可能) は、デフォルトで開発ツールに表示されていません。有効化するには開発ツールの設定 (F1 を押下するか、"三点リーダー" メニューで 設定 を選択する) を開いて、標準の開発ツール の アクセシビリティ チェックボックスにチェックを入れてください。これにより開発ツールに アクセシビリティ タブが現れます。タブをクリックすると、アクセシビリティパネルを表示します:

+ +

Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features

+ +

初期状態では開発ツールのアクセシビリティ機能を無効にしており (別のブラウザータブですでに有効にしている場合や、スクリーンリーダーのユーザーやテスターであるなどの理由で Firefox のアクセシビリティエンジンをすでに開始している場合を除きます)。これは、アクセシビリティ機能が有効であるときにバックグラウンドでアクセシビリティエンジンを実行するためです。エンジンを実行すると、パフォーマンスが低下してメモリ消費が増えます。それにより、メモリー や パフォーマンス といったほかのパネルの測定を妨げたり、ブラウザー全体のパフォーマンスが低下したりします。このため、特に使用しないときはアクセシビリティ機能を無効にしておくべきです。

+ +

[アクセシビリティ機能を有効にする] ボタンを押すと、アクセシビリティ機能を有効にします。

+ +

パネルの内容が読み込まれたら、左上にある [アクセシビリティ機能を無効にする] ボタンを押すと再び無効にできます。ただし、スクリーンリーダーを使用するためにアクセシビリティエンジンがすでに動作していた場合は除きます。この場合はボタンが使用できません。

+ +
+

注記: 複数のタブでアクセシビリティ機能を使用している場合は、あるタブで無効にするとすべてのタブで無効になります。

+
+ +

アクセシビリティパネルの機能

+ +

アクセシビリティパネルを有効にすると以下のようになります:

+ +

Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features

+ +

左側に、現在のページのアクセシビリティツリー内のすべてのアイテムを表す樹形図があります。入れ子の子孫を持つアイテムにはクリックして子孫を表示できる矢印がありますので、階層の深い部分へ移動できます。それぞれのアイテムで、2 つのプロパティを示します:

+ + + +

右側には、選択中のアイテムに関する詳細情報を表示します。ここには以下のプロパティを表示します:

+ + + +
+

注記: 公開される情報は、すべてのプラットフォームで同じです。インスペクターはプラットフォームのアクセシビリティ層の情報ではなく、Gecko のアクセシビリティツリーを公開します。

+
+ +

キーボード操作

+ +

アクセシビリティ タブは、キーボードで操作可能です:

+ + + + + +

アクセシビリティ機能を有効にすると、開発ツールでいくつかの有用な追加機能を利用できます。ここでは、それらを詳しく説明します:

+ +

コンテキストメニューの項目

+ +

ウェブページで UI を右クリックまたは Ctrl + クリックしたときの通常のコンテキストメニューと、インスペクターの HTML ペインで DOM 要素を右クリックまたは Ctrl + クリックしたときのコンテキストメニューの両方に、項目が追加されます:

+ +

context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties

+ +

context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties

+ +

コンテキストメニューの [アクセシビリティプロパティを調査]/[アクセシビリティプロパティを表示] を選択すると、対応するアクセシビリティツリーのアイテムやプロパティを表示するために、アクセシビリティ タブが直ちに開きます。

+ +
+

注記: 一部の DOM 要素はアクセシビリティプロパティがありません。このような場合は [アクセシビリティプロパティを調査]/[アクセシビリティプロパティを表示] のメニュー項目がグレーアウトします。

+
+ +

UI アイテムのハイライト表示

+ +

アクセシビリティタブでアクセシビリティアイテムにマウスポインターを載せると、可能であれば関連する UI アイテムで半透明のハイライト表示を行います。小さな情報バーに、アイテムの役割や名前を表示します。これは、アクセシビリティツリーのアイテムが実際のページでどの UI アイテムに関連しているかを判断するのに役立ちます。

+ +

以下の例では画像がハイライト表示されており、役割 "graphic" と名前 "Road, Asphalt, Sky, Clouds, Fall" を上の情報バーに表示していることがわかります。

+ +

+ +

カラーコントラスト

+ +

コントラスト比が十分でない場合、色盲などの視覚障害を持つ読者はテキストを読み取ることができないため、コントラスト比の情報は、ウェブサイトのカラーパレットを設計するときに特に便利です。Web コンテンツアクセシビリティガイドライン (WCAG) 2.0 では、Web ページ上の小さなテキストの前景色と背景色との最小コントラスト比として 4.5:1 を定義しています。例えば：

+ +

+ +

上記の画像の色のコントラストは 2.77 であり、読みやすいようにコントラストが不十分である可能性があります。コントラストが許容されるコントラスト比を満たしていないことを示す警告記号に注目してください。それを以下と比較してください：

+ +

+ +

この例では、コントラストは 12.63 です。今回は AAA とチェックマークが緑色で表示され、テキストのコントラスト比が 7:1 以上であることを示しています。つまり、コントラストの強化基準、またはレベル AAA を満たしています。

+ +

 

+ +

アクセシビリティピッカー

+ +

インスペクターの HTML ペインピッカー と同様に、アクセシビリティタブのピッカーボタンを押すと現在のページで UI アイテムを選択できます。そして、アクセシビリティツリーで対応するオブジェクトをハイライト表示します。

+ +

アクセシビリティタブのピッカーは、以下のようにインスペクターの HTML ペインピッカーとは外見が若干異なります:

+ +

highlighted dom inspector picker button, with a tooltip saying Pick an element from the page

+ +

highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page

+ +

"オブジェクトを選択" するとアクセシビリティツリーでアクセス可能なオブジェクトをハイライト表示して、ピッカーが非アクティブ化します。ただし Shift キーを押しながら "オブジェクトを選択" すると、ツリーでアクセス可能なオブジェクトを "プレビュー" できます (右ペインにオブジェクトのプロパティを表示します) が、Shift キーを離すまではいくつでも選択し続ける (ピッカーがキャンセルされません) ことができます。

+ +

ピッカーがアクティブであるとき、ピッカーボタンを再度押すか Esc キーを押すと、ピッカーを非アクティブ化できます。

+ +

典型的な使用方法

+ +

アクセシビリティインスペクターは、アクセシビリティの問題を一目で見抜くためにとても役に立ちます。第一に、適切な同等文字列がないアイテム (例えば alt 文字列がない画像や、name プロパティが null で適切なラベルがないフォーム要素) を調査できます。

+ +

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

+ +

また、セマンティクスの検証でも役に立ちます。[アクセシビリティオブジェクトを調査] コンテキストメニュー項目を使用して、アイテムに正しい役割 (例えばボタンが実際にボタンの役割、リンクが実際にリンクの役割を持つか) を設定しているかをすばやく確認できます。

+ +

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

+ +

関連情報

+ + 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 +--- +
{{ToolsSidebar}}
+ +

Web DeveloperメニューはFirefoxに組み込まれている開発ツールにアクセスする主な方法です。 OS XとLinuxでは、これは「ツール」メニューの下にあります。

+ +

+ +

Windows 7では「Firefox」メニューの下にあります。

+ +

+ +

メニューは3つのセクションに分割されています：

+ + 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 +--- +
{{ToolsSidebar}}
+ +

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

+ +
+
WebSocket Monitor
+
WebSocket接続でやりとりされるデータを調べます。
+
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 +--- +

{{ToolsSidebar}}

+ +

ブラウザーコンソールは Web コンソール に似ていますが、ひとつのコンテンツタブではなくブラウザー全体に適用されます。

+ +

よって Web コンソールと同じ種類の情報 (ネットワーク要求、JavaScript、CSS、セキュリティのエラーや警告、および JavaScript コードから明示的に出力するメッセージ) を記録します。しかしひとつのコンテンツタブの情報を記録するのではなく、すべてのコンテンツタブ、アドオン、ブラウザー自体のコードの情報を記録します。

+ +

アドオンやブラウザーのコードに対して、通常の ツールボックス に含まれる他の ウェブ開発ツールも使用したい場合は、ブラウザーツールボックス の使用を検討してください。

+ +

同様に、ブラウザーコンソールで JavaScript の式を実行できます。ただし Web コンソールがページの window スコープ内でコードを実行するのに対して、ブラウザーコンソールはブラウザーの chrome ウィンドウのスコープでコードを実行します。これは gBrowser グローバル変数を使用するすべてのブラウザータブと対話できるということであり、またブラウザーのユーザインターフェイスを定義するために使用される XUL との対話も可能です。

+ +
+

注意: ブラウザーコンソールの (JavaScript の式を実行するための) コマンドラインは、デフォルトで無効です。有効化するには about:config で設定項目 devtools.chrome.enabled を true にするか、開発ツールのオプション で "ブラウザーとアドオンのデバッガーを有効" (Firefox 40 以降) / "ブラウザーデバッガーを有効" (Firefox 38.0.5 以前) を有効にしてください。

+
+ +

ブラウザーコンソールを開く

+ +

ブラウザーコンソールは 2 種類の方法で開くことができます:

+ +
    +
  1. メニューから: Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) の Web 開発サブメニューで "ブラウザーコンソール" を選択します。
    2. +
  2. キーボードで: Ctrl+Shift+J (Mac では Cmd+Shift+J) を押下します。
    3. +
+ +

オプション -jsconsole を渡してコマンドラインから Firefox を起動する方法でも、ブラウザーコンソールを開始できます:

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

ブラウザーコンソールは以下のようなものです:

+ +

+ +

ブラウザーコンソールの外見や動作は、Web コンソールととても似ていることがわかるでしょう:

+ + + +

ブラウザーコンソールのロギング

+ +

ブラウザーコンソールが記録するメッセージの種類は、Web コンソールが記録するものと同じです:

+ + + +

ただし、こちらのメッセージの発信元は以下のとおりです:

+ + + +

アドオン発のメッセージ

+ +

ブラウザーコンソールは、すべての Firefox アドオンが出力したメッセージを表示します。

+ +

Console.jsm

+ +

従来型あるいはブートストラップ型のアドオンから console API を使用するために、Console モジュールから取得します。

+ +

Console.jsm からエクスポートされるシンボルは "console" です。以下に、API にアクセスしてブラウザーコンソールにメッセージを出力する方法の例を示します。

+ +
Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console
+ +

詳しくはこちら:

+ + + +

HUDService

+ +

HUDService でもブラウザーコンソールにアクセスできます。モジュールは Mozilla DXR で確認できます。ブラウザーコンソールだけでなく Web コンソールにもアクセスできることがわかります。

+ +

以下は、ブラウザーコンソールの内容を消去する方法の例です:

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

ブラウザーコンソールの content ドキュメントにアクセスしたい場合も、HUDService で実現できます。以下の例では、ブラウザーコンソールの "消去" ボタンにマウスポインターを載せたときに、コンソールをクリアするようにしています:

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

特典機能

+ +

Add-on SDK によるアドオンでは、console API が自動的に利用可能になります。ウィジェットをクリックしたときにエラーを出力するアドオンの例を示します:

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

このコードを XPI ファイルとして構築して、ブラウザーコンソールを開き、そして XPI ファイルを Firefox で開いてインストールすると、アドオンバーに "Error!" というラベルのウィジェットが現れます:

+ +

アイコンをクリックしましょう。すると、ブラウザーコンソールで以下のような出力を確認できるでしょう:

+ +

+ +

Add-on SDK ベースのアドオンに限りメッセージの先頭にアドオンの名称 ("log-error") が付くため、"フィルター出力" 検索ボックスを使用してこのアドオン由来のメッセージを見つけるのが容易になります。デフォルトではエラーメッセージのみコンソールに記録されますが、ブラウザーの設定でこれを変更できます。

+ +

ブラウザーコンソールのコマンドライン

+ +
+

ブラウザーコンソールのコマンドラインは、デフォルトで無効です。有効化するには about:config で設定項目 devtools.chrome.enabled を true にするか、開発ツールのオプションで "ブラウザデバッガーを有効" を有効にしてください。

+
+ +

Web コンソールと同様に、コマンドラインインタープリターでリアルタイムに JavaScript 式の評価が可能です:また Web コンソールのコマンドラインと同様に、こちらのコマンドラインもオートコンプリート、履歴、さまざまなキーボードショートカットや支援コマンドをサポートしています。コマンドの実行結果がオブジェクトである場合は、オブジェクトをクリックして詳細を確認できます。

+ +

ただし Web コンソールは接続された content window のスコープでコードを実行するのに対して、ブラウザーコンソールはブラウザーの chrome window のスコープでコードを実行します。これは window を評価することで確認できます:

+ +

+ +

これは、ブラウザーを制御できるということです: タブやウィンドウを開くまたは閉じる、開いているコンテンツを変更する、XUL 要素の生成、変更、削除によりブラウザーの UI の変更が可能です。

+ +

ブラウザーの制御

+ +

コマンドラインインタープリターは gBrowser グローバル変数を通して、tabbrowser オブジェクトにアクセスでき、またコマンドラインを通してブラウザーを制御することが可能です。以下のコードをブラウザーコンソールのコマンドラインで実行してみましょう (ブラウザーコンソールへ複数行送る場合は Shift+Enter を使用することを忘れずに):

+ +
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/";
+ +

これは現在選択しているタブの、新しいページを食べてしまう load イベントのリスナーを追加してから、新しいページを読み込みます。

+ +

ブラウザー UI の変更

+ +

グローバルの window オブジェクトはブラウザーの chrome window であるため、ブラウザーのユーザーインターフェイスを変更できます。Windows では、以下のコードでブラウザーのメインメニューに新たなアイテムを追加します:

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

OS X では、前出のコードに似ている以下のコードで "ツール" メニューに新たなアイテムを追加します:

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

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

{{ToolsSidebar}}

+ +

ブラウザーツールボックスは通常の ツールボックス とは異なり、ウェブページだけでなくアドオンやブラウザー自体の JavaScript をデバッグすることができます。ブラウザーツールボックスのコンテキストは単一のタブ内のページではなく、ブラウザー全体になります。

+ +
+

注記: リスタートレスまたは SDK ベースのアドオンをデバッグしたい場合は、アドオンデバッガー を試してください。それら以外のアドオンでは、ブラウザーツールボックスを使用してください。

+
+ +

ブラウザーツールボックスの有効化

+ +
+

ブラウザーツールボックスはデフォルトで無効です。有効化するには、"ブラウザーとアドオンのデバッガを有効" および "リモートデバッガを有効" にチェックを入れなければなりません。

+ +

開発ツールの オプション を開いて、"詳細な設定" で "ブラウザーとアドオンのデバッガーを有効" および "リモートデバッガーを有効" にチェックを入れてください。

+ +

Developer Tools Settings

+
+ +

ブラウザーツールボックスを開く

+ +

メニューボタン new fx menu をクリックして、メニュー項目 "開発ツール"、"ブラウザーツールボックス" の順に選択すると、ブラウザーツールボックスが開きます。

+ +

Firefox 39 より、Ctrl + Alt +Shift + I のキーコンビネーション (Mac では Cmd + Opt +Shift + I) でも開くことができます。

+ +

ブラウザーツールボックスを開くと、以下のようなダイアログを表示します (これは設定項目 devtools.debugger.prompt-connection を false にすることで無効化できます):

+ +

OK をクリックすると、ブラウザーツールボックスを個別のウィンドウで表示します:

+ +

ブラウザーの chrome ウィンドウの調査、またブラウザー自体および実行中のアドオンが読み込んでいるすべての JavaScript ファイルの確認とデバッグが可能です。また、以下の開発ツールへ全面的にアクセスできます:

+ + + +

chrome: および about: のページは一般のコンテンツページと同様に、通常の デバッガー でデバッグできます。

+ +

対象ドキュメントを決める

+ +

通常のツールボックスでは、ドキュメント内の特定の iframe を対象にすることができるボタンがツールバーにあります。Firefox 40 よりブラウザーツールボックスにも同じ外見のボタンがありますが、こちらは iframe だけでなくトップレベルの chrome ウィンドウや content ウィンドウもリストに含まれています。これにより content タブだけでなく個々の chrome ウィンドウやポップアップ内のドキュメントも調査できます。

+ +

例えばブラウザーウィンドウが 2 つあり、そのうちひとつに content タブが 1 つ、もうひとつのウィンドウに content タブが 2 つある場合は、フレーム選択のリストが以下のようになります:

+ +

+ +

ポップアップをデバッグする

+ +

ポップアップをデバッグするのは難しいです。ポップアップを外に出すとすぐにブラウザがそれらを隠すからです。この動作を無効にする方法があります。ツールボックスメニューをクリックし、ポップアップの自動非表示を無効にするを選択します。

+ +

+ +

これでポップアップを開くと、Esc キーを押すまで開いたままになります。 Inspector のノードピッカーを使用してそのパネルを選択し、その内容を調べて変更することができます。

+ +

{{EmbedYouTube("6edXcunw4jM")}}

+ +

同じテクニックを使って、アドオンによって作成されたポップアップをデバッグできます。

+ +
+

メモ: この変更はブラウザを再起動しても永続的ではありません。ブラウザのツールボックスを閉じると、設定はクリアされます。

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

{{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.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 +--- +
{{ToolsSidebar}}
+ +

Debugger.Object

+ +

Debugger.Object インスタンスはデバッグ対象のオブジェクトを表し、その参照オブジェクトを検査および変更するためのリフレクション指向のメソッドを提供します。参照先のプロパティは、Debugger.Object インスタンスのプロパティとして直接表示されません。デバッガはDebugger.Object.prototype.getOwnPropertyDescriptor や Debugger.Object.prototype.defineProperty のようなメソッドを介してのみデバッガにアクセスし、デバッガが誤ってリファレンスの getter と setter を呼び出さないようにします。

+ +

SpiderMonkey は、特定の Debugger インスタンスに提示する各デバッグオブジェクトに対して、Debugger.Object インスタンスを1つだけ作成します。つまり、デバッガが2つの異なるルートを介して同じオブジェクトに遭遇した場合 (おそらく2つの関数が同じオブジェクトで呼び出される)、SpiderMonkey は毎回同じ Debugger.Object インスタンスをデバッガに提示します。これは、デバッガが == 演算子を使用して、2つの Debugger.Object インスタンスが同じデバッグオブジェクトを参照していることを認識し、Debugger.Object インスタンスに独自のプロパティを配置して特定のデバッグオブジェクトに関するメタデータを格納できることを意味します。

+ +

異なるコンパートメントの JavaScript コードは、同じオブジェクトの異なるビューを持つことができます。たとえば Firefox では、特権区画内のコードは、コンテンツコードによってそのオブジェクトのプロパティに対して行われた再定義または拡張を伴わずにコンテンツ DOM 要素オブジェクトを認識します。デバッガのコードがデバッグ対象と同じように各オブジェクトを確実に見るために、各 Debugger.Object インスタンスは特定のコンパートメントから見えるようにその参照を表示します。この「表示コンパートメント」は、デバッガが指示対象をどのようにして来るかに合わせて選択されます。結果として、単一の Debugger インスタンスは実際には複数の Debugger.Object インスタンスを持つことができます。つまり、参照先が表示される各コンパートメントに1つです。

+ +

複数の Debugger インスタンスが同じコードをデバッグしている場合、各 Debugger は指定されたオブジェクトに対して個別の Debugger.Object インスタンスを取得します。これにより、各 Debugger インスタンスを使用するコードは、他のデバッガとの干渉を心配することなく、独自の Debugger.Object インスタンスに任意のプロパティを配置できます。

+ +

ほとんどの Debugger.Object インスタンスは、デバッガの動作と状態をデバッガに公開するプロセスで SpiderMonkey によって作成されますが、デバッガはDebugger.Object.prototype.makeDebuggeeValue を使用して、指定されたデバッグ対象オブジェクトの Debugger.Object インスタンスを作成するか、Debugger.Object.prototype.copy および Debugger.Object.prototype.create を使用して、デバッグ区画に新しいオブジェクトを作成します。

+ +

Debugger.Object インスタンスはガベージコレクタから参照先を保護します。Debugger.Object インスタンスが生存している限り、指示対象はそのまま残ります。これは、ガベージコレクションが Debugger.Object インスタンスに目に見える影響を与えないことを意味します。

+ +

Debugger.Object プロトタイプのAccessorプロパティ

+ +

Debugger.Object インスタンスは、プロトタイプから次のアクセサプロパティを継承します。

+ +
+
proto
+
+

参照先のプロトタイプ (新しい Debugger.Object インスタンス)、またはプロトタイプがない場合は null

+
+
class
+
+

指示対象の ECMAScript [[Class]] を表す文字列。

+
+
callable
+
+

参照先が呼び出し可能なオブジェクト (関数や関数プロキシなど) であれば true。そうでなければ false。

+
+
name
+
+

参照先の名前 (名前付き関数の場合)。指示対象が無名関数か全く関数でない場合、これは undefined です。

+ +

このアクセサは、
+ 関数が (関数を囲みスコープ内の名前にバインドする) 関数宣言をインスタンス化した結果であるか、(関数を本体の内部でのみ名前にバインドする) 関数式を評価しているかにかかわらず、ソースコード内で function キーワードの後に現れた名前を返します。

+
+
displayName
+
+

指示対象が表示名を持つ関数であれば、指示対象の表示名。参照先が関数でない場合、または表示名がない場合は、これは undefined です。

+ +

関数に指定された名前がある場合、その表示名は指定された名前と同じです。この場合、displayName と name プロパティは等しくなります。

+ +

関数に名前がない場合、SpiderMonkey はそのコンテキストに応じて適切な名前を推測しようとします。例えば：

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

表示名は適切な JavaScript 識別子、または適切な式でなくてもよいことに注意してください。関数が特定の変数またはプロパティの値としてすぐに割り当てられない場合でも役立つ名前を見つけようとします。したがって、a の中で定義された b を参照するために a/b を使用し、a に割り当てられた式のどこかで発生する関数を参照するために a< を使用します。例えば：

+ + 
function h() {
+  var i = function() {};    // display name: h/i
+  f(function () {});        // display name: h/<
+}
+
+var s = f(function () {});  // display name: s<
+
+
parameterNames
+
+

指示対象がデバッグ関数の場合、そのパラメータの名前を文字列の配列として指定します。指示対象がデバッグ機能でないか、まったく機能していない場合、これは undefined です。

+ +

指示対象がパラメータ名を使用できないホスト関数である場合は、パラメータごとに1つの要素を持つ配列を返します。それぞれの配列は undefined です。

+ +

参照先が関数プロキシの場合は、空の配列を返します。

+ +

指示対象が非構造化パラメータを使用する場合、配列の要素はパラメータの構造を反映します。たとえば、参照先が次のように宣言された関数である場合、

+ + 
function f(a, [b, c], {d, e:f}) { ... }
+ +

この Debugger.Object インスタンスの parameterNames プロパティの値は次のようになります。

+ + 
["a", ["b", "c"], {d:"d", e:"f"}]
+
+
script
+
+

参照先がデバッグコードである関数の場合、Debugger.Script インスタンスとしての、その関数のスクリプトです。参照先が関数プロキシであるかデバッグコードでない場合、これは undefined です。

+
+
environment
+
+

参照先がデバッグコードである関数である場合、作成時にその関数を囲む字句環境を表す Debugger.Environment インスタンス。参照先が関数プロキシであるかデバッグコードでない場合、これは undefined です。

+
+
proxyHandler
+
+

参照先がデバッグコードによって割り当てられたハンドラオブジェクトのプロキシである場合、これはハンドラオブジェクトです。プロキシのプロパティのアクセスを実装するためにメソッドが呼び出されるオブジェクトです。指示対象が、デバッグコードによってハンドラオブジェクトが割り当てられたプロキシでない場合、これは null です。

+
+
proxyCallTrap
+
+

参照先がデバッグコードによってハンドラオブジェクトが割り当てられた関数プロキシの場合、これはコールトラップ関数です。これは関数プロキシが呼び出されたときに呼び出される関数です。指示対象が、デバッグコードによってハンドラオブジェクトが割り当てられた関数プロキシでない場合、これは null です。

+
+
proxyConstructTrap
+
+

対象オブジェクトがデバッグコードによって割り当てられた関数プロキシである場合、その構築トラップ関数、つまり関数プロキシが new の式を介して呼び出されるときに呼び出される関数。指示対象が、デバッグコードによってハンドラオブジェクトが割り当てられた関数プロキシでない場合、これは null です。

+
+
global
+
+

参照先が割り当てられたスコープのグローバルオブジェクトを参照する Debugger.Object インスタンス。これは、クロスコンパートメントラッパーをアンラップしません。参照先がラッパーである場合、結果はラッパーのグローバルであり、ラップされたオブジェクトのグローバルではありません。結果はラッパーを介さずにグローバルに直接参照されます。

+
+
hostAnnotations
+
+

参照先に関する追加のメタデータを提供する JavaScript オブジェクト。存在しない場合は null。メタデータオブジェクトは、この Debugger.Object インスタンスと同じコンパートメントにあります。同じメタデータオブジェクトが、指定された Debugger.Object インスタンスに対して毎回返されます。

+ +

典型的な JavaScript 組み込みは、アプリケーション固有の機能をスクリプトに公開するための「ホストオブジェクト」を提供します。hostAnnotations アクセサは、デバッガが関心を持っている可能性がある参照先に関する追加情報の埋め込みを調べます。返されるオブジェクトのプロパティの意味は、埋め込みまでです。 たとえば、Web ブラウザは、グローバルオブジェクトのホスト注釈を提供して、トップレベルのウィンドウ、iframe、および内部 JavaScript スコープを区別することがあります。

+ +

規約では、ホストアノテーションオブジェクトに文字列値の "type" プロパティがあり、これはオブジェクトのクラスと一緒に、参照先がどのようなものであるかを示します。ホストアノテーションオブジェクトの他のプロパティは、型に応じて詳細を提供します。たとえば、Firefox では、JavaScript モジュールのグローバルオブジェクトのメタデータオブジェクトは次のようになります。

+ + 
{ "type":"jsm", "uri":"resource:://gre/modules/XPCOMUtils.jsm" }
+ +

Firefox はそのホストオブジェクトに対して [DebuggerHostAnnotationsForFirefox annotations] を提供します。

+
+
+ +

Debugger.Object プロトタイプの関数プロパティ

+ +

以下で説明する関数は、この値を使用して Debugger.Object インスタンスを参照する場合にのみ呼び出すことができます。他の種類のオブジェクトのメソッドとして使用することはできません。 この説明では、「この Debugger.Object インスタンスの参照先」を意味するために「参照先」が使用されています。

+ +

他に指定されていない限り、これらのメソッドは呼び出し関数ではありません。呼び出しによってデバッグコードが実行されると (ハンドラがデバッグコードであるアクセサプロパティを取得または設定するため、またはデバッグコードであるトラップを持つプロキシであるため)、コールは Debugger.DebuggeeWouldRun 例外をスローします。

+ +
+
getProperty(name)
+
+

参照先の名前付きプロパティの値を返します。名前がない場合は undefined を返します。名前は文字列でなければなりません。 結果はデバッグ値です。

+
+
setProperty(name,value)
+
+

値が存在しない場合はプロパティを作成します。名前は文字列でなければならず、値はデバッグ値でなければなりません。

+
+
getOwnPropertyDescriptor(name)
+
+

参照先のnameという名前のプロパティのプロパティ記述子を返します。指示対象にそのようなプロパティがない場合は undefined を返します。(この関数は標準の Object.getOwnPropertyDescriptor 関数のように動作しますが、検査対象オブジェクトは暗黙的です。返されたプロパティ記述子は、デバッガのグローバルオブジェクトにスコープされたコードによって割り当てられます
+  (したがって、デバッガのコンパートメントにあります)。そしてその value、get、set プロパティ(存在する場合) は debuggee の値です)。

+
+
getOwnPropertyNames()
+
+

デバッガで Object.getOwnPropertyNames(referent) が呼び出され、その結果がデバッガのグローバルオブジェクトのスコープにコピーされたかのように、すべての参照先のプロパティを指定する文字列の配列を返します。

+
+
defineProperty(name,attributes)
+
+

プロパティディスクリプタ記述子で説明されているように、name という名前の参照先にプロパティを定義します。属性の value、get、および set プロパティはすべてデバッグ対象の値でなければなりません。(この関数は対象オブジェクトが暗黙的で、関数と記述子とは異なるコンパートメントにあることを除いて、Object.defineProperty のように動作します)。

+
+
defineProperties(properties)
+
+

properties によって与えられたプロパティを参照に追加します。(この関数はターゲットオブジェクトが暗黙的であることを除いて、Object.defineProperties のように動作し、properties 引数とは異なるコンパートメントにあります)。

+
+
deleteProperty(name)
+
+

参照の name という名前のプロパティを削除します。プロパティが正常に削除された場合、または参照先にそのようなプロパティがない場合は true を返します。プロパティが設定可能でない場合は false を返します。

+
+
seal()
+
+

レポジトリへのプロパティの追加や削除を防止します。そしてこの Debugger.Object インスタンスを返します。(この関数は標準の Object.seal 関数のように動作しますが、封印されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。

+
+
freeze()
+
+

プロパティが参照に追加されたり参照から削除されたりするのを防ぎ、各プロパティを書き込み不能としてマークします。そしてこの Debugger.Object インスタンスを返します。(この関数は標準の Object.freeze 関数のように動作しますが、封印されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。

+
+
preventExtensions()
+
+

レポジトリにプロパティが追加されないようにします。(この関数は標準の Object.preventExtensions 関数と同じように動作しますが、操作対象は暗黙的で、呼び出し元とは異なるコンパートメントになります)。

+
+
isSealed()
+
+

指示対象が封印されている場合、つまり拡張可能ではなく、すべてのプロパティが設定不可能とマークされている場合に true を返します。(この関数は標準の Object.isSealed 関数と同じように動作しますが、検査されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。

+
+
isFrozen()
+
+

参照先が固定されている場合、つまり拡張可能ではなく、すべてのプロパティが設定不可能で読み取り専用であるとマークされている場合に true を返します。(この関数は標準の Object.isSealed 関数のように動作しますが、検査されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。

+
+
isExtensible()
+
+

参照先が拡張可能である場合、つまり新しい参照先が定義可能な場合は true を返します。(この関数は標準の Object.isExtensible 関数のように動作しますが、検査されるオブジェクトは暗黙的で、呼び出し元とは異なるコンパートメントにあります)。

+
+
copy(value)
+
+

HTML5 の "構造化クローニング" アルゴリズムを適用して、参照オブジェクトのグローバルオブジェクト (したがって参照オブジェクトのコンパートメント) に値のコピーを作成し、そのコピーを参照する Debugger.Object インスタンスを返します。

+ +

これはプリミティブ値をそのまま返します。つまり、Debugger.Object.prototype.copy を「構造化クローニング」アルゴリズムの制限内で、汎用「デバッグ値からデバッグ対象値へ」変換関数として使用できます。

+
+
create(prototype, [properties])
+
+

参照オブジェクトのグローバル (したがって参照オブジェクトのコンパートメント) に新しいオブジェクトを作成し、そのオブジェクトを参照する Debugger.Object を返します。
+ 新しいオブジェクトのプロトタイプは prototype であり、これは Debugger.Object インスタンスでなければなりません。
+ 新しいオブジェクトのプロパティは、プロパティが Debugger.Object.prototype.defineProperties に渡されたかのように、properties によって指定されたもので、新しい Debugger.Object インスタンスが this の値として渡されます。

+
+
makeDebuggeeValue(value)
+
+

デバッグ対象の値を表す debuggee 値を返します。value がプリミティブの場合、そのまま返します。value がオブジェクトの場合、この Debugger.Object の参照先のコンパートメントで適切にラップされたオブジェクトを表す Debugger.Object インスタンスを返します。

+ +

value がオブジェクトの場合は、debuggee グローバルに割り当てられている必要はなく、デバッグ区画にも割り当てられている必要はありません。デバッガが debuggee 値として使用したい任意のオブジェクトにすることができます。

+ +

上で説明したように、各 Debugger.Object インスタンスは、特定のコンパートメントから見たときにその参照を提示します。
+ Debugger.Object がインスタンス化され、オブジェクト o が与えられた場合、d.makeDebuggeeValue(o) 呼び出しは、dの区画内のコードが示すようにoを表す Debugger.Object インスタンスを返します。

+
+
decompile([pretty])
+
+

指示対象がデバッグコードである関数である場合、その結果とその結果の参照関数に相当する関数定義の JavaScript ソースコードを文字列として返します。pretty が存在し、真であれば、インデントされたコードを改行で生成します。 参照先がデバッグコードである関数でない場合は、undefined を返します。

+
+
call(this,argument, ...)
+
指示対象が呼び出し可能である場合は、この値と引数の値を使用して呼び出すことができ、呼び出しがどのように完了したかを示す完了値を返します。これはデバッグ対象の値、あるいはコンストラクタとして参照先を呼び出すには { asConstructor: true } でなければなりません。SpiderMonkey は this の値自体を適切に提供します。各引数はデバッグ対象の値でなければなりません。現存するすべてのハンドラメソッド、ブレークポイント、ウォッチポイントなどは、呼び出し中も有効なままです。参照が呼び出し可能でない場合は、TypeError をスローします。この関数は、呼び出し関数の規則に従います。
+
apply(this,arguments)
+
+

指示対象が呼び出し可能である場合は、与えられたこの値と引数の引数値で呼び出され、呼び出しがどのように完了したかを示す完了値を返します。これはデバッグ対象の値、あるいは関数をコンストラクタとして呼び出すには { asConstructor: true } でなければなりません。SpiderMonkey は this の値自体を適切に提供します。引数は、デバッガの値の配列 (デバッガ内の配列) または空の配列として扱われる null または undefined のいずれかでなければなりません。現存するすべてのハンドラメソッド、ブレークポイント、ウォッチポイントなどは、呼び出し中も有効なままです。参照が呼び出し可能でない場合は、TypeError をスローします。この関数は、呼び出し関数の規則に従います。

+
+
evalInGlobal(code, [options])
+
+

指示対象がグローバルオブジェクトである場合、そのグローバル環境内のコードを評価し、どのように完了したかを記述する補完値を返します。 コードは文字列です。 現存するすべてのハンドラメソッド、ブレークポイント、ウォッチポイントなどは、呼び出し中も有効なままです。 この関数は、呼び出し関数の規則に従います。 参照先がグローバルオブジェクトでない場合は、TypeError 例外をスローします。

+ +

Use Strict ディレクティブが含まれている場合、コードは厳密なモードコードとして解釈されます。

+ +

コードが厳密なモードコードでない場合、変数宣言は参照グローバルオブジェクトに影響を与えます。(ECMAScript 仕様で使用されている用語では、評価コードの実行コンテキストの VariableEnvironment が参照先です)

+ +

options 引数は、Debugger.Frame.prototype.eval の場合と同じです。

+
+
evalInGlobalWithBindings(code,bindings, [options])
+
+

evalInGlobal に似ていますが、変数オブジェクトとして参照先を使用してコードを評価しますが、lexical 環境はオブジェクトバインディングからのバインディングで拡張されています。値が isvalue である namedname というバインディングの各自の enumerable プロパティについては、lexical 環境で、code が namedname で評価され、その値は isvalue である変数をインクルードします。各値はデバッグ値でなければなりません。(これは with 文と似ていません。コードはバインディングオブジェクトに何の影響も与えることなく、導入されたバインディングにアクセス、割り当て、削除することができます)。

+ +

このメソッドを使用すると、デバッガコードは、指定されたデバッグコードで参照可能な一時的なバインディングを導入することができます。また、既存のデバッグ環境を変更することなく、デバッガが保持するデバッグの値を参照できます。

+ +

evalInGlobal と同様に、evalInGlobalWithBindings に渡されたコードが厳密なモードコードでない場合、コードがバインディングに従って拡張された環境で評価されても、それに含まれる宣言はすべて参照対象グローバルオブジェクトに影響を与えます。(ECMAScript 仕様で使用されている条件では、非厳密な評価コードの実行コンテキストの VariableEnvironment が参照先であり、バインディングは評価コードの LexicalEnvironment である新しい宣言環境に表示されます)。

+ +

options 引数は、Debugger.Frame.prototype.eval の場合と同じです。

+
+
asEnvironment()
+
+

参照先がグローバルオブジェクトである場合は、参照先を表す Debugger.Environment インスタンスをコードを評価するための可変環境として返します。参照先がグローバルオブジェクトでない場合は、TypeError をスローします。

+
+
setObjectWatchpoint(handler)(future plan)
+
+

すべての参照先のプロパティにウォッチポイントを設定し、呼び出しハンドラのメソッドでイベントを報告します。この Debugger.Object インスタンスの以前のウォッチポイントハンドラはすべて置き換えられます。handler が null の場合、参照先は監視されなくなります。ハンドラには、以下のメソッドがあります。

+ +
+
add(frame,name,descriptor)
+
+

name という名前のプロパティが referent.Descriptor に追加されました。これは、Debugger.Object.prototype.defineProperty で受け入れられたソートのプロパティ記述子で、新たに追加されたプロパティの属性を与えます。

+
+
delete(frame,name)
+
+

name という名前のプロパティは、参照対象から削除されようとしています。

+
+
change(frame,name,oldDescriptor,newDescriptor)
+
+

参照先の既存の namedname という名前のプロパティは、oldDescriptor によって与えられたものから newDescriptor によって与えられたものに変更されています。このハンドラメソッドはその値以外のプロパティの属性が変更されている場合にのみ呼び出されます。値だけが変更されている場合、SpiderMonkey はハンドラの set メソッドを呼び出します。

+
+
set(frame,oldValue,newValue)
+
+

参照先の name という名前のデータプロパティは、値が oldValue から newValue へ変更されようとしています。

+ +

SpiderMonkey は、成功するデータプロパティへの代入に対してのみこのメソッドを呼び出します。書き込み不可能なデータプロパティへの割り当ては、デバッガに通知することなく失敗します。

+
+
extensionsPrevented(frame)
+
+

オブジェクトは、Object.preventExtensionsの呼び出しにより、拡張不可能になりました

+
+
+ +

すべてのウォッチポイントハンドラメソッドについて：

+ +
    +
  • +

    ハンドラ呼び出しは、this の値としてハンドラオブジェクト自体を受け取ります

    +
    • +
  • +

    Theframe 引数は現在のスタックフレームで、そのコードは報告されるオブジェクトに対して操作を実行しようとしています

    +
    • +
  • +

    メソッドが undefined を返した場合、SpiderMonkey はオブジェクトに対して通知された変更を行い、正常に実行を続行します。メソッドがオブジェクトを返す場合：

    +
    • +
  • +

    オブジェクトに値が true である superseded プロパティがある場合、SpiderMonkey は通知された変更を行いません

    +
    • +
  • +

    オブジェクトに resume プロパティがある場合、その値は再開値として取得され、実行の進行方法を示します (ただし、return 再開値はサポートされていません)

    +
    • +
  • +

    与えられたメソッドがハンドラにない場合、そのソートのイベントは無視されます。ウォッチポイントを設定した後にハンドラにメソッドを追加する、またはハンドラからメソッドを削除することは、対応するイベントのレポートを有効または無効にするために、イベントが発生するたびにwatchpoint consultshandler のプロパティです

    +
    • +
  • +

    ハンドラのメソッドに渡される値はデバッグ値です。 Handlerのメソッドに渡される記述子は、デバッガのコンパートメント内の通常のオブジェクトですが、デバッガの値である記述子の value、get、および set プロパティは例外で、Debugger.Object.prototype.defineProperty によって期待される値の一種です

    +
    • +
  • +

    ウォッチポイントハンドラコールは、クロスコンパートメントなスレッド内コールです。コールはプロパティを変更したスレッドとインハンドラのメソッドのコンパートメント (通常はデバッガのコンパートメントと同じ) で行われます

    +
    • +
+ +

新しいウォッチポイントは、この Debugger.Object インスタンスが属する Debugger インスタンスに属します。Debugger インスタンスを無効にすると、このウォッチポイントは無効になります。

+
+
clearObjectWatchpoint()(future plan)
+
+

指示対象に設定されているオブジェクトウォッチポイントをすべて削除します。

+
+
setPropertyWatchpoint(name,handler)(future plan)
+
+

コール先ハンドラのメソッドでイベントを報告する、参照先のプロパティー (name) にウォッチポイントを設定します。この Debugger.Object インスタンスのこのプロパティの以前のウォッチポイントハンドラが置き換えられます。handler が null の場合、プロパティは監視されなくなります。Handlerは、extensionsPrevented イベントを受け取らない点を除き、 Debugger.Object.prototype.setObjectWatchpoint について説明したとおりです。

+
+
clearPropertyWatchpoint(name)(future plan)
+
+

name という名前の参照先のプロパティに設定されているウォッチポイントをすべて削除します。

+
+
unwrap()
+
+

指示対象がこの Debugger.Object のコンパートメントのラップ解除が許可されているラッパーの場合は、ラップされたオブジェクトを参照する Debugger.Object インスタンスを返します。指示対象のラップを解除できない場合は null を返します。指示対象がラッパーでない場合は、この Debugger.Object インスタンスをそのまま返します。

+
+
unsafeDereference()
+
+

この Debugger.Object インスタンスの参照先を返します。

+ +

対象が内部オブジェクト (HTML5 Window オブジェクトなど) である場合は、対応する外部オブジェクト (HTML5 WindowProxy オブジェクトなど) を返します。これにより、unsafeDereference は、呼び出し関数を使用せずにデバッグコードで直接使用するのに適した値を生成するのに役立ちます。

+ このメソッドは、デバッガコードをデバッグコードから保護するための Debugger.Object インスタンスのメンブレンを貫通し、デバッガコードが Debugger.Object のリフレクション指向のインターフェイスではなく、標準のクロスコンパートメントラッパーを介してデバッグオブジェクトにアクセスできるようにします。このメソッドを使用すると、大きなコードベースをこの Debugger API に徐々に適合させることが容易になります。コードの適切な部分で Debugger.Object インスタンスを使用できますが、このメソッドを使用して直接更新されていないコードに直接オブジェクト参照を渡します。
+
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 +--- +
{{ToolsSidebar}}
+

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

+
+ +

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

+ + + +

関連ファイル:

+ + + +

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

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

{{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 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 +--- +
{{ToolsSidebar}}
+

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

+ +

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

+
+ +

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

+ +

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

+ +

+ +

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

+ +

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

+ +

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

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

{{ToolsSidebar}}

+ +

ツールバー でアイコン をクリックすると、例外 で停止するようにデバッガーを指定できます。

+ +

{{EmbedYouTube("UWIO_UM827k")}}

+ +

ボタンは 3 種類の状態があり、クリックするたびに次の状態へ切り替わります。

+ +

: 例外で停止しません。これは初期状態です。

+ +

: キャッチしていない 例外に限り停止します。

+ +

: すべての例外で停止します。

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

{{ToolsSidebar}}

+ +

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

+ +

以下の動画では、このようなソースを含むページを読み込んでいます:

+ +
var script = `function foo() {
+               console.log('called foo');
+             }
+             //# sourceURL=my-foo.js`;
+
+eval(script);
+
+var button = document.getElementById("foo");
+button.addEventListener("click", foo, false);
+
+ +

評価された文字列は、//# sourceURL ディレクティブを使用して "my-foo.js" という名称が与えられます。このソースは ソースリストペイン に表示されて、他のソースと同様に開いたりデバッグしたりできます。

+ +

{{EmbedYouTube("AkvN40-y1NE")}}

+ +

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

+ +

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

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

{{ToolsSidebar}}

+ +

ブレークポイントを 1 つ無効化するには、ブレークポイント一覧 でブレークポイントの隣にあるチェックボックスのチェックを外します。

+ +

すべてのブレークポイントを無効化するには、ツールバー でアイコン をクリックします。

+ +

{{EmbedYouTube("ULoZ70XPd90")}}

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 +--- +
{{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/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 +--- +
{{ToolsSidebar}}
+

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

+ +

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

+
+ +

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

+ +

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

+ +

{{EmbedYouTube("0JWxXp2Qql8")}}

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 +--- +
{{ToolsSidebar}}
+ +
これらの記事では、デバッガの使用方法について説明します。
+ +
 
+ +

{{ ListSubpages () }}

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

{{ToolsSidebar}}

+ +

デバッガーを開く方法は 3 つあります:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

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

{{ToolsSidebar}}

+ +

ソースペイン のアイコン をクリックすると、圧縮された (minified) ファイルを整形します。デバッガーは整形したソースを表示して、"[original-name]:formatted" というような名前の新しいファイルとして表示します。

+ +

{{EmbedYouTube("6kQrjS82rME")}}

+ +
+
+
+

メモ: インライン JavaScript コードをあらかじめ確認したい場合は、インスペクタペインのコードをダブルクリックしてください。

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

{{ToolsSidebar}}

+ +

ファイルを検索する

+ +

特定のファイルを検索するには、Control + P (Mac では Command + P) を押下して検索文字列を入力します。入力内容に応じて、マッチするすべてのファイルを ソースペイン に表示します。上下矢印キーでリスト内を移動することができ、Return を押下するとファイルを開きます:

+ +

{{EmbedYouTube("xXsfYx0THWg")}}

+ +

ファイル内で検索する

+ +

ソースペイン に読み込んでいるファイル内で特定の文字列を検索するには、ソースペインにフォーカスがある状態で Control + F (Mac では Command + F) を押下します。Return を押下すると検索します。デバッガーはコード内でマッチした数を表示して、それぞれの箇所を枠で囲みます:

+ +

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 +--- +
{{ToolsSidebar}}

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

+ +

+ +

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

+ +

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

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

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

+ +

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

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

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

+ +

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

+ + + + + + + + + + + + +
file.js:12"file.js" を開いて 12 行目へ移動します。
mod#onLoadファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。
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 +--- +

{{ToolsSidebar}}

+ +

以下のいずれかの方法で、ブレークポイントを設置できます:

+ + + +

以下の動画は、コンテキストメニューを使用してブレークポイントを設置しています:

+ +

{{EmbedYouTube("P7b98lEijF0")}}

+ +

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

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

{{ToolsSidebar}}

+ +

通常のブレークポイントは、行に関連付けられます。プログラムがその行に達すると、デバッガーは停止します。条件付きブレークポイントは条件も関連付けられており、条件は 式 で表します。プログラムがその行に達すると、式が true に評価された場合に限りデバッガーが停止します。

+ +

{{EmbedYouTube("pVPlMhfrMwM")}}

+ +

条件付きブレークポイントを設置するには ソースペイン でコンテキストメニューを開いて、[条件付きブレークポイントを追加] を選択します。すると、式を入力できるテキストボックスが現れます。最後に Return を押下すると完了します。

+ +

条件付きブレークポイントは、行番号に橙色の矢印を重ねて表示します。

+ +

ブレークポイントをコンテキストクリックすると、[ブレークポイントを編集] というメニュー項目があります。既存の条件を変更したり、通常のブレークポイントに条件を追加したりできます。

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

{{ToolsSidebar}}

+ +

コードのデバッグで、実行が停止しているときに式を監視すると役に立つことがあります。デバッガーには、監視する式 (監視式) を入力するペインがあります。コードをステップ実行するとデバッガーが式を監視して、その結果を返します。

+ +

監視式を設定するには、監視式サイドバーを展開して "監視式を追加" をクリックします。そして、監視したい式をテキストフィールドに入力します。

+ +

+ +

デバッガーは式を保存して、コードをステップ実行するたびに監視します。デバッガーがブレークポイントに達すると、監視式の変数を表示します:

+ +

+ +

コードをステップ実行することができ、実行するコードが変わるたびに式の値を監視します。値を監視するたびに、ボックスが一時的に黄色く光ります。式の隣にある "x" 印のアイコンをクリックすると監視式を削除できます。また、同時に複数の監視式を持つこともできます。

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

{{ToolsSidebar}}

+ +

デバッガーがブレークポイントで停止しているときに、ツールバー にある 4 つのボタンを使用してステップ実行ができます:

+ +

+ +

順番に、以下のボタンがあります:

+ + + +

{{EmbedYouTube("RQBwEk0-xe0")}}

+ +

一時停止しているとき、"コンソールペインを表示します" ボタン でウェブコンソールを開閉して、エラーや変数についてさらに洞察を得ることができます:

+ +

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

{{ToolsSidebar}}

+ +

ブラウザーが実行する JavaScript ソースは、開発者が作成した元のソースから何らかの方法で変換される場合があります。例えば:

+ + + +

このような状況では、ブラウザーがダウンロードした変換後のソースよりも、元のソースをデバッグするほうがとても容易です。ソースマップ は変換後のソースと元のソースを関連付けるファイルであり、ブラウザーが元のソースを再構成して、そのソースをデバッガーに提供できます。

+ +

デバッガーでソースマップを使用可能にするには、以下のことが必要です:

+ + + +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

上の動画では https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html を読み込んでいます。このページは、初めに CoffeeScript で記述して JavaScript に変換した "main.js" という名前のソースを読み込みます。変換後のソースには、ソースマップを指し示す以下のようなコメントが含まれています:

+ +
//# sourceMappingURL=main.js.map
+ +

デバッガーの ソースリストペイン では元の CoffeeScript ソースが "main.coffee" として表示されて、ほかのソースと同様にデバッグできます。

+ +

最後に、ブラウザーのバージョンによっては about:config でこの機能を有効化しなければならない場合があります。

+ +
    +
  1. ブラウザーを開いて about:config と入力します。
    + How to open about:config inside firefox.
    2. +
  2. 動作保証対象外であることを受け入れます。
    + Accept about:config warranty.
    3. +
  3. devtools.source-map.locations.enabled を検索して true に設定します。
    + Change the sourcemap boolean value for devtools.
    4. +
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 +--- +
{{ToolsSidebar}}
+ +
JavaScriptデバッガを使用すると、JavaScriptコードをステップ実行してその状態を調べたり変更したりして、バグを追跡することができます。
+ +
+

このページは、Firefox 52 以降の Firefox Nightly および Firefox Developer Edition で使用できる JavaScript デバッガーについて説明します。

+ +

これより前のバージョンの Firefox や Firefox Beta および Release については、デバッガー (Firefox 52 より前) をご覧ください。

+ +

このバージョンのデバッガーを使用できる環境で旧デバッガーに戻す必要がある場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に false を設定してください。

+
+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

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

+ +

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

+ +

デバッガーは Firefox に内蔵して提供しており、本ページでは Firefox に埋め込まれているデバッガーの使用方法を説明します。一方、デバッガーはスタンドアローンのウェブアプリケーションとして使用することもでき、他のブラウザーや Node で実行しているコードをデバッグできます。詳しくは プロジェクトの GitHub リポジトリー をご覧ください。

+ +

新しいデバッガーは、旧デバッガーの一部機能を (まだ) サポートしていません。新しいデバッガーの制限事項 をご覧ください。

+ +
+

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

+ +

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

+ +
+

使い方

+ +

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

+ +
+ +
+ +
+

リファレンス

+ +
+ +
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 +--- +
{{ToolsSidebar}}

{{Page ("ja/docs/tools/Keyboard_shortcuts", "debugger")}}

+ +

共通ショートカット

+ +

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

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 +--- +
{{ToolsSidebar}}

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ + 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 +--- +
{{ToolsSidebar}}

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

+ +

+ +

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

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

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

+ +

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

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

Firefox 33 の新機能

+
+ +

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

+
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 +--- +
{{ToolsSidebar}}
+ +

ソースマップはJSONファイルで、ブラウザで見られるように変換されたソースを、開発者が書いた元のソースと関連付けることができます。ソースマップを操作する際に問題が発生することがあります。このページでは、最も一般的な問題とその解決方法について説明します。

+ +
+

注: ソースマップが初めての方は、ソースマップの使い方で詳細をご覧ください。

+
+ +

一般的なソースマップのエラー報告

+ +

問題が見つかると、Webコンソールにメッセージが表示されます。このメッセージには、エラーメッセージ、リソースURL、およびソースマップのURLが表示されます。

+ +

Error from invalid JSON

+ +

ここでリソースURLは、bundle.jsにソースマップが記述されていることを示しています。ソースマップURLは、ソースマップデータの場所（この場合はリソースとの相対位置）を示します。このエラーは、ソースマップがJSONデータではないことを示しているため、間違ったファイルを提供していることになります。

+ +

ソースマップが間違っていることがある一般的な方法がいくつかあります。 次のセクションで詳しく説明します。

+ +

ソースマップが見つからないかアクセスできない

+ +

ソースマップリソースが見つからない、またはアクセスできない可能性があります。

+ +

Source map file is missing

+ +

ここではファイルが提供されていることを確認し、ブラウザがアクセスできるようにすることで修正します。

+ +

不正なソースマップ

+ +

ソースマップデータは、単にJSONファイルではなく、不正な構造であった時に無効になる可能性があります。一般的なエラーメッセージは次のとおりです。

+ + + +

Error: "version" is a required argument

+ +

元のソースがない

+ +

元のソースが不足している可能性があります。デバッガで元のソースの1つを開こうとすると、この問題が発生することがあります。この場合、メッセージは少し違って見えます：

+ +

Debugger source tab showing the error

+ +

この場合、エラーはデバッガのソースタブにも表示されます。

+ +

Debugger source tab showing the error

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

{{ToolsSidebar}}

+ +

本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。UI は、縦に 3 つのパネルへ分かれています。

+ + + +

+ +

ソースリストペイン

+ +

ソースリストペインでは、ページに読み込まれたすべての JavaScript ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースはトップレベルでオリジン別に分類しており、またその配下では、ソースを提供するディレクトリーの構造別に分類しています。

+ +

+ +

Ctrl + P (Mac では Cmd + P) を使用して ファイルを検索 できます。

+ +

 

+ +

興味のあるディレクトリを右クリックし、[Set directory root] を選択すると、[Source] リストペインのファイルリストが簡素化されます。

+ +

+ +

これでソースリストペインのルートがプロジェクトのルートになり、よりクリーンで簡単に表示をナビゲートできます。

+ +

+ +

アウトラインビュー

+ +

アウトラインビューには、現在開いているファイルをナビゲートするためのツリーが表示されます。それを使用して、関数、クラスまたはメソッド定義に直接ジャンプします。

+ +

 

+ +

ソースペイン

+ +

これは、現在読み込んでいる JavaScript ファイルを表示します。

+ +

+ +

ソースペインにフォーカスがあるときに、Ctrl + F (Mac では Cmd + F) を使用して ファイル内の文字列を検索 できます。

+ +

ブレークポイント は、青色の矢印を行番号に重ねて表示します。条件付きブレークポイント は、橙色の矢印です。ブレークポイントで停止すると、行全体が緑色になります。以下のスクリーンショットには、ブレークポイントが 3 か所あります:

+ + + +

+ +

ツールバー

+ +

右側のペインの上部にツールバーがあります:

+ +

+ +

ツールバーの構成は以下のとおりです:

+ + + +

+ +

ブレークポイント一覧

+ +

ツールバーの下に、設定したすべてのブレークポイントを表示します。それぞれのブレークポイントの隣に、ブレークポイントの有効/無効を切り替える チェックボックスがあります:

+ +

+ +

コールスタック

+ +

デバッガーが停止したときに、コールスタックを表示します:

+ +

+ +

コールスタックはそれぞれのレベルに 1 行ずつ割り当てており、関数名・ファイル名・行番号を表示します。行をクリックすると、ソースペインでソースを開きます。

+ +

スコープ

+ +

右側のペインに、展開用の三角印がついている "スコープ" というラベルがあります。デバッガーが停止したときにこのセクションを展開すると、プログラムのその時点でスコープ内に存在するすべてのオブジェクトを確認できます:

+ +

+ +

オブジェクトはスコープ別に分類します。もっともローカル性が高いオブジェクトを最初に、またグローバルスコープ (ページのスクリプトでは Window) を最後に表示します。

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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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' +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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) +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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 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 +--- +
{{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/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 +--- +

{{ToolsSidebar}}

+ +

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.

+ +

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.

+ +

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.

+ +

You may see a warning message, as in the following image, when trying to activate a deprecated panel:

+ +

+ +

In addition, if you open the panel for one of these tools, you will also see a warning message about its removal.

+ +

+ +

スクラッチパッド

+ +

スクラッチパッドは、Firefox 70 で廃止予定 ({{bug(1565380)}}) とされて、Firefox 72 で削除 ({{bug(1519103)}}) される予定です。

+ +

説明

+ +

スクラッチパッドは、JavaScript コードの実験をする環境を提供します。ウェブページで動作するコードの記述、実行、結果の検証を行えます。

+ +

Screenshot of the Scratchpad window with a deprecation message

+ +

代替策

+ +

Firefox 71+ では、ウェブコンソールのエディターモードで複数行の JavaScript コードを記述でき、スクラッチパッドに似たことができます。エディターモードは、コンソール入力の右側にあるアイコンをクリックするか、Ctrl + B (macOS では Cmd + B ) で起動されます。

+ +

Screenshot of the Webconsole in inline mode, with the editor mode icon displayed on the right of the console inputエディターモードでは、Enter キーを押すと新しい行が追加され、Ctrl + Enter (macOS では Cmd + Enter) を使用して表現の検証を行えます。

+ +

Screenshot of the Webconsole multiline input, showing an evaluation with a Syntax Error and another, correct one.

+ +

評価を行っても入力は消去されず、コードスニペットを素早く繰り返せます。

+ +

結果は、入力の右側にあるコンソール出力に表示され、素早くフィードバックが提供されます。スクラッチパッドと違い、エラーは展開可能なスタックトレースで出力で適切に表示され、現在書いているコードのデバッグを簡単に行えます。

+ +

Firefox 72 以降では、Ctrl + O (macOS では Cmd + O) を押すと JavaScript ファイルコンテンツをコンソールの入力にインポートでき、同様に Ctrl + S (macOS では Cmd + S) を使用してコンソールの入力コンテンツを保存できます。

+ +

WebIDE and Connect page

+ +

WebIDE was deprecated as of Firefox 69

+ +

Disabled as of Firefox 70 ({{bug(1539451)}}).

+ +

Removed as of Firefox 71 ({{bug(1539462)}}).

+ +

Description

+ +

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.

+ +

+ +

Alternatives

+ +

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 mailing-list thread.

+ +

Canvas debugger

+ +

Bugzilla issue: {{bug(1403938)}}

+ +

Removed as of Firefox 67

+ +

Description

+ +

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.

+ +

We do not have dedicated documentation for the Canvas Debugger.

+ +

+ +

Alternatives

+ +

Spector.js is a WebExtension that can provide these features with 3D contexts.

+ +

Web Audio editor

+ +

Bugzilla issue: {{bug(1403944)}}

+ +

Removed as of Firefox 67

+ +

Description

+ +

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.

+ +

More details about the Web Audio Editor

+ +

+ +

Alternatives

+ +

Alternatives include AudioN and https://github.com/spite/WebAudioExtension web extensions.

+ +

Shader editor

+ +

Bugzilla issue: {{bug(1342237)}}

+ +

Removed as of Firefox 67

+ +

Description

+ +

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.

+ +

More details about the Shader Editor

+ +

+ +

Alternatives

+ +

An alternative to this panel is this extension: https://github.com/spite/ShaderEditorExtension, or Spector.js also supports a Shader Editor that requires a library to use a shader reloader hook. Currently only the Babylon library does.

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 +--- +
{{ToolsSidebar}}
+ +

{{obsolete_header()}}

+ +

{{ warning("DevTools APIはまだWIPです。 矛盾がある場合は、Firefox Developer Toolsチームにお知らせください。") }}

+ +

この API は現在進行中ですが、現在使用可能なページインスペクタとデバッガの使用可能な部分があります。

+ +

イントロダクション

+ +

DevTools API は、Firefox の開発者ツールを登録してアクセスする方法を提供します。

+ +

In terms of User Interface, each registered tool lives in its own tab (we call one tab a panel). These tabs are located in a box we call a Toolbox. A toolbox can be hosted within a browser tab (at the bottom or on the side), or in its own window (we say that the toolbox is undocked). A Toolbox (and all the tools it contains) is linked to a Target, 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,…).

+ +

In terms of code, each tool has to provide a ToolDefinition object. A definition is a JS light object that exposes different information about the tool (like its name and its icon), and a build method that will be used later-on to start an instance of this tool. The gDevTools global object provides methods to register a tool definition and to access tool instances. An instance of a tool is called a ToolPanel. 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 EventEmitter interface.

+ +

API

+ +

gDevTools

+ +

The gDevTools API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the gDevTools API from an add-on, it can be imported with following snippet

+ +
const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");
+ +

メソッド

+ +
+
+
registerTool(toolDefinition)
+
+
Registers a new tool and adds a tab to each existing toolbox.
+
Parameters:
+ toolDefinition {ToolDefinition} - An object that contains information about the tool. See {{anch("ToolDefinition")}} for details.
+
+
unregisterTool(tool)
+
+
Unregisters the given tool and removes it from all toolboxes.
+
Parameters:
+ tool {ToolDefinition|String} - The tool definition object or the id of the tool to unregister.
+
+
registerTheme(themeDefinition)
+
+
Registers a new theme.
+
Parameters:
+ themeDefinition {ThemeDefinition} - An object that contains information about the theme.
+
+
unregisterTheme(theme)
+
+
Unregisters the given theme.
+
+ Parameters:
+ theme {ThemeDefinition|String} - The theme definition object or the theme identifier.
+
+
showToolbox(target [, toolId [, hostType [, hostOptions]]])
+
+
Opens a toolbox for given target either by creating a new one or activating an existing one.
+
Parameters:
+ target {Target} - The target the toolbox will debug.
+ toolId {String} - The tool that should be activated. If unspecified the previously active tool is shown.
+ hostType {String} - The position the toolbox will be placed. One of bottom, side, window, custom. See {{anch("HostType")}} for details.
+ hostOptions {Object} - An options object passed to the selected host. See {{anch("HostType")}} for details.
+
Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("Toolbox")}} instance once it has been initialized and the selected tool is loaded.
+
+
getToolbox(target)
+
+
Fetch the {{anch("Toolbox")}} object for the given target.
+
+ Parameters:
+ target {Target} - The target the toolbox is debugging.
+
+ Return value:
+ {{anch("Toolbox")}} object or undefined if there's no toolbox for the given target..
+
+
closeToolbox(target)
+
+
Closes the toolbox for given target.
+
Parameters:
+ target {Target} - The target of the toolbox that should be closed.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the toolbox has been destroyed.
+
+
getDefaultTools()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for the built-in tools.
+
+
getAdditionalTools()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for tools added by addons.
+
+
getToolDefinition(toolId)
+
+
Fetch the {{anch("ToolDefinition")}} object for a tool if it exists and is enabled.
+
+ Parameters:
+ toolId {String} - The ID of the tool.
+
Return value:
+ A {{anch("ToolDefinition")}} if a tool with the given ID exists and is enabled, null otherwise.
+
+
getToolDefinitionMap()
+
+
Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.
+
+
getToolDefinitionArray()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for enabled tools sorted by the order they appear in the toolbox.
+
+
getThemeDefinition(themeId)
+
+
Fetch the ThemeDefinition object for the theme with the given id.
+
+ Parameters:
+ themeId {String} - The ID of the theme.
+
Return value:
+ A ThemeDefinition object if the theme exists, null otherwise.
+
+
getThemeDefinitionMap()
+
+
Returns a toolId → ThemeDefinition map for available themes.
+
+
getThemeDefinitionArray()
+
+
Returns an {{jsxref("Array")}} of ThemeDefinition objects for avialble themes.
+
+ +

Events

+ +

Following events are emitted by the gDevTools object via the {{anch("EventEmitter")}} interface.

+ +
+
+
tool-registered(toolId)
+
+
A new tool has been registered.
+
+
tool-unregistered(tool)
+
+
A tool has been unregistered. The parameter is a {{anch("ToolDefinition")}} object.
+
+
theme-registered(themeId)
+
+
A new theme has been registered.
+
+
theme-unregistered(theme)
+
+
A theme has been unregistered. The parameter is a ThemeDefinition object.
+
+
toolbox-ready(toolbox)
+
+
A new toolbox has been created and is ready to use. The parameter is a {{anch("Toolbox")}} object instance.
+
+
toolbox-destroy(target)
+
+
The toolbox for the specified target is about to be destroyed.
+
+
toolbox-destoyed(target)
+
+
The toolbox for the specified target has been destroyed.
+
+
{toolId}-init(toolbox, iframe)
+
+
A tool with the given ID has began to load in the given toolbox to the given frame.
+
+
{toolId}-build(toolbox, panel)
+
+
A tool with the given ID has began to initialize in the given toolbox. The panel is the object returned by the ToolDefinition.build() method.
+
+
{toolId}-ready(toolbox, panel)
+
+
A tool with the given ID has finished its initialization and is ready to be used. The panel is the object returned by the ToolDefinition.build() method.
+
+
{toolId}-destroy(toolbox, panel)
+
+
A tool with the given ID is about to be destroyed. The panel is the object returned by the ToolDefinition.build() method.
+
+ +

Toolbox

+ +

A Toolbox is a frame for the {{anch("ToolPanel", "ToolPanels")}} that is debugging a specific target.

+ +

プロパティ

+ +
+
+
target
+
+
Target. The Target this toolbox is debugging.
+
+
hostType
+
+
Toolbox.HostType. The type of the host this Toolbox is docked to. The value is one of the Toolbox.HostType constants.
+
+
zoomValue
+
+
The current zoom level of the Toolbox.
+
+ +

Constants

+ +

The Toolbox constructor contains following constant properties.

+ +
+
+
Toolbox.HostType.BOTTOM
+
+
Host type for the default toolbox host at the bottom of the browser window.
+
+
Toolbox.HostType.SIDE
+
+
Host type for the host at the side of the browser window.
+
+
Toolbox.HostType.WINDOW
+
+
Host type for the separate Toolbox window.
+
+
Toolbox.HostType.CUSTOM
+
+
Host type for a custom frame host.
+
+ +

メソッド

+ +
+
+
getCurrentPanel()
+
+
Get the currently active {{anch("ToolPanel")}}.
+
+ Return value:
+ The {{anch("ToolPanel")}} object that was returned from {{anch("build(window_toolbox)", "ToolPanel.build()")}}.
+
+
getPanel(toolId)
+
+
Get the {{anch("ToolPanel")}} for given tool.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ The {{anch("ToolPanel")}} object if the tool with the given toolId is active, otherwise undefined.
+
+
getPanelWhenReady(toolId)
+
+
Similar to getPanel() 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.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object once the tool has finished loading.
+
+
getToolPanels()
+
+
Returns a toolId → {{anch("ToolPanel")}} {{jsxref("Map")}} for currently loaded tools.
+
+
getNotificationBox()
+
+
Returns a {{ XULElem("notificationbox") }} element for the Toolbox that can be used to display notifications to the user.
+
+
loadTool(toolId)
+
+
Loads the tool with the given toolId in the background but does not activate it.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.
+  
+
+
selectTool(toolId)
+
+
Selects the tool with the given toolId.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel once the tool has loaded and activated.
+
+
selectNextTool()
+
+
Selects the next tool in the Toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
+
+
selectPreviousTool()
+
+
Selects the previous tool in the Toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
+
+
highlightTool(toolId)
+
+
Highlights the tab for the given tool.
+
+ Parameters:
+ toolId {String} - The tool to highlight.
+
+
unhighlightTool(toolId)
+
+
Unhighlights the tab for the given tool.
+
+ Parameters:
+ toolId {String} - The tool to unhighlight.
+
+
openSplitConsole()
+
+
Opens the split Console to the bottom of the toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the Console has loaded.
+
+
closeSplitConsole()
+
+
Closes the split console.
+
+
toggleSplitConsole()
+
+
Toggles the state of the split console.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the operation has finished.
+
+
switchHost(hostType)
+
+
Switches the location of the toolbox
+
+ Parameters:
+ hostType {Toolbox.HostType} - The type of the new host.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the new host is ready.
+  
+
+
reloadTarget(force)
+
+
Reloads the current target of the toolbox.
+
+ Parameters:
+ force {Boolean} - If true the target is shift-reloaded i.e. the cache is bypassed during the reload.
+
+
zoomIn()
+
+
Increases the zoom level of the Toolbox document.
+
+
zoomOut()
+
+
Decreases the zoom level of the Toolbox document.
+
+
zoomReset()
+
+
Resets the zoom level of the Toolbox document.
+
+
setZoom(value)
+
+
Set the zoom level to an arbitrary value.
+
+ Parameters:
+ value {Number} - The zoom level such as 1.2.
+
+
destroy()
+
+
Closes the toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is resolved once the Toolbox is destroyed.
+
+ +

Events

+ +

The Toolbox object emits following events via the {{anch("EventEmitter")}} interface.

+ +
+
+
host-changed
+
+
The Host for this Toolbox has changed.
+
+
ready
+
+
The Toolbox is ready to use.
+
+
select(toolId)
+
+
A tool has been selected. This event is emitted before the corresponding {toolId}-selected event.
+
+
{toolId}-init(frame)
+
+
A tool is about to be loaded. The frame is the {{HTMLElement("iframe")}} element that has been created for the tool.
+
+
{toolId}-build(panel)
+
+
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.
+
+
{toolId}-ready(panel)
+
+
The asynchronous initialization for a tool has completed and it is ready to be used. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-selected(panel)
+
+
A tool has been selected. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-destroy(panel)
+
+
A tool is about to be destroyed. The parameter is a {{anch("ToolPanel")}} object.
+
+
destroy
+
+
The Toolbox is about to be destroyed.
+
+
destroyed
+
+
The Toolbox has been destroyed.
+
+ +

ToolDefinition

+ +

A ToolDefinition object contains all the required information for a tool to be shown in the toolbox.

+ +

Methods

+ +
+
+
isTargetSupported(target)
+
+
A method that is called during toolbox construction to check if the tool supports debugging the given target.
+
+ Parameters:
+ target {Target} - The target to check.
+
+ Return value:
+ A boolean indicating if the tool supports the given target.
+
+
build(window, toolbox)
+
+
A method that builds the {{anch("ToolPanel")}} for this tool.
+
+ Parameters:
+ window {Window} - The {{domxref("Window")}} object for frame the tool is being built into.
+ toolbox {Toolbox} - The {{anch("Toolbox")}} the tool is being built for.
+
+ Return value:
+ A {{anch("ToolPanel")}} for the tool.
+
+
onKey(panel, toolbox)
+
+
Optional. A method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.
+
+ Parameters:
+ panel {ToolPanel} - The {{anch("ToolPanel")}} for the tool.
+ toolbox {Toolbox} - The toolbox for the shortcut was triggered for.
+
+ Return value:
+ Undefined.
+
+ +

Properties

+ +

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.

+ +
+
+
id
+
+
String, required. An unique identifier for the tool. It must be a valid id for an HTML {{domxref("Element")}}.
+
+
url
+
+
String, required. An URL of the panel document.
+
+
label
+
+
String, optional. The tool's name. If undefined the icon should be specified.
+
+
tooltip
+
+
String, optional. The tooltip for the tool's tab.
+
+
panelLabel
+
+
String, optional. An accessibility label for the panel.
+
+
ordinal
+
+
Integer, optional. The position of the tool's tab within the toolbox. Default: 99
+
+
visibilityswitch
+
+
String, optional. A preference name that controls the visiblity of the tool. Default: devtools.{id}.enabled
+
+
icon
+
+
String, optional. An URL for the icon to show in the toolbox tab. If undefined the label should be defined.
+
+
highlightedicon
+
+
String, optional. An URL for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). Default: {icon}
+
+
iconOnly
+
+
Boolean, optional. If true, the label won't be shown in the tool's tab. Default: false
+
+
invertIconForLightTheme
+
+
Boolean, optional. If true the colors of the icon will be inverted for the light theme. Default: false
+
+
key
+
+
String, optional. The key used for keyboard shortcut. Either {{XULAttr("key")}} or {{XULAttr("keycode")}} value.
+
+
modifiers
+
+
String, optional. {{XULAttr("modifiers", "Modifiers")}} for the keyboard shortcut.
+
+
preventClosingOnKey
+
+
Boolean, optional. If true the tool won't close if its keybinding is pressed while it is active. Default: false
+
+
inMenu
+
+
Boolean, optional. If true the tool will be shown in the Developer Menu. Default: false
+
+ +
+
String, optional. A label for the Developer Menu item. Default: {label}
+
+
accesskey
+
+
String, optional. {{XULAttr("accesskey")}} for the Developer Menu {{XULElem("menuitem")}}.
+
+ +

Example

+ +

Here's a minimal definition for a tool.

+ +
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)
+};
+
+// Register it.
+gDevTools.registerTool(def);
+
+ +

TargetType

+ +

FIXME:

+ +

HostType

+ +

FIXME

+ +

ToolPanel

+ +

The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that ToolDefinition.build() returns should implement the methods described below.

+ +

Methods

+ +
+
+
open()
+
+
Optional. 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 toolbox.selectTool()) and events (e.g. {{anch("toolbox-ready(toolbox)", "toolbox-ready")}}) are delayed until the promise has been fulfilled.
+
+ Return value:
+ The method should return a {{domxref("Promise")}} that is resolved with the ToolPanel object once it's ready to be used.
+
+
destroy()
+
+
+

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.

+ +

Return value:
+ A {{domxref("Promise")}} if the function performs asynchronous operations, otherwise undefined.

+
+
+ +

Example

+ +

Here's a basic template for a ToolPanel implementation.

+ +
// 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);
+  },
+};
+
+ +

EventEmitter

+ +

EventEmitter is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.

+ +

When an event is emitted on the EventEmitter, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.

+ +
+

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 once method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.

+
+ +

Methods

+ +

The following methods are available on objects that have been decorated with the EventEmitter interface.

+ +
+
+
emit(eventName, ...extraArguments)
+
+
Emits an event with the given name to this object.
+
+ Parameters:
+ eventName {String} - The name of the event.
+ extraArguments {...Any} - Extra arguments that are passed to the listeners.
+
+
on(eventName, listener)
+
+
Adds a listener for the given event.
+
+
off(eventName, listener)
+
+
Removes the previously added listener from the event.
+
+
once(eventName, listener)
+
+
Adds a listener for the event that is removed after it has been emitted once.
+
+ Return value:
+ 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.
+
+ +

Examples

+ +

Here's a few examples using the {{anch("gDevTools")}} object.

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

ToolSidebar

+ +

To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:

+ +
    <splitter class="devtools-side-splitter"/>
+    <tabbox id="mytool-sidebar" class="devtools-sidebar-tabs" hidden="true">
+      <tabs/>
+      <tabpanels flex="1"/>
+    </tabbox>
+ +
 
+ +
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.
+ +
 
+ +
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.
+ +
 
+ +
If the loaded document exposes a window.setPanel(ToolPanel) function, the sidebar will call it once the document is loaded.
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)ToolSidebar constructor
void addTab(tabId, url, selected=false)Add a tab in the sidebar
void select(tabId)Select a tab
void hide()Hide the sidebar
void show()Show the sidebar
void toggle()Toggle the sidebar
void getWindowForTab(tabId)Get the iframe containing the tab content
tabId getCurrentTabID()Return the id of tabId of the current tab
tabbox getTab(tabId)Return a tab given its id
destroy()Destroy the ToolSidebar object
EventsDescription
new-tab-registeredA new tab has been added
{tabId}-readyTab is loaded and can be used
{tabId}-selectedTab has been selected and is visible
{tabId}-unselectedTab has been unselected and is not visible
showThe sidebar has been opened.
hideThe sidebar has been closed.
+ +

Examples

+ +

Register a tool

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

Open a tool, or select it if the toolbox is already open:

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

Add a sidebar to an existing tool:

+ +
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();
+
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 +--- +
{{ToolsSidebar}}
+ +
+

これらの値のいずれかを変更する必要がある場合は、/browser/themes/*/devtools/の中のCSSコードを変更する必要があります。それに応じてDevToolsのバグを報告してください。

+
+ +

このチャートには、開発者ツールのダークテーマとライトテーマで実装されている色とCSS変数が一覧で表示されています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 ダークテーマライトテーマCSS 変数
+

Chrome Colors

+ 		 
タブツールバー +
 
+ +

#252c33
+ rgba(37, 44, 51, 1)

+ 		+
 
+ #ebeced
+ rgba(235, 236, 237, 1)		--theme-tab-toolbar-background
ツールバー +
 
+ #343c45
+ rgba(52, 60, 69, 1)		 +
 
+ #f0f1f2
+ rgba(240, 241, 242, 1)		--theme-toolbar-background
選択箇所の背景 +
 
+ #1d4f73
+ rgba(29, 79, 115, 1)		 +
 
+ #4c9ed9
+ rgba(76, 158, 217, 1)		--theme-selection-background
選択したテキストの色 +
 
+ #f5f7fa
+ rgba(245, 247, 250, 1)		 +
 
+ #f5f7fa
+ rgba(245, 247, 250, 1)		--theme-selection-color
スプリッタ +
 
+ #000000
+ rgba(0, 0, 0, 1)		 +
 
+ #aaaaaa
+ rgba(170, 170, 170, 1)		--theme-splitter-color
コメント +
 
+ +

#5c6773
+ rgba(92, 103, 115, 1)

+ 		+
 
+ +

#747573
+ rgba(116, 117, 115, 1)

+ 		--theme-comment
+

コンテンツの色

+ 		 
背景 - ボディ +
 
+ #14171a
+ rgba(17, 19, 21, 1)		 +
 
+ #fcfcfc
+ rgba(252, 252, 252, 1)		--theme-body-background
背景 - サイドバー +
 
+ #181d20
+ rgba(24, 29, 32, 1)		 +
 
+ #f7f7f7
+ rgba(247, 247, 247, 1)		--theme-sidebar-background
背景 - 注意 +
 
+ #b28025
+ rgba(178, 128, 37, 1)		 +
 
+ #e6b064
+ rgba(230, 176, 100, 1)		--theme-contrast-background
+

テキストの色

+ 		 
ボディテキスト +
 
+ #8fa1b2
+ rgba(143, 161, 178, 1)		 +
 
+ #18191a
+ rgba(24, 25, 26, 1)		--theme-body-color
フォアグラウンド (テキスト) - グレー +
 
+ #b6babf
+ rgba(182, 186, 191, 1)		 +
 
+ #585959
+ rgba(88, 89, 89, 1)		--theme-body-color-alt
コンテンツ (テキスト) - ハイコントラスト +
 
+ #a9bacb
+ rgba(169, 186, 203, 1)		 +
 
+ #292e33
+ rgba(41, 46, 51, 1)		--theme-content-color1
コンテンツ (テキスト) - グレー +
 
+ #8fa1b2
+ rgba(143, 161, 178, 1)		 +
 
+ #8fa1b2
+ rgba(143, 161, 178, 1)		--theme-content-color2
コンテンツ (テキスト) - ダークグレー +
 
+ #667380
+ rgba(102, 115, 128, 1)		 +
 
+ #667380
+ rgba(102, 115, 128, 1)		--theme-content-color3
+

ハイライトカラー

+ 		 
青 +
 
+ #46afe3
+ rgba(70, 175, 227, 1)		 +
 
+ #0088cc
+ rgba(0, 136, 204, 1)		--theme-highlight-blue
紫 +
 
+ #6b7abb
+ rgba(107, 122, 187, 1)		 +
 
+ #5b5fff
+ rgba(91, 95, 255, 1)		--theme-highlight-purple
ピンク +
 
+ #df80ff
+ rgba(223, 128, 255, 1)		 +
 
+ #b82ee5
+ rgba(184, 46, 229, 1)		--theme-highlight-pink
赤 +
 
+ #eb5368
+ rgba(235, 83, 104, 1)		 +
 
+ #ed2655
+ rgba(237, 38, 85, 1)		--theme-highlight-red
オレンジ +
 
+ #d96629
+ rgba(217, 102, 41, 1)		 +
 
+ #f13c00
+ rgba(241, 60, 0, 1)		--theme-highlight-orange
ライトオレンジ +
 
+ #d99b28
+ rgba(217, 155, 40, 1)		 +
 
+ #d97e00
+ rgba(217, 126, 0, 1)		--theme-highlight-lightorange
緑 +
 
+ #70bf53
+ rgba(112, 191, 83, 1)		 +
 
+ #2cbb0f
+ rgba(44, 187, 15, 1)		--theme-highlight-green
ブルーグレー +
 
+ #5e88b0
+ rgba(94, 136, 176, 1)		 +
 
+ #0072ab
+ rgba(0, 114, 171, 1)		--theme-highlight-bluegrey
黄 +
 
+ #ffffb4
+ rgba(255, 255, 180, 1)		 +
 
+ #ffffb4
+ rgba(255, 255, 180, 1)		--theme-highlight-yellow
+ +
+

まだ修正されていません。進行状況については、bug 916766を参照してください。

+
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 +--- +
{{ToolsSidebar}}
+ +
DOM プロパティビューアーは Firefox 48 の新機能です。これはデフォルトで無効にしています。開発ツールのオプション で有効化できます。
+ +

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

+ +

+ +

DOM プロパティビューアーを有効化する

+ +

DOM プロパティビューアーはデフォルトで無効化しています。開発ツールのオプション を開いて、"標準の Firefox 開発ツール" の "DOM" にチェックを入れると有効化されます。

+ +

DOM プロパティビューアーを開く

+ +

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

+ +

DOM プロパティビューアーがアクティブになっている ツールボックス が、ブラウザウィンドウの下部に現れます。ツールボックスでは "DOM" という名前です。

+ +

DOM プロパティビューアーのユーザインターフェイス

+ +

DOM ツリー

+ +

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

+ +

表示内容を更新する

+ +

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

+ +

Button to update the DOM Inspector display

+ +

フィルタリング

+ +

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

+ +

+ +

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

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 +--- +
{{ToolsSidebar}}
+

スポイトは Firefox 31 の新機能です。

+
+ +

スポイトツールで、ページ内から色を選択することができます。これはページ上で拡大鏡のように動作して、ピクセル単位の精度で選択することができます。拡大鏡の下には、現在選択しているピクセルの色の値を、オプション > 調査 で選択した色単位で表示します:

+ +

このツールは以下 2 種類の用途で使用できます:

+ + + +

色をクリックボードにコピーする

+ +

Eyedropper は 2 種類の方法で開くことができます:

+ + + +

ページ上でマウスポインターを動かすのに応じて、スポイトで選択中の色の値が変わります。クリックすると、現在の色の値をクリップボードにコピーします。

+ +

{{EmbedYouTube("xf2uk6UyRB8")}}

+ +

ルールビューで色の値を変更する

+ +

インスペクターのルールビューにある色の値では、隣に色のサンプルを表示しています。色のサンプルをクリックするとカラーピッカーがポップアップします。Firefox 31 より、ポップアップにスポイトのアイコンがあります。このアイコンをクリックすると、スポイトツールが起動します。

+ +

スポイトツールでクリックすると、ルールビューの色がスポイトで選択した色に設定されます。

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

キーボードショートカット

+ +

{{Page ("ja/docs/tools/Keyboard_shortcuts", "eyedropper")}}

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 +--- +
{{ToolsSidebar}}
+
+
+

このページでは、"旧版" の Firefox OS Simulator について説明します。これは Firefox 1.1 向けのアプリを開発している場合にのみ使用すべきであり、また Firefox 24 または 25 にのみインストール可能です。

+ +

Firefox OS 1.2 以降向けのアプリを開発している場合は、代わりにアプリマネージャを使用しなければなりません。

+ +

支援が必要である場合は、dev-developer-tools メーリングリスト または irc.mozilla.org の #devtools で質問してください。

+
+ +

Firefox OS Simulator アドオンで、デスクトップ環境にて Firefox OS アプリ のテストやデバッグが可能になります。Simulator では、実際のデバイスを使うよりも Code-Test-Debug のサイクルが高速化します。また当然ながら、Simulator を使うために実際のデバイスは必要ありません。

+ +

本質的に、Simulator アドオンを構成するものは以下のとおりです:

+ +
    +
  • Simulator: これには Firefox OS デスクトップクライアントが含まれています。これはデスクトップ環境で実行する、Firefox OS の高水準層バージョンです。Simulator には、標準的な Firefox OS デスクトップビルドには存在しない付加的なエミュレーション機能も含まれています。
    • +
  • Dashboard: Simulator の開始・終了やアプリのインストール・アンインストール・デバッグを可能にする、Firefox ブラウザで提供するツールです。また Dashboard は、アプリを実際のデバイスにプッシュしたり、アプリマニフェストについて一般的な問題をチェックしたりすることもできます。
    • +
+ +

以下のスクリーンショットで、Simulator を使用したデバッグセッションを示しています。

+ +

Dashboard は右上の、Firefox のタブ内で実行しているものです。ここでは "Where am I?" という名前のパッケージ型アプリを追加しました。左上では、Simulator アプリを実行しています。またデバッグツールを接続しており、それは下部にあるパネルです。コンソールペインに、アプリに関するメッセージが表示されているのをご覧いただけるでしょう。

+ +

+ +

本ガイドでは以下のトピックを扱います:

+ + + +
+

実際の Web アプリのデバッグに Simulator を使用する方法について示した、実践的な詳細説明については Simulator Walkthrough のページをご覧ください。

+
+ +

Simulator アドオンのインストール

+ +

Simulator は、Firefox のアドオンとしてパッケージ化および頒布しています。インストール方法は以下のとおりです:

+ +
    +
  1. Firefox で addons.mozilla.org 内の Simulator のページを訪れてください。
    2. +
  2. "Firefox に追加" をクリックしてください。
    3. +
  3. アドオンをダウンロードすると確認のメッセージが表示されますので、"今すぐインストール" をクリックしてください。
    4. +
+ +

アドオンのサイズの都合上、インストール中に Firefox が数秒間フリーズしたり、"警告: 応答のないスクリプト" というタイトルのダイアログが表示される場合があります。ダイアログが表示された場合は、インストールが完了するまで待つために "処理を続行" をクリックしてください。これは Firefox 27 以降では表示されないでしょう。
+
+ Simulator アドオンをインストールすると Firefox が定期的に新しいバージョンの確認を行い、自動的に更新します。

+ +

Simulator をインストールすると Dashboard が自動的に開きますが、"Firefox" メニュー (または OS X や Linux では "ツール" メニュー) の "Web 開発" で "Firefox OS Simulator" を選択することで、いつでも Dashboard を開くことができます:

+ +


+ Dashboard は、アプリを Simulator に追加したり実行したりするために使用するツールです。以下のようなものです:

+ +

アプリの追加・削除・更新

+ +

アプリの追加

+ +

パッケージ型アプリを Simulator に追加するには、Dashboard を開いて "Add Directory" をクリックします。そして、アプリのマニフェストファイルを選択してください。
+
+ ホスト型アプリを追加するには、"URL for page or manifest.webapp" と表示されているテキストボックスに URL を入力して "Add URL" をクリックしてください。URL がマニフェストを指している場合は、そのマニフェストが使用されます。そうでない場合は、Dashboard が当該 URL 向けのマニフェストを生成します: よって、URL を入力するだけで任意の Web サイトをアプリとして追加できます。
+
+ アプリを追加すると、Dashboard がマニフェストファイルに対して一連のテストを行って、一般的な問題のチェックを行います。どのようなテストを行うかについて詳しくは、マニフェストの検証の章をご覧ください。

+ +

マニフェストの検証でアプリにエラーが発見されなければ、Dashboard は自動的に Simulator でアプリを実行します。

+ +

アプリの管理

+ +

アプリを追加すると、Manager 内のインストールされたアプリのリストに表示されます:
+
+ それぞれのエントリは、アプリに関する下記の情報を示します:

+ +
    +
  • アプリの名前: マニフェストから取得します
    • +
  • アプリの種類: "Packaged"、"Hosted"、"Generated" のいずれかになります
    • +
  • アプリのマニフェストファイルへのリンク
    • +
  • マニフェストの検証結果
    • +
+ +

また、下記 4 つのコマンドもあります:

+ +
    +
  • "Refresh": アプリに何らかの変更を施した後に、Simulator 内のアプリを更新および再読み込みします。また Dashboard で、マニフェストの検証を再度実行します。アプリに変更を施しても、インストール済みアプリへ自動的には反映されません: 変更点を適用するために、アプリの更新が必要です。
    • +
  • "Connect": 選択したアプリを、開発ツールに接続します。アプリを実行していない場合は、Dashboard が Simulator およびアプリを起動します。
    • +
  • "Remove" ("X"): アプリを Simulator や Dashboard から削除します。Dashboard を開いている間は、このアクションを取り消すことができます。
    • +
  • "Receipt": 課金アプリのレシート検証のテストを行います。テストしたいレシートの種類を選択すると、そのテストレシートとともにアプリを再インストールします。
    • +
+ +
+

Simulator のウィンドウでアプリを更新: アプリを実行しているときに、メニューバーでの操作または割り当てられたショートカットキーによって、Simulator のウィンドウで直接アプリを更新および再読み込みできます。

+
+ +

マニフェストの検証

+ +

マニフェストを与えると、Manager はマニフェストの検証テストをいくらか実行します。これは、3 つのカテゴリについて問題を報告します:

+ +
    +
  • manifest errors: アプリのインストールや実行ができなくなる問題です。
    • +
  • manifest warnings: アプリの正常な動作を妨げる問題です。
    • +
  • simulator-specific warnings: アプリが使用している機能で、Simulator が未サポートであるものです。
    • +
+ +

アプリのエントリ内に、発生した問題の要約を表示します: 要約をクリックすると、詳細が表示されます。

+ +

Manifest errors

+ +

Dashboard は以下のような状況をエラーとして報告します。これを修正しなければ、当該アプリは Simulator で実行できないでしょう:

+ +
    +
  • マニフェストに、必須のフィールド "name" がない。
    • +
  • マニフェストが正しい JSON ではない。
    • +
  • アプリはホスト型アプリであるが、マニフェスト内の type フィールドが "privileged" または "certified" である。これはパッケージ型アプリでのみ有効。
    • +
  • 一般的な appCache のエラー (パッケージ型アプリは appCache を使用できない、マニフェストファイルをリクエストすると HTTP リダイレクトあるいは HTTP エラーのステータスが返る)
    • +
+ +

以下は、"name" がないマニフェストを追加しようとしたときの結果です:
+

+ +

Manifest warnings

+ +

Dashboard は、以下のマニフェストの問題を Warning として報告します:

+ +
    +
  • アイコンがない。
    • +
  • アイコンが 128 ピクセルより小さい: Marketplace に提出するすべてのアプリは、少なくとも 128 ピクセル四方のアイコンが最低 1 個必要です。
    • +
  • type フィールドを認識できない。
    • +
  • マニフェストで、認識できない許可設定を要求している。
    • +
  • マニフェストで、拒否されるであろう許可設定を要求している。
    • +
  • マニフェストで、アクセス許可を決められない許可設定を要求している。
    • +
+ +

Simulator-specific warnings

+ +

最後に Manager は、Simulator で完全にはサポートしていない Firefox OS の機能を使用するアプリに対して、Warning を発します:

+ +
    +
  • type フィールドが "certified" ですが、Simulator は certified アプリを完全にはサポートしていません。
    • +
  • マニフェストで、Simulator が未サポートの API を使用する許可設定を要求している。
    • +
+ +

Simulator を実行する

+ +

Simulator を起動する方法は 2 通りあります:

+ +
    +
  • アプリを追加したり、アプリ名の隣にある "Refresh" や "Connect" ボタンをクリックすると、Dashboard が自動的に Simulator でアプリを実行します。
    • +
  • Dashboard の左側にある "Stopped" という名前のボタンをクリックすると、Simulator のホームスクリーンがブートします。なお、あなたのアプリを実行するには操作が必要です。
    • +
+ +

どちらの方法でも、Simulator を実行すると "Stopped" という名前のボタンが緑色に変わり、名前が "Running" に変わります。Simulator を停止するには、このボタンをもう一度クリックしてください。
+
+ Simulator は別のウィンドウとして表示され、シミュレーションするスクリーン領域が 320x480 ピクセルであるようなサイズになります。また、ウィンドウ下部のツールバーと上部のメニューバーで付加機能を提供します:

+ +

+ +

タッチイベントをシミュレーションするには、マウスボタンでクリックして、ボタンを押したままドラッグします。よってホームスクリーンで右から左へクリック アンド ドラッグを行うことで、組み込み済みのアプリと合わせてあなたが追加したアプリが表示されます:

+ +

+ +

Simulator ツールバー

+ +

ウィンドウ下部のツールバーには左から順にホームボタン、スクリーン回転ボタン、Geolocation ボタンがあります。

+ +
    +
  • ホームボタンを押すとホームスクリーンに移動します (あるいは、2秒間押し続けるとタスクリストを表示します)。
    • +
  • スクリーン回転ボタンを押すと、デバイスの向きのポートレートとランドスケープを切り替えます。これは orientationchange イベントを生成します。
    • +
  • Geolocation ボタンを押すと、現在の緯度・経度情報か独自の緯度・経度情報による位置情報の提供を問い合わせるダイアログが表示されます: この情報は Geolocation API を通して、アプリで利用できます。
    • +
+ +

+ +

Simulator メニューバー

+ +

Simulator 上部のメニューバーで、開発をより効率的にする有用なコマンドを利用できます:

+ +

+ +
    +
  • File -> Quit (Ctrl/Cmd - Q): Simulator をシャットダウンします。
    • +
  • App -> Refresh (Ctrl/Cmd - R): 実行中のアプリを更新します。
    • +
+ +

"App Refresh" コマンドのキーボードショートカットで、Web ページ開発のようにアプリを反復開発することができます:

+ +
    +
  • コードを編集します (そして、必要であれば volo / yeoman / grunt などのビルドツールに戻ります)
    • +
  • Simulator で実行しているアプリを更新するために、キーボードショートカットを押下します。
    • +
+ +
+

"Refresh App and Clear Data" 隠しショートカット: アプリ向けに Simulator が保存しているデータをクリアすることが役に立つ場合がありますので、Simulator には以下のデータをクリアするとともに実行中のアプリを更新する隠しショートカット Shift - Ctrl/Cmd - R があります:

+ +
    +
  • +

    localStorage / sessionStorage

    +
    • +
  • +

    Cookie

    +
    • +
  • +

    indexedDB

    +
    • +
  • +

    appCache

    +
    • +
+
+ +

開発ツールの接続

+ +

アプリのデバッグを支援するため、Simulator に開発ツールを接続できます。現時点では JavaScript デバッガ、Web コンソール、スタイルエディタ、プロファイラ、ネットワークモニタしか接続できませんが、より多くの開発ツールをサポートするよう作業中です。

+ +
+

一部のツールは Beta、Aurora、あるいは Nightly ビルドの Firefox のみで使用できます。

+
+ +

開発ツールを Simulator に接続するには、アプリの "Connect" ボタンをクリックします:

+ +

+ +

Dashboard が開発ツールボックスペインを Dashboard タブの下部に表示して、アプリをツールに接続します:

+ +

+ +

Web コンソール

+ +

アプリはグローバルの console オブジェクトを使用してこのコンソールにログを出力できます。また、アプリによって生成される他のさまざまなメッセージも表示します: ネットワークリクエスト、CSS や JS の警告やエラー、セキュリティエラー。(Web コンソールについて詳しく学びます)

+ +

デバッガ

+ +

エラーや問題点を早急に追究するためにデバッガを使用して、接続したアプリで実行している JavaScript コードのステップ実行、ブレークポイントの管理、式のウォッチができます。(デバッガについて詳しく学びます)

+ +

スタイルエディタ

+ +

スタイルエディタを接続すると、アプリで参照している CSS ファイルの閲覧や編集が可能になります。変更した箇所はアプリを更新する必要なしに、リアルタイムにアプリへ反映されます。(スタイルエディタについて詳しく学びます)

+ +

プロファイラ

+ +

アプリに接続したプロファイラツールを使用して、JavaScript コードで時間がかかっている箇所を見つけることができます。プロファイラはサンプルについて現在の JavaScript のコールスタックやコンパイル状況を周期的にサンプリングします。(プロファイラについて詳しく学びます)

+ +

ネットワークモニター

+ +

新たなネットワークモニターのおかげで、アプリが開始したすべてのネットワークリクエストのステータス、ヘッダ、コンテンツ、タイミングを、ユーザフレンドリーなインターフェイスで分析できます。(ネットワークモニターについて詳しく学びます)

+ +

レシート

+ +

課金アプリを開発している場合は、正当な (暗号により署名された) レシートでレシート検証コード (例えば、ユーザがアプリを購入済みであることや払い戻しの操作を行ったことを検証して、ユーザへの通知および状況に応じて機能のロックやロック解除を行う) のテストを行うべきです。

+ +

Simulator Dashboard で各アプリの項目にある "Receipts" メニューにより、"Valid"、"Invalid"、"Refunded" のテストレシートとともにアプリをインストールできます。テストしたいレシートの種類を選択すると、Dashboard が Marketplace のレシートサービスからその種類のテストレシートを取得して、Simulator でテストレシートとともにアプリを再インストールします:

+ +

+ +

デバイスへのプッシュ

+ +

Firefox OS デバイスを所有している場合は、デバイスを Simulator に接続でき、またアプリを Dashboard からデバイスへプッシュすることもできます。

+ +

デバイスを接続する

+ +

デバイスを接続するには、connecting a Firefox OS device to the desktop で案内している手順に従ってください。ADB は Simulator アドオンに組み込まれていますので、インストールする必要はありません。

+ +

アプリをデバイスにプッシュする

+ +

デバイスとデスクトップの設定を行って、デバイスを USB でデスクトップ PC に接続すると、"Device connected" というメッセージが Dashboard の左側に表示され、また各アプリのエントリに "Push" という名前のコマンドが新たに表示されます:

+ +

+ +

"Push" をクリックすると、アプリが Firefox OS デバイスにインストールされます。

+ +
+

手動の作業:

+ +
    +
  • +

    アプリをデバイスにプッシュしたら、更新されたコンテンツを得るために手動でアプリを閉じて再起動しなければなりません。

    +
    • +
  • +

    マニフェストで何らかの (例えばアプリの name、orientation、type、permissions) 更新を行った場合は、変更点を反映させるためにオペレーティングシステムの再起動が必要です。

    +
    • +
+
+ +

Firefox OS デバイス接続の確認

+ +

デバイスを再起動するごとに、最初の "Push" 要求はデバイス側での確認が必要です:

+ +

+ +

Linux でのトラブルシューティング

+ +

udev ルールを作成した後にデバイスを接続できない場合は、こちらのバグをご覧ください。

+ +

Simulator の制限事項

+ +

Firefox OS Simulator は完全なシミュレーションではないことに注意してください。

+ +

ハードウェアの制限事項

+ +

スクリーンサイズを除き、Simulator はメモリ容量や CPU の速度といった、Firefox OS デバイスのハードウェアの制限事項をシミュレーションしません。

+ +

Audio/Video コーデック

+ +

ハードウェアアクセラレーションによるデコードに依存する以下のコーデックは、それゆえに未サポートです:

+ +
    +
  • MP3
    • +
  • AAC
    • +
  • H.264 (MP4)
    • +
  • WebM
    • +
+ +

すなわち、これらのコーデックに依存する Youtube などの Web サイトやビデオ再生アプリのテストに Simulator を使用することはできません。

+ +

非対応の API

+ +

デバイスで動作する API には、Simulator で動作しないものがあるでしょう。これは一般的に、サポートするハードウェアがデスクトップ PC で使用できないためです。私たちは Geolocation のように一部の API のシミュレーションを実装しており、将来のリリースでさらに増やす予定です。ただし、現時点では以下の API をサポートしていません。これらを使用するとエラーが発生したり、誤った結果になる可能性があります:

+ + + +

助けを得る

+疑問点がある場合は、dev-developer-tools メーリングリスト や irc.mozilla.org の #devtools で質問してみてください。 + +

 

+ +

詳細なログ取得を有効にする

+ +

about:config で設定 extensions.r2d2b2g@mozilla.org.sdk.console.logLevel を作成して値を整数値 0 に設定して、アドオンを無効化および再有効化してください。Simulator のオペレーションに関する付加的なメッセージがエラーコンソール (より新しいバージョンの Firefox ではブラウザコンソール) に表示されます。

+
+
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 +--- +
{{ToolsSidebar}}
+ +
+

このページでは、Firefox OS 1.2 以降をターゲットとする開発者向けの Firefox OS シミュレータについて説明します。 Firefox OS 1.1 用のアプリケーションを開発する場合は、代わりに Firefox OS 1.1 Simulator のドキュメントを参照してください。

+
+ +

Firefox OS シミュレータは、Firefox OS デバイスをシミュレートするが、デスクトップ上で動作する Firefox OS の上位層のバージョンです。つまり多くの場合、アプリをテストしてデバッグするために実際のデバイスは必要ありません。これは、Firefox OS デバイスと同じサイズのウィンドウで実行され、Firefox OS ユーザーインターフェイスと組み込みアプリケーションを含み、Firefox OS デバイス API の多くをシミュレートします。

+ +

Simulator は Firefox のアドオンとしてパッケージ化され、配布されます。Firefox にダウンロードしてインストールしたら、App Manager ツールを使用してそれを実行し、アプリをプッシュしてデベロッパーツールをアタッチすることができます。現在、WebIDE の Nightly/Aurora にあります。

+ +

インストール

+ +

シミュレータをインストールするには、WebIDE の Manage Simulators ペイン (Firefox 33 以降で利用可能) を使用します。複数のバージョンが用意されており、それらをすべてインストールすることをお勧めします。

+ +

Simulator を起動するには、WebIDE のランタイムリストから選択します。詳細については、WebIDE のマニュアルを参照してください。Simulator が実行されると、実際のデバイスと同様に WebIDE を使用して Simulator をデバッグすることで、デバッグができます。

+ +

アプリケーションマネージャ (WebIDE より前の古いツール) を使用している場合は、次のボタンを使用してシミュレータをインストールできます。

+ +

Simulator のインストール

+ +

シミュレータの UI

+ +

シミュレータは、シミュレートされた画面領域が 320 x 480 ピクセルになるようにサイズが変更された別個のウィンドウとして表示されます。タッチイベントをシミュレートするには、マウスボタンをクリックし、ボタンを押したままドラッグします。ホーム画面から右クリックして右から左にドラッグすると、ビルトインアプリとあなたが追加したアプリが表示されます：

+ +

+ +

Simulator には、下部にツールバーの2つのボタンがあります。

+ + + +

シミュレータの制限

+ +

Firefox OS シミュレータは完璧なシミュレーションではありません。

+ +

ハードウェアの制限

+ +

シミュレータは、画面サイズとは別に、使用可能なメモリや CPU 速度など、Firefox OS デバイスのハードウェア制限をシミュレートしません。

+ +

Audio/video codecs

+ +

次のコーデックは、ハードウェアアクセラレーションによるデコードに依存しているため、まだサポートされていません。

+ + + +

つまり、Simulator を使用して、アプリケーションやこれらのコーデックに依存する Youtube のような Web サイトでのビデオ再生をテストすることはできません。

+ +

サポートされていない API

+ +

サポートしているハードウェアがデスクトップ上で利用できないため、デバイス上で動作する特定の API はシミュレータ上では機能しません。ジオロケーションなどの一部の API のシミュレーションを実装し、今後のリリースでさらに追加する予定です。ただし、現時点では、次の API はサポートされていません。それらを使用すると、エラーがスローされたり、正しくない結果が返される可能性があります

+ + + +

ヘルプの利用

+ +

ご質問がある場合は、dev-developer-tools メーリングリストまたは irc.mozilla.org の #devtools にお問い合わせください。

+ +

詳細ログを有効にする方法

+ +

Web Console でアプリからログに記録されたメッセージを見ることができ、WebIDE を使用してアプリケーションに添付することができます。アプリの起動中に起こった初期のメッセージを、コンソールが接続されて動作する前にキャッチしたい場合は、シミュレータで冗長なログを有効にすることができます。

+ +

about:config を参照し、新しい設定を作成してください。設定名は Simulator の各バージョンごとに異なります。

+ + + +

それを文字列の値 "all" に設定し、アドオンマネージャでアドオンを無効にしてから再び有効にします。Simulator の操作に関する追加のメッセージがブラウザコンソールに表示されます。

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 +--- +
{{ToolsSidebar}}
+ +

デスクトップとモバイルで、HTML と CSS と JavaScript を調査、編集、デバッグします。

+ +
+

Firefox で利用できるウェブ開発ツールを使う上での情報を探すのに、あなたはうってつけの場所に来ています — このページは主要ツールと追加ツールすべての詳細な情報、Android 用 Firefox への接続やデバッグのやり方といったより詳しい情報、開発ツールの拡張のやり方、ブラウザー全体のデバッグのやり方へのリンクを提供します。

+サイドバーにあるリンクを探索して、ページまで読み進めてください。開発ツールに関してのフィードバックや質問があれば、我々のメーリングリストか IRC チャンネル (ページ最下部のコミュニティリンクをご覧ください) にメッセージを送ってください。もし文書に関しての明確なフィードバックや質問があれば、MDN discourse が投書するのに良いサイトです。
+ +
+

注記: もしウェブ開発や開発ツールの使用について初心者ならば、ウェブ開発を学ぶ が役に立つでしょう — 良いスタートラインとして ウェブ入門 と ブラウザー開発者ツールとは？ をご覧ください。

+
+
+ +

主要ツール

+ +

Windows と Linux では Ctrl + Shift + I 、OS X では Cmd + Opt + I で開くことができる開発者ツールバーの右側には、アクションを実行したり、ツールの設定を変更できるいくつかのボタンがあります。

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
このボタンはページに複数の iframe があるときにだけ表示されます。現在のページにある iframe のリストを表示するためにクリックをし、動作させたいものを選択します。
+

現在のページのスクリーンショットを撮影する場合にこのボタンをクリックします。(注意: この機能は既定では利用可能となっていないので、アイコンを表示させるのには設定で有効にしておく必要があります。)

+
レスポンシブデザインモードに切り替えます。
+

分割したコンソールを表示したり隠したりするドッキングに関するオプション、開発ツールの設定を含むメニューを開きます。メニューにはまた Firefox のウェブのツールや Mozilla Community の文書へのリンクも含みます。

+
開発ツールを閉じます。
+ +
+
+

ページインスペクター

+ +

The all-new Inspector panel in Firefox 57.

+ページの内容やレイアウトを、閲覧および編集します。ボックスモデル、アニメーション、グリッドレイアウトなど、さまざまな観点でページを視覚化します。
+ +
+

ウェブコンソール

+ +

The all-new Console in Firefox 57.

+ウェブページが記録したメッセージの閲覧や、JavaScript を使用してページとやり取りします。
+
+ +
+
+

JavaScript デバッガー

+ +

The all-new Firefox 57 Debugger.html

+ +

ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。

+
+ +
+

ネットワークモニター

+ +

The Network panel in Firefox 57 DevTools.

+ページを読み込むときに実施したネットワークリクエストを確認します。
+
+ +
+
+

パフォーマンスツール

+ +

Performance Tools in Firefox 57 Developer Tools

+サイトの全体的な応答性、JavaScript やレイアウトのパフォーマンスを分析します。
+ +
+

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

+ +

Responsive Design mode in Firefox 57.

+ +

さまざまな端末やネットワークの環境で、あなたのウェブサイトやアプリがどのように見えるかや動作するかを確認します。

+
+
+ +
+

注: 開発ツールの入っている UI の総称はツールボックスです。

+
+ +
+
+

アクセシビリティインスペクタ

+
+
+ +
+
+

Performance Tools in Firefox 57 Developer Tools

+ +

ページのアクセシビリティツリーにアクセスする手段を提供し、欠落しているものや注意が必要なものを確認することができます。

+
+
+ +
+

メモ: DevTools がすべてその中にある UI の総称は、ツールボックスです。

+
+ +

その他のツール

+ +

これらの開発ツールも、Firefox に内蔵しています。上記の「主要ツール」とは異なり、日常的には使用しないかもしれません。

+ +
+
+
メモリー
+
どのオブジェクトがメモリーを使用し続けているかを明らかにします。
+
ストレージインスペクター
+
ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。
+
DOM プロパティビューアー
+
ページの DOM 属性や関数などを調査します。
+
開発ツールバー
+
開発ツール用のコマンドラインインターフェイスです。
+
アクセシビリティインスペクター
+
ページのアクセシビリティツリーへのアクセス手段を提供し、何が足りないのかや注意が必要なのかを確認できるようにします。
+
スポイト
+
ページ内の色を選択します。
+
スクラッチパッド
+
JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディターです。
+
スタイルエディター
+
現在表示しているページの CSS スタイルの閲覧や編集を行います。
+
シェーダーエディター
+
WebGL で使用する頂点シェーダーとフラグメントシェーダーの閲覧や編集を行います。
+
Web Audio エディター
+
オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。
+
スクリーンショットを撮影
+
ページ全体またはひとつの要素のスクリーンショットを撮影します。
+
ページの一部分を計測する
+
ウェブページの特定のエリアを計測します。
+
定規
+
ウェブページ上に水平、垂直な定規を重ねます。
+
+
+ +
+
+

+ +

最新の開発ツールと機能については、Firefox Developer Edition を試してみてください。

+ +

Firefox Developer Edition のダウンロード

+
+
+ +
+

開発ツールに接続する

+ +

キーボードショートカット や同等のメニュー項目を使用して開いた開発ツールは、現在アクティブなタブに表示しているドキュメントを対象にします。一方、現在開いているブラウザー、別のブラウザー、別の端末といった、さまざまな対象物に対してもツールを接続できます。

+ +
+
+
about:debugging
+
アドオン、コンテンツタブ、ブラウザーで実行する Worker をデバッグします。
+
Android 版 Firefox に接続する
+
Android 端末で実行している Firefox のインスタンスに、開発ツールを接続します。
+
iframe に接続する
+
現在のページ内の、特定の iframe に開発ツールを接続します。
+
ほかのブラウザーに接続する
+
Android 版 Chrome や iOS 版 Safari に、開発ツールを接続します。
+
+
+ +
+

ブラウザーのデバッグ

+ +

通常、開発ツールはウェブページ、またはウェブアプリに接続して利用します。しかしこれらのツールのほとんどは、ブラウザーへと接続することもできます。これはブラウザーやアドオンの開発に役立ちます。

+ +
+
+
ブラウザーコンソール
+
ブラウザー自体やアドオンが出力するログの確認や、ブラウザーのスコープ内での JavaScript 実行を行います。
+
ブラウザーツールボックス
+
開発ツールをブラウザー自体に接続します。
+
+
+ +
+

開発ツールの拡張

+ +

Firefox 開発ツールの拡張についての情報は、MDN のブラウザー拡張機能セクションの開発ツールの拡張 を見てください。

+ +

Firebug からの移行

+ +

Firebug は寿命が近づいています（理由の詳細については Firebug lives on in Firefox DevTools を参照してください）。人によってはあまり馴染みのない開発ツールへの移行に挑戦してくださっていることに感謝します。Firebug から Firefox 開発者ツールへ簡単に移行できるようにするため、私たちは便利なガイド「Firebug からの移行」書いています。

+ +
+

貢献

+ +

開発ツールの改良を支援したい場合は、以下のリソースから始めましょう。

+ +
+
+
Get Involved
+
始め方を解説した Mozilla wiki ページです。
+
firefox-dev.tools
+
作業中のバグを探せるツールです。
+
+
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 +--- +
{{ToolsSidebar}}

{{Index("/ja/docs/Tools")}}

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 +--- +
{{ToolsSidebar}}
+

JSON ビューアーは Firefox 44 の新機能です。

+ +

Firefox 53 より前のバージョンでは、JSON ビューアーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。ほかのリリースチャンネルでこの機能を有効化するには、設定項目 devtools.jsonview.enabled を true にしてください。

+ +

Firefox 53 より、JSON ビューアーが Beta および通常のリリース版の Firefox でもデフォルトで有効になりました。

+
+ +

Firefox に JSON ビューアーが含まれています。JSON ファイルをブラウザーに読み込むと、分析して構文をハイライト表示します。配列やオブジェクトは折りたたんで表示しており、"+" アイコンを使用して展開できます。

+ +

{{EmbedYouTube("ktFcevMwYXw")}}

+ +

JSON ビューアーには、JSON をフィルタリングできる検索ボックスがあります。

+ +

生の JSON データと整形済みデータの両方を確認できます。

+ +

最後に、ドキュメントがネットワークリクエストの結果である場合は、リクエストおよびレスポンスのヘッダーもビューアーで表示します。

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 +--- +
{{ToolsSidebar}}
+ +

本ページでは、Firefox 内蔵の開発ツールで使用している、すべてのキーボードショートカットを一覧化しています。

+ +

最初のセクションではそれぞれのツールを開くためのショートカットを、次のセクションではツールボックス自体に適用するショートカットを一覧化します。その後に各ツールのセクションがあり、そこではツール内で使用できるショートカットを一覧化しています。

+ +

アクセスキーはロケールに依存するため、本ページでは文書化していません。

+ +

ツールの開始と終了

+ +

これらのショートカットは、メインのブラウザーウィンドウで特定のツールを開始します。ツールボックスに含まれているツールでは、ツールがアクティブである場合はツールを終了するショートカットとして機能します。ブラウザーコンソールのように新しいウィンドウを開くツールでは、ツールを終了するためにウィンドウを閉じなければなりません。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
ツールボックスを開く (最後にアクティブであったツールも開く)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
ツールボックスをフォアグラウンドに移動 (ツールボックスを別のウィンドウで開いており、そのウィンドウがフォアグラウンドではない場合)Ctrl + Shift + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
ツールボックスを閉じる (ツールボックスを別のウィンドウで開いており、そのウィンドウがフォアグラウンドである場合)Ctrl + Shift + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
ウェブコンソールを開く1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
インスペクターを開く/閉じるCtrl + Shift + CCmd + Opt + CCtrl + Shift + C
デバッガーを開くCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
スタイルエディターを開くShift + F7Shift + F7 1Shift + F7
プロファイラーを開くShift + F5Shift + F5 1Shift + F5
ネットワークモニターを開く2Ctrl + Shift + ECmd + Opt + ECtrl + Shift + E
開発ツールバーを開くShift + F2Shift + F2 1Shift + F2
レスポンシブデザインモードを開くCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
ブラウザーコンソールを開く3Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
ブラウザーツールボックスを開くCtrl + Alt + Shift + ICmd + Opt + Shift + ICtrl + Alt + Shift + I
スクラッチパッドを開くShift + F4Shift + F4Shift + F4
WebIDE を開くShift + F8Shift + F8Shift + F8
ストレージインスペクター4Shift + F9Shift + F9Shift + F9
+ +

1. 他のツールボックス内ツールと異なり、このショートカットではウェブコンソールが閉じません。代わりに、ウェブコンソールのコマンドラインにフォーカスがあたります。ウェブコンソールを閉じるには、ツールボックスのグローバルなショートカットである Ctrl + Shift + I (Mac では Cmd + Opt + I) を使用してください。

+ +

2. Firefox 55 より前のバージョンでは、キーボードショートカットが Ctrl + Shift + Q (Mac では Cmd + Opt + Q) でした。

+ +

3. Firefox 38 より前のバージョンでは、ブラウザーコンソールが Firefox のウィンドウの陰にある状態で同じショートカットを押下すると、ブラウザーコンソールが閉じます。Firefox 38 から、ブラウザーコンソールが Firefox のウィンドウの陰にあるときは、このショートカットでブラウザーコンソールを前面に表示してフォーカスをあてるようになりました。

+ +

4. ツールはデフォルトで無効であり、オプションパネルでツールを有効化しなければショートカットは動作しません。

+ +

ツールボックス

+ +
+

これらのショートカットはどのツールがアクティブであるかにかかわらず、ツールボックスを開いているときに動作します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
開発ツールを左から右に切り替えるCtrl + ]Cmd + ]Ctrl + ]
開発ツールを右から左に切り替えるCtrl + [Cmd + [Ctrl + [
+

アクティブなツールとツールのオプションを切り替える

+ 		Ctrl + Shift + OCmd + Shift + OCtrl + Shift + O
アクティブなツールとツールのオプションを切り替える (Firefox 43 の新機能)F1F1F1
+

最後に使用した 2 つの ドッキングモード を切り替える (Firefox 41 の新機能)

+ 		Ctrl + Shift + DCmd + Shift + DCtrl + Shift + D
コンソールの常時表示を切り替える (コンソールツールを選択している場合を除く)EscEscEsc
+
+ +
+

これらのショートカットは、ツールボックス内の全ツールで動作します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
フォントサイズを大きくするCtrl + + Cmd + + Ctrl + +
フォントサイズを小さくするCtrl + -Cmd + -Ctrl + -
フォントサイズをリセットするCtrl + 0Cmd + 0Ctrl + 0
+
+ +

ソースエディター

+ +
+

以下の表は、ソースエディターのデフォルトのショートカットの一覧です。

+ +

開発ツールのオプションの エディター設定 で、キーバインドとして Vim、Emacs、Sublime Text を選択できます。

+ +

あるいは、about:config で設定項目 devtools.editor.keymap を選択して "vim"、"emacs"、または "sublime" を設定してください。この設定によりソースエディターを使用するすべての開発ツールで、選択したキーバインドを使用します。設定を反映させるには、エディターを開き直さなければなりません。

+ +

Firefox 33 よりキーバインドの設定を開発ツールのオプションの エディター設定 に配置しましたので、about:config に代わりここで設定できます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
指定行へ移動Ctrl + JCmd + JCtrl + J
ファイル内を検索Ctrl + FCmd + FCtrl + F
再検索Ctrl + GCmd + GCtrl + G
すべて選択Ctrl + ACmd + ACtrl + A
切り取りCtrl + XCmd + XCtrl + X
コピーCtrl + CCmd + CCtrl + C
貼り付けCtrl + VCmd + VCtrl + V
元に戻すCtrl + ZCmd + ZCtrl + Z
やり直しCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
インデント挿入TabTabTab
インデント削除Shift + TabShift + TabShift + Tab
上の行へ移動Alt + ↑Alt + ↑Alt + ↑
下の行へ移動Alt + ↓Alt + ↓Alt + ↓
行のコメント化/コメント解除Ctrl + /Cmd + /Ctrl + /
+
+ +

ページインスペクター

+ +
+ + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
要素を調査するCtrl + Shift + CCmd + Shift + CCtrl + Shift + C
+ +

ノードの選択

+ +

これらのショートカットは、ページから要素を選択 がアクティブであるときに動作します。

+ + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
マウスポインターの下にある要素を選択して、選択モードを終了するClickClickClick
マウスポインターの下にある要素を選択して、選択モードは継続する (Firefox 52 の新機能)Shift + ClickShift + ClickShift + Click
+ +

HTML ペイン

+ +

これらのショートカットは、インスペクターの HTML ペイン 内で動作します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
選択中のノードを削除するDeleteDeleteDelete
削除したノードを元に戻すCtrl + ZCmd + ZCtrl + Z
ノードを再び削除するCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
次のノードへ移動する (展開しているノードに限る)↓↓↓
前のノードに移動する↑↑↑
選択中のノードを展開する→→→
選択中のノードを折りたたむ←←←
ノード内で次の属性に移動するTabTabTab
ノード内で前の属性に移動するShift + TabShift + TabShift + Tab
選択中の属性を編集するEnterReturnEnter
選択中のノードを隠す/表示するHHH
HTML ペインの検索ボックスにフォーカスを移動するCtrl + FCmd + FCtrl + F
HTML として編集するF2F2F2
HTML の編集を終了するF2 / Ctrl +EnterF2 / Cmd + ReturnF2 / Ctrl + Enter
選択中のノードの outerHTML をコピーする (Firefox 42 の新機能)Ctrl + CCmd + CCtrl + C
選択中のノードがある位置へスクロールする (Firefox 44 の新機能)SSS
検索がアクティブであるとき、マークアップ内で次にマッチするものを検索するEnterReturnEnter
検索がアクティブであるとき、マークアップ内で前にマッチするものを検索する (Firefox 48 の新機能)Shift + EnterShift + ReturnShift + Enter
+ + + +

これらのショートカットは、パンくずリストバー にフォーカスがあるときに動作します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
パンくずリストバーで前の要素に移動する←←←
パンくずリストバーで次の要素に移動する→→→
HTML ペイン にフォーカスを移動するShift + TabShift + TabShift + Tab
CSS ペイン にフォーカスを移動するTabTabTab
+ +

CSS ペイン

+ +

これらのショートカットは、インスペクターの CSS ペイン 内で動作します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
CSS ペインの検索ボックスにフォーカスを移動するCtrl + FCmd + FCtrl + F
検索ボックスの内容を消去する (検索ボックスにフォーカスがあり、内容が入力されている場合に限る)EscEscEsc
次のプロパティーや値に移動するTabTabTab
前のプロパティーや値に移動するShift + TabShift + TabShift + Tab
プロパティーや値の編集を始める (ルールビューでプロパティーまたは値が選択されており、すでに編集中ではない状態に限る)Enter または SpaceReturn または SpaceEnter または Space
オートコンプリートの候補で上下に移動する (ルールビューでプロパティーまたは値を編集中である状態に限る)↑ , ↓↑ , ↓↑ , ↓
現在のオートコンプリート候補を選択する (ルールビューでプロパティーまたは値を編集中である状態に限る)Enter または TabReturn または TabEnter または Tab
選択中の値を 1 増やす↑↑↑
選択中の値を 1 減らす↓↓↓
選択中の値を 100 増やすShift + Page UpShift + Page UpShift + Page Up
選択中の値を 100 減らすShift + Page DownShift + Page DownShift + Page Down
選択中の値を 10 増やすShift + ↑Shift + ↑Shift + ↑
選択中の値を 10 減らすShift + ↓Shift + ↓Shift + ↓
選択中の値を 0.1 増やすAlt + ↑Opt + ↑Alt + ↑
選択中の値を 0.1 減らすAlt + ↓Opt + ↓Alt + ↓
選択中のプロパティーの詳細情報を表示する/隠す (計算済みビューでプロパティーを選択している場合に限る。Firefox 49 の新機能)Enter または SpaceReturn または SpaceEnter または Space
選択中のプロパティーに関する MDN のリファレンスページを開く (計算済みビューでプロパティーを選択している場合に限る。Firefox 49 の新機能)F1F1F1
選択中の CSS ファイルをスタイルエディターで開く (計算済みビューでプロパティーの詳細情報を表示しており、CSS ファイルへの参照にフォーカスをあてている場合に限る。Firefox 49 の新機能)EnterReturnEnter
+
+ +

デバッガー

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
デバッガーを開くCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
現在のファイル内で文字列を検索するCtrl + FCmd + FCtrl + F
現在のファイル内で次を探すCtrl + GCmd + GCtrl + G
スクリプトを名前で検索するCtrl + PCmd + PCtrl + P
ブレークポイントで実行を再開するF8F8 1F8
ステップオーバーF10F10 1F10
ステップインF11F11 1F11
ステップアウトShift + F11Shift + F11 1Shift + F11
+ +

1. 一部の Mac はデフォルトで、ファンクションキーが特別な機能に再割り当てされています。例えば、画面の明るさや音量の変更です。これらのキーを標準的なファンクションキーとして使用するためのガイド (日本語版) をご覧ください。再割り当てされたキーを標準的なファンクションキーとして使用するには、同時に Function キーも押下してください (よってプロファイラーを開くには、Shift + Function + F5 を押してください)。

+
+ +

デバッガー (Firefox 52より前)

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
デバッガーを開くCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
スクリプトフィルター で現在のソースを検索するCtrl + FCmd + FCtrl + F
表示中のソース内で次を検索するEnter / ↑Return / ↑Enter / ↑
表示中のソース内で前を検索するShift + Enter / ↓Shift + Return / ↓Shift + Enter / ↓
スクリプトフィルター ですべてのソースを検索するCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
ファイル名でスクリプトを検索するCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
関数定義を検索するCtrl + DCmd + DCtrl + D
実行停止中に変数をフィルタリングするCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
ブレークポイントから実行を再開するF8F8 1F8
ステップオーバーF10F10 1F10
ステップインF11F11 1F11
ステップアウトShift + F11Shift + F11 1Shift + F11
選択中の行でブレークポイントの設定を切り替えるCtrl + BCmd + BCtrl + B
選択中の行で条件付きブレークポイントの設定を切り替えるCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
選択しているテキストを監視式に追加するCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
スクリプトフィルター で行移動するCtrl + LCmd + LCtrl + L
スクリプトフィルター で検索するCtrl + OCmd + OCtrl + O
ソースペイン で関数定義にジャンプする (Firefox 44 の新機能)Ctrl + クリックCmd + クリックCtrl + クリック
+ +

1. 一部の Mac はデフォルトで、ファンクションキーが特別な機能に再割り当てされています。例えば、画面の明るさや音量の変更です。これらのキーを標準的なファンクションキーとして使用するためのガイド (日本語版) をご覧ください。再割り当てされたキーを標準的なファンクションキーとして使用するには、同時に Function キーも押下してください (よってプロファイラーを開くには、Shift + Function + F5 を押してください)。

+
+ +

ウェブコンソール

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
ウェブコンソールを開くCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
メッセージ表示ペインで検索するCtrl + FCmd + FCtrl + F
オブジェクトインスペクターペイン を消去するEscEscEsc
コマンドラインにフォーカスをあてるCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
ウェブコンソールの内容を消去する +

Ctrl + L

+ +

Firefox 44 以降:

+ +

Ctrl + Shift + L

+ 		Ctrl + L +

Ctrl + L

+ +

Firefox 44 以降:

+ +

Ctrl + Shift + L

+
+ +

コマンドラインインタプリター

+ +

これらのショートカットは、コマンドラインインタプリター 内で動作します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
コンソール出力の先頭にスクロールする (コマンドラインが未入力の場合にのみ動作します)HomeHomeHome
コンソール出力の最後にスクロールする (コマンドラインが未入力の場合にのみ動作します)EndEndEnd
コンソールの出力を上にスクロールするPage upPage upPage up
コンソールの出力を下にスクロールするPage downPage downPage down
コマンド履歴 で前の項目に移動する↑↑↑
コマンド履歴で次の項目に移動する↓↓↓
行の先頭に移動するHomeCtrl + ACtrl + A
行の末尾に移動するEndCtrl + ECtrl + E
現在の式を実行するEnterReturnEnter
複数行の式を入力するため、新しい行を追加するShift + EnterShift + ReturnShift + Enter
+ +

オートコンプリートのポップアップ

+ +

これらのショートカットは、オートコンプリートのポップアップ を表示しているときに動作します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
現在のオートコンプリート候補を受け入れるTabTabTab
オートコンプリートのポップアップをキャンセルするEscEscEsc
前のオートコンプリート候補に移動する↑↑↑
次のオートコンプリート候補に移動する↓↓↓
オートコンプリート候補を上にスクロールするPage upPage upPage up
オートコンプリート候補を下にスクロールするPage downPage downPage down
最初のオートコンプリート候補にスクロールするHomeHomeHome
最後のオートコンプリート候補にスクロールするEndEndEnd
+
+ +

スタイルエディター

+ + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
スタイルエディターを開くShift + F7Shift + F7Shift + F7
オートコンプリートのポップアップを開くCtrl + SpaceCmd + SpaceCtrl + Space
+ +
+

スクラッチパッド

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
スクラッチパッドを開くShift + F4Shift + F4Shift + F4
スクラッチパッドのコードを実行Ctrl + RCmd + RCtrl + R
スクラッチパッドのコードを実行して、結果を オブジェクトインスペクター で表示するCtrl + ICmd + ICtrl + I
スクラッチパッドのコードを実行して、結果をコメントとして挿入するCtrl + LCmd + LCtrl + L
現在の関数を再評価するCtrl + ECmd + ECtrl + E
カレントページを再読み込みして、スクラッチパッドのコードを実行するCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
スクラッチパッドの内容を保存するCtrl + SCmd + SCtrl + S
既存のスクラッチパッドファイルを開くCtrl + OCmd + OCtrl + O
新しいスクラッチパッドを作成するCtrl + NCmd + NCtrl + N
スクラッチパッドを閉じるCtrl + WCmd + WCtrl + W
スクラッチパッド内のコードを整形するCtrl + PCmd + PCtrl + P
オートコンプリート候補を表示するCtrl + SpaceCtrl + SpaceCtrl + Space
インラインドキュメントを表示するCtrl + Shift + SpaceCtrl + Shift + SpaceCtrl + Shift + Space
+
+ +
+

スポイト

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作WindowsmacOSLinux
現在の色を選択するEnterReturnEnter
スポイトを破棄するEscEscEsc
1 ピクセル移動する矢印キー矢印キー矢印キー
10 ピクセル移動するShift + 矢印キーShift + 矢印キーShift + 矢印キー
+
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 +--- +
{{ToolsSidebar}}
+ +

Firefox 59の新機能

+ +

Firefox 59以降、ページの一部を測定 ツールを使用してWebページの特定の領域を測定することができます。

+ +

このツールはデフォルトでは表示されません。ボタンを有効にするには：

+ + + +

[設定/オプション]ボタンと同じ場所に、ツールボックスの右上にある[ページの一部を測定]ボタンが表示されます。

+ +

+ +

ツールを使用する場合はこのボタンをクリックします。これで、ビューポート上にマウスを置くと、そのマウスの横に現在の座標が表示された十字カーソルが表示されます。

+ +

+ +

マウスボタンを押したままドラッグすると、x、y、および対角線の寸法が表示された長方形が描画されます。単位はピクセルです。

+ +

マウスを押し下げるのを止めると、ボタンを放したとき画面上に表示されていた長方形は、再びクリックするまでそこにとどまり、スクリーンショットを撮ることや、情報を書き留めることなどができるようになります。

+ +

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 +--- +
{{ToolsSidebar}}

Firefox 48 より前のバージョンでは、このビューがヒープスナップショットの既定のビューでした。Firefox 48 より既定のビューが ツリーマップビュー になりましたが、"表示:" のドロップダウンリストで総計ビューに切り替えできます:

+ +

+ +

総計ビューは、以下のようなものです:

+ +

+ +

これは、ヒープの内容の内訳を表形式で表示します。データをグループ化する方法は、主に 3 つあります:

+ + + +

これらは、パネルの上部にある "グループ化" ドロップダウンリストで変更できます:

+ +

また、ペインの右上に "フィルター" と表示されているボックスがあります。表示するスナップショットの内容をフィルタリングできますので、例えば特定のクラスのオブジェクトがいくつアロケートされているかをすばやく確認できます。

+ +

Type

+ +

これはデフォルトのビューであり、以下のようなものです:

+ +

+ +

このビューは、ヒープの内容を以下のタイプに分類します:

+ + + +

それぞれのタイプを表の行に表示して、これらの行は、そのタイプのオブジェクトが占めるメモリーの量の順に並べます。例えば前出のスクリーンショットでは、JavaScript の Object がもっとも多くのメモリ、また strings が 2 番目に多くのメモリーを占めていることがわかります。

+ + + +
+
このセクションのスクリーンショットは、monster example page のスナップショットから取得しました。
+
+ +

例えば前出のスクリーンショットでは、以下のことがわかります:

+ + + +

タイプ名の隣に、3 つの星印が三角形のように配置されているアイコンがあります:

+ +

+ +

これをクリックすると、そのタイプのすべてのインスタンスを確認できます。例えば Array では、スナップショット内に Array オブジェクトが 4 個あると表示しています。3 つの星印をクリックすると、4 個の Array インスタンスを表示します:

+ +

+ +

それぞれのインスタンスで、保持サイズとシャローサイズ を確認できます。このスクリーンショットでは、上から 3 個の配列のシャローサイズがかなり多く (ヒープ全体の 5%)、またより多くの保持サイズ (全体の 26%) を占めていることがわかります。

+ +

右側には、"保持パスを表示するノードを選択してください" と表示されているペインがあります。項目を選択すると、その項目の 保持パスパネル を表示します:

+ +

+ +

{{EmbedYouTube("uLjzrvx_VCg")}}

+ +

Call Stack

+ +

Call Stack では、コードのどこでメモリーの割り当てを行っているかを表示します。

+ +

メモリー割り当てのトレースは負荷が高いため、スナップショットでメモリー割り当てが行われる前に "割り当てスタックを記録" にチェックを入れて、明示的に有効化しなければなりません:

+ +

オブジェクトの割り当てを行ったすべての関数を、割り当てたサイズ順に並べて表示します:

+ +


+
+ このビューの構造は コールツリー の構造とよく似ていますが、プロセッサーのサンプルではなく割り当てのみ表示します。例えば、最初の項目では以下のことがわかります:

+ + + +

展開用の三角印を使用してコールツリーの細分化が可能であり、コード内で割り当てを行った箇所を正確に知ることができます。

+ +

シンプルな例を使用して、簡単に説明します。ここでは DOM allocation example を使用します。このページは大量の DOM ノード (200 個の HTMLDivElement オブジェクトと 4000 個の HTMLSpanElement オブジェクト) を生成するスクリプトを実行します。

+ +

メモリ割り当てをトレースしてみましょう:

+ +
    +
  1. メモリツールを開きます。
    2. +
  2. "割り当てスタックを記録" にチェックを入れます。
    3. +
  3. https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html を開きます。
    4. +
  4. スナップショットを採取します。
    5. +
  5. "表示/総計" を選択します。
    6. +
  6. "グループ化/Call Stack" を選択します。
    7. +
+ +

{{EmbedYouTube("DyLulu9eoKY")}}

+ +

ビューは以下のようになるでしょう:

+ +

+ +

これは、ヒープスナップショット全体の 93% を "alloc.js" の 35 行目で呼び出した関数 (始めに呼び出す createToolbars()) が割り当てていることを示しています。

+ +

展開用の三角印を使用してツリーを展開すると、どこでメモリーの割り当てを行っているかを正確に知ることができます:

+ +

+ +

ここでは "バイト" 列と "個数" 列が役に立ちます。これは割り当てたメモリーのサイズと、割り当て数を示します。

+ +

前出の例では alloc.js の 9 行目・23 桁目 にある createToolbarButton() で 4002 個のメモリー領域を割り当てており、それはヒープ全体の 84% を占めています。つまり正確な場所は、{{HTMLElement("span")}} 要素を生成している場所です。

+ +

ファイル名と行番号はリンクになっています。クリックすると、デバッガーでその行を表示します:

+ +

{{EmbedYouTube("zlnJcr1IFyY")}}

+ +

Inverted Call Stack

+ +

Call Stack ビューは、トップダウン型です。これは、メモリーの割り当てが発生した箇所をコールツリーの深部に表示します。よって、プログラムのどこでメモリーを大量に消費しているかの概要を知るのに適しています。しかし、このビューでは割り当てが発生した正確な場所を知るために、ツリーを長くたどらなければなりません。

+ +

"Inverted Call Stack" ビューが役に立ちます。これはメモリー割り当てが発生した正確な場所を、割り当てサイズの順に並べたボトムアップ型のビューです。ツリーを展開すると、トップレベルに向かってコールツリーをたどります。

+ +

上記の例で "Inverted Call Stack" を選択すると、どのようになるかを見てみましょう:

+ +

+ +

リストの最初に、ページでヒープの 89% を占めている createToolbarButton() があります。

+ +

(有効なスタックはありません)

+ +

前出の例で、ヒープの 7% が "(有効なスタックはありません)" であることに気づいているでしょう。これは、ヒープのすべてを JavaScript で使用しているわけではないためです。

+ +

例えば、以下のようなものがあります:

+ + + +

実在するページの多くは、"(有効なスタックはありません)" の割合が 7% を超えます。

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 +--- +
{{ToolsSidebar}}

メモリーツールを開く

+ +

Firefox 50 より前のバージョンでは、メモリーツールをデフォルトで無効化しています。有効化するには開発ツールのオプションを開き、"標準の Firefox 開発ツール" 配下の "メモリー" にチェックを入れてください:

+ +

{{EmbedYouTube("qi-0CoCOXwc")}}

+ +

Firefox 50 より、メモリーツールをデフォルトで有効化しています。

+ +

ヒープのスナップショットを採取する

+ +

" スナップショットを採取 " ボタンまたはツールの左側にあるカメラのアイコンをクリックすると、ヒープのスナップショットを採取します:

+ +

+ +

スナップショットは、右側にある大きなペインを占めています。左側には、新しいスナップショットの項目をタイムスタンプ、サイズ、保存や削除のためのコントロールとともに表示します:

+ +

+ +

スナップショットを削除する

+ +

" X "  印のアイコンをクリックすると、スナップショットを削除します:

+ +

+ +

スナップショットの保存と読み込み

+ +

メモリーツールを閉じると、保存していないスナップショットはすべて破棄されます。" 保存 " をクリックすると、スナップショットを保存します:

+ +

+ +

保存先やファイル名を求められます。そしてファイルは、.fxsnapshot という拡張子をつけて保存されます。

+ +

既存の .fxsnapshot ファイルからスナップショットを読み込むには、四角形から上向きの矢印が出ているデザインのインポートボタン (Firefox 49 より前のバージョンでは、" Import... " というラベルがついていました) をクリックします:

+ +

+ +

ディスク上のファイルを選択するよう、求められます。

+ +

スナップショットを比較する

+ +

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

+ +

差分を作成するには、カメラのアイコンの隣にあるベン図のボタンを押下してください (Firefox 47 より前は、" +/- " 印のアイコンでした)。

+ +

+ +

始めにベースラインのスナップショット、続いて比較するスナップショットを選択するよう求められます。ツールが 2 つのスナップショットの差分を表示します:

+ +

{{EmbedYouTube("3Ow-mdK6b2M")}}

+ +
+

差分を表示しているとき、ドミネータービューやツリーマップは使用できません。

+
+ +

コールスタックを記録する

+ +

メモリーツールは、コードのどこでメモリの割り当てを行っているかを表示できます。ただしこの情報の記録は実行時の負荷が高いため、スナップショット内でメモリー呼び出しを行った場所を確認したい場合は、メモリー割り当ての前にツールに対してメモリー呼び出しを記録するよう要求しなければなりません。記録するには、"コールスタックを記録" (Firefox 49 より前は "割り当てスタックを記録" でした) にチェックを入れます:

+ +

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 +--- +
{{ToolsSidebar}}
+

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

+
+ +

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

+ +

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

+ +

{{EmbedYouTube("rbDHVxCzqhU")}}

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 +--- +
{{ToolsSidebar}}

この記事では、メモリーツールの機能を示すために使用するシンプルなページについて説明します。

+ +

これは https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html で試すことができます。

+ +

このページは、大量の DOM ノードを生成するスクリプトが含まれています:

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

このコードの動作を簡単に表現すると、以下のようになります:

+ +
createToolbars()
+    -> createToolbar() // 200 回呼び出され、毎回 1 個の DIV 要素を生成します
+       -> createToolbarButton() // Toolbar ごとに 20 回呼び出され、毎回 1 個の SPAN 要素を生成します
+ +

最終的に、200 個の HTMLDivElement オブジェクトと 4,000 個の HTMLSpanElement オブジェクトを生成します。

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 +--- +
{{ToolsSidebar}}
+

本記事では JavaScript のようなガベージコレクションを行う言語に適用される 到達可能性、シャローサイズと 保持サイズ、支配ノードの概念を紹介します。

+ +

オブジェクト自体は小さくても他の大きなオブジェクトを多数参照する場合があり、ガベージコレクターが多くのメモリーを解放できなくなる可能性があることから、この概念はメモリーの分析において重要です。

+ +

メモリーツールの ドミネータービューを使用して、ページ内の支配ノードを確認できます。

+
+ +

JavaScript のようにガベージコレクションを行う言語では、通常プログラマーはメモリーの解放について悩む必要はありません。プログラマーはオブジェクトを作成および使用するだけでよく、オブジェクトが不要になればランタイムがクリーンアップを引き受けて、オブジェクトが占有していたメモリを解放します。

+ +

到達可能性

+ +

現代の JavaScript 実装では、ランタイムは Reachability に基づいてオブジェクトが不要であるかを判断します。このシステムでは、ヒープを 1 つ以上のグラフで表します。グラフ内の各ノードはオブジェクトを表し、ノード (の縁) 同士の接続はあるオブジェクトから別のオブジェクトへの参照を表します。グラフはルートノードから始まります。本記事の図ではルートノードを "R" で示します。

+ +

+ +

ガベージコレクションを行うとき、ランタイムはグラフをルートから走査して、発見したすべてのオブジェクトに印をつけます。発見されないオブジェクトは到達性がないので、解放できます。

+ +

従ってオブジェクトの到達性がなくなると (例えば、スコープから外れたローカル変数1個からしか参照されていないオブジェクト)、そのオブジェクトが参照するオブジェクトも、他のオブジェクトから参照されていなければ到達性がなくなります:

+ +

+ +

逆に、到達性がある他のオブジェクトがそれらを参照し続けている間は、維持され続けることになります。

+ +

シャローサイズと保持サイズ

+ +

この考え方から、オブジェクトのサイズを調べる方法が 2 つに区別されます:

+ + + +

通常、オブジェクトのシャローサイズは小さいのですが、保持サイズは参照により他のオブジェクトを含むために大きくなります。保持サイズは " このオブジェクトが存在しなくなると、メモリーがどれだけ解放されるか？ " という疑問への答えになりますので、メモリー使用量の分析において重要な概念です。

+ +

支配ノード

+ +

関連する概念として支配ノードがあります。ルートノードからノード A に至るすべてのパスがノード B を通るとき、ノード B はノード A を支配すると言います:

+ +

+ +

ノード A の支配ノードのいずれかが解放されると、ノード A 自体はガベージコレクションの対象に適した状態になります。

+ +

ノード B はノード A を支配しているが、ノード A の他の支配ノードが支配していないとき、ノード B はノード A の隣接支配ノードとなります:

+ +

+ +

オブジェクト A が別のオブジェクト B および C から参照されている場合は少々とらえにくいのですが、どちらも A の支配ノードではありません。これは、B または C のどちらかをグラフから削除しても、A は他の参照元によって維持され続けるためです。代わりに A の隣接支配ノードは、最初の共通の祖先になります:
+

+ +

関連情報

+ + 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 +--- +
{{ToolsSidebar}}
+

ドミネータービューは、Firefox 46 の新機能です。

+
+ +

Firefox 46 より、メモリーツールに新たなビューであるドミネータービューが加わりました。これは、サイトによって割り当てられたオブジェクトの " 保持サイズ " を知るのに役立ちます。保持サイズはオブジェクト自身のサイズと、参照によって保持されているオブジェクトのサイズを合算したものです。

+ +

シャローサイズ、保持サイズ、ドミネーターが何かを知っている場合は、ドミネーターの UI のセクションに進んでください。そうでない場合は、ドミネーターの概念の記事でこれらを調べたいと思うかもしれません。

+ +

ドミネータの UI

+ +

" 表示 " のドロップダウンリストで " ドミネーター " を選択すると、ドミネータービューを表示します。以下のようなものです:

+ +

+ +

ドミネータービューは 2 つのパネルで構成されます:

+ + + +

+ +

ドミネーターツリーパネル

+ +

ドミネーターツリーは、スナップショット内でどのオブジェクトがもっとも多くのメモリーを保持しているかを表示します。

+ +

UI のメインエリアで、最初の行が "GC ルート" という名前になっています。この直下に、以下の項目が並びます:

+ + + +

それぞれの項目で、以下の内容を表示します:

+ + + +

項目は、メモリーの保持サイズの大きさ順に並びます。例えば:

+ +

+ +

このスクリーンショットでは、" GC ルート " の配下に項目が 5 つあることがわかります。始めの 2 つは Call オブジェクトと Window オブジェクトであり、それぞれスナップショットの総メモリ量の 21% と 8% を保持しています。また、これらのオブジェクトは " シャローサイズ " が比較的小さく、保持サイズのほぼすべては、支配しているオブジェクト内にあることもわかります。

+ +

各 GC ルートの直下に、そのルートが 隣接支配ノード であるすべてのノードを配置します。これらのノードも、保持サイズ順に並びます。

+ +

例えば、最初の Window オブジェクトをクリックします:

+ +

+ +

この Window は CSS2Properties オブジェクトを支配しており、その保持サイズはスナップショット全体の 2% であることがわかります。やはりシャローサイズはとても小さく、保持サイズのほぼすべてが、支配しているノード内にあります。Function の隣にある展開用の三角印をクリックすると、それらのノードを確認できます。

+ +

この方法で、スナップショット内でどのオブジェクトがもっとも多くのメモリーを保持しているかを、すばやく把握できます。

+ +

Alt + クリックで、ノード配下のグラフ全体を展開できます。

+ +

コールスタック

+ +

ツール上部のツールバーに、"ラベル" という名称のドロップダウンリストがあります:

+ +

+ +

デフォルトでは " Type " に設定されています。一方、これを " Call Stack " に切り替えると、コードの中でオブジェクトを割り当てている場所はどこかを表示します。

+ +
+

Firefox 46 では、このオプションの名称は " Allocation Stack " でした。

+
+ +

ビューを表示するには、オブジェクトを割り当てるコードを実行する前に " コールスタックを記録 " のチェックボックスにチェックを入れなければなりません。そしてスナップショットを採取して、" ラベル " ドロップダウンリストで " Call Stack " を選択します。

+ +

するとノードを割り当てた関数の名前、およびその関数が存在するファイルの名前、行番号、何文字目かをノードの名前に含めて表示します。ファイル名をクリックすると、デバッガーで該当箇所を表示します。

+ +

{{EmbedYouTube("qTF5wCSD124")}}

+ +
+

ここに " (有効なスタックはありません) " と表示される場合があります。特に、現在割り当てスタックはオブジェクトのみ記録しており、配列、文字列、内部構造は記録していません。

+
+ +

保持パスパネル

+ +
保持パスパネルは Firefox 47 の新機能です。
+ +

保持パスパネルではあるノードについて、そのノードから GC ルートに戻る最短パスを 5 つ表示します。これによって、そのノードがガベージコレクションの対象にならないようにしているすべてのノードを知ることができます。オブジェクトがリークしていると思われる場合に、どのオブジェクトが参照を保持しているかを的確に示します。

+ +

ドミネータツリーパネルでノードを選択すると、ノードの保持パスを表示します:

+ +

+ +

ここでは Object を選択しており、GC ルートに戻るパスが 1 つあることがわかります。

+ +

GC ルート Window は HTMLDivElement オブジェクトへの参照を保持しており、またそのオブジェクトが Object への参照を保持しています。ドミネーターツリーパネルを見ると、同じパスをたどることができます。これらの参照のどちらかが削除されると、配下のアイテムはガベージコレクションの対象になるでしょう。

+ +

グラフ内の各接続に、参照されるオブジェクト用の変数の名称がついています。

+ +

ノードから戻る保持パスが複数存在することがあります:

+ +

+ +

この図では、DocumentPrototype ノードから GC ルートに戻るパスが 3 つあります。ひとつが削除されても、ほかのパスが維持されていますので DocumentPrototype はガベージコレクションの対象になりません。

+ +

例

+ +

シンプルなコードがどのようにドミネータービューへ反映されるかを見ていきましょう。

+ +

ここでは monster allocation example を使用します。これは 3 個の配列を生成しており、それぞれに 5,000 体のモンスターが含まれています。また、それぞれのモンスターはランダムに生成された名前を持っています。

+ +

スナップショットを採取する

+ +

これがドミネータービューでどのように見えるかを確認します:

+ + + +

{{EmbedYouTube("HiWnfMoMs2c")}}

+ +

ドミネーターツリーを分析する

+ +

上位 3 件の GC ルートが Array であり、それぞれ総メモリー使用量の約 23% を保持しています:

+ +

+ +

Array を展開すると、含まれているオブジェクト (モンスター) を表示します。それぞれのモンスターは、シャローサイズが 160 バイトと比較的小さくなっています。これは、目の数と触手の数の整数値を含んでいます。また各モンスターの保持サイズは大きく、これはモンスターの名前の文字列が占めています:

+ +

+ +

これらはすべて、予想したメモリーグラフ に近い形で並んでいます。しかし、ひとつ不思議に思う点があるでしょう。3 つの Array を保持するトップレベルオブジェクトはどこにあるのでしょうか？ ある Array の保持パスを確認すると、以下のようになっているでしょう:

+ +

+ +

ここでは保持するオブジェクトが見えており、またオブジェクト固有の Array は fierce モンスターの Array です。しかし Array はルートでもあるため、オブジェクトが Array を参照しなくなってもガベージコレクションの対象にはならないでしょう。

+ +

これはオブジェクトが Array を支配していないため、ドミネータツリービューに表示されないということです。ドミネータの概念の記事で関連する章をご覧ください。

+ +

コールスタックビューを使用する

+ +

最後に、Call Stack ビューへ切り替えると、オブジェクトがどこで割り当てられたかを確認できます。また、デバッガーでその場所にジャンプできます:

+ +

{{EmbedYouTube("qTF5wCSD124")}}

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 +--- +
{{ToolsSidebar}}

メモリーツールを使用して、カレントタブのメモリー ヒープ のスナップショットを取得できます。そして、どのオブジェクトがどれだけメモリーを使用しているかや、コードのどこでメモリーを割り当てているかを表示可能な、ヒープのさまざまなビューを提供します。

+ +

{{EmbedYouTube("DJLoq5E5ww0")}}

+ +
+

基礎

+ +
+ +
+ +
+

スナップショットを分析する

+ +
+

ツリーマップビューは Firefox 48 の新機能、ドミネータービューは Firefox 46 の新機能です。

+
+ +

スナップショットを採取すると、メモリーツールは 3 つの主要なビューを提供します:

+ + + +

スナップショットで割り当てスタックの記録を有効にすると、コードのどこで割り当てが行われたかを総計ビューとドミネータービューで表示できます。

+ +
+

概念

+ +
+ +
+ +
+

サンプルページ

+ +

メモリーツールのドキュメントで使用しているサンプルです。

+ +
+ +
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 +--- +
{{ToolsSidebar}}

この記事では、メモリツールの機能を示すために使用するシンプルなページについて説明します。

+ +

これは https://mdn.github.io/performance-scenarios/js-allocs/alloc.html で試すことができます。コードは以下のとおりです:

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

このページにはボタンがあります。このボタンを押すと、コードがモンスターを生成します。詳細は以下のとおりです:

+ + + +

従って、JavaScript のヒープ上に割り当てられるメモリの構造は、3 つの配列を持つオブジェクトになります。それぞれの配列は 5000 個のオブジェクト (モンスター) を持ち、そのオブジェクトが文字列と 2 つの数値を持ちます:

+ +

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 +--- +
{{ToolsSidebar}}
+

ツリーマップビューは、Firefox 48 の新機能です。

+
+ +

ツリーマップビューはスナップショットを視覚的に表現して、どのオブジェクトがもっとも多くのメモリを使用しているかの見解をすばやく得る助けになります。

+ +

ツリーマップは、"入れ子の長方形で表現した階層型 (木構造) のデータ" を表示します。長方形のサイズは、データの量的な比率に対応します。

+ +

メモリツールのツリーマップは、ヒープの内容物をトップレベルで 4 つのカテゴリに分類します:

+ + + +

それぞれのカテゴリを長方形で表現して、長方形のサイズはカテゴリ内のアイテムがヒープ内で占める割合に対応します。よって、あなたのサイトでどの種類のものがもっとも多くのメモリを使用しているかについて、おおまかな見解をすばやく得ることができます。

+ +

トップレベルのカテゴリ内では、以下のように分割します:

+ + + +

こちらが、ツリーマップビューで表示したスナップショットのサンプルです:

+ +

+ +

このツリーマップは DOM allocation example で取得しました。このページは大量の DOM ノード (200 個の HTMLDivElement オブジェクトと 4000 個の HTMLSpanElement オブジェクト) を生成するスクリプトを実行します。ヒープのほとんどすべてが、スクリプトで生成した HTMLSpanElement オブジェクトであることがわかります。

+ +

+ +

このツリーマップは、monster allocation example で取得しました。これは 3 個の配列を生成しており、それぞれに 5000 体のモンスターが含まれています。また、それぞれのモンスターはランダムに生成された名前を持っています。ヒープのほとんどがモンスターの名前で使用する文字列と、モンスターの他の属性を収めるために使用するオブジェクトで占められていることがわかります。

+ +

+ +

このツリーマップは http://www.bbc.com/ で取得しました。前出のサンプルより現実的な見本であるといえるでしょう。ヒープの多くがスクリプトで占められており、それらは多数の生成元から読み込まれていることがわかります。

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 +--- +
{{ToolsSidebar}}

Firebug から Firefox 開発ツールへ移行する際に、Firebug で愛用していた機能が開発ツールのどこにあるかと考えるかもしれません。以下のリストは、Firebug のユーザーが開発ツールへ移行するための支援を目指しています。

+ +

一般

+ +

アクティブ化

+ +

Firebug のアクティブ化 は、URL に基づいて 同一生成元ポリシー に従います。すなわち、生成元が同じページを別のタブで開くと、Firebug が自動的に開きます。また、生成元が異なるページを同じタブで開くと、Firebug は自動的に閉じます。一方、開発ツールのアクティブ化はタブに基づきます。すなわち、あるタブで開発ツールを開くと、ウェブサイトを切り替えてもツールは開いたままです。しかし、別のタブに切り替えるとツールが閉じます。

+ +

ツールを開く

+ +

F12 を押下して Firebug を開くことができます。また、要素を調査するために Firebug を開くには Ctrl+Shift+C / Cmd+Opt+C を押下します。開発ツールのキーボードショートカットも同じですが、別のパネルを開くキーボードショートカット もあります。例えば ネットワークモニター を Ctrl+Shift+Q / Cmd+Opt+Q、ウェブコンソール を Ctrl+Shift+K / Cmd+Opt+K、デバッガーを Ctrl+Shift+S / Cmd+Opt+S で開くことができます。

+ +

ウェブコンソール

+ +

ウェブコンソール は Firebug の コンソールパネル と同等です。これは、ウェブページに関する情報を記録します。また、コマンドライン を使用して JavaScript の式を実行することができます。両者の表示は若干異なっています。これは {{bug(1269730)}} で変更する予定です。

+ +

ログメッセージのフィルタリング

+ +

Firebug にはログメッセージのフィルタリング方法が 2 つあり、ひとつは オプションメニュー、もう一つはツールバーの フィルターボタン です。開発ツールのコンソールは、ツールバー内のフィルターボタン で同様の機能を提供しており、ひとつの方法にまとめられています。

+ +

コマンドライン API

+ +

Firebug のコマンドライン API は、利便性のための特別な機能を提供します。開発ツールのコマンドラインに ある程度共通の機能 がありますが、異なる機能や欠けている機能があります。

+ +

コンソール API

+ +

ウェブページ内からコンソールに何かを記録するために Firebug は、ウェブページで使用できる Console API を作成しました。開発ツールも 同じ API を共有しており、console.* 文が引き続き動作します。

+ +

ログを残す

+ +

Firebug ではツールバーの 持続 ボタン を押すと、ページを移動したり再読み込みしたりしてもメッセージを残すことができます。開発ツールではこの設定が ログ出力を残す という名称であり、ツールボックスのオプションパネル内にあります。

+ +

サーバーのログ

+ +

FirePHP のような Firebug 拡張で、サーバーサイドのメッセージを Firebug のコンソールに記録できます。この機能は ChromeLogger プロトコルを使用してすでに 開発ツールに統合されており、拡張機能のインストールは不要です。

+ +

コマンド履歴

+ +

Firebug のコマンドラインにあるボタンで使用できる コマンド履歴 は、開発ツールのコマンドラインで ↑/↓ を押下する ことで使用できます。

+ +

オブジェクトの特性を調査する

+ +

コンソールに記録されたオブジェクトをクリックすると、DOM パネル でオブジェクトのプロパティやメソッドを調査できます。Firefox 開発ツールでも、オブジェクトを調査できます。Firebug との違いは、ウェブコンソール内のサイドパネルにプロパティやメソッドを表示する ことです。

+ +

ネットワークリクエストを表示する

+ +

Firebug のコンソールパネルで、({{Glossary("XMLHttpRequest", "XMLHttpRequests")}} による) {{Glossary("AJAX")}} リクエストを記録できます。この設定は開発ツールのウェブコンソールでも、ネットワーク > XHR で使用できます。さらにウェブコンソールでは ネットワーク > ログ で、ほかのネットワークリクエストもすべて表示できます。

+ +

JSON や XML 構造を表示する

+ +

JSON や {{Glossary("AJAX")}} リクエストの XML レスポンスを表示するために、Firebug にはコンソールパネル内でリクエストを展開する特別なタブがあります。開発ツールのウェブコンソールはこのような構造を、"応答" タブに直接表示します。

+ +

複数行のコマンドライン

+ +

Firebug のコンソールは Command Editor と呼ばれる、複数行のコマンドラインです。開発ツールには Command Editor のようなサイドパネルはありませんが (これは {{bug(1133849)}} で要望されています)、スクラッチパッド と呼ばれる別のツールがあります。これは パネルとしてツールボックスに追加する か、Firefox メニュー > 開発ツール > スクラッチパッド または Shift + F4 で個別のウィンドウとして開くことができます。また通常のコマンドラインも、document. のような未完了のコマンドを認識した場合は、Enter を押下すると賢く改行を入力します。さらに、Shift + Enter を押下すれば手動で改行を入力できます。

+ +

レスポンスのプレビュー

+ +

Firebug でコンソールに記録されたネットワークリクエストを展開すると、プレビュー タブがあります。ウェブコンソールでは、応答 タブでプレビューを表示します。現在は HTML、XML、SVG のプレビュー機能が欠けていますが、{{bug(1247392)}} および {{bug(1262796)}} で要望されています。ただし、リクエストの URL をクリックすると ネットワークモニター に切り替わり、こちらに プレビュー タブがあります。

+ +

インスペクター

+ +

Firebug には HTML パネル があり、HTML/XML/SVG や、それらに関係する CSS を編集できます。開発ツールでは、インスペクター でこの機能を提供します。

+ +

HTML を編集する

+ +

インスペクターでは Firebug と同様に、タグの属性やコンテンツをインラインで編集できます。さらに、タグ名もインラインで編集できます。

+ +

HTML を直接編集することもできます。Firebug ではノードを右クリックして、コンテキストメニューの [HTML を編集] を選択します。開発ツールのコンテキストメニューにも、このメニュー項目があります。開発ツールでは [HTML として編集] という名称です。変更箇所のライブプレビュー機能だけが現時点で欠けており、{{bug(1067318)}} および {{bug(815464)}} で扱っています。

+ + + +

Firebug の HTML パネルでは要素のコンテキストメニューで、要素の innerHTML や outerHTML、CSS、XPath をコピーできます。インスペクターは XPath のコピーを除く、同じ機能を提供します。XPath のコピーは {{bug(987877)}} で扱っています。

+ +

CSS を編集する

+ +

どちらのツールも、ノードビューで選択した要素に関係する CSS ルールを、同様の方法で閲覧および編集できます。Firebug には スタイル サイドパネル、開発ツールには ルール サイドパネル があります。

+ +

Firebug では、右クリックしてコンテキストメニューの [ルールを追加] を選択すると、新しいルールを追加します。開発ツールでも新しいルールを作成するために、コンテキストメニューの [新しいルールを追加] という項目と、ルールパネルのツールバーの [+] ボタン があります。

+ +

要素のスタイルを編集する、すなわち要素の {{htmlattrxref("style")}} 属性の CSS プロパティを編集するために、Firebug ではスタイルパネルを右クリックして、コンテキストメニューの [要素のスタイルを編集] を選択しなければなりません。開発ツールでは、この目的で 要素 {} ルール があり、ここを 1 回クリックするだけでプロパティを編集できます。

+ +

CSS のオートコンプリート

+ +

Firebug と同様に、ルールビューで CSS プロパティの名称や値のオートコンプリートを提供します。一部のプロパティ値はまだオートコンプリートができず、{{bug(1337918)}} で扱っています。

+ +

CSS のコピーと貼り付け

+ +

Firebug の スタイル サイドパネルも開発ツールの ルール サイドパネルもコンテキストメニューに、CSS ルールやスタイル宣言をコピーするためのメニュー項目があります。さらに開発ツールには、ルールのセレクターをコピーするメニュー項目や、コメントアウトにより無効なプロパティ宣言をコピーする機能があります。スタイル宣言全体をコピーする項目が欠けていますが、パネル内でそれらを選択して Ctrl+C またはコンテキストメニューを使用してコピーすることにより実現できます。

+ +

開発ツールの ルール サイドパネルは、CSS を貼り付けるときの動作がよりスマートです。コメントアウトされたプロパティ宣言を自動的に無効化して、スタイル宣言全体を既存のルールに貼り付けできます。

+ +

疑似クラスを切り替える

+ +

Firebug の スタイル サイドパネルのオプションメニュー で、要素の {{cssxref(":hover")}}、{{cssxref(":active")}}、{{cssxref(":focus")}} 疑似クラスを切り替えることができます。開発ツールでは、同じことを行う方法が 2 つあります。ひとつは ルール サイドパネル内の疑似クラスパネル で切り替える方法です。もうひとつはノードビューで要素を右クリックして、コンテキストメニュー で疑似クラスを切り替える方法です。

+ +

CSS ショートハンドプロパティを調査する

+ +

スタイル サイドパネルで [簡略プロパティを展開] を設定すると、CSS ショートハンドプロパティ を、関係があるロングハンドプロパティに展開できます。開発ツールのルールパネルはよりスマートであり、プロパティのそばにある三角印をクリックすると、個々のショートハンドプロパティを展開できます。

+ +

適用されたスタイルのみ表示する

+ +

Firebug のスタイル サイドパネル に、選択した要素に適用された CSS ルールのプロパティのみ表示して、上書きされたスタイルはすべて隠す設定があります。開発ツールの ルール サイドパネル にそのような機能はありませんが、{{bug(1335327)}} で要望されています。

+ +

ボックスモデルを調査する

+ +

Firebug では、レイアウト サイドパネル で ボックスモデル を調査できます。開発ツールでは、ボックスモデルが 計算済み サイドパネルの一部になっています。どちらのツールもボックスモデルビューにマウスポインタを載せると、ページ上でボックスモデルのさまざまな部分を強調表示します。また、どちらのツールもボックスモデルをクリックすると、さまざまな値をインラインで編集できます。

+ +

計算済みスタイルを調査する

+ +

Firebug の 累積 サイドパネル と同様に、開発ツールの 計算済み サイドパネル で CSS プロパティの計算済みの値を表示します。両者の違いは、開発ツールはプロパティを常にアルファベット順に並べておりグループ化しないこと ({{bug(977128)}} をご覧ください) と、Mozilla 特有のスタイルを隠すオプションがないことです。このため、開発ツールにはプロパティをフィルタリングするための入力フィールドがあります。

+ +

イベントを調査する

+ +

Firebug では、要素に割り当てられたイベントを イベント サイドパネル に表示します。開発ツールでは、ノードビューで要素のそばにある小さな 'ev' アイコンをクリックすると、イベントを表示します。どちらのツールも、ラップされたイベントリスナー (例えば、 jQuery の関数でラップしたリスナー) を表示できます。開発ツールの UI を改善するため、Firebug のようなイベントサイドパネルを追加する要望が出ています ({{bug(1226640)}} をご覧ください)。

+ +

DOM が変化したときにスクリプトの実行を止める

+ +

Firebug は DOM が変化したとき、すなわち要素が変更されたときにブレークして、JavaScript ファイルの関連する行でスクリプトの実行を止めます。これは、DOM の変化を起こした場所です。この機能は 変化したらブレーク ボタン でグローバルに有効化するか、要素ごと および属性変化・内容の変化・要素削除といった種類ごとに有効化できます。残念ながら、開発ツールにはまだこの機能がありません ({{bug(1004678)}} をご覧ください)。スクリプトの実行を止めるには、変化させている行に デバッガー パネル でブレークポイントを設定しなければなりません。

+ +

CSS セレクターや XPath で要素を検索する

+ +

Firebug は、HTML パネルで CSS セレクターや XPath で要素を検索できます。開発ツールの インスペクター パネルも、CSS セレクターで検索できます。また、マッチする ID やクラスのリストを表示します。しかし、XPath による検索は未サポートです ({{bug(963933)}} をご覧ください)。

+ +

デバッガー

+ +

Firebug の スクリプト パネル に相当するものが、開発ツールの デバッガー パネル です。どちらも、ウェブサイトで実行する JavaScript コードをデバッグできます。

+ +

ソースを切り替える

+ +

Firebug には、ウェブサイトに関係するすべての JavaScript ソースを表示する スクリプトロケーションメニュー があります。これらのソースは静的なもの (すなわち、ファイル) や、動的に生成されるもの (すなわち、イベントハンドラで実行するスクリプト、eval()、new Function() など) があり得ます。開発ツールの デバッガー パネルでは、スクリプトを左側の ソース サイドパネル に一覧表示します。動的に生成されるスクリプトは、//# sourceURL コメントで名前を付けた 場合に限り表示します。

+ +

ブレークポイントを管理する

+ +

Firebug ではさまざまな種類のブレークポイントを設置でき、すべてのブレークポイントを ブレークポイント サイドパネル に表示します。開発ツールでは、ソース サイドパネル でそれぞれのスクリプトソースの下にブレークポイントを表示します。このパネルで、ひとつあるいはすべてのブレークポイントを有効化または無効化する、およびブレークポイントを削除することができます。現在は、スクリプトのブレークポイントのみ設置できます。XHR、DOM、Cookie、エラーのブレークポイントは未サポートです ({{bug(821610)}}、{{bug(1004678)}}、{{bug(895893)}}、{{bug(1165010)}} をご覧ください)。単一の JavaScript エラーに対するブレークポイントはありませんが、デバッガー パネルのオプション に、例外発生で停止 する設定があります。

+ +

コードでステップ実行を行う

+ +

スクリプトの実行が停止すると、コンティニュー (F8)、ステップオーバー (F10)、ステップイン (F11)、ステップアウト (Shift+F11) を使用してコードをステップ実行できます。これらは、どちらのツールでも動作します。

+ +

コールスタックを調査する

+ +

スクリプトの実行が停止したとき、Firebug は スタック サイドパネル に、関数のコールスタックを表示します。ここでは、呼び出し時の引数とともに関数を一覧表示します。開発ツールでは、コールスタック サイドパネル に関数のコールスタックを表示します。開発ツールで引数を確認するには、変数 サイドパネル を見なければなりません。

+ +

変数を調査する

+ +

Firebug は ウォッチ サイドパネル に、既定で {{domxref("window")}} オブジェクト (グローバルスコープ) を表示します。スクリプトの実行が停止すると、現在のコールスタックフレームで使用できるさまざまな変数スコープを表示します。さらに、ウォッチ式を追加および操作できます。開発ツールには 変数 サイドパネル があり、基本的な働きは同じです。大きな違いは、変数 サイドパネルはスクリプトの実行が停止していないときに空である、すなわち window オブジェクトを表示しないことです。ただし、DOM プロパティビューア または ウェブコンソール を使用してオブジェクトを調査できます。

+ +

スタイルエディター

+ +

Firefox 開発ツールの スタイルエディター で、Firebug の CSS パネル と同様に、さまざまな CSS スタイルシートを調査および編集できます。さらに、新しいスタイルシートの作成や、既存のスタイルシートをインポートしてページに適用することもできます。また、個々のスタイルシートの有効・無効を切り替えることができます。

+ +

ソースを切り替える

+ +

Firebug の CSS パネルでは CSS ロケーションメニュー を使用して、さまざまな CSS ソースを切り替えることができます。スタイルエディターでは サイドバー を使用します。

+ +

スタイルシートを編集する

+ +

Firebug の CSS パネル は、3 つのスタイルシート編集方法を提供します。既定の方法は、スタイル サイドパネル でのインライン編集です。このほかに ソース編集モードとライブ編集モード があり、選択したスタイルシートをテキストエディターで編集できます。開発ツールのスタイルエディターの編集方法は、Firebug のライブ編集モードに相当する 1 つだけです。

+ +

CSS セレクターを試用する

+ +

Firebug のセレクタ サイドパネルに、CSS セレクタを検証する機能があります。これは、入力したセレクタにマッチするすべての要素を表示します。開発ツールにこの機能はありませんが、{{bug(1323746)}} で要望されています。

+ +

スタイルシート内で検索する

+ +

Firebug では、検索フィールドでスタイルシート内を検索できます。開発ツールのスタイルエディターにもスタイルシート内を検索する機能がありますが、現在は複数のスタイルシートを検索する機能 ({{bug(889571)}} を参照) および正規表現で検索する機能 ({{bug(1362030)}} を参照) がありません。

+ +

パフォーマンスツール

+ +

Firebug では コンソール パネルの "プロファイル" ボタン、または console.profile() および console.profileEnd() コマンドを使用して、JavaScript のパフォーマンスをプロファイリングできます。開発ツールでは、パフォーマンスのプロファイリングについて高度なツールを提供します。Firebug と同様に console.profile() および console.profileEnd() を使用するか、パフォーマンスツール の "パフォーマンス記録の状態を切り替えます" ボタンを使用してプロファイルを作成できます。コールツリー の出力が Firebug の出力にもっとも似ていますが、パフォーマンスパネルでは単なる JavaScript のパフォーマンスだけでなく、より多くの情報を提供します。例えば、HTML のパースやレイアウトに関する情報も提供します。

+ +

これは Firebug と開発ツールで出力内容が完全に異なるため、もっとも違いが大きい部分です。Firebug は JavaScript のパフォーマンスに注目しており、プロファイリングセッション内の JavaScript 関数呼び出しに関する詳細情報を提供します。一方開発ツールは JavaScript の関数呼び出しに限らず、ウェブ際のパフォーマンスに関する広範な情報を提供します。

+ +

JavaScript の呼び出しパフォーマンスを表示する

+ +

Firebug の プロファイラーの出力 にもっとも近いものが、パフォーマンス パネルの 呼び出しツリービュー です。これは Firebug と同様に、合計時間 にそれぞれの関数呼び出しの総実行時間、サンプル に呼び出し回数、時間 に関数内で費やした時間、そして総実行時間に対する関数の実行時間の割合を表示します。

+ +
+

注記: 開発ツールの呼び出しツリービューに表示する時間と割合は、Firebug が表示する値と同等ではありません。これは、JavaScript コードの実行状態をサンプリングするために使用する API が異なるためです。

+
+ +

関数の宣言に移動する

+ +

Firebug のプロファイラーと同様に、開発ツールのパフォーマンスツールの 呼び出しツリービュー から、呼び出した JavaScript 関数が定義されているコードの行に移動できます。Firebug では関数へのリンクが コンソールパネル の出力の右側にありますが、開発ツールでは呼び出しツリービューの右側にリンクがあります。

+ +

ネットワークモニター

+ +

ネットワークリクエストを監視するために、Firebug には ネット パネル があります。Firefox 開発ツールでは ネットワークモニター を使用して、ネットワーク通信を調査できます。どちらのツールも、ネットワークリクエストの要求や応答を表すタイムラインなど、よく似た情報を提供します。

+ +

リクエストの情報を調査する

+ +

Firebug も Firefox 開発ツールのネットワークモニターも、リクエストをクリックすると、リクエストに関する情報を調査できます。唯一の違いは、Firebug はリクエストの下に情報を表示しますが、ネットワークモニターはサイドパネルに情報を表示することです。

+ +

どちらのツールも、選択したリクエストのさまざまな情報を表示するタブがあります。ヘッダー、パラメーター、応答、Cookie のパネルがあります。レスポンスのプレビューは、HTML のように具体的な名称のパネルで表示します。ネットワークモニターでは、プレビュー用に プレビュー パネルがあります。キャッシュ済みデータの情報を提供する機能は未実装です ({{bug(859051)}})。一方、Firebug の情報に加えて セキュリティ の情報を表示します。また、ネットワークのタイミングに関する詳細情報を提供する タイミング タブもあります。

+ +

リクエストのタイミングを表示する

+ +

Firebug では ネットパネルのタイムライン列 にマウスポインターを載せると、リクエストに関するネットワークタイミングの詳細情報を表示します。ネットワークモニターはこの情報を、リクエストを選択したときに タイムライン サイドパネル で表示します。

+ +

リモートアドレスを表示する

+ +

Firebug では、リクエストのリモートアドレスを リモート IP 列に表示します。ネットワークモニターでは、リクエストを選択したときに ヘッダー タブの リモートアドレス に表示します。

+ +

リクエストを検索する

+ +

Firebug の検索フィールドで、リクエストを検索できます。Firefox の開発ツールの検索フィールドは、入力した文字列でリクエストをフィルタリングします。

+ +

Firebug では 検索フィールドのオプション で レスポンス本文 にチェックを入れると、ネットワークリクエストのレスポンスボディを検索できます。ネットワークモニターではこの機能が未提供ですが、{{bug(1334408)}} で要望されています。レスポンスボディはまだ検索できませんが、ネットワークモニターでは さまざまなリクエスト属性でフィルタリングする ことができます。

+ +

ストレージインスペクター

+ +

Firebug の Cookie パネル はページが作成した Cookie に関する情報を表示しており、Cookie が保存している情報を操作できます。開発ツールでは、ストレージインスペクター にこの機能があります。Firebug と比較すると、ストレージインスペクターは Cookie だけでなくローカルストレージ、セッションストレージ、キャッシュ、IndexedDB データベースといったストレージも調査できます。

+ +

Cookie を調査する

+ +

Firebug は、ウェブサイトに関係するすべての Cookie を Cookie パネル に表示します。開発ツールでは Cookie を、ストレージインスペクター の Cookie セクションに、ドメインごとにグループ化して表示します。どちらも Cookie ごとに名前、値、ドメイン、パス、有効期限、Cookie が HttpOnly であるかといった、ほとんど同じ情報を表示します。

+ +

開発ツールは Cookie が Secure であるかをデフォルトで表示しませんが、表の見出しを右クリックしてコンテキストメニューで Secure にチェックを入れると有効化できます。さらに開発ツールは、Cookie の作成日時、最終アクセス日時、HostOnly であるかの情報も表示できます。

+ +

Cookie を編集する

+ +

Firebug で Cookie を編集するには、Cookie を右クリックしてコンテキストメニューで 編集 を選択しなければなりません。ダイアログボックスがポップアップしますので、Cookie を編集して保存します。ストレージインスペクターでは、編集したいデータをダブルクリックするだけです。インラインエディターで、値を編集できます。

+ +

Cookie を削除する

+ +

Firebug の Cookie パネルでは、メニューの Cookie > Cookie を削除 または Ctrl+Shift+O で、ウェブサイトのすべての Cookie を削除できます。また、Cookie > セッション Cookie を削除 でセッション Cookie のみ削除、Cookie を右クリックして 削除 を選択するとひとつの Cookie を削除できます。開発ツールのストレージインスペクターでは、Cookie を右クリックして すべて削除 を選択するとすべての Cookie を削除、それぞれの "<Cookie 名>" を削除 を選択するとひとつの Cookie を削除できます。さらに、コンテキストメニューの "<ドメイン名>" のすべてのアイテムを削除 で、特定のドメインのすべての Cookie を削除できます。現在、セッション Cookie のみ削除することはできません ({{bug(1336934)}})。

+ +

開発ツールバー

+ +

エラー数を表示する

+ +

ページで JavaScript エラーがあるとき、Firebug はその数を スタートボタンにバッジで表示します。開発ツールでは、開発ツールバー にエラー数を表示します。

+ +

コマンド API

+ +

Firebug はさまざまな コマンド を提供しており、コマンドラインで実行できます。開発ツールバーも、開発ツールを制御してさまざまなタスクを実行するための 多種多様なコマンドとともに API を提供します。

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 +--- +
{{ToolsSidebar}}
+ +

ネットワークモニターは、 Firefox が実行したすべてのネットワーク要求 (たとえばページの読み込みや XMLHttpRequests による) について、各要求でどれだけ時間がかかったかや要求の詳細情報を表示します。

+ +

ネットワークモニターを開く

+ +

ネットワークモニターを開く方法はいくつかあります。

+ + + +

ブラウザーウィンドウの下部にネットワークモニターが現れます。要求を見るために、ページを再読み込みしましょう:

+ +

+ +

ツールバーを開いているときは、ネットワークモニターを選択していなくても常にネットワーク要求を記録します。つまり、例えばウェブコンソールを開いてページをデバッグした後、ページを再読み込みすることなくネットワークモニターに切り替えて、ネットワークアクティビティを確認できます。

+ +

UI の概要

+ +

UI は 4 つの主要な部分に分けられます:

+ + + +

+ + + +

Performance analysis view

+ +

ネットワークモニタの操作

+ +

次の記事では、ネットワークモニタを使用するさまざまな側面について説明します。

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

{{ToolsSidebar}}

+ +

ネットワークモニタにはパフォーマンス分析ツールが含まれており、ブラウザーがサイトのさまざまな部分をダウンロードするのに必要な時間を表示できます。

+ +

パフォーマンス分析ツールの使用

+ +

パフォーマンス分析ツールを実行するにはツールバーのストップウォッチアイコンをクリックします。

+ +

(また、ネットワークモニタを開いたばかりのときに、まだリクエストのリストが表示されていない場合は、メインウィンドウにストップウォッチアイコンが表示されます。)

+ +

その後、ネットワークモニタはサイトを2回読み込みます。1回は空のブラウザキャッシュ、もう1回はプライム付きブラウザキャッシュです。これはユーザーが初めてサイトを訪問し、その後の訪問をシミュレートします。 それぞれの実行結果を並べて表示するか、ブラウザウィンドウが狭い場合は垂直方向に表示します。

+ +

+ +

各実行結果は表と円グラフにまとめられています。テーブルはリソースをタイプ別にグループ化し、各リソースの合計サイズとそれらのロードに要した合計時間を表示します。付随する円グラフは、各リソースタイプの相対的なサイズを示しています。

+ +

ネットワークモニターのネットワークリクエストリストに戻るには、左側の「戻る」ボタンをクリックします。

+ +

円グラフのスライスをクリックすると、その実行のためのネットワークモニタが表示され、フィルタが自動的に適用されてそのリソースタイプのみが表示されます。

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

{{ToolsSidebar}}

+ +

一時停止ボタンを使用してネットワークトラフィックの監視を一時停止および再開できます。

+ +

ネットワークトラフィックの記録を一時停止および再開する

+ +

ネットワークモニタには、現在のページのネットワークトラフィックの記録を一時停止および再開するボタンがあります。これは、たとえば、デバッグ目的でページの安定したビューを取得しようとしているような状況で便利ですが、通常の状況下では永続的なネットワークリクエストによりビューが変化し続けます。一時停止ボタンを使用すると特定のスナップショットを見ることができます。

+ +

メインネットワークモニターツールバーの左端の方にボタンが見つかりますが、それは典型的なポーズボタン、つまり のように見えます。

+ +

あなたはコンテキストでそれをここで見ることができます：

+ +

+ +

押すたびに、ボタンが再生アイコンに変わり、もう一度押すと記録したネットワークトラフィックを切り替えることができます。

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

{{ToolsSidebar}}

+ +

リクエストの詳細ペインはリクエストリストのネットワークリクエストをクリックすると表示されます。このペインには、リクエストに関するより詳細な情報が表示されます。

+ +

ネットワークリクエストの詳細

+ +

行をクリックするとネットワークモニターの右側に新しいペインが表示され、リクエストに関するより詳細な情報が表示されます。

+ +

+ +

このペインの上部にあるタブを使用すると、次のページを切り替えることができます。

+ + + +

ツールバーの右端にあるアイコンをクリックすると詳細ペインが閉じ、リストビューに戻ります。

+ +

Headers

+ +

このタブには、リクエストに関する基本情報がリストされます。

+ +

+ +

これには次のものが含まれます：

+ + + +

表示されるヘッダをフィルタリングすることができます。

+ +

+ +

ステータスコード行の各ヘッダーの横に疑問符のアイコンが表示されます。これは HTTP ヘッダーの MDN ドキュメントで、特定のステータスコードに関する詳細情報へのリンクです。

+ +

Cookies

+ +

このタブには、リクエストまたはレスポンスとともに送信されたすべてのクッキーの詳細が一覧表示されます。

+ +

+ +

ヘッダーと同様に、表示されるクッキーのリストをフィルタリングできます。 Cookie属性の完全なリストが表示されます。レスポンスのクッキーの例の下のスクリーンショットを参照してください。

+ +

cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite

+ +

Firefox 62 ({{bug("1452715")}}) 以降、samesite 属性が表示されています。

+ +

パラメータ

+ +

このタブにはリクエストの GET パラメータと POST データが表示されます。

+ +

+ +

レスポンス

+ +

レスポンスの完全な内容。レスポンスが HTML、JS、または CSS の場合、テキストとして表示されます。

+ +

+ +

レスポンスが JSON の場合、検査可能オブジェクトとして表示されます。

+ +

+ +

レスポンスが画像の場合、タブにプレビューが表示されます。

+ +

+ +

キャッシュ

+ +

レスポンスがキャッシュされると(すなわち、304)、"Cache" タブにキャッシュされたリソースに関する詳細が表示されます。

+ +

+ +

詳細には次のものが含まれています:

+ + + +

HTML プレビュー

+ +

レスポンスが HTML の場合、レンダリングされた HTML のプレビューがレスポンスペイロードの上にある [Response] タブ内に表示されます。

+ +

+ +

タイミング

+ +

[タイミング] タブでは、ネットワークリクエストを、HTTP アーカイブ仕様で定義された次のサブセットに分解します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前説明
Blocked +

ネットワーク接続を待っているキューで費やされた時間。

+ +

ブラウザは、単一のサーバーに対して行うことができる同時接続の数に制限を設けています。Firefox のデフォルトは 6 ですが、network.http.max-persistent-connections-per-server の設定を使用して変更できます。すべての接続が使用中の場合、ブラウザは接続が解放されるまで、より多くのリソースをダウンロードすることはできません。

+
DNS resolutionホスト名を解決するのにかかる時間。
ConnectingTCP 接続を作成するのにかかる時間。
SendingHTTP リクエストをサーバーに送信するのにかかる時間。
Waitingサーバーからのレスポンスを待っています。
Receivingサーバー (またはキャッシュ) からのレスポンス全体を読み取るのにかかる時間。
+ +

それは、そのリクエストに対するタイムラインバーのより詳細な注釈付きのビューを提示します。これは、合計待ち時間がさまざまな段階にどのように分割されるかを示します。

+ +

+ +

セキュリティ

+ +

サイトが HTTPS 経由でサービスされている場合は、"Security" というラベルのタブが追加されます。これには、プロトコル、暗号スイート、証明書の詳細など、使用される安全な接続に関する詳細が含まれています。

+ +

+ +

[セキュリティ] タブには、セキュリティの弱点に関する警告が表示されます。 現在、2つの弱点について警告しています。

+ +
    +
  1. Using SSLv3 instead of TLS
    2. +
  2. Using the RC4 cipher
    3. +
+ +

+ +

スタックトレース

+ +

Stack Trace タブには、スタックトレースがあるレスポンスのスタックトレースが表示されます。

+ +

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

{{ToolsSidebar}}

+ +

ネットワークモニターのリクエストリストには、ページのロード中に行われたすべてのネットワークリクエストの一覧が表示されます。

+ +

ネットワークリクエストリスト

+ +

デフォルトでは、ネットワークモニタにはページの読み込み中に行われたすべてのネットワークリクエストの一覧が表示されます。各リクエストはそれ自身の行に表示されます：

+ +

+ +

デフォルトでは、新しいページに移動するか現在のページをリロードするたびに、ネットワークモニタがクリアされます。設定の [永続ログを有効にする] をオンにするとこの動作を無効にすることができます。

+ +

ネットワークリクエスト列

+ +

テーブルヘッダーを右クリックし、コンテキストメニューから特定の列を選択することによって、異なる列を切り替えることができます。"Reset Columns" オプションで初期設定に戻すこともできます。使用可能なすべての列のリストは次のとおりです。

+ + + +

上部のツールバーはこれらの列にラベルを付け、ラベルをクリックするとその列によるすべての要求がソートされます。

+ +

イメージサムネイル

+ +

ファイルがイメージの場合、行にはイメージのサムネイルが含まれ、ファイル名の上にマウスを置くとツールチップのプレビューが表示されます。

+ +

+ +

セキュリティアイコン

+ +

ネットワークモニタは [ドメイン] 列にアイコンを表示します。

+ +

+ +

これによりリクエストのセキュリティステータスに関する追加情報が得られます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
アイコン意味
HTTPS
弱い HTTPS (例えば、弱い暗号が使用された場合)
失敗した HTTPS (たとえば、証明書が無効だった場合)
HTTP
Localhost
URL がコンテンツブロッキングを有効にしてブロックされる既知のトラッカーに属していることを示します。
+ +

弱い HTTPS リクエストと失敗した HTTPS リクエストについては、[セキュリティ]タブに問題の詳細が表示されます。

+ +

原因列

+ +

「原因」列には、リクエストの原因を示します。これは通常かなり明白であり、一般的にこれとタイプの列項目との間の相関を見ることができます。最も一般的な値は次のとおりです。

+ + + +

タイムライン

+ +

リクエストリストには、各リクエストのさまざまな部分のタイムラインも表示されます。

+ +

+ +

各タイムラインには、その行の他のネットワークリクエストに対する相対的な水平位置が与えられているため、ページのロードに要した合計時間を確認できます。ここで使用される色分けの詳細については、タイミングページのセクションを参照してください。

+ +

Firefox 45 以降、タイムラインには 2 つの垂直線も含まれています：

+ + + +

リクエストのフィルタリング

+ +

リクエストをコンテンツタイプ、XMLHttpRequests リクエスト、WebSocket リクエスト、URL、リクエストプロパティ別のいずれかでフィルタリングできます。

+ +

コンテンツタイプによるフィルタリング

+ +

コンテンツタイプ別にフィルタリングするには、ツールバーのボタンを使用します。

+ +

XHRのフィルタリング

+ +

{{Glossary("XHR (XMLHttpRequest)", "XHR")}} のみを表示するには、ツールバーの "XHR" ボタンを使用します。

+ +

WebSocketsのフィルタリング

+ +

WebSocket接続のみを表示するには、ツールバーの "WS" ボタンを使用します。

+ +

WebSocket 接続で交換されるデータを監視するには、WebSocket Monitor アドオンを試してください。

+ +

URLによるフィルタリング

+ +

URL でフィルタリングするには、ツールバーの検索ボックスを使用します。検索ボックスの中をクリックするか、あるいは Ctrl + F (または Mac の場合は Cmd + F )を押して、入力を開始します。ネットワークリクエストのリストは、フィルタ文字列を含むリクエストのみをドメインまたはファイルの部分に含めるようにフィルタリングされます。

+ +

Firefox 45 では、クエリ文字列に "-" 演算子をつけることでフィルタ文字列を含まないリクエストをフィルタリングできます。たとえば、"-google.com" というクエリでは、URL に "google.com" がないすべてのリクエストが表示されます。

+ +

プロパティによるフィルタリング

+ +

特定のリクエストプロパティでフィルタリングするには、ツールバーの検索ボックスを使用します。検索ボックスは特定のキーワードを認識し、特定のリクエストプロパティによってリクエストをフィルタリングするために使用できます。これらのキーワードの後にコロンと関連するフィルター値が続きます。フィルター値は大文字と小文字を区別しません。マイナス (-) を前に付けると、フィルタは無効になります。異なるフィルタをスペースで区切って組み合わせることができます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワード意味例
status-code特定の HTTP ステータスコードを持つリソースを表示します。status-code:304
method特定の HTTP リクエストメソッドを介して要求されたリソースを表示します。method:post
domain特定のドメインからのリソースを表示します。domain:mozilla.org
remote-ip指定された IP を持つサーバーからのリソースを表示します。remote-ip:63.245.215.53
+ remote-ip:[2400:cb00:2048:1::6810:2802]
cause特定の原因タイプに一致するリソースを表示します。 タイプは、原因列の説明に記載されています。cause:js
+ cause:stylesheet
+ cause:img
transferred特定の転送サイズまたは転送サイズが指定されたサイズに近いリソースを示します。k はキロバイトの接尾辞として、m はメガバイトに使用できます。例えば 1k の値は 1024 に相当します。transferred:1k
size +

特定のサイズ (圧縮解除後) または指定されたサイズに近いサイズのリソースを表示します。k はキロバイトの接尾辞として、m はメガバイトに使用できます。1k の値は 1024 に相当します。

+ 		size:2m
larger-than指定したサイズ (バイト単位) を超えるリソースを表示します。k はキロバイトの接尾辞として、m はメガバイトに使用できます。1k の値は 1024 に相当します。larger-than:2000
+ -larger-than:4k
mime-type指定された MIME タイプに一致するリソースを表示します。mime-type:text/html
+ mime-type:image/png
+ mime-type:application/javascript
isis:cached および is:from-cache はキャッシュから来るリソースのみを示します。
+ is:running は現在転送中のリソースのみを表示します。		is:cached
+ -is:running
scheme指定されたスキームを介して転送されたリソースを表示します。scheme:http
has-response-header指定された HTTP レスポンスヘッダを含むリソースを表示します。has-response-header:cache-control
+ has-response-header:X-Firefox-Spdy
set-cookie-domain指定された値と一致する Domain 属性を持つ Set-Cookie ヘッダを持つリソースを表示します。set-cookie-domain:.mozilla.org
set-cookie-name指定された値と一致する名前を持つ Set-Cookie ヘッダを持つリソースを表示します。set-cookie-name:_ga
set-cookie-value指定された値と一致する値を持つ Set-Cookie ヘッダを持つリソースを表示します。set-cookie-value:true
regexp指定された {{Glossary("regular expression")}} と一致する URL を持つリソースを表示します。regexp:\d{5}
+ regexp:mdn|mozilla
+ +

コンテキストメニュー

+ +

リスト内の行の"コンテキストクリック"は、次のオプションを含むコンテキストメニューを表示します。

+ + + +

Edit and Resend

+ +

このオプションを使用すると、リクエストのメソッド、URL、パラメータ、およびヘッダーを編集し、リクエストを再送信できるエディタが開きます。

+ +

新規タブで開く

+ +

リクエストを新しいタブで再送信します。非同期リクエストのデバッグには非常に便利です。

+ +

Copy as cURL

+ +

このオプションはネットワークリクエストを cURL コマンドとしてクリップボードにコピーするので、コマンドラインから実行することができます。 このコマンドには、次のオプションが含まれます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]メソッドが GET または POST でない場合
--dataURL エンコードされたリクエストパラメータ
--data-binaryマルチパートリクエストパラメータの場合
--http/VERSIONHTTP バージョンが 1.1 でない場合
-Iメソッドが HEAD の場合
-H +

各リクエストヘッダーごとに1つ。

+ +

Firefox 34から、"Accept-Encoding" ヘッダが存在する場合、cURL コマンドに -H "Accept-Encoding: gzip, deflate" の代わりに --compressed が含まれます。これは、レスポンスが自動的に解凍されることを意味します。

+
+ +

Copy/Save All As HAR

+ +

これらのオプションはリストされたすべての要求に対して HTTP アーカイブ (HAR) を作成します。HAR 形式を使用すると、ネットワークリクエストに関する詳細情報をエクスポートできます。'Copy All As HAR' はデータをクリップボードにコピーし、'Save All As HAR' はアーカイブをディスクに保存するダイアログを開きます。

+ +

Firefox 61 以降では、これらのオプションを簡単に発見できるようにツールバーメニューを追加しました ({{bug(1403530)}})。新しい 'HAR' ドロップダウンメニューには、'Copy All As HAR' コマンドと 'Save All As HAR' コマンドの両方と、'Import...' オプションがあります。

+ +

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

{{ToolsSidebar}}

+ +

ネットワークモニタを使用するとネットワーク速度を調整してさまざまな接続速度をエミュレートすることができるため、アプリケーションがさまざまな接続タイプでどのように動作するかを確認できます。

+ +

スロットリング

+ +

ツールバーにはさまざまなネットワーク速度条件をエミュレートするためにネットワーク速度を抑制することを可能にする Throttling ドロップダウンが含まれています。メニューからオプションを選択するだけで、リロードしても維持されます。

+ +

+ +

エミュレートされる特性は次のとおりです。

+ + + +

以下の表は各ネットワークタイプに関連する数値を示していますが、正確な性能測定にはこの機能を使用しないでください。さまざまな条件でのユーザーエクスペリエンスの概算を示すことを意図しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Selectionダウンロード速度アップロード速度最小レイテンシー (ms)
GPRS50 Kb/s20 Kb/s500
Regular 2G250 Kb/s50 Kb/s300
Good 2G450 Kb/s150 Kb/s150
Regular 3G750 Kb/s250 Kb/s100
Good 3G1.5 Mb/s750 Kb/s40
Regular 4G/LTE4 Mb/s3 Mb/s20
DSL2 Mb/s1 Mb/s5
Wi-Fi30 Mb/s15 Mb/s2
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 +--- +

{{ToolsSidebar}}

+ +

ネットワークモニタには2つのツールバー領域があり、1つはメインセクションの上に、もう１つは下にあります。

+ +

ツールバー

+ +

ツールバーは、メインネットワークモニタウィンドウの上部にあります。

+ +

+ +

It provides:

+ + + +

+ +

ネットワークモニタの下部にある2番目のツールバー領域には、次の項目があります。

+ + 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 +--- +
{{ToolsSidebar}}
+ +

この記事では、ページインスペクタの3ペインモードを使用する方法について説明します。

+ +

機能の概要

+ +

Firefox 62以降では、ページインスペクター に新しいモード (3ペインモード) が用意されています。これを有効にすると、同時に以下を見ることができます：

+ + + +

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +
+

Note: 幅の狭いブラウザウィンドウの幅では、CSSルールペインの下にタブが表示されます。

+
+ +

独自のペインに CSS ルールを設定すると、HTML を検査して CSS を編集するだけでなく、計算されたスタイルやグリッドなどの CSS 機能にリアルタイムで反映させることができます。効果を見るには、該当するタブを開いておく必要があります。

+ +

簡単なウォークスルー

+ +

3ペインのインスペクタはデフォルトで無効になっています。 これは、左側のタブペインにあるトグルコントロールで有効になります。

+ +

a view of the tabs panel, showing the 2 to 3 pane toggle icon

+ +

トグルコントロールを押して、2ペインと3ペインの表示を切り替えます。

+ +

The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

+ +

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +

3ペインモードを有効にすると、ページに適用されたルールを編集するときに CSS 機能の実際の変更を確認できます。 たとえば、CSS グリッドプロパティを編集し、グリッドインスペクタですぐに変更を観察できます。

+ +

{{EmbedYouTube("ELS2OOUvxIw")}}

+ +

Firefox 62 以前で3ペインのインスペクタを有効にする

+ +

以前のバージョンの Firefox (Firefox 59/60 以降) では、about:config に移動して次の prefs を true に切り替えることで、Release/Beta で3ペインモードを有効にすることができます：

+ +

devtools.inspector.split-rule-enabled — 3ペインモードのオンとオフを切り替えます。

+ +

devtools.inspector.split-sidebar-toggle — これにより UI トグルボタンが追加され、オン/オフを切り替えることができます。

+ +

Firefox 61 では、これらの設定が次のように変更されました。

+ + + +

Firefox 61の機能をテストするには、リリース/ベータ版でこれらの2つを true に切り替える必要があります。

+ +
+

Note: 3ペインのインスペクタは、Firefox 62 より前のNightly/Developer 版ですでに有効になっています。

+
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 +--- +
{{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_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 +--- +
{{ToolsSidebar}}

ルールビュー で、filter プロパティの隣に丸い灰色と白色のマークを表示します:

+ +

+ +

このマークをクリックすると、フィルターエディターが開きます:

+ +

+ +

フィルターを追加、削除、編集、およびドラッグしてフィルターの適用順序を変更できます:

+ +

{{EmbedYouTube("yws01SEPTvg")}}

+ +

フィルターのプリセットを保存する

+ +

Firefox 42 より、プリセットのリストにフィルターを追加することもできます:

+ +

+ +

現在のフィルターをプリセットのリストに保存します:

+ +

{{EmbedYouTube("bHcfLlZE8T8")}}

+ +

保存したフィルターを、新たな要素に対して適用できます:

+ +

{{EmbedYouTube("PK85L7ztQto")}}

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 +--- +
{{ToolsSidebar}}
+ +

シェイプパスエディターは、CSS の {{cssxref("clip-path")}}、{{cssxref("shape-outside")}} プロパティと {{cssxref("<basic-shape>")}} 値を使用して作成したシェイプの確認や編集を支援するツールです。このガイドでは、ツールで使用可能なオプションを見ていきます。

+ +

シェイプパスエディターを起動および終了する

+ +

シェイプパスエディターは CSS ルールパネルからアクセスできます。パネルの開き方は インスペクターを開く のガイドで説明しています。要素を選択すると、shape-outside など有効な値のそばにシェイプのアイコンが表示されます。

+ +

+ +

アイコンをクリックすると、シェイプをハイライト表示するエディターが現れます。

+ +

+ +

アイコンを再度クリックするとエディターが閉じます。あるいは別の要素を選択すると、別のエディターが現れます。シェイプパスエディターは、ページの再読み込み後に維持されません。再読み込みすると、もう一度要素を選択しなければなりません。

+ +

エディターが表示する線を理解する

+ +

ページ上のシェイプを選択するとシェイプパスエディターが、作成されたパスの理解を支援する線を表示します。

+ + + +

+ +

基本シェイプを編集する

+ +

この機能は、編集する基本シェイプの種類に応じて異なるツールが提供されます。アイコンをクリックしてシェイプパスエディターを起動すると、この機能を使用できます。また、コンテキストメニュー (Ctrl または Cmd + クリック) から付加機能を使用できます。

+ +

circle()

+ +

shape-outside の値が circle() である場合は、円形の基本シェイプ を作成します。circle() 値の隣にあるシェイプアイコンをクリックすると、シェイプをハイライト表示して、円のサイズ変更と中心の移動を行う機能を提供します。マージンボックスを超えるように円を移動したりサイズを変更したりすると、マージンボックスによって輪郭が切り抜かれます。

+ +

+ +

シェイプの編集に応じて、ルールパネルで circle() の値が変化します。これらの値をコピーしてスタイルシートに貼り付けると、編集後のパスで新しいシェイプを作成できます。

+ +

ellipse()

+ +

shape-outside の値が ellipse() である場合は、楕円形の基本シェイプ を作成します。シェイプパスエディターは ellipse() 値でも、circle() とほぼ同様に機能します。楕円形はつぶれた円形ですので、シェイプのアイコンをクリックすると水平および垂直方向にサイズを変更する機能を提供します。

+ +

+ +

inset()

+ +

shape-outside の値が inset() である場合は、inset 型の基本シェイプ を作成します。これは、マージンボックスの中で内容物を切り抜くオフセット値によってシェイプを作成できます。

+ +

シェイプアイコンをクリックすると、矩形のそれぞれの辺を対象にしたシェイプパスエディターが起動しきます。辺をドラッグすると、オフセット値の top、right、bottom、left が更新されます。

+ +

+ +

polygon()

+ +

shape-outside の値が polygon() である場合は、多角形の基本シェイプ を作成します。これは基本シェイプでもっとも複雑な値であり、シェイプを編集する際にツールが多くの機能を提供します:

+ + + +

+ +

シェイプを移動および拡大縮小する

+ +

ハイライト表示したシェイプで付加機能を使用できます。シェイプのアイコンを Ctrl または Cmd + クリックすると、シェイプの拡大・縮小や移動が可能なハイライト表示に替わります。こちらも、マージンボックスの境界を超える部分は切り抜かれます。

+ +

+ +

多角形シェイプでは、軸にそって回転させる機能も提供します。

+ +

ブラウザーのサポート

+ +

シェイプパスエディターは現在、{{cssxref("clip-path")}} で生成したシェイプで機能します。Firefox 62 では {{cssxref("shape-outside")}} で生成したシェイプでも機能します。

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 +--- +
{{ToolsSidebar}}
+ +

CSS ペイン で、ページの CSS の調査や編集を行えます。

+ +

CSS ルールの調査

+ +

ルールビュー では選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:

+ +

+ +

未サポートや無効なスタイルの隣に、警告アイコンを表示します。これにより、あるスタイルがなぜ適用されないかを知る助けになります:

+ +

+ +

ルールの表示

+ +

ここでは各ルールを、セレクターのリストと property:value; の宣言という形式で、スタイルシートのように表示します。

+ +

+ + + +

Firefox 52 より display: grid 宣言がある要素で、グリッドのアイコン () が表示されます。このアイコンをクリックすると、グリッドラインやグリッドトラックを含むグリッドの状態を、ページに重ねて表示します。詳しくは グリッドレイアウトを調査する をご覧ください。

+ +

ユーザーエージェントのスタイル (すなわち、ブラウザーのデフォルトの CSS ルール) を表示するには、開発ツールのオプション パネルで "ブラウザー CSS を表示" を有効化します (この設定は 計算済みビュー の [ブラウザー CSS] チェックボックスとは独立した設定ですので注意してください)。

+ +

ユーザーエージェントのスタイルは背景が異なり、ファイル名と行番号のリンクに接頭辞 (ユーザーエージェント) がつきます:

+ +

+ +

要素 {} ルール

+ +

ルール一覧の先頭にある 要素 {} ルールは、本物の CSS ルールではありません。これは、要素の {{htmlattrxref("style")}} 属性で割り当てられた CSS プロパティを表します。

+ +

Firefox 52 より標的のアイコン () も表示しており、これはページで現在選択している要素を強調表示するための便利な手段です。

+ +

{{EmbedYouTube("bQzOAFvEDco")}}

+ +

ルールのフィルタリング

+ +

ルールビューの上部に "スタイルを絞り込み" と記載されたボックスがあります:

+ +

+ +

ここに入力すると以下のようになります:

+ + + +

+ +

検索ボックス末尾の "X" 印をクリックすると、フィルターを削除します。

+ +
+

ルールビューで Ctrl / Cmd + F を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、Esc を押下すると入力内容を削除できます。

+
+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ + + +

デフォルトで検索ボックスは、文字列を一部に含むすべての宣言を強調表示します。例えば "color" を検索すると、color だけでなく border-bottom-color や background-color を含む宣言も強調表示します:

+ +

+ +

`color` のように検索語をバッククォートで括ると、完全一致に限定して検索します:

+ +

+ +

ショートハンドプロパティを展開する

+ +

ショートハンドプロパティ のそばにある三角印をクリックすると、関連するロングハンドプロパティを表示するように展開できます。

+ +

疑似要素を表示する

+ +

選択した要素に以下の 疑似要素 が適用されている場合に、それらをルールビューで表示します:

+ +

::after
+ ::backdrop
+ ::before
+ ::first-letter
+ ::first-line
+ ::selection
+ :-moz-color-swatch
+ :-moz-number-spin-box
+ :-moz-number-spin-down
+ :-moz-number-spin-up
+ :-moz-number-text
+ :-moz-number-wrapper
+ :-moz-placeholder
+ :-moz-progress-bar
+ :-moz-range-progress
+ :-moz-range-thumb
+ :-moz-range-track
+ :-moz-selection

+ +

選択した要素に適用している疑似要素がある場合は、選択した要素より前にそれらを表示します。ただし、展開しない状態で隠されています:

+ +

+ +

三角印をクリックすると、疑似要素を表示します:

+ +

+ +

:hover、:active、:focus を設定する

+ +

フィルターボックスの右側にボタンがあります:

+ +

+ +

ボタンをクリックすると 3 つのチェックボックスが現れます。これを使用して、選択した要素に {{cssxref(":hover")}}、{{cssxref(":active")}}、{{cssxref(":focus")}} の各疑似クラスを設定できます:

+ +

+ +

この機能は、HTML ビューのポップアップメニュー から使用することもできます。

+ +

いずれかの疑似クラスを設定するとマークアップビューで、疑似クラスが適用されたすべてのノードの隣に橙色の印を表示します:

+ +

+ + + +

各ルールの右上に、ソースファイルの名前と行番号をリンクとして表示します。このリンクをクリックすると、ファイルを スタイルエディター で開きます。

+ +

ソースファイルの場所をコピーできます。リンクを右クリックして [URL をコピー] を選択してください。

+ +

インスペクターは CSS ソースマップを理解します。ソースマップをサポートする CSS プリプロセッサーを使用しており、また スタイルエディターの設定 でソースマップのサポートを有効にしている場合は、生成された CSS ではなく元のソースファイルへのリンクになります。CSS ソースマップのサポートについて、詳しくは スタイルエディターのドキュメント をご覧ください。

+ +

オーバーライドされた宣言

+ +

CSS 宣言がよりウェイトの大きい別の CSS ルールにオーバーライドされた場合、オーバーライドされた宣言に打ち消し線を表示します。

+ +

オーバーライドされた宣言の隣に拡大鏡のアイコンがあります。アイコンをクリックすると、カレントノードに適用されているプロパティで、同じプロパティを設定しようとしたものだけを表示するようにルールビューをフィルタリングします。これは、そのプロパティのカスケードの全体像です。

+ +

どのルールが宣言をオーバーライドしているかを、簡単に確認できます:

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

計算済み CSS の調査

+ +

選択した要素向けに計算された CSS を確認するには、計算済みビュー に切り替えてください。ここでは選択した要素について、各 CSS プロパティの計算済みの値を表示します:

+ +

+ +

Tab を使用して、これらを選択できます。また Firefox 49 より、これらのプロパティについて詳しい情報を確認できます。プロパティを選択して F1 を押下すると、MDN のリファレンスページが開きます。

+ +

プロパティ名の隣にある三角印をクリックする (または選択中に Enter または Space を押下する) と、その値を設定したルールおよびそのルールが存在するソースファイルのファイル名と行番号を表示します:

+ +

+ +

デフォルトでは、ページで明示的に設定された値のみ表示します。すべての値を見るには、[ブラウザー CSS] チェックボックスをクリックしてください。Tab を使用してファイル名/行番号に移動できます。そして Enter/Return を押下すると、関連するファイルを スタイルエディター で開きます。

+ +

検索ボックスに入力すると、その場で一覧を絞り込みます。例えばフォント関連の設定だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティのみ表示します。同様に、プロパティの値も検索できます。フォントを "Lucida Grande" に設定したルールを探すには、フォント名を検索ボックスに入力します。

+ +
+

計算済みビューで Ctrl / Cmd + F を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、Esc を押下すると入力内容を削除できます。

+
+ +

ルールの編集

+ +

ルールビューで宣言またはセレクターをクリックすると、ルールを編集して結果を直ちに確認できます。また、Tab を使用して別の既存プロパティや値を選択でき、Enter または Space を押下するとそれらを編集できます。新しい宣言をルールに追加するには、ルールの最後の行 (閉じ括弧がある行) をクリックします。

+ +

プロパティ名を入力するのに応じて、オートコンプリート候補のリストを表示します。Tab を押下して現在の候補を受け入れるか、↑ および ↓ を押下してリスト内を移動します。デフォルトで選択される項目は、入力した文字から始まるプロパティでもっとも一般的なものです。例えばユーザが "c" を入力すると、デフォルトで "color" を選択します:

+ +

+ +

プロパティに対して無効な値や未知のプロパティ名を編集中に入力すると、宣言の後ろに黄色の警告アイコンを表示します。

+ +

ルールビューで編集した内容が スタイルエディター に反映されます。逆も同様です。実施した変更点は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。

+ +

CSS を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:

+ +

+ +

CSS 変数のオートコンプリート

+ +

CSS で定義した変数に応じて、CSS 変数名 のオートコンプリートを行います。プロパティの値に var( と入力してダッシュ (-) を押下すると、CSS で宣言した変数をオートコンプリートのリストに表示します。Firefox 61 より、それぞれの変数にどの色の値が保存されているかを明確にするために色見本を表示します。

+ +

+ +

さらに、CSS 変数名にマウスポインターを載せると、変数に保存されている色の値をツールチップで表示します ({{bug(1431949)}})。

+ +

+ +

キーボードショートカットで編集する

+ +

編集中は、矢印キーや Page Up/Down キーを (ほかのキーと組み合わせて) 使用して数値のルールを増減できます:

+ + + +

+ +

ルールの追加

+ +

ルールビューでルールを追加できます。右クリックで表示されるコンテキストメニューで [新しいルールを追加] を選択してください。選択中のノードにマッチするセレクターの配下に、新たな CSS ルールを追加します。

+ +

+ +

また、同じことができるボタンもあります:

+ +

+ +

ルールをコピーする

+ +

ルールビューのコンテキストメニュー項目を使用して、ルールやルールの一部分をコピーできます:

+ + + +

+ +

関連情報

+ + 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 +--- +
{{ToolsSidebar}}
+ +

HTML ペイン で、ページの HTML の調査や編集を行えます。

+ + + +

HTML パンくずリスト

+ +

HTML ペインの下部に、パンくずリストのツールバーがあります。これは選択した要素を含む枝の、ドキュメント内での階層構造を表します:

+ +

+ +

パンくずリストにマウスポインターを載せると、その要素をページ上でハイライト表示します。

+ +

パンくずリストの キーボードショートカット があります。

+ +
+

Firefox 48 より前のバージョンでは、パンくずリストのツールバーがマークアップペインの上にありました。

+
+ +

検索

+ +

Firefox 45 より、インスペクターの検索ボックスは、カレントドキュメントおよびすべてのフレーム内のマークアップから検索します。

+ +

検索ボックスをクリックして広げるか、Ctrl + F または Mac で Cmd + F を押下して、マークアップの検索を始めます。

+ +

検索ボックスに入力すると、検索文字列にマッチする class 属性や id 属性を表示するオートコンプリートをポップアップします:

+ +

+ +

↑ および ↓ キーを押下すると候補を行き来でき、Tab で選択中の候補を選択、さらに Enter でその属性を持つ最初のノードを選択します。

+ +

オートコンプリートを選択せずにセレクターなしの検索文字列を入力すると、すべての属性名および属性値、ノードのテキストコンテンツを含むドキュメントの全文から検索します。

+ +

{{EmbedYouTube("AKBhnfp1Opo")}}

+ +

マッチした箇所を巡回するには、Enter を押下します。Firefox 48 より、Shift + Enter を使用して、マッチした箇所を逆方向に巡回できます。

+ +

HTML ツリー

+ +

ペインの残りの部分に、ページの HTML をツリー形式で表示します (この UI はマークアップビューとも呼ばれます)。各ノードの左側に三角印があります。この印をクリックすると、ノードを展開します。Alt キーを押しながら三角印をクリックすると、配下のノードをすべて展開します。

+ +

The new Firefox 57 inspector HTML tree.

+ +

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

+ +

display: none を使用して非表示にしているノードは、淡色で (例えば {{HTMLElement("head")}} などレンダリングされない要素と同様に) 表示します。

+ +

Firefox 53 より、内容物が大きなノードが折りたたまれているとき、開始タグと終了タグの間に省略記号を表示します。Firefox 53 より前のバージョンでは、折りたたまれたノードに子が存在するかを判別できませんでした。現在は、ツリー内に存在する子孫をこのアイコンで示します:

+ +
+

メモ: HTML ツリーで使用できる便利なキーボードショートカットがいくつかあります - HTML ペインのキーボードショートカットリストをご覧ください。

+
+ +

::before と ::after

+ +

Firefox 35 より、{{cssxref("::before")}} および {{cssxref("::after")}} を使用して追加した疑似要素を調査できます。

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

カスタム要素定義

+ +

カスタム要素を含むページでインスペクタを開くと、デバッガでカスタム要素のクラス定義を表示できます。

+ +
    +
  1. 要素を検査します
    2. +
  2. custom という単語をクリックします。
    3. +
+ +

+ +

要素のクラスのソースがデバッガに表示されます。

+ +

+ +

ホワイトスペースのみのテキストノード

+ +
Firefox 52 の新機能
+ +

ウェブ開発者は、1 行のテキストにすべてのコードを記述するわけではありません。マークアップが読みやすくなりますので、空白・改行・タブといったホワイトスペースを HTML 要素の間に置きます。

+ +

通常はこれらのホワイトスペースに効果がなく視覚的に出力されませんが、実際はブラウザーが HTML をパースするときに、ノード内に含まれていない要素のために無名のテキストノードを自動的に生成します。これは (あらゆるテキストの後にある) ホワイトスペースも含まれます。

+ +

これらの自動生成されたテキストノードは インラインレベル のノードであり、幅・高さともに 0 ではない領域をブラウザーが与えます。そして、マージンやパティングを設定していないにもかかわらず、要素の間に謎の隙間が現れるでしょう。

+ +

Firefox 52 より、インスペクターでホワイトスペースのノードを表示しますので、マークアップ内の隙間がどこから発生したかがわかります。ホワイトスペースのノードを丸印 () で表して、マウスポインターを載せると説明のツールチップを表示します:

+ +

+ +

https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html のデモで、実際の動作をご覧ください。

+ +

仮想ルート

+ +

DOM に存在する仮想ルートは、通常の DOM と同じ方法で HTML ページに公開されます。仮想ルートは #shadow-root というノードによって表されます。拡張矢印をクリックすると、仮想 DOM の完全な内容が表示され、ページの DOM の他の部分と同様の方法で含まれるノードを操作できます 限られたフィーチャセット - 仮想 DOM ノードのドラッグアンドドロップや削除はできません。

+ +

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+ +

仮想 DOM に "slotted" 要素が含まれている場合({{htmlelement("slot")}} 要素の内部に挿入された後の slot 属性を持つ要素 - これらの使用方法の説明については、slot に柔軟性を追加するを参照してください)、"slotted" 要素は対応する {{htmlelement("slot")}} 要素の内部に表示され、その横に "公開" リンクが表示されます。「公開」リンクをクリックすると、仮想 DOM の外に存在する slot 属性を持つ要素が強調表示されます。

+ +

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+ +

これは <slot> 要素があり、そのコンテンツのソースを見つけることができない場合に非常に便利です。

+ +
+

メモ: 仮想 DOM 検査は Firefox 61 で実装されましたが、現在は dom.webcomponents.shadowdom.enabled プレフィックスの後ろに隠れています。現在、Firefox 63 のようになっているプラットフォームで Web コンポーネント/仮想 DOM が利用可能になると、この機能が有効になります。

+
+ +

要素のポップアップコンテキストメニュー

+ +

ポップアップコンテキストメニューを使用して、特定のノードに対して共通的なタスクを実行できます。要素をコンテキストクリックすると、メニューを表示します。メニューには、以下の項目があります。リンクをクリックすると、{{anch("Context menu reference", "コンテキストメニューリファレンス")}} のコマンド説明を確認できます:

+ + + +

* これらの項目は特定の状況に限り表示されます。例えば [スタイルエディターでファイルを開く] は、CSS ファイルへのリンクの上でコンテキストクリックしたときに表示されます。

+ +

コンテキストメニューリファレンス

+ +
+

注記: Firefox 49 よりコンテキストメニューは、よりコンパクトにするため大きく再編されました。メニューの構造が上で示したものと若干異なっていても、悩まないでください。それでも同じ項目を使用できます。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HTML として編集要素の HTML を編集する
(コピー) innerHTML要素の innerHTML をコピーする
(コピー) outerHTML +

要素の outerHTML をコピーする

+ +

Ctrl + C (Mac では Cmd + C) を押下すると同じことができます。

+
(コピー) 一意なセレクタ/CSS セレクター要素を一意に選択する CSS セレクターをコピーする
(コピー) CSS パス要素へのフルパスを表す CSS セレクターをコピーする
(コピー) 画像のデータ URI選択した要素が画像である場合に、画像を data:// URL としてコピーする
(Copy) 属性要素の属性をコピーする
DOM プロパティを表示常時表示コンソール を開いて、選択中の要素を 調査 するために "inspect($0)" コマンドを実行する
コンソールで使う +
+

Firefox 43 の新機能

+
+ 現在選択しているノードを temp0 という名前の変数 (temp0 がすでに使用中である場合は、temp1 などを使用) に代入して 常時表示コンソール を開くことにより、コンソールのコマンドラインを使用してノードと対話できます。
すべて展開 +
+

Firefox 44 の新機能

+
+ ツリービューで、選択した要素および配下の要素をすべて展開します。これは、要素の隣にある展開用矢印を Alt キーを押下しながらクリックすることと同じです。
折りたたむ +
+

Firefox 44 の新機能

+
+ ツリービューで、選択した要素を折りたたみます。これは、展開されている要素の展開用矢印をクリックすることと同じです。
(貼り付け) innerHTMLクリップボード内のコンテンツを、ノードの innerHTML として貼り付ける
(貼り付け) outerHTMLクリップボード内のコンテンツを、ノードの outerHTML として貼り付ける
(貼り付け) 前クリップボード内のコンテンツを、ノードの直前に貼り付ける
(貼り付け) 後クリップボード内のコンテンツを、ノードの直後に貼り付ける
(貼り付け) 最初の子要素としてクリップボード内のコンテンツを、ノードの最初の子要素として貼り付ける
(貼り付け) 最後の子要素としてクリップボード内のコンテンツを、ノードの最後の子要素として貼り付ける
この要素の位置にスクロール +

選択したノードを表示するように、ページをスクロールする

+ +

Firefox 44 よりキーボードショートカット S でも、選択した要素の位置にスクロールします。

+
ノードのスクリーンショットを撮影選択したノードのスクリーンショットを撮影して、ダウンロードディレクトリーに保存します。スクリーンショットを撮影する をご覧ください。
新しいノードを作成選択中の要素の最後の子要素として、空の <div> 要素を作成します。新しいノードを挿入する をご覧ください。
ノードを複製 +
+

Firefox 44 の新機能

+
+ 要素をコピーして、当該要素の直後へ挿入します。
ノードを削除要素を DOM から削除する
属性/属性を追加 +
+

Firefox 44 の新機能

+
+ 要素に属性を追加する
属性/属性を編集 +
+

Firefox 44 の新機能

+
+ (属性でメニューを開いた場合のみ) 属性を編集する
属性/属性を削除 +
+

Firefox 44 の新機能

+
+ (属性でメニューを開いた場合のみ) 属性を削除する
リンクを新しいタブで開く(href 属性など、リンク上でメニューを開いた場合のみ) リンク先のアイテムを新しいタブで開く
デバッガーでファイルを開く(JS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをデバッガーで開く
スタイルエディターでファイルを開く(CSS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをスタイルエディターで開く
リンクの URL をコピー(URL 上でメニューを開いた場合のみ) URL をコピーする
:hover:hover CSS 疑似クラスを設定する
:active:active CSS 疑似クラスを設定する
:focus:focus CSS 疑似クラスを設定する
+ +

HTML として編集

+ +

HTML ペインで、HTML (タグ、属性、内容物) を直接編集できます。編集したい要素をダブルクリックして、編集してください。Enter キーを押下すると、変更点が直ちに反映されます。

+ +

要素の outerHTML を編集するには、要素のポップアップメニューを開いて [HTML として編集] を選択します。HTML ペイン内にテキストボックスが現れます:

+ +

Edit HTML directly in the Inspector panel in Firefox 57

+ +

ここに任意の HTML を追加できます。要素のタグを変更する、既存の要素を変更する、新たな要素を追加するといったことが可能です。ボックスの外部をクリックすると、変更点をページに適用します。

+ +

Firefox 52 より、HTML を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:

+ +

+ +

コピーと貼り付け

+ +

ポップアップメニュー を使用して、HTML ツリー内のノードのコピーや希望する場所へノードを貼り付けることができます。

+ +

ドラッグ・アンド・ドロップ

+ +

HTML ツリーでノードを移動することができます。要素をクリックアンドホールドして、ツリー内でドラッグしてください。マウスボタンを離すと、対応する場所に要素を挿入します:

+ +

{{EmbedYouTube("oI-a035nfWk")}}

+ +

Firefox 44 より、Esc キーを押下するとドラッグ・アンド・ドロップをキャンセルできます。

+ +

新しいノードを挿入する

+ +
Firefox 48 の新機能
+ +

Firefox 48 より、マークアップビューの上部に "+" 印のアイコンがあります:

+ +

+ +

このアイコンをクリックすると、現在選択している要素の最後の子要素として、空の <div> 要素をドキュメントに挿入します。そしてドキュメント内の他のノードと同様に、新しいノードの内容やスタイルを編集できます。

+ +

{{EmbedYouTube("NG5daffvVZM")}}

+ +

ポップアップメニューの [新しいノードを作成] を使用して、同じ機能にアクセスできます。

+ +

最後に子要素を追加しても効果がないタイプの要素 (例えば <html> や <iframe> 要素など) を選択しているときは、このボタンが無効になりますので注意してください。ただし、<div> を挿入することが無効である場所 (<style> や <link> など) では有効になります。このような場合は、要素をテキストとして挿入します。

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 +--- +
{{ToolsSidebar}}

ボックスモデルの確認

+ +

要素選択ボタン を押しているとき、ページ上で要素にマウスポインターを載せると、要素の ボックスモデル をオーバーレイで表示します:

+ +

{{EmbedYouTube("vDRzN-svJHQ")}}

+ +

HTML ペインで要素のマークアップにマウスポインターを載せた場合も、同様にオーバーレイで表示します:

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

要素がインライン要素であり複数の行ボックスに分かれている場合は、要素を構成するそれぞれの行ボックスをハイライト表示します:

+ +

+ +

ボックスモデルビュー

+ +

要素を選択すると、ボックスモデルビュー でボックスモデルを詳しく調べることができます:

+ +

+ +

値にマウスポインターを載せると、その値がどのルールに由来するかを示すツールチップを表示します:

+ +

+ +

ボックスモデルビューでボックスモデルの一部にマウスポインターを載せると、ページ上で対応する部分をハイライト表示します:

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

ボックスモデルの編集

+ +

ボックスモデルビュー では値の編集も可能であり、変更結果はページへ即座に反映します:

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

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

{{ToolsSidebar}}

+ +

インスペクタでは HTML ペインの要素の横に「イベント」という単語が表示され、イベントリスナーがバインドされています。

+ +

+ +

アイコンをクリックすると、この要素にバインドされているすべてのイベントリスナーを一覧表示するポップアップが表示されます。

+ +

各行には以下が含まれます。

+ + 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 +--- +
{{ToolsSidebar}}
+ +

FlexBox Inspector を使用すると、Firefox DevTools を使用して CSS Flexbox のレイアウトを調べたり、ページにある flex コンテナを見つけたり、レイアウトを調べたり修正したり、レイアウトの問題をデバッグするなどの作業を行うことができます。

+ +

Flex コンテナの検出

+ +

ページ上の HTML 要素に display: flex が適用されている場合、flexbox のレイアウト機能に簡単にアクセスできるように DevTools にいくつかの機能が用意されています。

+ +

HTML ペインから

+ +

HTML ペインでは、flexbox コンテナを使用してレイアウトされた要素の横に flex という単語があります。

+ +

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

+ +

CSS ペインから

+ +

CSS ペインのルールビューでは、display: flex 宣言のインスタンスは flex という単語の隣に小さなフレックスボックスアイコン を表示します。アイコンをクリックすると、flexbox の子要素の詳細がどのように表示されるかを示すオーバーレイの表示が切り替わります。

+ +

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

+ +

アイコンをクリックすると、要素の上に表示されるページ上のオーバーレイの表示が切り替わり、グリッド線とトラックの位置が表示されます。

+ +

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

+ +

他の要素を選択するとオーバーレイが表示されるので、関連する CSS プロパティを編集して flexbox がどのように影響を受けているかを確認できます。

+ +

レイアウト Flex コンテナセクション

+ +

ページが1つ以上の flexbox コンテナで構成される場合、CSS ペインのレイアウトビューには、コンテナのコンポーネントを表示するための多数のオプションを含む「Flex コンテナ」セクションが含まれています。これらの詳細については、以下のセクションで調べることができます。

+ +
+

メモ: レイアウトビューはページインスペクタの右側のペインにあるレイアウトタブの下にあります。上記および以下のスクリーンショットは、これに到達する方法に関するさらなるヒントを与えるはずです。

+
+ +

Flex コンテナオプション

+ +

レイアウトビューの Flex コンテナセクションは次のようになります。

+ +

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

+ +

Flex Container セクションで変更できる設定は2つあります。

+ + + +

Flex アイテムプロパティ

+ +

flexbox の各コンポーネントには、要素名とそのクラス (存在する場合) を含む番号付きのエントリがあります。要素の上にカーソルを置くと、ページ上で強調表示されます。

+ +

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

+ +

アイテムをクリックすると、そのコンポーネントの詳細が表示されます。

+ +

+ +

このビューには、コンポーネントに関する3つの情報が表示されます。

+ + + +

セクションの上部に、選択された項目の名前は、flexboxコンテナのすべてのコンポーネントのドロップダウンリストです。

+ +

+ +

このドロップダウンを使用して、flexbox 内の他のコンポーネントを選択できます。

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 +--- +
{{ToolsSidebar}}
+ +

グリッドインスペクターで、Firefox の開発ツールを使用して CSS グリッドレイアウト を調査できます。ページ上にあるグリッドを見つける、グリッドを調査および変更する、レイアウトのの問題をデバッグするといったことが可能です。

+ +
+

注記: この記事にあるスクリーンショットで示す例は、Jen Simmons による Futurismo や Variations on a grid、および Rachel Andrew による 名前付きグリッド領域の例 です。

+
+ +

CSS グリッドを発見する

+ +

ページ内に display: grid が適用された HTML 要素があるとき、グリッドの機能へ簡単にアクセスできるようにするため、開発ツールでいくつかの機能を使用できます。

+ +

HTML ペインの機能

+ +

HTML ペイン では、グリッド方式でレイアウトされる要素のそばに "grid" マークがつきます。

+ +

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

+ +

CSS ペインの機能

+ +

CSS ペイン のルールビューでは、display: grid 宣言の実体にグリッドアイコン () を表示します。

+ +

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

+ +

アイコンをクリックすると、ページ上にグリッドをオーバーレイ表示する機能の有効・無効を切り替えます。これは要素に重ねて表示され、グリッドの線やトラックの位置を示すためにグリッドのように並べられます。

+ +

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

+ +

このオーバーレイは別の要素を選択しても表示し続けますので、関連する CSS プロパティを編集して、グリッドにどのような影響があるかを確認できます。

+ +

レイアウトビューのグリッドセクション

+ +

ページ内にグリッドがあるとき、グリッドを確認するためのさまざまなオプションがある "グリッド" セクションが CSS ペインのレイアウトビューに表示されます。詳しくは後の章で説明します。

+ +
+

注記: レイアウトビューは、ページインスペクターの右側のペインにあるLayoutタブの中にあります。この記事内のスクリーンショットで、どこにあるかのヒントを得られるでしょう。

+
+ +

グリッドのオプション

+ +

レイアウトビューのグリッドセクションは以下のようなものです:

+ +

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

+ +

セクション内にオプションがいくつかあります:

+ + + +
+

注記: オーバーレイの色や表示設定は、ページごとに再読み込み後も維持します。

+
+ +

これらの機能を、さらに詳しく見ていきましょう

+ +

グリッドをオーバーレイ表示

+ +

"グリッドをオーバーレイ表示" セクションに、ページ上のそれぞれのグリッドの項目が表示されます:

+ +

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

+ +

それぞれの項目の構成は (左から右の順に) 以下のとおりです:

+ + + +

線番号を表示

+ +

デフォルトで、グリッドオーバーレイに線番号を表示します。

+ +

A CSS grid overlay with grid line numbers displayed

+ +

"線番号を表示" のチェックを外すと、線番号が消えます。

+ +

A CSS grid overlay with grid line numbers not displayed

+ +

領域名を表示

+ +

領域名があるグリッドでは、デフォルトで領域名をグリッドオーバーレイに表示します。

+ +

A CSS grid overlay with named area names displayed

+ +

"領域名を表示" のチェックを外すと、領域名が消えます。

+ +

A CSS grid overlay with named area names not displayed

+ +

グリッド線を無限に延伸

+ +

デフォルトで、グリッドの線やトラックは display: grid が設定された要素の内部に限って表示します。

+ +

A CSS grid overlay with grid lines not extended infinitely

+ +

"グリッド線を無限に延伸" にチェックを入れると、グリッド線がそれぞれの軸にそってビューポートの端まで延伸します。

+ +

A CSS grid overlay with grid lines extended infinitely

+ +

ミニグリッドビュー

+ +

現在オーバーレイ表示しているグリッドを、実際のグリッドに比例して小さく表示します。

+ +

A mini CSS grid view from the Firefox DevTools

+ +

ミニグリッドのさまざまな領域にマウスポインターを載せると、グリッドオーバーレイで対応する領域もハイライト表示されます。また、領域の寸法や列番号・行番号などの有用な情報をツールチップで表示します。

+ +

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.

+ +

関連情報

+ + 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 +--- +
{{ToolsSidebar}}

ここには様々な HOW TO へのリンクがあります。これらのリンク先では、各技術の HOW TO について詳しく説明しています。

+ +

{{ ListSubpages () }}

+ +

 

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 +--- +
{{ToolsSidebar}}

CSS ペインの ルールビュー ではルールに色の値が含まれる場合に、値の隣に色のサンプルを表示します:

+ +

+ +

色サンプルをクリックすると、その色を変更できるカラーピッカーがポップアップします:

+ +

+ +

カラーピッカーに、スポイトのアイコンがあります。このアイコンをクリックすると、要素の色をページ内から新たに選択するスポイトツールを使用できます:

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

Firefox 40 より、Shift キーを押しながら色サンプルをクリックすると、色単位を切り替えます:

+ +

{{EmbedYouTube("gYL8-gxc1MA")}}

+ +

Firefox 53 以降で、CSS color level 4 の色の値をサポートします。

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 +--- +
{{ToolsSidebar}}
+ +

インスペクターを開く方法は、主に 2 つあります:

+ + + +

インスペクターがブラウザーウィンドウの下部に現れます:

+ +

The all-new Inspector in Firefox 57 DevTools.

+ +

インスペクターで何を行うかを知るために、UI ツアー をご覧ください。

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 +--- +
{{ToolsSidebar}}
Firefox 48 の新機能
+ +

Firefox 48 より、絶対的に配置されている要素をページ上でドラッグして移動できるようになりました。

+ +

{{EmbedYouTube("Or5HM1FFhvE")}}

+ +

{{cssxref("position")}} プロパティが absolute、relative または fixed に設定されており、また {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} プロパティのいずれかが指定されていると、ボックスモデルビュー にボタンを表示します:

+ +

+ +

ボタンをクリックすると、要素の隣にハンドルを 2 つ表示します:

+ +

Example for changing the position of an element within the content

+ +

このハンドルを使用して、ページ内で要素を移動できます。

+ +

要素が絶対配置されている場合は、オフセット元を表す波線を表示します。相対配置の要素では、ノードの元の位置を波線で示します。オフセット量は、それぞれの方向について線とツールチップで示します。

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 +--- +
{{ToolsSidebar}}

選択された要素 は、ページ内でインスペクターが現在注目している要素です。選択された要素は HTML ペイン に表示します。また、要素の CSS を CSS ペイン に表示します。

+ +

ハイライト表示された要素 は、ボックスモデルを表す図や、タグやサイズを表すツールチップをページ内で重ね合わせている要素です:

+ +

+ +

コンテキストメニューで選択する

+ +

ページ内の要素上でコンテキストメニューを開いて [要素を調査] を選択すると、インスペクターが開いて即座に要素を選択します:

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

HTML ペインで選択する

+ +

インスペクターを開いているとき、HTML ペイン内に並んでいる要素上でマウスポインターを動かすのに応じて、対応する要素をページ内でハイライト表示します。HTML ペインでクリックすると、要素を選択します:

+ +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

キーボードの矢印キーを使用して、DOM 内を移動することもできます。

+ +

ノードピッカーで選択する

+ +

"ノードピッカー" のアイコン (要素を選択 アイコンとも呼ばれます) をクリックしてノードピッカーを起動すると、ページ自体で要素を選択できます。ページ内でマウスポインターを動かすと、ポインターの下にある要素をハイライト表示します。要素をクリックすると、選択します:

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

+ +

Firefox 52 より、Shift を押しながら要素をクリックすると、要素を選択しますがピッカーを引き続き使用できます。これにより CSS ペインで要素のルールを確認でき、ページ内の別の要素を簡単に選択できます。

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 +--- +
{{ToolsSidebar}}
+ +

選択された要素は、インスペクタが現在フォーカスしているページの要素です。 選択した要素がHTMLペインに表示され、そのCSSがCSSペインに表示されます。

+ +

強調表示された要素は、ページにオーバーレイされた要素で、ボックスモデルを示すグラフィックとそのタグとサイズを示すツールチップです。

+ +

+ +

コンテキストメニューを使用する

+ +

インスペクタを開いて要素をすぐに選択するには、ページ内の要素のコンテキストメニューをアクティブにして、「要素の検証」を選択します。

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

HTML ペインを使用する

+ +

インスペクタが開いているときに、HTMLペインにリストされている要素の周りにマウスを移動すると、対応する要素がページ内で強調表示されます。 HTMLペインで要素をクリックして選択します。

+ +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

矢印キーを使用して、キーボードでDOMの周りを移動することもできます。

+ +

ノードピッカーを使用する

+ +

ページ自体の要素を選択するには、その要素のアイコン  (「要素の選択」アイコンとも呼ばれます) をクリックして"node picker"をアクティブにします。その後、ページ上でマウスを動かすと、マウスの下の要素が強調表示されます。要素をクリックして選択します。

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

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 +--- +
{{ToolsSidebar}}

Firefox アドオンは、chrome://browser/content/devtools/inspector/inspector.xul コンテキストから以下のオブジェクトにアクセスできます:

+ +

window.inspector

+ +

inspector-panel.js で定義しています。属性と関数:

+ + + +

バインド可能なイベント:

+ +

markuploaded

+ +

ページを変更した後、左側のパネルが更新されたときに呼び出されます。

+ +

ready

+ +

最初の markuploaded で呼び出されます。

+ +

pseudoclass

+ +

疑似クラスの切り替え後に呼び出されます。

+ +

layout-change

+ +

"描画やリサイズなどのための、低優先度の変更イベント"

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 +--- +
{{ToolsSidebar}}

インスペクターで選択されている要素は、変数 $0 を使用してウェブコンソールから参照できます。

+ +

+ +

ウェブコンソールに出力された DOM 要素の隣に、標的のアイコンがあります。このアイコンにマウスポインターを載せると、ページ上で要素をハイライト表示します。またアイコンをクリックすると、要素がインスペクターで選択されます:

+ +

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 +--- +
{{ToolsSidebar}}

ルールビュー で、background-image で指定した画像のプレビューを確認できます。ルールにマウスポインターを載せてください:

+ +

+ +

Firefox 41 より、画像の宣言上で右クリックすると、画像を data: URL としてコピーするメニュー項目があります:

+ +

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 +--- +
{{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/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 +--- +
{{ToolsSidebar}}

ルールビュー で transform プロパティにマウスポインターを載せると、ページ上に変形操作をオーバーレイ表示します:

+ +

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) +--- +
{{ToolsSidebar}}
+

アニメーションインスペクタの UI は、Firefox 43 で改良しました。Firefox 43 以降でアニメーションインスペクタがどのようになったかを知りたい場合は、"アニメーションを扱う" のメインページをご覧ください。

+
+ +

Firefox 41 および 42 では、アニメーションインスペクタで以下のことができます:

+ + + +

{{EmbedYouTube("0vSIuKaqD8o")}}

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 +--- +
{{ToolsSidebar}}
+ +

firefox-logo-animation

+ +

Web Animations API を使用するアニメーションのサンプルです。

+ +

HTML コンテンツ

+ +
<div class="channel">
+   <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/>
+   <span id="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%);
+}
+
+#note {
+  margin-left: 1em;
+  font: 1.5em "Open Sans",Arial,sans-serif;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  opacity: 0;
+  width: 0;
+}
+
+ +

JavaScript コンテンツ

+ +
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);
+
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 +--- +
{{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/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 +--- +
{{ToolsSidebar}}

本記事では、アニメーションの視覚化と編集が可能な 3 つのツールを扱います:

+ + + +

アニメーションインスペクター

+ +

ページインスペクターの アニメーションビュー では、ページ内のアニメーションを時間の時系列に沿って表示します。また、時系列上の任意の位置に移動するために使用する、ドラッグ可能なウィジェットがあり、ある時点のページの状態を確認できます。

+ +

このビューでは CSS トランジション、CSS @keyframes 規則、Web Animations API を使用して作成したアニメーションを表示します。Firefox 48 より、::before および ::after 疑似要素に適用したアニメーションも表示します。

+ +

ビューの動作を知るために、サンプルを使用してひととおり見ていきましょう。以下のボックス内に、Firefox Developer Edition を表すグレースケールのアイコンがあります。アイコンをクリックすると膨張して色がつき、ブラウザ名が現れます。もう一度アイコンをクリックすると、元に戻ります。

+ +

{{EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API")}}

+ +

これらのアニメーションは、Web Animations API を使用して作成しました。

+ +

このサンプルで何が起きているかを、アニメーションインスペクターで見ていきましょう。

+ +
    +
  1. ボックス内を右クリックして [要素を調査] を選択します。
    2. +
  2. <div class="channel"> 要素が選択されていることを確認します。
    3. +
  3. [アニメーション] タブに切り替えます。
    4. +
  4. アニメーションを再生します。
    5. +
+ +

{{EmbedYouTube("3f_vtdHqt9o")}}

+ +

ここで、アニメーションインスペクターの内容を詳しく見ていきましょう:

+ +

+ +

これは、選択中の要素や子要素に適用されているすべてのアニメーションをひとつの時系列に表示したタイムラインです。時系列は最初のアニメーションの開始時点から始まり、最後のアニメーションの終了時点で終わります。また、250 ミリ秒ごとにマーカーがついています (表示しているアニメーションの時間規模に依存します)。

+ +

アニメーションバー

+ +

それぞれのアニメーションやトランジションは、時系列に沿って水平方向に並ぶバーとして表示します。また、バーは以下のように表示します:

+ + + +

Compositor スレッドを使用してプロパティのアニメーションを行っている場合は稲妻のアイコン () を表示します (詳しくは さまざまな CSS プロパティでアニメーションを行うコスト をご覧ください)。

+ +

Firefox 52 よりバーの形状が、アニメーションで使用するイージング効果を反映するようになりました。前出の例では 1 番目のバーが凹型で ease-in、2番目のバーが凸型で ease-out を表していることがわかります。

+ +

CSS トランジションのアニメーションでは、それぞれのプロパティのトランジションをひとつのバーで表し、トランジションを行うプロパティの名称を記載します。CSS @keyframes のアニメーションでは、それぞれのアニメーションをひとつのバーで表し、キーフレームの名前を記載します。

+ +

アニメーションやトランジションに遅延がある場合は、その部分を斜線で網掛け表示します。delay および endDelay の両方を表します。

+ +

バーにマウスポインターを載せると以下の情報を含む、アニメーションやトランジションの詳細情報を記載したツールチップを表示します:

+ + + +

+ +

アニメーションする要素の情報

+ +

バーの左側に、アニメーションを適用した要素のセレクターがあります。セレクターにマウスポインターを載せると、ページ上で要素をハイライト表示します。セレクターをクリックすると、要素をインスペクターで選択します。

+ +

{{EmbedYouTube("ygATdrzQz0I")}}

+ +

セレクターの左側に、"標的" のアイコン () があります。このアイコンをクリックすると、要素をハイライト表示したままにします。

+ +

アニメーションの詳細情報

+ +

バーをクリックすると、アニメーションで変化するすべてのプロパティについて詳細情報を表示します。例えば、img#icon のアニメーションのバーをクリックしてみましょう:

+ +

+ +

filter と transform の、2 つのプロパティが変化していることがわかります。それぞれのドットは、アニメーションで使用しているキーフレームのセット内にある、プロパティの項目を示します。どちらのプロパティも 0ms で開始、750ms で終了しています。filter は 250ms で、transform は 500ms で値が与えられています。ドットにマウスポインターを載せると、タイムライン上の特定の時点でプロパティに与えられた値を確認できます:

+ +

+ +

これは要するに、アニメーションの キーフレーム を視覚化したものです:

+ +
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%)'                  }
+];
+ +

サンプルに応用する

+ +

これらすべてをサンプルに適用すると、以下のことがわかります:

+ + + +

アニメーションを再生する

+ +

アニメーションインスペクターの上部に、以下のウィジェットがあります:

+ + + +

最後に、時系列の上部にあるバーの内部をクリックすると、左右にドラッグしてアニメーションを前後に遷移させることが可能なスクラバーを使用できます。これにより、いつ何が起きているかを正確に把握できます:

+ +

{{EmbedYouTube("9fxRm3i_aDQ")}}

+ +

アニメーションの合成に関する詳細情報

+ +

Firefox 49 よりアニメーションインスペクターで、アニメーションのパフォーマンスや合成に関する情報を提供する機能が向上しました。これを説明するために、サンプルを 2 つ作成しました。animation-inspector-compositing.html を開いて赤色の長方形をクリックすると、シンプルな {{cssxref("opacity")}} のアニメーションが始まります。Firefox 49 以降でこれをアニメーションインスペクターで見ると、以下のことがわかります:

+ + + +

+ +

次に animation-inspector-compositing-silly.html を見てみましょう。こちらも同様のサンプルですが、赤色の長方形をクリックすると {{cssxref("opacity")}} と同時に、{{cssxref("left")}} や {{cssxref("transform")}} (translation なし) プロパティもアニメーションする点が異なります。位置プロパティと translation を同時に実行することにはあまり意味がありません (2 つの効果は同期しません) ので、transform プロパティは意図的に Compositor で扱われません。Firefox 49 以降、アニメーションインスペクターはこれをより役に立つように伝えます。アニメーションインスペクターで見ると、以下のことがわかります:

+ + + +

+ +

@keyframes の編集

+ +

選択中の要素に関連付けられた @keyframes 規則 を ルールビュー に表示します。また、編集も可能です:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

タイミング関数の編集

+ +

CSS アニメーション を作成する際に、タイミング関数 を指定できます。これはアニメーションが進むペースを定義します。タイミング関数の指定方法のひとつが、3 次ベジェ曲線による指定です。

+ +

ルールビューで、3 次ベジェ曲線で定義したタイミング関数の隣にアイコンを表示します。このアイコンをクリックすると視覚的な曲線エディターを表示します。P1 および P2 をドラッグして、その結果をページ上で確認できます。

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

この機能は、Lea Verou の cubic-bezier.com 由来のオープンソースコードを使用しています。

+ +

3 次ベジェ曲線エディターに多くのプリセットを用意しました。これらは "Ease-in"、"Ease-out"、"Ease-in-out" にグループ化されています:

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

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 +--- +
{{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/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 +--- +
{{ToolsSidebar}}
+ +

ページの HTML や CSS の調査や変更を行うために、インスペクターを使用しましょう。

+ +

Firefox でローカルへのコピーとして読み込んだページの他に、Android 版 Firefox などリモートで読み込んだページも調査できます。開発ツールをリモート環境に接続する手順については、リモートデバッグ をご覧ください。

+ +
+

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

+ +

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

+ +
+

使い方

+ +

インスペクターで何ができるかを知るために、以下の使い方ガイドをご覧ください:

+ +
+ +
+ +
+

リファレンス

+ +
+ +
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 +--- +
{{ToolsSidebar}}

{{Page ("ja/docs/tools/Keyboard_shortcuts", "page-inspector")}}

+ +

共通ショートカット

+ +

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

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 +--- +
{{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/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 +--- +

{{ToolsSidebar}}

+ +

本記事は、インスペクターのユーザーインターフェイスの主要部を紹介するクイックツアーです。

+ +

ここでは、インスペクターの UI に存在する 3 つのトップレベルコンポーネントを扱います:

+ + + +

The all-new Inspector panel in Firefox 57.

+ +

本ガイドは、あえて可能な限り簡潔にします。そしてインスペクターの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。

+ +

要素選択ボタン

+ +

インスペクターは、選択中の要素に関する詳細情報を提供します。要素選択ボタンは、調査する要素を選択する手段のひとつです:

+ +

This is the button in Firefox 57 Inspector you can use to select elements on a web page.

+ +

 

+ +

このボタンは、実際は ツールボックスのツールバー の一部ですので、インスペクター以外のツールからでも即座にアクセスできます。

+ +

要素の選択方法については、要素を選択する のガイドをご覧ください。

+ +

HTML ペイン

+ +

インスペクターは 2 つのペインに分かれています。左半分は HTML ペインが占めています:

+ +

These are the tasty new HTML and CSS panes in Firefox 57.

+ +

 

+ +

HTML ペインの構造について詳しくは、HTML の調査と編集 のガイドをご覧ください。

+ +

CSS ペイン

+ +

インスペクターの右半分は、CSS ペインが占めています:

+ +

The rules view within the Inspector.

+ +

 

+ +

CSS ペインは 5 つのビューに分かれています:

+ + + +

ペインの上部にあるタブを使用して、別のビューに切り替えます。

+ +
+

メモ: Firefox 62 以降では、ルールビューを CSS ペインの他のタブとは別の独自のペインに分割することができます。これは3ペインモードと呼ばれます。

+
+ +

 

+ +

ルールビュー

+ +

ルールビューでは選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:

+ +

詳しくは CSS の調査と編集 をご覧ください。

+ +

計算済みビュー

+ +

計算済みビューでは選択した要素について、各 CSS 属性の計算済みの値と、要素のボックスモデルを編集可能な形で視覚化したものを表示します。

+ +

The Computed view within the Inspector.

+ +

 

+ +

ボックスモデルビューについて詳しくは、ボックスモデルの調査と編集 をご覧ください。Firefox 50 より前のバージョンでは、ボックスモデルビューを [計算済みビュー] タブの中ではなく、個別のタブで表示していました。

+ +

このビューに表示される CSS 宣言について詳しくは、計算済み CSS の調査 をご覧ください。

+ +

フォントビュー

+ +

フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。

+ +

The all-new Inspector panel in Firefox 57.

+ +

 

+ +

詳しくは フォントを確認する をご覧ください。

+ +

アニメーションビュー

+ +

アニメーションビューでは、選択した要素に適用されているアニメーションの詳細情報を表示します。また、アニメーションを一時停止する機能もあります:

+ +

This is the Animations pane in the Firefox 57 Inspector.

+ +

 

+ +

詳しくは アニメーションを扱う をご覧ください。

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 +--- +
{{ToolsSidebar}}

Paint Flashing Tool はアクティブ時に、何らかの入力 (例えばユーザーがマウスを動かしたりスクロールしたりするなど) への応答としてブラウザーが再描画を行わなければならない部分を強調表示します。このツールにより、ウェブサイトがブラウザーに過剰な再描画を行わせていないかを明らかにできます。再描画はパフォーマンスへの影響が大きい処理になりえるため、不必要な再描画をなくすことでウェブサイトの応答性を改善できます。

+ +

再描画と応答性

+ +

ブラウザーはウェブページをレンダリングするときに、HTML や CSS の解析、どのようにレイアウトするかの決定、そして実際に画面へコンテンツを表示するために描画を行います。ウェブページで見えている部分が変更するイベントが発生するたびに、ブラウザーはページの一部分を再描画しなければなりません。例えばユーザーがページをスクロールしたり、要素のスタイルを変更する :hover 疑似クラスを持つ要素にマウスポインターを載せたりすると、再描画が必要です。

+ +

再描画は高コストな処理であるため、ブラウザーは必要な再描画量の最小化を図ります。ブラウザーは画面上のどの部分が "損傷" しているかを解析して、そこだけを再描画しようとします。また、互いに独立して更新されると考えられるレイヤーに、ページのモデルを分割します。レイヤーは独立して描画された後に合成されますので、ひとつのレイヤーで外観が変更しても他のレイヤーでの再描画を引き起こしません。また 2 つのレイヤーの関係が変化するだけ (例えばアニメーションで) では、再描画はまったく必要ありません。

+ +

ウェブ開発者によってなされた選択がブラウザーの上記動作を妨げる場合があり、必要以上の画面領域に対してより多くの再描画を引き起こします。これにより、ユーザーの入力に対するサイトの応答が遅くなるかもしれません ("janky" とも言われます)。Paint Flashing Tool はここで役立ちます。イベントへの応答としてブラウザーが再描画した領域を示すことで、過剰な再描画ではないかを確認できます。

+ +

Paint Flashing Tool を使用する

+ +

Paint Flashing を有効にする方法は 2 つあります:

+ + + +

+ + + +

+ +

ページを使用してみましょう。マウスを動かしたり少しスクロールしたりすると、上図のページが下図のようになります:

+ +

この例では、再描画の主な原因が 2 つあります:

+ + + +

Paint Flashing を無効にするには、ツールバーで [描画された領域を強調表示します] のアイコンを再度クリックするか、開発ツールバーに "paintflashing off" と入力して Enter キーを押下します。

+ +

例: CSS トランジション

+ +

実装の選択が再描画の効率に影響を与える可能性がある分野のひとつが、CSS トランジション です。以下の例は、CSS トランジションを使用して要素を動かすための、2 つの異なる方法を示しています。第一の方法は要素の margin-left に対してトランジションを適用する、第二の方法は transform プロパティを使用して要素を動かします。

+ +
<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>
+
+ +
#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%);
+}
+ +

以下の領域にマウスポインターを動かすと、トランジションをご覧いただけます:

+ +

{{EmbedLiveSample('Example_CSS_transitions', 600, 300)}}

+ +

ここで Paint Flashing を有効にして、もう一度試してみましょう。margin-left 版では要素が動くにつれて一連の再描画が発生するのに対して、transform 版では始点と終点だけで再描画が発生します。

+ +

なぜでしょう? transform を使用するとき、ブラウザーは要素のために別のレイヤーを生成します。よって要素が移動するときは、すべての変更点が 2 つのレイヤー相互の関係であり、合成処理によって対処されます: どちらのレイヤーも再描画が不要です。

+ +

シンプルなスタイルである本ケースでは、追加の再描画は大きな違いにはなりません。しかしスタイルが描画処理的に高コストなものになると、大きな違いになるでしょう。ブラウザーの再描画を最小化する最適化は何かを知るのは難しく、またバージョンが変わると最適化の方法が変わる可能性があります。よって Paint Flashing Tool でウェブサイトのテストを行うと、最適な動作であることを確かめるのに役立ちます。

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 +--- +
{{ToolsSidebar}}
+

パフォーマンスツールのメモリ割り当てビューは、プロファイルの中でページ内のどの関数がもっとも多くのメモリ割り当てを行ったかを表示します。

+ +

メモリを大量に割り当てたりメモリ割り当てを多数行ったりするとガベージコレクションを引き起こすため、パフォーマンスの観点で重要です。ガベージコレクションは、ページの応答性を損なう可能性があります。

+
+ +
+

メモリ割り当てビューは、Firefox 46 の新機能です。

+
+ +

メモリ割り当てビューを有効にするため、プロファイルを記録する前にパフォーマンスツールの設定で "メモリ割り当てを記録" にチェックを入れなければなりません。そして通常どおりプロファイルの記録を行うと、ツールバーに "メモリ割り当て" という新たなタブが現れます:

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

メモリ割り当てビューを分析する

+ +

メモリ割り当てビューは、以下のようなものです:

+ +

+ +

メモリ割り当てビューは、記録中に行われたメモリ割り当てを定期的にサンプリングします。それぞれの行は、記録中に少なくとも 1 回、メモリ割り当てのサンプルを取得した関数を表します。

+ +

各行に、以下の列があります:

+ + + +

行は "Self Bytes" 列の値でソートします。

+ +

よって、前出の例では以下のことが分かります:

+ + + +

それぞれの関数名の隣に、展開用の三角印があります。これをクリックすると、関数を呼び出した場所がわかります:

+ +

+ +

この例では signalLater() が 2 つの場所から呼び出されたことが分かります。removeInner() と setSelectionInner() です。この方法でコールスタックを戻ることができ、メモリ割り当ての状況をよく理解できます。

+ +

Self Cost と Total Cost

+ + + +

このビューでは、列が "Self" と "Total" の 2 つのセットに分けられていることがわかるでしょう。"Self" は、関数自体で取得したサンプルを記録します。"Total" は関数自体と、この関数から呼び出した関数で取得したサンプルを記録します。ビューではツリーの葉に位置する関数をトップレベルに置きます (つまり、コールスタックを反転して表示します) ので、トップレベルではどちらも同じ値になります。一方、コールスタックを戻っていくと違いが出てくることがわかるでしょう:

+ +

+ +

この図では、signalLater() で 8904 個のサンプルを取得しています。しかし signalLater() は、removeInner() と setSelectionInner() の 2 か所から呼び出されています。これらの関数はどちらも Self Count が 0 であり、その関数内で直接メモリ割り当ては行っていないことを意味します。一方、removeInner() の Total Count は 8901、setSelectionInner() の Total Count はわずか 3 です。これは 8904 回のメモリ割り当てが、removeInner() の枝で行われた 3回を除き、すべて signalLater() で発見されたことを語ります。

+ +

メモリ割り当てとガベージコレクション

+ +

当然ながらサイト内で割り当てたメモリは、知っておくと役に立つ情報です。しかし、サイトのメモリ割り当てのプロファイルとサイトの応答性を主に結びつけるものは、ガベージコレクション (GC) のコストです。

+ +

ガベージコレクションを行う JavaScript などの言語は、到達性がなくなったオブジェクトを発見するためにランタイムが定期的にヒープを走査して、そのようなオブジェクトが占めていたメモリを解放しなければなりません。このような GC イベントを実行する間は JavaScript エンジンが一時停止しますので、プログラムが休止して応答性が完全になくなります。

+ +

応答性への影響を軽減するため SpiderMonkey (Firefox の JavaScript エンジン) は少しずつ増加する GC を実施でき、GC の合間にプログラムを実行できます。それでも時にはノンインクリメンタルガベージコレクションが必要であり、この場合プログラムは完了するまで待たなければなりません。

+ +

GC イベントはタイムラインビューで赤色のマーカーで示され、時には数百ミリ秒続くなど応答性に危険信号がともります:

+ +

+ +

サイトのパフォーマンスプロファイルに GC イベントがある場合、何ができるのでしょうか? SpiderMonkey は、いつどのようなガベージコレクションを行うかを決めるために複雑なヒューリスティック技術を使用しています。

+ +

ただし、通常はメモリ割り当ての圧力 (大量のメモリを割り当てる、または高い頻度でメモリを割り当てる) によって SpiderMonkey がガベージコレクションを行う可能性が高くなり、さらにインクりメンタルではないガベージコレクションを行う可能性も高くなります。

+ +

メモリ割り当ての圧力によってガベージコレクションが発生した場合は、タイムラインのマーカーの右側にあるサイドバーで "Show allocation triggers" という名前のリンクを表示します。このリンクをクリックすると開発ツールがメモリ割り当てビューに切り替わり、前回の GC が終了したときからクリックした GC が始まるときまでの時間帯を選択します。これにより、GC イベントを引き起こしたメモリ割り当てを集約して表示します:

+ +

{{EmbedYouTube("tO5ovD9Jw4k")}}

+ +

このような問題がみられる場合は、そのときに行っているメモリ割り当ての回数や量を削減できないか検討してください。例えば:

+ + 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 +--- +
{{ToolsSidebar}}
+ +
+

コールツリーは、どの JavaScript 関数がもっともブラウザで時間をかけているかを示します。この結果を分析すると、コードのボトルネック (ブラウザが不相応に多くの時間をかけている場所) を見つけることができます。

+ +

これらのボトルネックは、最適化により最大の効果を得られる場所です。

+
+ +

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

+ +
+

本記事では、例としてシンプルなプログラムから出力した結果を使用します。自身のプロファイルで実験するためにプログラムを取得したい場合は、こちらをご覧ください。ここで言及するプロファイルはこちらにあります。読み進めるために、インポートしてください。

+ +

プログラムの構造を説明するページはこちらです。

+ +

なおフレームチャートのドキュメントページでも、同じプログラムおよび同じプロファイルを使用しています。

+
+ +

以下のスクリーンショットはバブルソート、選択ソート、クイックソートの 3 種類のソートアルゴリズムを比較するプログラムの出力です。整数の乱数を埋めた配列をいくつか生成して、それぞれのアルゴリズムで順にソートします。

+ +

記録内で長い JavaScript マーカーを示している部分をズームインしました:

+ +

+ +

コールツリーは、表形式で結果を表示します。それぞれの行は 1 個以上のサンプルを取得した関数を表し、これらの行は関数内で取得したサンプル数の降順で並べられます。

+ +

Samples は、この特定の関数を実行していたときに取得されたサンプル (この関数によって呼び出された他の関数) の数です。

+ +

Total Time は、記録の選択された部分がカバーする合計時間に基づいて、その数値をミリ秒に変換したものです。これらの数値は、サンプル数とほぼ同じでなければなりません。

+ +

Total Cost は、記録の選択された部分のサンプルの合計数に対するパーセンテージとしての数値です。

+ +

Self Time は、その特定の機能で費やされた時間 (その子を除く) として計算されます。これは、キャプチャされたスタックから来ており、この関数は最も近い関数です。

+ +

Self Cost は、録音の選択された部分のサンプルの合計数に対するパーセンテージとしてセルフタイムから計算されます。

+ +

現在のバージョンのコールツリーでは、これらが最も重要な列です。Self Cost が比較的高い関数は、実行に時間がかかり、頻繁に呼び出されるため、最適化の候補となります。

+ +
+

The inverted call tree は、これらの Self Cost 値に集中する良い方法です。

+
+ +

このスクリーンショットは、私たちがすでに知っていると思われるものを示しています。バブルソートは非常に非効率的なアルゴリズムです。 バブルソートは選択ソートの約6倍、クイックソートの13倍です。

+ +

コールツリーを渡り歩く

+ +

各関数名の隣に、展開用の矢印があります。クリックすると、サンプルを取得した関数からルートに向けて、コールツリーを戻るパスを確認できます。例えば、bubbleSort() のエントリを展開します:

+ +

+ +

コールグラフは以下のとおりであるとわかります:

+ +
sortAll()
+
+    -> sort()
+
+        -> bubbleSort()
+ +

ここで sort() のコスト は 1.45% であり、これはリストの後方にある個別の sort() の値と同じであることに注意してください。これは、一部のサンプルが呼び出した関数内ではなく sort() 自身で取得されたことを表します。

+ +

トップレベルへ戻るパスが複数存在することがあります。swap() のエントリを展開してみましょう:

+ +

+ +

swap() 内で 253 個のサンプルを取得しました。しかし swap() は 2 つの異なるパスで到達しています。bubbleSort() と selectionSort() が使用しています。swap() の 253 サンプルのうち 252 個は bubbleSort() の枝で、また 1 個だけ selectionSort() の枝で取得したこともわかります。

+ +

これは、私たちが考えていた以上にバブルソートの効率が低いということです! 自身以外に 252 サンプル、または総コストのほぼ 10% を抱えています。

+ +

このような探求によりコールグラフ全体を、関連付けられたサンプル数とともに明らかにできます:

+ +
sortAll()                         //    8
+
+    -> sort()                     //   37
+
+        -> bubbleSort()           // 1345
+
+            -> swap()             //  252
+
+        -> selectionSort()        //  190
+
+            -> swap()             //    1
+
+        -> quickSort()            //  103
+
+            -> partition()        //   12
+ +

プラットフォームのデータ

+ +

Gecko、入力とイベントなどと記載された行がいくつかあるでしょう。これらは内部のブラウザ呼び出しを表します。

+ +

これらも役に立つ情報です。あなたのサイトがブラウザを懸命に働かせている場合、あなたのコードではサンプルが記録されないかもしれませんが、問題は残されています。

+ +

本記事の例では、679 個のサンプルが Gecko に割り当てられており、bubbleSort() に次いで 2 番目に大きいグループです。これを展開してみましょう:

+ +

+ +

これは 614 個のサンプル、または総コストの役 20% が sort() の呼び出しに由来することを表します。sort() のコードを見ると、プラットフォームのデータの高いコストの理由は console.log() を繰り返し呼び出しているためであることが明白でしょう:

+ +
function sort(unsorted) {
+  console.log(bubbleSort(unsorted));
+  console.log(selectionSort(unsorted));
+  console.log(quickSort(unsorted));
+}
+ +

より効率がよい実装方法を検討することは、間違いなく有益でしょう。

+ +

ここでわかることとして、アイドル時間は Gecko として分類されますので、プロファイル内で JavaScript を実行していない部分は Gecko のサンプルが増えます。これらはサイトのパフォーマンスとは関係がありません。

+ +
+

デフォルトで、コールツリーはプラットフォームのデータを個別の関数に分割しません。これは大量のノイズを加えてしまうことと、Firefox 自体に取り組んでいる人々以外には役立たないと思われるためです。これらの詳細を確認したい場合は、設定で "Gecko プラットフォームのデータを表示" にチェックを入れてください。

+
+ +

反転されたボトムアップコールツリーを使用する

+ +

反転されたコールツリーはすべてのスタックの順序を逆転させ、一番近い関数コールを一番上に置きます。直接的な結果は、これは関数の Self Time 情報に焦点を当てたビューであるということです。 これはコード内のホットスポットを見つけるのに非常に便利なビューです。

+ +

このビューを表示するには、[パフォーマンス]タブの右端にある歯車アイコンをクリックし、Invert Call Tree を選択します。

+ +

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 +--- +
{{ToolsSidebar}}
+ +

パフォーマンスシナリオとチュートリアルのデモページのリストです。

+ +

{{ ListSubpages ("/ja/docs/Tools/Performance/Examples", 5) }}

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 +--- +
{{ToolsSidebar}}
+ +

この記事では、2つのパフォーマンスガイドで使用する簡単なサンプルプログラムについて説明します。コールツリーのガイドとフレームチャートのガイドです。

+ +

このプログラムは、3つの異なるソートアルゴリズムのパフォーマンスを比較します。

+ + + +

これは以下の機能で構成されています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
sortAll()トップレベルの関数。 （200回）反復的に配列を生成し、sort()を呼び出します。
sort()bubbleSort()、selectionSort()、quickSort()を順に選択し、結果を記録します。
bubbleSort()バブルソートを実装し、ソートされた配列を返します。
selectionSort()選択ソートを実装し、ソートされた配列を返します。
quickSort()クイックソートを実装し、ソートされた配列を返します。
swap()bubbleSort()とselectionSort()のヘルパー関数。
partition()quickSort()のヘルパー関数。
+ +

コールグラフは次のようになります。

+ +
sortAll()                     // (generate random array, then call sort) x 200
+
+    -> sort()                 // sort with each algorithm, log the result
+
+        -> bubbleSort()
+
+            -> swap()
+
+        -> selectionSort()
+
+            -> swap()
+
+        -> quickSort()
+
+            -> partition()
+ +

プログラムのソートアルゴリズムの実装は、https://github.com/nzakas/computer-science-in-javascript/から取得され、MITライセンスで使用されます。

+ +

ここでサンプルプログラムを試してみて、ここでコードをクローンすることができます（gh-pagesブランチを確認してください）。 私たちが議論した特定のプロフィールをダウンロードすることもできます。あなたがフォローしたい場合は、パフォーマンスツールにインポートするだけです。 もちろん、独自のプロファイルを生成することもできますが、数字は少し異なります。

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 +--- +
{{ToolsSidebar}}
+

フレームチャートはパフォーマンスのプロファイリングを行っている間、ミリ秒ごとにコードの JavaScript スタックの状態を表示します。

+ +

これは記録中の任意の時点でどの関数を実際に実行しているか、またどれだけの期間実行したか、さらにどこから呼び出されたかを知る手段を提供します。

+
+ +

呼び出しツリーとフレームチャートはどちらもサイトの JavaScript を分析するために使用します。またどちらも、記録している間定期的に取得する JavaScript エンジンのスタックのサンプルをデータとして使用します。

+ +

しかし、呼び出しツリーは記録全体の合計に対してプログラムのどこでもっとも多くの時間がかかっているかを示すためにこれらのデータを編成するのに対して、フレームチャートは記録中のどこで特定の関数を実行していたかを示すためにこれらのデータを使用します。本質的には、記録中の任意の位置のコールスタックの状態を表示します。

+ +

こちらは、プロファイルの一部分のフレームチャートを示したスクリーンショットです:

+ +

+ +

始めに記録の概要ペインで、フレームチャートに表示したい記録の一部分を選択していることがわかるでしょう。フレームチャートは大量のデータを表示しており、見やすい結果を得るためには通常、ズームインが必要です。

+ +

フレームチャートビュー自体は、X 軸に沿って時間を表します。前出のスクリーンショットでは、1435ms から 1465ms の間を表示しています。Y 軸に沿ってその時点のコールスタックに存在する関数を、上にトップレベル、下に葉の関数の順に並べます。関数は区別しやすいように色分けします。

+ +

これは記録中の任意の時点でどの関数を実際に実行しているか、またどれだけの期間実行したか、さらにどこから呼び出されたかを知る手段を提供します。

+ +

ズームとパン

+ +

フレームチャートを効果的に使用するため、ナビゲーションできることが必要でしょう。フレームチャートのナビゲーションに使用できる主要な操作が 2 つあります:

+ + + + + + + + + + + + +
ズーム: プロファイル全体のうち、フレームチャートに表示する選択範囲を増減します。 +

1) フレームチャート上でマウスホイールを上下に回します。

+ +

2) フレームチャート上で、トラックパッドで 2 本の指を上下に動かします。

+
パン: プロファイル全体内で、選択範囲を左右に動かします。 +

1) 記録の概要ペインで、選択範囲をクリック・アンド・ドラッグします。

+ +

2) フレームチャートでクリック・アンド・ドラッグします。

+
+ +

{{EmbedYouTube("BzfkBRFucp8")}}

+ +

例

+ +

フレームチャートがプログラムの動作をどのように明らかにできるかを見るため、シンプルな例を見ていきましょう。呼び出しツリーのページとで使用したものと同じサンプルを使用します。これは、3 種類の異なるソートアルゴリズムを比較するものです。このプログラムの構造の概要は、別のページで説明しています。

+ +

ここでは、呼び出しツリーで使用したものと同じプロファイルのファイルを使用します。呼び出しツリーのページではプロファイル内のプログラム呼び出しグラフと、関連付けられたサンプル数を以下のように明らかにしました:

+ +
sortAll()                         //    8
+
+    -> sort()                     //   37
+
+        -> bubbleSort()           // 1345
+
+            -> swap()             //  252
+
+        -> selectionSort()        //  190
+
+            -> swap()             //    1
+
+        -> quickSort()            //  103
+
+            -> partition()        //   12
+ +

始めに、ぷろぐらむがアクティブであった部分の全体を選択します:

+ +

+ +

最上段の紫色の箇所は sortAll() の呼び出しであり、プログラムの始めから終りまで実行されています。その下にあるオリーブグリーン色は、sort() を呼び出しています。さらに下にあるくしの歯のようなものは、それぞれのソートアルゴリズムを実行する呼び出しです。

+ +

ズームしましょう:

+ +

+ +

この部分は約 140 ミリ秒間です。また、sort() が呼び出した関数をより詳しく示しています。sort() のコードは以下のようなものです:

+ +
function sort(unsorted) {
+  console.log(bubbleSort(unsorted));
+  console.log(selectionSort(unsorted));
+  console.log(quickSort(unsorted));
+}
+ +

"bubb..." と記載されたオリーブグリーン色のマーカーは、おそらく bubbleSort() です。緑色のマーカーは、おそらく別のソートアルゴリズムです。ひと目見ただけで、バブルソートのブロックが他のアルゴリズムより幅が広い (存続時間が長い) ことがわかります。

+ +

また、bubbleSort() から呼ばれている関数 (紫色) がいくつかあることもわかります。

+ +

もう一度ズームしましょう:

+ +

+ +

この部分は約 20 ミリ秒間です。bubbleSort() の下にある紫色のマーカーは、swap() の呼び出しであることがわかります。それらをすべて数えると 253 個あることが、呼び出しツリービューで示されています。ズームした範囲内ではすべて bubbleSort() の下にありますが、呼び出しツリービューによればプロファイル内で 1 個は selectionSort() の下にあります。

+ +

また、緑色のマーカーのうち 2 個は selectionSort() および quickSort() であることがわかる一方で、ソート関数の呼び出しの合間にプラットフォーム (Gecko) のコードを呼び出していることもわかります。これは、sort() 内で console.log() を呼び出していることに由来する可能性が高いと考えられます。

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 +--- +
{{ToolsSidebar}}
+

フレームレートは、Web サイトの応答性を測定したものです。低い、あるいは不安定なフレームレートによりサイトの応答性が低い、あるいはジャンキーな状態になり、ユーザエクスペリエンスを損ないます。

+ +

60fps のフレームレートがなめらかなパフォーマンスの目標値であり、あるイベントに対して必要なすべての更新に与えられた時間は 16.7 ミリ秒です。

+ +

パフォーマンスツールでフレームレートのグラフは、記録していた間のフレームレートを表示します。サイトのどこに問題があると思われるかを迅速に示して、より深く分析するために他のツールを使用できるようにします。

+
+ +

フレームレートと応答性

+ +

フレームレートは、ビデオデバイスが生成できる画像 (またはフレーム) のペースです。これは映画やゲームで特に知られていますが、現在は Web サイトや Web アプリのパフォーマンス測定として広く使用されます。

+ +

Web のパフォーマンスにおいて、フレームにはブラウザがスクリーンを更新および再描画するために必要な作業が含まれます。フレームレートは、アニメーションに対してもっとも明らかな効用があります。フレームレートが低すぎるとアニメーションがぎこちない動きになり、フレームレートが高ければスムーズになります。一方でユーザと対話することから、サイトの応答性の一般的な指標としてもフレームレートは有用です。

+ +

例えばページ上のある要素にマウスポインタを動かすと要素の外見を変える JavaScript が実行されてリフローや再描画が発生する場合、すべての作業をフレーム内で完了させることが必要です。ブラウザがフレームを処理するのにかかる時間が長すぎると、ブラウザが一時的に応答しなくなった (ジャンキー) ように見えるでしょう。

+ +

同様に、ページをスクロールすると多くの複雑なページ更新が発生して、許容できるフレームレートをブラウザが維持できない場合、スクロールが遅くなったりときどきフリーズするように見えたりするかもしれません。

+ +

一般的に高く安定したフレームレートにより、ユーザとサイトの対話はより快適かつ魅力的になるでしょう。

+ +
+

60fps のフレームレートがなめらかなパフォーマンスの目標値と考えられており、あるイベントに対して同時に必要なすべての更新に与えられた時間は 16.7 ミリ秒です。

+ +

しかし、安定性は特に重要です。60fps を実現できない場合は低いフレームレートを安定的に実現して、サイトのフリーズをもたらすフレームレートの急な落ち込みを避けるとよいでしょう。

+
+ +

フレームレートのグラフ

+ +

フレームレートのグラフは、パフォーマンスツールの記録の概要の部分にあります。これはブラウザがフレームの処理を終えたときのタイムスタンプを取得して、記録していた期間のフレームレートを追跡するために使用します。

+ +

X 軸はプロファイルを採取した期間の経過時間です。また最大フレームレート、平均フレームレート、最小フレームレートを注釈として表示します。

+ +

フレームレートのグラフを使用する

+ +

フレームレートのグラフの大きな価値は、Web コンソールと同様に、サイトのどこに問題があると思われるかを迅速に示して、より深く分析するために他のツールを使用できるようにすることです。例えば、以下にパフォーマンスツールのスクリーンショットを示します:

+ +

+ +

平均フレームレートはおおむね良好な値ですが、フレームレートが数十ミリ秒間落ち込むときが 3 か所あります。これはきっと、ページで実行しているアニメーションが目立ってぎこちない状況を引き起こすでしょう。

+ +

フレームレートのグラフは、上部にあるウォーターフォールの概要と直接的に関連性があります。フレームレートが落ち込んでいる始めの 2 か所は橙色のバーと関連性があり、これは JavaScript の実行に時間をかけていることを示します。

+ +

落ち込んでいる部分のひとつを選択すると、下部にあるメインのウォーターフォールビューをその部分だけに拡大表示して、問題を起こしている機能を知ることができます:

+ +

+ +

click イベントで実行される JavaScript 関数が、メインスレッドを 170 ミリ秒間ブロックしています。

+ +

どの関数でしょう? この時点のコールスタックを見るため、フレームチャートに切り替えてください:

+ +

+ +

問題を起こしている関数は doPointlessComputations() であり、"main.js" で定義されています。これを修正するには、関数を分割して部品を requestAnimationFrame で実行するか、関数全体を Worker で実行します。集約的な JavaScript の記事では、長く実行される同期式の JavaScript が引き起こす応答性の問題を解決するために、本記事のような手段をどのように利用できるかを説明します。

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 +--- +
{{ToolsSidebar}}

パフォーマンスツールを開く

+ +

パフォーマンスツールを開く方法は以下のとおりです:

+ + + +

プロファイルを記録する

+ +

記録ペインでストップウォッチのアイコンを押下すると、新しい記録を開始します。もう一度押下すると、記録を終了します:

+ +

+ +

console.profile() や console.profileEnd() を使用して、Web コンソールから記録を開始および終了することもできます。

+ +

プロファイルを保存する

+ +

記録ペインで "保存" と記載されたリンクをクリックすると、プロファイルを保存します:

+ +

+ +

プロファイルを読み込む

+ +

"インポート..." をクリックしてファイルを選択すると、プロファイルを読み込みます:

+ +

+ +

すべてのプロファイルを消去する

+ +

"消去" をクリックすると、すべての読み込み済みプロファイルを消去します。

+ +
+

これを行うと、すべての未保存プロファイルを失います。

+
+ +

+ +

ツールを選択する

+ +

ツールバーのボタンを使用してウォーターフォール、呼び出しツリー、フレームチャートを切り替えます:

+ +

+ +

表示するマーカーを設定する

+ +

ツールバーのボタンを使用して、ウォーターフォールでどのマーカーを表示するかを設定できます:

+ +

+ +

拡大

+ +

記録の概要で一部分を選択すると、その部分を拡大表示します:

+ +

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 +--- +
{{ToolsSidebar}}

パフォーマンスツールは、サイトの一般的な応答性、JavaScript やレイアウトのパフォーマンスを知ることができるツールです。パフォーマンスツールを使用してあなたのサイトで、ある期間の記録やプロファイルを作成できます。記録後は、プロファイル内でサイトをレンダリングするためにブラウザーが行ったことの概要や、プロファイル内のフレームレートを表示します。

+ +

プロファイルのさまざまな側面を詳しく調査するために、4 つのサブツールを使用できます:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

はじめに

+ +
+
+
+
UI ツアー
+
パフォーマンスツールについてひととおり理解するために、UI のクイックツアーを用意しました。
+
+
+ +
+
+
操作手順
+
基本操作: ツールを開く、記録を作成・保存・読み込み・設定する
+
+
+
+ +
+

パフォーマンスツールのコンポーネント

+ +
+
+
+
フレームレート
+
サイトの全体的な応答性を理解します。
+
呼び出しツリー
+
サイトの JavaScript のボトルネックを発見します。
+
メモリ割り当て
+
記録の中でコードが実施したメモリ割り当てを表示します。
+
+
+ +
+
+
タイムライン
+
サイトとの対話として、ブラウザーが実行した作業を理解します。
+
フレームチャート
+
記録全体で、どの JavaScript 関数をいつ実行したかを明らかにします。
+
+
+
+ +
+

シナリオ

+ +
+
+
+
CSS プロパティのアニメーション
+
ブラウザーがどのようにページを更新するか、およびさまざまな CSS プロパティのアニメーションがパフォーマンスにどのような影響を与えるかを、タイムラインを使用して理解します。
+
+
+ +
+
+
集約的な JavaScript
+
長時間実行される JavaScript によって引き起こされるパフォーマンスの問題、およびこのような状況で Worker がどのように役立つかを明らかにするために、フレームチャートとタイムラインを使用します。
+
+
+
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 +--- +
{{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/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 +--- +
{{ToolsSidebar}}
+

CSS プロパティのアニメーションにかかるパフォーマンスのコストは、プロパティにより異なります。また、高コストな CSS プロパティのアニメーションは、ブラウザがスムーズなフレームレートを確保しようと努力するために jank が発生する場合があります。

+ +

フレームレートやウォーターフォールは CSS アニメーションにおいてブラウザが何を行っているかを明らかにして、パフォーマンスの問題の診断を支援します。

+
+ +

CSS アニメーションでは複数のキーフレームを指定して、それぞれのキーフレームではアニメーションの特定の段階における要素の外見を定義するために CSS を使用します。ブラウザは、それぞれのキーフレームから次のキーフレームへ遷移することでアニメーションを作成します。

+ +

JavaScript を使用して要素のアニメーションを行うのに比べて、CSS アニメーションは簡単に作れます。またブラウザはいつフレームを描画するかをより制御でき、また必要に応じてフレームを破棄できますので、パフォーマンスが高くなります。

+ +

しかし CSS プロパティを変更するためのパフォーマンスコストは、プロパティにより異なります。高コストな CSS プロパティのアニメーションは、ブラウザがスムーズなフレームレートを確保しようと努力するために jank が発生する場合があります。

+ +

CSS レンダリングのウォーターフォール

+ +

CSS が変更されたときにブラウザがページを更新するためのプロセスは、以下のステップで構成されるウォーターフォールで説明できます:

+ +

+ +
    +
  1. スタイルを再計算: 要素の CSS プロパティが変更されるたびに、ブラウザは算出スタイルを再計算しなければなりません。
    2. +
  2. レイアウト: 続いて、要素の位置や形状を計算するために算出スタイルを使用します。この操作は "レイアウト" と名付けられていますが、"リフロー" とも呼ばれます。
    3. +
  3. 描画: そして、ブラウザはスクリーンに要素を再描画しなければなりません。最後のステップはこの流れで示していません。ページは複数のレイヤーに分割され、それぞれを独立して描画した後に、"コンポジション" と呼ばれるプロセスで合成されます。
    4. +
+ +

この流れが完了しなければスクリーンを更新できませんので、ひとつのフレーム内に一連の操作を収めなければなりません。毎秒 60 フレームが、アニメーションがスムーズに見えるレートとして広く受け入れられています。毎秒 60 フレームのレートのために、ブラウザが一連の操作を実行する時間として 16.7 ミリ秒が与えられます。

+ +

CSS プロパティのコスト

+ +

レンダリングのウォーターフォールにおいて、一部のプロパティは他のプロパティに比べて特にコストが高くなります:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティの種類コスト例
要素の形状や位置に影響を与えるプロパティ。これらはスタイルの再計算、レイアウト、再描画を発生させる。 +

left
+ max-width
+ border-width
+ margin-left
+ font-size

+
+

形状や位置への影響はないが、個別のレイヤーでは描画されないプロパティ。レイアウトは発生しない。

+ 		+

color

+
個別のレイヤーで描画されるプロパティは、再描画が発生しない。更新はコンポジションで制御される。 transform
+ opacity
+ +
+

CSS Triggers の Web サイトで、各 CSS プロパティでどれだけのウォーターフォールが発生するかをまとめています。WebKit 固有の情報ですが、ほとんどはすべての最新ブラウザで同じです。

+
+ +

例: margin と transform

+ +

本章では、ウォーターフォールが margin を使用したアニメーションと transform を使用したアニメーションの違いを、どのように明らかにできるかを示します。

+ +

このシナリオは、margin を使用したアニメーションは例外なく悪いアイデアであると納得させる意図はありません。サイトを描画するためにブラウザが何を行っているかをツールがどのようにして明らかにするか、およびパフォーマンスの問題の診断や解決のためにその情報をどのように適用できるかを示すものです。

+ +

自身でも試してみたい場合は、デモ Web サイトがこちらにあります。サンプルは以下のようなものです:

+ +

ここには 2 つのコントロールがあります。アニメーションを開始/停止するボタンと、margin のアニメーションまたは transform のアニメーションを選択するラジオボタンです。

+ +

ページ上には複数の要素を置いており、それらに linear-gradient の背景と box-shadow を追加しています。これは、双方のプロパティは描画のコストが比較的高いためです。

+ +

動画版のウォークスルーも用意しています:

+ +

{{EmbedYouTube("Tvu6_j8Qzfk")}}

+ +

margin を使用したアニメーション

+ +

"Use margin" を選択したままでアニメーションを開始して、パフォーマンスツールを開いて記録を始めましょう。記録時間は数秒だけでかまいません。

+ +

最初の記録を開きます。どのような結果になるかはマシンやシステム負荷に大きく依存しますが、おそらく以下のようになるでしょう:

+ +

+ +

ここでは 3 つの視点で示しています: (a) ウォーターフォールの概要、(b) フレームレート、(c) タイムラインの詳細 です。

+ +

ウォーターフォールの概要

+ +

+ +

これは、ウォーターフォールをコンパクトに表示したビューです。

+ +

緑色が圧倒的に多いことは、描画に多くの時間を費やしていることを示しています。

+ +

 

+ +

フレームレート

+ +

+ +

これは、フレームレートを表示します。ここでは平均フレームレートが 46.67fps であり、目標の 60fps をかなり下回っています。さらに悪いことにフレームレートが何度も 10 から 20 fps 台に低下しており、グラフがぎざぎざになっています。特にユーザとの対話が加わると、スムーズなアニメーションではなくなるでしょう。

+ +

ウォーターフォール

+ +

記録表示領域の残りの部分で、ウォーターフォールを表示します。ウォーターフォールをスクロールすると、以下のようなパターンが見られるでしょう:

+ +

+ +

これはレンダリングのウォーターフォールを表します。それぞれのアニメーションフレームで、すべての要素のスタイルを再計算してからレイアウト処理を 1 回実施して、再描画を行います。

+ +

ここでは、描画が特にパフォーマンスへ悪影響を与えていることがわかります。前出のスクリーンショットでは描画処理をハイライトしており、この処理は 13.11 ミリ秒かかっていることが右側のボックスでわかります。すべての処理に割り当てられた時間は 16.7 ミリ秒しかありませんので、高いフレームレートを維持できないのは驚くことではありません。

+ +

ここでインスペクタを使用して box-shadow を削除すると、描画時間にどのような影響があるかを実験できます。しかし次は、margin の代わりに transform を使用して高コストな描画を完全になくす方法を見ていきます。

+ +

transform を使用したアニメーション

+ +

Web ページのラジオボタンを "Use transform" に切り替えて、新たに記録してみましょう。すると、以下のようになるでしょう:

+ +

+ +

ウォーターフォールの概要

+ +

+ +

margin を使用した場合と比べて緑色がとても少なく、また桃色がとても多くなっています。桃色はレイアウトやスタイルの再計算でしょう。

+ +

フレームレート

+ +

+ +

margin を使用した場合と比べて、良好であるように見えます。平均値は 60fps に近く、また開始付近で 1 回落ち込んでいることを除けば高いフレームレートを維持しています。

+ +

ウォーターフォール

+ +

タイムラインビューで、フレームレートが向上した理由が示されています。margin を使用した場合と比べて、レイアウトや (この例ではさらに重要な) 描画に少しも時間を費やしていません:

+ +

+ +

この例では transform を使用することでサイトのパフォーマンスが著しく向上しており、またどのようにおよびなぜ向上したかを、パフォーマンスツールで示すことができました。

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 +--- +
{{ToolsSidebar}}
+ +

パフォーマンスシナリオ

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 +--- +
{{ToolsSidebar}}
+

デフォルトでブラウザはレイアウト、リフロー、ガベージコレクションだけでなく、ページ内のすべての JavaScript もひとつのスレッドで実行します。これは長い間実行する JavaScript がスレッドをブロックして、ページの不応答やユーザエクスペリエンスの悪化を招くおそれがあるということです。

+ +

フレームレートおよびウォーターフォールツールを使用して、いつ JavaScript がパフォーマンスの問題を起こしているかを知る、および特に注意が必要な関数を選び出すことができます。

+ +

本記事では長い間実行する JavaScript が応答性の問題を起こしているサンプルサイトを使用して、問題を修正するために 2 種類の方法を適用していきます。ひとつは長い間実行する JavaScript を複数の部品に分けて、それらのスケジューリングに requestAnimationFrame を使用する方法、もうひとつは web worker を使用して関数全体を別のスレッドに分ける方法です。

+
+ +

自身でも試してみたい場合は、デモ Web サイトがこちらにあります。

+ +

動画版のウォークスルーも用意しています:

+ +

{{EmbedYouTube("Pcc6jQX6JDI")}}

+ +

デモ Web サイトは以下のようなものです:

+ +

ここには 3 つのコントロールがあります:

+ + + +

ラジオボタンで "Use blocking call in main thread" を選択して、記録を始めましょう:

+ + + +

どのような結果になるかはマシンにより異なりますが、おそらく以下のようになるでしょう:

+ +

+ +

この画像の上半分はウォーターフォールの概要です。これはウォーターフォールをコンパクトに表示したビューであり、記録中にブラウザが行った処理は何かを示します。桃色はほとんどの場合 CSS の再計算、一部はリフローです。これは、プロファイルで終始実行している CSS アニメーションです。また連続したの橙色のブロックが 3 つありますが、これは JavaScript を実行していることを表します。それぞれ、ボタンを押したときです。

+ +

下半分はタイムラインの概要と時系列が合わせられており、フレームレートを示しています。記録中のほとんどはフレームレートが良好ですが、ボタンを押すたびに大きく落ち込んでいます。

+ +

それら 3 か所のうちひとつを選択して、メインのウォーターフォールビューで詳しく見ることができます:

+ +

+ +

ここではボタンを押したときに、ブラウザが JavaScript の関数をひとつまたは連続的に実行して、メインスレッドを 71.73 ミリ秒、言い換えるとフレーム 4 つ分の時間ブロックしています。

+ +

どの関数でしょう? フレームチャートビューに切り替えると、それがわかります:

+ +

+ +

これは、その時点で実行している JS のコールスタックを表示します。スタックの一番上は calculatePrimes() という関数であり、ファイル名や行番号がわかります。以下に掲載したコードで、直近の呼び出し元を見てみましょう:

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

ここではかなり大きな数に対して、(とても非効率な) 素数の判定を 50 回行っています。

+ +

requestAnimationFrame を使用する

+ +

この問題を解決するための最初の試みとして、関数をいくつかの自己充足した小さな関数に分割して、requestAnimationFrame() を使用してそれらをスケジューリングします。

+ +

requestAnimationFrame() は与えられた関数を、各フレームで再描画を行う直前に実行するようブラウザに指示します。それぞれの関数が適度に小さければ、ブラウザは実行時間を、フレーム間に与えられた時間内に収めることができるでしょう。

+ +

calculatePrimes() の分割はとてもシンプルです。別の関数で、それぞれの値が素数であるかの計算を行います:

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

こちらのバージョンを試してみましょう。"Use requestAnimationFrame" と記載されたラジオボタンを選択して、新たにプロファイルを記録します。すると、記録は以下のようになるでしょう:

+ +

+ +

これはまさに、私たちが期待していたものです。一続きの橙色のブロックに代わり、ボタンを押すたびにとても短い橙色のブロックがたくさん並んでいます。橙色のブロックは 1 個ずつのフレームに分かれて現れており、またそれぞれのブロックが、requestAnimationFrame() から呼び出された関数 1 個を表しています。なお、このプロファイルではボタンを 2 回しか押していないことに注意してください。

+ +

関数の呼び出しは CSS アニメーションに由来する桃色のブロックの間に挟み込まれており、またそれぞれの関数は、全体のフレームレートを落とすことなく処理できるほど十分に小さくなっています。

+ +

ここでは requestAnimationFrame が応答性の問題の解決策として機能しましたが、潜在的な問題点が 2 つあります:

+ + + +

Web Worker を使用する

+ +

ここでは、Web Worker を使用して問題を解決します。Web Worker を使用すると、別のスレッドで JavaScript を実行できます。メインスレッドと Worker スレッドは互いに直接呼び出すことはできませんが、非同期メッセージ API を使用して通信できます。

+ +

メインスレッドのコードは以下のようになります:

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

元のコードと比べたときの主な違いは、以下のものが必要であることです:

+ + + +

また、新たに "calculate.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;
+}
+ +

Worker では処理の開始を指示するメッセージをリッスンする、および処理が完了したときに "done" メッセージを送ることが必要です。実際に計算を行っている部分のコードは、最初のバージョンのコードと完全に同じです。

+ +

このバージョンはどのように実行されるのでしょう? ラジオボタンを "Use a worker" に切り替えて、新たにプロファイルを記録してください。結果は以下のようになるでしょう:

+ +

+ +

このプロファイルでは、ボタンを 3 回押しています。ウォーターフォールの概要で元のバージョンと比べると、ボタンを押したときにはとても短い橙色のマーカーが 2 個あることがわかります:

+ + + +

これら 2 つの関数の間で Worker は素数の判定を行っていますが、メインスレッドの応答性には少しも影響を与えていないように見受けられます。これはあり得ないと思うかもしれませんが、Worker は別のスレッドで実行しますのでマルチコアプロセッサの利点を享受できます。これはシングルスレッドの Web サイトでは得られません。

+ +

Web Worker の主な制限は、Worker で実行するコードでは DOM API を使用できないことです。

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 +--- +
{{ToolsSidebar}}

パフォーマンスツールの UI は、大きく 4 つに分けられます:

+ +

+ + + +

ツールバー

+ +

ツールバーには、以下のボタンがあります:

+ + + +

+ +

記録ペイン

+ +

記録ペインでは、現在のセッションで取得した記録やインポートした記録を含む、読み込み済みの全記録を一覧表示します。

+ +

+ +

いつでも記録を選択すると、その記録の情報を他のペインに表示します。記録ペインで別の項目をクリックすると、その記録を選択できます。"保存" をクリックすると、記録を JSON ファイルとして保存できます。

+ +

記録の概要

+ +

ここでは、X 軸を時間として記録全体の概要を表示します。

+ +

+ +

ここにはタイムラインの概要とフレームレートのグラフという、2 つの要素があります。

+ +

タイムラインの概要

+ +

ここでは、タイムラインをコンパクトに表示したビューを提供します:

+ +

+ +

記録した処理は、タイムラインビューと同じ方式で色分けされます。

+ +

フレームレートのグラフ

+ +

フレームレートは、記録している間のブラウザの応答性を概観します:

+ +

+ +

フレームレートの個別記事をご覧ください。

+ +

イベントを関連づける

+ +

複数の要素が同期しているため、ある要素のイベントと別の要素のイベントに関連性を見いだせる場合があります。

+ +

例えば以下のスクリーンショットでは、長時間の描画操作 (タイムラインの概要では緑色のバーで表示) とフレームレートの落ち込みに関連性があります:

+ +

+ +

拡大

+ +

記録を詳しく調査するため、概要ビューで記録の一部分を選択できます。一部分を選択すると、その部分だけを含むようにメインビューを更新します。以下のスクリーンショットではフレームレートが落ち込んだ部分を選択して、長時間の描画操作を詳しく見ています:

+ +

+ +

詳細ペイン

+ +

詳細ペインでは、選択したツールの情報を表示します。ツールを切り替えるには、ツールバーのボタンを使用してください。

+ +

タイムライン

+ +

タイムラインでは、記録中にブラウザが実行した操作 (JavaScript を実行、CSS を更新、ページのレイアウトを更新、再描画を実行など) を表示します。X 軸は時間を表し、記録した操作を滝のように、またブラウザが実行した操作の連続性を反映するように配置します。

+ +

+ +

タイムラインについて詳しくは、タイムラインのページをご覧ください。

+ +

呼び出しツリー

+ +

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

+ +


+ 呼び出しツリーについて詳しくは、コールツリーのページをご覧ください。

+ +

フレームチャート

+ +

呼び出しツリーが記録中にサイトのどの関数で、もっとも多くの実行時間がかかったかを示すものであるなら、フレームチャートは実行中のある時点のコールスタックを示すものです:

+ +

+ +

フレームチャートについて詳しくは、フレームチャートのページをご覧ください。

+ +

メモリ割り当て

+ +
+

メモリ割り当てビューは、Firefox 46 の新機能です。

+
+ +

メモリ割り当てビューは呼び出しツリービューと似ていますが、こちらはメモリ割り当てに特化したビューです。プロファイルの中でページ内のどの関数がもっとも多くのメモリ割り当てを行ったかを表示します。

+ +

+ +

メモリ割り当てビューは、プロファイルを記録する前にパフォーマンスツールの設定で "メモリ割り当てを記録" にチェックを入れた場合に限り表示します:

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

メモリ割り当てビューについて詳しくは、メモリ割り当てビューのページをご覧ください。

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 +--- +
{{ToolsSidebar}}
+

タイムラインは、サイトやアプリの実行でブラウザが行ったさまざまなことについて知見を得るものです。これは、サイトを実行するときにブラウザが行ったことはさまざまな種類 (JavaScript を実行、レイアウトを更新など) に分類でき、またある時点でブラウザはそれらのいずれかを行っているという考え方に基づいています。

+ +

よって、例えばフレームレートが落ち込むなどパフォーマンスの問題の兆候があるときはタイムラインを開いて、記録中のある時点でブラウザが何を行っていたかを知ることができます。

+
+ +

+ +

X 軸に沿って時間を表します。記録した操作はマーカーと呼び、ブラウザが実行した操作の連続性を反映する滝のような配置で、水平方向のバーとして表示します。

+ +

マーカーを選択すると、詳細情報を右側のサイドバーで表示します。そこではマーカーの長さや、マーカーの種類に特有の詳細情報を表示します。

+ +

マーカー

+ +

操作を示すマーカーは、色分けおよび名前付けされています。以下の操作を記録します:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称および説明色詳細情報
+

DOM イベント

+ +

DOM イベントへの応答として実行する JavaScript コード。

+ 		+
+
イベント種別
+
例えば "click" や "message" など。
+
+ +
+
フェーズ
+
例えば "ターゲット" や "キャプチャ" など。
+
+
+

ページ内で実行される JavaScript 関数は、関数が呼び出された理由に応じて名前付けします:

+ +

Script Tag
+ setInterval
+ setTimeout
+ requestAnimationFrame
+ Promise Callback
+ Promise Init
+ Worker
+ JavaScript URI
+ Event Handler

+ 		+
+
スタック
+
関数につながるコールスタック。
+
+
+

HTML パース

+ +

ページの HTML をパースするために費やした時間。

+ 		+
+
スタック
+
関数につながるコールスタック。
+
+
+

XML パース

+ +

ページの XML をパースするために費やした時間。

+ 		+
+
スタック
+
関数につながるコールスタック。
+
+
+

CSS 再計算

+ +

ページの要素に適用する算出スタイルを算出する。

+ 		+
+
CSS 再計算のヒント
+
どのようなスタイル再適用が必要かを示す文字列。以下のいずれかを手がかりとして提示します:
+ Self
+ Subtree
+ LaterSiblings
+ CSSTransitions
+ CSSAnimations
+ SVGAttrAnimations
+ StyleAttribute
+ StyleAttribute_Animations
+ Force
+ ForceDescendants
+
+
+

レイアウト

+ +

ページの要素の位置やサイズを計算する。この操作は、"リフロー" と呼ばれることがあります。

+ 		 
+

描画

+ +

スクリーンにピクセルを描画する。

+ 		 
+

ガベージコレクション

+ +

ガベージコレクションイベント。ノンインクリメンタル GC イベントには "(非インクリメンタル)" を付加する。

+ 		+
+
発生源
+
GC を実行した理由を示す文字列。
+
非インクリメンタル GC の発生源
+
GC がインクリメンタルではない場合に、ノンインクリメンタル GC を実行した理由を示す文字列を表示。
+
+ +
+

Firefox 46 の新機能: GC イベントがメモリ割り当ての圧力によって発生した場合は、"Show Allocation Triggers" というリンクを表示します。このリンクをクリックすると、GC イベントの原因になったメモリ割り当てのプロファイルを表示します。

+ +

詳しくはメモリ割り当てとガベージコレクションをご覧ください。

+
+
+

サイクルコレクション

+ +

C++ の参照カウントを持つデータ構造を回収します。

+ +

ガベージコレクションに似ていますが、こちらは C++ のオブジェクト向けです。Kyle Huey のサイクルコレクションに関するブログ記事をご覧ください。

+ 		+
+
種別
+
常に "Collect" になります。
+
+
+

CC グラフ削減

+ +

サイクルコレクションの準備や事前の最適化です。

+ 		+
+
種別
+
常に "ForgetSkippable" になります。
+
+
+

コンソール

+ +

console.time() および console.timeEnd() を呼び出した間の時間に合致する。

+ 		+
+
タイマー名
+
console に渡した引数。
+
スタック開始
+
関数につながるコールスタック console.time()。
+
スタック終了
+
(Firefox 41 の新機能) console.timeEnd() 時点のコールスタック。Promise 由来のコールバック内にある場合は、"Async stack" とも表示します。
+
+
+

タイムスタンプ

+ +

console.timeStamp() を 1 回呼び出す。

+ 		+
+
Label
+
timeStamp() に渡した引数。
+
+
+

DOMContentLoaded

+ +

ドキュメントの DOMContentLoaded イベント。

+ 		 
+

Load

+ +

ドキュメントの load イベント。

+ 		 
+

メインスレッドの Worker イベント

+ +

メインスレッドが Worker にメッセージを送信したとき、または Worker からメッセージを受け取ったときに表示します。

+ 		+

以下のいずれか:

+ +
+
メインスレッドでデータをシリアライズ
+
メインスレッドは、Worker に送信するメッセージをシリアライズします。
+
メインスレッドでデータをデシリアライズ
+
メインスレッドは、Worker から受け取ったメッセージをデシリアライズします。
+
+
+

Worker スレッドの Worker イベント

+ +

Worker がメインスレッドからメッセージを受け取ったとき、またはメインスレッドにメッセージを送信したときに表示します。

+ 		+

以下のいずれか:

+ +
+
Worker でデータをシリアライズ
+
Worker は、メインスレッドに送信するメッセージをシリアライズします。
+
Worker でデータをデシリアライズ
+
Worker は、メインスレッドから受け取ったメッセージをデシリアライズします。
+
+
+ +

マーカーとその色はタイムラインツールとタイムラインの概要で同じであり、双方を関連づけることが容易になります。

+ +

マーカーのフィルタリング

+ +

ツールバーのボタンを使用して、表示するマーカーを制御できます:

+ +

+ +

タイムラインのパターン

+ +

タイムラインがどう見えるかは、サイトで行っていることの種類に強く依存します。JavaScript を多く使用するサイトでは橙色が多く表示され、視覚的に動的なサイトでは紫色や緑色が多くなるでしょう。それでもパフォーマンスの問題がある可能性を警告する、一般的なパターンがあります。

+ +

タイムラインの描画

+ +

タイムラインビューでよく見るパターンは、以下のようなものです:

+ +

+ +

これは、ブラウザがイベントへの応答としてページの更新を行うときの基本的なアルゴリズムを視覚しています:

+ +
    +
  1. JavaScript 関数呼び出し: DOM イベントなどのイベントが、ページ内の JavaScript を実行します。JavaScript は、ページの DOM や CSSOM を変更します。
    2. +
  2. スタイルを再計算: ページの要素の算出スタイルが変化したとブラウザが判断した場合は、それらを再計算しなければなりません。
    3. +
  3. レイアウト: 続いて、要素の位置や形状を計算するために算出スタイルを使用します。この操作は "レイアウト" と名付けられていますが、"リフロー" とも呼ばれます。
    4. +
  4. 描画: そして、ブラウザはスクリーンに要素を再描画しなければなりません。最後のステップはこの流れで示していません。ページは複数のレイヤーに分割され、それぞれを独立して描画した後に、"コンポジション" と呼ばれるプロセスで合成されます。
    5. +
+ +

この流れが完了しなければスクリーンを更新できませんので、ひとつのフレーム内に一連の操作を収めなければなりません。毎秒 60 フレームが、アニメーションがスムーズに見えるレートとして広く受け入れられています。毎秒 60 フレームのレートのために、ブラウザが一連の操作を実行する時間として 16.7 ミリ秒が与えられます。

+ +

応答性のために重要なこととして、ブラウザは必ずしもすべてのステップを通らなければならないわけではありません:

+ + + +

CSS プロパティのアニメーションの記事では、さまざまな CSS プロパティのアニメーションによるパフォーマンスの違いを示すとともに、タイムラインがそれらをどのように知らせるかを説明します。

+ +

妨害する JavaScript

+ +

デフォルトで JavaScript を実行するスレッドは、ブラウザがレイアウトの更新、再描画、DOM イベントなどに使用するスレッドと同じです。これは、長い間実行する JavaScript 関数が不応答性 (jank) を引き起こす可能性があるということです。アニメーションがぎこちない、あるいはサイトがフリーズするでしょう。

+ +

フレームレートツールとタイムラインを組み合わせると、長い間実行する JavaScript が応答性の問題を引き起こしていることが簡単にわかります。以下のスクリーンショットでは、フレームレートの落ち込みを引き起こしている JS 関数を拡大表示しています:

+ +

+ +

集約的な JavaScript の記事では、長大な JavaScript 関数によって引き起こされる応答性の問題をタイムラインがどのように目立たせるか、またメインスレッドの応答性を維持するために非同期メソッドをどのように使用できるかを説明します。

+ +

高コストな描画

+ +

box-shadow など負担が大きい描画効果があり、特に毎フレーム計算が必要なトランジションに適用した場合に顕著です。特に、グラフィックを集中的に扱う操作でフレームレートの落ち込みがみられる場合は、タイムラインで緑色のマーカーがないか確認してください。

+ +

ガベージコレクション

+ +

タイムラインで赤色のマーカーはガベージコレクション (GC) のイベントを表しており、このとき SpiderMonkey (Firefox の JavaScript エンジン) は到達不能なメモリを探すためにヒープを確認して、そのようなメモリを解放します。GC を実行している間は JavaScript エンジンを一時停止しなければならないので、プログラムが休止して完全に応答しない状態になるため、GC はパフォーマンスと関係性があります。

+ +

一時停止する時間を短縮するため、SpiderMonkey はインクリメンタル GC を実装しています。これはガベージコレクションを少しずつ実行でき、合間にプログラムを実行することが可能になります。それでも時にはノンインクリメンタルガベージコレクションが必要であり、この場合プログラムは完了するまで待たなければなりません。

+ + + +

GC イベント、特にノンインクリメンタル GC イベントを避けようとして、特定の JavaScript エンジンの実装に最適化しようとすることは賢くありません。SpiderMonkey は GC がいつ必要か、および特にノンインクリメンタル GC がいつ必要かを検出するために、複雑に組み合わせた発見方法を使用しています。ただし、一般に以下のことが言えます:

+ + + +

タイムラインで GC マーカーを記録するときは、以下の情報を示します:

+ + + +

console API でマーカーを追加する

+ +

console API を呼び出すことで直接制御できるマーカーが 2 つあります。"コンソール" と "Timestamp" です。

+ +

コンソールマーカー

+ +

これは、記録内の特定のセクションにマークをつけるものです。

+ +

コンソールマーカーを作成するにはセクションの始めで console.time() を、セクションの終わりで console.timeEnd() を呼び出します。これらの関数は、セクションの名前として使用される引数を取ります。

+ +

例えば、以下のようなコードで考えてみましょう:

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

タイムラインの出力は、以下のようになります:

+ +

+ +

マーカーは console.time() に渡した引数で名付けられており、マーカーを選択すると右側のサイドバーでプログラムスタックを確認できます。

+ +

Async stack

+ +

Firefox 41 の新機能

+ +

Firefox 41 より、右側のサイドバーに終了時点、すなわち console.timeEnd() を呼び出した時点のスタックも表示します。console.timeEnd() が Promise の成功によって呼び出された場合は、"(非同期: Promise)" と表示します。これは "async stack" を表すものであり、その時点のコールスタックで promise が生成されています。

+ +

例えば、以下のコードで考えてみましょう:

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

タイムラインでは time() と timeEnd() の間をマーカーで表示します。このマーカーを選択すると、サイドバーに async stack が表示されるでしょう:

+ +

+ +

Timestamp マーカー

+ +

タイムスタンプで、記録中にその場でマークすることができます。

+ +

タイムスタンプマーカーを作成するには、console.timeStamp() を呼び出します。タイムスタンプのラベルを引数として渡すことができます。

+ +

例えば前出のコードで繰り返し 10 回ごとにタイムスタンプを生成して、繰り返し回数を名前として付加します:

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

タイムラインは以下のようになります:

+ +

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 +--- +
{{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 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 +--- +
{{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/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 +--- +
{{ToolsSidebar}}

デスクトップ環境で実行している Google Chrome に Firefox 開発ツールを接続する方法を説明します。

+ +
+

本機能のサポート状況は、Firefox のデバッグプロトコルと Chrome のデバッグプロトコルの橋渡しを行う Valence アドオンに依存します。Valence のサポート状況は、まだ初期段階です。

+
+ +

本ガイドは 2 つのパートに分けています: パート 1 "事前準備" では 1 回だけ必要な作業を、パート 2 "接続" ではデバイスへ接続するたびに必要な作業を扱います。

+ +

事前準備

+ +

以下のものが必要です:

+ + + +

接続

+ +

{{EmbedYouTube("g5p9__OiaMY")}}

+ +

Chrome を実行する

+ +

デスクトップ版 を以下の特別なフラグ付きで起動して、リモートデバッグを有効にします。重要なフラグは --remote-debugging-port=9222 です。これらのフラグ付きで Chrome プロセスを実行する方法のガイドをご覧ください。

+ +

他にもいくつか便利かもしれないフラグがあります。--no-first-run、--no-default-browser-check、--user-data-dir 付きで実行すれば、他の Chrome プロファイルと同時に実行できます。

+ +

例えば OS X では以下のコマンドを実行すると、他のインスタンスとは分離されたかたちで、デバッグ可能な Chrome を起動できます:

+ +
/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')
+ +

WebIDE を使用して接続する

+ +

Firefox で WebIDEを開きます。WebIDE で "ランタイムを選択" をクリックして、ドロップダウンメニューから "Chrome Desktop" を選択してください。

+ +

そして、WebIDE で "アプリを開く" をクリックしてください。ここに、デバイスで開いているすべてのタブを表示します。タブ名をクリックすると、そのタブに開発ツールを接続します。ほとんどの Firefox 開発ツールを使用できます。ただし、以下のツールは未サポートです:

+ + 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 +--- +
{{ToolsSidebar}}

このガイドでは、同じマシン上の別のインスタンスとして実行しているデスクトップ版 Firefox に、Firefox 開発ツールを接続する方法を説明します。ここでは、デバッグされる Firefox のインスタンスをデバッグ先、デバッグを行う Firefox のインスタンスをデバッグ元と呼びます。

+ +

リモートデバッグを有効化する

+ +

始めにデバッグ元とデバッグ先の 開発ツールのオプション で、"ブラウザーとアドオンのデバッガーを有効" および "リモートデバッガーを有効" を有効にしなければなりません。

+ +

この作業は 1 回だけ必要です。設定値は再起動後も維持されます。

+ +

デバッガーサーバを開始する

+ +

次に、デバッグ先でデバッガーサーバーを開始します。

+ +

Firefox 37 より前のバージョン

+ +

Firefox 37 より前のバージョンでは、開発ツールバー を開いて以下のコマンドを実行します:

+ +
listen 6000
+ +

このコマンドは、ポート 6000 番でデバッガークライアントの接続を待ち受けするよう、デバッグ先に指示します。6000 番以外も使用できます。

+ +

デバッグ先を再起動した場合は、再度コマンドを実行しなければなりません。

+ +

Firefox 37 以降のバージョン

+ +

Firefox 37 以降でも前出の方法を使用できますが、もうひとつ方法があります。--start-debugger-server オプションを渡して、コマンドラインからデバッグ先を起動します:

+ +
/path/to/firefox --start-debugger-server
+ +

引数を渡さない場合、--start-debugger-server はデバッガーサーバーをポート 6000 番で待ち受けさせます。別のポートを使用する場合は、希望するポート番号を渡します:

+ +
/path/to/firefox --start-debugger-server 1234
+ +

注記: Windows では、start-debugger-server をハイフン 1 個で呼び出します:

+ +
firefox.exe -start-debugger-server 1234
+ +
+

注記: デフォルトではセキュリティ上の理由で、devtools.debugger.force-local を設定しています。外部のマシンから Firefox インスタンスのデバッグを行いたい場合はこの設定を変更してもかまいませんが、信頼済みのネットワークまたはどのマシンがアクセスできるかを厳しく制御するファイアウォール規則が設定された環境でのみ行ってください。

+
+ +

接続

+ +

接続方法は 2 種類あります。接続画面を使用する方法と、WebIDE を使用する方法です。

+ +

接続画面

+ +

デバッグ元のツール/ウェブ開発メニュー配下に、[接続...] という項目があります。この項目をクリックすると、以下のようなページが開きます:

+ +

+ +

デバッグ先に待ち受けさせているポート番号を入力して、"接続" をクリックします。すると、デバッグ先で接続確認を求めるダイアログが表示されるでしょう:

+ +

"OK" をクリックしてデバッグ元に戻ると、以下のようなページが表示されます:

+ +

+ + + +

WebIDE

+ +

デバッグ元で WebIDE を開くと、"ランタイムを選択" の中に "リモートランタイム" があります:

+ +

リモートランタイムを選択すると、ホスト名とポート番号を求められます。"localhost:6000"、またはデバッグ先で別のポート番号で待ち受けさせている場合はポート番号を指定します。

+ +

すると、警告ダイアログを表示します:

+ +

OK をクリックします。WebIDE が、メインプロセスに開発ツールを接続します。content タブに接続したい場合は、左側のメニューを開いてデバッグを行いたいタブを選択してください。

+ +

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 +--- +
{{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/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 +--- +
{{ToolsSidebar}}

このガイドでは、Android 版 Firefox で実行しているコードを USB 経由で調査あるいはデバッグするために、リモートデバッグを使用する方法を説明します。

+ +
+

最近、Android 版 Firefox に開発ツールを接続する方法を大幅にシンプル化しました。デスクトップ版 の Firefox 36 以降および Android 版の Firefox 35 以降を使用している場合は、本記事の代わりに新しい方法をご確認ください。

+
+ +

+ +

本ガイドは 2 つのパートに分けています: パート 1 "事前準備" では 1 回だけ行う必要がある作業を、パート 2 "接続" ではデバイスへ接続するたびに行う必要がある作業を扱います。

+ +

事前準備

+ +

まず、以下のものが必要です:

+ + + +

ADB のセットアップ

+ +

次に adb コマンドラインツールを使用して、デスクトップと Android デバイスが相互に対話できるようにしなければなりません。

+ +

Android デバイスで行う作業

+ + + +

デスクトップで行う作業

+ + + +

動作確認を行うには、デスクトップでコマンドシェルを開いて以下のコマンドを入力してください:

+ +
adb devices
+ +

以下のように出力するでしょう:

+ +
List of devices attached
+51800F220F01564 device
+
+ +

(長い 16 進文字列は異なります。)

+ +

これで adb があなたのデバイスを発見できており、また ADB の設定が成功しました。

+ +

リモートデバッグの有効化

+ +

次に、Android デバイスとデスクトップの双方でリモートデバッグを有効にしなければなりません。

+ +

Android 版 24 以前

+ +

デバイスでリモートデバッグを有効にするには、設定項目 devtools.debugger.remote-enabled を true にしなければなりません。

+ +

Android 版 Firefox で about:config を開いて、検索ボックスに "devtools" と入力して検索キーを押下してください。すると、開発ツール関連の全設定が表示されます。設定 devtools.debugger.remote-enabled を探して、"切り替え" を押下してください。

+ +

+ +

Android 版 Firefox 25 以降

+ +

Android 版 Firefox 25 以降では、リモートデバッグを有効化するメニュー項目があります。メニューを開き "設定" を選択して、"デベロッパーツール" (一部の Android デバイスでは、"設定" を表示するために "More" を選択しなければならないでしょう) を選択してください。"リモートデバッグ" チェックボックスにチェックを入れてください:

+ +

+ +

ブラウザが、ポートフォワーディングの設定を忘れないようにという通知を表示します。これは後で行います。

+ +

デスクトップで行う作業

+ +

デスクトップでは、ツールボックスの設定でリモートデバッグを有効化します。ツールボックスを開いて、ツールバー内の "オプション" ボタンをクリックします。そして設定タブで "リモートデバッガを有効" にチェックを入れてください:

+ +

+ +
バージョン 27 より前の Firefox を使用している場合は、設定を反映するためにブラウザの再起動が必要です。
+ +

Web 開発メニュー配下に、新たな項目 "接続..." が現れます:

+ +

+ +

接続

+ +

以上で、デバイスにリモートデバッグツールを接続できます。始めに、デバイスとデスクトップを接続していない場合は、デバイスとデスクトップを USB ケーブルで接続してください。

+ +

デスクトップで行う作業

+ +

Android 版 Firefox 35 以降では、コマンドプロンプトを開いて以下のように入力します:

+ +
adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
+ +

リリース版以外のチャンネルの Android 版 Firefox を使用する場合は、org.mozilla.firefox の部分を以下のように変更してください:

+ + + +

Android 版 Firefox 34 以前では以下のように入力します:

+ +
adb forward tcp:6000 tcp:6000
+ +

(Android デバイスが使用するデバッグ用ポートの値を変更した場合は、このコマンドも適宜変更しなければなりません。)

+ +

Firefox OS では以下のコマンドを入力します:

+ +
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+ +

デスクトップとデバイスを USB ケーブルで物理的に接続するたびに、このコマンドを実行しなければなりません。

+ +

そして Firefox で Web 開発メニューを開いて、"接続..." を選択してください。以下のようなページが表示されるでしょう:

+ +

ポート番号を変更した場合を除き、6000 を選択して "接続" ボタンを押下してください。

+ +

Android デバイスで行う作業

+ +

続いて、Android デバイスで接続の確認を問い合わせるダイアログが表示されます:

+ +

"OK" を押下してください。デスクトップ側は、このダイアログを許可するまで数秒待ちます: タイムアウトしたときは、デスクトップ側のダイアログで再度 "接続" を押下してください。

+ +

デスクトップで行う作業

+ +

続いて、デスクトップ側で以下のようなダイアログが表示が表示されます:

+ +

これは、ブラウザタブで実行している Web コンテンツのデバッグを行いたいか、あるいはブラウザコード自体のデバッグを行うかを問い合わせるものです。

+ + + +

mozilla.org の Web サイトに接続してみましょう。ツールボックスが独自のウィンドウで開いて、mozilla.org を開いている Android 版 Firefox のタブに接続します:

+ +

+ +

ツールボックスやツールボックス内のツールは、ローカルのコンテンツに接続した場合と同様に動作します。

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 +--- +
{{ToolsSidebar}}
+ +

デスクトップ版の Firefox の開発ツール を使用すると、別のブラウザーやランタイムで実行しているウェブサイトやウェブアプリをデバッグできます。別のブラウザーとはツールと同じ端末上のものであったり、 USB で接続した電話機など別の端末上のものを使用したりすることができます。

+ +

開発ツールの詳細な接続手順は、ランタイムにより異なります。

+ +

開発ツールと接続できるのは、デスクトップ版 Firefox、Android 版 Firefox、Thunderbird などの Gecko ベースのランタイムです。

+ + 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 +--- +
{{ToolsSidebar}}

このガイドでは、Thunderbird で実行しているコードの調査やデバッグを リモートデバッグ する方法を説明します。

+ +

Firefox のリモート接続機能を使用して、さまざまな開発ツールが Thunderbird をサポートします。現在サポートしているツールセットはウェブコンソール、インスペクター、デバッガー、スタイルエディター、プロファイラー、ネットワークモニターです。他のツールは、将来利用可能になる予定です。

+ +

Thunderbird の設定

+ +

Thunderbird では、デバッガーサーバーを有効にすることが必要です。メニューバーの [ツール] メニュー (alt + ツール) で [リモートデバッグを許可] を選択してください。デフォルトでは、デバッガーサーバーがポート 6000 番を使用して開始します。複数のプロファイルをデバッグするなど、デバッガーサーバーのポート番号を変更したい場合は、高度な設定のエディターを開いて設定項目 devtools.debugger.remote-port を変更してください。

+ +

Firefox の設定

+ +

Firefox はクライアントとして動作して、Thunderbird 用の開発ツールを操作するユーザーインターフェイスを提供します。Firefox と Thunderbird のメジャーバージョン番号を合わせるともっともよいのですが、異なるバージョンでも動作する場合があります。

+ +

Firefox の設定として、ツールボックスのオプションでリモートデバッグを有効にします。ツールボックスを開いて、ツールバー 内の "オプション" ボタンをクリックします。そして 設定 タブで "リモートデバッガーを有効" にチェックを入れてください:

+ +

+ +

以上で、Firefox のツールメニューから接続ページを開くことができます:

+ +

+ +

ブラウザーで接続ページが開きます。必要に応じてこのページをブックマークツールバーに追加できます。リモートポート番号を変更していなければ、フィールドにはすでに適切な値が入っています。接続ボタンをクリックすると、開発ツールのリモート接続を開始します。

+ +

+ +

接続すると、リモートのタブやプロセスの一覧が提示されます。Thunderbird と Firefox ではタブの概念が異なっており、リモートのタブの一覧に Thunderbird のすべての xul:browser 要素を表示します。これはコンテンツタブまたはメッセージリーダーになります。ほとんどの場合、Thunderbird 自体のコードをデバッグするために "メインプロセス" を選択するでしょう。開発ツールのセットを含む新しいウィンドウが開いて、Thunderbird のインスタンスに対して使用できます。

+ +

+ +

開発ツールを使用する

+ +

ツールの使用方法は、ほぼ一目瞭然でしょう。なんらかのツールで問題が発生した場合は、開発ツールのドキュメント をご覧ください。リモート接続を使用するため、若干の差異が発生する可能性があります。一部のツールは使用できず、またローカルと同等のパフォーマンスを実現できない可能性もあります。例えばリモートデバッガーツールを使用すると、内部のネットワーク接続を使用してファイルを転送しなければならないため、かなり時間がかかります。

+ +

トラブルシューティング

+ +

エラーが発生した場合は、まずはバージョン番号が一致しているかを確認してください。Thunderbird 24 を使用している場合は、Firefox もバージョン 24 を使用して接続してください。次に、Firefox の開発ツールの問題であるか、あるいは Thunderbird のリモート接続機能の問題であるかを明らかにすることが重要です。これを確認するには、Firefox だけを使用して問題が再現するかを試してください。例えばインスペクターツールで属性の値を設定できない場合は、Firefox のブラウザーデバッガーで属性の値を変更してみてください。ブラウザーデバッガーで再現しない場合は、Thunderbird のバグとして報告してください。再現する場合は、Firefox/開発ツールのバグとして報告してください。

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

{{ToolsSidebar}}

+ +

レスポンシブデザイン は、さまざまな端末、特にデスクトップやラップトップだけでなく携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。

+ +

もっとも明らかな要素は画面のサイズですが、ほかにもディスプレイの画素密度やタッチをサポートするかといった要素があります。レスポンシブデザインモードは、さまざまな端末でウェブサイトがどのように表示および動作するかを確認するために、これらの要素をシミュレーションする手段を提供します。

+ +

レスポンシブデザインモードを切り替える

+ +

レスポンシブデザインモードを切り替える方法は 3 つあります:

+ + + +

レスポンシブデザインモードを使用する

+ +

レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。初期状態は 320 x 480 ピクセルです:

+ +
+

メモ: レスポンシブデザインモードで選択したデバイスは、セッション間で保存されます。

+
+ +

+ +

レスポンシブデザインモード自体の切り替えとは別に、開発ツールのツールボックスを表示または非表示にすることができます:

+ +

+ +

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

+ +

端末選択

+ +

ビューポートの上に [端末が選択されていません] と表示されています。ここをクリックすると、端末名の一覧が開きます。端末を選択すると、レスポンシブデザインモードは以下の特定を、その端末に合わせて設定します:

+ + + +

さらに Firefox は User-Agent HTTP リクエストヘッダーを、選択した端末の既定のブラウザーであると名乗るように設定します。例えば iPhone を選択すると、Firefox は自身が Safari であると名乗ります。navigator.userAgent プロパティも同じ値を設定します。

+ +

{{EmbedYouTube("JNAyKemudv0")}}

+ +

ドロップダウンリストにある端末は、選択可能な端末のサブセットです。ドロップダウンリストの末尾に [リストを編集...] という項目があります。これを選択するとすべての選択肢を含むパネルが表れて、ドロップダウンリストに表示したい端末を選択できます。端末一式や各端末に関連付けられている値は、https://github.com/mozilla/simulated-devices から取得できます。

+ +

カスタム端末を保存する

+ +

Firefox 54 より、レスポンシブデザインモードでカスタム端末を保存できます。それぞれの端末で以下の特性を持つことができます:

+ + + +

また、端末モデル名にマウスポインターを乗せると、既存の端末の特性をツールチップでプレビューできます。

+ +

+ +

端末の制御

+ +

ほとんどの端末の特性について、特別な値を与えることもできます。

+ +

画面のサイズを設定する

+ +

画面のサイズを設定するには、ビューポートの下にある値をクリックして編集します:

+ +

+ +

ビューポートの右下の角をドラッグして、サイズを変更することもできます。

+ +

また Firefox 59 より、キーボードで画面のサイズを編集できます。2 つの寸法の値のいずれかにフォーカスがある (またはカーソルがある) ときに上下のカーソルキーを押すか押し続けて、寸法を 1 ピクセルずつ増減できます。

+ +

より早く寸法を変えたい場合は、Shift キーを押しながら上下カーソルキーを押すか押し続けると、寸法を 10 ピクセルずつ増減できます。

+ +

端末の画素密度を設定する

+ +

端末の画素密度を設定するには、[DPR] のリストボックスをクリックして希望する値を選択します。

+ +

+ +

タッチイベントのシミュレーションを切り替える

+ +

タッチイベントのシミュレーションを有効化/無効化するには、人差し指を立てている手のアイコンをクリックします:

+ +

+ +

タッチイベントのシミュレーションを有効化すると、マウスイベントを タッチイベント に変換します。

+ +

ページ再読み込みの動作を制御する

+ +

自動再読み込み ドロップダウンメニューは、Firefox 60 の新機能です:

+ +

+ +

メニューをクリックすると 2 つの項目があり、どちらもデフォルトで表示されます:

+ + + +

Firefox 60 より前のバージョンでは、自動的に再読み込みしていました。これは、再読み込みしなければ適用されないページがあるためです。例えば、多くのページが読み込み時にタッチのサポートを確認して、サポートされている場合に限りイベントハンドラーを追加したり、特定のブラウザーでのみ特定の機能を有効化したりしています。

+ +

しかし、このような機能を実行することに興味がない場合 (さまざまなサイズで全体のレイアウトを確認するなど) は、再読み込みで時間を浪費してよい仕事ができなくなるかもしれませんので、再読み込みを制御できると役に立ちます。

+ +

はじめてこの設定を変更したときに再読み込みを自動的に行わないことと、自動的に再読み込みできるようにする方法を示す警告メッセージを表示します。例えば:

+ +

+ +

向きを切り替える

+ +

画面の向きをポートレートまたはランドスケープに切り替えるには、端末選択の隣にあるアイコンをクリックします:

+ +

+ +

ネットワークを調整する

+ +

とても高速なネットワーク接続を使用してすべての開発やテストを行っている場合は、低速な接続を使用してアクセスしたときにサイトで問題が発生するかもしれません。レスポンシブデザインモードで、さまざまな種類のネットワークの特徴をほぼエミュレートするようブラウザに指示できます。

+ +

以下の特徴をエミュレートします:

+ + + +

以下の表で各ネットワークに関連付けられた値を示しますが、正確なパフォーマンスを測定するためにこの機能を頼らないようにしてください。これは、さまざまな状況におけるユーザーエクスペリエンスのおおまかな見解を示そうとするものです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
選択肢ダウンロード速度アップロード速度最小の遅延 (ms)
GPRS50 Kb/s20 Kb/s500
Regular 2G250 Kb/s50 Kb/s300
Good 2G450 Kb/s150 Kb/s150
Regular 3G750 Kb/s250 Kb/s100
Good 3G1.5 Mb/s750 Kb/s40
Regular 4G/LTE4 Mb/s3 Mb/s20
DSL2 Mb/s1 Mb/s5
Wi-Fi30 Mb/s15 Mb/s2
+ +

ネットワークを選択するには、初期値として [No throttling] と表示されているリストをクリックします:

+ +

+ +

スクリーンショットを取得する

+ +

カメラのアイコンをクリックすると、ビューポートのスクリーンショットを取得します:

+ +

+ +

スクリーンショットは、Firefox の既定のダウンロード先に保存します。

+ +

Firefox 53 より、開発ツールの オプション ページで "Screenshot to clipboard" にチェックを入れると、スクリーンショットをシステムのクリップボードにもコピーします。

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 +--- +
{{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/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 +--- +
{{ToolsSidebar}}

Firefox 40 の新機能

+ +

Firefox 40 以降では、ページに対して水平方向と垂直方向に定規を表示できるようになりました。

+ +

定規で表示されている数値の単位はピクセルとなります。

+ +

Firefox 59 よりビューポートの右上付近に、ビューポートの寸法を表示します。

+ +

次のどちらかで、定規を表示できます:

+ + + +

定規を使用するときは、以下の動作に留意してください。

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

{{ToolsSidebar}}

+ +

スクラッチパッドは、JavaScript の実験環境を提供します。ウェブページと対話するコードの記述、実行、結果の確認ができます。

+ +

一度に 1 行のコードを実行するよう設計されている Web コンソール とは異なり、スクラッチパッドはより大きな JavaScript コードのかたまりを編集でき、そして出力結果の用途に応じたさまざまな方法でコードを実行することができます。

+ +

{{EmbedYouTube("Pt7DZACyClM")}}

+ +

使用方法

+ +

個別のウィンドウでスクラッチパッドを開く

+ +

個別のウィンドウでスクラッチパッドを開く方法がいくつかあります:

+ + + +

個別のウィンドウでスクラッチパッドが開きます。

+ +

ツールボックス内にスクラッチパッドを開く

+ +
Firefox 47 の新機能
+ +

Firefox 47 より、ツールボックス の内部にスクラッチパッドを開くことができます。始めに、オプション ページで "標準の Firefox 開発ツール" の "スクラッチパッド" にチェックを入れなければなりません。

+ +

以上でスクラッチパッドが、ページインスペクターや Web コンソールなど他のツールと並んで、ツールボックス内で使用できます。これは、コンソールの常時表示 で特に役立ちます。スクラッチパッドを持続的なマルチランエディターとして、またコンソールをページと対話するツールとして使用できます。

+ +

編集

+ +

スクラッチパッドのウィンドウは以下のような外見です (macOS では画面上部にメニューバーが表示されます):

+ +

A screenshot of the Scratchpad

+ +

ファイルメニューでは JavaScript コードの保存や読み込みを行うことができますので、後でコードを再利用することができます。

+ +

コード補完

+ +

スクラッチパッドに tern コード解析エンジン を統合して、オートコンプリートの候補やカレントシンボルに関する情報を表示するポップアップを提供するために使用しています。Ctrl + Space を押下すると、オートコンプリート候補を表示します。

+ +

例えば、d と入力して Ctrl + Space を押下してみましょう。以下のように、オートコンプリートボックスを表示します:

+ +

各候補の隣にあるアイコンは、型を示します。またハイライト中の候補について、詳細情報をポップアップで表示します。↑ および ↓ キーで候補を行き来でき、Enter または Tab でハイライト中の候補を選択します。

+ +

インラインドキュメント

+ +

識別子にカーソルがあるときに Ctrl + Shift + Space を押下すると、インラインドキュメントをポップアップ表示します。例えば document.addEventListener と入力して Ctrl + Shift + Space を押下すると、関数の構文や簡単な説明といった概要を記載したポップアップを表示します:

+ +

"[docs]" は、そのシンボルに関する MDN のドキュメントへのリンクです。

+ +

実行

+ +

コードを記述したら、実行したいコードを選択してください。何も選択しない場合は、ウィンドウ内のコードすべてを実行します。そして、コードの実行方法を上部のボタン、実行メニュー、またはコンテキストメニューで選択してください。コードは現在選択しているタブのスコープで実行します。関数の外部で宣言した変数は、そのタブのグローバルオブジェクトに追加されます。

+ +

実行方法は 4 種類あります。

+ +

実行

+ +

実行を選択すると、選択したコードが実行されます。これは結果を確認する必要性がない、ページのコンテンツを操作する関数や他のコードを実行するものです。

+ +

調査

+ +

調査は、コードを実行オプションのように実行します。ただし、実行後に戻り値の検証を行うことができるオブジェクトインスペクターが開きます。

+ +

例えば、以下のコードを入力します:

+ +
window
+
+ +

そして調査を選択すると、以下のようなオブジェクトインスペクターが表示されます:

+ +

Inspecting an object in the Scratchpad

+ +

表示

+ +

表示は選択されたコードを実行して、その結果をスクラッチパッドのエディター内にコメントとして挿入しますので、REPL として使用できます。

+ +

再読み込みして実行

+ +

再読み込みして実行は、実行メニューからのみ使用できます。始めにページを再読み込みして、ページの "load" イベントが発生したときのコードを実行します。これは、クリーンな環境でコードを実行するのに役立ちます。

+ +

ブラウザーコンテキストでスクラッチパッドを実行する

+ +

スクラッチパッドは特定のウェブページだけでなく、ブラウザー全体のコンテキストでも実行できます。これは Firefox 自体での作業やアドオンの開発で役立ちます。これを行うには、開発ツールのオプション で "ブラウザーとアドオンのデバッガーを有効" にチェックを入れてください。すると、実行環境メニューにブラウザーという選択肢が加わります。これを選択すると、いくつかのグローバルオブジェクトを調査するとわかるとおり、スコープがページのコンテンツではなくブラウザー全体になります:

+ +
window
+/*
+[object ChromeWindow]
+*/
+
+gBrowser
+/*
+[object XULElement]
+*/
+ +

スニペットファイルの先頭行に
+ // -sp-context: browser
+ と記入した場合は、スクラッチパッドの実行コンテキストがブラウザーに設定されます。

+ +

キーボードショートカット

+ +

{{Page ("ja/docs/tools/Keyboard_shortcuts", "scratchpad")}}

+ +

ソースエディタのショートカット

+ +

{{Page ("ja/docs/tools/Keyboard_shortcuts", "source-editor")}}

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 +--- +
{{ToolsSidebar}}
+ +

オプションを開く

+ +

Firefox 62 から、開発者ツールの設定を開くためのアイコンがタブの右側にある ...(エリプシス) をクリックもしくはタッチすることでアクセスするメニューに移動しました。

+ +

+ +

メニューには、開発者ツールの場所を制御する設定が含まれています。 ウィンドウの下部にある既定の設定を選択するか、ツールを画面の左側または右側に移動することができます。これらの設定はワイドスクリーンモニターを使用している場合に特に便利です。別のウィンドウでツールを開くこともできます。

+ +

Show split console は、コンソールを示すツールの一番下にセクションを追加します。コマンドラインとコンソール出力の1行または2行を表示します。

+ +

+ +

その他の設定は、開発者ツール設定ウィンドウにあります。設定を表示するには、開発者ツールを開き、次の操作を行います。

+ + + +

設定ペインは次のようになります。

+ +

Depicts the Toolbox options

+ +

カテゴリー

+ +

デフォルトの Firefox 開発ツール

+ +

このチェックボックスのグループでは、ツールボックスで有効にするツールを決定します。新しいツールは、Firefox に搭載されていてもデフォルトで無効になっていることがあります。

+ +

利用可能なツールボックスのボタン

+ +

このチェックボックスのグループでは、どのツールを ツールボックスのツールバーアイコンとして表示するか を決定します。

+ +

Firefox 62 以降、「現在の対象ドキュメントとしてiframeを選択」オプションがチェックされている場合、現在のページに iframe が含まれていなくても、設定タブが表示されている間、ツールバーにアイコンが表示されます。

+ +

Firefox 52 では、"要素を選択" ボタン を切り替えるチェックボックスを削除しました。"要素を選択" ボタンは常に表示します。

+ +

テーマ

+ +

 

+ +

これにより、2つのテーマのいずれかを選択できます。

+ + + +

 

+ +

共通設定

+ +

複数のツールに適用する設定です。ひとつだけあります:

+ +
+
ログ出力を残す
+
ウェブコンソールおよびネットワークモニターで、別のページへ移動するときに出力内容を消去するかを設定します。
+
+ +
+

共通設定が設定に含まれていない場合、ブラウザのアドレスバーにある 'about:config'  URLを使用して、'devtools.webconsole.persistlog' を検索してこの値を true に切り替えることで、Web コンソールログを永続化できます

+
+ +

調査

+ +
+
ブラウザー CSS を表示
+
ブラウザーが適用するスタイル (ユーザーエージェントスタイル) をインスペクターの ルールビュー に表示するかを設定します。この設定はインスペクターの 計算済みビュー にある "ブラウザー CSS" チェックボックスとは無関係であることに注意してください。
+
DOM 属性値を省略
+
デフォルトでは、インスペクターは 120 文字を超える DOM 属性を切り詰めて表示します。チェックボックスのチェックを外すと、この動作を行いません。この設定は、about:config の "devtools.markup.collapseAttributes" を切り替えます。属性を切り詰める文字数のしきい値を変更するには、about:config で "devtools.markup.collapseAttributeLength" を編集してください。
+
既定の色単位
+
調査時に色をどのように表現するかの設定です: +
    +
  • 16 進数
    • +
  • HSL(A)
    • +
  • RGB(A)
    • +
  • 色の名前
    • +
  • 記述通りの単位
    • +
+
+
レイアウトパネルを有効化
+
実験的なレイアウトパネルを有効化します。この設定は Firefox Nightly にのみ存在します。
+
+ +

ウェブコンソール

+ +
+
タイムスタンプを表示
+
ウェブコンソールでタイムスタンプを表示するかの設定です。デフォルトでウェブコンソールはタイムスタンプを表示しません。
+
新しいコンソールフロントエンドを有効化
+
実験的な新しいコンソールに切り替えます。この設定は Firefox Nightly にのみ存在します。
+
+ +

デバッガー

+ +
+
ソースマップを有効化
+
デバッガーで ソースマップのサポート を有効化します。
+
新しいデバッガーフロントエンドを有効化
+
新しいデバッガーを有効化します。この設定は Firefox Nightly にのみ存在します。
+
+ +

スタイルエディター

+ +
+
元のソースを表示
+
この設定を有効にすると、ソースマップをサポートする CSS プリプロセッサーを使用している場合にスタイルエディターが、生成された CSS ではなく元のプリプロセッサーのソースを表示できます。スタイルエディターの CSS ソースマップのサポートについて確認してください。この設定を有効にすると、ページインスペクターのルールビューでも元のソースへリンクするようになります。
+
CSS 自動補完
+
スタイルエディターで候補の自動補完が可能になります。
+
+ +

スクリーンショットの動作

+ +
+
スクリーンショットをクリップボードへコピー
+
スクリーンショットツール のアイコンをクリックすると、スクリーンショットの画像をクリップボードにコピーします (ダウンロードディレクトリーへの保存も行います)。Firefox 53 の新機能です。
+
カメラのシャッター音を再生
+
スクリーンショットツール のアイコンをクリックしたとき、シャッターの音を鳴らします。Firefox 53 の新機能です。
+
+ +

エディター設定

+ +

これは CodeMirror ソースエディターの設定です。このエディターは Firefox に内蔵されており、スクラッチパッド や スタイルエディター など、いくつかの開発ツールで使用しています。

+ +
+
インデントを検知
+
カーソルがある行のインデント状態に基づいて、新しい行を自動的にインデントします。
+
閉じ括弧自動入力
+
 
+
インデントにスペース文字を使う
+
 
+
タブ幅
+
 
+
キー割り当て
+
既定の CodeMirror のキー割り当て、またはいくつかの著名なエディターのキー割り当てから選択します: +
    +
  • Vim
    • +
  • Emacs
    • +
  • Sublime Text
    • +
+
+
+ +

詳細設定

+ +
+
Gecko プラットフォームのデータを表示
+
プロファイルに Gecko プラットフォームのシンボルを含めるかを設定します。
+
HTTP キャッシュを無効化 (ツールボックスを開いているとき)
+
ツールボックスを開いているすべてのタブで、最初に読み込む場合のパフォーマンスをシミュレーションするため、ブラウザーの HTTP キャッシュを無効にします。この設定は持続的ですので、設定を行った後にツールボックスを開き直しても、キャッシュは無効化されたままになります。開発ツールを閉じた状態では、キャッシュが有効になります。なお、Service Workers はこの設定の影響を受けません。 +
バージョン 49 より前の Firefox ではこのオプションの名称が [キャッシュを無効] でしたが、HTTP キャッシュに影響があって Service Workers や Cache API には影響がないことを明確にするため改名しました。
+
+
JavaScript を無効化
+
JavaScript が無効な状態でタブをリロードします。
+
HTTP による Service Workers を有効化 (ツールボックスを開いたとき)
+
安全ではないウェブサイトから Service Worker を登録可能にします
+
ブラウザーとアドオンのデバッガーを有効化
+
ウェブコンテンツだけではなく、ブラウザー自体のコンテキストで開発ツールを使用できます。
+
リモートデバッガーを有効化
+
開発ツールで リモートの Firefox インスタンスのデバッグ を可能にします。
+
Worker のデバッグを有効化 (開発ツール)
+
デバッガーで、Worker をデバッグするためのパネルを有効化します。 +

注記: Firefox 56 から 新しいデバッガーのUI を搭載したため、このオプションを UI から削除しました。ただし、設定項目 devtools.debugger.workers を true に設定すると、古い UI を有効化できます。

+
+
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 +--- +
{{ToolsSidebar}}

シェーダーエディターで、WebGL で使用するバーテックスシェーダーおよびフラグメントシェーダーの参照や編集ができます。

+ +

{{EmbedYouTube("hnoKqFuJhu0")}}

+ +

WebGL は、プラグインを使用せずにブラウザーでインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。WebGL では、OpenGL レンダリングパイプライン の適切なステージで名付けられている、"シェーダー" というプログラムを 2 つ提供します。ひとつは バーテックスシェーダー であり、これは描画する各頂点の座標を提供します。もうひとつは フラグメントシェーダー であり、こちらは描画する各ピクセルの色を提供します。

+ +

これらのシェーダーは OpenGL Shading Language、別名 GLSL で記述します。WebGL では、それらをさまざまな方法でページに含めることができます。JavaScript のソース内にハードコードする、<script> タグでインクルードする別ファイルに書き込む、プレーンテキストとしてサーバーから取得する、といった方法があります。それらはページで実行する JavaScript コードによって、コンパイルのために WebGL API を使用して送出され、そしてデバイスの GPU で実行されます。

+ +

シェーダーエディターでは、バーテックスシェーダーおよびフラグメントシェーダーのソースを調査および編集できます。

+ +

こちらは複雑なアプリケーション (Unreal Engine のデモ) でシェーダーエディターをどのように使用できるかを示したスクリーンキャストです:

+ +

{{EmbedYouTube("YBErisxQkPQ")}}

+ +

シェーダーエディターを開く

+ +

シェーダーエディターはデフォルトで無効です。有効にするには 開発ツールのオプション を開いて、[標準の Firefox 開発ツール] で [シェーダーエディター] にチェックを入れてください。これで、ツールバーに [シェーダーエディター] が現れます。これをクリックすると、シェーダーエディターが開きます。

+ +

始めはページの再読み込みを求めるボタンが表示された、ブランクのウィンドウが現れます:

+ +

+ +

作業を始めるには、WebGL コンテキストを生成するページおよびプログラムを読み込みます。以降のスクリーンショットは、Unreal Engine のデモを使用して取得しました。

+ +

3 つのペインに分割されたウィンドウが現れます。左側はすべての GLSL プログラムのリスト、中央は選択したプログラムのバーテックスシェーダー、右側は選択したプログラムのフラグメントシェーダーです:

+ +

+ +

プログラムの制御

+ +

左側のペインでは、現在の WebGL コンテキストで使用しているすべてのプログラムを一覧表示します。リストの項目にマウスポインタを載せると、そのプログラムで描画したジオメトリーを赤色でハイライトします:

+ +

+ +

プログラム項目の左側にある目玉のアイコンをクリックすると、そのプログラムを無効化します。これは特定のシェーダーに注目したり、重なっているジオメトリーを隠したりするのに役立ちます:

+ +

+ +

項目をクリックすると、そのバーテックスシェーダーとフラグメントシェーダーが他の 2 つのペインに表示され、編集ができます。

+ +

シェーダーの編集

+ +

中央および右側のペインでは、選択したプログラムのバーテックスシェーダーおよびフラグメントシェーダーを表示します。

+ +

これらのプログラムは編集することが可能であり、編集結果は次に WebGL コンテキストが再描画されるとき (例えば次のアニメーションフレーム) で確認できます。例えば、色を変更できます:

+ +

+ +

エディターは、コード中の構文エラーをハイライトします:

+ +

+ +

エラーがある行の横に表示される×印にマウスポインタを載せると、詳しい問題点を確認できます:

+ +

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

{{ToolsSidebar}}

+ +
+

ストレージインスペクターはデフォルトで無効です。開発ツールのオプション で有効化できます。

+
+ +

ストレージインスペクターで、ウェブページが使用できるさまざまな種類のストレージを調査できます。現在は、以下の種類のストレージの調査に使用できます:

+ + + +

ストレージインスペクターは当分の間、読み取り専用のビューのみでストレージを表示します。将来のリリースでストレージコンテンツの編集を可能にするよう、作業しています。

+ +

ストレージインスペクターを開く

+ +

ストレージインスペクターを有効化すると、Firefox メニューパネル (メニューバーを表示している場合や Mac OS X では [ツール] メニュー) 内の [ウェブ開発] サブメニューで [ストレージインスペクター] を選択して開くことができます。または、キーボードショートカット Shift + F9 も使用できます。

+ +

ストレージインスペクターがアクティブな状態で、ツールボックス がブラウザウィンドウの下部に現れます。開発ツールボックスでは "ストレージ" という名称です。

+ +

+ +

ストレージインスペクターのユーザーインターフェイス

+ +

ストレージインスペクターの UI は 3 つの主要コンポーネントに分かれます:

+ + + +

+ +

ストレージツリー

+ +

ストレージツリーは、ストレージインスペクターが調査可能なすべてのストレージタイプを一覧表示します:

+ +

+ +

ストレージの種類の配下で、オブジェクトは生成元で分類します。Cookie では、生成元の区別にプロトコルを使用しません。IndexedDB やローカルストレージでは、生成元がプロトコルとホスト名の組み合わせになります。例えば "http://mozilla.org" と "https://mozilla.org" は異なる 2 つの生成元になりますので、ローカルストレージのアイテムは双方で共有できません。

+ +

"キャッシュストレージ" では、オブジェクトを生成元とキャッシュ名で分類します:

+ +

+ +

IndexedDB のオブジェクトは生成元、データベース名、さらにオブジェクトストア名で分類します:

+ +

+ +

Cookie、ローカルストレージ、セッションストレージは階層が 1 つだけであり、保存されているアイテムは各生成元の直下に表示します:

+ +

+ +

ツリー内の各項目をクリックすると、子項目を展開または折りたたみできます。ツリーは最新の状況を表示しますので、新たな生成元が追加される (例えば iframe を追加するなど) と、自動的に各ストレージタイプに追加されます。

+ +

ツリーでアイテムをクリックすると、アイテムの詳細情報を表形式で右側に表示します。例えばストレージタイプ Cookie 配下の生成元をクリックすると、そのドメインに属するすべての Cookie を表示します。

+ +

テーブルウィジェット

+ +

テーブルウィジェットは、選択したツリー項目 (生成元やデータベース) に関するすべてのアイテムを表示する場所です。ストレージタイプやツリー項目に応じて、テーブルの列の数が変わります。

+ +

テーブルのすべての列がリサイズ可能です。テーブルのヘッダーをコンテキストクリックして列名を選択すると、列を隠したり表示したりすることができます:

+ +

+ + + +

テーブルウィジェットの上部に検索ボックスがあります:

+ +

+ +

これは、検索文字列にマッチするアイテムのみテーブルに表示するようフィルタリングします。検索文字列にマッチするアイテムは、いずれかのフィールド (列を非表示にしているフィールドを含む) に検索文字列を含むアイテムです。

+ +

Firefox 50 より、Ctrl + F (Mac では Cmd + F) を使用して検索ボックスにフォーカスを当てることができます。

+ +

ストレージの追加と更新

+ +

新しいバージョンの Firefox では、現在表示しているストレージ種別のビューを最新の情報に更新するボタンと、可能であれば新しいストレージアイテムを追加するボタンがあります (IndexedDB や キャッシュストレージでは新しいアイテムを追加できません):

+ +

+ + + +

テーブルウィジェットで任意の行を選択すると、その行の詳細情報を表示するサイドバーが開きます。Cookie を選択すると、その Cookie に関するすべての詳細情報を表示します。

+ +

サイドバーでは Cookie、ローカルストレージ、IndexedDB のアイテムの値を解析して、単なる文字列を有意義なものに変換します。例えば:

+ + + +

サイドバーの上部にある検索ボックスを使用して、表示された値をフィルタリングすることもできます。

+ +

キャッシュストレージ

+ +

キャッシュストレージの配下で、Cache API を使用して作成した DOM キャッシュの内容を確認できます。キャッシュを選択すると、キャッシュに含まれているリソースの一覧を表示します。各リソースについて、以下の情報を表示します:

+ + + +

+ +

Cookie

+ +

ストレージツリーで Cookie ストレージ内の生成元を選択すると、その生成元向けの Cookie をテーブルウィジェットに表示します。Cookie のテーブルには以下の列があります:

+ + + +
+

注記: 一部の列は、デフォルトで表示されていません。表示する列を変更するには、表示中のテーブルの見出しを右クリックまたは Ctrl を押しながらクリックして、コンテキストメニューで表示・非表示を選択します。

+
+ +
+

注記: Firefox 51 より前のバージョンでは HostOnly、Secure、HttpOnly の列がそれぞれ isDomain、isSecure、isHttpOnly という名称でした。

+
+ +

テーブルウィジェット 内のセルをダブルクリックして値を編集することで、Cookie を編集できます。また、"プラス" (+) ボタンをクリックして追加された行の値を希望する値に変更することで、新しい Cookie を追加できます:

+ +

それぞれの行のコンテキストメニューを使用して、Cookie を削除することもできます:

+ +

+ +

ローカルストレージ / セッションストレージ

+ +

ローカルストレージおよびセッションストレージの生成元を選択すると、ローカルストレージおよびセッションストレージに関するすべてのアイテムの名称と値をテーブルに表示します。

+ +

テーブルウィジェット内のセルをダブルクリックして値を編集することで、ローカルストレージやセッションストレージのアイテムを編集できます:

+ +

{{EmbedYouTube("oeQzhpoMByw")}}

+ +

コンテキストメニューを使用して、ローカルストレージやセッションストレージの項目を削除することもできます:

+ +

+ +

また、"プラス" (+) ボタンをクリックして追加された行の値を希望する値に変更することで、新しいストレージアイテムを追加できます。

+ +

IndexedDB

+ +

ストレージツリーで IndexedDB ストレージ内の生成元を選択すると、その生成元向けのすべてのデータベースの詳細情報をテーブルに表示します。データベースの詳細情報は以下のとおりです:

+ + + +

ストレージツリーで IndexedDB のデータベースを選択すると、保存されているすべてのオブジェクトストアの詳細情報をテーブルに表示します。オブジェクトストアの詳細情報は以下のとおりです:

+ + + +

+ +

ストレージツリーでオブジェクトストアを選択すると、オブジェクトストア内のすべてのアイテムをテーブルに表示します。すべてのアイテムは、キーとキーに関連づけられた値があります。

+ +

Firefox 49 よりストレージツリービューのコンテキストメニューを使用して、IndexedDB データベースを削除できます:

+ +

+ +

データベースを削除できない (もっとも多い理由は、データベースへのアクティブな接続が存在するため) 場合は、ストレージインスペクターで警告メッセージを表示します:

+ +

Firefox 50 よりテーブルウィジェットのコンテキストメニューを使用して、オブジェクトストア内のすべてのアイテムあるいは特定のアイテムを削除できます:

+ +

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 +--- +
{{ToolsSidebar}}

スタイルエディターでできること:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ +

スタイルエディターを開くには、[ウェブ開発] メニュー (Mac では、[ツール] メニューのサブメニューです) で、[スタイルエディター] を選択します。スタイルエディターをアクティブにして、ブラウザーウィンドウの下部に ツールボックス が現れます:

+ +

+ +

スタイルエディターは 3 つの主要なセクションに分かれています:

+ + + +

スタイルシートペイン

+ +

ウィンドウ左側のスタイルシートペインには、現在のドキュメントで使用しているすべてのスタイルシートの一覧を表示します。スタイルシート名の左にある目玉のアイコンをクリックすると、そのスタイルシートの有効/無効をすばやく切り替えることができます。一覧の各シート項目の右下にある保存ボタンをクリックすると、スタイルシートの変更内容をローカルコンピューターに保存することができます。

+ +

Firefox 40 より、選択したスタイルシートを新しいタブで開くことができるコンテキストメニューが、スタイルシートペインにあります。

+ +

エディターペイン

+ +

右側はエディターペインです。ここでは選択したスタイルシートのソースの閲覧や編集が可能です。変更した内容は、ページへ直ちに反映されます。これにより、実験・修正・確認がとても簡単にできます。変更内容に満足したら、スタイルシートペインの項目にある保存ボタンをクリックして、スタイルシートのコピーをローカルに保存できます。

+ +

CSS を読みやすくするために、エディターには行番号の表示や文法のハイライト機能があります。また、いくつもの キーボードショートカット をサポートしています。

+ +

最小化されたスタイルシートを検出すると、元のシートに影響がない形で自動的に最小化を解除します。これは、最適化済みのページで行う作業をより容易にします。

+ +

スタイルエディターはオートコンプリートをサポートしています。入力を始めると、候補のリストを提供します。

+ +

スタイルエディターの設定 でオートコンプリートを無効にできます。

+ +

メディアサイドバー

+ +

選択中のスタイルシートに @media 規則 が含まれている場合に、スタイルエディターの右側にサイドバーを表示します。このサイドバーは規則を一覧表示して、スタイルシートで規則が定義されている行へのリンクも提供します。項目をクリックすると、スタイルシート内で規則が存在する場所にジャンプします。現在適用していないメディアクエリー規則の条件文は、グレーアウト表示します。

+ +

メディアサイドバーはレスポンシブレイアウトの作成やデバッグにおいて、レスポンシブデザインモード と組み合わせることで特に役立ちます:

+ +

{{EmbedYouTube("aVUXmvLSwoM")}}

+ +

Firefox 46 より、@media 規則にスクリーンサイズの条件が含まれている場合に、条件をクリックできます。クリックするとレスポンシブデザインモードを使用して、条件に合うようにスクリーンをリサイズします:

+ +

{{EmbedYouTube("XeocxoW2NYY")}}

+ +

スタイルシートの作成とインポート

+ +

ツールバーの新規作成ボタンをクリックすると、新しいスタイルシートを作成できます。そして、新しいエディターに CSS の入力を始めて、他のシートに対する変更と同様にページへリアルタイムに適用された結果を確認できます。

+ +

インポートボタンをクリックすると、スタイルシートをディスクから読み込んでページに適用できます。

+ +

ソースマップのサポート

+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

ウェブ開発者は Sass、Less、Stylus といったプリプロセッサーを使用して CSS ファイルを作成することがよくあります。これらのツールは、リッチかつ表現性の高い構文から CSS ファイルを生成します。これを行うとメンテナンスするものが、生成された CSS ではなくプリプロセッサーの構文になりますので、生成された CSS の閲覧や編集が可能でもあまり役に立ちません。よって生成された CSS を編集してから、元のソースへどのようにして再適用するかを手作業で考えなければなりません。

+ +

ソースマップにより、生成された CSS から元の構文への対応づけをツールが行えるようになりますので、元の構文を表示して編集および保存が可能になります。Firefox 29 より、スタイルエディターが CSS ソースマップを理解します。

+ +

例えば Sass を使用すると、スタイルエディターは Sass ファイルから生成された CSS ではなく、Sass ファイルを表示して編集することが可能になります:

+ +

ソースマップが動作するための必要条件は以下のとおりです:

+ + + +

元のソースを表示

+ +

スタイルエディターの設定 で [元のソースを表示] にチェックを入れると、ルールビュー で CSS 規則の隣にあるリンクが、スタイルエディター内にある元のソースへのリンクになります。

+ +

Firefox 35 より、デフォルトで元のソースを表示します。

+ +

元のソースを編集

+ +

スタイルエディターで元のソースを編集することや、それがページへ直ちに適用された結果を見ることも可能です。これを実現するための追加作業が 2 つあります。

+ +

まずプリプロセッサーが元のソースを監視して、ソースが変更された際は自動的に CSS を再生成するようにセットアップします。Sass では --watch オプションを渡すことで可能になります:

+ +
sass index.scss:index.css --sourcemap --watch
+ +

次にスタイルエディターで、ファイル名の隣にある [保存] ボタンをクリックして元のファイルを上書き保存します。

+ +

これで、スタイルエディターでソースファイルを変更したときに CSS が再生成され、変更結果をすぐに確認できます。

+ +

キーボードショートカット

+ +

ソースエディターのショートカット

+ +

{{Page ("ja/docs/tools/Keyboard_shortcuts", "source-editor")}}

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 +--- +
{{ToolsSidebar}}
+ +

開発ツールを使用して、ページ全体またはページ内のひとつの要素のスクリーンショットを撮影できます。

+ +

ページのスクリーンショットを撮影する

+ +

現在のページ全体のスクリーンショットを撮影するには、スクリーンショットのアイコン () を使用します。

+ +

デフォルトでは、スクリーンショットのアイコンが有効化されていません。有効にする方法は以下のとおりです:

+ + + +

以上で、ツールバーにアイコンが表示されます:

+ +

{{EmbedYouTube("KB5V9uJgcS4")}}

+ +

アイコンをクリックすると、現在のページのスクリーンショットを撮影します。スクリーンショットは、ブラウザーの "ダウンロード" ディレクトリーに保存します:

+ +

{{EmbedYouTube("HKS6MofdXVE")}}

+ +

要素のスクリーンショットを撮影する

+ +

ページ内のひとつの要素のスクリーンショットを撮影するには、インスペクターの HTML ペイン でその要素のコンテキストメニューを開いて、"ノードのスクリーンショットを撮影" を選択します。スクリーンショットは、ブラウザーの "ダウンロード" ディレクトリーに保存します:

+ +

{{EmbedYouTube("p2pjF_BrE1o")}}

+ +

スクリーンショットをクリップボードにコピーする

+ +

Firefox 53 より、スクリーンショットをクリップボードにコピーすることもできます。開発ツールのオプションで "Screenshot to clipboard" にチェックを入れてください:

+ +

{{EmbedYouTube("AZedFGh6F78")}}

+ +

スクリーンショットを撮影すると、クリップボードへのコピーも行います。

+ +

 

+ +

アディショナルオプション

+ +

別のデバイスとピクセルの比率を指定する必要がある場合、スクリーンショットを撮る前に遅延を設定するか、独自のファイル名を指定する必要がある場合は、Web コンソールで :screenshot ヘルパー関数を使用できます。

+ +

 

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 +--- +
{{ToolsSidebar}}
+ +

一般

+ +

スクリーンショット:

+ + + +

設定:

+ + + +

ページインスペクター

+ +

マークアップビュー:

+ + + +

要素を選択する:

+ + + +

ルールビュー:

+ + + +

ウェブコンソール

+ +

すべてのパネル:

+ + + +

コマンドライン:

+ + + +

コンソールの出力:

+ + + +

デバッガー

+ + + +

スタイルエディター

+ + + +

ネットワークモニター

+ + + +

ストレージインスペクター

+ + 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 +--- +
{{ToolsSidebar}}

ツールボックスは、Firefox に組み込まれている開発ツールのほとんどを提供するホームです。

+ +

ツールボックスを開く方法がいくつかあります:

+ + + +

デフォルトでは Firefox のウィンドウの下側にドッキングした状態で表示されますが、好みに応じて切り離すこともできます。ドッキングしているときは以下のような表示になります:

+ +

+ +

ウィンドウ自体は 2 つのパーツに分かれています。上部のツールバーと、その下にあるメインペインです:

+ +

+ +

ドッキングモード

+ +

デフォルトでツールボックスはブラウザーウィンドウの下部にドッキングした状態で表示しますが、ツールバーのボタンを使用してウィンドウの右側にドッキングしたり、個別のウィンドウで表示することもできます。

+ +

ツールバー

+ +

ツールバーには個々のツールをアクティブ化、ウィンドウのドッキングや切り離し、およびウィンドウを閉じるためのコントロールがあります。

+ +

+ +

ノードの選択

+ +

ツールバーの左端に、ノード選択ツールを起動するボタンがあります。このツールで、ページ内で調査する要素を選択できます。"要素を選択する" をご覧ください。

+ +

ツールボックスで提供するツール

+ +

その隣にはツールボックスで提供するさまざまなツールを切り替えるための、ラベルがついたボタンが並んでいます。この並びには以下のツールが含まれています:

+ + + +

すべてのツールが表示されるとは限らない点に注意してください。その状況で実際に使用可能なツールだけが表示されます (例えば、リモートデバッグが未サポートのツールがあるため、デバッグ対象がツールボックスを起動した Firefox のインスタンスではない場合は、一部のツールしか表示されません)。

+ +

付加ツール

+ +

ツールボタンの隣には、開発ツールのオプション で追加および削除可能なボタンが並んでいます。デフォルトでは以下のボタンがあります:

+ + + +

以下のツールはデフォルトでツールバーに含まれていませんが、オプション で追加できます:

+ + + +

ツールボックスのコントロール

+ +

右端には以下のボタンが並んでいます:

+ + + +

設定

+ +

開発ツールのオプションについては、別個のページをご覧ください。

+ +

メインペイン

+ +

ツールボックスのメインペインの内容は選択されているツールに特有であり、またツールによって全面的に制御されます。

+ +

キーボードショートカット

+ +

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

+ +

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

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 +--- +
{{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/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 +--- +
{{ToolsSidebar}}
+ +

このドキュメントでは開発者がWeb  ページを検証するためのさまざまなリソースを一覧にしています。

+ +
この時点でサイドバータブは利用できません。
+チューンアップウィザードはリンクを解除して戻ります
+
+ +

すぐに検証されない新しいコードを書く場合は、利用可能な標準に準拠したオーサリングツールと開発ツールを参照してください。

+ +

Firefox Extensions for Validation

+ +

Quick Reference Sidebar Tabs

+ +

DevEdge Toolbox Sidebarsをインストールすると、Web開発リファレンスにすばやくアクセスできます。

+ +

Checky

+ +

Checky は Netscape または Mozilla のコンテキストメニューにサブメニューを追加します。これにより、(現在)18種類のオンラインバリデーションおよび分析サービスのいずれか利用しているものをページに対して実行できます。

+ +

アプリケーションとサービス

+ +

DevEdge Web Tune-Up Wizard

+ +

This interface to W3C services は、W3C標準をサポートするNetscape 7.x、Mozilla、その他のブラウザをサポートするためにコンテンツを更新するプロセスを通じて、初めから中間のWeb作者を導くものです。

+ +

W3C HTML Validator

+ +

W3C HTML Validator は、W3C HTML 標準に従ってすべての Web ページを検証します。独自の HTML と無効な HTML の使用を検出するのに非常に便利です。

+ +

W3C CSS Validator

+ +

W3C CSS Validator は、W3C CSS 標準に従って、任意の Web ページまたは外部 CSS ファイル内の CSS を検証します。

+ +

W3C RDF Validator

+ +

RDF Validator サービスは指定された URI に含まれる RDF/XML を検証します。

+ + + +

このツールは特定の Web ページ上のリンクをチェックします。

+ +

HTML Tidy

+ +

HTML Tidy は HTML ページのエラーを報告し、ウェブページをより読みやすくするために使用できるツールです。(HTML-Kit などの一部のオーサリングソフトウェアは HTML Tidy で構築されているため、検証が迅速かつ容易になります)。

+ +

HTML Validator Pro

+ +

これは、W3C と同じバリデーターを使用する自動 HTML5 チェッカーです。開始 URL を入力するとウェブサイト内のすべてのページが検索され、検証されます。

+ +

アクセシビリティサービス

+ +

Lynx Viewer

+ +

Lynx のビジュアライゼーションを使用して Web ページをチェックし、アクセシビリティ機能の検証を可能にするツールです。

+ +
+

原文情報

+ + +
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 +--- +
{{ToolsSidebar}}
+ +
 
+ +
+

注意：このツールは廃止予定であり、まもなくFirefoxから削除される予定です。 詳しくは、非推奨ツールを参照してください。

+
+ +

Web Audio API を使うとき、開発者は {{domxref ("AudioContext")}} を生成します。そのコンテキストでは、以下のようないくつもの {{domxref ("AudioNode")}} を構築します:

+ + + +

各々のノードは、ノードの動作を設定するために 0 個以上の {{domxref ("AudioParam")}} プロパティを持ちます。例えば {{domxref ("GainNode")}} は gain プロパティ 1 個を、また {{domxref ("OscillatorNode")}} は frequency プロパティおよび detune プロパティを持っています。

+ +

開発者はノードをグラフで接続して、完成したグラフがオーディオストリームの動作を定義します。

+ +

Web Audio エディターはページ内で構築したオーディオコンテキストを調査して、そのグラフを可視化します。これはグラフの動作について高レベルなビューを表示して、すべてのノードが想定どおりに接続されていることを確実にできます。そして、グラフ内の各ノードの AudioParam プロパティの調査や編集も可能です。OscillatorNode の type プロパティなど、AudioParam ではないプロパティの一部も、同様に表示や編集が可能です。

+ +

このツールはまだ試行段階です。バグを発見した場合は、Bugzilla で報告していただければ幸いです。フィードバックや新機能の提案がある場合は、dev-developer-tools または Twitter に登録してください。

+ +

Web Audio エディターを開く

+ +

Firefox 32 では、Web Audio エディターはデフォルトで無効化しています。開発ツールのオプション を開いて [Web Audio] にチェックを入れることで有効化できます。有効化すると、ツールボックスのツールバー に [Web Audio] という名前のタブが現れます。タブをクリックして、オーディオコンテキストを構築するページを読み込んでください。デモを 2 つ紹介します:

+ + + +

グラフの可視化

+ +

Web Audio エディターが、読み込まれたオーディオコンテキストのグラフを表示します。Violent Theremin のグラフを以下に示します:

+ +

+ +

ここでは 3 つのノードを使用していることがわかります。ソースとして {{domxref ("OscillatorNode")}}、ボリュームの制御に {{domxref ("GainNode")}}、出力先として {{domxref ("GainNode")}} です。

+ +

AudioParam への接続

+ +
+

AudioParam への接続の表示は、Firefox 34 の新機能です。

+
+ +

ノード間の接続は、実線で表示します。一方、あるノードと別のノードの AudioParam を接続 した場合は、その接続を破線で示して AudioParam の名称を表示します:

+ +

+ +

AudioNode の調査と変更

+ +

ノードをクリックすると強調表示して、右側にノード調査ツールを表示します。ここにはノードの AudioParam プロパティの値を一覧表示します。例えば、OscillatorNode がどのようになるかを示します:

+ +

+ +

Violent Theremin ではユーザーがマウスを左右に動かすのに応じてパラメーター frequency を変えており、それがノード調査ツールに反映されるのを確認できます。ただし、値はリアルタイムには更新されません。更新された値を確認するには、ノードを再度クリックしなければなりません。

+ +

ノード調査ツールで値をクリックすると、その値を変更できます。Enter または Tab を押下すると、変更後の値が直ちに反映されます。

+ +

ノードをバイパスする

+ +
+

Firefox 38 の新機能

+
+ +

ノードの詳細情報を表示するペインに、オン/オフボタンがあります:

+ +

+ +

このボタンをクリックするとノードを迂回するようにグラフが変更されますので、ノードの効果がなくなります。迂回されたノードは、背景に斜線が引かれます:

+ +

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 +--- +
{{ToolsSidebar}}

ウェブコンソールのほとんどは、メッセージ表示ペインが占めています:

+ +

+ +

それぞれのメッセージは、個別の行に表示します:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
時刻メッセージを記録した時刻です。これはデフォルトで表示しません。開発ツールのオプション で、タイムスタンプを表示するように設定できます。
カテゴリー +

メッセージの種類を示します:

+ +
    +
  • 黒色: ネットワークリクエスト
    • +
  • 青色: CSS の警告/エラー/ログ
    • +
  • 橙色: JavaScript の警告/エラー
    • +
  • 赤色: セキュリティの警告/エラー
    • +
  • 緑色: サーバーのログ
    • +
  • 薄い灰色: Console API のメッセージ
    • +
  • 濃い灰色: 対話式 コマンドラインインタープリター の入出力
    • +
+
タイプネットワークリクエストと対話式の入出力を除くすべてのメッセージにおいて、メッセージがエラー (X)、警告 (!)、ログ (i) のどれかを示すアイコンです。
メッセージメッセージ本文です。
発生回数警告やエラーを表す行が複数発生した場合はログを 1 回だけ記録して、何回発生したかを示すカウンターを表示します。
ファイル名と行番号 +

JavaScript、CSS、console API のメッセージでは、メッセージからコードの特定の行までたどることができます。コンソールはメッセージが発生したファイル名および行へのリンクを提供します。

+ +

Firefox 36 より、列番号も表示します。

+
+ +

デフォルトでは、新しいページに移動したり現在のページを再読み込みしたりするたびにコンソールの内容が消去されます。オプション で "ログ出力を残す" にチェックを入れると、この動作が変わります。

+ +

メッセージのカテゴリー

+ +

ネットワーク

+ +
+

ネットワークのログメッセージは、デフォルトで表示しません。ログを表示するには、フィルタリング機能を使用してください。

+
+ +

ネットワークリクエストは、以下のような行で記録されます:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
時刻メッセージを記録した時刻
カテゴリーメッセージが HTTP リクエストであることを示す
メソッド +

具体的な HTTP リクエストメソッド

+ +

XMLHttpRequest として実行したリクエストである場合は、それを示すマークをつけます:

+ +

+
URIターゲットの URI
サマリーHTTP バージョン、ステータスコード、完了までにかかった時間
+ +

ネットワークリクエストを詳しく確認する

+ +

メッセージをクリックすると ネットワークパネル に移動します。ネットワークパネルでは該当するリクエストを選択して、詳細なリクエストおよびレスポンスの情報を右側のパネルに表示します。Firefox 43 以前では、ポップアップウィンドウでこれらの情報表示します。

+ +

Firefox 48 より、これらの詳細情報の多くをウェブコンソールから離れることなくインラインで確認できます。ネットワークリクエストの項目の隣に、展開用の三角印があります。クリックすると以下の情報を表示します:

+ + + +

{{EmbedYouTube("cFlcWzJ9j4I")}}

+ +

JS

+ +

JavaScript のメッセージは以下のようなものです:

+ +

+ + + +
Firefox 49 の新機能
+ +

JavaScript のエラーには、問題を解決するための付加的なアドバイスを提供する JavaScript エラーリファレンス に案内する、"詳細" リンクがあります:

+ +

{{EmbedYouTube("OabJc2QR6o0")}}

+ +

ソースマップ

+ +
Firefox 55 の新機能
+ +

Firefox 55 より、ウェブコンソールが ソースマップ を理解します。つまり JavaScript のソースが圧縮されている場合に、ソースマップを与えることができます。ソース内でメッセージやエラーが発生すると、ウェブコンソールは非圧縮版の元のソースに基づいてそれらを表示します。

+ +

CSS

+ +
+

CSS の警告とリフローのメッセージは、デフォルトで表示しません。ログを表示するには、フィルタリング 機能を使用してください。

+
+ +

CSS のメッセージは以下のようなものです:

+ +

+ +

リフローイベント

+ +

ウェブコンソールは、CSS カテゴリーでリフローのイベントも記録します。リフローは、ブラウザーがページの全体あるいは一部分のレイアウトを計算する処理に与えられた名称です。レイアウトに影響があるとブラウザーが考えるような変化がページで起きたときに、リフローが発生します。以下に挙げるものを含めて、多くのイベントがリフローを発生させます: ブラウザーウィンドウのリサイズ、:hover のような疑似クラスのアクティブ化、JavaScript による DOM の操作。

+ +

リフローは計算負荷が高い場合があり、またユーザーインターフェイスに直接作用するため、ウェブサイトやウェブアプリの応答性に大きな影響を与えることがあります。ウェブコンソールはリフローイベントを記録することにより、リフローイベントが発生した時の実行にどれだけ時間がかかったか、またリフローが JavaScript によって発生された 同期リフロー である場合に、どのコードが発生させたかの情報を手供します。

+ +

リフローイベントは "リフロー" メッセージとして、CSS のエラーや警告とは別に記録されます。デフォルトでは、これは無効になっています。有効にするには ツールバー の "CSS" ボタンをクリックして、"リフロー" を選択してください。

+ +

各々のメッセージは "リフロー" というラベルがつき、リフローの実行にかかった時間を表示します:

+ +

リフローが JavaScript によって発生された同期リフローである場合は、リフローを発生させたコードの行へのリンクも表示します:

+ +

リンクをクリックすると、そのファイルを デバッガー で開きます。

+ +

同期リフローと非同期リフロー

+ +

現在のレイアウトを無効にする変更がなされる、例えばブラウザーのウィンドウをリサイズしたり、ある JavaScript が要素の CSS を変更したりしても、レイアウトが直ちに再計算されるわけではありません。代わりにリフローは非同期に、ブラウザーが必要と判断した時点 (通常、ブラウザーが次に再描画を行うとき) で実行します。この方法により、ブラウザーは無効化する変更点を蓄えておいて一度にそれらの影響を再計算することができます。

+ +

しかし、ある JavaScript コードが変更されたスタイルを読み取ると、ブラウザーは返す計算値を算出するために同期リフローを実行しなければなりません。例えば以下のようなコードでは、window.getComputedStyle(thing).height を呼び出したときに直ちに同期リフローが発生します:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

以前のスタイル書き込みによって無効化されたスタイルを読み取るたびに同期リフローを強いるため、DOM の操作中に要素のスタイルの読み書きを挟み込むことを避けるのはよいアイデアです。

+ +

セキュリティ

+ +

セキュリティの警告とエラーは以下のようなものです:

+ +

ウェブコンソールに表示されるセキュリティメッセージは、サイト内の潜在的あるいは実在の脆弱性を開発者が発見することを支援します。加えて、これらのメッセージの多くは開発者の教育に役立ちます。これは、背景に関する情報や問題を緩和するためのアドバイスを記載したページに案内する、"詳細" リンクが終わりにあるためです。

+ +

すべてのセキュリティメッセージの一覧を以下に掲載します:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
メッセージ詳細
混在アクティブコンテンツの読み込みをブロックしましたページに混在アクティブコンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーはスクリプトなどの "アクティブコンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこのアクティブコンテンツをブロックしました。詳しくは 混在コンテンツ をご覧ください。
混在表示コンテンツの読み込みをブロックしましたページに混在表示コンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーは画像などの "表示コンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこの表示コンテンツをブロックしました。詳しくは 混在コンテンツ をご覧ください。
安全なページ上で (安全でない) 混在アクティブコンテンツを読み込んでいますページに混在アクティブコンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーはスクリプトなどの "アクティブコンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこのアクティブコンテンツを読み込みました。詳しくは 混在コンテンツ をご覧ください。
安全なページ上で (安全でない) 混在表示コンテンツを読み込んでいますページに混在表示コンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーは画像などの "表示コンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこの表示コンテンツを読み込みました。詳しくは 混在コンテンツ をご覧ください。
サイトに X-Content-Security-Policy/Report-Only ヘッダーと Content-Security-Policy/Report-Only ヘッダーの両方が指定されています。X-Content-Security-Policy/Report-Only ヘッダーは無視されます。詳しくは Content Security Policy をご覧ください。
X-Content-Security-Policy ヘッダーと X-Content-Security-Report-Only ヘッダーは推奨されなくなります。代わりに CSP 仕様に準拠した構文の Content-Security-Policy ヘッダーと Content-Security-Report-Only ヘッダーを使用してください。詳しくは Content Security Policy をご覧ください。
パスワードフィールドが安全でない (http://) ページ上にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。ログインフォームを含むページは、HTTP ではなく HTTPS で提供しなければなりません。
パスワードフィールドが安全でない (http://) フォームアクションを持つフォーム要素内にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。パスワードフィールドを含むフォームは、HTTP ではなく HTTPS で送信しなければなりません。
パスワードフィールドが安全でない (http://) iframe 内にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。ログインフォームを含む iframe は、HTTP ではなく HTTPS で提供しなければなりません。
サイトに無効な Strict-Transport-Security ヘッダーが指定されています。詳しくは HTTP Strict Transport Security をご覧ください。
+

このサイトは SHA-1 証明書を利用しています。SHA-1 より強固なハッシュアルゴリズムを使用した証明書の利用をお勧めします。

+ 		+

SHA-1 アルゴリズムを署名で使用している証明書を、サイトで使用しています。

+ +

SHA-1 はまだ証明書で広く使用されていますが、陳腐化し始めています。ウェブサイトや認証局は将来、より強いハッシュアルゴリズムに切り替えることを推奨します。詳しくは Weak Signature Algorithm の記事をご覧ください。

+ +

サイト自体の証明書が SHA-1 証明書ではないとしても、サイトの証明書への署名に使用する認証局の証明書で SHA-1 を使用している場合がありますので注意してください。

+
+ +

Bug 863874 は、ウェブコンソールで適切なセキュリティメッセージを記録することに関するメタバグです。ここで議論されているような役に立つ機能のアイデアがある、あるいは貢献に興味がある場合は、メタバグとその依存関係を確認してください。

+ +

ロギング

+ +
+

Shared Worker、Service Worker、アドオン、ブラウザー Worker から発生したメッセージは、デフォルトで表示しません。ログを表示するには、フィルタリング 機能を使用してください。

+
+ +

ロギングカテゴリーには、Console API を使用して発生させたログが含まれます。
+

+ +

ウェブコンソールでは、以下の Console API のメッセージをサポートします:

+ + + +

コンソールは以下のように、すべてのエラーメッセージでスタックトレースを表示します:

+ +
function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();
+ +

+ +

サーバー

+ +
+

サーバーサイドのログメッセージは、Firefox 43で導入されましたが、Firefox 56で削除されました。この機能を(再度)使用するには Chrome Logger extension インストールしてください。

+
+ +

Chrome Logger extensionを使うと、サーバーから送信されたメッセージをウェブコンソールで表示できます。これにより、サーバーサイドのコードのデバッグにウェブコンソールを使用できます。

+ +

これは、Chrome Logger プロトコルを使用します。手短に言えば、仕組みは以下のとおりです:

+ + + +

サーバー側のコードに適したライブラリーを探すには、Chrome Logger のドキュメント をご覧ください。

+ +

コマンドラインの入力/出力

+ +

ウェブコンソールのコマンドライン を使用してブラウザーに送信したコマンドとそれに対する応答は、以下のような行で記録されます:

+ +

濃い灰色のバーは入力/出力メッセージであることを表し、また三角印の向きで入力と出力を区別します。

+ +

フィルタリングと検索

+ +

カテゴリーでフィルタリング

+ +

上段のツールバーで、表示する結果を制限できます。

+ +

カテゴリー名 ("ネットワーク"、"CSS" など) が記載されたボタンをクリックすると、特定の種類のメッセージのみ表示することができます。ボタン本体をクリックすると、そのカテゴリー全体のオン/オフを切り替えます。また右側の矢印部分をクリックすると、より細かいフィルタリング方法を表示します。

+ + + +

文字列でフィルタリング

+ +

"出力を絞り込み" と表示されているテキストボックスに文字列を入力すると、その文字列を含むメッセージのみ表示します。

+ +

ログを消去する

+ +

最後に、このツールバーでログを消去することもできます。Firefox 48 より前のバージョンでは、ツールバーの右側にある "消去" ボタンです。Firefox 48 以降では、左側にあるゴミ箱のアイコンです。

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

{{ToolsSidebar}}

+ +

コマンド

+ +

ウェブコンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。

+ +
+
$(selector, element)
+
+

CSS セレクタ文字列 selector を検索し、一致する element の子孫ノードを返します。未指定の場合、element のデフォルトは document です。{{ domxref("document.querySelector()") }} と同等で、ページ内に $ 関数が存在する場合はそれを呼び出します。

+ +

QuerySelector コードスニペット参照してください。

+
+
$$(selector, element)
+
CSS セレクタ文字列 selector を検索し、一致する element の子孫である DOM ノードの配列を返します。未指定の場合、element のデフォルトは document です。これは {{ domxref("document.querySelectorAll()") }} と似ていますが、{{ domxref("NodeList") }} ではなく配列を返します。
+
$0
+
ページ内で現在調査されている要素です。
+
$_
+
コンソールのコマンドラインで最後に実行した式の結果を保持します。例えば "2+2 <enter>" と入力した後に "$_ <enter>" と入力すると、コンソールは 4 と出力します。
+
$x(xpath, element, resultType)
+
element のコンテキストで XPath xpath 式を評価し、一致するノードの配列を返します。 未指定の場合、element のデフォルトは document です。resultTypeには戻り値の型を指定します。取りうる値は XPathResult定数か "number"、 "string"、 "bool"、 "node"、 "nodes" のいずれかです。指定されなかった場合、 ANY_TYPE になります。
+
keys()
+
オブジェクトを与えると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは Object.keys のショートカットです。
+
values()
+
オブジェクトを与えると、そのオブジェクトの値の一覧を返します。これは keys() と対をなすものです。
+
clear()
+
コンソールの出力エリアをクリアします。
+
inspect()
+
オブジェクトを与えると、そのオブジェクトのオブジェクトインスペクターを開きます。
+
pprint()
+
指定された値を、読みやすい形式に整形します。これはオブジェクトや配列の内容をダンプするのに役立ちます。
+
help(){{Deprecated_Inline(62)}}
+ :help{{Gecko_MinVersion_Inline(62)}}
+
ヘルプテキストを表示します。 実のところ、再びこのページに移動するという愉快な挙動を示します。
+
cd()
+
+

JavaScript の評価を行うコンテキストを、ページ内の別の iframe に切り替えます。このコマンドは切り替え先のフレームを識別するための、さまざまな方法を受け入れます。以下のいずれかを与えることができます:

+ +
    +
  • iframe 要素を特定するため、document.querySelector に渡すセレクター文字列
    • +
  • iframe 要素自体
    • +
  • iframe 内部の content window
    • +
+ +

iframe での作業 をご覧ください。

+
+
copy()
+
Firefox 38 の新機能。 引数で指定したものをクリップボードにコピーします。引数が文字列である場合は、そのままコピーします。また引数が DOM ノードである場合は、ノードの outerHTML をコピーします。他の値である場合は引数に対して JSON.stringify を呼び出して、その結果をコピーします。
+
clearHistory()
+
Firefox 39 の新機能。一般的なコマンドラインと同様に、コンソールのコマンドラインも 過去に入力したコマンドを覚えています。この関数を実行すると、コンソールのコマンドラインの履歴を消去します。
+
:screenshot
+
提供されたファイル名で現在のページのスクリーンショットを作成します。ファイル名を指定しない場合、画像ファイルの名前は次のようになります。
+
+ Screen Shot yyy-mm-dd at hh.mm.ss.png
+
+ このコマンドには、次のオプションのパラメータがあります。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コマンド型説明
--clipboardbooleanこのパラメータがある場合は、スクリーンショットがクリップボードにコピーされます。
--delaynumberスクリーンショットを撮るまでに遅らせる秒数。
--dprnumberスクリーンショットを撮るときに使用するデバイスのピクセル比率。
--filebooleanこれがある場合、他のオプション (--clipboard など) が含まれていても、スクリーンショットはファイルに保存されます。
--filenamestringファイルの保存に使用する名前。ファイルの拡張子は ".png" にする必要があります。
--fullpagebooleanこれがある場合は、Web ページ全体が保存されます。このパラメータを使用すると、ウィンドウの現在の範囲外にある Web ページの部分であってもスクリーンショットに含まれます。使用したときは、ファイル名に "-fullpage" が追加されます。
--selectorstringページ上の単一要素の CSS クエリーセレクタ。これが渡されると、この要素のみがスクリーンショットに含まれます。
+
+
+ +

コンテンツからログを出力する機能について、詳しくは Console API をご覧ください。

+ +

変数

+ +
+
tempN
+
インスペクターの "コンソールで使う" は、参照しているノードを表す変数 temp0、temp1、temp2 などを生成します。
+
+ +

例

+ +

DOM ノードの内容を閲覧する

+ +

例えば、ID 値 "title" を持つ DOM ノードがあるとします。実際は、今見ているこのページに該当する DOM ノードがありますので、ここでウェブコンソールを開いて試してみることができます。

+ +

$() および inspect() を用いて、ノードのコンテンツを確認してみましょう:

+ +
inspect($("#title"))
+ +

自動的にオブジェクトインスペクターが開き、CSS セレクター "#title" にマッチする DOM ノードの内容を表示します。もちろんそれは、ID が "title" である要素です。

+ +

DOM ノードの内容をダンプする

+ +

これは、あなたがブラウザー上で起きている問題を調査することになり、ユーザーのために遠隔地でデバッグを行うことや、ノードの内容を閲覧する必要があるような場合に役立ちます。ユーザーにウェブコンソールを開いてもらい、pprint() を用いてノードの内容をログにダンプし、その出力結果をメールにコピー & 貼り付けして送付してもらうことができます:

+ +
pprint($("#title"))
+ +

これはノードの内容を読みやすい形式で出力します。もちろん、このコマンドは DOM ノード以外のオブジェクトに対しても役に立ちますので、アイデアを考えてみてください。

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 +--- +
{{ToolsSidebar}}
+ +

Webコンソールとは:

+ +
    +
  1. ウェブページに関する情報、ネットワークリクエスト、JavaScript、CSS、セキュリティのエラーや警告のほか、ページ内で実行されている JavaScript コードによって記録されたエラー、警告、情報メッセージを記録できます。
    2. +
  2. ページコンテキスト内で JavaScript の式を実行することにより、ウェブページと対話できます。
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Webコンソールを開く
+
Webコンソールを開く方法です。
+
コマンドラインインタープリター
+
コンソールを使用してドキュメントと対話する方法です。
+
コンソールの分割
+
コンソールを別のツールと並べて使用します。
+
+
+ +
+
+
コンソールのメッセージ
+
コンソールが記録するメッセージを詳しく説明します。
+
高度な出力
+
コンソールが記録したオブジェクトを確認して対話する方法です。
+
キーボードショートカット
+
ショートカットのリファレンスです。
+
+
+
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 +--- +
{{ToolsSidebar}}

{{Page ("ja/docs/tools/Keyboard_shortcuts", "web-console")}}

+ +

共通ショートカット

+ +

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

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 +--- +
{{ToolsSidebar}}
+ +

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

+ + + +

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

+ +

+ +

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

+ + 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 +--- +
{{ToolsSidebar}}
+ +

イントロダクション

+ +

このドキュメントでは、Webコンソールのリモート処理のしくみについて説明します。Webコンソールはユーザーインターフェイスを備えたクライアントと、タブ内で発生するすべてのもののリスナーを持つサーバーに分割されています。サーバーとクライアント間の通信には、リモートデバッグプロトコルを使用します。このアーキテクチャでは、WebコンソールクライアントインスタンスをB2G、Fennecまたはその他のFirefoxインスタンス上で動作するサーバーに接続できます。

+ +

Webコンソールのアーキテクチャをよりよく理解するために、デバッガのアーキテクチャについて学ぶことをお勧めします。

+ +
+

リモートWebコンソールは、Firefox 18で導入された機能です。このドキュメントでは、最新のプロトコルについて説明しています。

+
+ +

WebConsoleActor と WebConsoleClient

+ +

WebConsoleActor は、toolkit/devtools/webconsole フォルダの dbg-webconsole-actors.js にあります。

+ +

WebConsoleClient は (toolkit/devtools/webconsole の) WebConsoleClient.jsm にあり、Web コンソールアクターで作業するときにWeb コンソールで使用されます。

+ +

デバッガが Web コンソールコードでどのように使用されているかを確認するには、browser/devtools/webconsole/webconsole.js を開き、WebConsoleConnectionProxy を検索します。

+ +

新しい Web コンソールアクターは次のとおりです。

+ + + +

WebConsoleActor に接続するには、次の手順を実行します。

+ +
connectToServer() // the usual
+listTabs()
+pickTheTabYouWant()
+debuggerClient.attachConsole(tab.consoleActor, listeners, onAttachConsole)
+
+ +

listeners 引数は、Web コンソールで開始するリスナーを指定する配列です。ページエラー、window.console API メッセージ、ネットワークアクティビティ、ファイルアクティビティなどがあります。例えば：

+ +
["PageError", "ConsoleAPI", "NetworkActivity", "FileActivity"]
+ +
+

Webコンソールアクタはデフォルトではリスナーを起動しません。クライアントには、必要なときに各リスナーを起動するオプションがあります。この方法で、サーバーでのリソース使用率を低く抑えることができます。これは、サーバーが少ないリソースでデバイスを実行する場合に起こりうる問題です。

+
+ +

onAttachConsole コールバックは WebConsoleClient オブジェクトの新しいインスタンスを受け取ります。このオブジェクトは startListeners()、stopListeners() などのプロトコルパケットを抽象化するメソッドを提供します。

+ +

プロトコルパケットは次のようになります。

+ +
{
+  "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"
+    },
+// ...
+  ]
+}
+
+ +

consoleActor はグローバルアクターとしても利用可能であることに注意してください。グローバル consoleActor にアタッチすると、すべてのネットワークリクエスト、ページエラー、およびその他のイベント (クロムエラーやネットワークイベントなど) がすべてのタブとウィンドウから受信されます。このアクターはブラウザコンソールの実装や、リモート Firefox/B2G インスタンスのデバッグに使用されます。

+ +

startListeners(listeners, onResponse)

+ +

新しい startListeners パケット：

+ +
{
+  "to": "conn0.console9",
+  "type": "startListeners",
+  "listeners": [
+    "PageError",
+    "ConsoleAPI",
+    "NetworkActivity",
+    "FileActivity"
+  ]
+}
+
+ +

返答：

+ +
{
+  "startedListeners": [
+    "PageError",
+    "ConsoleAPI",
+    "NetworkActivity",
+    "FileActivity"
+  ],
+  "nativeConsoleAPI": true,
+  "from": "conn0.console9"
+}
+
+ +

レスポンスは開始されたリスナーを示し、window.console オブジェクトがページ内のスクリプトによってオーバーライドされたかどうかを示す nativeConsoleAPI フラグを含みます。

+ +

タブナビゲーション

+ +

タブナビゲーションイベントを待ち受けるには、指定したタブのタブアクターにアタッチする必要もあります。tabNavigated 通知はタブのアクターから来ます。

+ +
+

Firefox 20 以前では、Web コンソールの実行者はLocationChangeリスナを提供し、locationChanged 通知を関連付けました。これはもはや当てはまりません。Web コンソールクライアントが tabNavigated 通知を再利用 (bug 792062) できるように変更しました。

+
+ +

ページナビゲーションが開始されると、次のパケットがタブアクターから送信されます。

+ +
{
+  "from": tabActor,
+  "type": "tabNavigated",
+  "state": "start",
+  "url": newURL,
+  "nativeConsoleAPI": true
+}
+
+ +

nativeConsoleAPI プロパティは、window.console オブジェクトがネイティブかどうかを、指定されたタブのトップレベルウィンドウオブジェクトに対して示します。これは、ナビゲーションが開始されると常に true になります。ナビゲーションが停止すると、次のパケットが送信されます。

+ +
{
+  "from": tabActor,
+  "type": "tabNavigated",
+  "state": "stop",
+  "url": newURL,
+  "title": newTitle,
+  "nativeConsoleAPI": true|false
+}
+ +

getCachedMessages(types, onResponse)

+ +

webConsoleClient.getCachedMessages(types, onResponse) メソッドは、次のパケットをサーバーに送信します。

+ +
{
+  "to": "conn0.console9",
+  "type": "getCachedMessages",
+  "messageTypes": [
+    "PageError",
+    "ConsoleAPI"
+  ]
+}
+
+ +

getCachedMessages パケットを使用すると、Web コンソールを開く前にキャッシュされたメッセージを取得できます。 ページエラーとコンソール API 呼び出しのキャッシュメッセージしか取得できません。 返信は次のようになります。

+ +
{
+  "messages": [ ... ],
+  "from": "conn0.console9"
+}
+
+ +

配列内の各メッセージは、典型的なページエラーやコンソール API コールを送信するときと同じタイプです。これらについては、本書の以下のセクションで説明します。

+ +

アクター設定

+ +

Web コンソールが実行中にログオプションを設定できるように、setPreferencesパケットを追加しました。

+ +
{
+  "to": "conn0.console9",
+  "type": "setPreferences",
+  "preferences": {
+    "NetworkMonitor.saveRequestAndResponseBodies": false
+  }
+}
+
+ +

返答:

+ +
{
+  "updated": [
+    "NetworkMonitor.saveRequestAndResponseBodies"
+  ],
+  "from": "conn0.console10"
+}
+
+ +

便宜上 webConsoleClient.setPreferences(prefs, onResponse)を使用できます。prefs 引数は { prefName: prefValue, ... } のようなオブジェクトです。

+ +

Firefox 25 では getPreferences リクエストパケットが追加されました：

+ +
{
+  "to": "conn0.console34",
+  "type": "getPreferences",
+  "preferences": [
+    "NetworkMonitor.saveRequestAndResponseBodies"
+  ]
+}
+
+ +

返答パケット：

+ +
{
+  "preferences": {
+    "NetworkMonitor.saveRequestAndResponseBodies": false
+  },
+  "from": "conn0.console34"
+}
+
+ +

webConsoleClient.getPreferences(prefs, onResponse) を使用することもできます。prefs 引数は、名前で値を取得したい設定の配列です。

+ +

プライベートブラウジング

+ +

ブラウザコンソールは、ユーザーがプライベートウィンドウを開いているときに使用できます。各ページエラー、コンソール API メッセージ、およびネットワークリクエストにはプライベートフラグが付いています。プライベートメッセージは、最後のプライベートウィンドウが閉じられるたびにクリアされます。コンソールアクタは lastPrivateContextExited 通知を提供します。

+ +
{
+  "from": "conn0.console19",
+  "type": "lastPrivateContextExited"
+}
+
+ +

この通知はクライアントがグローバルコンソールアクターに接続されている場合にのみ送信され、タブコンソールアクターには意味をなしません。

+ +
+

この通知は Firefox 24 で導入されました。

+
+ +

HTTP リクエストの送信

+ +

Firefox 25 から、コンソールアクタを使用して HTTP リクエストを送信することができます：

+ +
{
+  "to": "conn0.console9",
+  "type": "sendHTTPRequest",
+  "request": {
+    "url": "http://localhost",
+    "method": "GET",
+    "headers": [
+      {
+        name: "Header-name",
+        value: "header value",
+      },
+      // ...
+    ],
+  },
+}
+
+ +

レスポンスパケットは、ネットワークイベントアクターグリップです。

+ +
{
+  "to": "conn0.console9",
+  "eventActor": {
+    "actor": "conn0.netEvent14",
+    "startedDateTime": "2013-08-26T19:50:03.699Z",
+    "url": "http://localhost",
+    "method": "GET"
+    "isXHR": true,
+    "private": false
+  }
+}
+
+ +

webConsoleClient.sendHTTPRequest(request, onResponse) メソッドを使用することもできます。request 引数は上記のリクエストパケットの request オブジェクトと同じです。

+ +

ページエラー

+ +

ページエラーは nsIConsoleService から発生します。許可される各ページエラーは nsIScriptError オブジェクトです。

+ +

pageError パケットは次のとおりです。

+ +
{
+  "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,
+  }
+}
+
+ +

単純化のため、パケットは nsIScriptError に似ています。いくつかの不必要なプロパティを削除し、フラグの働きを変更しました。

+ +

private フラグは、エラーがプライベートウィンドウ/タブ (Firefox 24で追加されたもの) から来たものかどうかを示します。

+ +

Firefox 24 以降、文字列が非常に長い場合、errorMessage および lineText プロパティは長い文字列アクターグリップになることがあります。

+ +

Console API メッセージ

+ +

window.console API 呼び出しは、Gecko を通して内部メッセージを送信します。これにより、各呼び出しに必要な処理を実行できます。Web コンソールのアクターは、これらのメッセージをリモートデバッグクライアントに送信します。

+ +

dbg-script-actors.js の ObjectActor を ThreadActor なしで使用すると、ページスクリプトの速度低下を避けることができます。デバッガはターゲットページで JavaScript の実行を非最適化します。Web コンソールのオブジェクトアクタの有効期間は、デバッガ内のこれらのオブジェクトの存続期間とは異なります。通常、一時停止またはスレッドごとです。 Web コンソールは ObjectActors の有効期間を手動で管理します。

+ +
+

Firefox 23以前は、プロトコルを通じてJavaScriptオブジェクトを操作するために、別のアクタ(WebConsoleObjectActor)を使用しました。bug 783499では、デバッガからObjectActorを再利用するためにいくつかの変更を行いました。

+
+ +

コンソール API メッセージは nsIObserverService を経由します。コンソールオブジェクトの実装は dom/base/ConsoleAPI.js にあります。

+ +

サーバーで受信したコンソールメッセージごとに、次の consoleAPICall パケットをクライアントに送信します。

+ +
{
+  "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" }
+    ]
+  }
+}
+
+ +

ページエラーを送信する方法と同様に、ここでは nsIObserverService から受信した実際のコンソールイベントを送信します。arguments の配列を変更します - 引数として渡される各オブジェクトの ObjectActor インスタンスを作成し、最後に不要なプロパティ (ウィンドウIDなど) を削除します。長い文字列の場合、LongStringActor を使用します。Web コンソールは引き数を検査できます。

+ +

private フラグは、コンソール API 呼び出しがプライベートウィンドウ/タブ (Firefox 24 で追加されたもの) から来ているかどうかを示します。

+ +

オブザーバーサービスから受け取ったコンソールイベントオブジェクトには小さな違いがあるように、コンソール API 呼び出しメソッドに応じて、オブジェクトの小さなバリエーションがあります。これらの相違点を確認するには、コンソール API 実装の dom/base/ConsoleAPI.js を参照してください。

+ +

JavaScript 評価

+ +

evaluateJS リクエストとレスポンスパケット

+ +

Web コンソールクライアントは evaluateJS(requestId, string, onResponse) メソッドを提供し、次のパケットを送信します。

+ +
{
+  "to": "conn0.console9",
+  "type": "evaluateJS",
+  "text": "document",
+  "bindObjectActor": null,
+  "frameActor": null,
+  "url": null,
+  "selectedNodeActor": null,
+}
+
+ +

bindObjectActor プロパティは、Debugger.Object を指すオプションの ObjectActor IDです。このオプションを使用すると、文字列の評価中に _self を指定されたオブジェクトアクターの Debugger.Object にバインドできます。バインディングについては evalInGlobalWithBindings() を参照してください。

+ +
+

変数ビューはオブジェクトを更新する必要があり、表示されているObjectActorのDebugger.Objectに_selfをバインドすることによってオブジェクトを更新する必要があります。 そのため、変数ビューは評価のために次のような文字列を送信します。

+ +
  _self["prop"] = value;
+
+
+ +

frameActor プロパティは、オプションの FrameActor IDです。FAは Debugger.Frame への参照を保持します。このオプションを使用すると指定された FA のフレーム内の文字列を評価できます。

+ +

url プロパティはスクリプトを評価するためのオプションの URL です(Firefox 25 の新機能)。評価のためのデフォルトのソース URL は "debugger eval code" です。

+ +

selectedNodeActor プロパティはオプションの NodeActor ID であり、Inspector で現在選択されているノードがある場合はそのノードを示すために使用されます。この NodeActor は $0 JSTerm ヘルパーによって参照できます。

+ +

レスポンスパケット：

+ +
{
+  "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
+}
+
+ + + +
+

Firefox 23では、プロトコルエラーが発生したときに使用されるデフォルトプロパティとの競合を避けるために、errorおよびerrorMessageプロパティの名前をそれぞれexceptionおよびexceptionMessageに変更しました。

+
+ +

Autocomplete など

+ +

autocomplete リクエストパケット:

+ +
{
+  "to": "conn0.console9",
+  "type": "autocomplete",
+  "text": "d",
+  "cursor": 1
+}
+
+ +

レスポンスパケット:

+ +
{
+  "from": "conn0.console9",
+  "matches": [
+    "decodeURI",
+    "decodeURIComponent",
+    "defaultStatus",
+    "devicePixelRatio",
+    "disableExternalCapture",
+    "dispatchEvent",
+    "doMyXHR",
+    "document",
+    "dump"
+  ],
+  "matchProp": "d"
+}
+
+ +

また、レスポンスがない clearMessagesCache リクエストパケットもあります。これにより、コンソール API コールキャッシュがクリアされ、ページエラーキャッシュがクリアされるはずです。バグ 717611 を参照してください。

+ +

ネットワークロギング

+ +

networkEvent パケット

+ +

新しいネットワークリクエストがログに記録されるたびに networkEvent パケットが送信されます。

+ +
{
+  "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
+  }
+}
+
+ +

このパケットは Web コンソールに新しいネットワークイベントを通知するために使用されます。リクエストごとに新しい NetworkEventActor インスタンスが作成されます。isXHR フラグはリクエストが XMLHttpRequest インスタンスを介して開始されたかどうかを示します。つまり、nsIHttpChannel の通知は nsIXMLHttpRequest インターフェイスです。

+ +

private フラグは、ネットワークリクエストがプライベートウィンドウ/タブ (Firefox 24 で追加されたもの) から来たものかどうかを示します。

+ +

NetworkEventActor

+ +

新しいネットワークイベントアクターは、さらにリクエストおよびレスポンス情報を格納します。

+ +

networkEventUpdate パケット

+ +

変更が発生したとき、新しいものが追加されたときに Web コンソール UI を最新の状態に保つ必要があります。この目的のために新しい networkEventUpdate パケットが送信されます。例：

+ +
{
+  "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
+}
+
+ +

実際のヘッダー、Cookie、および本文は送信されません。

+ +

getRequestHeaders とその他のパケット

+ +

ネットワークイベントの詳細については、次のパケットリクエスト (およびレスポンス) を使用できます。

+ +

getRequestHeaders パケット:

+ +
{
+  "to": "conn0.netEvent15",
+  "type": "getRequestHeaders"
+}
+{
+  "from": "conn0.netEvent15",
+  "headers": [
+    {
+      "name": "Host",
+      "value": "localhost"
+    }, ...
+  ],
+  "headersSize": 350
+}
+
+ +

getRequestCookies パケット:

+ +
{
+  "to": "conn0.netEvent15",
+  "type": "getRequestCookies"
+}
+{
+  "from": "conn0.netEvent15",
+  "cookies": []
+}
+
+ +

getResponseHeaders パケット:

+ +
{
+  "to": "conn0.netEvent15",
+  "type": "getResponseHeaders"
+}
+{
+  "from": "conn0.netEvent15",
+  "headers": [
+    {
+      "name": "Date",
+      "value": "Mon, 17 Sep 2012 20:05:27 GMT"
+    }, ...
+  ],
+  "headersSize": 320
+}
+
+ +

getResponseCookies パケット:

+ +
{
+  "to": "conn0.netEvent15",
+  "type": "getResponseCookies"
+}
+{
+  "from": "conn0.netEvent15",
+  "cookies": []
+}
+
+ +
+

Firefox19より提供開始：上記のパケットのすべてのヘッダーとCookieの値に対して、値が非常に長い場合はLongStringActor gripsを使用します。 これにより、ネットワーク帯域幅の使い過ぎを避けることができます。

+
+ +

getRequestPostData パケット:

+ +
{
+  "to": "conn0.netEvent15",
+  "type": "getRequestPostData"
+}
+{
+  "from": "conn0.netEvent15",
+  "postData": { text: "foobar" },
+  "postDataDiscarded": false
+}
+ +

getResponseContent パケット:

+ +
{
+  "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
+}
+
+ +

リクエストとレスポンスの内容のテキスト値は、LongStringActorグリップを使用して最も一般的に送信されます。 非常に短いリクエスト/レスポンスのボディについては、生のテキストを送信します。

+ +
+

Firefox19から：非テキストレスポンスタイプの場合、Base64エンコーディング（これはおそらくLongStringActorグリップです）でコンテンツを送信します。違いを伝えるには、response.content.encoding == "base64"かどうかを確認してください。

+
+ +

getEventTimings パケット:

+ +
{
+  "to": "conn0.netEvent15",
+  "type": "getEventTimings"
+}
+{
+  "from": "conn0.netEvent15",
+  "timings": {
+    "blocked": 0,
+    "dns": 0,
+    "connect": 0,
+    "send": 0,
+    "wait": 16,
+    "receive": 0
+  },
+  "totalTime": 16
+}
+
+ +

fileActivity パケット

+ +

ファイルのロードが監視されると、次の fileActivity パケットがクライアントに送信されます。

+ +
{
+  "from": "conn0.console9",
+  "type": "fileActivity",
+  "uri": "file:///home/mihai/public_html/mozilla/test2.css"
+}
+
+ +

ヒストリー

+ +

Firefoxバージョンによるプロトコルの変更：

+ + + +

まとめ

+ +

この文書の執筆時点では、この文書は バグ 768096 で行った作業とそれに続く変更をまとめたものです。このドキュメントを最新の状態に保つよう努めています。これがあなたの役立つことを願っています。

+ +

Webコンソールサーバーを変更する場合は、このドキュメントを更新してください。 ありがとうございました！

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 +--- +
{{ToolsSidebar}}

ウェブコンソールでオブジェクトを出力する際は、オブジェクト名だけでなく、より高度な情報も表示します。特に、以下のような情報です:

+ + + +

型に固有の高度な出力

+ +

ウェブコンソールでは以下のように、さまざまなオブジェクト型について高度な情報を提供します:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object
Array
Date
Promise +
+

Firefox 36 の新機能

+
+ +

+
RegExp
Window
Document
Element
Event
+ +

オブジェクトのプロパティを調査

+ +

オブジェクトをコンソールに出力すると、斜体で表示します。それをクリックすると、オブジェクトの詳細情報を表示している新たなパネルが現れます:

+ +

Esc を押下すると、このパネルを閉じます。

+ +

DOM ノードのハイライト表示と調査

+ +

コンソールに出力された DOM 要素にマウスポインターを乗せると、そのノードをページ上でハイライト表示します:

+ +

上のスクリーンショットでは、コンソールの出力領域でノードの隣に "標的" のアイコンがあります。このアイコンをクリックすると、そのノードを選択した インスペクター に切り替わります。

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 +--- +
{{ToolsSidebar}}
+ +

コンソールを別のツールと並べて使用できます。ツールボックスで別のツールを使用しているときに Esc キーまたは ツールバー の "コンソールの常時表示を切り替えます" ボタンを押下してください。ツールボックスが分割表示されて元のツールが上段、ウェブコンソールが下段に表示されます。

+ +

 

+ +

Esc をもう一度押すか、「スプリットコンソールを隠す」メニューコマンドを選択して、スプリットコンソールを閉じることができます。

+ +

+ +

 

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

通常のコンソールと同様に、$0 はインスペクターで選択している要素のショートハンドとして働きます:

+ +

+ +

デバッガでスプリットコンソールを使用するとき、コンソールのスコープは現在実行中のスタックフレームになります。よって関数内でブレークポイントに当たった場合、コンソールのスコープは関数のスコープになります。関数内で定義したオブジェクトのオートコンプリートが可能であり、実行中にそれらを簡単に変更できます:

+ +

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

{{ToolsSidebar}}

+ +

ウェブコンソールのコマンドラインで、JavaScript の構文を即座に評価することができます。

+ +

+ +

式を入力する

+ +

式の入力方法は、コマンドラインに入力して Enter を押下するだけです。複数行の式を入力する場合は、Enter の代わりに Shift+Enter を使用します。

+ +

入力した式をメッセージ表示ウィンドウにエコー出力して、その後に結果を出力します:

+ +

+ +
Firefox 47 の新機能
+ +

Firefox 47 より、Enter を押下したときに入力が完了していないと思われる場合は、Shift+Enter として扱い、入力を完了できるようになりました。

+ +

例えば、以下のように入力します:

+ +
function foo() {
+ +

そして Enter を押下すると、コンソールは直ちに入力内容を実行せずに Shift+Enter を押下したかのように動作しますので、関数定義の入力を完了できます。

+ +

変数にアクセスする

+ +

ページで定義している変数にアクセスすることができ、window のように組み込み済みの変数と jQuery のように JavaScript で追加した変数のどちらでも可能です:

+ +

+ +

オートコンプリート

+ +

コマンドラインにオートコンプリート機能があります。最初の数文字を入力すると、考えられる完成形を示すポップアップを表示します:

+ +

候補を受け入れるには Enter または Tab を押下します。また上/下矢印キーで別の候補へ移動できます。どの候補も望まない場合は入力を続けてください。

+ +

コンソールは、現在実行中のスタックフレームのスコープから候補を提示します。これにより関数内でブレークポイントに当たった場合は、関数内のローカルオブジェクトもオートコンプリートの対象になります。

+ +

配列要素向けのオートコンプリート候補も表示します:

+ +

+ +

変数を定義する

+ +

独自の変数を定義したり、その変数にアクセスしたりできます:

+ +

+ +

コマンド履歴

+ +

コマンドラインは、あなたが入力したコマンドを覚えています: 上下矢印キーで、履歴を行き来できます。

+ +

Firefox 39 より、この履歴はセッションをまたいで維持するようになりました。履歴をクリアするには、clearHistory() 支援コマンド を使用してください。

+ +

iframe で作業する

+ +

ページに インラインフレーム を埋め込んでいる場合は、cd() コマンドで特定のインラインフレームにコンソールのスコープを切り替えることができます。また、インラインフレームで表示しているドキュメントで定義した関数を実行できます。cd() でインラインフレームを選択する方法は 3 通りあります:

+ +

インラインフレームの DOM 要素を渡すことができます:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

インラインフレームにマッチする CSS セレクターを渡すことができます:

+ +
cd("#frame1");
+ +

インラインフレームの window グローバルオブジェクトを渡すことができます:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

トップレベルの window にコンテキストを戻す場合は、引数を与えずに cd() を呼び出してください:

+ +
cd();
+ +

例えば、インラインフレームを埋め込んだドキュメントがあるものとします:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

インラインフレームで新たな関数を定義しています:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

以下のようにしてコンテキストをインラインフレームに切り替えることができます:

+ +
cd("#frame1");
+ +

グローバル window の document がインラインフレームであることがわかります:

+ +

また、インラインフレーム内で定義した関数を呼び出すことができます:

+ +

+ +

支援コマンド

+ +

{{page("/ja/Using_the_Web_Console/Helpers", "The commands")}}

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 +--- +
{{ToolsSidebar}}
+ +
+

WebIDEでは、Android 版 Firefox や Android 版 Chrome 、iOS 版 Safari といったさまざまなブラウザに、Firefox の開発ツールを接続できます。各ブラウザに接続する手順については、リモートデバッグのページをご覧ください。

+
+ +

WebIDE では、始めに 1 つ以上のランタイムをセットアップします。ランタイムは、アプリの実行やデバッグを行う環境です。ランタイムは USB (Firefox 39 以降では Wi-Fi も可能) でパソコンに接続した Firefox OS デバイスか、パソコン自体にインストールした Firefox OS シミュレータを使用できます。

+ +

次に、アプリを作成するか既存のアプリを開きます。アプリを新規作成する場合は、アプリを作り始めるのに必要なディレクトリ構造や最小限の標準モデルを収めたテンプレートか、Privileged API を使用する方法を示す、より充実したテンプレートを使用できます。WebIDE はアプリ内のファイルをツリーに表示します。また内蔵のソースエディタでそれらの編集や保存が可能です。もちろん、内蔵のエディタを使用しないことも可能です。アプリの開発は WebIDE の外部で行い、デバッグにのみ WebIDE を使用できます。

+ +

そして、アプリをいずれかのランタイムにインストールして実行できます。また実行中のアプリを調査または変更するためにインスペクタ、コンソール、JavaScript デバッガなどの開発ツール一式を開くことができます。

+ +
+
+
WebIDE を開く
+
Firefox で WebIDE を開く方法を説明します。
+
ランタイムのセットアップ
+
Firefox OS デバイス、Firefox OS シミュレータ、Android 版 Firefox といった、アプリのインストールが可能なランタイムに接続する方法を説明します。
+
アプリの作成と編集
+
WebIDE を使用してアプリを作成し、開いて、開発する方法を説明します。
+
ランタイムメニュー
+
ランタイムを選択するとランタイムメニューを使用して、ランタイムやアプリの情報を確認したり、設定を変更したり、スクリーンショットを取得することができます。
+
アプリの実行とデバッグ
+
アプリをランタイムにインストールする方法や、Firefox の開発ツールを使用してデバッグする方法を説明します。
+
WebIDE で Cordova アプリを扱う
+
Firefox 39 より、WebIDE で Cordova アプリの編集やデバッグが可能になりました。
+
トラブルシューティング
+
WebIDE のトラブル、特にランタイムとの接続に関するトラブルのヘルプです。
+
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 +--- +
{{ToolsSidebar}}
+

WebIDE のモニタは、Firefox OS アプリや端末のパフォーマンスの追跡を支援するように設計された汎用データツールです。

+
+ +

The WebIDE Monitor

+ +

モニタは時系列を可視化するため、リアルタイムにインタラクティブなグラフを表示できます。

+ +

使用可能なグラフ

+ +

モニタは、さまざまなグラフを提供します。これらは通常、WebIDE を Firefox OS のランタイムに接続したときから表示します。

+ +

Unique Set Size

+ +

Unique Set Size

+ +

このグラフは、すべての Firefox OS プロセスのメモリフットプリントを時系列で表示します。Firefox OS アプリのメモリ消費に関心がある場合はこのグラフを表示すれば、アプリのプロセスが使用するプライベートメモリが表示されます。

+ +

独自データを表示する

+ +

モニタは多くのさまざまな発信元から自由な形式のデータを受け入れますので、どのような種類のデータでも比較的容易に表示できます。

+ +

Firefox OS デバイスから

+ +

Observer 通知の送信により、接続した端末からデータを送信できます。

+ +

注記: 認定アプリでこれを行いたい場合は、こちらの手順に従ってください。

+ +

Services.obs.notifyObservers(null, 'devtools-monitor-update', data);

+ +

chrome 権限を持つ JS コードから、データを送信できます。ある JS コードの実行時間を測定する例を示します:

+ +

JavaScript

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

C++

+ +
observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);
+ +

Gecko のどこからでもデータを送信できます。あるコードの実行時間を測定する例を示します:

+ +
#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());
+}
+ +

コンピュータから

+ +

WebSocket サーバを通して、簡単にモニタへデータを送信できます。Firefox の拡張機能、コマンドラインツール、Web サービスを作成する場合に役立つでしょう。

+ +

デフォルトでは、モニタはコンピュータの 9000 番ポートで実行するサーバを見ています。これは、設定項目 devtools.webide.monitorWebSocketURL で変更できます。

+ +

モニタはローカルネットワーク内だけでなく、インターネットのどこからでもデータを受け入れるようにすることができます。

+ +

Node.js

+ +
TODO
+ +

Python

+ +
TODO
+ +

サポートする形式

+ +

モニタは、概ね以下のような JSON オブジェクト形式のデータを受け入れます:

+ +
{
+  "graph": "myGraph",
+  "curve": "myCurve",
+  "value": 42,
+  "time": 1234567890
+}
+ +

この形式は高い柔軟性を持たせようとするものです。指定されたグラフが存在しない場合は、自動的に作成します。

+ +

任意の名称

+ +

認識できない項目は、グラフの名称と値であるとみなします。

+ +

送信可能な最小のパケットは以下のようなものです:

+ +
{ "myCurve": 42 }
+ +

これは無名のグラフの "myCurve" に、データポイントを追加します。time がない場合の既定値は、モニタがパケットを受け取った時刻です。

+ +

精度を高めるため、データで常に timestamp を指定するとよいでしょう:

+ +
{
+  "current": 60,
+  "voltage": 500,
+  "time": 1234567890
+}
+ +

複数の値

+ +

1 回の更新で、複数のグラフのデータを送信できます:

+ +
{
+  "graph": "myGraph",
+  "myCurve1": 50,
+  "myCurve2": 300,
+  "myCurve3": 9000,
+  "time": 1234567890
+}
+ +

または、ひとつのグラフに複数のデータポイントを示すことができます:

+ +
{
+  "graph": "myGraph",
+  "curve": "myCurve",
+  "values": [
+    { "time": 1234567890, "value": 42 },
+    { "time": 1234567981, "value": 51 }
+  ]
+}
+ +

複数の更新

+ +

配列形式で、複数の更新データを送信することもできます:

+ +
[
+  { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
+  { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
+]
+ +

時間指定のイベント

+ +

グラフ内の垂直線で特定のイベントを示すため、更新データに event キーを付加します:

+ +
{
+  "graph": "myGraph",
+  "event": "myEvent",
+  "time": 1234567980
+}
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 +--- +
{{ToolsSidebar}}

WebIDE を開く方法は 3 つあります:

+ + + +

+ +

WebIDE は以下のようなものです:左側のサイドバーで、既存のアプリの起動や新しいアプリの作成ができます。右側のサイドバーで、ランタイムの選択や新しいランタイムのセットアップができます。

+ +

中央にあるボタンでアプリの実行・停止・デバッグを行います。これらのボタンはアプリを開いていて、かつランタイムが選択済みである場合にのみ使用できます。

+ +

WebIDE のフォントサイズは、標準的なキーボードショートカットを使用して変更できます (OS X では Control の代わりに Command を使用します):

+ + 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 +--- +
{{ToolsSidebar}}

ランタイムは Web ブラウザなど、アプリの実行やデバッグを行う環境です。以下のようなランタイムがあります:

+ + + +

WebIDE では、右側のサイドバーでランタイムを管理します:

+ +

+ +

サイドバーでは、ランタイムを 4 種類にグループ分けしています:

+ +
+
USB デバイス
+
USB で接続した Firefox OS デバイス。Firefox 36 より、USB 経由で Android 版 Firefox への接続も可能です。
+
WI-FI デバイス
+
Wi-Fi 経由で接続した Firefox OS デバイス。Firefox 39 の新機能
+
シミュレータ
+
インストール済みの、Firefox OS シミュレータのインスタンス。
+
その他
+
任意のホスト名とポートを使用して、リモートランタイムに WebIDE を接続します。Valence アドオンをインストールしている場合は、アドオンで使用可能になるランタイムをこのセクションに表示します。
+
+ +

ここでは、ランタイムを追加する方法を説明します。

+ +

Firefox OS デバイスを接続する

+ +

十分に新しいバージョンの Firefox と Firefox OS がある場合は、Wi-Fi 経由で Firefox OS デバイスに接続できます。そうでない場合は、USB 経由で接続しなければなりません。

+ + + +

Android 版 Firefox に接続する

+ +

USB で接続した Android デバイスおよび Android 版 Firefox を、"USB デバイス" 配下のランタイムとして表示します。また Firefox 42 より、Wi-Fi 経由でAndroid 版 Firefox に接続できます。

+ + + +

シミュレータを追加する

+ +

Firefox OS シミュレータは Firefox OS の上位層であり、パソコン上で動作して Firefox OS デバイスのシミュレーションを行います。これは Firefox OS デバイスと同じサイズのウィンドウで動作し、Firefox OS のユーザインターフェイスや同梱アプリを含み、そして Firefox OS デバイスの API の多くをシミュレーションします。

+ +

これは多くの場合、アプリのテストやデバッグに実機が必要ないということです。

+ +

シミュレータは Firefox に同梱せず、アドオンとして提供しています。ランタイムサイドバーで "シミュレータをインストール" をクリックすると、さまざまなバージョンの Firefox OS シミュレータをインストールできるページが開きます。

+ +

シミュレータはいくつでもインストールできます。シミュレータはダウンロードに時間がかかりますので、お待ちください。

+ +
+

Firefox OS シミュレータ 2.6 以降を使用するには、Firefox 45 以降を使用しなければなりません。

+
+ +

シミュレータをインストールしたら "追加のコンポーネント" ウィンドウを閉じてください。ランタイムサイドバーの項目として、インストールしたシミュレータが表示されます:

+ +

+ +

シミュレータについて詳しくは、ドキュメントをご覧ください。

+ +

シミュレータの設定

+ +
+

Firefox 42 の新機能

+
+ +

Firefox 42 より、サイドバー上のシミュレータの項目の隣に設定アイコンがあります:

+ +

+ +

アイコンをクリックすると、シミュレータの設定を行う画面を表示します:

+ +

以下の設定が可能です:

+ + + +

その他のランタイム

+ +

リモートランタイム

+ +

リモートランタイムによって、任意のホスト名とポート番号を使用してリモートデバイスに接続できます。

+ +

内部で Firefox OS デバイスや Android デバイスは、Android Debug Bridge あるいは ADB と呼ばれるプログラムを用いてパソコンと接続しています。デフォルトで WebIDE は、ADB Helper を使用します。これは ADB のインストールやポートフォワーディングの設定により手続きを単純化しますので、Firefox のデスクトップツールとデバイスがメッセージを交換できるようになります。

+ +

これはほとんどの場合に便利ですが、ADB を WebIDE の外部で使用したい場合があるかもしれません。例えば、コマンドラインから直接 ADB を実行することがあるでしょう。その場合は adb forward コマンドを使用して、ホスト名とポート番号を指定することによりデバイスと接続します (例: adb forward tcp:6000 localfilesystem:/data/local/debugger-socket)。
+ さらに WebIDE も接続したい場合は ADB Helper アドオンを無効化したうえでカスタムランタイムにより、adb forward に渡すホスト名とポート番号を入力 (例: localhost:6000) して WebIDE を接続します。

+ +

また Firefox 36 より前のバージョンでは、ADB Helper は Android 版 Firefox への接続をサポートしていないため、Android 版 Firefox に WebIDE を接続したい場合はポートフォワーディングを設定したうえで、カスタムランタイムを使用して接続することが必要です。詳しくは Firefox 36 より前のバージョンで ADB を使用して Android 版 Firefox に接続する方法のドキュメントをご覧ください。

+ +

Valence で使用できるランタイム

+ +

Valence アドオンをインストールしている場合は、以下 3 種類のランタイムが追加されます:

+ + + +

これらのランタイムに接続する手順は、リモートデバッグの該当するページで確認してください。

+ +

ランタイムの選択

+ +

ランタイムをセットアップすると、ランタイムサイドバーで選択できるようになります。

+ + + +

以上で、WebIDE のツールバーの中央にある "インストールして実行" ボタンが使用可能になります。このボタンをクリックして、選択したランタイムでアプリのインストールや実行を行います。

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 +--- +
{{ToolsSidebar}}

ランタイムを選択すると、ランタイムの設定にアクセスできます:

+ +

以下の作業に使用します:

+ + + +

ランタイム情報

+ +

+ +

許可設定一覧

+ +

現在のランタイムにおけるアプリの許可設定をまとめた一覧表です。API およびアプリの種類ごとにアクセスが許可 (✓)、拒否 (✗) またはユーザに問い合わせる (!) のいずれかを示します。

+ +

+ +

端末の設定

+ +

Preferences service を通して使用可能な端末の設定項目を、編集可能な一覧表で表示します。Firefox の about:config と同じプラットフォームレベルの設定値のデータセットを公開していますが、これは端末向けの設定です。

+ +

これらの設定はセキュリティ上とてもデリケートですので、変更できるようにするためには開発ツールの権限を制限する設定を無効にしなければなりません。

+ +

+ +

端末オプション

+ +
+

Firefox OS 2.5 の新機能

+
+ +

Firefox OS の設定アプリで制御できる設定項目を、変更可能な一覧表で表示します。端末上に変更するための UI を持つ設定のほとんど (例えば音量やアラームなど) は、端末オプションの方にあります。

+ +

このような設定項目は端末の設定よりデリケートではなく、権限を制限する設定を無効化しなくても変更できます。

+ +

この機能を使用するには、Firefox 38 以降の WebIDE で Firefox OS 2.5 以降に接続しなければなりません。

+ +

+ +

スクリーンショット

+ +

ランタイムのスクリーンショットを撮影するコマンドです。

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 +--- +
{{ToolsSidebar}}

USB 経由で Android 版 Firefox に接続する

+ +

Android OS で実行している Firefox のインスタンスに接続できない場合は、以下の項目を確認してください:

+ + + +

Wi-Fi 経由で Android 版 Firefox に接続する

+ + + +

プロジェクトの一覧を読み込みできない

+ +

あるバージョンの Firefox で WebIDE を開いた後に、同じプロファイルを使用したまま Firefox をダウングレードすると、ダウングレード後の Firefox で WebIDE を開いた際に "Unable to load project list" というエラーが表示されることがあります。

+ +

これは WebIDE が使用するストレージシステム (IndexedDB) で、新しいバージョンの Firefox 向けに内部ファイルの移動や再構築が必要になったときに発生します。古いバージョンの Firefox では、プロジェクトの一覧にアクセスできなくなります。

+ +

データは失われていませんがプロジェクトの一覧にアクセスするには、プロファイルを使用していた新しいバージョンの Firefox を使用し続けなければなりません。

+ +

やむを得ず古いバージョンの Firefox を使用する場合は以下の手順でプロジェクト一覧のみ削除できますが、サポート外の手順ですのでさらなるトラブルやデータの喪失を招く可能性があります:

+ +
    +
  1. Firefox を閉じます。
    2. +
  2. Firefox のプロファイルのディレクトリーを開きます。
    3. +
  3. プロファイルのディレクトリー内で storage フォルダを探します。
    4. +
  4. このフォルダ配下のファイルツリー内に、4268914080AsptpcPerjo (データベース名のハッシュ) で始まる名前のファイルやフォルダが見つかるでしょう。 +
      +
    • 例えば、<profile>/storage/permanent/indexeddb+++fx-devtools/idb に存在します。
      • +
    +
    5. +
  5. 該当するファイルやフォルダを削除します。
    6. +
  6. 再び Firefox と WebIDE を開きます。
    7. +
+ +

ログ取得を有効化する

+ +

診断情報を収集するために、詳細なログを取得できます:

+ +
    +
  1. about:config を開き、新しい設定項目 extensions.adbhelper@mozilla.org.sdk.console.logLevel を作成して、文字列値 all を設定します。また、extensions.adbhelper@mozilla.org.debug を true に設定します。
    2. +
  2. アドオンマネージャで ADB Helper アドオンを無効化して、再び有効化します。
    3. +
  3. ブラウザーコンソールを開くと、接頭辞 adb が付加されたメッセージが表示されます。メッセージが表示されない場合は、支援を求めてください。
    4. +
+ +

支援を求める

+ +

IRC の #devtools ルームを訪れて、支援を求めてください。

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 +--- +
{{ToolsSidebar}}
+

Firefox 39 の新機能

+
+ +

Apache Cordova を使用すると HTML、JavaScript、CSS を使用してアプリを作成できます。また iOS や Android といったモバイルプラットフォーム向けのネイティブアプリも生成できます。Cordova では、Firefox OS 向けのアプリも作成できます。

+ +

Firefox 39 より、WebIDE で Cordova アプリを直接扱えます。すなわち WebIDE で Cordova アプリを編集する、あるいは WebIDE で Firefox OS 向けのアプリを生成することができます。

+ +

始めに、通常どおりの手順で Cordova アプリを作成します:

+ + + + + + + +

次に:

+ + + +

以上で Cordova アプリを編集できます。またアプリを実行するたびに、WebIDE はバックグラウンドで Firefox OS 版のアプリを生成します。WebIDE はアプリのマニフェストに影響を与える変更が施された際も Firefox OS 版を再生成しますので、マニフェストの検証も実施できます。

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 +--- +
{{ToolsSidebar}}
+

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

+
+ +

Firefox 34 より開発ツールで、ドキュメント内にある特定の iframe を対象にすることができます。

+ +

{{EmbedYouTube("Me9hjqd74m8")}}

+ +

ツールバーに新たなボタンが現れます:

+ +

ボタンをクリックするとドキュメント自身に加えて、ドキュメント内にあるすべての iframe をポップアップで一覧表示します。

+ +

+ +
+

現時点ではポップアップを表示するために、ページの再読み込みまたは開発ツールをいったん閉じて再び開く作業が必要です。この問題は bug 1062233 で追跡しています。

+
+ +

このリストで項目を選択すると、ツールボックス内の全ツール (インスペクター、コンソール、デバッガー など) は iframe だけを対象にして、基本的にページの残りの部分は存在しないような状態で動作します。

-- cgit v1.2.3-54-g00ecf