Chrome 149のDevTools、AIがかなり使えるようになってた。でも魔法じゃなかった

この記事でわかること

• Chrome 149のDevTools AIで実際に何が変わったのか（CSS機能＋AIアシスタント）
• 「自動修正」が廃止される理由と、AIとの正しい付き合い方
• AI疲れしないための「必要な機能だけ選ぶ」設定方法

AIがまた進化したらしい。でも、ちょっと待った

6月2日ごろ、Chrome 149がリリースされた。その中でも目を引いたのは、DevTools（F12で開く開発者ツール）のAIアシスタントの大幅アップデートだ。

Lighthouseと連携してパフォーマンスを分析し、Core Web Vitalsをウィジェット表示し、CSSのコード補完までしてくれるらしい。

「またAIがすごいことになったのか」と思った。でも同時に「またか」とも思った。

去年からAIの進化を追いかけ続けてきて、正直疲れた。新機能が出るたびに「使わなきゃ」と思ってしまう。特に駆け出しの頃は、ただでさえ覚えることが多いのに、さらにAIまで追いかける余裕なんてない。

それなのに「使わないと置いていかれる」という焦りだけはちゃんとある。AIツールの選び方で疲弊していたときに感じたのと同じ違和感が、またぶり返してきた。

Chrome 149で実際に何が変わったのか

まずは落ち着いて、何が変わったのか整理する。知らない単語が出てきても大丈夫。ひとつずつ噛み砕いて書く。

CSSの実用的な改善

今回のアップデートには、派手さはないけど地味に嬉しいCSSの新機能がいくつか入っている。

CSS Gap Decorations

GridやFlexboxでアイテムの間（gap）に線を引けるようになる。

たとえば商品一覧ページを作るとき、カードを3列に並べて、カードとカードの間に区切り線を入れたいとする。今まではこれが地味に面倒で、各カードにborderをつけて、端のカードだけborderを消して、余計なmarginで調整して……というハックが必要だった。

これが専用のプロパティ一発で書けるようになる。細かいCSSのハックが減るのは、ただそれだけでストレスが減る。

shape-outsideの拡張

画像の形に沿ってテキストを回り込ませるCSSプロパティだ。たとえば丸いアイコン画像の横に説明文を置くとき、四角い枠ではなく円に沿って文字が流れるようにできる。

今回、Chromeでもpath()やrect()といった指定方法が使えるようになった（FirefoxとSafariではすでに使えた）。これでブラウザごとに書き方を変える必要がなくなる。

path-lengthプロパティ

SVGの線をCSSから操作できるようになる機能だ。たとえば「線がにゅーっと伸びるアニメーション」を作りたいとき、いままではSVGタグの中に直接pathLengthという属性を書く必要があった。

CSSアニメーションと組み合わせるのが難しかったのだ。これがCSSプロパティとして書けるようになったことで、アニメーションの中に自然に組み込める。SVGアニメーションを触る機会がある人にはけっこう嬉しい変更だ。

DevToolsのAIアシスタント進化

こちらが今回の本命だ。ChromeのDevToolsに搭載されているAIアシスタント機能が、かなりパワーアップした。

まず前提として、DevToolsはChromeに内蔵されている開発者向けのツールセットだ。F12キー（MacならCmd+Option+I）で開く画面と言えばわかる人も多いと思う。

HTMLやCSSの確認、ネットワークの通信確認、JavaScriptのデバッグ、パフォーマンス測定などができる。そしてChrome 147あたりから、このDevToolsの中にAIアシスタント（チャットで質問できるAI）が組み込まれている。

Lighthouse統合

Lighthouseというのは、Googleが提供しているWebページの品質チェックツールだ。パフォーマンス、アクセシビリティ、SEOなどを自動で採点してくれる。

これまではLighthouseを使うとき、自分でボタンを押して、結果を読んで、問題点を探して……という手順を踏んでいた。Chrome 149からは、AIアシスタントに「このページのパフォーマンスを改善するには？」と聞くだけで、自動でLighthouseを走らせて分析してくれる。

結果は単なる数字の羅列ではなく、ウィジェット（カード形式のUI）で表示される。たとえば「LCP（ページのメインコンテンツが表示されるまでの時間）が遅い原因はこの画像です」と言われ、その画像にRevealボタンで直接ジャンプできる。問題発見から原因特定までの行ったり来たりが、かなり減りそうだ。

Core Web Vitalsのウィジェット表示

Core Web Vitalsとは、Googleが定めた「良いWebページ」の基準となる3つの指標のことだ。

• LCP（Largest Contentful Paint）：ページのメイン要素が画面に表示されるまでの時間。速いほどいい。
• INP（Interaction to Next Paint）：クリックやキー入力にページが反応するまでの時間。これも速いほどいい。
• CLS（Cumulative Layout Shift）：読み込み中にレイアウトがガタガタずれないか。小さいほどいい。

この3つが、AIアシスタントの中でグラフィカルに表示されるようになった。数字だけ見ても「ふーん」で終わりがちだが、どの要素がどの指標に影響しているかが視覚的にわかる。

CSSコード補完

Consoleパネル（JavaScriptを実行する画面）やSourcesパネル（ソースコードを表示する画面）では、以前からAIによるコード補完が使えた。

今回、Stylesタブ（CSSを編集する画面）でも補完が効くようになった。たとえばグラデーションやbox-shadow、Gridレイアウトのような、プロパティの組み合わせが複雑で手書きが面倒なCSSを、AIが候補として出してくれる。有効化はSettings > AI innovations > Code suggestionsから。

DevTools for agents v1.0安定版

少し難しい話になるが、ChromeのDevTools機能を、外部のAIコーディングツール（Claude Code、Gemini CLI、Antigravityなど）から操作できる仕組みが正式版になった。

「MCPサーバー」と呼ばれる共通のインターフェースを通じて、AIがDevToolsの中を覗けるようになるイメージだ。Lighthouseの自動実行やメモリリークの検出といった高度な分析を、普段使っているAIコーディングツールから直接呼び出せる。

魔法じゃない。自動修正はなくなる

ここまで聞くと「AIが全部やってくれる」と思ってしまいそうだが、そうでもない。

Chrome 149のDevToolsアップデートブログに、こう書いてある。

Chrome 152で、AIアシスタンスによる自動スタイル修正（automated styling fixes）のサポートを非推奨とする。

どういうことか。いまDevToolsのAIには「このCSSをこう直して」と指示して、実際にコードを書き換えてもらう機能がある。でも、それがChrome 152でなくなる。

代わりに「Copy to coding agent」ボタンで外部のAIツールに渡す方式に一本化される。

これはなかなか思い切った判断だ。「自動で直してくれたほうが便利じゃないか」と思うかもしれない。でも、考えてみれば当然だ。

AIはよくできたペンだと前に書いた。ペンが勝手に文章を書いてはいけない。コードも同じで、どこをどう直すかの判断は人間が持つべきだ。自動修正に頼りきって「なぜ直ったのか」を理解しないままだと、あとで似た問題が起きたときに対処できなくなる。

Chromeの開発チームは「AIは分析と提案まで。修正するかどうかはあなたが決めて」という線をはっきり引いたのだと思う。

AI疲れしない付き合い方

ここ数ヶ月、AIの進化が速すぎて追いかけるのがしんどい。新機能が出るたびに「使わなきゃ」と思って、試しては疲れて、また次が出る。このループに巻き込まれているのは、自分だけじゃないはずだ。

特にこれから技術を身につけている段階だと、「自分のスキルがAIに追い越されるんじゃないか」という不安も重なってくる。

でも、Chrome 149のDevTools AIを見て思った。これは「追いかけなきゃ」じゃなくて「必要なときに使えばいい」ものだ。

たとえば、

• ページが重いなと思ったら、AIアシスタントに「このページのパフォーマンスを見て」と聞く。自分でLighthouseタブを開いて、ボタンを見つけて、結果を解釈するよりずっと速い。
• Gridレイアウトやグラデーションを書くときだけ、CSSコード補完をオンにする。普段のシンプルなスタイリングではオフでいい。
• 問題の分析や原因の特定まではAIに任せる。コードを実際に修正するかどうかの判断は自分でする。

こうやって「AIに任せる部分」と「自分でやる部分」を意識的に分けるだけで、ずいぶん楽になる。全部をAIに任せようとすると疲れるし、全部を拒否しても損をする。ちょうどいい塩梅を、自分で決めればいい。

まとめ：AIは「追いかけるもの」じゃなく「選ぶもの」だ

Chrome 149のDevTools AIは、たしかに便利になった。Lighthouseとの統合で「どこが重いのか」をすぐに見つけられるし、CSSコード補完で面倒なスタイリングをサジェストしてもらえる。どちらも、日々の開発ですぐ使いたくなる機能だ。

でも、自動修正がなくなるのは大きなメッセージだ。Chromeの開発チームが言っているのは「AIは判断を助けるためにあって、判断を代行するためではない」ということだ。自分で理解して、自分で選ぶ。その補助として使う分には、十分すぎるくらい使える。

「AI疲れ」しないために、今日からDevToolsのAIアシスタント設定を見直してみる。全部オンにする必要はない。必要なときに、必要な分だけでいい。