ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP)
ウェブブラウザを自動操作する際には、WebDriverやChrome DevTools Protocol (CDP) などのAPIが広く利用されています。 これらのAPIを基盤に構築された様々なブラウザ自動操作フレームワークが、テスト自動化の分野で重要な役割を果たしています。 例えば、SeleniumやPlaywrightといったフレームワークを利用して、テストの自動化に取り組まれている方もいらっしゃると思います。 私もテスト自動化フレームワークの便利さを享受する一方で、フレームワークを介さずにブラウザを自動操作する方法についての興味がわいてきました。 そこで、この記事ではWebDriverやCDPが提供するAPIを直接利用してブラウザを操作する方法を基礎から探求してみることにしました。 これにより、私たちが普段利用しているフレームワークの背後にある原理を理解し、より深い知見を得ることを目
Googleは、日本時間5月15日から開催中のイベント「Google I/O 2024」で、デスクトップ版のChromeが備える開発ツール「Chrome DevTools」に、同社の最新版の生成AIであるGeminiを組み込むと発表しました。 これによりDevToolsのコンソールで表示されるエラーメッセージなどをGeminiが解説し、エラーの解決などを支援してくれるようになります。 DevToolsのエラーをGeminiが解決 下記がGoogle I/Oのデベロッパー向け基調講演で行われたデモ画面の一部です。DevToolsに表示されたエラーに関して、右上の「Understand this error」ボタンをクリックすると、このエラーがGeminiに送られます。
Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保
拡張機能で Chrome DevTools に独自パネルを追加してトラブルシュートに役立てよう - Techtouch Developers Blog
こんにちは、カスタマーサクセスエンジニア（CSE）の komo です。 この記事では CSE の主業務の１つにテクニカルサポートがありまして、それを効率化するために作ったツールの話をします。 具体的には Google Chrome 拡張機能で DevTools に独自パネルを追加して、トラブルシュートに有用な情報を表示させるツールです。実物をそのまま紹介はできないため、ひな形を別途作りました。作り方を書くので、同じようなカスタマー系エンジニアの方々に真似してもらって、役立ててもらえると嬉しいです。 ツールの説明 ひな形からの発展形 作り方 ステップ1：最小の拡張機能を作る ステップ2：パネルを追加する ステップ3：パネルに機能を追加する おまけ：動作確認・キャプチャ取得用に作ったHTMLとJSON おわりに 参考資料 ツールの説明 別途作ったひな形はこんなものです。 通信を監視して、特定の
Chrome DevToolsで表示されるエラーを生成AIのGeminiが解説してくれる新機能、日本でも利用可能に
Chrome DevToolsで表示されるエラーを生成AIのGeminiが解説してくれる新機能、日本でも利用可能に Chrome DevToolsのコンソールで表示されるエラーメッセージなどをGoogleの最新AIであるGeminiが解説し、解決方法などを提案してくれる機能が日本でも利用可能になっていることが分かりました。 この機能は今年（2024年）5月に米国で実験的機能として利用可能になっており、日本での提供開始が待たれていました。 下記のChrome DevToolsのドキュメント「コンソールの分析情報: Gemini でエラーと警告をより深く理解する | Chrome DevTools | Chrome for Developers」で、この機能が「コンソールの分析情報」として日本でサポートされていることが記述されています。 DevToolsでGeminiを利用する設定手順 コンソ
GitHub - GrinZero/node-network-devtools: Inspecting Node.js's Network with Chrome DevTools✨
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Brand New Performance Features in Chrome DevTools | DebugBear
This guide covers some modern web performance features of Chrome DevTools, with a focus on the new Performance Panel features which helps you optimize Core Web Vitals and improve your general web performance. What We'll Cover In this guide, we'll dive deep into the new Performance Panel features in Chrome DevTools. We'll explore what the new features are, how to access it, and how to use it effec
Console insights: Understand errors and warnings better with Gemini | Chrome DevTools | Chrome for Developers
In the dialog window, learn what data will be sent to Google. To view the data in new tabs, you can click the corresponding links. To get an explanation, click Continue. After a few seconds, an explanation will appear below the console error. If you don't think the explanation is satisfactory, you can click Use search instead to open a new tab with search results for the error. We would greatly ap
Chrome DevTools を使用して低コントラストのテキストを検出して修正する | Google for Developers
Chrome DevTools を使用して低コントラストのテキストを検出して修正する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 1. はじめに 低コントラストはウェブ アクセシビリティにおける最大の問題です。ここでは、DevTools を使用してこの問題を理解し、検出、修正する方法を学習します。 学習内容 低コントラストの問題について理解する 低コントラストのテキストを検出する方法 低コントラストのテキストを修正する方法 必要なもの 動作するパソコンと安定した Wi-Fi 接続 Chrome 87 以降 演習内容 ウェブページの低コントラストの問題を修正します。 2. 開始 次のリンクをクリックすると、低コントラストのテキストを含むページが開きます。 ページを開く 次に、開いたページで Chrome DevTools を起動します。 3. 低コントラ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome DevToolsにもGeminiを搭載へ。エラーの解決策などAIが支援
Chrome DevToolsを使いこなしてフロントエンド開発を加速させる