195 ページあります:
| # | ページ | タグと要約 |
|---|---|---|
| 1 | 開発ツール | Developing Mozilla, Guide, Tools, Web Development, Web Development:Tools, l10n:priority, ツール, 開発ツール |
| デスクトップとモバイルで、HTML と CSS と JavaScript を調査、編集、デバッグします。 | ||
| 2 | 3D ビュー | HTML, Tools, Web Development, Web Development:Tools |
| 3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。 | ||
| 3 | CSSカバレッジ | Experimental, Firefox, ガイド, ツール, 初心者 |
| CSSカバレッジは、Firefox開発者向けのコマンドセットで、使い古されていないCSSを指摘し、初期レンダリングに必要なCSSファイルの部分を示すことで、乱雑なCSSを解くのに役立ちます。 | ||
| 4 | Contributing | |
| これは Firefox Developer Tools に貢献するためのガイドです。高レベルでは、コントリビュータのワークフローは次のようになります。 | ||
| 5 | Nightly を使ってコントリビュートする | |
| このページでは Firefox 開発ツール へコントリビュートするシンプルな方法を説明します。この方法であれば、Firefox をビルドしたり特別な環境を用意する必要はありません。 | ||
| 6 | DOM プロパティビューアー | DOM, Tools, Web Development |
DOM プロパティビューアーは、現在のページまたは 選択したフレーム の window オブジェクトから始まる DOM のプロパティを、展開可能なツリー構造で調査できるツールです。 |
||
| 7 | Debugger-API | |
MozillaのJavaScriptエンジンであるSpiderMonkeyは、Debuggerという名前のデバッグインターフェイスを提供しています。Debuggerは、JavaScriptコードが他のJavaScriptコードの実行を観察して操作できるようにします。Firefoxの組み込みの開発者ツールとFirebugアドオンは、どちらもDebuggerを使用してJavaScriptデバッガを実装しています。しかし、Debuggerは非常に一般的で、トレーサやカバレッジ分析、パッチアンドコンティニューなどの他の種類のツールを実装するために使用できます。 |
||
| 8 | Debugger | |
コンストラクタとして呼び出されると、Debuggerオブジェクトは新しいDebuggerインスタンスを作成します。 |
||
| 9 | Debugger.Environment | |
A Debugger.Environment instance represents a lexical environment, associating names with variables. Each Debugger.Frame instance representing a debuggee frame has an associated environment object describing the variables in scope in that frame; and each Debugger.Object instance representing a debuggee function has an environment object representing the environment the function has closed over. |
||
| 10 | Debugger.Frame | |
A Debugger.Frame instance represents a visible stack frame. Given a Debugger.Frame instance, you can find the script the frame is executing, walk the stack to older frames, find the lexical environment in which the execution is taking place, and so on. |
||
| 11 | Debugger.Memory | |
The Debugger API can help tools observe the debuggee’s memory use in various ways: |
||
| 12 | Debugger.Object | |
A Debugger.Object instance represents an object in the debuggee, providing reflection-oriented methods to inspect and modify its referent. The referent’s properties do not appear directly as properties of the Debugger.Object instance; the debugger can access them only through methods like Debugger.Object.prototype.getOwnPropertyDescriptor and Debugger.Object.prototype.defineProperty, ensuring that the debugger will not inadvertently invoke the referent’s getters and setters. |
||
| 13 | Debugger.Script | |
A Debugger.Script instance may refer to a sequence of bytecode in the debuggee or to a block of WebAssembly code. For the former, it is the Debugger API’s presentation of a JSAPI JSScript object. The two cases are distinguished by their format property being "js" or "wasm". |
||
| 14 | Debugger.Source | |
A Debugger.Source instance represents either a piece of JavaScript source code or the serialized text of a block of WebAssembly code. The two cases are distinguished by the latter having its introductionType property always being "wasm" and the former having its introductionType property never being "wasm". |
||
| 15 | Tools/Debugger-API/Tutorial-Debugger-Statement | |
| 注意: このチュートリアルは現在のバージョンのFirefoxでは動作しません。代わりに、更新された拡張ブレークポイントチュートリアルを試してみてください。 | ||
| 16 | チュートリアル: Debuggerを使用したブレークポイントの設定 | |
このページには、Firefox の Scratchpad を使用して自分で Debugger API を試す方法が示されています。Debugger を使用して関数内にブレークポイントを設定し、ヒットするたびに式を評価します。 |
||
| 17 | チュートリアル: コールパスごとの割り当てを表示する | チュートリアル, ツール, デバッガ |
| このページではデバッガ API を使用して、Web ページが割り当てたオブジェクトの数を、それらを割り当てた関数呼び出しパスでソートして表示する方法を示します。 | ||
| 18 | 一般的な規則 | |
このページでは、Debugger APIで使用される一般的な表記法を説明し、仕様全体で使用される用語を定義します。 |
||
| 19 | DevTools API | |
| DevTools API は、Firefox の開発者ツールを登録してアクセスする方法を提供します。 | ||
| 20 | DevToolsカラー | CSS |
| このチャートには、開発者ツールのダークテーマとライトテーマで実装されている色とCSS変数が一覧で表示されています。 | ||
| 21 | Firebug から移行する | Firebug, Migration |
| Firebug から Firefox 開発ツールへ移行する際に、Firebug で愛用していた機能が開発ツールのどこにあるかと考えるかもしれません。以下のリストは、Firebug のユーザーが開発ツールへ移行するための支援を目指しています。 | ||
| 22 | Firefox OS 1.1 Simulator | |
| No summary! | ||
| 23 | Firefox OS シミュレータ | |
| Firefox OS シミュレータは、Firefox OS デバイスをシミュレートするが、デスクトップ上で動作する Firefox OS の上位層のバージョンです。つまり多くの場合、アプリをテストしてデバッグするために実際のデバイスは必要ありません。これは、Firefox OS デバイスと同じサイズのウィンドウで実行され、Firefox OS ユーザーインターフェイスと組み込みアプリケーションを含み、Firefox OS デバイス API の多くをシミュレートします。 | ||
| 24 | JSON ビューアー | |
| Firefox に JSON ビューアーが含まれています。JSON ファイルをブラウザーに読み込むと、分析して構文をハイライト表示します。配列やオブジェクトは折りたたんで表示しており、"+" アイコンを使用して展開できます。 | ||
| 25 | JavaScript プロファイラ | Debugging, Firefox, Guide, Profiler, Profiling, Tools |
| プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。 | ||
| 26 | Paint Flashing Tool | |
| Paint Flashing Tool はアクティブ時に、何らかの入力 (例えばユーザーがマウスを動かしたりスクロールしたりするなど) への応答としてブラウザーが再描画を行わなければならない部分を強調表示します。このツールにより、ウェブサイトがブラウザーに過剰な再描画を行わせていないかを明らかにできます。再描画はパフォーマンスへの影響が大きい処理になりえるため、不必要な再描画をなくすことでウェブサイトの応答性を改善できます。 | ||
| 27 | Tips | Dev Tools, Tools, Web Development |
| スクリーンショット: | ||
| 28 | Tools/Debugger.Object | |
Debugger.Object インスタンスはデバッグ対象のオブジェクトを表し、その参照オブジェクトを検査および変更するためのリフレクション指向のメソッドを提供します。参照先のプロパティは、Debugger.Object インスタンスのプロパティとして直接表示されません。デバッガはDebugger.Object.prototype.getOwnPropertyDescriptor や Debugger.Object.prototype.defineProperty のようなメソッドを介してのみデバッガにアクセスし、デバッガが誤ってリファレンスの getter と setter を呼び出さないようにします。 |
||
| 29 | Valence (Firefox ツールアダプタ) | |
| Valence (旧名 Firefox ツールアダプタ) は、Gecko ベースの Firefox、Android 版 Firefox、Firefox OS ブラウザに限らず、様々なブラウザを Firefox 開発者ツールでデバッグできるようにする実験的なアドオンです。 | ||
| 30 | Web Audio エディター | Tools |
Web Audio API を使うとき、開発者は AudioContext を生成します。そのコンテキストでは、以下のようないくつもの AudioNode を構築します: |
||
| 31 | WebIDE | Apps, Debugging, Firefox OS, WebIDE, tool, アプリ, ツール |
| WebIDE では、始めに 1 つ以上のランタイムをセットアップします。ランタイムは、アプリの実行やデバッグを行う環境です。ランタイムは USB (Firefox 39 以降では Wi-Fi も可能) でパソコンに接続した Firefox OS デバイスか、パソコン自体にインストールした Firefox OS シミュレータを使用できます。 | ||
| 32 | WebIDE で Cordova アプリを扱う | |
| Apache Cordova を使用すると HTML、JavaScript、CSS を使用してアプリを作成できます。また iOS や Android といったモバイルプラットフォーム向けのネイティブアプリも生成できます。Cordova では、Firefox OS 向けのアプリも作成できます。 | ||
| 33 | WebIDE のトラブルシューティング | |
| Android OS で実行している Firefox のインスタンスに接続できない場合は、以下の項目を確認してください: | ||
| 34 | WebIDE を開く | DevTools, WebIDE, opening |
| WebIDE を開く方法は 3 つあります: | ||
| 35 | アプリの作成と編集 | |
| WebIDE の左側にあるサイドバーで、以下のことをできます: | ||
| 36 | アプリの実行とデバッグ | |
| アプリを実行する準備ができたら、ランタイムサイドバーでランタイムを選択しなければなりません。使用できるランタイムがない場合は、ランタイムのセットアップで追加方法を確認してください。 | ||
| 37 | モニタ | |
 |
||
| 38 | ランタイムのセットアップ | |
| ランタイムは Web ブラウザなど、アプリの実行やデバッグを行う環境です。以下のようなランタイムがあります: | ||
| 39 | ランタイムメニュー | |
| ランタイムを選択すると、ランタイムの設定にアクセスできます: | ||
| 40 | Webコンソール | Guide, Security, Web Development, Web Development:Tools, l10n:priority, web console, ツール, デバッグ |
| Webコンソールとは: | ||
| 41 | Web コンソールヘルパー | Debugging, Web Development, web console |
| ウェブコンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。 | ||
| 42 | Webコンソールの出力のカスタマイズ | Webコンソール, ガイド, リファレンス, 拡張 |
| このドキュメントでは、Webコンソールとブラウザコンソールの出力を拡張およびカスタマイズする方法について説明します。ここでは、コンソールやオブジェクトインスペクタで生成するオブジェクトプレビューを拡張する方法についても学ぶことができます。 | ||
| 43 | Webコンソールリモーティング | |
| このドキュメントでは、Webコンソールのリモート処理のしくみについて説明します。Webコンソールはユーザーインターフェイスを備えたクライアントと、タブ内で発生するすべてのもののリスナーを持つサーバーに分割されています。サーバーとクライアント間の通信には、リモートデバッグプロトコルを使用します。このアーキテクチャでは、WebコンソールクライアントインスタンスをB2G、Fennecまたはその他のFirefoxインスタンス上で動作するサーバーに接続できます。 | ||
| 44 | ウェブコンソールを開く | |
| ウェブコンソールを開く方法は以下のとおりです: | ||
| 45 | キーボードショートカット | |
| これらのショートカットは、コマンドラインインタプリター 内で動作します。 | ||
| 46 | コマンドラインインタープリター | |
| ウェブコンソールのコマンドラインで、JavaScript の構文を即座に評価することができます。 | ||
| 47 | コンソールのメッセージ | |
| ウェブコンソールのほとんどは、メッセージ表示ペインが占めています: | ||
| 48 | コンソールの常時表示 | |
| コンソールを別のツールと並べて使用できます。ツールボックスで別のツールを使用しているときに Esc キーまたは ツールバー の "コンソールの常時表示を切り替えます" ボタンを押下してください。ツールボックスが分割表示されて元のツールが上段、ウェブコンソールが下段に表示されます。 | ||
| 49 | 高度な出力 | |
| ウェブコンソールでオブジェクトを出力する際は、オブジェクト名だけでなく、より高度な情報も表示します。特に、以下のような情報です: | ||
| 50 | Web開発者メニュー | |
| Web DeveloperメニューはFirefoxに組み込まれている開発ツールにアクセスする主な方法です。 OS XとLinuxでは、これは「ツール」メニューの下にあります。 | ||
| 51 | about:debugging | |
| about:debugging ページは、1 か所からさまざまなデバッグ対象に Firefox の開発ツールを接続できる場所を提供します。現在サポートしているデバッグ対象は、リスタートレスアドオン、タブ、Worker の 3 種類です。 | ||
| 52 | iframe での作業 | Debugging, DevTools, Developer Tools, Frames, Tools |
Firefox 34 より開発ツールで、ドキュメント内にある特定の iframe を対象にすることができます。 |
||
| 53 | toolboxにパネルを追加する | |
| この記事では、Toolboxに新しいツールを追加するアドオンを作成する方法について説明します。 作成するツールは、リモートデバッグプロトコル用の最小限のREPLです。これにより、デバッガサーバーにメッセージを送信し、サーバーからの応答を表示できます。 | ||
| 54 | アクセシビリティインスペクター | Accessibility, Accessibility inspector, DevTools, Guide, Tools |
| アクセシビリティインスペクターは、アクセシビリティツリーによって現在のページで支援技術に公開される重要な情報へアクセスする手段を提供して、欠けている情報やほかに注意が必要なことを確認できます。この記事では、アクセシビリティインスペクターの主な機能や使用方法を説明します。 | ||
| 55 | アドオン | NeedsTranslation, TopicStub, Web Development, Web Development:Tools |
| Firefoxには組み込まれていないが、別々のアドオンとして提供される開発ツールです。 | ||
| 56 | DOM Inspector | DOM, DOM:Tools, DOM_Inspector, Extensions, Extensions:Tools, Themes, Themes:Tools, Tools, Web Development, Web Development:Tools, XUL, XUL:Tools |
| DOM Inspector（別名 DOMi）は、文書（普通はウェブページまたは XUL ウィンドウ）の Document Object Model を調査、ブラウズ、編集することができる開発ツールです。ドキュメントとその中のすべてのノードを様々な視点から見ることができる二分割ウィンドウを用いて DOM の階層を探索することができます。 | ||
| 57 | DOM Inspector FAQ | DOM_Inspector |
| Inspector の URL バーに URL を入力して Enter キーを押します。あるいは、Inspector の [ファイル] メニューから [URL を Inspect] を選びます。開いている XUL ウィンドウを調べたいのであれば、[ファイル] メニューから [ウィンドウを Inspect] を選びます。 | ||
| 58 | DOM インスペクタの内部構造 | コード, ソース, ツール, 組織 |
DOMインスペクタには3つの主要な面があります。 あなたが最も慣れ親しんでいるのは、inspector.xulベースの主UIです。これは、DOM Inspectorが明示的にサポートしているアプリケーション（オーバーレイを介して配置されたメニューアイテム）からCtrl + Shift + I（またはCmd + Shift + I）を押すと表示される2ペインのインスペクタです。 |
||
| 59 | DOMインスペクタのイントロダクション | DOM インスペクタ |
| DOMインスペクタは Mozilla の拡張機能で、SeaMonkey の Tools > Web Development メニューからアクセスすることも、FirefoxとThunderbirdのToolsメニューからDOMインスペクタメニュー項目を選択することも、Ctrl/Cmd+Shift+I を使って開くこともできます。 DOMインスペクタはスタンドアロンです。 すべてのツールキットアプリケーションをサポートしており、独自のXULRunnerアプリに組み込むことも可能です。DOMインスペクタは、DOMの状態を検証するサニティチェックとして機能したり、必要に応じてDOMを手で操作するために使用できます。 | ||
| 60 | アドオンの例 | |
| これらの例を使用して、DevTools アドオンの実装方法を理解してください。 | ||
| 61 | インスペクター | CSS, DOM, HTML, Stylesheets, Web Development, Web Development:Tools, l10n:priority |
| ページの HTML や CSS の調査や変更を行うために、インスペクターを使用しましょう。 | ||
| 62 | 3ペインモードのページインスペクタ | 3-pane, CSS, インスペクタ, ガイド, ツール |
| この記事では、ページインスペクタの3ペインモードを使用する方法について説明します。 | ||
| 63 | HTML panel | |
| ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。 | ||
| 64 | How to | NeedsTranslation, TopicStub |
| ここには様々な HOW TO へのリンクがあります。これらのリンク先では、各技術の HOW TO について詳しく説明しています。 | ||
| 65 | CSS FlexBox インスペクタ: Flexbox レイアウトを調査する | flexbox, インスペクタ, ガイド, ツール |
| FlexBox Inspector を使用すると、Firefox DevTools を使用して CSS Flexbox のレイアウトを調べたり、ページにある flex コンテナを見つけたり、レイアウトを調べたり修正したり、レイアウトの問題をデバッグするなどの作業を行うことができます。 | ||
| 66 | CSS の調査と編集 | Guide, Inspector, Tools |
| CSS ペイン で、ページの CSS の調査や編集を行えます。 | ||
| 67 | CSS グリッドインスペクター: グリッドレイアウトを調査する | Guide, Inspector, Tools |
| グリッドインスペクターで、Firefox の開発ツールを使用して CSS グリッドレイアウト を調査できます。ページ上にあるグリッドを見つける、グリッドを調査および変更する、レイアウトのの問題をデバッグするといったことが可能です。 | ||
| 68 | CSS シェイプのパスを編集する | CSS, DevTools, Page Inspector, Rules view, Tools, highlighter, shapes |
シェイプパスエディターは、CSS の clip-path、shape-outside プロパティと <basic-shape> 値を使用して作成したシェイプの確認や編集を支援するツールです。このガイドでは、ツールで使用可能なオプションを見ていきます。 |
||
| 69 | CSS フィルターを編集する | CSS, DevTools, Filters, Page Inspector, Tools |
ルールビュー で、filter プロパティの隣に丸い灰色と白色のマークを表示します: |
||
| 70 | HTML の調査と編集 | インスペクタ, ガイド, ツール |
| HTML ペイン で、ページの HTML の調査や編集を行えます。 | ||
| 71 | Transform の可視化 | Guide, Inspector, Tools |
ルールビュー で transform プロパティにマウスポインターを載せると、ページ上に変形操作をオーバーレイ表示します: |
||
| 72 | アニメーションを扱う | Guide, Inspector, Tools |
| 本記事では、アニメーションの視覚化と編集が可能な 3 つのツールを扱います: | ||
| 73 | アニメーションインスペクタ (Firefox 41 および 42) | |
| Firefox 41 および 42 では、アニメーションインスペクタで以下のことができます: | ||
| 74 | アニメーションインスペクタの例：CSS トランジション | |
| CSS トランジションを使用したアニメーションの例。 | ||
| 75 | アニメーションインスペクターの例：Web Animations API | |
| Web Animations API を使用するアニメーションのサンプルです。 | ||
| 76 | イベントリスナーの調査 | Guide, Inspector, Tools |
| インスペクタでは HTML ペインの要素の横に「イベント」という単語が表示され、イベントリスナーがバインドされています。 | ||
| 77 | インスペクターの API を使用する | Inspector, Reference, Référence(2), Tools |
| Firefox アドオンは、chrome://browser/content/devtools/inspector/inspector.xul コンテキストから以下のオブジェクトにアクセスできます: | ||
| 78 | インスペクターを開く | Guide, Inspector, Tools |
| インスペクターを開く方法は、主に 2 つあります: | ||
| 79 | ウェブコンソールからインスペクターを使用する | Guide, Inspector, Tools |
インスペクターで選択されている要素は、変数 $0 を使用してウェブコンソールから参照できます。 |
||
| 80 | フォントを確認する | Fonts, Guide, Inspector, Tools, variable fonts |
| この記事は、Firefox 開発ツールで使用可能なフォントツールのツアーです。このツールはブラウザーに読み込んだ文書に適用されたフォントに対して、適用されたすべてのフォントを調査する、あるいはバリアブルフォントの軸の値を細かく調整するなど、表示や調査のために役に立つツールが含まれています。 | ||
| 81 | ページ内の要素を再配置する | |
| Firefox 48 より、絶対的に配置されている要素をページ上でドラッグして移動できるようになりました。 | ||
| 82 | ボックスモデルの調査と編集 | Guide, Tools |
| 要素選択ボタン を押しているとき、ページ上で要素にマウスポインターを載せると、要素の ボックスモデル をオーバーレイで表示します: | ||
| 83 | 背景画像を確認する | |
| ルールビュー で、background-image で指定した画像のプレビューを確認できます。ルールにマウスポインターを載せてください: | ||
| 84 | 色の調査と選択 | Guide, Inspector, Tools |
| CSS ペインの ルールビュー ではルールに色の値が含まれる場合に、値の隣に色のサンプルを表示します: | ||
| 85 | 要素の選択と強調表示 | |
| 選択された要素は、インスペクタが現在フォーカスしているページの要素です。 選択した要素がHTMLペインに表示され、そのCSSがCSSペインに表示されます。 | ||
| 86 | 要素を選択する | Guide, Inspector, Tools |
| 選択された要素 は、ページ内でインスペクターが現在注目している要素です。選択された要素は HTML ペイン に表示します。また、要素の CSS を CSS ペイン に表示します。 | ||
| 87 | Style panel | |
| ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。 | ||
| 88 | UI ツアー | インスペクタ, ガイド, ツール |
| 本記事は、インスペクターのユーザーインターフェイスの主要部を紹介するクイックツアーです。 | ||
| 89 | キーボードショートカット | |
| これらのショートカットは、ページから要素を選択 がアクティブであるときに動作します。 | ||
| 90 | エディタ | |
| エディタはアドオンに埋め込むことのできるコードエディタコンポーネントです。現在、このコンポーネントはすべての既存の Firefox 開発ツールで使用されています。このエディタコンポーネントは、CodeMirror オープンソースエディタのラッパーです。 | ||
| 91 | キーボードショートカット一覧 | Tools, l10n:priority |
| 本ページでは、Firefox 内蔵の開発ツールで使用している、すべてのキーボードショートカットを一覧化しています。 | ||
| 92 | シェーダーエディター | |
| シェーダーエディターで、WebGL で使用するバーテックスシェーダーおよびフラグメントシェーダーの参照や編集ができます。 | ||
| 93 | スクラッチパッド | Tools, Web Development, Web Development:Tools, l10n:priority |
| スクラッチパッドは、JavaScript の実験環境を提供します。ウェブページと対話するコードの記述、実行、結果の確認ができます。 | ||
| 94 | スクリーンショットを撮影する | Tools |
| 開発ツールを使用して、ページ全体またはページ内のひとつの要素のスクリーンショットを撮影できます。 | ||
| 95 | スタイルエディター | CSS, Stylesheets, Tools, Web Development, Web Development:Tools |
| スタイルエディターでできること: | ||
| 96 | ストレージインスペクター | Cookies, Dev Tools, Firefox, Guide, IndexedDB, Local Storage, Session Storage, Storage, Tools |
| ストレージインスペクターで、ウェブページが使用できるさまざまな種類のストレージを調査できます。現在は、以下の種類のストレージの調査に使用できます: | ||
| 97 | スポイト | |
| スポイトツールで、ページ内から色を選択することができます。これはページ上で拡大鏡のように動作して、ピクセル単位の精度で選択することができます。拡大鏡の下には、現在選択しているピクセルの色の値を、オプション > 調査 で選択した色単位で表示します: | ||
| 98 | ソースを表示 | DevTools, Firefox, view page source |
| ソース表示機能を使用して、表示しているページの HTML や XML を閲覧できます。ソースを表示する方法は以下のとおりです: | ||
| 99 | ソースエディタの使用 | |
ソースエディタは source-editor.jsm によって提供されるエディタコンポーネントで、スクラッチパッド や スタイルエディタ などの開発ツールで共用しています。また、Firefox の拡張機能から使用することもできます。この記事では、テキストを編集するときのエディタ自身の使い方を説明します。 |
||
| 100 | ツールボックス | |
| ツールボックスは、Firefox に組み込まれている開発ツールのほとんどを提供するホームです。 | ||
| 101 | デバッガー | Debugger, Debugging, Dev Tools, Tools, l10n:priority, ツール, デバッガー, デバッグ, 開発ツール |
| JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。 | ||
| 102 | UI ツアー | |
| 本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。UI は、縦に 3 つのパネルへ分かれています。 | ||
| 103 | オプション | |
| デバッガーには独自の設定メニューがあり、ツールバー 上のアイコンからアクセスできます: | ||
| 104 | キーボードショートカット | |
| 1. 一部の Mac はデフォルトで、ファンクションキーが特別な機能に再割り当てされています。例えば、画面の明るさや音量の変更です。これらのキーを標準的なファンクションキーとして使用するためのガイド (日本語版) をご覧ください。再割り当てされたキーを標準的なファンクションキーとして使用するには、同時に Function キーも押下してください (よってプロファイラーを開くには、Shift + Function + F5 を押してください)。 | ||
| 105 | ソースマップのエラー | Debugger, ソースマップ, ツール, デバッグ, リファレンス, 開発ツール |
| ソースマップはJSONファイルで、ブラウザで見られるように変換されたソースを、開発者が書いた元のソースと関連付けることができます。ソースマップを操作する際に問題が発生することがあります。このページでは、最も一般的な問題とその解決方法について説明します。 | ||
| 106 | デバッガの使い方 | TopicStub |
| No summary! | ||
| 107 | DOM イベントでブレークする | |
| 特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。 | ||
| 108 | DOM ノードのハイライトと調査 | |
| 変数ペイン で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。 | ||
| 109 | eval ソースをデバッグする | |
eval() に渡される文字列や Function コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。 |
||
| 110 | アドオンでデバッグにアクセスする | |
| 以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます: | ||
| 111 | コードをステップ実行する | |
| デバッガーがブレークポイントで停止しているときに、ツールバー にある 4 つのボタンを使用してステップ実行ができます: | ||
| 112 | ソースをブラックボックス化する | |
| 現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。 | ||
| 113 | ソースマップを使用する | |
| ブラウザーが実行する JavaScript ソースは、開発者が作成した元のソースから何らかの方法で変換される場合があります。例えば: | ||
| 114 | デバッガーを開く | |
| デバッガーを開く方法は 3 つあります: | ||
| 115 | ブレークポイントの無効化 | |
| ブレークポイントを 1 つ無効化するには、ブレークポイント一覧 でブレークポイントの隣にあるチェックボックスのチェックを外します。 | ||
| 116 | ブレークポイントを設置する | JavaScript, Tools |
| 以下のいずれかの方法で、ブレークポイントを設置できます: | ||
| 117 | 例外で停止する | |
ツールバー でアイコン  をクリックすると、例外 で停止するようにデバッガーを指定できます。 |
||
| 118 | 圧縮されたファイルを整形する | JavaScript |
ソースペイン のアイコン  をクリックすると、圧縮された (minified) ファイルを整形します。デバッガーは整形したソースを表示して、"[original-name]:formatted" というような名前の新しいファイルとして表示します。 |
||
| 119 | 変数を調査、編集、ウォッチする | |
| コードがブレークポイントで停止したときはデバッガーの 変数ペイン で、変数の状態を調査できます: | ||
| 120 | 条件付きブレークポイントを設置する | |
通常のブレークポイントは、行に関連付けられます。プログラムがその行に達すると、デバッガーは停止します。条件付きブレークポイントは条件も関連付けられており、条件は 式 で表します。プログラムがその行に達すると、式が true に評価された場合に限りデバッガーが停止します。 |
||
| 121 | 検索する | |
| 特定のファイルを検索するには、Control + P (Mac では Command + P) を押下して検索文字列を入力します。入力内容に応じて、マッチするすべてのファイルを ソースペイン に表示します。上下矢印キーでリスト内を移動することができ、Return を押下するとファイルを開きます: | ||
| 122 | 検索とフィルタ | |
| ツールバーのスクリプトフィルタを使用して、デバッガ内にある項目を検索できます: | ||
| 123 | 監視式を設定する | |
| コードのデバッグで、実行が停止しているときに式を監視すると役に立つことがあります。デバッガーには、監視する式 (監視式) を入力するペインがあります。コードをステップ実行するとデバッガーが式を監視して、その結果を返します。 | ||
| 124 | 新しいデバッガーの制限事項 | |
| バージョン 52 より、新しいデバッガーを Firefox に内蔵しています。現在、新しいデバッガーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。新しいデバッガーは旧デバッガーより高速かつ信頼性が高く、将来の開発のための基盤を提供します。 | ||
| 125 | デバッガー (Firefox 52 より前) | |
| JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。 | ||
| 126 | How to | NeedsTranslation, TopicStub |
| これらの記事では、デバッガの使用方法について説明します。 | ||
| 127 | DOM イベントでブレークする | |
| 特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。 | ||
| 128 | DOM ノードのハイライトと調査 | |
| 変数ペイン で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。 | ||
| 129 | eval ソースをデバッグする | |
eval() に渡される文字列や Function コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。 |
||
| 130 | アドオンでデバッグにアクセスする | |
| 以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます: | ||
| 131 | コードをステップ実行する | |
| コードがブレークポイントで止まったときは、ツールバー の左側にある 4 つのボタンを使用してステップ実行を実施できます: | ||
| 132 | ソースをブラックボックス化する | |
| 現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。 | ||
| 133 | ソースマップを使用する | |
| JavaScript のソースは、より効率よくサーバーから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript や TypeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第にプログラムによって作られる傾向があります。ソースマップ の使用によって、デバッグをとても容易にするために、デバッガーが実行中のコードを元のソースファイルと対応づけることができます。 | ||
| 134 | デバッガーを開く | |
メニューボタン (  ) をクリックして [開発ツール]、 [デバッガー] の順にクリックすると、デバッガーが開きます。あるいは、以下のキーボードショートカットを使用します: |
||
| 135 | ブレークポイントの無効化 | |
| ソースリストペイン で、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります: | ||
| 136 | ブレークポイントを設置する | |
| デバッガーで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。 | ||
| 137 | 圧縮されたファイルを整形する | |
| 圧縮された (minified) ファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください: | ||
| 138 | 変数を調査、編集、ウォッチする | |
| コードがブレークポイントで停止したときはデバッガーの 変数ペイン で、変数の状態を調査できます: | ||
| 139 | 条件付きブレークポイントを設置する | |
| 条件付きブレークポイントを設置するには ソースペイン で、設置したい行でコンテキストメニューを開いて [条件付きブレークポイントを設置] を選択します。そして、表示されたポップアップに条件式を入力します: | ||
| 140 | 検索とフィルター | |
| ツールバー のスクリプトフィルターを使用して、デバッガー内にある項目を検索できます: | ||
| 141 | UI ツアー | |
| 本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。デバッガーの UI は 6 つの主要なセクションに分かれており、順番に説明していきます: | ||
| 142 | オプション | |
| デバッガーには独自の設定メニューがあり、ツールバー 上のアイコンからアクセスできます: | ||
| 143 | キーボードショートカット | |
| これらのショートカットは、ツールボックス内の全ツールで動作します。 | ||
| 144 | ブレークポイントの無効化 | |
| ブレークポイントを無効にするには、ソースリストペインでブレークポイントのエントリの横にあるチェックボックスをオフにします。 | ||
| 145 | ネットワークモニター | Debugging, Dev Tools, Firefox, Guide, Networking, Tools, l10n:priority |
| ネットワークモニターは、 Firefox が実行したすべてのネットワーク要求 (たとえばページの読み込みや XMLHttpRequests による) について、各要求でどれだけ時間がかかったかや要求の詳細情報を表示します。 | ||
| 146 | スロットリング | 110n:priority, Dev Tools, Firefox, ガイド, ツール, デバッグ, ネットワーク |
| ネットワークモニタを使用するとネットワーク速度を調整してさまざまな接続速度をエミュレートすることができるため、アプリケーションがさまざまな接続タイプでどのように動作するかを確認できます。 | ||
| 147 | ネットワークモニターの記録 | 110n:priority, Dev Tools, Firefox, ガイド, ツール, デバッグ, ネットワーク |
| 一時停止ボタンを使用してネットワークトラフィックの監視を一時停止および再開できます。 | ||
| 148 | ネットワークモニターツールバー | 119n:priority, Dev Tools, Firefox, ガイド, ツール, デバッグ, ネットワーク |
| ネットワークモニタには2つのツールバー領域があり、1つはメインセクションの上に、もう１つは下にあります。 | ||
| 149 | ネットワークリクエストの詳細 | 110n:priority, Dev Tools, Firefox, ガイド, ツール, デバッグ, ネットワーク |
| リクエストの詳細ペインはリクエストリストのネットワークリクエストをクリックすると表示されます。このペインには、リクエストに関するより詳細な情報が表示されます。 | ||
| 150 | ネットワークリクエストリスト | 110n:priority |
| ネットワークモニターのリクエストリストには、ページのロード中に行われたすべてのネットワークリクエストの一覧が表示されます。 | ||
| 151 | パフォーマンス分析 | 110n:priority, Dev Tools, Firefox, ガイド, ツール, デバッグ, ネットワーク |
| ネットワークモニタにはパフォーマンス分析ツールが含まれており、ブラウザーがサイトのさまざまな部分をダウンロードするのに必要な時間を表示できます。 | ||
| 152 | バリデータ | Website validator, html5 validator, ツール, バリデータ |
| このドキュメントでは開発者がWeb ページを検証するためのさまざまなリソースを一覧にしています。 | ||
| 153 | パフォーマンス | |
| パフォーマンスツールは、サイトの一般的な応答性、JavaScript やレイアウトのパフォーマンスを知ることができるツールです。パフォーマンスツールを使用してあなたのサイトで、ある期間の記録やプロファイルを作成できます。記録後は、プロファイル内でサイトをレンダリングするためにブラウザーが行ったことの概要や、プロファイル内のフレームレートを表示します。 | ||
| 154 | Examples | TopicStub |
| パフォーマンスシナリオとチュートリアルのデモページのリストです。 | ||
| 155 | ソートアルゴリズムの比較 | |
| この記事では、2つのパフォーマンスガイドで使用する簡単なサンプルプログラムについて説明します。コールツリーのガイドとフレームチャートのガイドです。 | ||
| 156 | UI ツアー | |
| パフォーマンスツールの UI は、大きく 4 つに分けられます: | ||
| 157 | コールツリー | JavaScript, パフォーマンス, メモリ |
| コールツリーは、サンプリングプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。 | ||
| 158 | シナリオ | TopicStub |
| パフォーマンスシナリオ | ||
| 159 | CSS プロパティのアニメーション | |
| CSS アニメーションでは複数のキーフレームを指定して、それぞれのキーフレームではアニメーションの特定の段階における要素の外見を定義するために CSS を使用します。ブラウザは、それぞれのキーフレームから次のキーフレームへ遷移することでアニメーションを作成します。 | ||
| 160 | 集約的な JavaScript | |
| 自身でも試してみたい場合は、デモ Web サイトがこちらにあります。 | ||
| 161 | タイムライン | |
 |
||
| 162 | フレームチャート | |
| 呼び出しツリーとフレームチャートはどちらもサイトの JavaScript を分析するために使用します。またどちらも、記録している間定期的に取得する JavaScript エンジンのスタックのサンプルをデータとして使用します。 | ||
| 163 | フレームレート | |
| フレームレートは、ビデオデバイスが生成できる画像 (またはフレーム) のペースです。これは映画やゲームで特に知られていますが、現在は Web サイトや Web アプリのパフォーマンス測定として広く使用されます。 | ||
| 164 | プロファイラのチュートリアル | |
| JavaScript プロファイラは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。 | ||
| 165 | メモリ割り当て | |
| メモリ割り当てビューを有効にするため、プロファイルを記録する前にパフォーマンスツールの設定で "メモリ割り当てを記録" にチェックを入れなければなりません。そして通常どおりプロファイルの記録を行うと、ツールバーに "メモリ割り当て" という新たなタブが現れます: | ||
| 166 | 操作手順 | |
| パフォーマンスツールを開く方法は以下のとおりです: | ||
| 167 | ブラウザーコンソール | Web Development, WebDevelopment:Tools, ツール, デバッグ, ブラウザ |
| ブラウザーコンソールは Web コンソール に似ていますが、ひとつのコンテンツタブではなくブラウザー全体に適用されます。 | ||
| 168 | ブラウザーツールボックス | Debug, Firefox, JavaScript |
| ブラウザーツールボックスは通常の ツールボックス とは異なり、ウェブページだけでなくアドオンやブラウザー自体の JavaScript をデバッグすることができます。ブラウザーツールボックスのコンテキストは単一のタブ内のページではなく、ブラウザー全体になります。 | ||
| 169 | ページの一部を測定する | DevTools, Firefox, ツール, 測定 |
| Firefox 59の新機能 | ||
| 170 | メモリー | DevTools, Firefox, Mozilla, Tools |
| メモリーツールを使用して、カレントタブのメモリー ヒープ のスナップショットを取得できます。そして、どのオブジェクトがどれだけメモリーを使用しているかや、コードのどこでメモリーを割り当てているかを表示可能な、ヒープのさまざまなビューを提供します。 | ||
| 171 | DOMの割り当て例 | |
| この記事では、メモリーツールの機能を示すために使用するシンプルなページについて説明します。 | ||
| 172 | Monster example | |
| この記事では、メモリツールの機能を示すために使用するシンプルなページについて説明します。 | ||
| 173 | ツリーマップビュー | |
| ツリーマップビューはスナップショットを視覚的に表現して、どのオブジェクトがもっとも多くのメモリを使用しているかの見解をすばやく得る助けになります。 | ||
| 174 | ドミネーター | |
| JavaScript のようにガベージコレクションを行う言語では、通常プログラマーはメモリーの解放について悩む必要はありません。プログラマーはオブジェクトを作成および使用するだけでよく、オブジェクトが不要になればランタイムがクリーンアップを引き受けて、オブジェクトが占有していたメモリを解放します。 | ||
| 175 | ドミネータービュー | |
| Firefox 46 より、メモリーツールに新たなビューであるドミネータービューが加わりました。これは、サイトによって割り当てられたオブジェクトの " 保持サイズ " を知るのに役立ちます。保持サイズはオブジェクト自身のサイズと、参照によって保持されているオブジェクトのサイズを合算したものです。 | ||
| 176 | ヒープのスナップショットを比較する | |
| Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。 | ||
| 177 | 基本操作 | |
| Firefox 50 より前のバージョンでは、メモリーツールをデフォルトで無効化しています。有効化するには開発ツールのオプションを開き、"標準の Firefox 開発ツール" 配下の "メモリー" にチェックを入れてください: | ||
| 178 | 総計ビュー | |
| Firefox 48 より前のバージョンでは、このビューがヒープスナップショットの既定のビューでした。Firefox 48 より既定のビューが ツリーマップビュー になりましたが、"表示:" のドロップダウンリストで総計ビューに切り替えできます: | ||
| 179 | リモートデバッグ | Tools, l10n:priority |
| デスクトップ版の Firefox の開発ツール を使用して、別のブラウザーやランタイムで実行しているウェブサイトやウェブアプリをデバッグできます。別のブラウザーはツールと同じデバイス、あるいは USB で接続した電話機など別のデバイスに置くことができます。 | ||
| 180 | Android 版 Firefox のリモートデバッグ | |
| このガイドでは、Android 版 Firefox で実行しているコードを USB 経由で調査あるいはデバッグするために、リモートデバッグを使用する方法を説明します。 | ||
| 181 | Firefox for Metro のリモートデバッグ | |
| この記事では、デスクトップ上の Firefox の開発ツールを使用して、新しい Windows 8 ("Metro-style") Firefox アプリケーションで実行しているコードを調べ、コード化するリモートデバッグの使い方について説明します。 | ||
| 182 | Thunderbird のリモートデバッグ | Debug, Tutorial, thunderbird |
| このガイドでは、Thunderbird で実行しているコードの調査やデバッグを リモートデバッグ する方法を説明します。 | ||
| 183 | USB 経由で Android 版 Firefox のデバッグを行う | l10n:priority, remoteDebug |
| この記事では、Firefox 36 以降で Firefox の開発ツール を Android 版 Firefox に接続する方法を説明します。Wi-Fi 経由で接続する方法については、こちらのページ をご覧ください。 | ||
| 184 | USB 経由で Firefox OS のデバッグを行う | |
| このガイドでは、USB 経由で Firefox OS デバイスに Firefox 開発ツールを接続する方法を説明します。 | ||
| 185 | WebIDE を使用した Firefox for Android のデバッグ | ガイド, ツール, デバッグ |
| この記事では、Firefox開発ツールを Firefox 36 以降の Android 用 Firefox に接続する方法について説明します。 | ||
| 186 | Wi-Fi 経由で Android 版 Firefox のデバッグを行う | |
| この記事では、Wi-Fi 経由で Android 版 Firefox に Firefox 開発ツール を接続する方法を説明します。以前から USB 経由で Android 版 Firefox にツールを接続することができましたが、Wi-Fi 経由の接続は USB より便利で信頼性が高い方法です。 | ||
| 187 | Wi-Fi 経由で Firefox OS のデバッグを行う | |
| この記事では、Wi-Fi 経由で Firefox OS デバイスに Firefox 開発ツールを接続する方法を説明します。 | ||
| 188 | デスクトップ版 Chrome のリモートデバッグ | |
| デスクトップ環境で実行している Google Chrome に Firefox 開発ツールを接続する方法を説明します。 | ||
| 189 | デスクトップ版 Firefox のデバッグを行う | Debugging, Guide, Tools |
| このガイドでは、同じマシン上の別のインスタンスとして実行しているデスクトップ版 Firefox に、Firefox 開発ツールを接続する方法を説明します。ここでは、デバッグされる Firefox のインスタンスをデバッグ先、デバッグを行う Firefox のインスタンスをデバッグ元と呼びます。 | ||
| 190 | リリースノート | |
| Firefox 51 から Firefox 52 の間に解決した開発ツール関連のバグ一覧 | ||
| 191 | レスポンシブデザインモード | Design, Dev Tools, Firefox, Guide, Responsive Design, Tools, Web Development, l10n:priority |
| レスポンシブデザイン は、さまざまな端末、特にデスクトップやラップトップだけでなく携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。 | ||
| 192 | レスポンシブデザインモード (Firefox 52 より前) | |
| レスポンシブデザイン は、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインモードは、ウェブサイトやウェブアプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。 | ||
| 193 | 定規 | DevTools, Firefox, Rulers, Tools |
| Firefox 40 の新機能 | ||
| 194 | 設定 | |
| Firefox 62 から、開発者ツールの設定を開くためのアイコンがタブの右側にある ...(エリプシス) をクリックもしくはタッチすることでアクセスするメニューに移動しました。 | ||
| 195 | 開発ツール関連ドキュメントの索引 | Index, Tools |
| 195 ページあります: | ||
