スタッフブログ

STAFF BLOG

アプリ開発日誌

2021.05.22

Google DevTools の活用術

早速ですがWeb開発をするときGoogle Chromeについているデベロッパーツールは使いこなせていますか?

本記事では、あまり知られていないけど覚えておくと地味に便利な機能たちを紹介していきたいと思います。

これを読めば、エンジニアの皆様は開発スピードが爆上がり、非エンジニアの皆様はバグや検証に大活躍するテクニックを習得できること間違いないでしょう。

1. そもそもデベロッパーツールとは?

Google Chromeで開いている画面に対してデバックができるツールとなります。

具体的には画面上のレイアウトを簡易的に変更したり、通信速度が計測できたりと便利なものばかりです。

特にプラグインも必要なくすぐに使用できるので、画面レイアウトの確認や検証などで活用できます。

ちなみにGoogle Crome以外にもSafariやEdgeにもデベロッパーツールが搭載されています。

起動方法

とても簡単です。

①Chromeを起動

②任意の画面で右クリック

③一番下の「検証」を選択

※ショートカットキーを使っても起動できます。

【F12】キーもしくは【Win:Ctrl+Shift+I Mac:Command + Option + I)】

以下のようなツールが画面に表示されれば起動完了です。

スクリーンショット 2021-05-22 17.07.15

2. 覚えておくと便利な機能

多彩なキャプチャが取れる

画面のDOM要素単位でキャプチャが取りたい!全画面のキャプチャが取りたい!など、PC標準のスクショを使うよりも便利な機能が実は備わっています。

方法

①デベロッパーツールを起動

②以下のショートカットキーを使い、Commandメニューを表示

  • windows:Ctrl + Shift + P
  • macOS:Cmd + Shift + P

③以下コマンドを入力

  • 全画面スクショ→
    • 「Screenshot Capture full size screenshot」
  • DOM要素毎スクショ→
    • あらかじめ、対象のDOMを選択したあとに
    • 「Screenshot Capture node screenshot」

スクリーンショット 2021-05-25 11.47.11

DOM要素毎にキレイにスクショが取れるので画面レイアウトを考える時とか重宝しそうです。

XHRを再送できる

ajaxなどの非同期通信をデバッグするとき、一回一回ボタンをクリックして確認するのは面倒くさいですよね・・

実はこれもわざわざイベントを発火せずともajaxを送信できる方法があります。

方法

①「Network」タブ選択

②「XHR」で絞り込み

③検証したいXHRで右クリック。「Replay XHR」選択。スクリーンショット 2021-05-24 19.33.23

これだけでリクエストの再送が可能になります!わざわざボタンクリックしたり、画面を読み込む手間が省けます。

Cookieの確認と破棄

これは知っている方も多いと思いますが、ログアウトしたいときや認証を切りたいときなどに便利です。

方法

①「Application」タブ選択

②サイドメニューから「Cookies」選択

③右上の「Crear all cookies」を選択。

スクリーンショット 2021-05-24 19.39.43

オブジェクトを表形式でconsoleに表示する

javascriptでconsoleに表示したオブジェクトの配列の値って、階層が深いと見づらかったりしますよね・・

そんなとき、取得した値に対してtable関数を使うことで配列を表形式に変換してくれます。

https___miro.medium.com_max_700_1_eQXZ734rw66Tbvmo_-9gMQhttps___miro.medium.com_max_700_1_irMyKccSEIIW8Ex4CAO-0A

要素を削除・非表示にする

デベロッパーツールのElementsからショートカットキー一つでDOM要素を削除したり、非表示にできたりします。

レイアウトを確認したいときに大変便利です。

方法

①「Elements」タブ選択

②対象要素を選択

③以下キーを入力

「H」キー→要素を非表示。(visibility: hidden !important;)

「バックスペース」→要素をDOM上から削除

スクリーンショット 2021-05-25 11.31.21

3. 最後に

今回紹介した機能以外にもChromeのデベロッパーツールには他にも便利な機能がたくさんありそうなので、引き続き調べる必要ありそうです。

デバッグやレイアウト共有など様々な場面で役立つと思うので、エンジニアのみならず、非エンジニアの方もぜひ活用して見てください。

もっと知りたい方は参考資料を御覧ください!

【参考】

【初心者でも分かる】Googleデベロッパーツールとは?使い方を紹介します

シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 木下 晴晶
    Mail:[email protected]

    3.取得した個人情報の利用目的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。