MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

開発ツール関連ドキュメントの索引

Found 106 pages:

# Page Tags and summary
1 開発ツール Developing Mozilla, Guide, Tools, Web Development, Web Development:Tools, guide, l10n:priority
デスクトップおよびモバイル環境で HTML、CSS、JavaScript の調査、編集、デバッグを行います。
2 Firefox OS 1.1 Simulator
No summary!
3 Firefox OS Simulator Apps, Firefox OS, Tools
Firefox OS Simulator は、Firefox OS デバイスのシミュレーションを行う Firefox OS の上位レイヤー版ですが、デスクトップ環境で動作します。これは多くの場合、アプリのテストやデバッグに実機が必要ないということです。これは Firefox OS デバイスと同じサイズのウィンドウで動作し、Firefox OS のユーザインターフェイスや同梱アプリを含み、そして Firefox OS デバイスの API の多くをシミュレーションします。
4 Simulator Walkthrough Apps, Firefox OS, Tools
本ページでは Firefox OS Simulator を使用して、とても簡単な (しかしバグの多い!) Web アプリのデバッグを行っていきます。
5 JavaScript プロファイラ Debugging, Firefox, Guide, Profiler, Profiling, Tools
プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。
6 Memory DevTools, Firefox, Mozilla, Tools
Memory ツールは、カレントタブのメモリヒープのスナップショットを採取します。そして、どのオブジェクトがどれだけメモリを使用しているかや、コードのどこでメモリを割り当てているかを表示可能な、ヒープのさまざまなビューを提供します。
7 Paint Flashing Tool
Paint Flashing Tool はアクティブ時に、何らかの入力 (例えばユーザがマウスを動かしたりスクロールしたりするなど) への応答としてブラウザが再描画を行わなければならない部分をハイライトします。このツールにより、Web サイトがブラウザに過剰な再描画を行わせていないかを明らかにできます。再描画はパフォーマンスへの影響が大きい処理になりえるため、不必要な再描画をなくすことで Web サイトの応答性を改善できます。
8 Valence (Firefox ツールアダプタ)
Valence (旧名 Firefox ツールアダプタ) は、Gecko ベースの Firefox、Android 版 Firefox、Firefox OS ブラウザに限らず、様々なブラウザを Firefox 開発者ツールでデバッグできるようにする実験的なアドオンです。
9 Web Audio Editor Tools
Web Audio API を使うとき、開発者は AudioContext を生成します。そのコンテキストでは、以下のようないくつもの AudioNode を構築します:
10 Web コンソール Debugging, Guide, Security, Tools, Web Development, Web Development:Tools, guide, l10n:priority, web console
Web コンソールでは次のような事が行えます:
11 Web Console Helpers Debugging, Web Development, debugging, web console
Web コンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。
12 Web コンソールを開く
Web コンソールを開く方法は以下のとおりです:
13 キーボードショートカット
これらのショートカットは、コマンドラインインタプリタ内で動作します。
14 コマンドラインインタプリタ
Web コンソールのコマンドラインで、JavaScript の構文を即座に評価することができます。
15 コンソールのメッセージ
Web コンソールのほとんどは、メッセージ表示ペインが占めています:
16 コンソールの常時表示
コンソールを別のツールと並べて使用できます。ツールボックスで別のツールを使用しているときに Esc キーまたはツールバーの "コンソールの常時表示を切り替えます" ボタンを押下してください。ツールボックスが分割表示されて元のツールが上段、Web コンソールが下段に表示されます。
17 高度な出力
Web コンソールでオブジェクトを出力する際は、オブジェクト名だけでなく、より高度な情報も表示します。特に、以下のような情報です:
18 WebIDE Apps, B2G, Debugging, Firefox OS, WebIDE, WebIde, debugging, tool, アプリ, ツール
WebIDE では、始めに 1 つ以上のランタイムをセットアップします。ランタイムは、アプリの実行やデバッグを行う環境です。ランタイムは USB (Firefox 39 以降では Wi-Fi も可能) でパソコンに接続した Firefox OS デバイスか、パソコン自体にインストールした Firefox OS シミュレータを使用できます。
19 WebIDE で Cordova アプリを扱う
Apache Cordova を使用すると HTML、JavaScript、CSS を使用してアプリを作成できます。また iOS や Android といったモバイルプラットフォーム向けのネイティブアプリも生成できます。Cordova では、Firefox OS 向けのアプリも作成できます
20 WebIDE のトラブルシューティング
Firefox OS デバイスを WebIDE に接続しようとしても表示されない場合は、以下の項目を確認してください:
21 WebIDE を開く DevTools, WebIDE, devtools, opening
WebIDE を開く方法は 3 つあります:
22 アプリの作成と編集
"アプリを開く" メニューの配下に 3 個の項目があります: 新しいアプリ、パッケージ型アプリを開く、ホスト型アプリを開く。
23 アプリの実行とデバッグ
アプリを実行する準備ができたら、"ランタイムを選択" ドロップダウンメニューでランタイムを選択しなければなりません。使用できるランタイムがない場合は、ランタイムのセットアップで追加方法を確認してください。
24 ランタイムのセットアップ
ランタイムは、アプリの実行やデバッグを行う環境です。ランタイムとして USB でパソコンに接続した Firefox OS デバイス、パソコン自体にインストールした Firefox OS シミュレータ、あるいはデスクトップ版 Firefox の別のインスタンスを使用できます。
25 ランタイムメニュー
ランタイムを選択すると、ランタイムメニューにアクセスできます:
26 iframe での作業
Firefox 34 より開発ツールで、ドキュメント内にある特定の iframe を対象にすることができます。
27 インスペクタ CSS, DOM, HTML, Stylesheets, Tools, Web Development, Web Development:Tools, css, l10n:priority
ページの HTML や CSS の調査や変更を行うために、インスペクタを使用しましょう。
28 3D ビュー HTML, Tools, Web Development, Web Development:Tools
3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。
29 HTML panel
ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。
30 How to
Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.
31 CSS の調査と編集 Guide, Inspector, Tools, guide
CSS ペインで、ページの CSS の調査や編集を行えます。
32 CSS フィルタを編集する CSS, DevTools, Filters, Page Inspector, Tools, css
ルールビューで、filter プロパティの隣に丸い灰色と白色のマークを表示します:
33 HTML の調査と編集 Guide, Inspector, Tools
HTML ペインで、ページの HTML の調査や編集を行えます。
34 Transform の可視化 Guide, Inspector, Tools
ルールビューtransform プロパティにマウスポインタを載せると、ページ上に変形操作をオーバーレイ表示します:
35 Web コンソールからインスペクタを使用する Guide, Inspector, Tools
インスペクタで選択されている要素は、変数 $0 を使用してWeb コンソールから参照できます。
36 アニメーションを扱う Guide, Inspector, Tools
本記事では、アニメーションの視覚化と編集が可能な 3 つのツールを扱います:
37 Animations examples
No summary!
38 アニメーションインスペクタ (Firefox 41 および 42)
Firefox 41 および 42 では、アニメーションインスペクタで以下のことができます:
39 イベントリスナの調査 Guide, Inspector, Tools
Firefox 33 より HTML ペインで、イベントリスナが設定されている要素の隣に "ev" アイコンを表示します:
40 インスペクタの API を使用する Inspector, Reference, Réference, Référence, Tools
Firefox アドオンは、chrome://browser/content/devtools/inspector/inspector.xul コンテキストから以下のオブジェクトにアクセスできます:
41 インスペクタを開く Guide, Inspector, Tools
インスペクタを開く方法は、主に2つあります:
42 フォントを確認する Guide, Inspector, Tools, guide
ルールビューfont-family プロパティにマウスポインタを載せると、フォントのサンプルをツールチップで表示します
43 ボックスモデルの調査と編集 Guide, Tools, guide
要素選択ボタンを押しているとき、ページ上で要素にマウスポインタを載せると、要素のボックスモデルをオーバーレイで表示します:
44 背景画像を確認する
ルールビューで、background-image で指定した画像のプレビューを確認できます。ルールにマウスポインタを載せてください:
45 色の調査と選択 Guide, Inspector, Tools, guide
CSS ペインのルールビューではルールに色の値が含まれる場合に、値の隣に色のサンプルを表示します:
46 要素を選択する Guide, Inspector, Tools
"要素を調査" をクリックしてインスペクタを開いた場合は、要素が選択済みの状態になります。
47 Style panel
ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。
48 UI ツアー Guide, Inspector, Tools, guide
本記事は、インスペクタのユーザインターフェイスの主要部を紹介するクイックツアーです。
49 キーボードショートカット
これらのショートカットは、インスペクタの HTML ペイン内で動作します。
50 キーボードショートカット Tools, l10n:priority
本ページでは、Firefox 内蔵の開発ツールで使用しているすべてのキーボードショートカットを一覧化しています。
51 シェーダエディタ
シェーダエディタで、WebGL で使用するバーテックスシェーダおよびフラグメントシェーダの参照や編集ができます。
52 スクラッチパッド Tools, Web Development, Web Development:Tools, l10n:priority
スクラッチパッドは、JavaScript の実験環境を提供します。Web ページと対話するコードの記述、実行、結果の確認ができます。
53 スタイルエディタ CSS, Stylesheets, Tools, Web Development, Web Development:Tools
スタイルエディタでできること:
54 ストレージインスペクタ Cookies, Dev Tools, Firefox, Guide, IndexedDB, Local Storage, Session Storage, Storage, Tools, storage
ストレージインスペクタで、Web ページが使用できるさまざまな種類のストレージを調査できます。現在は、以下の種類のストレージの調査に使用できます:
55 スポイト
スポイトツールで、ページ内から色を選択することができます。これはページ上で拡大鏡のように動作して、ピクセル単位の精度で選択することができます。拡大鏡の下には、現在選択しているピクセルの色の値を、オプションで選択した色単位で表示します:
56 ソースを表示
ソース表示機能を使用して、表示しているページの HTML や XML を閲覧できます。ソースを表示する方法は以下のとおりです:
57 ソースエディタの使用
ソースエディタは source-editor.jsm によって提供されるエディタコンポーネントで、スクラッチパッドスタイルエディタ などの開発ツールで共用しています。また、Firefox の拡張機能から使用することもできます。この記事では、テキストを編集するときのエディタ自身の使い方を説明します。
58 ツールボックス
ツールボックスは、Firefox に組み込まれている開発ツールのほとんどを提供するホームです。ツールボックスは Web 開発メニュー (OS X や Linux では "ツール" メニューの配下、Windows では "Firefox" メニューの配下にあります) の "開発ツールを表示" を選択するか、ツールボックス内の各ツール (例えば JavaScript デバッガやインスペクタ) を起動することで開きます。あるいは、Windows および Linux では Ctrl + Shift + I、OS X では Cmd + Opt + i を押下することでも開きます。キーボードショートカットもご覧ください。
59 デバッガ Debugger, Debugging, Dev Tools, Firefox OS, Tools, l10n:priority
JavaScript デバッガでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。
60 How to
No summary!
61 DOM イベントでブレークする
特定の DOM イベントをリッスンしている場合は、リスナを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガにブレークさせることができます。
62 DOM ノードのハイライトと調査
変数ペインで DOM ノードにマウスポインタを載せると、ページ上でそのノードをハイライト表示します:
63 eval ソースをデバッグする
Firefox 36 より eval() に渡される文字列や Function コンストラクタに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。
64 アドオンでデバッグにアクセスする
以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます:
65 コードをステップ実行する
コードがブレークポイントで止まったときは、ツールバーの左側にある 4 つのボタンを使用してステップ実行を実施できます:
66 ソースをブラックボックス化する
現在の Web 開発では jQueryEmberAngular のようなライブラリに頼ることが多く、ライブラリを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリの内部実装を気にしません。それらはブラックボックスのように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガに無視させることができます。
67 ソースマップを使用する
JavaScript のソースは、より効率よくサーバから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第に機械生成になる傾向があります。ソースマップの使用によって、デバッグをとても容易にするために、デバッガが実行中のコードを元のソースファイルと対応づけることができます。
68 デバッガを開く
メニューボタン ( new fx menu ) をクリックして "開発ツール"、 "デバッガ" の順にクリックすると、デバッガが開きます。あるいは、以下のキーボードショートカットを使用します:
69 ブレークポイントの無効化
ソースリストペインで、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります:
70 ブレークポイントを設置 JavaScript, Tools
デバッガで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。
71 ミニファイされたファイルを整形する
ミニファイされたファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください:
72 変数を調査、編集、ウォッチする
コードがブレークポイントで停止したときはデバッガの変数ペインで、変数の状態を調査できます:
73 条件付きブレークポイントを設置
条件付きブレークポイントを設置するにはソースペインで、設置したい行でコンテキストメニューを開いて "条件付きブレークポイントを設置" を選択します。そして、表示されたポップアップに条件式を入力します:
74 検索とフィルタ
ツールバーのスクリプトフィルタを使用して、デバッガ内にある項目を検索できます:
75 UI ツアー
本記事は、JavaScript デバッガのユーザインターフェイスの主要部を紹介するクイックツアーです。デバッガの UI は 6 つの主要なセクションに分かれており、順番に説明していきます:
76 オプション
デバッガには独自の設定メニューがあり、ツールバー上のアイコンからアクセスできます:
77 キーボードショートカット
1. 一部の Mac はデフォルトで、ファンクションキーが特別な機能の使用に再割り当てされています: 例えば、画面の明るさや音量の変更です。これらのキーを標準的なファンクションキーとして使用するためのガイド (日本語版) をご覧ください。再割り当てされたキーを標準的なファンクションキーとして使用するには、同時に Function キーも押下してください (よってプロファイラを開くには、Shift + Function + F5 を押してください)。
78 ネットワークモニタ Debugging, Dev Tools, Firefox, Guide, Networking, Tools, guide, l10n:priority
ネットワークモニタは、Firefox が実行したすべてのネットワーク要求 (たとえばページの読み込みや XMLHttpRequests による) について、各要求でどれだけ時間がかかったかや要求の詳細情報を表示します。モニタを開くには、"Web 開発" メニュー (Mac では "ツール" メニューのサブメニューです) で "ネットワーク" を選択するか、開発ツールボックスを開いて "ネットワーク" タブに切り替えてください。
79 パフォーマンス
パフォーマンスツールは、サイトの一般的な応答性、JavaScript やレイアウトのパフォーマンスを知ることができるツールです。パフォーマンスツールを使用してあなたのサイトで、ある期間の記録やプロファイルを作成できます。記録後は、プロファイル内でサイトをレンダリングするためにブラウザが行ったことの概要や、プロファイル内のフレームレートを表示します。
80 Scenarios
Performance scenarios
81 CSS プロパティのアニメーション
CSS アニメーションでは複数のキーフレームを指定して、それぞれのキーフレームではアニメーションの特定の段階における要素の外見を定義するために CSS を使用します。ブラウザは、それぞれのキーフレームから次のキーフレームへ遷移することでアニメーションを作成します。
82 集約的な JavaScript
自身でも試してみたい場合は、デモ Web サイトがこちらにあります。
83 UI ツアー
パフォーマンスツールの UI は、大きく 4 つに分けられます:
84 ウォーターフォール
85 コールツリー
コールツリーは、サンプリングプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。
86 フレームチャート
呼び出しツリーとフレームチャートはどちらもサイトの JavaScript を分析するために使用します。またどちらも、記録している間定期的に取得する JavaScript エンジンのスタックのサンプルをデータとして使用します。
87 フレームレート
フレームレートは、ビデオデバイスが生成できる画像 (またはフレーム) のペースです。これは映画やゲームで特に知られていますが、現在は Web サイトや Web アプリのパフォーマンス測定として広く使用されます。
88 プロファイラのチュートリアル
JavaScript プロファイラは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。
89 操作手順
パフォーマンスツールを開く方法は以下のとおりです:
90 ブラウザコンソール Browser, Console, Debugging, Tools, Web Development, WebDevelopment:Tools, console, debugging
ブラウザコンソールは Web コンソールに似ていますが、ひとつのコンテンツタブではなくブラウザ全体に適用されます。
91 ブラウザツールボックス Debug, Firefox, JavaScript
ブラウザツールボックスは通常のツールボックスとは異なり、Web ページだけでなくアドオンやブラウザ自体の JavaScript をデバッグすることができます。ブラウザツールボックスのコンテキストは単一のタブ内のページではなく、ブラウザ全体になります。
92 リモートデバッグ Tools, l10n:priority
デスクトップ版の Firefox 開発ツールを使用して、別のブラウザやランタイムで実行している Web サイトや Web アプリをデバッグできます。別のブラウザはツールと同じデバイス、あるいは USB で接続した電話機など別のデバイスに置くことができます。
93 Android 版 Firefox のリモートデバッグ
このガイドでは、Android 版 Firefox で実行しているコードを USB 経由で調査あるいはデバッグするために、リモートデバッグを使用する方法を説明します。
94 Thunderbird のリモートデバッグ Debug, Tutorial, thunderbird
このガイドでは、Thunderbird で実行しているコードの調査やデバッグをリモートデバッグする方法を説明します。
95 USB 経由で Firefox OS のデバッグを行う
このガイドでは、USB 経由で Firefox OS デバイスに Firefox 開発ツールを接続する方法を説明します。
96 WebIDE による Android 版 Firefox のデバッグ
この記事では、Firefox 36 以降で Firefox の開発ツールを Android 版 Firefox に接続する方法を説明します。
97 Wi-Fi 経由で Android 版 Firefox のデバッグを行う
この記事では、Wi-Fi 経由で Android 版 Firefox に Firefox 開発ツールを接続する方法を説明します。以前から USB 経由で Android 版 Firefox にツールを接続することができましたが、Wi-Fi 経由の接続は USB より便利で信頼性が高い方法です。
98 Wi-Fi 経由で Firefox OS のデバッグを行う
この記事では、Wi-Fi 経由で Firefox OS デバイスに Firefox 開発ツールを接続する方法を説明します。
99 デスクトップ版 Chrome のリモートデバッグ
デスクトップ環境で実行している Google ChromeFirefox 開発ツールを接続する方法を説明します。
100 デスクトップ版 Firefox のデバッグを行う Debugging, Guide, Tools, debugging, guide
このガイドでは、同じマシン上の別のインスタンスとして実行しているデスクトップ版 Firefox に、Firefox 開発ツールを接続する方法を説明します。ここでは、デバッグされる Firefox のインスタンスをデバッギ、デバッグを行う Firefox のインスタンスをデバッガと呼びます。
101 ルーラー
New in Firefox 40.
102 レスポンシブデザインビュー Design, Dev Tools, Firefox, Guide, Responsive Design, Tools, Web Development, guide, l10n:priority
レスポンシブデザインは、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインビューは、Web サイトや Web アプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。
103 開発ツールバー Firefox, Tools, Web Development:Tools
開発ツールバーは、Firefox の内部から多くの開発ツールにアクセスするコマンドラインを提供します。開発ツールバーは Graphical Command Line Interpreter です。これはコマンドラインの強力さや簡潔さを備える一方で、統合されたコマンドヘルプの提供や充実した出力表示が可能です。また、開発ツールバーは拡張可能です。独自のローカルコマンドを追加する、あるいはそれを他の人たちがインストールできるようにアドオンへ変換することも可能です。
104 Customization
mozcmd 形式は、GCLI を簡単に使用できるように保存する手段です。これは Firefox ユーザが、拡張子 mozcmd のファイルをいくつか置いたディレクトリを指し示す devtools.commands.dir を設定することで利用可能になります。
105 Scratchpad
スクラッチパッドを用いてコマンドを作成するには、chrome 権限が必要です。この機能を有効にする方法は、スクラッチパッドのドキュメントに記載しています。
106 セキュリティ情報を表示する Firefox, GCLI, Tools, Web Development:Tools
security csp コマンドを使用して、カレントドメインの Content Security Policy に関連する情報を参照できます。

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Marsf
 最終更新者: Marsf,