DevTools: Rendering feature reference

redirects.yaml

@@ -144,6 +144,9 @@ redirects:
 
 # DevTools redirects
 
+- from: /docs/devtools/css/print-preview
+  to: /docs/devtools/rendering
+
 - from: /docs/devtools/network-performance/reference
   to: /docs/devtools/network/reference/
 

site/_data/docs/devtools/toc.yml

@@ -76,7 +76,12 @@
 - url: /docs/devtools/memory-inspector/
 - url: /docs/devtools/device-mode/override-user-agent/
 - url: /docs/devtools/recorder/
-- url: /docs/devtools/css/print-preview/
+- title: i18n.docs.devtools.rendering
+  sections:
+    - url: /docs/devtools/rendering/
+    - url: /docs/devtools/rendering/performance
+    - url: /docs/devtools/rendering/emulate-css
+    - url: /docs/devtools/rendering/apply-effects
 - url: /docs/devtools/security/
 - title: i18n.docs.devtools.sensors
   sections:

site/_data/i18n/docs/devtools.yml

@@ -41,3 +41,5 @@ lighthouse:
   en: 'Lighthouse'
 sensors:
   en: 'Sensors'
+rendering:
+  en: 'Rendering'

site/en/docs/devtools/evaluate-performance/reference/index.md

@@ -606,72 +606,32 @@ To view advanced information about a paint event:
 
 Use the **Rendering** tab's features to help visualize your page's rendering performance.
 
-To open the **Rendering** tab:
-
-1.  Open the [Command Menu][28].
-2.  Start typing `Rendering` and select `Show Rendering`. DevTools displays the **Rendering** tab at
-    the bottom of your DevTools window.
-
-{% Img src="image/admin/hBtfLDNsBbr9vJhy4GHr.png", alt="The Rendering tab", width="800", height="687" %}
-
-**Figure 35**. The **Rendering** tab
+[Open the **Rendering** tab](/docs/devtools/rendering#open-rendering).
 
 ### View frames per second in realtime with the FPS meter {: #fps-meter }
 
-The **FPS meter** is an overlay that appears in the top-right corner of your viewport. It provides a
-realtime estimate of FPS as the page runs. To open the **FPS meter**:
-
-1.  Open the **Rendering** tab. See [Analyze rendering performance with the Rendering tab][29].
-2.  Enable the **FPS Meter** checkbox.
-
-{% Img src="image/admin/ztC0PRZRr0tczy4jqrxq.png", alt="The FPS meter", width="800", height="593" %}
-
-**Figure 36**. The FPS meter
-
-### View painting events in realtime with Paint Flashing {: #paint-flashing }
-
-Use Paint Flashing to get a realtime view of all paint events on the page. Whenever a part of the
-page gets re-painted, DevTools outlines that section in green.
+The **Frame rendering stats** is an overlay that appears in the top-right corner of your viewport. It provides a realtime estimate of FPS as the page runs.
 
-To enable Paint Flashing:
+See [Frame rendering stats](/docs/devtools/rendering#frame-rendering-stats).
 
-1.  Open the **Rendering** tab. See [Analyze rendering performance with the Rendering tab][30].
-2.  Enable the **Paint Flashing** checkbox.
+### View painting events in realtime with Paint Flashing {: #paint-flash }
 
-{% Img src="image/admin/AKUsdeRRaSFncCF94ap5.gif", alt="Paint Flashing", width="800", height="322" %}
+Use **Paint Flashing** to get a realtime view of all paint events on the page. 
 
-**Figure 37**. **Paint Flashing**
+See [Paint flashing](/docs/devtools/rendering#paint-flashing).
 
-### View an overlay of layers with Layer Borders {: #layer-borders }
+### View an overlay of layers with Layer Borders {: #layer-border }
 
 Use **Layer Borders** to view an overlay of layer borders and tiles on top of the page.
 
-To enable Layer Borders:
+See [Layer borders](/docs/devtools/rendering#layer-borders).
 
-1.  Open the **Rendering** tab. See [Analyze rendering performance with the Rendering tab][31].
-2.  Enable the **Layer Borders** checkbox.
+### Find scroll performance issues in realtime {: scrolling-performance-issues }
 
-{% Img src="image/admin/FAgzk3UUc2WZC5i28X9f.png", alt="Layer Borders", width="800", height="515" %}
-
-**Figure 38**. **Layer Borders**
-
-See the comments in [`debug_colors.cc`][32] for an explanation of the color-codings.
-
-### Find scroll performance issues in realtime {: #scrolling-performance-issues }
-
-Use Scrolling Performance Issues to identify elements of the page that have event listeners related
-to scrolling that may harm the performance of the page. DevTools outlines the
+Use **Scrolling Performance Issues** to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page. DevTools outlines the
 potentially-problematic elements in teal.
 
-To view scroll performance issues:
-
-1.  Open the **Rendering** tab. See [Analyze rendering performance with the Rendering tab][33].
-2.  Enable the **Scrolling Performance Issues** checkbox.
-
-{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/NH12bctPHXR9VD9GO7ov.png", alt="Scrolling Performance Issues is indicating that there's a mousewheel event listener encompassing the entire viewport that may harm scroll performance", width="800", height="498" %}
-
-**Figure 39**. **Scrolling Performance Issues** is indicating that there's a `mousewheel` event
-listener encompassing the entire viewport that may harm scroll performance
+See [Scrolling performace issues](/docs/devtools/rendering#scrolling-performance-issues).
 
 [1]: /docs/devtools/evaluate-performance
 [2]: #view-screenshot
@@ -704,5 +664,4 @@ listener encompassing the entire viewport that may harm scroll performance
 [29]: #rendering
 [30]: #rendering
 [31]: #rendering
-[32]: https://cs.chromium.org/chromium/src/cc/debug/debug_colors.cc
 [33]: #rendering

site/en/docs/devtools/rendering/apply-effects/index.md

@@ -0,0 +1,142 @@
+---
+layout: "layouts/doc-post.njk"
+title: "Apply other effects: enable automatic dark theme, emulate focus, and more"
+authors:
+  - sofiayem
+date: 2022-04-13
+description:
+  "Highlight ad frames, emulate focus on a page, disable local fonts and image formats, enable an automatic dark theme, and emulate vision deficiencies."
+tags:
+  - emulate
+  - test
+  - accessibility
+---
+
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+
+Discover useful effects to apply to your page with this reference of the **Rendering** tab options.
+
+## Highlight ad frames
+
+To check if frames are tagged as ads:
+
+1. [Open the **Rendering** tab](/docs/devtools/rendering#open-rendering) on this [demo](https://heavy-ads.glitch.me/) and check **Highlight ad frames**.
+1. Observe the ad frame highlighted in red.
+
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/UuQMD7ifcGe1n6nFdYth.png", alt="Ad highlighted in red", width="800", height="490" %}
+
+## Emulate a focused page
+
+If you switch focus from the current page to DevTools, some overlay elements automatically hide if they are triggered by focus. For example, dropdown lists, menus, or date pickers.
+
+1. Open a page with the element to debug, for example, the [YouTube website](https://www.youtube.com/watch?v=zFVWeOKZBHs) with its search bar.
+1. On the page, [open the **Rendering** tab](/docs/devtools/rendering#open-rendering), then check and uncheck **Emulate a focused page**.
+
+<div class="elevation--2">
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/nIXptxL1r7NezWQraJJ7.gif", alt="Emulate a focused page", width="800", height="454" %}
+</div>
+
+## Disable local fonts
+
+Check if the local font alternatives work as expected by disabling `local()` sources in `@font-face` rules.
+
+Often, developers and designers use two different copies of the same font during development:
+
+- A local font for your design tools, and
+- A web font for your code
+
+Disabling local fonts makes it easier for you to:
+
+- Debug and measure web fonts loading performance and optimization
+- Verify correctness of your CSS `@font-face` rules
+- Discover any differences between web fonts and their local versions
+
+<style>
+    @font-face {
+      font-family: "Courier New";
+      src: local("Courier New"), url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
+    }
+    .text-box {
+      font-family: 'Courier New';
+    }
+</style>
+<div class="text-box">Chrome renders this sentence in Courier New if it finds this font on your device.</div>
+
+Emulate missing `local()` sources in `@font-face` rules:
+
+1. [Inspect](/docs/devtools/open/#elements) the sentence above, open **Elements** > **Computed**, scroll all the way down, and, under **Rendered Fonts**, discover that Chrome found **Courier New** in local files.
+
+   {% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/p4YVF0NsuNpOHXMMXZ4V.png", alt="Rendered fonts: local", width="800", height="610" %}
+
+1. [Open the **Rendering** tab](/docs/devtools/rendering#open-rendering), check **Disable local fonts**, and <span class="material-icons">refresh</span> reload the page.
+1. Observe the sentence in Roboto found on the web.
+
+   {% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/dILf4tJKLflQdKk80dQq.png", alt="Rendered fonts: network resource", width="800", height="589" %}
+
+## Enable automatic dark mode
+
+See what your site can look like in dark mode even if you didn't implement it.
+
+Chrome 96 introduced an [Origin Trial](/blog/origin-trials/) for [Auto Dark Theme](/blog/auto-dark-theme/) on Android. With this feature, the browser applies an automatically generated dark theme to light themed sites if the user opted into dark themes in the operating system.
+
+To enable automatic dark mode:
+
+1. On this page, [open the **Rendering** tab](/docs/devtools/rendering#open-rendering) and check **Enable automatic dark mode**.
+1. Observe this page in dark mode.
+
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/DWex5Vmp51B0e1MFKDjZ.png", alt="Automatic dark mode enabled", width="800", height="398" %}
+
+{% Aside 'gotchas' %}
+When the [Auto Dark Theme](/blog/auto-dark-theme/) is enabled, the **Emulate CSS media feature `prefers-color-scheme`** dropdown is disabled and set to `prefers-color-scheme: dark` automatically.
+{% endAside %}
+
+## Emulate vision deficiencies
+
+Everyone should be able to access and enjoy the web. [Google is committed to making that a reality](https://www.google.com/accessibility/).
+
+With Chrome DevTools, you can see how people with vision deficiencies see your site, so you can make it better for them. For more information, see [Simulating color vision deficiencies](/blog/cvd/).
+
+To emulate vision deficiencies:
+
+1. [Open the **Rendering** tab](/docs/devtools/rendering#open-rendering).
+1. Under the **Emulate vision deficiencies**, select one of the following from the dropdown list:
+
+   - **No emulation**.
+   - **Blurred vision**.
+   - **Protanopia**. No perception of red and green colors.
+   - **Deuteranopia**. Confusion of red, green, and yellow.
+   - **Tritanopia**. No distinction of blue and yellow.
+   - **Achromatopsia**. Partial or total absence of color vision.
+
+  For example:
+
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/aj8UMMDpofn8s7UPzHTy.png", alt="Emulated blurred vision", width="800", height="481" %}
+
+## Disable AVIF and WebP image formats
+
+These emulations make it easier for developers to test different image loading scenarios without having to switch browsers.
+
+Suppose you have the following HTML code to serve an image in [AVIF](https://web.dev/compress-images-avif/) and [WebP](https://web.dev/serve-images-webp/) formats for newer browsers, with a fallback PNG image for older browsers.
+
+```html
+<picture>
+  <source srcset="test.avif" type="image/avif">
+  <source srcset="test.webp" type="image/webp">
+  <img src="test.png" alt="A test image">
+</picture>
+```
+
+To disable all AVIF images on a page (or, similarly, WebP images):
+
+1. [Open the **Rendering** tab](/docs/devtools/rendering#open-rendering), check **Disable AVIF image format**.
+1. <span class="material-icons">refresh</span> Reload the page and hover over the
+`img src`. The current image src (`currentSrc`) is now the fallback WebP image.
+
+{% Img src="image/admin/WHyF0XexaaWPCp07vJRj.png", alt="Emulate image types", width="800", height="480" %}
+
+Similarly, you can disable WebP images. 
+
+{% Aside 'gotchas' %}
+These options disable image caching automatically. 
+{% endAside %}