157 ページあります:
| # | ページ | タグと要約 |
|---|---|---|
| 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 | Add-ons | NeedsTranslation, TopicStub, Web Development, Web Development:Tools |
| Developer tools that are not built into Firefox, but ship as separate add-ons. | ||
| 4 | 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 の階層を探索することができます。 | ||
| 5 | DOM Inspector FAQ | DOM_Inspector |
| Inspector の URL バーに URL を入力して Enter キーを押します。あるいは、Inspector の [ファイル] メニューから [URL を Inspect] を選びます。開いている XUL ウィンドウを調べたいのであれば、[ファイル] メニューから [ウィンドウを Inspect] を選びます。 | ||
| 6 | Contributing | NeedsTranslation, TopicStub |
| This is a guide to contributing to the Firefox Developer Tools. At a high level, the workflow for a contributor looks like this: | ||
| 7 | Nightly を使ってコントリビュートする | |
| このページでは Firefox 開発ツール へコントリビュートするシンプルな方法を説明します。この方法であれば、Firefox をビルドしたり特別な環境を用意する必要はありません。 | ||
| 8 | DOM プロパティビューアー | DOM, Tools, Web Development |
DOM プロパティビューアーは、現在のページまたは 選択したフレーム の window オブジェクトから始まる DOM のプロパティを、展開可能なツリー構造で調査できるツールです。 |
||
| 9 | Firebug から移行する | Firebug, Migration |
| Firebug から Firefox 開発ツールへ移行する際に、Firebug で愛用していた機能が開発ツールのどこにあるかと考えるかもしれません。以下のリストは、Firebug のユーザーが開発ツールへ移行するための支援を目指しています。 | ||
| 10 | Firefox OS 1.1 Simulator | |
| No summary! | ||
| 11 | JSON ビューアー | |
| Firefox に JSON ビューアーが含まれています。JSON ファイルをブラウザーに読み込むと、分析して構文をハイライト表示します。配列やオブジェクトは折りたたんで表示しており、"+" アイコンを使用して展開できます。 | ||
| 12 | JavaScript プロファイラ | Debugging, Firefox, Guide, Profiler, Profiling, Tools |
| プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。 | ||
| 13 | Paint Flashing Tool | |
| Paint Flashing Tool はアクティブ時に、何らかの入力 (例えばユーザーがマウスを動かしたりスクロールしたりするなど) への応答としてブラウザーが再描画を行わなければならない部分を強調表示します。このツールにより、ウェブサイトがブラウザーに過剰な再描画を行わせていないかを明らかにできます。再描画はパフォーマンスへの影響が大きい処理になりえるため、不必要な再描画をなくすことでウェブサイトの応答性を改善できます。 | ||
| 14 | Tips | Dev Tools, Tools, Web Development |
| スクリーンショット: | ||
| 15 | Valence (Firefox ツールアダプタ) | |
| Valence (旧名 Firefox ツールアダプタ) は、Gecko ベースの Firefox、Android 版 Firefox、Firefox OS ブラウザに限らず、様々なブラウザを Firefox 開発者ツールでデバッグできるようにする実験的なアドオンです。 | ||
| 16 | Web Audio エディター | Tools |
Web Audio API を使うとき、開発者は AudioContext を生成します。そのコンテキストでは、以下のようないくつもの AudioNode を構築します: |
||
| 17 | WebIDE | Apps, Debugging, Firefox OS, WebIDE, tool, アプリ, ツール |
| WebIDE では、始めに 1 つ以上のランタイムをセットアップします。ランタイムは、アプリの実行やデバッグを行う環境です。ランタイムは USB (Firefox 39 以降では Wi-Fi も可能) でパソコンに接続した Firefox OS デバイスか、パソコン自体にインストールした Firefox OS シミュレータを使用できます。 | ||
| 18 | WebIDE で Cordova アプリを扱う | |
| Apache Cordova を使用すると HTML、JavaScript、CSS を使用してアプリを作成できます。また iOS や Android といったモバイルプラットフォーム向けのネイティブアプリも生成できます。Cordova では、Firefox OS 向けのアプリも作成できます。 | ||
| 19 | WebIDE のトラブルシューティング | |
| Android OS で実行している Firefox のインスタンスに接続できない場合は、以下の項目を確認してください: | ||
| 20 | WebIDE を開く | DevTools, WebIDE, opening |
| WebIDE を開く方法は 3 つあります: | ||
| 21 | アプリの作成と編集 | |
| WebIDE の左側にあるサイドバーで、以下のことをできます: | ||
| 22 | アプリの実行とデバッグ | |
| アプリを実行する準備ができたら、ランタイムサイドバーでランタイムを選択しなければなりません。使用できるランタイムがない場合は、ランタイムのセットアップで追加方法を確認してください。 | ||
| 23 | モニタ | |
 |
||
| 24 | ランタイムのセットアップ | |
| ランタイムは Web ブラウザなど、アプリの実行やデバッグを行う環境です。以下のようなランタイムがあります: | ||
| 25 | ランタイムメニュー | |
| ランタイムを選択すると、ランタイムの設定にアクセスできます: | ||
| 26 | about:debugging | |
| about:debugging ページは、1 か所からさまざまなデバッグ対象に Firefox の開発ツールを接続できる場所を提供します。現在サポートしているデバッグ対象は、リスタートレスアドオン、タブ、Worker の 3 種類です。 | ||
| 27 | iframe での作業 | Debugging, DevTools, Developer Tools, Frames, Tools |
Firefox 34 より開発ツールで、ドキュメント内にある特定の iframe を対象にすることができます。 |
||
| 28 | インスペクター | CSS, DOM, HTML, Stylesheets, Tools, Web Development, Web Development:Tools, l10n:priority |
| ページの HTML や CSS の調査や変更を行うために、インスペクターを使用しましょう。 | ||
| 29 | HTML panel | |
| ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。 | ||
| 30 | How to | NeedsTranslation, TopicStub |
| ここには様々な HOW TO へのリンクがあります。これらのリンク先では、各技術の HOW TO について詳しく説明しています。 | ||
| 31 | CSS shapes を編集する | CSS, DevTools, Page Inspector, Rules view, Tools, highlighter, shapes |
| ルールビュー で、CSS shape の値の隣に灰色と白の長方形の見本を表示します: | ||
| 32 | CSS の調査と編集 | Guide, Inspector, Tools |
| CSS ペイン で、ページの CSS の調査や編集を行えます。 | ||
| 33 | CSS フィルターを編集する | CSS, DevTools, Filters, Page Inspector, Tools |
ルールビュー で、filter プロパティの隣に丸い灰色と白色のマークを表示します: |
||
| 34 | HTML の調査と編集 | Guide, Inspector, Tools |
| HTML ペイン で、ページの HTML の調査や編集を行えます。 | ||
| 35 | Transform の可視化 | Guide, Inspector, Tools |
ルールビュー で transform プロパティにマウスポインターを載せると、ページ上に変形操作をオーバーレイ表示します: |
||
| 36 | アニメーションを扱う | Guide, Inspector, Tools |
| 本記事では、アニメーションの視覚化と編集が可能な 3 つのツールを扱います: | ||
| 37 | Animation inspector example: Web Animations API | |
| Web Animations API を使用するアニメーションのサンプルです。 | ||
| 38 | Animations examples | |
| Example animation using CSS transitions. | ||
| 39 | アニメーションインスペクタ (Firefox 41 および 42) | |
| Firefox 41 および 42 では、アニメーションインスペクタで以下のことができます: | ||
| 40 | イベントリスナーの調査 | Guide, Inspector, Tools |
| Firefox 33 より HTML ペイン で、イベントリスナーが設定されている要素の隣に "ev" アイコンを表示します: | ||
| 41 | インスペクターの API を使用する | Inspector, Reference, Référence(2), Tools |
| Firefox アドオンは、chrome://browser/content/devtools/inspector/inspector.xul コンテキストから以下のオブジェクトにアクセスできます: | ||
| 42 | インスペクターを開く | Guide, Inspector, Tools |
| インスペクターを開く方法は、主に 2 つあります: | ||
| 43 | ウェブコンソールからインスペクターを使用する | Guide, Inspector, Tools |
インスペクターで選択されている要素は、変数 $0 を使用してウェブコンソールから参照できます。 |
||
| 44 | グリッドレイアウトを調査する | Guide, Inspector, Tools |
| Firefox 52 よりインスペクターで、グリッドレイアウトを調査するときにグリッドの状態を重ねて表示させることができます。 | ||
| 45 | フォントを確認する | Guide, Inspector, Tools |
ルールビュー で font-family プロパティにマウスポインターを載せると、フォントのサンプルをツールチップで表示します |
||
| 46 | ページ内の要素を再配置する | |
| Firefox 48 より、絶対的に配置されている要素をページ上でドラッグして移動できるようになりました。 | ||
| 47 | ボックスモデルの調査と編集 | Guide, Tools |
| 要素選択ボタン を押しているとき、ページ上で要素にマウスポインターを載せると、要素の ボックスモデル をオーバーレイで表示します: | ||
| 48 | 背景画像を確認する | |
| ルールビュー で、background-image で指定した画像のプレビューを確認できます。ルールにマウスポインターを載せてください: | ||
| 49 | 色の調査と選択 | Guide, Inspector, Tools |
| CSS ペインの ルールビュー ではルールに色の値が含まれる場合に、値の隣に色のサンプルを表示します: | ||
| 50 | 要素を選択する | Guide, Inspector, Tools |
| 選択された要素 は、ページ内でインスペクターが現在注目している要素です。選択された要素は HTML ペイン に表示します。また、要素の CSS を CSS ペイン に表示します。 | ||
| 51 | Style panel | |
| ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。 | ||
| 52 | UI ツアー | Guide, Inspector, Tools |
| 本記事は、インスペクターのユーザーインターフェイスの主要部を紹介するクイックツアーです。 | ||
| 53 | キーボードショートカット | |
| これらのショートカットは、ページから要素を選択 がアクティブであるときに動作します。 | ||
| 54 | ウェブコンソール | Debugging, Guide, Security, Tools, Web Development, Web Development:Tools, l10n:priority, web console, ツール, デバッグ |
| ウェブコンソールとは: | ||
| 55 | Web Console Helpers | Debugging, Web Development, web console |
| ウェブコンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。 | ||
| 56 | ウェブコンソールを開く | |
| ウェブコンソールを開く方法は以下のとおりです: | ||
| 57 | キーボードショートカット | |
| これらのショートカットは、コマンドラインインタプリター 内で動作します。 | ||
| 58 | コマンドラインインタープリター | |
| ウェブコンソールのコマンドラインで、JavaScript の構文を即座に評価することができます。 | ||
| 59 | コンソールのメッセージ | |
| ウェブコンソールのほとんどは、メッセージ表示ペインが占めています: | ||
| 60 | コンソールの常時表示 | |
| コンソールを別のツールと並べて使用できます。ツールボックスで別のツールを使用しているときに Esc キーまたは ツールバー の "コンソールの常時表示を切り替えます" ボタンを押下してください。ツールボックスが分割表示されて元のツールが上段、ウェブコンソールが下段に表示されます。 | ||
| 61 | 高度な出力 | |
| ウェブコンソールでオブジェクトを出力する際は、オブジェクト名だけでなく、より高度な情報も表示します。特に、以下のような情報です: | ||
| 62 | キーボードショートカット一覧 | Tools, l10n:priority |
| 本ページでは、Firefox 内蔵の開発ツールで使用している、すべてのキーボードショートカットを一覧化しています。 | ||
| 63 | シェーダーエディター | |
| シェーダーエディターで、WebGL で使用するバーテックスシェーダーおよびフラグメントシェーダーの参照や編集ができます。 | ||
| 64 | スクラッチパッド | Tools, Web Development, Web Development:Tools, l10n:priority |
| スクラッチパッドは、JavaScript の実験環境を提供します。ウェブページと対話するコードの記述、実行、結果の確認ができます。 | ||
| 65 | スクリーンショットを撮影する | Tools |
| 開発ツールを使用して、ページ全体またはページ内のひとつの要素のスクリーンショットを撮影できます。 | ||
| 66 | スタイルエディター | CSS, Stylesheets, Tools, Web Development, Web Development:Tools |
| スタイルエディターでできること: | ||
| 67 | ストレージインスペクター | Cookies, Dev Tools, Firefox, Guide, IndexedDB, Local Storage, Session Storage, Storage, Tools |
| ストレージインスペクターで、ウェブページが使用できるさまざまな種類のストレージを調査できます。現在は、以下の種類のストレージの調査に使用できます: | ||
| 68 | スポイト | |
| スポイトツールで、ページ内から色を選択することができます。これはページ上で拡大鏡のように動作して、ピクセル単位の精度で選択することができます。拡大鏡の下には、現在選択しているピクセルの色の値を、オプション > 調査 で選択した色単位で表示します: | ||
| 69 | ソースを表示 | DevTools, Firefox, view page source |
| ソース表示機能を使用して、表示しているページの HTML や XML を閲覧できます。ソースを表示する方法は以下のとおりです: | ||
| 70 | ソースエディタの使用 | |
ソースエディタは source-editor.jsm によって提供されるエディタコンポーネントで、スクラッチパッド や スタイルエディタ などの開発ツールで共用しています。また、Firefox の拡張機能から使用することもできます。この記事では、テキストを編集するときのエディタ自身の使い方を説明します。 |
||
| 71 | ツールボックス | |
| ツールボックスは、Firefox に組み込まれている開発ツールのほとんどを提供するホームです。 | ||
| 72 | デバッガー | Debugger, Debugging, Dev Tools, Tools, l10n:priority, ツール, デバッガー, デバッグ, 開発ツール |
| JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。 | ||
| 73 | How to | NeedsTranslation, TopicStub |
| No summary! | ||
| 74 | DOM イベントでブレークする | |
| 特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。 | ||
| 75 | DOM ノードのハイライトと調査 | |
| 変数ペイン で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。 | ||
| 76 | eval ソースをデバッグする | |
eval() に渡される文字列や Function コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。 |
||
| 77 | アドオンでデバッグにアクセスする | |
| 以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます: | ||
| 78 | コードをステップ実行する | |
| デバッガーがブレークポイントで停止しているときに、ツールバー にある 4 つのボタンを使用してステップ実行ができます: | ||
| 79 | ソースをブラックボックス化する | |
| 現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。 | ||
| 80 | ソースマップを使用する | |
| ブラウザーが実行する JavaScript ソースは、開発者が作成した元のソースから何らかの方法で変換される場合があります。例えば: | ||
| 81 | デバッガーを開く | |
| デバッガーを開く方法は 3 つあります: | ||
| 82 | ブレークポイントの無効化 | |
| ブレークポイントを 1 つ無効化するには、ブレークポイント一覧 でブレークポイントの隣にあるチェックボックスのチェックを外します。 | ||
| 83 | ブレークポイントを設置する | JavaScript, Tools |
| 以下のいずれかの方法で、ブレークポイントを設置できます: | ||
| 84 | 例外で停止する | |
ツールバー でアイコン  をクリックすると、例外 で停止するようにデバッガーを指定できます。 |
||
| 85 | 圧縮されたファイルを整形する | |
ソースペイン のアイコン  をクリックすると、圧縮された (minified) ファイルを整形します。デバッガーは整形したソースを表示して、"[original-name]:formatted" というような名前の新しいファイルとして表示します。 |
||
| 86 | 変数を調査、編集、ウォッチする | |
| コードがブレークポイントで停止したときはデバッガーの 変数ペイン で、変数の状態を調査できます: | ||
| 87 | 条件付きブレークポイントを設置する | |
通常のブレークポイントは、行に関連付けられます。プログラムがその行に達すると、デバッガーは停止します。条件付きブレークポイントは条件も関連付けられており、条件は 式 で表します。プログラムがその行に達すると、式が true に評価された場合に限りデバッガーが停止します。 |
||
| 88 | 検索する | |
| 特定のファイルを検索するには、Control + P (Mac では Command + P) を押下して検索文字列を入力します。入力内容に応じて、マッチするすべてのファイルを ソースペイン に表示します。上下矢印キーでリスト内を移動することができ、Return を押下するとファイルを開きます: | ||
| 89 | 検索とフィルタ | |
| ツールバーのスクリプトフィルタを使用して、デバッガ内にある項目を検索できます: | ||
| 90 | 監視式を設定する | |
| コードのデバッグで、実行が停止しているときに式を監視すると役に立つことがあります。デバッガーには、監視する式 (監視式) を入力するペインがあります。コードをステップ実行するとデバッガーが式を監視して、その結果を返します。 | ||
| 91 | UI ツアー | |
| 本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。UI は、縦に 3 つのパネルへ分かれています。 | ||
| 92 | オプション | |
| デバッガーには独自の設定メニューがあり、ツールバー 上のアイコンからアクセスできます: | ||
| 93 | キーボードショートカット | |
| 1. 一部の Mac はデフォルトで、ファンクションキーが特別な機能に再割り当てされています。例えば、画面の明るさや音量の変更です。これらのキーを標準的なファンクションキーとして使用するためのガイド (日本語版) をご覧ください。再割り当てされたキーを標準的なファンクションキーとして使用するには、同時に Function キーも押下してください (よってプロファイラーを開くには、Shift + Function + F5 を押してください)。 | ||
| 94 | 新しいデバッガーの制限事項 | |
| バージョン 52 より、新しいデバッガーを Firefox に内蔵しています。現在、新しいデバッガーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。新しいデバッガーは旧デバッガーより高速かつ信頼性が高く、将来の開発のための基盤を提供します。 | ||
| 95 | デバッガー (Firefox 52 より前) | |
| JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。 | ||
| 96 | How to | NeedsTranslation, TopicStub |
| These articles describe how to use the debugger. | ||
| 97 | DOM イベントでブレークする | |
| 特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。 | ||
| 98 | DOM ノードのハイライトと調査 | |
| 変数ペイン で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。 | ||
| 99 | eval ソースをデバッグする | |
eval() に渡される文字列や Function コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。 |
||
| 100 | アドオンでデバッグにアクセスする | |
| 以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます: | ||
| 101 | コードをステップ実行する | |
| コードがブレークポイントで止まったときは、ツールバー の左側にある 4 つのボタンを使用してステップ実行を実施できます: | ||
| 102 | ソースをブラックボックス化する | |
| 現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。 | ||
| 103 | ソースマップを使用する | |
| JavaScript のソースは、より効率よくサーバーから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript や TypeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第にプログラムによって作られる傾向があります。ソースマップ の使用によって、デバッグをとても容易にするために、デバッガーが実行中のコードを元のソースファイルと対応づけることができます。 | ||
| 104 | デバッガーを開く | |
メニューボタン (  ) をクリックして [開発ツール]、 [デバッガー] の順にクリックすると、デバッガーが開きます。あるいは、以下のキーボードショートカットを使用します: |
||
| 105 | ブレークポイントの無効化 | |
| ソースリストペイン で、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります: | ||
| 106 | ブレークポイントを設置する | |
| デバッガーで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。 | ||
| 107 | 圧縮されたファイルを整形する | |
| 圧縮された (minified) ファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください: | ||
| 108 | 変数を調査、編集、ウォッチする | |
| コードがブレークポイントで停止したときはデバッガーの 変数ペイン で、変数の状態を調査できます: | ||
| 109 | 条件付きブレークポイントを設置する | |
| 条件付きブレークポイントを設置するには ソースペイン で、設置したい行でコンテキストメニューを開いて [条件付きブレークポイントを設置] を選択します。そして、表示されたポップアップに条件式を入力します: | ||
| 110 | 検索とフィルター | |
| ツールバー のスクリプトフィルターを使用して、デバッガー内にある項目を検索できます: | ||
| 111 | UI ツアー | |
| 本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。デバッガーの UI は 6 つの主要なセクションに分かれており、順番に説明していきます: | ||
| 112 | オプション | |
| デバッガーには独自の設定メニューがあり、ツールバー 上のアイコンからアクセスできます: | ||
| 113 | キーボードショートカット | |
| これらのショートカットは、ツールボックス内の全ツールで動作します。 | ||
| 114 | ネットワークモニター | Debugging, Dev Tools, Firefox, Guide, Networking, Tools, l10n:priority |
| ネットワークモニターは、 Firefox が実行したすべてのネットワーク要求 (たとえばページの読み込みや XMLHttpRequests による) について、各要求でどれだけ時間がかかったかや要求の詳細情報を表示します。 | ||
| 115 | パフォーマンス | |
| パフォーマンスツールは、サイトの一般的な応答性、JavaScript やレイアウトのパフォーマンスを知ることができるツールです。パフォーマンスツールを使用してあなたのサイトで、ある期間の記録やプロファイルを作成できます。記録後は、プロファイル内でサイトをレンダリングするためにブラウザーが行ったことの概要や、プロファイル内のフレームレートを表示します。 | ||
| 116 | Scenarios | NeedsTranslation, TopicStub |
| Performance scenarios | ||
| 117 | CSS プロパティのアニメーション | |
| CSS アニメーションでは複数のキーフレームを指定して、それぞれのキーフレームではアニメーションの特定の段階における要素の外見を定義するために CSS を使用します。ブラウザは、それぞれのキーフレームから次のキーフレームへ遷移することでアニメーションを作成します。 | ||
| 118 | 集約的な JavaScript | |
| 自身でも試してみたい場合は、デモ Web サイトがこちらにあります。 | ||
| 119 | UI ツアー | |
| パフォーマンスツールの UI は、大きく 4 つに分けられます: | ||
| 120 | コールツリー | |
| コールツリーは、サンプリングプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。 | ||
| 121 | タイムライン | |
 |
||
| 122 | フレームチャート | |
| 呼び出しツリーとフレームチャートはどちらもサイトの JavaScript を分析するために使用します。またどちらも、記録している間定期的に取得する JavaScript エンジンのスタックのサンプルをデータとして使用します。 | ||
| 123 | フレームレート | |
| フレームレートは、ビデオデバイスが生成できる画像 (またはフレーム) のペースです。これは映画やゲームで特に知られていますが、現在は Web サイトや Web アプリのパフォーマンス測定として広く使用されます。 | ||
| 124 | プロファイラのチュートリアル | |
| JavaScript プロファイラは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。 | ||
| 125 | メモリ割り当て | |
| メモリ割り当てビューを有効にするため、プロファイルを記録する前にパフォーマンスツールの設定で "メモリ割り当てを記録" にチェックを入れなければなりません。そして通常どおりプロファイルの記録を行うと、ツールバーに "メモリ割り当て" という新たなタブが現れます: | ||
| 126 | 操作手順 | |
| パフォーマンスツールを開く方法は以下のとおりです: | ||
| 127 | ブラウザーコンソール | Browser, Debugging, Tools, Web Development, WebDevelopment:Tools |
| ブラウザーコンソールは Web コンソール に似ていますが、ひとつのコンテンツタブではなくブラウザー全体に適用されます。 | ||
| 128 | ブラウザーツールボックス | Debug, Firefox, JavaScript |
| ブラウザーツールボックスは通常の ツールボックス とは異なり、ウェブページだけでなくアドオンやブラウザー自体の JavaScript をデバッグすることができます。ブラウザーツールボックスのコンテキストは単一のタブ内のページではなく、ブラウザー全体になります。 | ||
| 129 | メモリー | DevTools, Firefox, Mozilla, Tools |
| メモリーツールを使用して、カレントタブのメモリー ヒープ のスナップショットを取得できます。そして、どのオブジェクトがどれだけメモリーを使用しているかや、コードのどこでメモリーを割り当てているかを表示可能な、ヒープのさまざまなビューを提供します。 | ||
| 130 | DOMの割り当て例 | |
| この記事では、メモリーツールの機能を示すために使用するシンプルなページについて説明します。 | ||
| 131 | Monster example | |
| この記事では、メモリツールの機能を示すために使用するシンプルなページについて説明します。 | ||
| 132 | ツリーマップビュー | |
| ツリーマップビューはスナップショットを視覚的に表現して、どのオブジェクトがもっとも多くのメモリを使用しているかの見解をすばやく得る助けになります。 | ||
| 133 | ドミネーター | |
| JavaScript のようにガベージコレクションを行う言語では、通常プログラマーはメモリーの解放について悩む必要はありません。プログラマーはオブジェクトを作成および使用するだけでよく、オブジェクトが不要になればランタイムがクリーンアップを引き受けて、オブジェクトが占有していたメモリを解放します。 | ||
| 134 | ドミネータービュー | |
| Firefox 46 より、メモリーツールに新たなビューであるドミネータービューが加わりました。これは、サイトによって割り当てられたオブジェクトの " 保持サイズ " を知るのに役立ちます。保持サイズはオブジェクト自身のサイズと、参照によって保持されているオブジェクトのサイズを合算したものです。 | ||
| 135 | ヒープのスナップショットを比較する | |
| Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。 | ||
| 136 | 基本操作 | |
| Firefox 50 より前のバージョンでは、メモリーツールをデフォルトで無効化しています。有効化するには開発ツールのオプションを開き、"標準の Firefox 開発ツール" 配下の "メモリー" にチェックを入れてください: | ||
| 137 | 総計ビュー | |
| Firefox 48 より前のバージョンでは、このビューがヒープスナップショットの既定のビューでした。Firefox 48 より既定のビューが ツリーマップビュー になりましたが、"表示:" のドロップダウンリストで総計ビューに切り替えできます: | ||
| 138 | リモートデバッグ | Tools, l10n:priority |
| デスクトップ版の Firefox の開発ツール を使用して、別のブラウザーやランタイムで実行しているウェブサイトやウェブアプリをデバッグできます。別のブラウザーはツールと同じデバイス、あるいは USB で接続した電話機など別のデバイスに置くことができます。 | ||
| 139 | Android 版 Firefox のリモートデバッグ | |
| このガイドでは、Android 版 Firefox で実行しているコードを USB 経由で調査あるいはデバッグするために、リモートデバッグを使用する方法を説明します。 | ||
| 140 | Thunderbird のリモートデバッグ | Debug, Tutorial, thunderbird |
| このガイドでは、Thunderbird で実行しているコードの調査やデバッグを リモートデバッグ する方法を説明します。 | ||
| 141 | USB 経由で Android 版 Firefox のデバッグを行う | l10n:priority, remoteDebug |
| この記事では、Firefox 36 以降で Firefox の開発ツール を Android 版 Firefox に接続する方法を説明します。Wi-Fi 経由で接続する方法については、こちらのページ をご覧ください。 | ||
| 142 | USB 経由で Firefox OS のデバッグを行う | |
| このガイドでは、USB 経由で Firefox OS デバイスに Firefox 開発ツールを接続する方法を説明します。 | ||
| 143 | Wi-Fi 経由で Android 版 Firefox のデバッグを行う | |
| この記事では、Wi-Fi 経由で Android 版 Firefox に Firefox 開発ツール を接続する方法を説明します。以前から USB 経由で Android 版 Firefox にツールを接続することができましたが、Wi-Fi 経由の接続は USB より便利で信頼性が高い方法です。 | ||
| 144 | Wi-Fi 経由で Firefox OS のデバッグを行う | |
| この記事では、Wi-Fi 経由で Firefox OS デバイスに Firefox 開発ツールを接続する方法を説明します。 | ||
| 145 | デスクトップ版 Chrome のリモートデバッグ | |
| デスクトップ環境で実行している Google Chrome に Firefox 開発ツールを接続する方法を説明します。 | ||
| 146 | デスクトップ版 Firefox のデバッグを行う | Debugging, Guide, Tools |
| このガイドでは、同じマシン上の別のインスタンスとして実行しているデスクトップ版 Firefox に、Firefox 開発ツールを接続する方法を説明します。ここでは、デバッグされる Firefox のインスタンスをデバッグ先、デバッグを行う Firefox のインスタンスをデバッグ元と呼びます。 | ||
| 147 | リリースノート | |
| Firefox 51 から Firefox 52 の間に解決した開発ツール関連のバグ一覧 | ||
| 148 | レスポンシブデザインモード | Design, Dev Tools, Firefox, Guide, Responsive Design, Tools, Web Development, l10n:priority |
| レスポンシブデザイン は、さまざまな端末、特にデスクトップやラップトップだけでなく携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。 | ||
| 149 | レスポンシブデザインモード (Firefox 52 より前) | |
| レスポンシブデザイン は、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインモードは、ウェブサイトやウェブアプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。 | ||
| 150 | 定規 | DevTools, Firefox, Rulers, Tools |
| Firefox 40 の新機能 | ||
| 151 | 設定 | |
| 任意の開発ツールを開いて以下の操作を行うと、開発ツールのオプションペインが開きます: | ||
| 152 | 開発ツールバー | Firefox, Tools, Web Development:Tools |
| 開発ツールバーは、Firefox の内部から多くの開発ツールにアクセスするコマンドラインを提供します。これは Graphical Command Line Interpreter であり、コマンドラインの強力さや簡潔さとともに、統合されたコマンドヘルプや充実した出力表示を兼ね備えています。また、開発ツールバーは拡張可能です。独自のローカルコマンドを追加する、あるいはそれを他の人たちがインストールできるようにアドオンへ変換することも可能です。 | ||
| 153 | FirefoxのGCLIをビルドする | |
| You must have a checkout of Firefox that you can build and run. 詳細についてはsimple build instructionsや more detailed instructionsをご覧下さい。 | ||
| 154 | Scratchpad | |
| スクラッチパッドを用いてコマンドを作成するには、chrome 権限が必要です。この機能を有効にする方法は、スクラッチパッドのドキュメント に記載しています。 | ||
| 155 | カスタマイズ設定 | |
mozcmd 形式は、GCLI を簡単に使用できるように保存する手段です。これは Firefox ユーザーが、拡張子 mozcmd のファイルをいくつか置いたディレクトリを指し示す devtools.commands.dir を設定することで利用可能になります。 |
||
| 156 | セキュリティやプライバシーのポリシーを表示する | Firefox, GCLI, Tools, Web Development:Tools |
security コマンドで、ウェブサイトのセキュリティやプライバシーの設定情報を表示します。security のサブコマンドが 2 つあります: |
||
| 157 | 開発ツール関連ドキュメントの索引 | Index, Tools |
| 153 ページあります: | ||