2021.11.03 2023.03.26

【コーダー向け】Chrome95のデベロッパーツールが使いにくいという話【フロントエンド】

デベロッパーツール,Google,開発者ツール

2021年の10月末に、Chrome95になってからデベロッパーツール(開発者ツール)の仕様が変更されました。

人によってはとても使いやすくなったアップデートかもしれませんが、個人的には非常に使いづらく、業務でも結構ストレスになっているので、どこが使いにくいのかを以下に述べていきます。

  • 個人の見解です

    ほかの意見もご参照ください

『デベロッパーツール』とは?

その前に、デベロッパーツールを簡単にご説明します。

『デベロッパーツール』とは『開発者ツール』とよばれるもので、コーディングできるWEBデザイナーや、コーダー、フロントエンドエンジニアが主に利用する機能になります。

  • デバッグ(修正)
  • JavaScriptの挙動チェック
  • 読み込み速度の確認
  • 擬似的なスマホデザイン表示
  • パフォーマンス計測

上記などのことがおこなえるため、WEBデザインをする上で必須の機能です(これでもほんの一部)。

WEB業界に入るのであれば、デベロッパーツールの機能を最低限を使えるようになっておくと、業務が楽になりますので、覚えておいて損はありません。

なお、デベロッパーツールはChromeのみならず、SafariやFirefoxなどのブラウザでも標準搭載されています。個人的にSafariのデベロッパーツールは融通がきかないから使いにくい……

Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説|WiLL Cloud

Chromeのデベロッパーツールって何?何が出来るか徹底解説します!|Geekly

Chrome95での変更点

デベロッパーツール,Google,開発者ツール
cmやmmっていつ使うんだろうか……?

そして、Chromeのデベロッパーツールが2021年10月末にアップデートされました。

詳細は以下のブログ様の記事が詳しいですが、今までの余白(margin、padding)指定は手打ちでしかできなかったのに対し、Chrome95のデベロッパーツールでは、

  • 単位の変更】値の単位(px、emなど)をクリックすると、自由に変更できるようになった。
  • 直感的な余白指定】Shiftを押しながら値の矢印を動かすと、10区切りに変更できて直感的になった。

主にここの仕様が大きく変更されています。

Chrome 95のデベロッパーツールの新機能が便利!vh, vw, rem, emなど、CSSの単位を簡単にオーサリング|coliss

重ねるように、この仕様変更は人によって作業効率の上がる、いい変更かもしれません。しかし、自分からするとかえってストレスになっていて不便に感じているので、改めて以下から記載します。

余白指定がやりにくくなった

背景

余白指定には
派閥がある

先ほど、余白指定が直感的になったと記載していますが、あくまでも「余白を10の倍数で決めている人」限定の話です。

世の中のWEBデザイナーは、

  • 8の倍数】原則、余白を8の倍数で決めてレイアウト。
  • 10の倍数】原則、余白を10の倍数で決めてレイアウト。

大まかにはこの2種類の派閥があるんですね。

そして個人的、業務上のレギュレーション(基本ルール)では、「余白は8の倍数で決める」ようにしています。

これは、世の中のデバイスの解像度が8の倍数であることに由来していて、ゲーム業界大手の『任天堂』の公式サイトも、8の倍数で作られているそうです。

8の倍数で余白を決めているタイプからすると、この機能はあまり使わないというか、むしろ値を変える際に、かえって矢印が邪魔になってしまいます。

Shiftを押さなければ1単位で修正可能ですが、8の倍数で決めているぶん、自分で打って調整したほうが早いんですよね。

VSコードへの貼り付けが不便

背景

個人的に一番の不満点

自分はコードを書く際、基本的にVSコードで書いてプレビューし、デベロッパーツールで問題点を洗い出し、それをコピペして修正しているスタイルをとっています。

コピペすればそのまま貼り付けられるし、非表示にしたものもちゃんとコメントアウトされるので、大変便利なんですね。

しかし、Chrome95のデベロッパーツールで貼り付けると、

デベロッパーツール,Google,開発者ツール
そのままコピペした状態

このように、変に改行されてしまいます。これが地味にストレスで、今までだったらそのまま貼り付けるだけで済んでいたのに、わざわざ書き直す手間が発生します。

デベロッパーツール,Google,開発者ツール
正しい状態(以前はこれだった)

「ライブプレビュー機能を使えば?」ってなるかもしれませんが、ライブプレビューってたまに強制終了したり、反映できないときがあるんですよね(自分だけ?)。

最後に:便利だと思う人もいれば不便に思う人もいる

背景

意見も多種多様

別にChrome95のデべロッパー機能が改悪だと言っているわけではありませんし、機能の革新というのは、どこでも賛否両論が起きるものです。

Android12のアップデートも同時期にきましたが、UI(画面)のデザインが大幅に革新されているため、意見が割れていますからね(iPhoneっぽくて好き、時計やアイコンが使いにくくダサいなど)。

こちらの使いかたが単に間違っている可能性だってありますし、いい落としどころがあればいいなと思いますね。

寄付のお願い

フキダシ3 ありがとう
ございます
  • 当サイトはみなさまのご支援により、広告なしの実現やサイト維持をおこなっています。

    記事や作品が気に入りましたら、支援サイトのご支援や寄付をよろしくお願いいたします。

記事・作品をシェア

https://umakose.com/notes/211103-1/

クリック・タップでコピーできます

1.シェアについて

赤竹ただきち(以下、当管理者)が運営するウマコセドットコム(以下、当サイト)の内容をシェアする場合、個人サイト・ブログ・サービス・SNSを問わず、URLなどを記載して出典元を明記ください。

明記していただければ、社会通念上の範囲内でご自由にシェアが可能です。

2.記事の引用(転載)

記事内の文章を引用される場合、URL元を明記し引用要素(blockquote)内に記載してください(なおサイト内のコピペは悪用・言い逃げ対策のため不可にしていますので、ご了承ください)。

掲示板やSNSの場合は、文頭に「>」などをつけ、オリジナルコンテンツ(コピーコンテンツ)ではないことを明確にしてください。

要約のための一部改変は、記事の意図を大幅に変えなければ可能とします。

3.キャラクターの使用

当サイトに掲載されているオリジナルキャラクターの使用は、創作性が高い非営利の個人に限り、イラスト・マンガなどに使用できます。非営利・個人の定義はこちらをご参照ください。

制作費・人件費の範囲内であれば、有償配布や支援サイトの掲載も可能としますが、AIで作成した作品で当管理者の絵だと誤認させる、有償行為をするのはご遠慮ください。

4.当管理者の著作権

当管理者が作成した文章・画像・デザイン・オリジナルキャラクターや作品などについては原則、ご依頼であっても著作権は当管理人に属します。

ただしバーチャルVtuberなど、権利者ご自身のキャラクター、または二次創作元のキャラクターなどの知的財産権につきましては、当管理者ではなく元の権利者に属します。

4.禁止行為

以下の行為が見られた場合は、個別のご連絡や法的処置などといった対応をとらせていただく場合があります。

A.二次利用・加工・改変

当サイトの画像・イラスト・文章・ブログレイアウトなどの悪意ある二次利用・加工・改変行為や、信用毀損・反社会的など、社会通念上問題のある目的での利用。

B.不適切な拡散

特定のキーワードや文面に反応するなど、不適切な拡散行為の禁止(誤った解釈のみならず、〈自他問わず〉いわれなき風評被害や誹謗中傷につながる恐れがあるため)。

C.誹謗中傷

当サイト・他者・企業などを誹謗中傷する目的での引用。また煽り・マウント行為といった、意見・提起・指摘ではなく、人格・風評を著しくおとしめようとする行動も含む。

5.著作権

当サイトは著作権の侵害を目的とするものではありません。

画面のスクリーンショットや二次創作元の知的所有権はそれぞれの権利者・団体に帰属しており、各利用規約を確認した上で掲載しています。

有料二次創作は権利元の創作ガイドラインを厳守するように努めていますが、問題があれば当サイトのお問い合わせよりご報告ください。

6.トラブル

当サイト記事のシェアなどが要因で発生したトラブルなどについては、一切の責任を負いかねます。あくまでも参考・一意見として扱ってください。

当管理者まで直接ご意見・ご指摘を希望される場合は当サイトのお問い合わせからご連絡願います。

制定日:2017/2/24
改定日:2024/3/20

シェア・引用の前に「規約・ポリシー」をご一読ください(同意したものとみなします)。

特定の単語・見出しで拡散、他者を誹謗中傷・マウント・バッシング目的のシェアは固くお断りいたします。

シェア内容が問題だと判断した際、個別にご連絡を差し上げる場合があります。

社会通念上のモラル・リテラシー・マナーを守っていれば、ご連絡をすることはございません。シェア・引用をしていただき、誠にありがとうございます。

プロフィール

    • フキダシ2
    • 赤竹ただきちTadakichi Akatake
  • 岩橋良昌氏と真木よう子氏のエアガンで撃った撃ってない論争で学ぶべきは、「大人の対応ができないリテラシーの低い人たちが、SNSをやるとどうなるか」の教訓じゃなかろうか。

    わざわざ火種になることを書く上に売り言葉買い言葉、相手を「重度の精神障害」と刺激させる弁解もいただけない。片方を鵜呑みにして当事者を人格否定するユーザーも論外。

    どちらが真実かという事実確認は第三者の外野がすべきではないとして、40過ぎた社会人同士が、大人の対応が出来ていなければSNSのリスクも理解していない事実の部分は問題ね。

    そういう人がSNSで気軽に発信できてしまうのが今の時代。自分の記事を愛読してくれてる人は、こうはならないように一緒に学んでいきたいと思う。

イラストレーター・コーダー+WEBデザイナー・ライターの京都生まれなウサギ好き。多様な絵柄を描け、外国人でも絵でわかるマンガ、ウサギと口内描写にこだわりを持つ。

コーディングとWebデザインは両方可能。案件によっては「デザインとコーディングの同時進行」の荒業もおこない、SEOを意識したマークアップも得意。

「自省・リテラシー向上・正しい批判」をライフワークとし、当サイト記事も「中学生でもわかりやすい、気づき・理解・学ぶ」を全体テーマとして執筆。

これは微力ながら閲覧者に考える・学ぶ助力のほか、自身も学ぶ目的も含み、実社会・ネット・SNSでも「わかりやすく参考になった」とご好評の声多数。

「下手でも自分の弱さを認め、自省し学び、その姿勢を相手への敬意として表すことも忘れない人」は、年齢・性別問わず好きなタイプ。

自省についての解説を読む

リテラシーについての解説を読む

正しい批判についての解説を読む