Chromium policy on JavaScript dialogs | Blog | Chrome for Developers
History of JavaScript dialogs JavaScript was introduced in 1995, and in the very first version of JavaScript were methods on the window object named alert(), confirm(), and prompt(). While they fit into the JavaScript of the time, their synchronous API is problematic for modern browsers. Because the JavaScript engine needs to pause until a user response is obtained, the JavaScript dialogs are app-
Request for developer feedback: customizable select | Blog | Chrome for Developers
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo
WebView のリモート デバッグ | Chrome DevTools | Chrome for Developers
Chrome デベロッパー ツールを使用して、ネイティブ Android アプリの WebView をデバッグできます。 Android 4.4（KitKat）以降では、DevTools を使用してネイティブ Android アプリの WebView コンテンツをデバッグします。 概要 ネイティブ Android アプリで WebView デバッグを有効にし、Chrome DevTools で WebView をデバッグします。 デバッグが有効な WebView のリストには、chrome://inspect でアクセスします。 WebView のデバッグは、リモート デバッグによるウェブページのデバッグと同じです。 デバッグ用の WebView を構成する WebView デバッグは、アプリ内から有効にする必要があります。WebView デバッグを有効にするには、WebView クラスの
Introducing visualViewport | Blog | Chrome for Developers
What if I told you, there's more than one viewport. BRRRRAAAAAAAMMMMMMMMMM And the viewport you're using right now, is actually a viewport within a viewport. BRRRRAAAAAAAMMMMMMMMMM And sometimes, the data the DOM gives you, refers to one of those viewport and not the other. BRRRRAAAAM… wait what? It's true, take a look: Layout viewport vs visual viewport The video above shows a web page being scro
Built-in AI | AI on Chrome | Chrome for Developers
When we build features with AI models on the web, we often rely on server-side solutions for larger models. This is especially true for generative AI, where even the smallest models are about thousand times bigger than the median web page size. It's also true for other AI use cases, where models can range from 10s to 100s of megabytes. Since these models aren't shared across websites, each site ha
ヒープ スナップショットを記録する | Chrome DevTools | Chrome for Developers
概要ビュー 最初に、ヒープ スナップショットが [Summary] ビューで、1 つの列に Constructors とリスト表示されます。コンストラクタを展開して、それがインスタンス化されたオブジェクトを表示できます。 無関係なコンストラクタを除外するには、[Summary] ビューの上部にある [Class filter] に、検査する名前を入力します。 コンストラクタ名の横の数字は、そのコンストラクタで作成されたオブジェクトの総数を示します。[概要] ビューには、次の列も表示されます。 距離は、ノードの最短単純パスを使用したルートまでの距離を示します。 Shallow size: 特定のコンストラクタで作成されたすべてのオブジェクトの浅いサイズの合計を示します。シャローサイズとは、オブジェクト自体が保持するメモリのサイズです。一般的に、配列と文字列は浅いサイズです。オブジェクトのサイ
WebDriver BiDi: 2023 年のステータス更新 | Blog | Chrome for Developers
この記事では、2023 年の WebDriver BiDi の新機能の概要を説明します。 WebDriver BiDi とは WebDriver は W3C 標準として定義されたブラウザ自動化プロトコルで、ChromeDriver、GeckoDriver、WebKitDriver に実装されています。 Chromium には、独自のブラウザ自動化プロトコルである Chrome DevTools Protocol（CDP）もあります。 この 2 つのプロトコルにはいくつかの根本的な違いがあります。WebDriver は相互運用可能な標準ですが、このプロトコルは効率が低く、CDP のような機能がありません。対照的に、CDP はより効率的で強力ですが、相互運用性は劣ります。 そのため、2020 年に W3C Browser Testing and Tools Working Group が We
最上位レイヤ: Z-index:10000 | Blog | Chrome for Developers
最上位のレイヤは、ブラウザのビューポートで関連する document の上になり、各 document には 1 つの最上位レイヤが関連付けられます。つまり、最上位レイヤにプロモートされる要素は、z-index や DOM 階層を考慮する必要がないことを意味します。また、使いやすい ::backdrop 疑似要素も用意されています。dialog のサポートが導入される前は Fullscreen が使用されていた最上位レイヤの好例であるため、Fullscreen API の仕様ではさらに詳しく説明します。 最上位レイヤは、document の他の部分の上にコンテンツをレンダリングする際の問題を解決します。 重要事項: - 最上位レイヤが document フローの外部にある。 - z-index は最上位レイヤでは機能しません。 - 最上位レイヤの各要素には、スタイル設定可能な ::back
CSS vertical writing mode for form control elements | Blog | Chrome for Developers
Rolling out from Chrome 119 to 123 is a new international CSS feature from CSS Writing Modes Level 4. Vertical writing mode for form control elements means that these elements can be displayed in vertical writing modes. By Chrome 123 the feature will be enabled for all users, this post explains the feature. Vertical writing mode for text-based form control elements Once this feature is fully enabl
Android 版 Chrome でのビューポートのサイズ変更動作の変更に備える | Blog | Chrome for Developers
11 月の Chrome 108 のリリースに伴い、画面キーボード（OSK）が表示されたときのレイアウト ビューポートの動作が変更されます。この変更により、Android 版 Chrome ではレイアウト ビューポートのサイズが変更されなくなり、ビジュアル ビューポートのみのサイズを変更できるようになります。これにより、Android 版 Chrome の動作が、iOS 版 Chrome および iOS 版 Safari と同等になります。 ここでは、現在の状況、Chrome でこの変更が行われる理由、実施可能な準備について説明します。 レイアウト ビューポートとビジュアル ビューポート ウェブサイトにアクセスしたときに、読み込んだページのコンテンツ全体が表示されない。その代わり、ブラウザにはページの一部を表示するビューポートが用意されています。このビューポートは、レイアウト ビューポート
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS テキスト モジュール レベル 4 の 4 つの新しい国際的な CSS 機能が Chrome に導入されます。この投稿では、すでにリリース済みの製品と、間もなく提供予定の製品について説明します。 Chrome 119 以降: word-break: auto-phrase での日本語のフレーズ改行。 Chrome 120 のフラグの背後: text-autospace プロパティによるスクリプト間のスペース。 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズを統一します。 日本語のフレーズの改行: word-break: auto-phrase 日本語の読みやすさを向上させるこの機能（Chrome 119 以降） 中国語や日本語など東アジアの一部の言語では、単語を区切るためにスペースを使
Edit and save files in a workspace | Chrome DevTools | Chrome for Developers
This tutorial offers a chance to practice by setting up a workspace so that you can use it in your own projects. Workspace lets you to save changes that you make within DevTools to source code that's stored on your computer. Overview Workspace lets you save a change that you make in DevTools to a local copy of the same file on your computer. For example, suppose: You have the source code for your
Four new CSS features for smooth entry and exit animations | Blog | Chrome for Developers
Motion is a core part of any digital experience, guiding your user from one interaction to the next. But there are a few gaps in smooth animations on the web platform. These include the ability to easily animate entry and exit animations, and smoothly animate to and from the top layer for dismissible elements such as dialogs and popovers. To fill these gaps, Chrome 116 and 117 includes four new we
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
Paint Holding - reducing the flash of white on same-origin navigations | Blog | Chrome for Developers
For a while now, Chrome has eagerly cleared the screen when transitioning to a new page to give users the reassurance that the page is loading. This "flash of white" is this brief moment during which the browser shows a white paint while loading a page. This can be distracting in-between navigations, especially when the page is reasonably fast in reaching a more interesting state. But for pages th
More control over :nth-child() selections with the of S syntax | CSS and UI | Chrome for Developers
The :nth-child() and :nth-last-child() pseudo-class selectors With the :nth-child() pseudo-class selector it is possible to select Elements in the DOM by their index. Using the An+B microsyntax you get fine control over which elements you want to select. :nth-child(2): Select the 2nd child. :nth-child(2n): Select all even children (2nd, 4th, 6th, 8th, and so on). :nth-child(2n+1): Select all odd c
Chrome Headless mode | Chromium | Chrome for Developers
In 2017, Chrome 59 introduced Headless mode, which let you run the browser in an unattended environment, without any visible UI. Essentially, you could run Chrome without chrome. Headless mode is a popular choice for browser automation, through projects like Puppeteer or ChromeDriver. Here's a minimal command-line example using Headless mode to create a PDF file of a given URL: chrome --headless -
Inside look at modern web browser (part 3) | Web | Google Developers
Inner workings of a Renderer Process This is part 3 of 4 part blog series looking at how browsers work. Previously, we covered multi-process architecture and navigation flow. In this post, we are going to look at what happens inside of the renderer process. Renderer process touches many aspects of web performance. Since there is a lot happening inside of the renderer process, this post is only a g
More details on the transition to Manifest V3 | Blog | Chrome for Developers
Last year, we announced a timeline for the phasing out of Manifest V2 extensions as we shift our focus to Manifest V3. This change will give Chrome users increased safety and peace of mind while browsing and installing extensions by providing more transparency and control over permissions, adding stricter protocols for accessing resources outside the extension’s context, and ensuring that extensio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cookie Expires and Max-Age attributes now have upper limit | Blog | Chrome for Developers