ChromeやIEやFirefoxにはそれぞれ「開発者ツール」「検証ツール」といった名前のツールが付属しています。
WEBエンジニアにとっては当たり前の様に使うツールですが、
それ以外の方に対しては知名度が低いです。（と思ってます。）
WEBに携わらないとまず使う必要はないわけですが、開発用途以外でも出番はきっとあると思うので、「こんな使い方があるんだよ。」程度に覚えて置いていただけると幸いです。
前提
- 使用するブラウザはGoogleChromeです。
- GoogleChromeに付属するChromeDeveloperToolを例として記載します。
そもそもなんなのこれ
このスクリーンショットの右側にあるのがChromeDeveloperツールです。
Windowsの場合、Chromeを開いた状態で「F12」を押すことで出てきます。
何ができるの
- HTML/CSS/JSの定義を確認できます。
- その定義を編集できます。
要は、WEB画面を、見た目だけ捏造できます
※それだけのツールではありませんが…。
いつ役に立つの？
例えば資料作成時
個人的には、資料作成の際によく使ってます。
- WEBアプリの紹介資料作成時
- WEBアプリケーションの機能を説明する資料を作るとき。
- 手順書の作成時
- 操作マニュアルを作るとき。
- 画面案の作成時
- 既存の画面を変更した案を作成するとき。
例えば、WEB画面のスクリーンショットを撮影する時に、
個人情報が邪魔でそのままでは使えない時がありますね。
ペイントツールで潰すのも手間だし、データを投稿しなおすのはもっと手間です
そんなとき、Developerツールを使えばコンテンツの中身を直に書き換える事ができます。
↓このように。
資料作成用にわざわざ文章を投稿し直したり、修正する必要は無いんですね。
WEBアプリの開発者でなくても、お客様の現場にて業務をしている場合、既存のアプリの手順書を作成する機会もあるかと思います。
そんなときにこの機能を知っておけば、労力を大幅に削減できます。
多分。
例えば騙されずに済む（かもしれない）
twitterのダイレクトメッセージのスクリーンショットが公開されて炎上するケースをしばしば見かけますが、WEB画面なんて簡単に捏造できることを知っておけば、鵜呑みにできないことは容易にわかるわけです。
捏造されたら…と思うと恐ろしいですが、HTTPの仕組み上どうしようもないですね。
例えばWEBデザインに関して的確に依頼を出せる
開発者でなくても、他社の作成したWEBアプリケーションの受け入れを行う場合があるかと思います。
（発注者の方とか、多分そうですね。）
その時にデザインに多少の不満があるとしましょう。
「ここの色がもうちょっと淡ければいいのに」
WEB画面のデザインは基本的には「CSS」という構文で表現されているわけですが、DeveloperToolを使用すればやはり容易に修正できてしまいます。
**例えば以下の画面の「右上のフォントのサイズが気に食わないんだ私は。」**という場合
デザインを変更したい箇所に矢印を重ねれば…
↓適用されているデザインが見えます。
こんな感じ。
CSSを変更してみます。
↓こんなことになりました。
でかいですね。文字が。
色とかも変更できちゃいます。
このままDeveloperToolでデザインを調整することで、
最終的に「font-size: 30pxにしてくれませんか？」と
具体的なお願いをする事ができます。
開発者の立場でなくても、「受入れ」を担当する方であれば知っておいて損は無いツールかと思います。
結局
基本的にはWEB開発の支援ツールなのでWEBエンジニア以外の方はなかなか使う機会は無いかと思いますが、便利なツールではあるので知っておいて損はないかなと考えてます。どうぞご利用下さい。