サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
WWDC24
developer.chrome.com
Secure Payment Confirmation (SPC) is a proposed web standard that allows customers to authenticate with a credit card issuer, bank, or other payment service provider using a platform authenticator: Unlock feature including Touch ID on a macOS device Windows Hello on a Windows device With SPC, merchants can allow customers to quickly and seamlessly authenticate their purchases, while issuing banks
Preview feature: New Performance insights panel Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance. Open the panel and start a new recording based on your use case. For example, let’s measure the page load of this demo page. Once the recording is complete, you get the performance insights on the Insights pane. Click on each insight item
Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance. Why a new panel? The new Performance insights panel is an experiment to address these 3 developer pain points when working with the existing Performance panel: Too much information. With the redesigned UI, the Performance insights panel streamlines the data and displays only relevant in
Collapsing content sections, sometimes described as an accordion, are a common UI pattern. However, content hidden in the collapsed sections becomes impossible to search using a find-in-page search. Also, it isn't possible to link to text fragments inside collapsed regions. The hidden=until-found HTML attribute and beforematch event can solve these problems. By adding hidden=until-found to the con
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
Combine headers with the iframe allow attribute With Feature Policy, you could add the feature to a cross-origin frame by either adding the origin to the header origin list or adding an allow attribute to the iframe tag. With Permissions Policy, if you add a cross-origin frame to the origin list, the iframe tag for that origin must include the allow attribute. If the response does not contain a Pe
Import and export recorded user flows as a JSON file The Recorder panel now supports importing and exporting user flow recordings as a JSON file. This addition makes it easier to share user flows and can be useful for bug reporting. For example, download this JSON file. You can import it with the import button and replay the user flow. Apart from that, you can export the recording as well. After r
Chrome 100 Here’s to the 100th Chrome version! Chrome DevTools will continue to provide reliable tools for developers to build on the web. Take a moment to click around in the What’s New tab to celebrate the milestones. As usual, you can watch the latest What’s New in DevTools video by clicking on the image. View and edit @supports at rules in the Styles pane You can now view and edit the CSS @sup
Around 45% of requests from websites served on mobile and desktop are third-party requests of which 33% are scripts. The size, latency, and loading of third-party scripts can significantly affect a site's performance. The Next.js Script component comes with baked-in best practices and defaults to help developers introduce third-party scripts in their applications while addressing potential perform
Throttling WebSocket requests The Network panel now supports throttling web socket requests. Previously, the network throttling didn't work on web socket requests. Open the Network panel, click on a web socket request and open the Messages tab to observe the message transfers. Select Slow 3G to throttle the speed. Chromium issue: 423246 New Reporting API pane in the Application panel Use the new R
Cascade layers (the @layer CSS rule) are coming to Chromium 99, Firefox 97, and Safari 15.4 Beta. They enable more explicit control of your CSS files to prevent style-specificity conflicts. This is particularly useful for large codebases, design systems, and when managing third party styles in applications. Layering your CSS in a clear way prevents unexpected style overrides and promotes better CS
For a long time, you had to resort to custom widget libraries or hacks to show a date picker. The web platform now ships with the HTMLInputElement showPicker() method, a canonical way to show a browser picker not only for dates, but also time, color, and files. Background A frequent request we hear from web developers is: How do I programmatically show a picker for controls like date? Stack Overfl
Preview feature: Full-page accessibility tree The new Full-page accessibility tree makes it easier for you to get an overview of the full-page accessibility tree and help you better understand how your web content is exposed to assistive technology. In the Elements panel, open the Accessibility pane and select Enable full-page accessibility tree checkbox. Then, reload DevTools and you will see a n
Updates July 7, 2022: Updated current status and added IP address space definition. April 27, 2022: Updated timeline announcement. March 7, 2022: Announced rollback after issues were discovered in Chrome 98. Introduction Chrome is deprecating direct access to private network endpoints from public websites as part of the Private Network Access (PNA) specification. Chrome will start sending a CORS p
Updates May 30, 2023: we've announced that the deprecation of document.domain setter will be effective in Chrome 115. April 7, 2023: We've identified an issue before shipping this change in Chrome 112. document.domain setter to be removed by default is currently suspended and the new shipping milestone is not determined yet. Please check back on this blog post or subscribe to blink-dev and this th
Compact, compression-friendly, color vector fonts with all your favorite gradient flavors. In Chrome 98, the Chrome and Fonts teams have added support for COLRv1, an evolution of the COLRv0 font format intended to make color fonts widespread by adding gradients, compositing and blending, and improved internal shape reuse for crisp and compact font files that compress well. Color now On the web, te
Chrome DevTools is launching a full accessibility tree making it easier for developers to get an overview of the whole tree. In this post find out how this tree is created and how to use it in your work. What is the accessibility tree? Assistive technology such as screen readers use Chromium’s accessibility API to interact with web content. The underlying model of this API is the accessibility tre
Preview feature: New Recorder panel Use the new Recorder panel to record, replay and measure user flows. Open the Recorder panel. Follow the instructions on screen to start a new recording. For example, you can record the coffee checkout process with this coffee ordering demo application. After adding a coffee and filling out payment details, you can end the recording, replay the process or click
DevTools の新機能 (Chrome 96) 公開日 2021年10月25日月曜日 • 更新日 2021年10月25日月曜日 翻訳先言語: English, Español, Português, 한국어, 中文, Pусский # プレビュー機能: 新しい CSS Overview パネル新しい CSS Overview パネルを使用するとあなたのページの CSS を改善できる可能性を確認できます。 CSS Overview パネルを開き、Capture overview をクリックしてページの CSS のレポートを生成してください。 情報をさらに詳細化することも可能です。例えば、Colors セクションの色をクリックして同じ色を適用する要素のリストを表示できます。いずれかの要素をクリックすると Elements パネルでその要素が開きます。 CSS Overview パネルはプ
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.
Images are a common source of performance bottlenecks for web applications and a key focus area for optimization. Unoptimized images contribute to page bloat and currently account for over 70% of the total page weight in bytes at the 90th percentile. Multiple ways to optimize images call for an intelligent "image component" with performance solutions baked in as a default. The Aurora team worked w
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
Developers are constantly wondering about what kind of audience they are developing for. Are they using high end devices with large RAM? What connection are they using (for example Wi-Fi, 2G) and so on. The answers to these questions can affect product development decisions such as choosing the technologies to render the content. This report provides timeline data to inform developers on these que
The Chrome team has been working on options to bring back full prerendering of future pages that a user is likely to navigate to. A brief history of prerender In the past, Chrome supported the <link rel="prerender" href="/next-page"> resource hint, however it was not broadly supported beyond Chrome, and it wasn't a very expressive API. This legacy prerendering using the link rel=prerender hint was
Understand when Manifest V2 will stop working for extensions Latest November 2023: New Chrome MV2 deprecation timeline announcement The Manifest V2 support timeline has been updated. See our November 2023 blog post for details. Upcoming June 2024: Chrome MV2 deprecation pre-stable rollout We will begin disabling Manifest V2 extensions in pre-stable versions of Chrome (Dev, Canary, and Beta) as ear
Earlier this year, for Chrome 88, we announced the availability of a new manifest version for the Chrome extension ecosystem. Years in the making, Manifest V3 is more secure, performant, and privacy-preserving than its predecessor. It is an evolution of the extension platform that takes into consideration both the changing web landscape and the future of browser extensions. As we look to the futur
Here's what you need to know: The default color space for <canvas> elements is now formally defined in the spec as SRGB, and you can change it to Display P3. WebCodecs is a new, low level way to access built in audio and video codecs, important for streaming games, video editors, and such. WebGPU starts its origin trial. The PWA Summit is coming up October 6-7. And there's plenty more. I'm Pete Le
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
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
次のページ
このページを最初にブックマークしてみませんか?
『Chrome for Developers』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く