ChromeやIEやFirefoxにはそれぞれ「開発者ツール」「検証ツール」といった名前のツールが付属しています。

WEBエンジニアにとっては当たり前の様に使うツールですが、
それ以外の方に対しては知名度が低いです。（と思ってます。）

WEBに携わらないとまず使う必要はないわけですが、開発用途以外でも出番はきっとあると思うので、「こんな使い方があるんだよ。」程度に覚えて置いていただけると幸いです。

前提

そもそもなんなのこれ

このスクリーンショットの右側にあるのがChromeDeveloperツールです。
Windowsの場合、Chromeを開いた状態で「F12」を押すことで出てきます。

要は、WEB画面を、見た目だけ捏造できます
※それだけのツールではありませんが…。

個人的には、資料作成の際によく使ってます。

例えば、WEB画面のスクリーンショットを撮影する時に、
個人情報が邪魔でそのままでは使えない時がありますね。
ペイントツールで潰すのも手間だし、データを投稿しなおすのはもっと手間です

そんなとき、Developerツールを使えばコンテンツの中身を直に書き換える事ができます。

↓このように。

資料作成用にわざわざ文章を投稿し直したり、修正する必要は無いんですね。

WEBアプリの開発者でなくても、お客様の現場にて業務をしている場合、既存のアプリの手順書を作成する機会もあるかと思います。

そんなときにこの機能を知っておけば、労力を大幅に削減できます。
多分。

twitterのダイレクトメッセージのスクリーンショットが公開されて炎上するケースをしばしば見かけますが、WEB画面なんて簡単に捏造できることを知っておけば、鵜呑みにできないことは容易にわかるわけです。

捏造されたら…と思うと恐ろしいですが、HTTPの仕組み上どうしようもないですね。

開発者でなくても、他社の作成したWEBアプリケーションの受け入れを行う場合があるかと思います。
（発注者の方とか、多分そうですね。）

その時にデザインに多少の不満があるとしましょう。
「ここの色がもうちょっと淡ければいいのに」

WEB画面のデザインは基本的には「CSS」という構文で表現されているわけですが、DeveloperToolを使用すればやはり容易に修正できてしまいます。

**例えば以下の画面の「右上のフォントのサイズが気に食わないんだ私は。」**という場合

デザインを変更したい箇所に矢印を重ねれば…

↓適用されているデザインが見えます。

こんな感じ。
CSSを変更してみます。

↓こんなことになりました。

でかいですね。文字が。

色とかも変更できちゃいます。

このままDeveloperToolでデザインを調整することで、
最終的に「font-size: 30pxにしてくれませんか？」と
具体的なお願いをする事ができます。

開発者の立場でなくても、「受入れ」を担当する方であれば知っておいて損は無いツールかと思います。

基本的にはWEB開発の支援ツールなのでWEBエンジニア以外の方はなかなか使う機会は無いかと思いますが、便利なツールではあるので知っておいて損はないかなと考えてます。どうぞご利用下さい。