Skip to content

firefox tips

Jump to bottom
dynamis edited this page Jul 18, 2013 · 19 revisions

意外と知らない or 忘れがちな標準機能のメモ。

Basis

  • Firefox を使いこなそう http://mozilla.jp/firefox/central/

  • ショートカット

  • コンテキストメニュー

    • contextmenu イベントの preventDefault() が呼ばれていてもShift キーを押しながらだと Firefox のコンテキストメニューを優先表示可能

  • オートスクロール

    • 中ボタンクリック後マウスポインタを動かすと自動スクロール

  • スムーズスクロール

    • Firefox 13 からデフォルトオンになった
    • 動きが遅いとか引っかかりを感じる場合は general.smoothScroll.mouseWheel.durationMaxMS=200, general.smoothScroll.mouseWheel.durationMinMS=100 あたりに設定変更すると良い

  • ブロック単位の範囲選択

    • ダブルクリックで Word 単位の範囲選択を、トリプルクリックで段落単位の範囲選択が可能

  • 文字サイズを元に戻す

    • Ctrl+0 キーは標準文字サイズのショートカットキー

Browsing

  • 選択したテキストで検索

    • ページ中のテキストを範囲選択すると右クリックメニューに「Google で検索」などが可能

  • クイック検索

    • "/" キーを押すとページ中のテキストをインクリメンタル検索開始
    • "'" キーを押すとページ中のリンクテキストをインクリメンタル検索開始

Awesome Bar

  • インクリメンタル検索

    • ブックマーク、履歴、開いているタブが対象
    • URL、タイトル、タグを対象とした検索
    • ブックマーク、タグ、開いているタブについては右端にアイコンなどを表示

  • ロケーションバーの検索絞り込み

    • "^" を追加するとページの表示履歴にマッチする候補を検索します
    • "*" を追加すると、ブックマークにマッチする候補を検索します
    • "+" を追加すると、タグを付加したページにマッチする候補を検索します
    • "%" を追加すると、現在開いているタブにマッチするページを検索します
    • "~" を追加すると、入力した文字にマッチするページを検索します
    • "#" を追加すると、入力したページタイトルやタグにマッチするページを検索
    • "@" を追加すると、入力した Web アドレス (URL) にマッチするページを検索

  • キーワード検索

    • ロケーションバーに文字列入力後そのまま Enter キーを押すと keyword.URL で設定された URL で Web 検索する

  • スマートキーワード

    • ブックマークにスマートキーワードを設定すると "<keyword> search text" で指定 URL での検索を実行
    • "amazon ..." として Amazon 検索とか "bug ..." で Bugzilla 検索とか設定しておくと便利

  • 履歴の削除

    • 項目を選択して Shift+Del キーを押すとその項目が履歴から削除される
    • ページがブックマークされている場合そのブックマークは削除されないので注意

Tab Browsing

  • タブを閉じる

    • 中ボタンクリックでタブを閉じる

  • タブやウィンドウの復元

    • タブやウィンドウは間違って閉じてしまっても履歴メニューから復元できる

  • タブの複製

    • 再読込ボタンを Ctrl+Shift+クリック または 中ボタンクリック で現在のタブが複製される
    • Windows だけは Ctrl キーを押しながらタブをドラッグしても複製できる

  • タブグループ

    • タブが増えるとタブバーの右にタブグループボタンが出現
    • Ctrl+Shift+E でタブグループを表示
    • タブのタイトルや URL での検索も可能

  • 新規タブページ

DevTools

  • ツールバー

    • ツールバーを下でなく右に表示するには devtools.toolbox.sideEnabled=true とする

  • ソース表示

    • ページ中のテキストを範囲選択すると右クリックメニューに「選択した部分のソースを表示」が可能になる

  • Web コンソール

    • インスペクタで要素を選択中は $0 変数で要素にアクセスできる
    • 右クリックメニューに「要求ボディと応答ボディを記録」機能がある。チェックしておくと HTTP ヘッダだけでなくボディも記録されるようになる
    • 名前空間は独立したサンドボックス。Web ページのグローバル変数を定義する時は window.foo=0; などと window 経由でアクセスする
    • printf ライクな変数置き換え機能がある http://d.hatena.ne.jp/teramako/20120104/p1

  • インスペクタ

    • スタイルインスペクタで各ルール左のチェックボックスでオンオフ可能
    • スタイルインスペクタでショートハンドプロパティについては左に個別プロパティに展開する三角ボタンが付いている
    • HTMLパネルは Firefox 10 時点で属性追加などはできないが、属性の編集のみダブルクリックで可能。
    • Fx13 からは要素名(とクラスやID) の吹き出しを右クリックすると :hover, :active, :focus 疑似クラスのロックが可能

  • スクラッチパッド

    • 実行、調査、表示の機能は範囲選択して右クリックメニューでも実行可能。その場合選択された部分だけが実行されるのでコードを書き直さずとも特定の変数の調査などができて便利
    • 名前空間は独立したサンドボックス。Web ページのグローバル変数を定義する時は window.foo=0; などと window 経由でアクセスする
    • 実行メニュー → 変数をリセット で変数や定数をリセットできる。書いてるコードは残るのでちょっと書き換えて再実行するときに便利。
    • 実行コンテキストを Web ページから Chrome へと切り替えたい場合は devtools.chrome.enabled=true とすると「実行環境」メニューが追加され選択できるようになる
    • ヘルプメニューを追加 - リンク先は MDN のページ

*レスポンシブデザインビュー * プリセット値は devtools.responsiveUI.presets pref に JSON 文字列でカスタマイズ可能 * [{"width": 320, "height": 480},{"width": 360, "height": 640},{"width": 480, "height": 800}, {"width": 768, "height": 1024},{"width": 800, "height": 1280},{"width": 980, "height": 1280},{"width": 1280, "height": 600},{"width": 1920, "height": 900}]

Debug

  • nglayout.debug.paint_flashing=true にすると再描画された部分をカラーリング表示

Firebug

  • 開発版のリリース情報: http://blog.getfirebug.com/

  • [1.10] 遅延読み込みにより Firefox 起動時間への影響も少なく、再起動不要でインストール可能になった

  • [1.10] 文字実体参照の表示切り替えをサポート

    • ∫ or ∫ or ∫

  • フォントのプレビュー

    • [1.9] ダウンロードフォントは Net パネルにフォントビューアが組み込まれた
    • [1.9] CSS パネルではフォント名にマウスホバーするとツールチップでプレビュー表示される

  • 利用されているフォントの確認には FireFontFamily が便利

    • font-family スタイル指定のうち、使用されているフォントだけ青文字で他は灰色文字に

  • jQuery デバッグ

    • FireQuery 拡張機能をインストールすれば jQuery オブジェクトを console.log() しても分かり易いログになる

  • 調査中の要素へのアクセス

    • 選択している要素には $0, $1 ... または $n(index) でアクセス可能

  • CSS ルールの利用回数

    • CSS Usage Firebug 拡張機能で確認可能

  • イベントモニタリング

    • monitorEvents(elements, event-type); でモニタ可能
    • unmonitorEvents(elemnets, event-type); でモニタ解除

  • Mutation ブレーク

    • 要素の右クリックメニューから「属性変更時にブレーク」「子の追加または削除時にブレーク」「要素削除時にブレーク」

  • ネットワークモニタリング

    • Net パネルのログは NetExport を使えば JSON 形式でエクスポート可能
    • エクスポートしたファイルは HAR Viewer @github で閲覧可能

  • コード実行中の変数書き換え

    • debugger; 文でブレークして監視パネルにて値を変更

  • XHR でブレーク

    • Net パネルで該当する XHR 行の左をクリックすると次回からブレークさせることが可能

  • XHR の条件付きブレークポイント

    • 条件式では URL のパラメータに同じ変数名でアクセス可能 param == 1 なら /foo?param=1 でブレークするが /foo?param=2 ではブレークしない
    • 条件式では $postBody で POST ボディの値にアクセス可能

  • Cookie 変更でブレーク

    • Firecookies を使えば Cookie 変更時にブレーク可能

  • Cookie 変更の条件付きブレークポイント

    • cookie.value == "some value"

Firefox for Android

  • Firefox for Androidで使用するフォントは about:config の font.name.sans-serif.ja で変更可能。海外端末などで変な中華フォントが使われてしまう場合には Droid Sans Fallback とか設定する

  • モバイル向け or PC 向けサイトの切り替えは UserAgent によるものが大半なのでそれを変更するアドオンを導入する

  • エラーは adb logcat を使って確認する。

    adb logcat | grep GeckoConsole

  • エラーコンソールにもアクセス可能 chrome://global/content/console.xul

  • GPU をフル活用できる端末は direct texture whitelist にあるもの:

    static const char* const sAllowedBoards[] = {  "venus2",     // Motorola Droid Pro  "tuna",       // Galaxy Nexus "omap4sdp",   // Amazon Kindle Fire  "droid2",     // Motorola Droid 2 "targa",      // Motorola Droid Bionic  "spyder",     // Motorola Razr  "shadow",     // Motorola Droid X  "SGH-I897",   // Samsung Galaxy S  "GT-I9100",   // Samsung Galaxy SII  "sgh-i997",   // Samsung Infuse 4G "herring",    // Samsung Nexus S  "sgh-t839",   // Samsung Sidekick 4G  NULL };

FAQ

Trouble Shooting

Clone this wiki locally