https://www.debugbear.com/assets/js/04391ce1.4cf75fdd.js

1"use strict";(self.webpackChunkdebugbear_docusauruss=self.webpackChunkdebugbear_docusauruss||[]).push([[3977],{99526:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>n,default:()=>c,frontMatter:()=>i,metadata:()=>a,toc:()=>u});var o=r(74848),s=r(28453);r(49523),r(1203);const i={title:"Our Favorite DevTools Features of 2025",date:new Date("2025-03-05T00:00:00.000Z"),description:"Discover the most powerful new developer tools features in Chrome 134 that will help you build faster websites and debug performance issues more effectively.",image:"https://www.debugbear.com/dimg/c6e214161af0f9ea7d927301c3b2b09b.png",authors:["umarhansa"]},n=void 0,a={permalink:"/blog/favourite-devtools-features-in-2025",source:"@site/blog/favourite-devtools-features-in-2025.md",title:"Our Favorite DevTools Features of 2025",description:"Discover the most powerful new developer tools features in Chrome 134 that will help you build faster websites and debug performance issues more effectively.",date:"2025-03-05T00:00:00.000Z",tags:[],readingTime:9.785,hasTruncateMarker:!0,authors:[{name:"Umar Hansa",title:"Web Performance Advocate at DebugBear",url:"https://x.com/umaar",imageURL:"https://www.debugbear.com/dimg/4c1ee9bf3cee9ad027dc68961a65ea9c.jpg",key:"umarhansa"}],frontMatter:{title:"Our Favorite DevTools Features of 2025",date:"2025-03-05T00:00:00.000Z",description:"Discover the most powerful new developer tools features in Chrome 134 that will help you build faster websites and debug performance issues more effectively.",image:"https://www.debugbear.com/dimg/c6e214161af0f9ea7d927301c3b2b09b.png",authors:["umarhansa"]},unlisted:!1,lastUpdatedAt:1744121688e3,prevItem:{title:"How To Reduce The Impact Of Third-Party Code: A Guide",permalink:"/blog/reduce-the-impact-of-third-party-code"},nextItem:{title:"No Compression Applied: Fix Text Compression On Your Website",permalink:"/blog/enable-text-compression"}},l={authorsImageUrls:[void 0]},u=[];function d(e){const t={p:"p",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Browser developer tools keep getting better every year, making it easier to build fast, responsive websites. Chrome's latest DevTools update brings some useful features that improve how you debug and optimize your web apps."}),"\n",(0,o.jsx)(t.p,{children:"Let's explore the most exciting new Chrome DevTools features that will help you build better websites in 2025."})]})}function c(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1203:(e,t,r)=>{r.d(t,{H:()=>n});var o=r(96540);const s={sliderWrapper:"sliderWrapper_x702",containerSlider:"containerSlider_f21y",imageContainer:"imageContainer_lKgt",sliderImage:"sliderImage_Yyh7",imageBefore:"imageBefore_je1I",grayscale:"grayscale_huuU",imageAfter:"imageAfter_P90S",slider:"slider_vGS0",sliderButton:"sliderButton__AKh",sliderLine:"sliderLine_gX_e"};var i=r(74848);function n(e){const{beforeImage:t,afterImage:r,beforeAlt:n="Before image",afterAlt:a="After image",initialPosition:l=50}=e,u=(0,o.useRef)(),d=(0,o.useRef)();return(0,o.useEffect)((()=>{const e=u.current;if(!e||!d.current)return;e.style.setProperty("--position",`${l}%`),d.current.value=l;const t=t=>{e.style.setProperty("--position",`${t.target.value}%`)};return d.current.addEventListener("input",t),()=>{d.current&&d.current.removeEventListener("input",t)}}),[l]),(0,i.jsx)("div",{className:s.sliderWrapper,children:(0,i.jsxs)("div",{ref:u,className:s.containerSlider,children:[(0,i.jsxs)("div",{className:s.imageContainer,children:[(0,i.jsx)("img",{className:`${s.imageAfter} ${s.sliderImage}`,src:r,alt:a}),(0,i.jsx)("img",{className:`${s.imageBefore} ${s.sliderImage}`,src:t,alt:n})]}),(0,i.jsx)("input",{ref:d,type:"range",min:"0",max:"100",defaultValue:l,"aria-label":"Percentage of before image shown",className:s.slider}),(0,i.jsx)("div",{className:s.sliderLine,"aria-hidden":"true"}),(0,i.jsx)("div",{className:s.sliderButton,"aria-hidden":"true",children:(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"30",height:"30",fill:"currentColor",viewBox:"0 0 256 256",children:[(0,i.jsx)("rect",{width:"256",height:"256",fill:"none"}),(0,i.jsx)("line",{x1:"128",y1:"40",x2:"128",y2:"216",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),(0,i.jsx)("line",{x1:"96",y1:"128",x2:"16",y2:"128",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),(0,i.jsx)("polyline",{points:"48 160 16 128 48 96",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),(0,i.jsx)("line",{x1:"160",y1:"128",x2:"240",y2:"128",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),(0,i.jsx)("polyline",{points:"208 96 240 128 208 160",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})]})})]})})}},49523:(e,t,r)=>{r.d(t,{L:()=>a});var o=r(96540);const s={videoPlayer:"videoPlayer_lp3F"};var i=r(74848);const n="video/mp4";function a(e){const{src:t,type:r,autoplay:a,loop:l,muted:u,controls:d=!0}=e;let[c,p]=(0,o.useState)(e.width||400),[m,f]=(0,o.useState)(e.height||300);const h=(0,o.useRef)(),g=r||n;return(0,o.useEffect)((()=>{h.current&&(h.current.oncanplay=()=>{h.current&&(p(h.current.videoWidth),f(h.current.videoHeight))})}),[h]),(0,i.jsxs)("video",{ref:h,className:s.videoPlayer,width:c,height:m,controls:d,playsInl

1ine:!0,autoPlay:a,muted:u||a,loop:l,children:[(0,i.jsx)("source",{src:t,type:g}),"Your browser does not support the video tag."]})}},28453:(e,t,r)=>{r.d(t,{R:()=>n,x:()=>a});var o=r(96540);const s={},i=o.createContext(s);function n(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:n(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]);