Edited at

ChromeDeveloperToolの便利さを説明する会(社内LT用)

More than 1 year has passed since last update.

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

WEBエンジニアにとっては当たり前の様に使うツールですが、

それ以外の方に対しては知名度が低いです。(と思ってます。)

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


前提


  • 使用するブラウザはGoogleChromeです。

  • GoogleChromeに付属するChromeDeveloperToolを例として記載します。


そもそもなんなのこれ

image

このスクリーンショットの右側にあるのがChromeDeveloperツールです。

Windowsの場合、Chromeを開いた状態で「F12」を押すことで出てきます。


何ができるの


  • HTML/CSS/JSの定義を確認できます。

  • その定義を編集できます。

要は、WEB画面を、見た目だけ捏造できます

※それだけのツールではありませんが…。


いつ役に立つの?


例えば資料作成時

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


  • WEBアプリの紹介資料作成時


    • WEBアプリケーションの機能を説明する資料を作るとき。



  • 手順書の作成時


    • 操作マニュアルを作るとき。



  • 画面案の作成時


    • 既存の画面を変更した案を作成するとき。



例えば、WEB画面のスクリーンショットを撮影する時に、

個人情報が邪魔でそのままでは使えない時がありますね。

ペイントツールで潰すのも手間だし、データを投稿しなおすのはもっと手間です

image

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

image

↓このように。

image

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

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

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

多分。


例えば騙されずに済む(かもしれない)

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

image

image

image

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


例えばWEBデザインに関して的確に依頼を出せる

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

(発注者の方とか、多分そうですね。)

その時にデザインに多少の不満があるとしましょう。

「ここの色がもうちょっと淡ければいいのに」

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

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

image

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

image

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

image

こんな感じ。

CSSを変更してみます。

image

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

image

でかいですね。文字が。

image

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

このままDeveloperToolでデザインを調整することで、

最終的に「font-size: 30pxにしてくれませんか?」と

具体的なお願いをする事ができます。

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


結局

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