Google Chromeの検証ツールの表示が変わった?!

Google Chromeの検証ツールの表示が変わった?!

こんにちは。トミーです。

2019年3月22日に気づいたのですが、Google Chromeのバージョンを「72.0.3626.121」から「73.0.3683.86」へアップデートしたところ、新たな機能に困惑したのでまとめてみました。

検証ツールの表示が変わった?!

Google Chromeでいつものように検証ツールを使っていたら、、、

「ん?!なんか表示されてる!」
となったので、色々と調べてみました。

検証ツール(別名:デベロッパーツール)とは

ブラウザで表示しているウェブページのHTMLやCSSを確認できるツールです。

ブラウザ画面より「右クリック」→「検証」で表示できます。
ショートカットキー「 Ctrl(⌘)+ Shift + C 」でも表示可能です。

Chrome73より新たに加わった機能

2019年3月13日にGoogle Chromeの新バージョン「Chrome73」がリリースされました。
(2019年3月23日現在での最新バージョンは「73.0.3683.86」です)

Google Chrome73でアップデートされた内容
  • macOS向けにダークモードへの対応
  • セキュリティに関するアップデート(60件以上)
  • 開発者向けの複数のアップデート

今回のアップデートで「ダークモードへの対応」が主に注目されているようです。
この内容に関する記事は多数ありますので、検索または下記をご覧ください。
参考 試した? Mac向けChrome 73でダークモードが使えるよGIZMODO

 

私が注目したのは「開発者向けの複数のアップデート」です!
今回のアップデートにより、要素にカーソルを合わせると下記の情報が表示されるようになりました。

  • id class
  • width(幅) height(高さ)
  • Color(文字色)
  • Font(フォントサイズ、種類)
  • Background(背景色)
  • Margin(マージン)
  • Padding(パディング)
  • Contrast(コントラスト比)

どうしてこのような仕様になったのか調べてみたのですが、あまりに情報がなく、、、
唯一見つけたのが下記の動画!しかし、この件に関しては情報が表示されるようになりましたの紹介のみでした(汗)

実際に使ってみた感想

表示された瞬間、画期的でとても便利!と思ったのですが、、、
要素を選ぶ度に表示されるため、コーディングの際に少し煩わしさを感じます。
また、情報が表示されるのみでコピーやCSSの変更などはできません。

アクセシビリティが大切になってきている時代に、コントラスト比が一目でわかるのは便利だなと思いました。

手動で最新版へアップデートする方法

もし、最新版へアップデートされたい方は、手動でアップデートする方法がありますのでご紹介しておきます。(最新版へのアップデートは自己責任でお願いいたします。)

手動でアップデートする方法
  1. Google Chromeを開く
  2. 右上の「3点マーク」をクリック
  3. 「ヘルプ」を選択
  4. Google chromeについて」を選択
  5. 「アップデートを確認しています」と表示される
  6. 「再起動」を選択
  7. ブラウザが再起動され、最新版へアップデート完了

画像付きでわかりやすく解説してあるサイトがありましたので、下記をご参照ください。
参考 【Google Chrome】手動で更新してアップデートする方法【バージョンアップ確認】いかせんもあんすぁ

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)