There’s been two really interesting videos released recently that use the “Local Overrides” feature of Chrome DevTools in order to play with web performance without even touching the original source code.<\/p>\n
The big idea is that you can literally edit CSS and reload the page and your changes stick. Meaning you can use the other performance testing tools inside DevTools to see if your changes had the effect you wanted them to have. Great for showing a client a change without them having to set up a whole dev environment for you.<\/p>\n","protected":false},"excerpt":{"rendered":"
There’s been two really interesting videos released recently that use the “Local Overrides” feature of Chrome DevTools in order to play with web performance without even touching the original source code. Umar Hansa: Improving the performance of Soylent.com with local overrides and font-display Harry Roberts: Using Chrome\u2019s \u2018Local Overrides\u2019 to Test Performance Hypotheses The big […]<\/p>\n","protected":false},"author":3,"featured_media":267352,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1144,592],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":317687,"url":"https:\/\/css-tricks.com\/whats-new-in-devtools-2020\/","url_meta":{"origin":268205,"position":0},"title":"A Look at What’s New in Chrome DevTools in 2020","date":"July 31, 2020","format":false,"excerpt":"I\u2019m excited to share some of the newer features in Chrome DevTools with you. There\u2019s a brief introduction below, and then we\u2019ll cover many of the new DevTools features. We\u2019ll also look at what\u2019s happening in some other browsers. I keep up with this stuff, as I create Dev Tips,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":250683,"url":"https:\/\/css-tricks.com\/the-art-of-labeling\/","url_meta":{"origin":268205,"position":1},"title":"The Art of Labeling","date":"February 2, 2017","format":false,"excerpt":"There's a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome's DevTools. A few notes: Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to chrome:\/\/flags\/ and turn on in the DevTools\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":284244,"url":"https:\/\/css-tricks.com\/using-devtools-to-improve-the-ux-design-to-development-process\/","url_meta":{"origin":268205,"position":2},"title":"Using DevTools to Improve the UX Design to Development Process","date":"June 7, 2019","format":false,"excerpt":"I\u2019d like to tell you how I see code and design intersect and support one another. Specifically, I want to cover how designers can use code in their everyday work. I suggest this not because it\u2019s a required skill, but because even a baseline understanding of coding can make designs\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/devtools-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288072,"url":"https:\/\/css-tricks.com\/color-inputs-a-deep-dive-into-cross-browser-differences\/","url_meta":{"origin":268205,"position":3},"title":"Color Inputs: A Deep Dive into Cross-Browser Differences","date":"July 12, 2019","format":false,"excerpt":"In this article, we'll be taking a look at the structure inside elements, browser inconsistencies, why they look a certain way in a certain browser, and how to dig into it. Having a good understanding of this input allows us to evaluate whether a certain cross-browser look can be achieved\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/color-input.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":157777,"url":"https:\/\/css-tricks.com\/chrome-devtools-mobile\/","url_meta":{"origin":268205,"position":4},"title":"Chrome DevTools for Mobile","date":"December 4, 2013","format":false,"excerpt":"Emulate mobile devices directly through DevTools, simulating touch events, mimicking screen size, and spoofing user agent. Plug in a mobile device over USB and use Chrome DevTools on the actual mobile browser. Push your local site to the mobile device with port forwarding. This is excellent stuff, not only because\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":319980,"url":"https:\/\/css-tricks.com\/whats-new-in-devtools-chrome-86\/","url_meta":{"origin":268205,"position":5},"title":"What’s New In DevTools (Chrome 86)","date":"August 26, 2020","format":false,"excerpt":"It wasn't that long ago that Umar Hansa published a look at the most interesting new features in Chrome DevTools released in 2020. In fact, it was just earlier this month! But in that short amount of time, Chrome has a few new tricks up its sleeve. One of the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268205"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=268205"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268205\/revisions"}],"predecessor-version":[{"id":268213,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268205\/revisions\/268213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/267352"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=268205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=268205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=268205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}