blob: 925f1e61cdf7b3953a6e369a927c48f9bb9a3f04 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: Tips
slug: Tools/Tips
tags:
- Dev Tools
- Tools
- Web Development
translation_of: Tools/Tips
---
<div>{{ToolsSidebar}}</div>
<h2 id="General" name="General">一般</h2>
<p>スクリーンショット:</p>
<ul>
<li>ページ全体: スクリーンショットボタン (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;"> をクリックします (始めに <a href="/ja/docs/Tools/Tools_Toolbox#Extra_tools">有効化しなければなりません</a>)。</li>
<li>ビューポート: <a href="/ja/docs/Tools/Responsive_Design_Mode#Responsive_Design_Mode_controls">レスポンシブデザインモード</a> でスクリーンショットボタン (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">) をクリックします。</li>
<li>ノード: インスペクターで右クリックして [<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Screenshot Node">ノードのスクリーンショットを撮影</a>] をクリックします。</li>
<li><a href="/ja/docs/Tools/GCLI#Commands">開発ツールバーのコマンド</a>: <code>screenshot [filename] [options]</code></li>
</ul>
<p>設定:</p>
<ul>
<li>開発ツールのテーマを <a href="/ja/docs/Tools/Settings#Choose_DevTools_theme">Light、Dark、Firebug</a> から選択します。</li>
<li>通常とは異なるショートカットに慣れている場合は、Vim、Emacs、あるいは Sublime Text の <a href="/ja/docs/Tools/Settings#Editor_Preferences">キー割り当てに変更します</a>。</li>
<li>チェックボックスで、さまざまなツールを有効化または無効化します (デフォルトで有効化していないツールがあります!)。</li>
</ul>
<h2 id="Page_Inspector" name="Page_Inspector">ページインスペクター</h2>
<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">マークアップビュー</a>:</p>
<ul>
<li>ノードを選択して <kbd>H</kbd> を押下すると、そのノードを非表示/再表示します。</li>
<li>ノードを選択して <kbd>Backspace</kbd> または <kbd>Del</kbd> を押下すると、そのノードを削除します。</li>
<li><kbd>Alt</kbd> を押しながらノードをクリックすると、すべての子孫を展開/折りたたみます。</li>
<li>ツール下部にある <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">パンくずリストのボタン</a> をクリックすると、そのノードを表示するようにインスペクターがスクロールします。</li>
<li>ノードのそばにある "ev" アイコンをクリックすると、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">そのノードに関連付けられたすべてのイベントリスナーがわかります</a>。</li>
<li>ノードを選択して <kbd>S</kbd> を押下すると、ページでそのノードを表示します (ノードを右クリックして [<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Scroll Into View">この要素の位置にスクロール</a>] を選択することと同じです)。</li>
<li>ノードを右クリックして [<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">コンソールで使う</a>] をクリックすると、そのノードを変数 <code>temp<var>N</var></code> として <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドライン</a> で使用できます。</li>
</ul>
<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">要素を選択する</a>:</p>
<ul>
<li><kbd>Shift</kbd> + クリックでは、要素を選択しますが選択可能な状態を維持します (選択モードを解除しません)。</li>
<li><kbd>←</kbd>/<kbd>→</kbd> を使用して、親要素/子要素に移動します (選択するのが困難である場合)。</li>
</ul>
<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">ルールビュー</a>:</p>
<ul>
<li>セレクターの隣にあるインスペクターアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) をクリックすると、マッチするすべての要素を強調表示します。</li>
<li><code>要素 {}</code> ルールの隣にあるインスペクターアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) をクリックすると、選択中の要素を強調表示します。</li>
<li>任意のプロパティを右クリックして [MDN ドキュメントを表示] を選択すると、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">そのプロパティの MDN ドキュメントを表示します</a>。</li>
<li>オーバーライドされたルールの隣にあるフィルターアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14187/filter.png" style="height: 19px; width: 18px;">) をクリックすると、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">オーバーライドしたプロパティが見つかります</a>。</li>
<li>名称、値、ルールを右クリックして、それらの名称、値、宣言、ルール全体をクリップボードにコピーできます。</li>
</ul>
<h2 id="Web_Console" name="Web_Console">ウェブコンソール</h2>
<p>すべてのパネル:</p>
<ul>
<li><kbd>Esc</kbd> を押下すると <a href="/ja/docs/Tools/Web_Console/Split_console">常時表示コンソール</a> を開きます。デバッグやノードの調査を行う際に役立ちます。</li>
</ul>
<p><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドライン</a>:</p>
<ul>
<li><code><a href="/ja/docs/Tools/Web_Console/Helpers#$0">$0</a></code> は、現在選択しているノードを参照します。</li>
<li><code><a href="/ja/docs/Tools/Web_Console/Helpers#$">$()</a></code> は、{{domxref("document.querySelector()")}} のショートカットです。</li>
<li><code><a href="/ja/docs/Tools/Web_Console/Helpers#$$">$$()</a></code> は、{{domxref("document.querySelectorAll()")}} の結果を含む配列を返します。</li>
<li><code><a href="/ja/docs/Tools/Web_Console/Helpers#copy">copy</a></code> は、あらゆるものを文字列としてコピーします。</li>
<li>インスペクターでノードを右クリックして [<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">コンソールで使う</a>] をクリックすると、そのノードを示す変数 <code><a href="/ja/docs/Tools/Web_Console/Helpers#tempN">temp<em>N</em></a></code> を作成します。</li>
<li><code><a href="/ja/docs/Tools/Web_Console/Helpers#cd">cd</a></code> で、JavaScript の実行コンテキストを、ページ内の別の iframe に切り替えます。</li>
<li><code><a href="/ja/docs/Web/API/Console/table">console.table()</a></code> で、表形式のデータを表で表示します。</li>
<li><code><a href="/ja/docs/Tools/Web_Console/Helpers#help">help</a></code> で、使用可能なコマンドを説明する MDN ページを開きます。</li>
<li><code>:screenshot <filename.png> --fullpage</code> は、オプションのファイル名を使用して、ダウンロードディレクトリにスクリーンショットを保存します。ファイル名が含まれていない場合、ファイル名は次の形式になります。<br>
<br>
<code>Screen Shot date at time.png</code><br>
<br>
--fullpage パラメーターはオプションです。それを含めると、スクリーンショットはブラウザウィンドウに表示されるセクションだけでなくページ全体になります。ファイル名にも -fullpage が付加されます。<a href="/ja/docs/Tools/Web_Console/Helpers">Web コンソールヘルパー</a>の全てのパラメータを参照してください。</li>
</ul>
<p>コンソールの出力:</p>
<ul>
<li>出力領域で要素の隣にあるインスペクターアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) をクリックすると、<a href="/ja/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">その要素をインスペクターで選択します</a>。</li>
<li>設定で [<a href="/ja/docs/Tools/Settings#Common_preferences">ログ出力を残す</a>] にチェックを入れると、記録したメッセージを移動前および移動後も維持します。</li>
<li>設定で [<a href="/ja/docs/Tools/Settings#Web_Console">タイムスタンプを表示</a>] にチェックを入れると、記録したメッセージのそばにタイプスタンプを表示します。</li>
</ul>
<h2 id="Debugger" name="Debugger">デバッガー</h2>
<ul>
<li>ブラックボックスアイコン (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">) を使用して、デバッグセッションで JavaScript ライブラリーをスキップできます。</li>
<li><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F</kbd> を押下すると、すべてのスクリプトから検索します。</li>
<li><kbd>Ctrl</kbd>+<kbd>D</kbd> を押下すると、関数定義を検索します。</li>
<li><kbd>Ctrl</kbd>+<kbd>L</kbd> を押下すると、特定の行に移動します。</li>
</ul>
<h2 id="Style_Editor" name="Style_Editor">スタイルエディター</h2>
<ul>
<li>スタイルシートペインのブラックボックスアイコン (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">) で、スタイルシートの適用状態を切り替えできます。</li>
<li><a href="/ja/docs/Tools/Style_Editor#The_media_sidebar">@media 規則</a> をクリックすると、その規則を <a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a> で適用します。</li>
<li>インポートボタン (<img alt="Button to import a style sheet from the file system" src="https://mdn.mozillademos.org/files/14193/Import%20button.png" style="height: 18px; width: 18px;">) をクリックすると、スタイルシートをインポートします。作成ボタン (<img alt="Button to create a new style sheet" src="https://mdn.mozillademos.org/files/14195/Create%20style%20sheet%20button.png" style="height: 18px; width: 18px;">) をクリックすると、新しいスタイルシートを作成します。</li>
<li><a href="/ja/docs/Tools/Style_Editor#The_style_sheet_pane">スタイルシートペイン</a> のオプションボタンをクリックして [<a href="/ja/docs/Tools/Style_Editor#Source_map_support">元のソースを表示</a>] を選択すると、CSS プリプロセッサーのファイルの表示を切り替えます。</li>
</ul>
<h2 id="Network_Monitor" name="Network_Monitor">ネットワークモニター</h2>
<ul>
<li>リクエストの概要をクリックすると、<a href="/ja/docs/Tools/Network_Monitor#Performance_analysis">キャッシュあり/キャッシュなしのページ読み込みのパフォーマンスを比較します</a>。</li>
<li>リクエストを選択している状態で [<a href="/ja/docs/Tools/Network_Monitor#Edit_and_Resend">編集して再送信</a>] をクリックすると、ヘッダーを変更して再度リクエストを送信できます。</li>
<li>設定で [<a href="/ja/docs/Tools/Settings#Common_preferences">ログ出力を残す</a>] にチェックを入れると、リクエストを移動前および移動後も維持します。</li>
<li><a href="/ja/docs/Tools/Network_Monitor#Cause_column">"発生源" 列の "js" アイコン</a> にマウスポインタを載せると、JavaScript のスタックトレースを表示します。これは、リクエストの発生源です。</li>
<li>設定で [<a href="/ja/docs/Tools/Settings#Advanced_settings">HTTP キャッシュを無効化 (ツールボックスを開いているとき)</a>] にチェックを入れると、ネットワークの問題をデバッグしている間はキャッシュを無効化します。</li>
</ul>
<h2 id="Storage_Inspector" name="Storage_Inspector">ストレージインスペクター</h2>
<ul>
<li>列見出しを右クリックすると、列の表示/非表示を切り替えできるメニューが開きます。</li>
<li>項目を右クリックして [<var>名称</var> を削除] を選択するとその項目を削除、[すべて削除] をクリックするとすべての項目を削除します。</li>
<li>項目を選択すると、解析した値をサイドバーに表示します。</li>
</ul>
|
