💡

Chrome DevTools AI を試してみた

2024/07/24に公開

Chrome のバージョン125以降では、Chrome は Gemini AI を使用して、コンソールでエラーや警告を分析し、開発者がより効率的にデバッグおよび問題を修正できるようにサポートしています。

Chrome DevTools AI を有効にする

Chrome DevTools AIを有効にするには、以下の条件を満たす必要があります:

  1. 18歳以上であり、この機能がサポートされている地域に居住していること。
  2. Chromeバージョン125以上を使用していること。
  3. GoogleアカウントでChromeにログインしていること。
  4. DevTools で Understand console messages with AI を On にしていること。
  5. DevTools の言語を英語にしていること。

使ってみる

  1. エラーがある簡単な Demo を↑で用意したので、今のページでDevToolsを開きます。
  2. Demo ページのボタンをクリックしたらエラーが出て、エラーメッセージにHoverすると右上に電球マークが表示されます。
  3. 初めて使う場合は 「Privacy notice」や「Legal notice」 を読み、Google がユーザーデータをどのように使用するかについて確認し、[Next]や[Continue] をクリックします。
  4. ちょっと待ったらエラーメッセージの下に Gemini AI による説明が表示されます。

内容を見ると、(極めて簡単なエラーなので)エラーの原因や解決方法なども記載され、デバッグに手伝ってくれると思います。

まとめ

Chrome は Gemini AI を使用して、コンソールでエラーや警告を分析し、開発者がより効率的にデバッグおよび問題を修正できるようにサポートしています。
Privacy noticeなどよく理解した上で使ってみても良いかもしれません。ただし、ログがGoogle側に送られるので、機密情報が含まれてないことを注意してねー

参考

https://developer.chrome.com/docs/devtools/console/understand-messages

Discussion