we're live to the way you put on our cameras welcome everybody to uh you and I Builder live we're doing it very live today our intern Earl is not here with us so Brad is uh doing the controls and we have no idea where intro went we have no idea we barely have a background it's a miracle that we're talking to you today to be honest staying with us we also have guests for the first time welcome our guests if you could please introduce yourself thank you great to be uh invited to this as a guest I'm really excited I hope I'm getting a t-shirt out of this that'd be awesome um my name is a lot Patel I am a product manager uh with our ux framework that includes a developer experience and the building to play experience as well as the developer tools for the ux framework component building as well as some of the debugging tools that we're going to be talking about today so great to see all of the energy behind it looking forward to your feedback kind of your impressions and how do we make it better thank you that was that was so like professional I need you to tone it down a little bit good sir go ahead Brad hey everybody I am the other host uh Brad Tilton I am on the outbound product management team for all of our next experience products and excited to talk uh developer extension developer tools extension today I will pass it down to Wolf okay thank you I am Wolfgang wedemeyer one of the engineers working on a couple of the products that a lot mentioned earlier uh yeah looking forward to see how people react to these these tools I've joined on a couple of the live coding happy hour things before it's always been a really fun time yeah I'll go next happy to be here I'm BJ khatri one of the engineers on client runtime framework so basically seismic and developer tools that we be presenting talking about happy to be here again and then happy to see how people react to the extension thanks for inviting thank you all so much and I forgot to introduce myself I'm Maria Gabriela I'm on Brad's team I also do next experience products I'm also a product manager cool Brad what are we gonna do today all right well we are going to check out the new Chrome extension that's been out for a little while now but only recently kind of out out more publicly uh and hopefully after this even more publicly I am expecting this to this episode to get some a lot of watches uh after we kind of show people what it does and how it can help your next experience development work whether that's custom components or implementing a workspace or building out a custom experience in uib uh what happened Gabby you said uh-oh are you something going on was that you guys or was that me I didn't hear anything I just heard you say oh I'm gonna keep going maybe backtrack a little bit all right Ailey says we're not frozen I believe her um so yeah we're going to talk about the new extension uh we will kind of show some of what it does uh we have lots of people that know way more than me about the extension uh on the call here so uh if you have questions go ahead and ask them uh if there's something else you want to see in it I think we would love to hear uh where you want it to go um but we're going to kind of demo some of what it does I don't have anything planned I am sort of familiar with it and have installed it and we're going to kind of mess around and see what happens uh and so yeah if you have any questions or you want to see something uh specific let us know so the first thing we're going to do so before we get started real quick yeah so the first thing I'll do is just call out this is Super Beta right like we've put it together we're certainly iterating on it and making changes frantically um so you will certainly see it kind of changing along the way pretty frequently here the other one is that right now it is named Dex developer tools in the Chrome Store it is going through a renaming process so you could you'll potentially see that name change in the future here shortly but for now if you're looking for it that's what it is awesome I was also being a public service announcement all right and also we can't post the link in the YouTube chat because Earl's not here so the link is below us right now I I don't know yeah the short link is here and then let's see this is the long link uh so just memorize that link it'll be fine um but uh yeah the short link oh can I move that to the side we can't see BJ anymore um the short link is here on the bottom I'll leave that up for a little bit longer uh but yeah this is the uh this is the extension like a lot said we're probably going to end up renaming it we are serviced now right we have to rename everything um so we will end up renaming this uh probably to a longer name because that's the way that we do things uh but uh yeah World Records baby that's right this is this is where you'll you'll get it uh I've got it already added to this browser so you can see the remove from chrome button so I'm gonna pull us off camera here and we're gonna get into things so I've got an instance here on uh Vancouver uh this extension I think does work on basically any version but it's possible if you're using a pre-vancouver version some things might not quite work the way that they do in Vancouver is that accurate yeah it should it should work for kind of Utah and above um you'll see certain you might see certain information on newer instances versus some of the older ones but it should show you what is available based on kind of the functionality based on the version all right so let's let's take a look at it here um one thing to call out is uh so to launch it I don't go through the extension itself I just launched my developer Tools in Chrome and we've got two new tabs here next UI inspector and next UI profiler and so the inspector is really going to help us kind of get into an experience and look at components and other things in the profiler is really all about performance which I think is really going to resonate with a lot of people as they're looking for um you know as you're looking for being able to debug performance issues and things like that within next experience Pages uh like the home page or the admin dashboard that we're looking at now and other things so first question in the chat which I think is a great question any plans on releasing this for browsers other than Chrome like Firefox or Safari so we don't have to share specifics but if if it is something we are looking at uh uh we don't have any I guess solid plans around it we're ideating over kind of what the next browsers that we want to support are for it um so it we certainly are having discussions around it but there's I wouldn't say there's anything solid behind it currently all right and If This Were live coding happy hour it'd be time for all of us to uh take a swig Brad can you zoom in I can't zoom in one more time oh yeah because we've got the extension oh there we go okay that's at least a little bit better there we go 200 on this browser so hopefully that's good all right so I have opened up the next UI inspector uh again this is only you're only going to see this if you're looking at a next experience UI page uh which what that means is let's just go to uh like if I look at incident.list will it disappear from my can we use the profile if I were to see why that took so long so if I get it back will it show up oh it's still there it's it's still there but basically what you're seeing is the app shell top part is experience whereas the rest of it's all using classic got it okay so it's only gonna it's only gonna give me what's in the the top app shell yeah that makes sense so let me let's try to zoom in on the dev tools here that's my zoom in there we go Lisa is that better so we're going to go ahead and open a workspace and the first thing that we're going to look at so we have four tabs they're all starting to show up here uh so we've got components actions transactions and logs I think is the last one once my page totally uh totally loads so why did my logs not show up oh so the first tab is components so you know if you've messed messed around with the next experience you know that we've got we've got the shadow Dom happening which makes it a little harder to kind of walk that tree of your document of all of the elements in your document and so with the components here this makes it a little easier um to kind of see you know the specific components and then what's happening you know within a specific component here uh we are so big that things are rendering weird um Let's uh let's open up a page that I know about here all right so one of the things that uh that you generally want to do there's a few things if you're just looking at a page maybe you're not super familiar with workspaces or the new UI the new framework uh and you you may need to change something and you don't even know like what component is being used and sometimes it's hard to tell that in uib itself you can use the little selector here uh and and uh you know select individual components uh uh this where do we go there we go that work let's try that again you're using the wrong inspector there's the one right below it that's it I'm trying this one right no you tried the top one have I been doing the top one man yeah sometimes usability Improvement noted difficult yeah there we go there's another way if you do this way and go to the elements uh it will have component ID and then you can take the component ID and I believe you can search it here and find that same component so if you you know you could just right click on it inspect it and then launch uh launch the dev tools that way as well so we've got a container there in the container we have a layout and then this now heading I think is the component we want So within that component itself uh there are some nice nice things happening over on the right here one of them is the properties and so this is one that I think is is nice because if you are looking to maybe Implement one of our more complex components like I hate to talk about the calendar component but maybe the calendar component or one of those that has some pretty complex Json that you need to pass to it um and you see that component in action somewhere you can come in and kind of see what properties are being passed to it and maybe what's the structure of some of the properties that are being passed to it uh from the properties here the state is kind of the internal state of the component so I know we have some people on the chat that have built some custom components and so I think this is you know where you might see what's happening within your component as you've selected it there action handlers so these are any action handlers that are registered with that component and then the actions themselves uh show up here so like for a button uh you'd see the button clicked action and the nice thing about this uh for you know if you not all of our action or not all of our events event payloads are documented uh completely right there's probably I don't know how many event payloads there are total that we ship out of the box you know between all the components and everything that happens there's probably you know a couple thousand uh and so if you want to see what's in the payload uh you can come in here and see what's in the payload of that event which can be fall and so there's just a lot of data available to you here that previously was just totally hidden that you'd have to do a lot of logging uh from you know my my one of the things I always do if I'm building something new a new page is you know write a client script that uh that does a console log of the event payload uh so that I know if there's an event payload I haven't worked with before I know you know what it looks like a panel that's on the call any anything else that you want to call out here with the components uh one of the things if you go back to properties that I did want to mention for all of those uh if the property has like a schema defined as far as what the valid values are for it you can Mouse over the names of those and click on those any ideas with one of those try try clicking on like label yeah label will be the easiest ways required property and you see that it has to be a string yeah so that's one example sorry I said Mouse over I must say click on no you're good yeah you can also actually double click on that value uh here is a test um oh and change it you can actually this doesn't have to work for all properties but you can kind of dynamically change some stuff on the Fly just to see what happens right and if it has the schema defined it'll also validate that for you and tell you whether this is a valid value when you're trying to change it oh nice okay oh Easter eggs Easter eggs yeah this is great this is this is the value of this uh this type of thing so that's great um yeah that's a good one the other thing do I do that I don't do that from here so creating a new action uh is also interesting uh to me I guess you can do that from here um but uh yeah if you're having trouble like triggering an event uh you can do that manually uh through this extension yeah the other thing I want to call out is on property State and also on here you see those icons to the right side that have the double box those are for copying values if you want to take them and be able to paste them into wherever you're trying to share information right okay into your like clipboard for your actual yeah that is nice there's one more indication that that tells you like it's a selectable property so if you go back to properties tab if there is something that's being selected from a provider we'll get a different notification icon something that's being selected from a provider I'm not sure I understand that um I don't know what's the right component here maybe when we get there okay maybe we can come back to that one yeah we can come back to that if you can think of like a specific component that that would happen on we could add a page real quick that has that um all right so the next one are actions and so this was one that uh it does uh it does get pretty messy pretty quickly uh but actions will kind of record all of I guess actions for us are really the same thing as events so this is kind of recording all of the events uh that are fired here uh and so you know if I click on a button I'll see some actions there oh here we go where are they um so so if you want to typically see an action you can click that little garbage can icon at the top to clear it and then do the action then you'll kind of have a better idea of what it's doing when you click it yeah so I think that's the drop down and then we can kind of see here okay there was an action what was its payload does it have any metadata uh and you know what happened with it and so this is you know this is a record page so we haven't done a ton custom with this uh I do have oh this is the wrong I've got a better page we can look at later to kind of look at specific actions but anyway this will kind of record basically all of the actions that are happening right and then I can you know start it over and start recording again I can filter uh so I thought this was pretty interesting uh so event handlers um so I guess what as I'm looking at this what what I'm when I'm filtering event handlers what does that really mean um if I include or exclude event handler list like if you want to see everything except like a certain one or you know like you'll include is pretty straightforward it's like I only care about this one or these two or three um but you might also have a list of certain ones I don't care about and I want to see everything else so exclude is the kind of the opposite it's like I know these ones I don't care about I just want to see everything else yeah and in this case event handlers is talking about a very specific feature of the framework so it's going to capture like the Dom events and some of those can be very chatty like Mouse move and other types of events that we exclude them by default because it tends to fill up a lot if you do include them but for certain types of troubleshooting debugging you do want to see those yeah so you'll see like a ton of mouse move in this case when you have yeah interesting okay uh action types framework action user action I think that makes sense and then so I could in this case I could uh could I filter it down to like a single component like I only want to see actions related to one of the components that are on this page yeah you'll probably have to do the include for that one if you're going to do a single component okay okay if we went now input yeah actually that's really fun there's probably no inputs on this page maybe we go to yeah I'm nuts growing oh well uh and then uh I guess I could yeah I could uh if I had a specific uh action like in a specific event I wanted to Monitor and see when it's actually getting fired I could do that here yep all right so transactions and logs uh these ones I was a little more they're a little fuzzier to me um in terms of I'm not you know I'm just kind of a user of UI Builder uh and a little bit of custom components I don't have you know a lot of uh familiarity with the back end framework so I'm hoping you all can kind of help me out with what we're seeing in these tabs um yeah I mean I'll give it a shot and sure folks can chime in as well but it's really kind of like a it's intended to be um a bit of a trace right so you know a transaction is something that happened on a page and then the idea is it gives you kind of that the tree of what else was done as a result of that right so you can kind of trace it a bit um I guess the public service announcement for this one is we know there's some gaps here that we and we certainly want to improve the ux of this one but it'll at least help you understand kind of um hey this this event was triggered and what were the subsequent things that happened as a result of it so you can kind of tie things together so let's say if I had like a button and my button triggered a data resource and on completion of the data resource I populate something and then I trigger something else so would I be if I click the button would I be able to see all of those things kind of in a in a chain here you'll see the ux related stuff and I guess uh the the actual like what happens on the server um it's not tied together yet that's another thing we certainly want to include is the full end-to-end client and server um but as of now and you guys and wolf and BJ you can correct me if I'm wrong but right now it's mostly what's happening within the the ux Slayer and the framework itself so you can see kind of the life cycle of the components and what happens when they re-render and when property's values change Etc you don't actually see like the data resources being fired in terms of the waterfall here okay soon to come though yeah and then we've got some different options here I guess so if we want to order by different things like when it started longest duration I'm guessing you're probably going to use this mostly for troubleshooting so you'd want to know you know what takes the longest on my page um so that that's a pretty good troubleshooting steps there um Thank you Lisa she says I'm more than a uib user I appreciate that um and then earliest start time this is I guess this would be the order that everything happened on the page and then logs the last one here um so we've got different log types error worn info debug Trace so these are all uh like standard Vlog types that we see in service now I'm kind of wondering where which which logs are showing here so if I you know there's a lot of ways to add logs like if I put a client script in a uib page is that going to show up here is this mostly just component related like things within a component um you know what am I actually going to see here when I'm doing logging so yeah this will only capture logs that come from the framework itself which also will depend on what environment you're in a lot of times in production you won't get very much in terms of the logs so this tends to be more useful in a local development component developments type of scenario okay yeah everything you see here well it's currently client-side because that was kind of the first set of information we wanted to show are very the kind of the next part of it is like how do we also include what happens on the server to give folks the full picture of what's going on and being able to do even more in-depth troubleshooting and debugging so it's not there yet but certainly one of the things that we want to start surfacing um as part of the next set of work that we're focused on okay that makes sense so I guess that's uh that's a lot of this first tab the next UI inspector anything anybody wants to add there any questions around this tab from the chat Brad do you do you mind going back to actions yeah and um so there's one cool thing that you could do there's like re-dispass kind of thing so yeah that one oh nice so if I okay so I can I can basically fire that action again and change the payload if I want to all right yeah it can be really good for troubleshooting if you want to see did I get this payload wrong and if I change the value does it do the right thing sort of scenarios that is a good one um let's see who's this page have here I have a thing that I want us to test and so I I need to switch branches on this on this app real quick so this is going to take me one minute so if anybody wants to say anything that's the time any other questions from the from the chat do you want to switch to our faces in the meantime yeah we can do that everybody smile we're live again so oh I was gonna go for it I was able to see a component where it has a selectable property and then you can actually see what's the source for the property that will be so helpful when you have like a property and you don't know like how did you even get that right that's something I wanted to call out so on the page if you were to go like find the router component then we can show that right now which component um it's called as SN canvas router okay so it's not a it's not a component that's in the uib toolbox but it's one that kind of makes up the experience itself it's applicable for any component but that was the one I was able to find out okay I think all right I had to switch instances here sorry Mario you were going to say something and caught you in the middle no you're good I was just going to say how um how amazing this all looks and how incredibly overwhelmed I currently am we've left you speechless that's how we like to do it that's right quite literally I am sitting here going like wow this is going to be very helpful when I'm trying to tackle the calendar component and at the same time I'm sitting here like wow this shows me a lot a lot that I don't know I'm so glad that Brad's able to just keep up I don't know how much I'm keeping up but I am I am still driving so that's something uh right so let's go ahead and re-share here I do want to commend you all on your use of emoji I do appreciate there being emoji on the tabs where'd they go wait where did my tabs go your tabs disappeared there they are oh did they show back up yeah they did all right but yeah if you don't see them show up and you know you're on like a next UI page you can always just close the dev tools and open them back up that usually seems to if you run into that seems to resolve it for the most part yeah I just automatically close everything and restart everything that's yeah uh so one of the things I did want to show um was I come into actions we're going to delete the actions and then I've got this button that fires a modal and so if I come back here I think I had added that filter that let's find the yeah I think you got to remove the uh you gotta switch it to exclude right yeah also how did you read my mind I wanted to ask if we could uh test the issue that I had running the lab this weekend oh nice yeah where you literally are hitting on it right now and I didn't say anything let's kill that and then pop the modal so to give some background to people while you're looking for that well I was running Brad's amazing killer experience uh k23 lab uh building this uh page that you're seeing in his fleet vehicle management application I was having issues for some reason triggering a page level event using the quick add request button it just wouldn't pop up and I didn't know how to troubleshoot this so I cleared my browser cache I refreshed my page and then magically at some point it worked I don't know why so let's see how we can use this tool to help us actually troubleshoot that issue so this is one I just wanna you know I I kind of zeroed in on this one event I know my button click fires this event so if I just hit a refresh and dispatch it there's no payload it's a button it pops my modal and then I another way I can do this I think is with the plus sign where I can I guess select any of the components on my page and then I will be able to select any of their actions yeah that's correct that this is what you were looking at before basically just pre-populates this with an existing set of components and data so I don't know which button it is but we'll find one and then yeah so usually if you go this way you kind of have to know what the values are so you can kind of generate it so if you have some custom thing you want to you know dispatch you can do it that way but the easier way is just to you know re-dispatch and then modify the small amount of properties of that you actually want to change yeah so one of the cool things that you can see here is that I've got this button clicked action and then it calls the quick act quick ad modal action right so either either one of these it's going to eventually do the same thing but I can also if there's a breakdown somewhere I can kind of figure out where that breakdown is a little easier here all right so that is the next UI inspector the other exciting part is the profiler here and so I think we'll go to the instance home page do I have to start recording first you don't have to oh there we go you can record whatever so there's really kind of two options right like just record in place because maybe you want to only record the performance after you take an action or you can kind of use the second option which is click and reload which will reload the page for you and start recording nice yeah I think this is probably what I would end up doing so you know we have a lot of uh you know a lot of feedback around performance of next experience Pages uh sometimes that's the instance home page sometimes that's a workspace page uh but so far you know historically any page in servicenow you have that little uh what do we call that thing at the bottom right um that shows the page load times it's basically server Network client it has a name I can oh my gosh I thought you were gonna know Gabby I'm I'm I Won't Say I'm disappointed but I know what you're talking about somebody's gonna tell us in the chat anyway we don't have that on my next experience pages and so this is really nice uh and it's you know it's like that thing on steroids I think so let's take a look at it uh I'm gonna read response time uh response indicator response time indicator I think something like that but we can see all right I had done this is the service operations workspace homepage so we're not going to pick on them but we are going to kind of take a look at what's here so this is obviously a lot more than you would have gotten without using this Tool uh and just trying to kind of troubleshoot things yourself uh but uh you can see a few things happening here um so we have kind of this overall time that we recorded uh we've got this chart here that kind of shows us where our Peaks are where our valleys are uh and then uh what what do we call this is this a flame chart is that yeah flame graph I I had not heard that term until I learned about this um so we've got a flame graph here uh that's kind of it's really cool it's telling us uh all of the different things that are loading all of the different components on the page and how long they're taking to load um so I think this is a really good uh kind of first step in troubleshooting uh in terms of these page loads um anything y'all want to call out here I'm sure I've yeah you can um if you want like if you grab that left thing you can adjust kind of what's selected in the timeline so if you care about a specific Peak um you'll see it all adjusts right so everything below it is adjusting based on what you're selecting on the timeline so you can narrow in that way you can also click on items in the flame graph and you can kind of zoom into like that area of the flame graph so if there's areas that all these small like those small bars you kind of get dig into them more if you want to as well and then if you want to get back out you can just reset and it'll go back out well now I'm at the root already all right yeah so that is nice uh we've got you know different I guess different events or maybe stages that are happening here what what are the effect and start all of these things what's the significance of this pie chart or donut chart if anyone could tell me so all the all the raw events that are driving this data they have different types and this is just aggregating like basically showing you the breakdown of what types of events we have in the Raw data here so it shows you like how many of those were renders versus dispatches versus all those things okay yeah so out of all of the events how many how many events happen and you can click on the bar you can click on the pie chart if you're interested in just the raw number of one of those things so you can kind of filter things out on the chart too all right and then the other cool thing is the compare so I haven't actually set this up but I think what I can do so I can do a compare of two different page loads basically which is always helpful to Baseline if you if you're doing any sort of instance performance um troubleshooting it's always helpful to have a baseline at some point of if things seem slow it's nice to know what normal is um so it's it's great to kind of take regular baselines and so historically that is using uh the little response time indicator and just kind of making a record of hey when most of my users load a home page this is about what the response time is so when you get people saying hey it's really slow you can kind of have them look at that and know is it actually slow does it just seem slow to them is there a specific name that's slow and I think we can do the same thing here with kind of taking baselines and then comparing it um so I believe what I would do is this save profile button is that right yeah you don't you can also just capture a new profile if you click that reload and yeah all right so you can always save them and upload them and get profiles into the tool that way or you can record Another profile so whenever you feel like clicking done it'll show up in that drop down of profiles at the top so now you have two profiles and you can just select what you want to compare but if it's not here then certainly you can you know upload it one that you've saved previously as well so what's the like what is it going to just record anytime I do this is it cached is it going to go away at some point like how to be as safe profiles work yeah so if you want to save their profile you can just whatever profile you're on if you click that download button to the left yeah that'll give you one to save on a local storage somewhere yeah and if we don't save them it'll go away when you close the dev tools basically that's the lifespan okay you're looking at here all right so if I wanted to like compare two pages it might be a good idea just to I could do that pretty easily but if I want to compare like hey I'm going to do this in Utah and then we're gonna upgrade to Vancouver I'm going to run it again then I would want to save kind of my Utah Baseline and compare that against the Vancouver Baseline yeah that way you also don't have to worry about like oh where did that instance go or have two instances up at the same time at all yeah oh that's a good point um so I could so if I switch to this instance do I is it a different uh profile yeah can we compare profiles from different instances you can you just download it and then upload it into the latest one yeah so I I honestly think this is probably maybe the the best part for most customers of the tool is this performance baselining and comparison so let's take a look at the comparison and see what it looks like uh all right so we'll compare those oh and then we've got all sorts of things in here wow tier one tech support me would have loved to have this all right so so yeah on the left hand left hand side you'll see just kind of metadata around the two profiles so you can kind of make sure you're comparing Apples to Apples like is it the you know you can see the URLs to see if it's the right page the same page because sometimes you might be comparing two different pages which isn't as valuable um you'll be able to see basic load times and then really all of the components and the different events and if there's more or less because you know all of a sudden if you see a spike in events for a certain component that certainly is an indication potentially of a performance issue um you can actually click on one of those rows all right if you don't mind and you can actually see the raw numbers um so you can you know kind of get a sense of how many there are total um and then it is if you click that um filter icon at the top right you can actually kind of adjust because one one capture may have more events than another so you can just say hey I only want up until the page page load is complete so then you can have more of an apple status comparison to page [Music] um so yeah it kind of gives you a good sense of areas that you might be interested in that have degraded um and some might make sense because you're like I added new components of the page that makes sense but it'll it'll kind of give you some information of where you might be able to start digging yeah the last thing I would recommend if you go to the top again if you click on those headers for the different event types like you can click on not that one but the in the table where it says render end yeah you just had your mouse over it oh right here uh not that one but in the table I'm sorry yeah the column yeah so this will sort by those so you can look for one of the biggest changes in terms of that event oh great yeah are we able to click into each individual cell it'll give you the bottom here here so the comparison yeah we don't have the kind of the the digging in part right now where if it's like hey I want to click on one of them Etc it kind of ends here but it certainly areas that will will provide we do if you uh when you uh we don't have to do it right now but when you do exit out of compare we can show how we can filter down the raw events and see the details of why you had a specific number of say renders for example yeah let's let's do that so if I exit out of the compare let's see why SN Polaris header took 30 million microseconds to load longer this time yeah so if you go to the events table underneath that events tab this is basically a table of all the events that were captured and is filterable and sortable yeah that was what I was about to mention um so the three the three dots at the end of each of the headers give you the filter options oh got it okay yeah so here you could filter it down to say just the renders if you wanted that um yeah say none and then say uh render yep yep and let's say for example you noticed that in one profile when you were comparing it was it was different than the other if you switch the profile in the drop down it maintains the filters that you've selected so you could say I only want the renders and I want to see what happens on my first profile and now I want to switch it to the other one it'll maintain wow that is nice that's nice yeah I think it's it's a little bit nicer too if you just add like a specific component tag here because then you're narrowing in even more on what the differences are between the two yeah yeah look up the header I was just gonna say that because like you don't necessarily control all the components in the base right so let's say there's one particular component or set of components that you do care about you want to apply the filter and then take a look at hey like asking why is it rendering like 20 times more than it should have been and then you know where to focus right in terms of where the performance degradation is coming from yeah that's a great Point yeah being able to filter on all of these and then sort on how you know the time and everything now I do know that um that we can use the inspector to get the component ID and be able to identify the component that we want to work with here but is is the component name that we assign a UI Builder what's this playing after the component ID in these listings like heading underscore greeting oh yeah I think this would be the name of the ID and then it seems like this is kind of a random tag that we give that component on the page yeah I mean we have to provide a unique identifier for each component on the page because you could have let's say 10 buttons and so we can't just put button there yeah because then there's naming conflicts makes total sense it just makes it a bit easier to navigate thank you yeah yeah it's a little bit tricky in that sense we could certainly maybe there's opportunities to make that easier to kind of drive through but I do agree it's a little bit confusing if you don't know and then I'm guessing I can get that component ID with the inspector right yeah you can get it from the inspector wrong inspector Brad no no I noticed there we go so we could go yeah I mean even even in the normal inspector the component ID will be there too so it doesn't matter which inspector you use to get oh okay I could just right click and I think it has well no this is the H1 you got to go up there it is up one yeah and you'll see the now ID there the component I'm sorry that guy and I could go in here and search for it I guess I gotta what a convenient remove filter button very good we probably have it filtered out somehow probably go back to filter maybe there was a workspace or something yeah go clear all filters man yeah yeah yeah maybe there's bass at the beginning in the end yeah all right interesting I mean if it's not we didn't wait did we do this page specifically I don't remember sure we may not have I met you know what I I was on the home page and then I clicked into the record pitch yeah then it wouldn't show up good call but it should show up now I think that first part might be unique every time you load the page though [Music] Let's uh yeah let's go to the end here could it be because it's repeating twice there can you can you go back to the inspector and see if you grab and grab the ID again it was this one component ID it could be the now ID instead and they're the same I think they're the same they should be the same yeah I think you pasted it twice no originally because it said primary field twice there it is whatever I did wrong [Laughter] um we've got all sorts of all sorts of things here see it wouldn't be uh you and I build our live without something like that happening it's always the copy paste I get you [Laughter] is there any last details we want to go over before we end Today's Show that's all that I have unless if something else uh you want to talk about and if anybody in the chat has questions uh please start cueing those up I don't know if we'll have any let's do one click through recording so people know like it exists with the record button here yeah just the record button press it and then I could yeah like fill something out on the page if it let me scroll that's probably yeah or just click on the link even yes this serves multiple purpose right so let's say you have a workflow it's degraded you can probably find a culprit like this or you want to verify your particular like performance of the like list component and click on the incident open the record page kind of scenario this will be helpful in your example what you thought back there with the button opening up the model this could actually help to debug scenario like that also like is it like you guys you guys told us like you clicked on the button but model was not there right so you'll probably find a clue why it's not there oh yeah that's a good point so maybe you pop a modal and then it takes five seconds for the modal to to populate any data this would be a good way to troubleshoot that so yeah if you have a you know if you're a developer and you have a uh reports from users that say Hey this specific thing is really slow you could then you know have them or record that event or have them do it and kind of figure out where where it is slow and what's taking the most time oh no this removes that excuse that you have saying I can't do it on my computer if people send you their baselines Oh no you're going back to your tier one uh support you might actually have to be helpful are they say your best base lines that's right uh all right well thanks y'all for joining we'll give it a minute or so for the chat anybody have any questions on this um and then I don't know a lot if you can share maybe where we're going with it if you've got kind of ideas on what we're going to do or anything like that a generic type thing I wish we could where's the Safe Harbor disclaimer do you have it yeah where's that Safe Harbor disclaimer Etc et cetera there it is perfect there it is um we're ready yeah I mean like I said I think we've touched on some of that stuff like we really want to improve the experience overall we know there's a lot of opportunity for usability this is just kind of the first we wanted to make provide some value where there was a gap so this kind of certainly helps fill a lot of those gaps there's usability improvements we know that are going to exist around there the the traceability um improvements we're certainly thinking about and how do we really tie not just client-side data but how do you also see the server-side information that ties along with it so that you can truly get an end-to-end picture of what's happening on my page what apis get called what scripts potentially run um so you really have that end-to-end pictures kind of really where we're starting to go or think through and kind of try and figure out to expose that and the complexities there of course there we can't expose everything to everybody so how do we make sure that we can expose whatever is relevant for the folks that have access to it yeah so again we where's my little uh uh oh it's a banner if you want to download this extension it is a Chrome extension you can it's in the Chrome web store Dex developer tools the name will change but this link will not change so if you grab the link you will be able to get to the developer tools and as always any feedback you have questions about the tools there's lots of ways to get a hold of us you know you can go through the YouTube or on S and devs or on the community so yeah any feedback you have something you want to see we would love to hear feedback and you know requests for future it happen again it's just you um Maybe I will open it up if anybody wants to say anything in closing or throw out any other little tidbits we're very excited to get this out there very excited to have people use it encourage folks to use it and encourage feedback we certainly want to make sure this is a tool that you love to use and so we're always open to you know improvements and things that we can make and just understanding you know maybe there's workflow gaps or understanding how you use the tools so we can make it kind of just seem part of your workflows and not something else you have to think about so and thank you so much uh Brad and his uh uh what was the word that you used I forgot oh conspirator conspirator thank you yes that's right I wanted to get Coke inverter in there somewhere um thanks for having us we really appreciate it and we hope this is kind of the beginning of a wonderful co-conspiriting party well thank you so much let's do some quick plugs everybody um as you know we have this show on the second and fourth Thursday of every month um next show we're gonna do a hacktoberfest special I said a ride on the first try we're gonna talk about how you can contribute to our uh repos and get your hacktoberfest T-shirt going um so I'm very excited for that and also next week on Wednesday the 20th at 11 A.M Eastern we have our next experience Academy we're going to be talking about all that's new for uh Vancouver in UI Builder and workspaces we'll see uh how close we cut it with that those slides there but anyways I don't know thank you all so much for watching today I'll start singing the song and you can make us go away all right here we go wait this isn't the right one dude wait