開発者ならだれでも使用するブラウザのデベロッパーツール。
皆様はどのブラウザのものをご利用でしょうか。
使いやすさは人それぞれかと思います。
今回は各ブラウザのデベロッパーツールの得手不得手を筆者の視点でご紹介したいと思います。
Google Chrome
相対的にどの機能も使いやすいのがGoogle Chromeの利点と考えます。
デベロッパーツールエリアのDOM要素を選択すると、Webサイト上のどの位置がその要素に対応するのか、ハイライトで示してくれます。視覚的にわかりやすいところがとても良いです。
また、適用されているCSSの記述も見やすく、計算済みのCSS値もアルファベット順に並んでいて、とても探しやすいです。
そのほか、クッキーの状態を把握したいとき、コンソールエラーを見つけたいとき等、どの情報も整理され、かつ探しやすいレイアウトになっていて、個人的には気に入っているデベロッパーツールです。
世界シェアNo.1のブラウザですので、開発の主とされている方も多いと思います。
Firefox
視認性といえばFirefoxの右に出るものはいません。
先に述べたGoogle Chromeのように、デベロッパーツールのDOM要素を選択した時に、サイト上の要素がハイライトされます。さらにうれしいのが、選択した要素の余白部分にあたりの線が入る機能です。レイアウトの確認をするときには、その要素を基準として周囲の要素の位置を、あたりを参考に再確認できるのでとても助かります。
そして、Firefoxの特徴的な機能といえば、デベロッパーツールの「フォント」タブではないでしょうか。
筆者はWebフォントを使用する機会が多いのですが、このフォントタブで、今まさに適用されているフォントがフォント名と実際のフォントのフォームで確認できるのです。
各種情報も整理されており、たいへん見やすいです。
Firefoxが一番！ と言いたいところなのですが、一点だけ気になる点があります。
レスポンシブモードにした時に、スマートフォンサイトが正常に表示されない（PCサイトで表示される）ことがままあるのです。
これさえなければ一番使いやすいのではないかと思います。
Internet Explorer11
Internet Explorer各バージョンのエミュレーターが搭載されていることが特徴のInternet Explorer11のデベロッパーツール。
このエミュレーション機能はクロスブラウザチェックの時に便利ですね。
各種情報タブの構造はFirefoxに似ています。
ただ、このInternet Explorer11のデベロッパーツール、視認性が悪いのです。
DOM要素を選択してもハイライトはされないです。視認性の良いデベロッパーツールを使用した後だと、どうしてもこの点が気になってしまいます。
コンソールやクッキー等の情報は見やすくまとまっています。
Microsoft Edge
登場したばかりのEdgeのデベロッパーツールを見てみます。
なぜかデフォルトで別ウィンドウで開くデベロッパーツール。デュアルモニタであれば構わないのですが、シングルモニタの時に常時別ウィンドウで開かれるのはちょっと辛いものがあります。
基本的にInternet Explorer11のデベロッパーツールと同じ構造です。後継ブラウザだけありますね。Internet Explorer11以上に充実したエミュレーション機能が搭載されており、様々なバージョンのInternet Explorerのエミュレーションが可能です。
残念なことに、視認性の悪さもInternet Explorer11から継承しています。要素の検査を行ってもサイト上の選択要素はハイライトされません。
以上の結果から筆者の経験上デベロッパーツールの使いやすさは以下のようになりました。
Firefox = Chrome > Microsoft Edge > Internet Explorer11
デベロッパーツールで大切なことは情報を取得することの容易さにあると考えます。正確さはあって当然。プラスアルファとして、より多くの情報を、より素早く取得できることが求められているのではないでしょうか。
それがひいては作業全体の速度向上につながるのだと考えます。
- 6668 views
- キム
