Chrome DevTools (MCP) for your AI agent | Blog | Chrome for Developers
Published: September 23, 2025 We're launching today a public preview for the new Chrome DevTools Model Context Protocol (MCP) server, bringing the power of Chrome DevTools to AI coding assistants. Coding agents face a fundamental problem: they are not able to see what the code they generate actually does when it runs in the browser. They're effectively programming with a blindfold on. The Chrome D
Chrome でページを事前レンダリングしてページ ナビゲーションを即時に行う | Web Platform | Chrome for Developers
Chrome チームは、ユーザーが次に閲覧する可能性が高いページの完全なプリレンダリングを復活させました。 プリレンダリングの簡単な歴史 以前、Chrome は <link rel="prerender" href="/next-page"> リソースヒントをサポートしていましたが、Chrome 以外では広くサポートされておらず、表現力に優れた API ではありませんでした。 リンク rel=prerender ヒントを使用したこの従来の事前レンダリングは、NoState Prefetch に置き換えられました。この機能では、将来のページに必要なリソースがフェッチされますが、ページが完全に事前レンダリングされたり、JavaScript が実行されたりすることはありません。NoState Prefetch はリソースの読み込みを改善することでページのパフォーマンス向上に役立ちますが、完全な事
Masataka Yakura on Twitter: "Chrome 105で`:has()`が入ったらjQueryが壊れたという話が出てきてうわーってなっている。 https://t.co/HxjKvwpEwG"
Chrome 105で`:has()`が入ったらjQueryが壊れたという話が出てきてうわーってなっている。 https://t.co/HxjKvwpEwG
これは便利！デザイナー向けのChrome拡張機能用デザインツールVisBug | SONICMOOV LAB
Chromeのブラウザにはデベロッパーツールというのがありますが、それを利用することでWebページのHTMLやCSSを書き換えて素早くコーディングをしたり、動作検証をすることができます。コーディングに使えるのはもちろんですが、うまく使えばデザインをあれこれと試行錯誤することもできます。 このデベロッパーツールに似たChrome拡張機能用デザインツールにVisBugというのがあります。 VisBugとは？ VisBugは、オープンソースによるChrome拡張機能用のデザインツールです。 下記のような主な特徴があります。 Webページの要素などをクリックすると、様々な情報を表示 アートボードのようにページを編集したり、スタイルを変更できる ホバースタイルやアクセシビリティの確認、要素配置の変更も可能 レイアウトとコンテントは、様々なデバイスサイズに対応 AdobeとSketchのスキルを活用
Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも
Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも Googleは、来年1月に登場予定のChrome 97で、DevToolsにWebブラウザ上での操作内容を記録し、再実行や編集、保存などを可能にする新機能を搭載することを明らかにしました。 Introducing the new Recorder panel You can now record, replay and measure user interactions with @ChromeDevTools. See it in action - ordering coffee. Learn more about this preview feature (available in Chrome Canary now): https://t.c
フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです🎉 さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しましたが、現在サイボウズ社内では kintone で利用するフロントエンドの技術スタックを刷新する取り組みを進めています。 その一環として、 "Closure Tools DevTools" という Google Chrome 向け拡張機能を作成しました。 作成した DevTools は kintone に限らず利用することができるため、Chrome ウェブストアで公開しています。 chrome.google.com ソースコードも次のリポジトリでご確認いただけます。
Update on User-Agent String Reduction in Chrome
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
ChromeのPWAインストール要件が変更に、オフライン対応必須。Chrome 89で警告
[レベル: 上級] Chrome での PWA インストールの要件が変更になります。 オフラインを実際にサポートしている必要があります。 Chrome 93 で変更が適用される予定ですが、リリースされたばかりの Chrome 89 ではオフラインサポートしていないと警告が出ます。 実際のオフラインサポートがPWAインストールの条件に Web担当者Forum の連載コラムで取り上げたように、Chrome での PWA インストール要件が変わります。 [PC 版 Chrome での PWA インストール] インストール可能にするにはオフライン対応している必要があり、そのチェック体制が厳しくなります。 技術的に言うと、これまでは、Service Worker に fetch イベントがあれば適合していました。 実際にはオフライン対応していなくても問題なかったのです（Chromeにそこまで検証する
What's New In DevTools (Chrome 90) | Blog | Chrome for Developers
New CSS flexbox debugging tools DevTools now has dedicated CSS flexbox debugging tools! When an HTML element on your page has display: flex or display: inline-flex applied to it, you can see a flex badge next to it in the Elements panel. Click the badge to toggle the display of a flex overlay on the page. In the Styles pane, you can click on the new icon next to the display: flex or display: inlin
Chrome 88: Digital Goods, Lighting Estimation in Augmented Reality, and More
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
chromeのreferrer-policyについて - ishikawa_pro's memorandum
[9/8追記] chrome 85がリリースされたのに、defaultのreferrer-policy変わってないなと思ったら段階的に変わっていくみたいです。 A new default Referrer-Policy for Chrome: strict-origin-when-cross-origin こんにちは。 業務でchromeのreferrer-policyについてちょっと調べることがあったので、今日は軽くまとめです。 referrer-policyとは そもそも僕が、referrer-policyについてそんなに詳しくなかったのでまずは簡単な説明。 Referrer-policyは、リクエスト時にreferer headerにどれくらいreferer情報をつけるかを設定するためのヘッダーです。 refererの情報量とは、具体的に origin, path, query 全て
Chrome85でWebサイトの流入元がとれない問題と対応方法 -
(English article is here) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 Chrome最新版(Chrome 85)で、徐々にWebサイトへの正確な流入元URL(URLのパス名)が取得できなくなってきています。 例えば、はてなブログからの流入では、どの記事から流入したかがわからず、流入元の調査・分析などのマーケティングへの影響が大きいと思われます。今回はまだWeb上での情報が限られているようなので、ここでは状況と対応方法について紹介したいと思います。 発端 「paiza」には毎日いろいろなサイトからのアクセスがあります。そんななか、先日ある社員から「やけに『paiza開発日誌』（このブログです）のトップページからのアクセスが増えているのだけど、理由って分かりますか？」と質問がありました。その近辺での「paiza開発日誌」のアクセス数は通
Gyazo Chrome Extensionの再公開について - Gyazo Blog
Gyazo Extensionの開発を主に担当しているid:Pasta-Kです。 Gyazo Extensionは日本時間の2020年5月21日〜2020年7月29日の間、Chrome Web Storeから取り下げられていました。いくつかの変更をExtensionに加えることで審査を経て本日遂に再公開となりました。同様にGyazo Teams向けのExtensionも引き続き非公開になっていますが、今回のGyazo Extensionの再公開を受け、数日中に再公開できる見込みです。 この件に関する、経緯と対応に関する具体的な内容について、主にChrome Extensionの開発に関わる皆さんに向けて共有しようと思います。もし同じような事象に遭遇している方の参考になれば幸いです。 経緯について Chrome Web Store側からはUse of Permissions*1に関する違反が
Scroll To Text Fragment と :~:text | blog.jxck.io
Intro ページ内の特定の位置へのスクロールは、URL フラグメントと HTML の ID 属性を用いて行われていた。 しかし、ID を持たない要素へのスクロールというユースケースをカバーするために、フラグメントの拡張仕様が提案されている。 Chrome がフラグ付きで実装しているため、この仕様の特徴について解説する。 id 属性とフラグメント 従来の仕様では、HTML 内にある ID 属性を URL フラグメントに付与することで、その要素まで自動でスクロールするという仕様になっていた。 https://html.spec.whatwg.org/multipage/browsing-the-web.html#try-to-scroll-to-the-fragment https://html.spec.whatwg.org/multipage/browsing-the-web.html#
Akky@サイボウズ・ラボ : Link to Text Fragment - Googleによるウェブページの任意の場所をリンクできるブラウザ拡張
新しいLink to Text Fragment Google社自身によってリリースされた、ウェブサイトの好きな箇所をURL化して共有できるChrome拡張です。 拡張をインストールした状態でページ上のテキストを選択し、右クリックメニューを出すと、Copy Link to Selected Text (選択されたテキストへのリンクをコピー)というメニューが増えています。 ここでクリップボードに取得されたURLを Chrome ブラウザ上で開いてみると、 先ほどリンクを作成したwebページが開かれた上で、選択していた部分が黄色くハイライトされ、ページもそのハイライトされた部分までスクロールした状態で開かれます。 選択するテキストが短すぎると、URLが作れない、というエラーが出ます。 利用シーン これまで、他人が作ったウェブサイトのURLを他の人と共有することはできても「この特定の部分を見せた
The cost of JavaScript in 2019 · V8
Show navigation Note: If you prefer watching a presentation over reading articles, then enjoy the video below! If not, skip the video and read on. “The cost of JavaScript” as presented by Addy Osmani at #PerfMatters Conference 2019.One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script. In 2019, the dominant cost
GoogleはChromeでユーザーエージェント文字列を段階的に廃止する方針
by Tati Tata ブラウザがウェブサイトにアクセスする際に送信するユーザーエージェント文字列は、使用しているOSやデバイスのアーキテクチャ、ブラウザの情報などを含んだテキストであり、ウェブサイトの表示形式などに影響します。オープンソースのウェブブラウザエンジンChromiumをベースとしてGoogleが開発するGoogle Chromeが、このユーザーエージェント文字列を段階的に廃止する方針であることが明らかになりました。 Intent to Deprecate and Freeze: The User-Agent string - Google グループ https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/-2JIRNMWJ7s/yHe4tQNLCgAJ Google to phase out user-a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google、「Chrome for Testing」を発表 ～ブラウザー自動化とテストに特化したバイナリ／自動更新による挙動変更や「ChromeDriver」の不一致といった悪夢からWeb開発者を開放
Windows版「Google Chrome 88」に時刻が正しく表示されない現象 ～タイムゾーンの問題か／Windows環境への「Chrome 88」リリースは全体の25％に制限中
Chrome for Developers
