![]() ![]() Next, click the Test back/forward cache button and DevTools will attempt to navigate away and back to determine whether the page could be restored from bfcache.Īs web developers, it's critical to know how to optimize your pages for bfcache across all browsers because it will significantly improve the browsing experience for users-especially those with slower networks or devices.Ĭhromium issue: 1110752 # New Properties pane filter To test a particular page, navigate to it in Chrome and then in DevTools go to Application > Back-forward Cache. The new Back/forward cache tab can help you test your pages to ensure they're optimized for bfcache, and identify any issues that may be preventing them from being eligible. Expand the Replay settings and edit the Timeout value.Ĭhromium issue: 1257499 # Ensure your pages are cacheable with the Back/forward cache tabīack/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. Optionally, you can adjust the Timeout in the Replay settings for all the steps. Edit the step by Add timeout and set it to 6000 milliseconds (equal to 6s). Expand the step which we click on the menu item. We can use the new Timeout settings to fix this. The replay of this user flow failed because it exceeds 5 seconds (the default timeout). However, the loading of the menu items is slow (it takes 6 seconds). This is useful especially for pages with slow network requests and lengthy animation.įor example, I recorded a user flow on this demo page to load and click on the menu item. You can now adjust the Timeout settings in the Recorder for all steps or a specific step. Previously, it was hard to trace the actual changes of minified source code because all the code is shown in a single line.Ĭhromium issues: 1238818, 1268754, 1086491 # Set longer timeout for user flow recording The code changes in the Changes tab is pretty-printed automatically. We are looking for your feedback for further enhancements!Ĭhromium issue: 887173 # More precise changes in the Changes tab Our team is still actively working on this preview feature. The view is limited, it only enables you to explore a single node and its ancestors. Previously, the accessibility tree was available in the Accessibility pane. This works for DOM tree ⬌ Accessibility tree view too! This is a great way to understand the mapping between the DOM node and its accessibility tree node. The corresponding DOM node is selected now. Select a node and toggle back to the DOM tree view. You can expand nodes or click to see details in the Accessibility pane. You can click on it to toggle to the Full-page accessibility tree view. Then, reload DevTools and you will see a new accessibility button in the Elements panel. In the Elements panel, open the Accessibility pane and select Enable full-page accessibility tree checkbox. 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. # Preview feature: Full-page accessibility tree ![]()
0 Comments
Leave a Reply. |