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

【コーダー向け】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っぽくて好き、時計やアイコンが使いにくくダサいなど)。

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

記事・作品が気に入ったら
SNSシェア・引用

利用規約について

本利用規約(以下「本規約」といいます)は、赤竹ただきち(以下「当管理者」)の著作物、または運営するウェブサイト「ウマコセドットコム」(以下「当サイト」)の利用条件を定めるものです。

当サイトの閲覧および、当管理者の著作物を利用時点で、本規約に同意したものとみなされます。

第1条:適用

本規約は、当管理者の著作物・作品利用(複製・引用・転載・解析・AI利用なども含む)に関する一切の行為に適用されます。

第2条:シェアについて

当著作物・作品をシェアする場合は出典を明記してください。

内容の恣意的な改変や創作、攻撃的言動・当管理者や他者の誹謗中傷目的など、モラル・マナーに反しない範囲に限り、シェアやご意見・ご感想などを自由に述べていただけます。

第3条:引用・転載

当著作物の流用・抜粋・引用などにおいて、当管理人までの申告は原則不要です。

当著作物の引用には法的条件(公表物・引用の明示・出典元明記・補足使用・必然性・改変しない)を満たす必要があり、満たしていない場合は無断転載とみなされます。

記事・動画作成などにおいて、当サイト記事を参考にとどめて文章を創作した場合、URL記載は任意です。要約の一部改変は、記事の目的・意図を大幅に変えなければ可能とします。

当作品の引用・転載はURL記入、もしくは当管理者名・アカウント名などの記載をお願いいたします。支援サイト有償公開コンテンツの二次利用・転載は固くお断りいたします。

第4条:キャラクターの使用

当サイトのオリジナルキャラクターは創作性が高い非営利の個人に限り利用できます。非営利・個人の定義はこちらをご参照ください。

AIを利用せず制作費・人件費の範囲内なら、有償配布・支援サイト掲載も可能とします。

第5条:著作権

当サイトは著作権の侵害を目的とするものではありません。スクリーンショットや二次創作元の知的所有権は各権利者・団体に帰属し、各利用規約を確認した上で掲載しています。

当管理者が作成した文章・画像・デザイン・オリジナルキャラクターや作品などは原則、ご依頼でも著作権は当管理人に属し、日本の著作権法および国際条約により保護されています。

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

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

第6条:AIの利用

当管理者の著作物は、解析・研究・個人的利用などの目的において、AIその他の技術の入力・学習対象として利用される可能性を、当管理者および利用者は相互認識するものとします。

当管理者は当著作物・作品のAI利用自体を一律に禁止しませんが、AI生成物で当管理者の創作物だと誤認、有償利用などは固くお断りいたします。

前項に該当する行為は、著作権侵害・不正競争防止法違反・または人格権侵害等に該当する可能性がありますのでご注意ください。

第7条:禁止行為

以下の行為が見られた場合、個別連絡や法的処置などの対応をする場合があります。

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

当サイト画像・作品・文章などの悪意ある二次利用・加工・改変行為、名誉毀損・反社会的など、社会通念上問題のある目的での利用。

法律で認められる引用範囲から逸脱した、当管理者のコンテンツ・作品を無断で複製・転載・公衆送信・再配布・販売・改変行為の禁止(引用元を明記しない記事・動画の作成など)。

B.AI生成物の悪用

当管理者の作品・メイキング・設定画など、当著作物、またはその表現上の特徴をAIに利用し、当管理者が創作・関与したかのように誤認、またはAI生成物の有償販売など。

当管理者の名前・サイト名・作品名等を無断で用いたAI生成物の利用行為。

C.歪曲・誹謗中傷

単語・見出しに反応、過度な歪曲・脚色などの不適切なシェアや、当サイト・他者・企業などの誹謗中傷目的での引用。あおり・マウントといった、人格・風評を著しくおとしめる行動の禁止。

D.その他

その他、社会通念上・公序良俗に反する行為や、当管理者が不適切だと判断した場合。

第7条:トラブル・免責事項

当サイトの掲載情報について、正確性・完全性・安全性を保証するものではありません。

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

当管理者まで直接ご連絡を希望される場合は当サイトのお問い合わせからご連絡ください。

第8条:規約の変更

当管理者は必要と判断した場合に限り、事前通知をすることなく本規約を変更できるものとします。変更後の規約は、当サイトに掲載された時点で効力を生じるものとします。

第9条:準拠法および管轄

本規約の解釈は日本法を準拠法とします。また、本規約に関して生じた紛争については、当サイト運営者の所在地を管轄する裁判所を専属的合意管轄とします。

米国その他の海外法域における著作権侵害の申立てにおいて、米国デジタルミレニアム著作権法(DMCA)に基づく場合があります。

DMCAに基づく申立ては、海外プラットフォーム、検索エンジン、ホスティングサービス等に対する削除要請が目的であり、本規約の準拠法または管轄を変更するものではありません。

DMCA申立てを行う場合、当管理者が当該著作権・正当な権限を有することを前提とします。

制定日:2017/2/24
改定日:2026/1/4

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

特定の単語・見出しで全体を判断したり、内容の過度な歪曲・脚色行為、他者を誹謗中傷・バッシング目的のシェア・引用は固くお断りいたします。

シェア・引用内容が問題・風評被害行為だと判断した際、個別にご連絡を差し上げる場合があります。

社会通念上のモラル・マナー・礼節の範囲内であれば、ご連絡することはございません。シェア・引用をしていただきありがとうございます。

プロフィール

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