BETA

Firefoxの開発者ツールを極める。

投稿日:2018-12-21
最終更新:2019-01-30

はじめに

Firefoxの開発者ツールいいよ! 使おうよ!

ダークテーマを極める。

『極める』とはいっても設定するだけ。簡単。

  1. 開発者ツールを開く
  2. 『F1』キーで設定を開く
  3. 『テーマ』の『Dark』を選択

とてもきれい。

『The quick…dog』は、見ての通りフォントのプレビュー。
こんな機能、あったのか!

ちなみにGoogle Chromeはというと…

なんだろう、この色。なんだろう、この気持ち。
なんか…違う…。

キー割り当てを極める。

設定画面のエディター設定に、『キー割り当て』という項目があります。
そこから、キーバインドをVimなどに変更できます。

Vimに変更できます!!!
(EmacsやSublime Textにもできます)。

インスペクターでの編集やコンソールへの入力さえもVimで行いたいVimmerへ!

スクリーンショットを極める。

インスペクターから撮る

  1. インスペクターで任意のDOMノードを選択
  2. 右クリック
  3. 右クリックメニューの『ノードのスクリーンショットを撮影』をクリック

これだけで、そのノードのみのスクリーンショットを撮ることができます。
ページ全体を撮影したい場合は、htmlやbodyを選択すれば良さそうです。

コンソールから撮る

コンソールに:screenshotと入力するとスクリーンショットを撮ることができます。
詳しいパラメータは:helpしてもらうかMDNを見てもらうとして、ここには特記すべきものだけ。

:screenshot  
// 表示範囲のみを撮影  

:screenshot --fullpage  
// ページ全体を撮影  

:screenshot --selector '#hoge'  
// CSSセレクタにマッチした最初のノードを撮影  

:screenshot --clipboard  
// 表示範囲のみを撮影しクリップボードにコピー  
// 他のパラメータと組み合わせることももちろん可能  

// 詳しくは  
:help

ただ、とても残念なことに、関数ではないのでJavaScriptと連携して連写したり、querySelectorAllからのスクショといったことはできません。

…やっぱ世間はVimなのか!

Flexboxレイアウト・Gridレイアウトを極める。

FlexboxレイアウトやGridレイアウトなどといった、これからの時代のWeb開発で使われるようになるであろう技術に対応しています。

こればっかりは、見てもらったほうが速いですね。
下は、特にすごいGridレイアウトの様子です。

ちなみに上はFirefox Developer Editionのページです。

おわりに

Firefoxいいよ!
Firefox使おうよ!
どうして使わないの?
どうして対応してくれないの?
どうしてEdgeと一緒に死ねなんていうの?

どうして…っ…。

それでもっ、私はFirefoxを使い続ける!
そして布教する!
オープンなWebのために! よりよいWeb開発のために!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@okayuの大して技術的ではないブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!