デベロッパーツール,Google,開発者ツール
デベロッパーツール,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,開発者ツール
正しい状態(以前はこれだった)

「もうライブプレビュー機能(VSコードでブラウザにリアルタイム表示する拡張機能)を使えばいいじゃん」ってなるかもしれませんが、ライブプレビューってたまに強制終了したり、反映できていないときがあるんですよね(自分だけ?)。

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

意見も多種多様

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

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

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

当サイトはみなさまのご支援で、広告なしの実現やコンテンツ維持を行っています。情報がお役に立てたり、気に入った作品がございましたら、ご支援をお願いいたします。

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

クリック・タップで記事URLをコピーできます

利用規約

個人情報保護

当サイトや赤竹ただきち(以下、当管理者)宛に送られたメールの内容や差出人、アクセス解析で得た個人情報などは、差出人・閲覧者当人の承諾がない限り、当サイト内やほかのサービスで公開することはいたしません。

絵や記事のシェア

当サイトの絵や記事をシェアされる場合、個人サイト・ブログ・サービス・SNSなどを問わず、URLなどを記載して、出典元を明記ください。明記していただければ、ご自由にシェアしていただいて構いません。

ただし、記事の場合は下記の『禁止行為』のとおり、記事を読まない、特定のワードに反応したようなシェア行為はお断りいたします。

記事の引用(転載)ルール

記事内の文章を引用(転載)される場合、URL元を明記した上で引用要素(blockquote)内に記載してください。掲示板やSNSの場合は、文頭に「>」などをつけ、オリジナルコンテンツ(コピーコンテンツ)ではないことを明確にしてください。

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

メールの内容・取り扱い

メールはご意見・ご指摘・ご感想・依頼・営業メールのみ受けつけますので、あらかじめご了承ください(当サイトを利用した宣伝・委託行為はお断りいたします)。

下記の『禁止行為』のとおり、メール内容に当管理者や他者へのヘイト行為といった、誹謗中傷が見られた場合、返信を控えさせていただくほか、悪質と判断した場合は法的処置をとる場合があります。

禁止行為

以下の行為が見られた場合は、法的処置などといったしかるべき対応をとらせていただく場合があります。

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

二次利用・加工・改変行為の例外
シェアや引用(転載)のルール遵守など、社会通念上問題がないケースや、または要約のための文章改変・紹介や参考、プレビュー画像としてのスクリーンショット撮影・トリミング(切り取り)しただけの場合は例外として扱う。

安易な拡散行為の禁止
特定のキーワードや単語に反応し、記事を読まないままの安易な拡散行為の禁止(誤った解釈のみならず、〈自他問わず〉いわれなき風評被害や誹謗中傷につながる恐れがあるため)。

誹謗中傷行為の禁止
当サイト・他者・企業などを誹謗中傷する目的での引用行為。また、当管理者あてのメールやSNSのメッセージ・コメントなどにおいても、意見・指摘ではなく誹謗中傷目的のもの。当管理者や他者の人格・風評を著しくおとしめる行為。

著作権

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

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

オリジナル作品や当サイトのレイアウトデザイン・掲載文章の著作物は当管理者が有しており、『禁止行為』のとおり、シェア・引用(転載)のルールが守られていないもの、悪意ある二次利用・改変行為を禁止します。

トラブル

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

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

リンクについて

当サイトはリンクフリーですが、バナー画像以外の画像直リンク行為や、インラインフレーム表示は固くお断りいたします。

制定日:2017/2/24
改定日:2022/3/3

シェア・引用をされる前にご一読ください(内容に同意したものとみなします)

  • 赤竹ただきち
  • 赤竹ただきち  Tadakichi Akatake

評論ができる人と評論家気取りの違いは、対比するとよくわかるよ。

評論できる人は論理的で言葉を選ぶ。評論家気取りは感情的で言葉を選べない。

評論できる人は正しい批判ができる。評論家気取りは文句や悪口を批判だと思っている。

評論できる人はリテラシーが高い。評論家気取りはリテラシーが低い。

評論できる人は意見される覚悟がある。評論家気取りは意見されると逆上する。

評論できる人は思いやりがある。評論家気取りはただの自己満足。

評論できる人は実生活でもはっきりと意見を言える。評論家気取りはネット・SNSの世界でしか主張しない。

自分のいる会社はちゃんと評論ができて、自分の意見を持っていないと働けないから、本当にいい訓練になる。

イラストレーター・ライター・フロントエンドエンジニア・WEBデザイナーの京都生まれなウサギ好き。性別問わず好きなタイプは「反省から学ぶ能動的な人」。物事を定義づけし、見解を交えてわかりやすく解説するのが得意なため、各所でご好評の声を頂いております。

ご依頼・お問い合わせ
デベロッパーツール,Google,開発者ツール

内容・ジャンルをタグで探す

ATARIAVGNElite Beat AgentsGソニックMacMacintoshMADWORLDMGRMGSMGS4MGSPWMGSVmoonR-15WordPressあつまれどうぶつの森お役立ちきみのためなら死ねるくすぐりとびだせどうぶつの森どうぶつの森どうぶつの森 ポケットキャンプアイドルマスターアイドルマスターシンデレラガールズアズレンアズールレーンオリジナルキズナアイグロゲームコロコロアニキコロッケ!ゴッドオブウォーサイバーモーフサウスパークスカイウォードソードスターウォーズスマブラSPスーパーマリオ64スーパーマリオギャラクシースーパーマリオサンシャインゼルダの伝説ソウルキャリバーソニックソニックXソニックと暗黒の騎士ソニックアドベンチャーソニックオリジンズソニックカラーズソニックジェネレーションズソニックトゥーンソニックヒーローズソニックフォースソニックフロンティアソニックブームソニックロストワールドソーシャルゲームチームソニックレーシングテッドバンジョーとカズーイの大冒険バーチャルYouTuberパンチアウト!!ピカブイピクミン3ホロライブポケットモンスターポケモンポケモンBW2ポケモンXYポケモンマスターズポケモンレジェンズポケモン剣盾ポーズマニアックスマックスアナーキーマリオマリオ&ソニックマンガミニ四駆ムジュラの仮面メタルギアメタルギアライジングヤンこれヤンデレヤンデレーンリョナリングフィットアドベンチャー創作名探偵ピカチュウ喧嘩番長喧嘩番長6大乱闘スマッシュブラザーズ押忍!闘え!応援団新ソニ星のカービィ映画模写死.tv海外アニメ爆走兄弟レッツ&ゴー!!百合考察艦これ艦隊これくしょん色彩検定解説超速グランプリ遊戯王遊戯王ARC-V遊戯王SEVENS遊戯王ゴーラッシュ!!雑記風のタクト魁!!クロマティ高校
  • お問い合わせ
  • #R-15

    R-15

ENTRIES

RANKINGS

PICK UPS

PATRON

COMMISSION