https://www.debugbear.com/cdn/chunk-inp-debugger.b79b3809f572811a0aa3.js

1"use strict";(("undefined"==typeof window?self:window).webpackChunkdebugbear_gae=("undefined"==typeof window?self:window).webpackChunkdebugbear_gae||[]).push([[5498],{60895(e,t,n){n.r(t),n.d(t,{InpDebugger:()=>ce}),n(62953);var r=n(44952),i=n(95503),a=n(96540),s=n(76213),o=n(85072),l=n.n(o),c=n(97825),d=n.n(c),u=n(77659),m=n.n(u),h=n(55056),g=n.n(h),p=n(10540),f=n.n(p),b=n(41113),x=n.n(b),y=n(41718),w={};w.styleTagTransform=x(),w.setAttributes=g(),w.insert=m().bind(null,"head"),w.domAPI=d(),w.insertStyleElement=f(),l()(y.A,w),y.A&&y.A.locals&&y.A.locals;var v=n(23077),j=n(52369),N=(n(2543),n(74848));function C(e){let t=e.onSubmit,n=e.loadingState,r=e.device,i=e.onDeviceSelected,a=e.errorMessage;return(0,N.jsx)("div",{children:(0,N.jsx)(v.zN,{title:"Improve Interaction to Next Paint",subtitle:"Test INP on your website and identify UI elements that cause slow interactions",onSubmit:t,errorMessage:a,contentAboveFrom:(0,N.jsx)("div",{style:{height:20}}),contentAboveTitle:(0,N.jsx)("img",{src:"/public/inpDebugger/icon.svg",style:{height:64},className:"mb-2",alt:"Icon showing a page interaction"}),extraUI:(0,N.jsx)(v.wf,{onDeviceSelected:i,device:r,showTestLocation:!1}),backgroundClass:"landing-page-top-section-plain-blue",isLoading:"loading"===n,submitButtonTitle:"loading"===n?"Testing…":"Start Test",bottomContent:(0,N.jsx)(v.x0,{})})})}const I=[{title:"Fix Interaction To Next Paint",image:"https://www.debugbear.com/dimg/da4a902ef262276bf3b55317a727645c.png",imageAlt:"Test result of the INP debugger showing interaction delays.",ctaTitle:"Learn More About INP",ctaHref:"/docs/metrics/interaction-to-next-paint",items:[{title:"Debug Interaction To Next Paint problems",detail:"[INP](/docs/metrics/interaction-to-next-paint) measures how quickly your website responds to user input. For example, when a visitor clicks a button INP tells you how soon after the interaction the page updated visually."},{title:"What does the INP Debugger do?",detail:"Most lab tools like PageSpeed Insights don't simulate interactions with the page. Our INP checker automatically interacts with page elements and reports the interaction delay in milliseconds."},{title:"Test Interaction to Next Paint",detail:"See what interaction delays real Chrome users experience on your website."}]},{title:"INP became a Core Web Vitals metric in March 2024",image:"https://www.debugbear.com/dimg/36906a8eff967a1d7317327b79d3d1fe.png",imageAlt:"INP CrUX data",items:[{title:"What are Core Web Vitals?",detail:"The [Core Web Vitals](/docs/metrics/core-web-vitals) are a set of three user experience metrics that Google uses as a ranking signal."},{title:"INP has replaced First Input Delay",detail:"Google replaced the old First Input Delay (FID) metric with Interaction to Next Paint in March 2024."},{title:"Measure Interaction to Next Paint",detail:"Our INP tester reports both real user data from Google and INP data from our custom lab test."}]},{title:"Track and optimize INP",image:"https://www.debugbear.com/dimg/6a730e71af1e3f3cee0db75657af6e05.png",imageAlt:"Chart showing INP over time",ctaTitle:"Start Monitoring My Website",ctaHref:"/signup",items:[{title:"Measure INP across your whole website",detail:"DebugBear [real user monitoring (RUM)](/real-user-monitoring) can report INP issues across your whole website and helps you identify what pages to optimize first."},{title:"Prioritize the most important interactions",detail:"DebugBear RUM tells you what page elements were most commonly interacted with and how long each interaction took."},{title:"Keep track of Google's CrUX data",detail:"DebugBear not only provides its own monitoring but also keeps track of Google data that impacts rankings."}]},{title:"INP script attribution",image:"https://www.debugbear.com/dimg/121fec02259d14d913126be4c2635572.png",imageAlt:"INP script breakdown",ctaTitle:"Learn more",ctaHref:"/real-user-monitoring",items:[{title:"See what scripts delay interactions",detail:"Find out what scripts most often cause delays and inspect specific page views to see exactly what code ran during an interaction."},{title:"Analyze why code is running",detail:"Check if delays come from script initialization, background tasks, global handlers, or element-specific logic."}

1,{title:"Get context for slow interactions",detail:"See network requests, user timing metrics, and user input that's related to slow updates on the page."}]}],k={title:"Read More About Interaction to Next Paint",list:[{title:"5 Myths About Interaction to Next Paint",href:"https://www.debugbear.com/blog/inp-misconceptions",topic:"Performance Metrics",image:"https://www.debugbear.com/dimg/d9bc50f9987f5470c96820899b95a098.png"},{title:"Improve INP With Chrome DevTools",href:"https://www.debugbear.com/blog/inp-chrome-devtools",topic:"Optimization",image:"https://www.debugbear.com/dimg/f16610a771d8f8744dfc292139cd8ece.png"},{title:"Core Web Vitals Monitoring",href:"https://www.debugbear.com/core-web-vitals-monitoring",topic:"Monitoring",image:"https://www.debugbear.com/dimg/553c73306b7abe32c352638ad48f69ff.png"},{title:"Real User Monitoring Tools",href:"https://www.debugbear.com/software/best-real-user-monitoring-tools",topic:"Monitoring",image:"https://www.debugbear.com/dimg/3a3a37380913876e8253f9a81cc5b540.png"}]};function T(){return(0,N.jsxs)("div",{children:[(0,N.jsx)(v.nZ,{info:I}),(0,N.jsx)(v.hj,{recommendedArticles:k}),(0,N.jsx)(j.w,{title:"Monitor Interaction to Next Paint Over Time",subtitle:"Track INP scores and identify interaction delays with real user data"})]})}n(25440);var P=n(56141),S=n(74494),D=n(91998),A=n(5369),M=n(13413),O=n(94430),L=n(96725),U=n(61459),F=n(32304),W=n(11178),R=n(7819),z=n(41802),B=n(68498),E=n(2747),G=n(71738),H=n(62091),_=n(6869),V=n(19664),Y=n(94317),K=n(25519),Z=n(90955),q=n(44954),X=n(85576);function $(e){let t=e.formFactor,n=e.type;return(0,N.jsxs)("div",{className:"d-flex align-items-center font-weight-500 color-coldGrey1 mt-2",children:[/pointer|click|mouse/.test(null!=n?n:"")&&"mobile"===t?(0,N.jsx)(K.B,{}):null,/pointer|click|mouse/.test(null!=n?n:"")&&"desktop"===t?(0,N.jsx)(V.S,{}):null,"keypress"===n&&(0,N.jsx)(Y.F,{}),(0,N.jsx)("div",{className:"ml-2",children:(0,z.sK)(null!=n?n:void 0)})]})}function J(e){var t,n;let r=e.item,i=e.formFactor;const a=(0,q.W2)(null!==(t=null===(n=r.loafs)||void 0===n?void 0:n.map(e=>{var t;return{sT:e.startTime,d:e.duration,sc:e.scripts.length,ui:e.firstUIEventTimestamp,rs:e.renderStart,sls:e.styleAndLayoutStart,scr:null===(t=e.scripts)||void 0===t?void 0:t.map(t=>({sT:t.startTime,eS:t.executionStart,d:t.duration,ui:e.firstUIEventTimestamp,rs:e.renderStart,p:t.pauseDuration,sl:t.forcedStyleAndLayoutDuration,n:t.invoker,l:[t.sourceFunctionName||"anonymous",t.sourceURL,t.sourceCharPosition],t:t.invokerType}))}}))&&void 0!==t?t:[],{from:r.startTime||0,to:(r.startTime||0)+(r.duration||0),inpBreakdown:[r.inputDelay||0,r.processingTime||0,r.presentationDelay||0]}),s=[r.inputDelay||0,r.processingTime||0,r.presentationDelay||0];return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsxs)("div",{className:"d-flex gap-xxs flex-wrap",style:{borderBottom:"1px solid lightgrey"},children:[(0,N.jsxs)("div",{className:"d-flex align-items-center flex-column col-lg-6 col-12 my-3",children:[(0,N.jsx)($,{formFactor:i,type:r.eventName}),(0,N.jsx)(Z.g,{metricId:"inp",formFactor:i,value:r.duration}),(0,N.jsx)(G.l,{className:"w-100",breakdown:(0,X.A)(s)>0?s:void 0})]}),(0,N.jsxs)("div",{className:"d-flex align-items-center flex-column col-lg-6 col-12 my-3",children:[(0,N.jsx)("h4",{className:"mb-2 h4",style:{fontSize:20,fontWeight:"normal"},children:"INP Scripts"}),a.scriptsInRange.length?(0,N.jsx)(H.Y,{loafInfo:a,totalDuration:r.duration}):(0,N.jsx)("div",{className:"d-flex flex-grow-1 justify-content-center align-items-center",children:"No long animation frames detected."})]})]},r.eventName),(0,N.jsx)(_.w,{children:(0,N.jsx)("pre",{children:JSON.stringify({item:r},null,2)})})]})}function Q(e){let t=e.results,n=e.formFactor;const r=(0,a.useCallback)(e=>{let t=e.item;return(0,N.jsx)(J,{item:t,formFactor:n})},[n]);return(0,N.jsx)(E.mY,{columns:{screenshot:{heading:{title:"Screenshot"},render(e){var t,n;return null!==(t=e.screenshot)&&void 0!==t&&t.position&&null!==(n=e.screenshot)&&void 0!==n&&n.screenshot?(0,N.jsx)(B.Ix,{imageSrc:e.screenshot.screenshot,rects:[e.screenshot.position],"data-testid":"inp-debugger-screenshot"}):"n/a"}},element:{heading:{title:"Element",infoText:"The page element that the INP debugger interacted with."},render:e=>{var t,n;return(0,N.jsxs)("div",{className:"inp-results__element",children:[(0,N.jsx)("strong",{children:null!==(t=e.intendedElementText)&&void 0!==t?t:"n/a"}),(0,N.jsx)("p",{className:"mb-0","data-testid":"inp-debugger-selector",children:null!==(n=e.intendedElementSelector)&&void 0!==n?n:"n/a"})]})}},eventName:{heading:{title:"Interaction"},render:e=>(0,N.jsx)("span",{"data-testid":"inp-debugger-interaction-type",children:e.intendedInteractionName?(0,z.sK)(e.intendedInteractionName):"n/a"})},duration:{heading:{title:"Duration",style:{width:120}

1,alignRight:!0,infoText:"The amount of time that elapsed between the interaction and when the interaction was handled and the UI updated."},render:e=>{if("number"!=typeof e.duration)return"-";const t=(0,R.vh)("inp",e.duration);return(0,N.jsx)("span",{style:{color:A.Y[t],fontWeight:500},className:"scale-5","data-testid":"inp-debugger-duration",children:(0,z.MH)(e.duration)})}}},noDetailsPadding:!0,ItemDetailsRenderer:r,items:t,testName:"inp-debugger-results"})}function ee(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,a,s,o=[],l=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(o.push(r.value),o.length!==t);l=!0);}catch(e){c=!0,i=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw i}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return te(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?te(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function te(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}const ne=[{title:"Free Tools",href:"/tools"},{title:"INP Debugger",href:"/inp-debugger"}],re=[{title:"Starting Test",description:"The INP debugger simulates user input on content elements on the page."},{title:"Opening Page",description:"Opening your website in Chrome."},{title:"Clicking Buttons And Links",description:"The INP Debugger identifies buttons and links on your website and tries to interact with them."},{title:"Typing Into Text Fields",description:"Text inputs and other form fields can also be responsible for interaction delays."},{title:"Interacting With More Elements",description:"We're interacting with all elements we can find and generating a report. This may take a minute or so."},{title:"Finishing",description:""}];function ie(e){var t,n,i;let s=e.testId;const o=ee((0,a.useState)(null),2),l=o[0],c=o[1],d=ee((0,a.useState)(0),2),u=d[0],m=d[1],h=ee((0,a.useState)(!0),2),g=h[0],p=h[1];(0,a.useEffect)(()=>{r.FH.getInpDebuggerResult(s).then(e=>{p(!1),c(e),"notFound"===e.status&&u<22.5&&setTimeout(()=>{m(u+1)},8e3)})},[s,u]);let f=null==l||null===(t=l.data)||void 0===t?void 0:t.crux;const b=null==f?void 0:f.p75,x=null==f?void 0:f.fullCruxData,y=(0,R.vh)("inp",b),w=Math.max(0,...null!==(n=null==l||null===(i=l.data)||void 0===i||null===(i=i.interactions)||void 0===i?void 0:i.map(e=>e.duration))&&void 0!==n?n:[]),v=w?(0,R.vh)("inp",w):"unknown",j=function(e,t){const n=t.split("-")[1],r=n?1e3*parseInt(n,36):void 0;if("notFound"===(null==e?void 0:e.status)&&!n)return"Test result not found";if(r&&(isNaN(new Date(r).getTime())||new Date(r).getFullYear()>2050))return"Invalid test ID";const i=r&&Date.now()-r>24e4;return"notFound"===(null==e?void 0:e.status)&&i?"Test failed or result was not found":void 0}(l,s);return j?(0,N.jsx)(W.K7,{header:(0,N.jsx)(O.V,{breadcrumbs:ne}),isBackgroundOptOut:!0,contentContainerClassName:"inp-debugger app-column-layout",padded:!1,grayBackground:!0,children:(0,N.jsx)(W.U5,{noMargin:!0,children:j})}):l&&["ok","error"].includes(l.status)?(0,N.jsxs)(W.K7,{header:(0,N.jsx)(O.V,{breadcrumbs:ne}),isBackgroundOptOut:!0,contentContainerClassName:"inp-debugger app-column-layout",padded:!1,grayBackground:!0,children:[(0,N.jsxs)("div",{className:"row",children:[(0,N.jsx)("div",{className:"col-md-6",children:(0,N.jsx)(W.U5,{noMargin:!0,children:(0,N.jsxs)("div",{className:"d-flex",children:[l.data.pageScreenshot&&(0,N.jsx)("div",{className:"mr-3",children:(0,N.jsx)("img",{alt:"Page screenshot",src:l.data.pageScreenshot,style:{maxHeight:120},className:"screenshot-style"})}),(0,N.jsxs)("div",{children:[(0,N.jsx)("h2",{className:"",children:"INP Test Result"}),(0,N.jsx)("div",{className:"d-block color-coldGrey1 scale-small-1",children:"Test URL"}),(0,N.jsxs)("div",{className:"d-flex align-items-center",children:[(0,N.jsx)("div",{children:null===(C=l.data.url)||void 0===C?void 0:C.replace(/https?:\/\//,"")}),(0,N.jsx)("div",{className:"ml-2",children:(0,N.jsx)("a",{href:l.data.url,target:"_blank",rel:"noreferrer nofollow",className:"color-coldGrey1","aria-label":"Open page URL",children:(0,N.jsx)(L.V,{size:12})})})]}),(0,N.jsx)("div",{className:"d-block color-coldGrey1 scale-small-1 mt-2",children:"Test Date"}),(0,N.jsxs)("div",{className:"d-flex",children:[(0,N.jsx)("div",{children:(0,z.r6)(l.data.date)}),(0,N.jsx)("div",{className:"ml-2",children:(0,N.jsx)("a",{href:"/inp-debugger?url="+encodeURIComponent(l.data.url)+"&device="+l.data.formFactor,"aria-label":"Repeat test",className:"color-coldGrey1",children:(0,N.jsx)(U.D,{size:12})})})]})]})]})})}),(0,N.jsx)("div",{className:"col-md-3",children:(0,N.jsx)(W.U5,{noMargin:!0,className:"h-100",children:(0,N.jsxs)("div",{className:"d-flex flex-column h-100",children:[(0,N.jsxs)("div",{className:"d-flex align-items-center justify-content-center",style:{lineHeight:"1em"},children:[(0,N.jsx)("h2",{className:"mb-0",children:"Real User Google Data"}),(0,N.jsx)("div",{className:"ml-1",children:(0,N.jsx)(F.c,{content:"Data from Google's Chrome User Experience Report (CrUX)",href:"/blog/chrome-user-experience-report"})})]}),(0,N.jsxs)("div",{className:"flex-grow-1 d-flex flex-column justify-content-center align-items-center",children:[(0,N.jsx)("p",{className:"scale-3 mb-0 mt-3",style:{color:"unknown"===y?"#aaa":A.Y[y],lineHeight:"1",fontWeight:500},children:(0,z.Fl)(b,"ms",{noValueFallback:"–"})}),(0,N.jsx)("p",{className:"scale-small-1 color-coldGrey1",children:"number"==typeof b&&f?"url"===f.granularity?"Data for this specific URL":"Data for the entire website":"Data not available"}),x&&(0,N.jsx)("div",{style:{width:"100%"},children:(0,N.jsx)(M.r_,{cruxMetric:x,metricUnit:"ms",title:"Interaction to Next Paint"})})]})]})})}),(0,N.jsx)("div",{className:"col-md-3",children:(0,N.jsx)(W.U5,{noMargin:!0,className:"h-100",children:(0,N.jsxs)("div",{className:"d-flex flex-column h-100",children:[(0,N.jsxs)("div",{className:"d-flex align-items-center justify-content-center",style:{lineHeight:"1em"},children:[(0,N.jsx)("h2",{className:"mb-0",children:"INP Debugger Result"}),(0,N.jsx)("div",{className:"ml-1",children:(0,N.jsx)(F.c,{content:(0,N.jsxs)("div",{children:["The INP debugger may be different from real user data:",(0,N.jsxs)("ul",{className:"mb-0 pl-4 mt-1",children:[(0,N.jsx)("li",{children:"Users having faster or slower CPUs"}),(0,N.jsx)("li",{children:"Users may interact with different page elements"})]})]})})})]}),(0,N.jsxs)("div",{className:"flex-grow-1 d-flex flex-column justify-content-center align-items-center",children:[(0,N.jsx)("p",{className:"scale-3 mb-0 mt-3",style:{color:"unknown"===v?"#aaa":A.Y[v],lineHeight:"1",fontWeight:500},children:(0,z.Fl)(w,"ms",{noValueFallback:"–"})}),(0,N.jsx)("p",{className:"scale-small-1 color-coldGrey1",children:"Lab test result for this URL"})]})]})})})]}),!!b&&y&&"pass"!==y&&(0,N.jsx)("div",{children:(0,N.jsx)(D.k,{type:"warning",linkText:"➔ Monitor Real User INP On My Website",linkType:"largeNonReactLink",href:"/real-user-monitoring?utm_campaign=inp-debugger-crux",children:(0,N.jsxs)("div",{children:["Fixing INP on this"," ","url"===f.granularity?"page":"website"," can help you pass Google's Core Web Vitals and rank higher in search results."]})})}),(0,N.jsxs)("h2",{className:"color-grey2 mt-3",children:["Tested Interactions"," ",(0,N.jsx)(F.c,{content:"The INP Debugger automatically identifies page elements and tries to interact with them.\nThe elements reported here may not be the elements that your visitors interact with most frequently, and the INP Debugger can't detect more complex interactions.\nSign up for a free trial of DebugBear to get more in-depth data and see what interactions are slow most frequently."})]}),"error"===l.status&&(0,N.jsx)(W.U5,{children:(0,N.jsxs)("div",{className:"row",children:[(0,N.jsxs)("div",{className:"col-md-6",children:[(0,N.jsx)("h1",{className:"mb-2",children:"Something went wrong"}),(0,N.jsx)("p",{children:l.data.message}),(0,N.jsx)("h2",{children:"Try collecting real user INP data instead"}),(0,N.jsx)("p",{style:{maxWidth:500},children:"The INP Debugger tries to detect slow interactions automatically, but that's not always reliable."}),(0,N.jsxs)("p",{children:["DebugBear"," ",(0,N.jsx)("a",{href:"/real-user-monitoring?utm_campaign=inp-debugger-error",target:"_blank",rel:"noreferrer",children:"Real User Monitoring (RUM)"})," ","can tell you exactly what page elements users are interacting with and what scripts are slowing them down."]}),(0,N.jsx)("a",{href:"/real-user-monitoring?utm_campaign=inp-debugger-error",className:"btn btn-primary",children:"➔ Learn more about RUM"})]}),(0,N.jsx)("div",{className:"col-md-6",children:(0,N.jsx)("img",{alt:"Real User Monitoring",style:{maxWidth:"100%",maxHeight:400,display:"block",marginLeft:"auto"},src:"https://www.debugbear.com/dimg/534d968106555c6d46879e1820dfc0da.png"})})]})}),(0,N.jsx)(se,{testResult:l}),(0,N.jsx)(W.U5,{padded:!1,children:(0,N.jsx)(P.RO,{badge:"Interaction to Next Paint (INP)",title:"Monitor and Optimize Real User INP",description:"Collect detailed real user analytics on your website.",features:["Track INP and other Core Web Vitals over time","See what page elements cause interaction delay","Find what pages to optimize for the most impact","Identify specific scripts slowing down interactions"],image:"https://www.debugbear.com/dimg/22266b5620ece02debb462fd5de58f05.png",Actions:ae})})]}):(0,N.jsx)(S.A,{currentStepIndex:Math.min(u,re.length-2),steps:re,testDetail:null,url:"Interactions On Your Website",isDeterminingStatus:g,breadcrumbs:ne});var C}function ae(){return(0,N.jsx)(P.ls,{href:"/signup?utm_campaign=inp-debugger-cta",children:"Start Free Trial"})}function se(e){var t;let n=e.testResult;if(null==n||null===(t=n.data)||void 0===t||!t.interactions)return null;let r=(0,N.jsx)("div",{className:"p-3",children:"No interactions foun

1d on this page."});return n.data.interactions.length&&(r=(0,N.jsx)(Q,{formFactor:n.data.formFactor,results:n.data.interactions})),(0,N.jsx)(W.U5,{padded:!1,noMargin:!0,children:r})}function oe(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,a,s,o=[],l=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(o.push(r.value),o.length!==t);l=!0);}catch(e){c=!0,i=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw i}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return le(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?le(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function le(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function ce(e){let t=e.testId;return t?(0,N.jsx)(ie,{testId:t},t):(0,N.jsx)(de,{})}function de(){const e=oe(a.useState("idle"),2),t=e[0],n=e[1],o=oe(a.useState(""),2),l=o[0],c=o[1],d=(0,s.Zp)(),u=oe(a.useState((0,i.v)().device?(0,i.v)().device:"mobile"),2),m=u[0],h=u[1];return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(C,{onSubmit:async e=>{const t=await async function(e,t){return n("loading"),c(""),(await r.FH.triggerInpDebuggerTest({formFactor:t,url:e},{onError:(e,t)=>(c(t.error),n("idle"),!0)})).testId}(e,m);t&&d("/inp-debugger/"+t)},loadingState:t,device:m,onDeviceSelected:e=>{h(e)},errorMessage:l}),(0,N.jsx)(T,{})]})}},19664(e,t,n){n.d(t,{S:()=>a});var r=n(74848);const i=["size","fill","strokeWidth"];function a(e){let t=e.size,n=void 0===t?14:t,a=e.fill,s=void 0===a?"currentColor":a,o=e.strokeWidth,l=void 0===o?"1":o,c=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,i);return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 14 14",width:n,height:n,...c,children:(0,r.jsxs)("g",{children:[(0,r.jsx)("path",{stroke:s,strokeLinecap:"round",strokeLinejoin:"round",d:"m7.25918 13.1381 -2.608 -7.81712c-0.13812 -0.41399 0.25581 -0.80792 0.6698 -0.6698l7.81712 2.608c0.4871 0.16251 0.4809 0.85364 -0.0091 1.0074L9.69192 9.34529c-0.16529 0.05188 -0.29475 0.18133 -0.34663 0.34663L8.26658 13.129c-0.15376 0.49 -0.84489 0.4962 -1.0074 0.0091Z",strokeWidth:l}),(0,r.jsx)("path",{stroke:s,strokeLinecap:"round",strokeLinejoin:"round",d:"m9.48706 9.47449 3.67134 3.67131",strokeWidth:l}),(0,r.jsx)("path",{stroke:s,strokeLinecap:"round",strokeLinejoin:"round",d:"m0.5 3.60901 1.77142 0.47465",strokeWidth:l}),(0,r.jsx)("path",{stroke:s,strokeLinecap:"round",strokeLinejoin:"round",d:"M1.2522 7.87097 2.54896 6.5742",strokeWidth:l}),(0,r.jsx)("path",{stroke:s,strokeLinecap:"round",strokeLinejoin:"round",d:"m3.60913 0.5 0.47465 1.77142",strokeWidth:l}),(0,r.jsx)("path",{stroke:s,strokeLinecap:"round",strokeLinejoin:"round",d:"M7.87134 1.25232 6.57457 2.54909",strokeWidth:l})]})})}},61459(e,t,n){n.d(t,{D:()=>a});var r=n(74848);const i=["fill","size"];function a(e){let t=e.fill,n=void 0===t?"currentColor":t,a=e.size,s=void 0===a?16:a,o=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,i);return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:s,height:s,fill:"currentColor",viewBox:"0 0 16 16",style:{fill:n},...o,children:[(0,r.jsx)("path",{d:"M4.1201 4.11332C4.83495 3.39961 5.73315 2.89737 6.71551 2.66207C7.69787 2.42678 8.72615 2.46759 9.68677 2.77999C9.79212 2.81784 9.90402 2.83407 10.0158 2.82772C10.1275 2.82137 10.2369 2.79256 10.3373 2.74302C10.4377 2.69349 10.527 2.62423 10.6001 2.53939C10.6731 2.45455 10.7283 2.35586 10.7623 2.24922C10.7964 2.14258 10.8086 2.03018 10.7983 1.91871C10.7879 1.80724 10.7552 1.69901 10.7021 1.60046C10.649 1.5019 10.5766 1.41506 10.4892 1.34511C10.4018 1.27516 10.3012 1.22354 10.1934 1.19332C8.90098 0.783849 7.51889 0.749385 6.20763 1.09393C4.89638 1.43848 3.70975 2.1479 2.78553 3.13983C1.86131 4.13176 1.23742 5.36551 0.986283 6.69781C0.735152 8.03012 0.867086 9.40633 1.36677 10.6667C1.38041 10.7026 1.38122 10.7421 1.36907 10.7785C1.35693 10.815 1.33256 10.8461 1.3001 10.8667L0.366768 11.4867C0.2597 11.5582 0.17565 11.6593 0.124778 11.7776C0.0739052 11.8959 0.0583879 12.0264 0.0801013 12.1533C0.105051 12.2827 0.167756 12.4017 0.260303 12.4954C0.35285 12.5892 0.471091 12.6534 0.600101 12.68L3.5401 13.3333H3.67343C3.80412 13.3323 3.93163 13.2929 4.0401 13.22C4.18739 13.1234 4.29046 12.9724 4.32677 12.8L4.93343 9.85999C4.95583 9.73371 4.94133 9.60365 4.89167 9.4854C4.84201 9.36715 4.75929 9.26574 4.65343 9.19332C4.54388 9.12023 4.41513 9.08122 4.28343 9.08122C4.15174 9.08122 4.02299 9.12023 3.91343 9.19332L3.0201 9.77999C2.97311 9.79925 2.92043 9.79925 2.87343 9.77999C2.84921 9.77061 2.82721 9.75628 2.80885 9.73791C2.79048 9.71955 2.77615 9.69755 2.76677 9.67332C2.46273 8.71138 2.42812 7.6845 2.66672 6.70427C2.90531 5.72403 3.40798 4.82793 4.1201 4.11332Z"}),(0,r.jsx)("path",{d:"M15.9201 3.8867C15.8973 3.7579 15.8371 3.63866 15.747 3.54383C15.6569 3.44899 15.5409 3.38276 15.4134 3.35337L12.4868 2.6667C12.4014 2.64695 12.313 2.64421 12.2266 2.65866C12.1402 2.6731 12.0574 2.70443 11.9831 2.75087C11.9088 2.79731 11.8444 2.85794 11.7936 2.92929C11.7427 3.00064 11.7064 3.08132 11.6868 3.1667L11.0201 6.0867C10.9963 6.21169 11.0088 6.34087 11.056 6.459C11.1033 6.57713 11.1833 6.67928 11.2868 6.75337C11.3993 6.83485 11.5345 6.87914 11.6734 6.88004C11.7993 6.88076 11.9224 6.84359 12.0268 6.77337L12.9868 6.17337C13.0338 6.15411 13.0864 6.15411 13.1334 6.17337C13.1577 6.18275 13.1797 6.19708 13.198 6.21545C13.2164 6.23382 13.2307 6.25581 13.2401 6.28004C13.5567 7.23995 13.6026 8.26853 13.3728 9.25284C13.143 10.2371 12.6464 11.1391 11.9376 11.8596C11.2288 12.5802 10.3351 13.0915 9.35468 13.3373C8.37427 13.5832 7.34508 13.5542 6.3801 13.2534C6.27506 13.2205 6.16454 13.2087 6.05491 13.2187C5.94529 13.2287 5.83874 13.2604 5.74142 13.3119C5.64411 13.3633 5.55794 13.4335 5.48792 13.5185C5.41789 13.6034 5.36539 13.7014 5.33344 13.8067C5.30048 13.9109 5.28849 14.0205 5.29818 14.1294C5.30786 14.2382 5.33902 14.344 5.38985 14.4407C5.44069 14.5374 5.51019 14.6231 5.59434 14.6928C5.67849 14.7625 5.77561 14.8148 5.8801 14.8467C6.56852 15.0612 7.28571 15.1692 8.00677 15.1667C9.17907 15.168 10.3338 14.8817 11.3697 14.3329C12.4056 13.7841 13.2911 12.9896 13.9485 12.0189C14.6059 11.0483 15.0151 9.93121 15.1404 8.76561C15.2656 7.60002 15.103 6.4215 14.6668 5.33337C14.6539 5.29636 14.6534 5.25615 14.6654 5.21885C14.6775 5.18155 14.7013 5.1492 14.7334 5.1267L15.6334 4.5667C15.7429 4.49418 15.8284 4.39095 15.8794 4.26998C15.9304 4.14901 15.9446 4.01568 15.9201 3.8867Z"})]})}},41718(e,t,n){var r=n(31601),i=n.n(r),a=n(76314),s=n.n(a)()(i());

1s.push([e.id,".inp-debugger{padding:15px}.inp-debugger h2{font-size:1rem !important}.inp-results__element p{color:#555;font-size:0.8125rem}",""]);const o=s;n.d(t,["A",0,o])},18228(e,t,n){function r(e){return"[object String]"===Object.prototype.toString.call(e)}n.d(t,{A:()=>r})},60473(e,t,n){n.d(t,{A:()=>x});var r=n(2173),i=n(3579),a=n(5564),s=n(18228);const o=(0,i.A)(function(e){return!!(0,a.A)(e)||!!e&&"object"==typeof e&&!(0,s.A)(e)&&(0===e.length||e.length>0&&e.hasOwnProperty(0)&&e.hasOwnProperty(e.length-1))});var l="undefined"!=typeof Symbol?Symbol.iterator:"@@iterator";function c(e,t,n){return function(r,i,a){if(o(a))return e(r,i,a);if(null==a)return i;if("function"==typeof a["fantasy-land/reduce"])return t(r,i,a,"fantasy-land/reduce");if(null!=a[l])return n(r,i,a[l]());if("function"==typeof a.next)return n(r,i,a);if("function"==typeof a.reduce)return t(r,i,a,"reduce");throw new TypeError("reduce: list must be array or iterable")}}function d(e,t,n){for(var r=0,i=n.length;r<i;){if((t=e["@@transducer/step"](t,n[r]))&&t["@@transducer/reduced"]){t=t["@@transducer/value"];break}r+=1}return e["@@transducer/result"](t)}var u=n(27660),m=(0,n(92254).A)(function(e,t){return(0,u.A)(e.length,function(){return e.apply(t,arguments)})});const h=m;function g(e,t,n){for(var r=n.next();!r.done;){if((t=e["@@transducer/step"](t,r.value))&&t["@@transducer/reduced"]){t=t["@@transducer/value"];break}r=n.next()}return e["@@transducer/result"](t)}function p(e,t,n,r){return e["@@transducer/result"](n[r](h(e["@@transducer/step"],e),t))}const f=c(d,p,g);var b=function(){function e(e){this.f=e}return e.prototype["@@transducer/init"]=function(){throw new Error("init not implemented on XWrap")},e.prototype["@@transducer/result"]=function(e){return e},e.prototype["@@transducer/step"]=function(e,t){return this.f(e,t)},e}();const x=(0,r.A)(function(e,t,n){return f("function"==typeof e?new b(e):e,t,n)})},85576(e,t,n){n.d(t,{A:()=>i});const r=(0,n(92254).A)(function(e,t){return Number(e)+Number(t)}),i=(0,n(60473).A)(r,0)}}]);