Document Picture-in-Picture API で魅力的なユースケースを実現する | Blog | Chrome for Developers
公開日: 2025 年 3 月 4 日 Document Picture-in-Picture API（Document PiP API）を使用すると、ウェブアプリでフローティングの常に最前面のウィンドウ（ピクチャー イン ピクチャー ウィンドウ）を開き、任意の HTML コンテンツを表示できます。 この API は、<video> 用の Picture-in-Picture API をベースに構築されており、PiP ウィンドウで動画の視聴を継続できます。 Document PiP API は任意の HTML コンテンツを表示できるため、新しいユースケースを実現できます。 ブラウザのサポートと段階的な拡張 記事作成時点では、Document Picture-in-Picture API は限定的に利用できます。 ただし、プログレッシブ エンハンスメントや正常なデグレードで使用することはでき
Chrome for Testing: reliable downloads for browser automation | Blog | Chrome for Developers
Today we’re happy to announce Chrome for Testing, a new Chrome flavor that specifically targets web app testing and automation use cases. This article explains why the Chrome team felt this was needed, and walks through concrete examples where Chrome for Testing might benefit you as a developer. Background Browser testing is a vital component of creating a high-quality web experience, regardless o
Chrome ships WebGPU | Blog | Chrome for Developers
The Chrome team is thrilled to announce that WebGPU is now available by default in Chrome 113, which is currently in the Beta channel. WebGPU is a new web graphics API that offers significant benefits such as greatly reduced JavaScript workload for the same graphics and more than three times improvements in machine learning model inferences. This is possible due to more flexible GPU programming an
What's New In DevTools (Chrome 96) | Blog | Chrome for Developers
Preview feature: New CSS Overview panel Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS. You can further drill down on the information. For example, click on a color in the Colors section to view the list of elements that apply the same color. Click on an element
Record, replay, and measure user flows | Chrome DevTools | Chrome for Developers
Take a glance at the new Recorder panel (preview feature) with the video below. Complete this tutorial to learn how to use the Recorder panel to record, replay, and measure user flows. For more information on how to share the recorded user flows, edit them and their steps, see the Recorder features reference. Open the Recorder panel Open DevTools. Click on More options > More tools > Recorder.
What's New In DevTools (Chrome 95) | Blog | Chrome for Developers
New CSS length authoring tools DevTools added an easier yet flexible way to update lengths in CSS! In the Styles pane, look for any CSS property with length (e.g. height, padding). Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown. Hover over the unit value, and your mouse pointer is changed to horizontal cursor. Drag horizontally
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされています。これは、ヘッドレス環境で Chrome ブラウザを実行する方法です。つまり、Chrome なしで Chrome を実行することになります。Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォームのすべての機能をコマンドラインにもたらします。 なぜこれが有用なのでしょうか。 ヘッドレス ブラウザは、可視 UI シェルが必要ない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、その PDF を作成したり、ブラウザが URL をレンダリングする方法を確認したりできます。 ヘッドレスの開始（CLI） ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くことです。Chrome 59 以降がイ
Getting Started with Headless Chrome | Blog | Chrome for Developers
TL;DR Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Why is that useful? A headless browser is a great tool for automated testing and server environments where you don't need a visi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://developers.google.com/web/tools/setup/workspace/setup-devtools