Hello everybody, Welcome back to another thrilling, exciting episode of javascripts Jabber. I am Steve Edwards, the host with the face for radio and the voice for being a mine. But i'm your host today because Dan didn't want to do it. Speaking of Dan, he is here with my panel, on my panel with me. How you doing, Dan, I'm doing really well on the personal levels. Good good. Dan is coming from Tel Aviv.
I am here in the Portland area where Mount Hood is getting dumped on with snow, which is great for us fears hey, although the winds are like forty miles an hour or two, so it makes this sort of hard to go down instead of a cross. But anyway, Hey folks, this is Charles Maxwell. I've been talking to a bunch of people that want to update their resume and find a better job, and I figure, well, why
not just share my resume. So you if you go to topendevs dot com slash resume, answer your name and email, then you'll get a copy of the resume that I use that I've used through freelancing through most of my career, as I've kind of refined it and tweaked it to get me the jobs that I want. Like I said, top endevs dot com slash resume will get you that and you can just kind of use the formatting. It comes in word and pages formats and you can just fill it in from there.
Our guest today is mister Michael Hoblich. I think I sort of said it right. I think that had more of the Hebrew accent than German. But how you doing, Michael, Hi, I'm doing well, Thank you very much. And you're coming to us from Austria, correct, Yeah, that's right. I am based in Austria and Derek work is the product manager for Chrome deftols and Puppeteer essentially think a lot about testing and debugging applications. Alrighty, so you work for Google A yeah, I've worked on the Chrome team
at Google. Excellent. Talk about getting stuff right from the horse's mouth. Doesn't get any better than that. All right, So, as you mentioned, we're here to talk about one of my favorite topics, which is debugging in the Chrome dev tools for you know, for someone like me who came up starting with PHP, where I had xd bug on the server and I could debug the crap out of anything with my break points and profilers and stuff.
It was when I started writing first Angular JS and then view on the front end, the dev tools and debugging became one of my better friends. So I'm all about debugging and how to troubleshoot and debug things on the front end. So where do you want to start, Michael, that's a good question. So we can start a PHP because I also started a program with peachp like you. So I'm the only one here who's never really programmed in PHP. Oh interesting, Wow, I'm a impressed. How did you dodge
that pullet? Bullet? Great tech, super useful, I got it or helps and oh my god, I would never ever want to use the applications that wrote twenty years ago. And by the way, just so you know, I think that PHP kind of got it starting in uh in a well, it didn't get it started in Israel, but it got a significant push in Israel. Like the one of the first versions of PHP was actually implemented by two israelis Rasmus one of them. Or it's Zen, the guys.
They're the guys that created zend technologies. All right, okay, yeah, that's still you see that as an option in like phb storm is using the Zen Debugger as compared to that's the other option other than xd bug. Anybody remember real quick what PHP initially stood for Personal Home Picture. That's right. It was just you know, it was like drupel. It was like heck anything else. If someone started out, hey, I want to do this for myself. Oh look this is cool, everybody else likes it. Let's
watch it go. I did manage to dodge PHP, but I didn't manage to dodge ASP and JSB. So yeah, so you know, I didn't dodge that bullet completely. I did want to say though, that I'm the one who invited Michael on and really wanted to talk with him because I think for me, first of all, for two big reasons. One is that a lot of goodness is recently coming out of Chrome into the Chrome Debt,
out of Google, into the Chrome Deaf tools. I feel like features coming fast and furious, and I'm really happy with all the advancements that are being made there. But it really goes for me beyond that, because for me, the debuggers that are built into the browser are like the big reason that
web development has been able to advance so much. Like we take these tools for granted because they're built in because they're ubiquitous, but like, you can't imagine how the world would have been without them, And I sort of can because I was there at the time and debugging with alerts and stuff like that, and you know, it's you really, I really can't imagine modern web development without the various debuggers and development tools that are built into modern browsers.
And personally, I like using dev tools the best, So that's the one that I mostly use when I have a choice. That's very nice of you to say, so, Michael, Let's start with history. I guess of the dev tools, and I know from back early two thousands, I can remember the first thing I ever remember seeing that was like this was Firebug in a Firefox browser, and I think that predates the Chrome dev tools. I could be wrong, Is that correct? Yeah, that's correct, so fire
I don't know if five buck was the first. I guess Netscape and so on also had the debugger. I can't think the Internet. I think Internet Explorer had a debugger before Firepark. That's the first that I recall. I'm not sure, to be honest, you know, I mean, at that point it was a blurry line. Also, you saying wish you basic and so on to debarking republications because he had all those nice actipix content. M
hm, so, but yeah, five buck for sure was first. And as far as I can recall, when Chrome actually was released, there was already deaf toos included. Okay, that sounds right. And one of the really cool things about Chrome dep Tools that again I don't know if a lot of our listeners realize, is that it's actually implemented in JavaScript and htmail and
other web technologies. That's correct, which is also essentially when you when people start talking about debuggles or about Chrome Depth tools or Firebug and so on and so on, they need to realize it's actually going to be two main components.
One of them is going to be the introspection capabilities for the runtime, which is like exposing what's currently happening in random, so all the information the back end essentially, But on the other side, you're also going to have the front end because we need to surface the deformation somehow they use it give the user a way to control breakpoints and so on, and that particular front end, for example, in in Chrome deft tols is when Chrome in Depth
tools is written in Now this isn't typescript. I think we migrated two typescript two years ago something like that for three years from script to sub subscripts. That must have been a really big rewrite. Yes it was. I mean it changed a lot of a lot of files and a lot of lines of codes. Of course, so we did actually tried doing it in small chunks, but then it was like also not great. So we actually we had hackertons where we changed bigger chunks of the quotes and so on. But yeah,
that took a lot of time. But typect is simply more more organomic to develop a republication like that. How many people, by the way, if you can say, work on the Chrome dev tools inside Google, let's say it's roughly twenty ish something like that. Yeah, so including software engineers, UX designers, uxrpeople, PMS program managers, managers and so on, it's roughly twenty And you, like I mentioned before, you release features really
fast and furious. I mean that literally every time a new version of Chrome comes out, which is what like every month or two every month months, I see like you guys coming out with the video about the new features and capabilities that you're adding into it. So how are you able to add so much capabilities into into the dev tools as such a rapid pace? Right, so quick shot out regarding videos, I forgot deferal people that are also working
on the team that are creating those content. And yes, I really like the videos. They are so great. And also that's what our use actually are also telling us, like the video is a great super use for them to actually get to know about the features. What videos are these? Were they? What's new in the tools? I think the cadence now is every two mature, every two months we're releasing a new one and stuff like that. I need to check, or maybe it's for each major version nowadays.
By the way, and the Chrome Dev Tools itself, when you open it in the drawer, it will actually tell you what what's new and have a link to that video so you can actually get at the video from inside the Chrome devtos. Yeah that's great. And this also has like release no small ass like this feature showcase it's linking too. Yeah that's probably playlist it is. I didn't. Oh, yeah, that's really useful. Like if you have like eight minutes ortuff like that every month and look at that you will
see all the features. How we do that, yeah, I mean it's a constant evolution, so the debugger always needs to adapt to how the did. The debugging target is also changing. What I'm saying is the web platform constantly changes, in particular Chrome constantly changes, so exposing new APIs or APIs
are going to be changed and so on. That requires a certain amount of maintenance in our ends to also make sure that we're not breaking, which is taking up quite a lot of capacity honestly, because there's a lot of a lot of churn and we need to keep keep keep having holds on those issues. And how we select that we what we're going to work on next.
That depends heavily on feedback we get from developers, but also initiatives that we know that they're important to us, like for example, co work, vitals
and performance debugging. We know we have the case studies that this is important, that this is really going to change the conversion rate, so we are investing a lot in performance debugging to make that more that's called it more efficient, so essentially that you're that you get more bang for the bug out of your time invested as a developer or similarly network debugging, which this year we want to take a deeper look into a network debugging network panel for example.
That because nearly every Depth tools user out there is using network panel one sort or another for performance debugging or for network debugging by something that doesn't show up, and so on and so one. The network panel is used quite often. And for this year we actually said, okay, we are going to take a deep a book and what we can improve there to there, which is not easy because if you ask two people which of the changes is more
is better, you get two answers. So very often it's finding a good middle ground or opening up don't find the middle ground, and providing capabilities to make it configurable what is best for you. Although there's this maxim that I've heard like a while back which says that every checkbox you've seen in an options dialogue is two product managers fighting and couldn't decide who's who's the right who's got the right opinion, So they said, let's just make it an option,
and then of course you start fighting over what should be the default. But that said, you know, so you said that you get a lot a lot of the decisions are actually driven by community feedback. How do you actually get that feedback? If I have certain ideas for things that I would like to see in Chrome def tools and say, hey, I think they can make the network app so much better if they do X, Like, how
do I send this feedback over to you or suggestions or whatever? Okay, so the most fait forward thing is open Chrome deft tools and there's this Hamburger menu. The three Dogs menu does help on this report the Depts issue that is going to open our issue track cand there you can submit the bug or feature requests and that is regularly we have SLOs to actually go over this list and actually trias. So it's not just issues, it's also suggestions and requests
and stuff like that. Yes, an issue is like either feature requests or a buck trish process should hopefully categorize them correctly because it also depends. For some users, feature request is actually the perceives of the buck, which is fine. Yeah, it takes some conversations. And when are you going to integrate AI? That's a good question. How would you see the debt tools
integrating a ideas? I was just joking, I mean everywhere, I'm just I know I'm just trying to think that how would you use I guess I could see some applications. I'm not sure. I mean, we obviously are talking with weblovers about how you're using EI like JGPT or Gemini and so on and so on for web development tasks, which is super interesting and it's but it's very new. Their results are very nuanced, and uh, I need a lot of understanding when the interpret the results. So what I'm saying with
that is it's not a magical silver bullet. And for example, you get a result back from your random EI assistant and it still need to be able to interpret what is coming back if this is actually correct or not, because if you can't do that, you're going to be you could be in a very bad spot. So the quality of responses is very it's actually very important.
Having said that, with all those new model updates that are coming in the Germany Gemini Ultra or be it open GPT with Russiah four, all of them are getting more powerful, of course because you can also proply more information to it and so on. But yeah, I understand judging the quality of the response is super important. That actually requires a certain level of experience from the user to judge that. So, yeah, there's potential, but it's
it's nuanced. Yeah. So on a most serious note though, you know, so, as I said, a lot of new features and capabilities being headed in, can you like give us an quick overview of let's say, like a couple of your recent favorite features that made it in that you're really happy that made it into the product. Okay, so that's going yeah, I know. Continue, No no, no, no, no, I'm just thinking how to start explain that. I think a year ago or something
like that, it might be longer. We started tracking down bugs in our how how we are treating breakpoints and if we are hitting breakpoints by debugging, which means sometimes brak points were not hit, and sometimes they were hit and then he reloaded, and then they were hit, but then you didn't reload and it weren't it and sometimes new brakepoints appeared and stuff like that. Yeah, I'm guessing basic Usually issues come up with like virtual like code, right
mhm. Yes, that's so we did go down that rabbit hole what's actually happening there? And it turned off? Of course, it was a number of issues, which is for example, a web applications might look the same when you reload, but you might not actually be the same under the hoods because code gets in check that or you might be running in a B test,
and so on and so on and so on. So if you set breakpoints in version A of the application, and now that breakpoint should move to somewhere else because the code when after reload this version B, and it's actually a little bit of different codes, the debugging back end actually needs to migrate
that breakpoint. And that's that's not super straightforward. So basically you're saying that in an ideal world, you'll be able to somehow magically identify that a particular piece of code has moved down a few lines or moved up a few lines and then moved the breakpoint along with it, instead of just hard coding into a particular line number in a in A in a file. Right, And there are herristics that help you there, of course, built into deft tools
and other debuggers. There's also technology like source maps that also again help you doing that. Yes, and you're saying who source maps, And I'm saying, yes, who maps. But it's the technology that we have, and there is actually no standard for that yet, which is going to change hopefully, which hopefully is going to then result in the more reliable usage of source maps. M right where was I? Yes, source maps whatever? I
know? Going back to breakpoints and how they so migration of breakpoints when you reload for example. Uh, then we found out, oh yeah, there are a few issues in there, so we fixed those, and then we found new issues, and then we started digging into well, what if you set a breakpoint but that breakpoint is an ignored code section, so we actually don't want to see that. Should it trigger? Should it not trigger? We had I think two camps of what in the team like, no,
we should be doing that, No, we should be doing that? Okay, can we answered that somehow with with a few wigs are like, oh yeah, yeah, let's do that. So we have in from deftors. We have a process called RBC Request for Commands, but we have a kid top repository and we are asking that community essentially, hey, we have this hard problem to solve. We know there's different solutions, please help us identify what they actually prefer in such cases. So we did that. Yeah,
A long story short of that. That is a perfect example of like Wow, the results were a little were split a little bit from preferences. So okay, what this means essentially is we need to make it configurable because there's no winner, right. So I found that particular endeavor quite interesting because like very technical, and it was like, oh my god, it's so complicated
to think through all of that. But honestly, that's not something that a lot of fear or that's something that a lot of people might be encountering but might be able to fix with a reload. But still under the hoods something else is happening. So hey, there, this is Charles max Wood.
I'm excited because I wanted to let you know about this thing that I pulled together that I had just I've been dying to have this for years and I never felt like I could, and then I just realized that there's no reason why I can't. So I'm putting together a book club and we're going to read development focused books, career books, you know, technical books, whatever. The first book that we're going to do is going to be Clean Architecture
by Uncle Bob Martin. If you're not familiar with clean Code or some of the other stuff that Bob has done, check that out. I've also talked to him on the Clean Coders podcast, which is on Top End Devs. But yeah, we're going to get on. He's going to show up to
some of our meetings. And what I'm thinking is we'll probably have like five or six people part of the conversation along with Bob and I at the same time, and we'll just so somebody can come on, they can ask their question, and then we'll just rotate people through, so we'll mute one person, unmute another person when it's their turn to come on and be part of the discussion. So we'll do that for like an hour hour and a half.
And then the other part of it that I'm putting together is just kind of a meet and greet gather area on Gathertown, And so after the meetup and the call, we we'll do as we'll all go over to gather Town and you can just log in, walk up to a group and have a conversation, and that way we can all kind of get to know each other
and make friends and get to know people across the world. One thing that I'm finding is that, yeah, the meetups are starting to come back, but a lot of people don't have the opportunity to go to a meetup and I really want to meet you guys and talk to you. So we're gonna put all that together. It'll all be part of that book club. You can go to topendevs dot com slash book Club to be part of it, and I'm looking forward to seeing you there. The first book club meeting will
be in December, the beginning of December. We're starting the first week of December, and you'll also be part of the conversation about which book we do next. I have one in mind, but I want to see where everybody's
at. So there you go. So I've been playing around and I've noticed recently, and I don't know how recently these have been added in, but we were talking about the YouTube channel of all the what's new in dev tools videos and you were talking about issues, and so if you bring up the dev tools over to the right, you'll notice, you know, if you have any console errors, it will give you a little red X that shows you know you've got one error a bazillion, which is my case sometimes,
and then you'll get another little icon with a triangle with an exclamation mark and looks like a quote balloon with an exclamation mark, and if you click on those brings up another little window, and this is really cool. One is labeled What's New, and it has the latest video right there in the depth
tools. And this as we're recording right now, the YouTube channel shows up through number one twenty and in the dept tools itself that has a video on number one twenty one and it lists a whole bunch of different issues like source map improvements, enhanced performance and so on. So right within the debt tool itself you can see what's the latest, and then there's an issues tab and
it looks like there's what current issues right now? For instance, there's one about a deprecated feature use reading a cookie and cross site context will be blocked in future Chrome versions. Setting cookie and cross site content will be blocked in future Chrome versions. So really cool way I guess to get instead of having to go hunt around, right there in the tools, you can get to the latest and see what ongoing issues are being addressed. Is that a fair
statement? Yes? So if you're talking about the issues pedal, then yes. The idea the division for that one is actually to be something like launch bed where you look at the issues pedal and then you can go through the list and fix the issues on the page. Because so that was introduced like a few years back, because we've seen a lot of cons hold spam.
Everybody was spamming the warnings and errors to the console. So that's the rep interface that you have in that the heaving theft tools also everybody's using and it
was simply spam with a lot of warnings and rows. So we moved certain a certain amount of those eras into something called an issue panel where you actually can instead of throwing errors, you can put spector information in there, as with the information Okay, you're facing this issue, that's what they should be doing, like also with the suggestion or a link to a web the depth
articles on. I really like this approach of trying to clean up like the like you said, it's kind of the console had to a certain extent, has become this kind of a grab bag of like everything, and a lot of organizations basically even started kind of ignoring it because there was just so much
stuff there. By the way, I'm old enough to remember that is when companies would actually like post jobs in there, so you would like going to a website, open the deaf tools and says if you can read that, then we would like for you to apply for a job at our company. I think that's kind of I don't see that happening very much anymore, but that was an interesting time. I sometimes see still see that. What I see more often is messages to end users, not developers, with the content
of you shouldn't be here if anybody told you to open up tools. You're looking at this thing closely right now. Yeah, I'm guessing yeah, for security reasons. They're worried about the phishing attacks or stuff like that. Yeah. Correct, that's why we also half a year ago off like that, we had a little bit of a of a ball or speed bump there were
with you are pasting in some code into the console. The first time, it's going to reply to you, Hey, you're not allowed to do that because for security reasons, essentially please type in I need to check I'm a developer of stuff like that, and then actually that feature wasn't able that you
can paste code into the console. Interesting, you mentioned the war. You mentioned source maps before, and indeed one of my biggest gripes like forever with effectively like every dev tools ever that I've ever used is how kind of problematic or how limited source maps are. Like they're better than nothing, for sure, but then not always by much. So you know, the lines never actually match up exactly, and when you're in the console, the names of
the variables don't match and and stuff like that. So it's it's a real pain sometimes to debugg code when when it's like you know, minified and whatnot, and even if you ship the source maps for it. And the reality is that I often do debug in production. So is there anything you can say about that? Uh, yes, I can say a lot about that. Let me structural ef thoughts a little bit about that summarizing. Yeah, that's what we also see, like when you're debugging something, either you're going
to have sorce maps, you're not going to have source maps. And let's go down with the route of you don't have source maps, the features like pretty print or local over rides are going to be very very useful for you, and it would be really useful to actually somehow and you can also attach them source maps afterwards to it and so on. But if you're using source
maps, you actually have them available. Getting that working correctly is really hard, and it really depends if your technology is deck can set it up correctly as default. It turns out that creating good source maps actually takes a lot of time when you're building. So that's why sometimes there are options like speedy or of creating fast creating source maps that are not one hundred percent correct.
And that's also again I talked about interesting breakpoint bucks that then result in very interesting breakpoints or debugging bucks when you're when you're resolving a variable for example, we also re encounter when we do using views we called a lot of uses. Uh, also running into those problems. Uh okay, but what what are we actually doing in order to improve the situation. One hand, we are working with TC for nine to stanardize source maps because you're not standardized.
Yeah, that's one of the That's one of the things that I kind of wanted to mention is that people don't realize that it's source maps are something that kind of like kind of like happened rather than being properly designed in you know, with like this really nice process and as I recalled, some guy just created them and we're more or less stuck with whatever he created, or something like that let's it's the story is probably a little bit more complicated than that,
but yeah, it's not standardized, and that's a problem of course. So standardization should, hopefully when it's actually stanardized, result in a more reliable usage of of source maps, and also for stakeholders, enable them to actually change the standard and add new features to it, because right now it's super hard for an entity, that for any entity to actually make changes to our additions to the source maps back except with the ex Google extensions and stuff like
that. You have a standard, there's actually a way to do that and orchestrated absolute So the bottom line, is there going to be like a solution for let's say using proper the correct variable names or the original variable names in the console for example. Yes, there could be a solution, and I think I need to check. So you're going to tell me that the solution is already there. So I'm eighty percent I think we did something into that
direction, or I know we did something in the re direction. I don't know how much of that already has shipped. Mm hmm. Yeah, we'll need to check. But yeah, also because again I think you also did some usage testing, was like oh, but I wouldn't would expect the opposite as it works. The problem then is that it's really difficult to if you're working with the source maps, then you see the original code, but the
variable in the console is the like minified variable. It's actually really difficult to find out what the benified variable name that matches what you see in the code is. So you're kind of like screwed both ways. It would have been easier to see the original code or because then at least you would have seen the correct variable names as it were, but you're like kind of stuck in
the middle. Right. It's a good segue into something we shipped last year, oh yeah, or one and a half years ago, which is called the offered and deployed mode. So in the source panel, if you can actually switch between the offered code, which is which is all with the source map code, and the deployed code, which is not which is completely ignoring source maps at all, it's showing you the thing that how it's actually importanless
How do you do that? There should be a button up there. If there's no button, then you need to enable it in the preferences under experiments exactly. Oh yeah, unther experiments in the settings group sources into offered and deployed trees, and with that you can actually switch between the two of them. Four exactly the reason you just out outlined, like, hey, actually you're debugging two worlds and you would want to switch, and that's a concept
we in the future. Sometimes in the future you want to explore a little bit more like can you switch between those store modes and what are the implications like variable resolution? Alternatively, maybe show a tool tip like if you're hovering on top of the of the variable in the minute, like you know in the source map, at least show the name of the minified variable or something like that. That might be useful as well. Okay, along the lines
of practicality, I'm all about practicality. What I'd like to do is, you know, there's I'm counting what eight or nine different tabs. The first four are probably speaking for me. The first four are the ones that I use the most, the elements, the console, the sources, and the network tabs. So what I'd like to do is sort of walk through those different tabs, different pages within the DEAV tools and just sort of go over what how you normally use them, and maybe if you can think of any
lesser known feature that you could think would be really useful. So, for instance, if we start with the elements, yeah right, the element elements basically shows your HTML markup and then if you click on for instance, if you click on an element over on the side, you can see the CSS that's applied and the layout have what are the computed styles? You know, how things are put together and so on. Okay, so let me also go with a with a bonus finger to what I'm quite quite often using is
our command so which means what they have to do code. For example, if you do shift, I think it's the option key on on on Mac and P you can actually shift command okay, fift command. Yeah, sorry, I have a combined keyboard. Here's a little it's hard to identify which of those machis it is, and that actually enables you to to run all the commands and death tools. That's what I'm using quite often if I want to look for something. Uh, And that is the segue into when I'm
talking about elements. What one feature that I find very useful and is emulate focus page. So essentially, if you are using deft tools, the page is actually losing the focus because they have to set the focus. But with that thing, you can and cannot let the page lose the focus, which is relevant for example, if you're debugging subsiding problems with over menus or something like that, it will disappear when the focus posy like drop down menus or
something like that. Yeah, right, but I think that one is actually in the rendering draw or not like that, whatever, But I find it very useful. And the other one in elements, that iyem wall is used regularly and then don't keep back very often in elements, I'm not that much
into stidin is break on making drawn break points. For example, if I want to know, oh, I wonder when that particular element is going to change, it's going to be created, I can set a breakpoint there, and then if a new are a sub item for example, is going to be added and filled into that particular element, the execution brakes and I know exactly what's happening there. Then Yeah. Unfortunately, that's a lot less useful
than it used to be with modern frameworks. I mean, you know, so it breaks in the middle of the React code somewhere, you know, what do you do now, but it was much more useful in the jae Query days. Let's put it this way, right, which is also a nice segu with another topic. So previously mentioned a little bit about ignoaledsts and stuff. So ignore you can use icknowledged to ignore files and stacks in your stack trace. What this means, for example, typically the inner workings of
the React frameworking. Typically you're not going to be interested in that. You're probably going to be more interested in the code that they actually wrote that they actually have influence and control of. So with ignowledged, you can let those things be ignored in stack traces and then everything else. So that's super useful. And now where did you how do you say that? Uh? That's
also in the settings. Yeah, I think in the So I think that in the sources channel when you see a stack you can actually right click, I think on an end in the second say I can ignore this. You can also do that, And they can also add foldos and files or use the settings dialogue in the DEFTO settings, or a framework might already pre populating the list because that lists, I think we addit this experimental source maps extension
or something like that. I need to check how it's actually implemented. And if the framework, like for example, Anglo is already supporting that, then you actually don't need to do anything. Then the wol frameworkord is not going to show up at all. Yeah. I just here's what I found. If you do the COMMANDSFP, you get quite an extensive list of different things
that you can do. There's one that should shows CSS overview. Oh yeah, that's a great panel, and you can see memory and shows all your background colors being used, text colors, contrasts, you can see in all their codes and what they look like, font info, media queries. Oh my gosh, just the colors and the overview summaries. I can think of many times I've been looking for like browser extensions to find this stuff, and it's already there. Okay, so let's move on to the console. So
probably you know Dan mentioned debugging by alerts. I think you know everybody knows how to do like alert something. You know, Oh, I hit my code here. Great, that tells me. I know there's a heck of
a lot more you can do with the console. And I have an article bookmark somewhere about all these different things you can do with the Console like Console error and Console I think you can do stack traces and there's just all kinds of crazy stuff that you can put out in the console that even you know, breakpoints are awesome, but they don't do everything until the console really helps shit see some stuff there. Anything else what can you think about the console?
Maybe some hidden gems in there. So what I find well in the console is using snippets okay essentially that it can run code that you have prepared for some tasks in there. What I really find find useful in console is the dollar sign zero two I think four, stuff like that which give you automatic access to the late the last select at HTML element. Yeah zero, you get access to the last select that element. That's very useful w if
you want to try on something. The one thing that I really love about the Console in their tools is that when you log out elements it behaves is if you copied something out of the element's view that you can actually like expand them and you can obviously you can right click on them and go to the elements itself, but you can also do a lot of stuff even like in the Console with elements is if you're in the elements panel which is which is
really which is really nice. And I also like the various dollar shortcuts. They're they're useful. And the one thing that I haven't found very useful maybe I'm just not using it right is the uh, the ability to watch expressions. I don't know, I've yet to find a really useful use case for that. One thing to watch out for the with the console is if you change if you put in a filter, or if you change the default levels, or if you go into an eye frame, then you might suddenly be
surprised why you're not seeing things that you expect to see. So so always be careful about what you put in the filter and remember to to take into account that you're filtered, potentially filtering out stuff that you may want to see. Yeah, that's true, Thank you for saying that. Yeah, the console is actually super powerful. Yeah. Life expressions. I find them useful when I want to have a life eberlation and life update when something happens on
a page. So if I'm running the console, for example, next to the page, and I lose some interactions on a page, then a live expression is going to change depending what the life expression is for example. But I don't need to go back to the console all the time to issue new command, but it seemed automatically updates. I do put watches like in the source panel, which kind of do similar things. I've yet to really find
the need for live expressions in the console. But like I said, you know, maybe it's it's not every user is going to use all the features. It's often mixed. The watch expressions are going a great same with breakpoints. Sometimes you will not be able to use them properly and pretty active bugging. It's gonna be more useful. Uh yeah. So live expression is that where a value changes as as the code is running, it changes right there on the console for you or yeah, you see, Steve. If you
go to the console tab, you will see the eye icon. Oh right, huh And if you click that, it opens up this new line where you can write in an expression. Oh okay, and that expression will update automatically as things change. Oh okay, So like a value of a variable maybe or yeah, for example anything. Really it's like a watch okay, yeah, the PHP de tools as in my ideas a watch KP thing.
Yeah. So it's like I said, like I said, you have in the sources panel you have something called watch which effectively does exactly the same thing. It's just okay, this is doing it in the console. Okay, yeah, console log, there's console errors. There's all kinds of stuff you can I like console table, which a lot of people are not familiar with.
Right does it prints out everything in a nice little neat table in internet if if, if your data is proper is appropriately like organized or configured, if it's effectively tabular data, then then the table that can be really useful. I also like using the some of the web performance APIs directly from the console, So things like performance get entries or get entries by by name or get entries by type are really powerful things to be able to do directly from
the console. Yeah. Yeah, I remember one time, Dan, you and I were talking about promises and going from the promises and stuff. You just sit there and worked in the console the entire time. You know, right, code said a variable, run this, run that, and everything was just right in the console. Yeah. I know that a lot of people like launch node in in in the terminal. I'm just I just opened
theF tools and go to the console. I'm that's I feel right it home there for a lot of these sorts of things, so a lot when I when I need one to play with code and like get immediate feedback, the console is often where I like to do it. But for example, one of the things is when. So for example, let's say we mentioned that one of the other tabs that, like Steve, that you said that you
talked about as being a really commonly used tab is the network tab. But the problem with the network tab is let's say I opened the page after the pages already loaded, so I kind of missed stuff. But I can use the the performance get entries or get entries by type to see network information about things that already happened even while even if the deaf tools was closed. So
that's really useful. So you're just going to the console, opening your line and type that in and it shows you Yeah, I do like, yeah, get entries by type resource and I can see the various resources that down downloaded. Now it's not as like visually pleasing to see as the as the network tab, but it's better than nothing. Sure, Yeah, I will try to find the article I used to have bookmarked or have bookmark somewhere that shows all the different things you can do in the console. It's it's really
amazing. You know, there's more than let's just say, there's a lot more than console lot. The one of the funny changes that you recent that was, well it's not recent anymore, but it was like this small thing and it was really helpful is that isn't really const the in the console anymore that you can redefine const. Yeah, I can recall that. It was such a great thing. It was such a useful thing. It was so
small. Ye, it's so useful because you would accidentally type cons something because you copied some line of code somewhere, and then you were kind of screwed because you couldn't change it anymore until you like reloaded the tab or something like that. And now you can effectively just redefine the const So that's really nice. All right, So let's move over to the sources tab. That's one of my one of my favorites that I use quite a bit. Now.
I do have one question Michael before we get started. And I don't know if if this is a bug or way things have changed, and maybe it has to do with the source maps discussion that you were talking about. I work mostly in view when it comes to the JavaScript on the front end. And it used to be pretty easy to be able to go to my documentary over on the left and find a file and open it, and that was
it. Now I have to use like a debugger line to find it right open the file because webpack has created so many different variations, you know, of a particular file, and it's not so easy just to you know, command P type my file name and open it. Is that something that's changes have to do with source maps? What? What do you know? What you understand what I'm talking about? Are you talking about files at the ending
with a hash? Yes? Well, yeah, that's what I see is when I go to open them and I can't find the one that actually is running my you know that has my code. So if I put a debugger line in there and run and then I'll hit that, Okay, that's the one that I want to put my brake points in and in or It's just it didn't used to be so difficult. So I'm not sure what's changed, if it's a combination of the view code, or if it's the deb tools
or or something. So it's so we I think we use ago when we started that we actually did have a look at the default experience from different from a different popular frameworks and how the debugging experience is out out of the box. Essentially. That was enlightening and very interesting, and we found bugs in Chrome deftols that we addressed, but we also found enhancements that frameworks can be doing in order to provide essentially better information or stuffing like that, so they
fault debugging experience is better. I think we also so I can recall that particulation, for example with the hashers because again same thing. Hey, now I hot monel load and kicked in, and now I have five files with the same name but different touches. Which one is the last one? I don't care about anything else anyway, and some fixes have been made. I
would need to check if if that effected View. I think it has, because then it also depends what we're about, version of you you're actually running, and so on. So a question about that, do you actually work with the framework makers directly, Like if let's say you say, hey, we think that the view could be doing something a bit differently in that that would really improve the integration, do you actually reach out to the view contributors
and you know, suggests a change to them. How does it work? Shortly answers that question, Yes, that's what we're doing. So we we obviously can't fix everything ourselves, be it because we don't have to know how, or we don't have the capacity, or we don't have control over the source code. So we need to work with partners like you, like React, like Angola and so on to get a better experience to our users. So yes, we're reaching out to them and ask them, hey, we
have seen that, can you at that? Or hey, we are really interested in making the experience for reacting this better. What are the topic issues did to see when they're debugging and how can we help there? And so on. Now, one of my favorite features in Chrome dev tools, and
it's part of the Sources panel, is the override aspect. For those of you don't know, overrides mean that you can effectively like edit the file and save a local copy of the edited file, so that then if you even if you reload the page, it will really it will use your your edited changes. And it's a really cool way of trying out a fix without having to redeploy a new version. Of course, there are problems with it.
I mean, butlers get in the way. If your code is bundled, then then then editing it can be you know, editing let's say, editing the minified bundle code is a lot less fun. It's it's it's doable, and I've done it, but but it's a lot less fun. And so so that's one option. I've even done like crazy things like uh, copy the non minified version and paste it over the entire file and then edit that and save it into the overrides. But but when you can get them to
work, overrides are immensely powerful feature. One thing that I would have liked, which is kind of similar to overrides, would have been the ability to redirect, say, like you know, instead of download the file from this r L, like like behaviors if you're downloading the file from this RL, but actually download it from a different URL, like what you might get with with certain local proxies. Right, Okay, so yes, all right is
a great feature. Network over rights and local over rights. And we also did actually spend a few cycles to improve it, and of last year, I think, oh yeah, the timing, the load timing, I think you improved that. It that it behaves as if it's not local but downloads over the net from the network. Yeah, and also we also did some
UI changes with local overrights. I think because it was hard. It's a super useful feature, super hard, super hard to find if you don't know where we're looking or if or you might find if if somebody else that's already known about it is going to tell you about that, which is are you Are you familiar with it? By the way, Steve with the overrides feature,
No, I haven't used it before. I've seen something similar. I remember Chris Koyer a few years ago from CSS Tricks and codepen and shop Talk show did a video about, uh, making your CSS local so you can change it and tweak it, you know, if you're working like a remote site and you can tweak it actually locally, which is I thought was awesome. This sounds familiar. Although the question I have for you, Dan is
how is using the overrides panel within the dev tools different? Say, if I'm working locally right and I'm editing code and my ID and I changed that and you know how it happens, what's the difference. Obviously if you can if you have hot reload with actual debugging, local debugging, that's the better option. Okay, let's say you've got it already shipped in production. Let's say and you're thinking, hey, you know, yeah, I think we
could do X better if we do this instead of that. But you know, you you don't want to be instead of you know, firing up the development environment and starting and doing like that. Way, you just opened open it up to the override. I didn't test and effectively test your change in
production. Oh yeah, oh that's nice. And for example, I did a workshop like once I remember, and instead of having people like install a whole development environment, I created the website with would like themo code and and we basically work together by overriding it with more and more sophisticated versions. So they actually used Chrome dev tools as their development environment creating overrides. And the
the sibling of all right is the workspace feature. So if you actually have access to the source code and you want to keep on hacking in the tools because you want to make small changes and stuff like that, you can use workspace to actually hook up to to a file system and make a link to your actual source code. That's really so that's really about using the depv tools effectively as your development environment effectively. So what is it doing is creating a
local copy within the browser there and then your tweaking. No, No, it's really mapping to your actual code. Think about instead of using vis code for your coding, using Chrome dev tools for your coding. Yeah, okay, so if I if I add a folder, I'm adding it so I can do that on my prod site, you know, my whatever dot com. And it's actually connecting with that code that's bundled code that's running on my server. Well, that's if your server is local or or or accessible as
via the file system. Okay, so then, but you were talking about running using the Chrome dev tools like as your workspace against check against pride. How does how does that work? I guess that's what I'm trying. Is that what you're talking about? You know? So we're saying that there are two different features which are related. One is a feature called overrides, and
the other, the feature called workspace. Workspace is about mapping your actual development workspace into dev tools so that when you make changes, you're actually making changes in your original code files. Override is a feature that lets you override the file if the original the file coming from the server remains the same, but you're creating like a local copy that the browser uses instead. Gotch nice, Yes, okay, that makes that makes a lot of sense. I mean
I can. The classic case that comes to mind is, hey, it works on local but why is it not working on products? You know, like if you, for example, a debugging if you are offering library for example, and the buck whits not working on a client site, you will not have access to the client's most code, but you still need to debuggets so it all writes. You can actually try it fixes stuff like that. In the production environment, it's very useful. Protect that's cool, Okay,
learn something new every day, all right. Now. The other thing that I want to talk about in this dev tools environment we're on running out of time here is breakpoints, just because they are so incredibly useful the ways I use them, and I am sure I don't come close to maximum out is the way they could be in it, and they work pretty much the same as they do in my PHP. Ide is one, you know, obviously, just to stop code and see what's the value of certain variables at a
certain point. You know, if you're in a loop, you're in a function whatever. That's probably the most useful thing sometimes, but I know there's other things where you can edit the break points and set conditions. You know, whether it's okay, only hit this breakpoint, if this variable has a specific value because you're inside of a monster loop and you don't want to stop every single time, or you can and you know it's temporary, disable it
instead of removing it. You know, there's all kinds of conditions. If you write click on a breakpoint, edit it. You can see all the different options. But it's a lot more useful than just click it. Okay, it's going to stop every time it runs here A yeah, Conditional breakpoints are very useful. There's also the option of log points, which is it's also it's instead of breaking it, just logs something to the console. You could do it in the old days by just creating a condition with a console
log in it. But I guess that a lot of people just didn't think about that trick. So so yeah, but so, but it's useful because something you just want to, like, you thinking, it would have been really useful if I had this log statement, but I don't have it in the code. So I'll just add it as as as a log option or if you're doing product bugging again where it can't change the source code except if you're all writing. But that doesn't might not some reason not working. So
you can do a lock point and it's like a printer. Or you can actually can you actually even change local variables in in kind of like this slog point, like effectively add some logic in a log point. Yeah, you can add an expression in there. I think it needs to be a side effect free or something like that, or I might be mixing it up, but you can add an expression. Hm hmm. That's interesting. One more thing that it's worth while mentioning about breakpoints is that sometimes you have like a
complex line with multiple instructions on it. If you put a brake point, you will actually see that there are small arrows inside the line itself and you can actually turn on and off breakpoints in side the line. Yep, welcome to Challas, crist Well, that's that's that was that's true even from the
sea days. You know, I know, I know, But why is it super It gets super interesting is when you have minimizers at work in bundlers, everything gets cramped together into one line to squeeze out as many bites as
possible. Yeah, that's that's kind of why I think the AGG is now trying to get us all to just uh work in the original source code without minifiers and and basically rely on on the compression and and not on the manification uh for to to you know, and and there's a lot of truth in that in a lot of ways, but you know, he he's trying to take it even a step further and trying to convince us not to use bundlers. And we're not We're not there yet. I all right, So finally
we want to go to the talk about the network tab. And there's a lot you can see on your network tab in terms of basically all the community, all the files that are being downloaded as a XHR requests that are being made. Uh, there's all kinds of information. My primary use of them, where I'm dealing with a you know, a front end framework that's communicating over APIs to a back end, is to see, Okay, what calls were made, what was the payload, what was the response? Was it
an error code? Was it you know, era within the return JSON or the return you know whatever the response is, et cetera. So that's my primary use I usually have. For instance, you can filter all the different items that are written to the to the console log log I usually have my betch slacks slash x hr button enabled to so I can just see the traffic going back and forth. But you can see CSS files that are downloaded, JS files, font images, et cetera. You know sizes, how long
they took and so on. So that's and then you even have filter capabilities, so if you have a huge console, you can just type in and filter and you know, pretty standard stuff. What other stuff is can you do in the network tab that I haven't touched on? So? What I see that severally utilized and also controversial if most people are setting it all off, is disabled cash for example, Yes, so you see people running quite often either having it enabled, so cash is obviously disabled or disabled. And
yeah, why is this useful? That's useful if you want to debug and code load of a website for example, oil, if you're interested in performance debugging where you want to replicate similar citation and so on. In particular performance cases, disabled cash is quite quite often heavily used. Just a comment on that as somebody who's really into performance, it's important to understand that while disabling cash is the easiest way to simulate the first load, it's not really the
same because in the first load you're starting with an empty cash. That's true, but cash is not disabled. So if you have things like prefetches and preloads, disabled cash kind of kills them, whereas in the normal flow of things they do work. So disabled cash, like I said, is nice, is the easiest way to simulate the first load, but it's not the same as the first load. If you want to do that, you probably want to do like open your like create a special profile, or even use
the incognito or whatever that would be potentially better simulation. Yes, that's true. It's for use is often about economics because like we're when to get DP
two percent there find enough. Similarly, also going into with the with demolation of the different network conditions, that's also very often being used, like the throttling feature for example, if you see the throttling feature, yeah, okay, right, So in other words, as I understand it, that's you know, if you're working on a you know, a hundred gig BET connection on a very fast computer. You're gonna think, hey, everything is great.
But then if someone gets out there, you know, in a remote location where they have three G or you know, something really slow, you're not going to be able to see what those effects are. And so what this allows you to do is stallow down your connection so that you can emulate as best possible a much slower connection to see how your code loads and performs. Right, but keep in mind that's only emulation, and as then already said, it's the same we disabled cash. That's only emulating. It's not
one of percent how it actually would be. But it's close enough for at least to debut such cases and to understand what's actually happening and how see how slow your webpage, for example, woodload on a free cheat connection. All right, it's the best. Well, any emulation is never going to be perfect, so I think that goes without saying, but it can certainly get you a lot closer. One configuration that I often like to change when I'm
using the network tab is I actually prefer color coded resources. So the bars in the in the waterfall part of the network actually, like you know, they show you they're like the green for the time to first BITE and then
the blue for the actual BITE downloads. But instead you can go to the general settings and in the network section you can change to color coded UH, to color code the resources UH. And if you do that, then instead of all the resources being shown in in like you know, green and blue, you'll actually see the JavaScript in yellow, and the fonts in red, and CSS in purple, and HGML in in like blue. And it's much easier to identify various different resources this way. So that's sort of the only
downside of that. And and I've complete I've complained to you guys Michael about it, is that when you do that, you don't actually see the DNS times and the and the DCP handshake times, so you kind of either you either see this or you see that you can't see them together, which is kind of unfortunate. In an ideal world, I would like to you have it color coded and still be able to see the DCP time in the DNS time. Right. Have you created an issue for that? I think I
did, Okay, like a long time ago. Okay, I need to check. That's interesting. One another thing that might also be useful, in particular for Foma's debugging is also if you capture screenshots. Similar to the performance the performance panel typically works with it's capturing screenshots and show you how the page actually looks at a certain certain point in time. You can also do the same thing for the network on a network count that it capture speen shots,
which helps if you want to understand holiday pitches actually be surely looting. So if I go to the performance tab, I see the screenshots checkbox. You said it's on the network tab as well. Yeah, it's back on the top right has the ski I can You can click on that and then you will get some additional settings. Okay, more tools? Oh yes, recorder rendering. Okay, yes, I see those three little dots there, and
there are more tools. It's quite a long list of more tools. We could probably spend a few hours going over all these tools, that's for sure, but we don't have a few hours, so we're going to wrap it up for here and move on to picks. Thank you forcoming. This is one of my favorite topics to discuss, and the more you understand the debugging tools you have, the better you can do it writ in your code or
in Dan's favorite subject, you can make it more performant. We didn't even get to the various performance tabs, like there are like three or four different types just for performance. We didn't even talk about them. Right, we might have have to have Michael back to cover more of this stuff, for sure, we do have. We'll put this in the show notes. The link to the list of YouTube videos on what's new and dev tools. I have found something to take up a large part of my afternoon for a while
to catch up on these videos. For sure? Who is that that's doing it? Looks like the same person, yes, Essa, a DEFL person that's mainly doing them. I think you're seaming up then with Cliza for but it's mainly chessling. Okay. Have you ever wished that you had a group of people that were just as passionate about writing code as you are? I know I did. I did that for most of my career. I'd go to the meetups, I try and create other opportunities, and it was just
really hard. Right the meetups. I got some of that, but they were only like once or twice a month, and it was just really hard to find that group of people that I connected with and really wanted to talk about code a lot, right, I mean, I love writing code. I think it's the best. And so I've decided to create this community and create a worldwide community that we can all jump in and do it. So
we're going to have two workshops every week. One of those or two of those every month, are going to be Q and A calls right where you can get on you can ask me or me and another expert questions. The rest of them are going to be focused on different aspects of career or programming or things like that. Right, So it'll go anywhere from like deployments and containers all the way up to managing your four oh one K and negotiating your benefits package. Well, we'll cover all of it, okay. And then
we're also going to have meetups every month for your particular technology area. So we have shows about JavaScript, react, angular view and so on. We're going to have meetups for all of those things. I'm going to revive the freelancer show. We'll have one about that, right, so you can get started freelancing or continue freelancing if that's where you're at. And I'm working on finding authors who can actually do weekly video tutorials on some thing for ten minutes.
That's related again to those technology areas so that you can stay current, keep growing. So if you're interested, go to topendevs dot com slash sign up and you can get in right now for thirty nine dollars. When we're done, that price is going to go up to seventy five dollars, and the thirty nine dollars price gets you access to two calls per week. The full price at one hundred and fifty dollars, which is going to be seventy
five dollars over the next few weeks. That price is going to get you access to all of the calls and all of the tutorials and everything else that we put out from top endevs, along with member pricing for our remote conferences that are coming up next year. So go check it out topendevs dot com slash sign up. All righty, So that we'll move on to Picks, the part of the show where we get to talk about something other than code, or we can talk about code if we want. All depends Dan,
What do you got for us? Well, not not a lot this time, so I'll refrain from talking about the various wars that are going on in Ukraine and Israel, because it's just too unfortunate and sad and I don't feel like it. So instead I'll mention a nice TV show that I'm kind of enjoying, which is called Killing Eve. It's on Netflix. Sounds very fuzzy. Yeah, it's about this. It's like a woman led TV show.
So the two, like I would, the main figures there. One is this kind of wackle hit person for some clandestine organization it's unclear for whom, and she's like she's basically a psychopath, but they're taking advantage of that and using her as a as a hit person. And then there's them I six agent who's trying to hunt her, which is the other lead figure, female figure in the show. Uh and uh, it's it's really interesting and I'm and I'm you know, it's not an amazing TV show, but it's a
really enjoyable one and I'm liking it awesome. So those would be my pick for today, and unfortunately I actually have to drop off. So Michael, I really enjoyed our conversation today and and hopefully we can have you on the show again to talk about more Chrome Deftools features, because I think we talked about less than half the panels, so there are I think it was. Yeah, we didn't even again and we didn't even get to the drawer at
the bottom and all the options that are there. So you know, there's a lot more to talk about. So guys, thank you for having me and Michael, thank you for coming on, and I'll see you next time.
Thank you. All right, So my turn before I get to the high point of every episode, which are the dad jokes, I do have one pick one of the ways I do my working out exercises with CrossFit, And no, I'm not one of those CrossFit people that always has to blob about me doing CrossFit, but uh, there's just one piece of equipment that I have started using recently that has been a lifesaver rather handsaver. So part of CrossFit is doing a lot on a bar. So there's like pull ups,
bar muscle ups, toes to bar, that kind of stuff. It can bars can really, really, really really tear up your hands. I've had that happen a few times. And so there's a company called Victory Grips. They make these grips that are various kinds. The ones I use are these leather ones, and what they do is they strap around your wrist and then it only has material right there in the palm of your hand. It's
not like a glove or something that goes over your hand. And so then what you can do is you can just use them while you're holding onto the bar and doing whatever you're doing, and then you can spin them around so they get out of the way for you know, whatever else you're doing that you don't want them in the way, and you put them back in place.
But they give you a really good grip. A lot of bars tend to be really slick, and it's really hard to do those kinds of workouts when you're trying to do a pull up by your hands slipping, so you're trying to get a grip half the time and wasting half your energy. So but they're at Victory grips dot com and they got some really great things. Even with them on, I've sort of torn up my hands a little time, but far less than if I didn't use the grips at all. And
then finally the dad jokes of the week. So I went out to dinner recently and the server said to me, you know, there was refill your glass with water, and they said, I see your glasses empty, store, would you like another one? And I said, why would I want to empty glasses? Right as compared to a full one question? So why did the vulture get kicked off of the airplane? People kept complaining about his carry on luggage c ar r io n for those who don't get it.
And then finally this one. I saw this. As soon as I saw this topic, I got this one is just perfect. So I went to my boss and I said, what web browser do you use? He said, I use Chrome. I said, why does everybody on the team say you're always on edge? Oh my god, very good, Very good. I figured that was appropriate for today. All right, So that's all I have, Michael, do you have any picks for us? Okay? So I like playing board games and I think I have one favorite game, which
is called Spirit Island. So imagine, instead of you colonizing an island and then building a nice city there, imagine you are actually playing the island and you are not very eager of being colonized, So you're playing spirits on that island that tries to defy the invaders, which is a great cooperative super complex bod King. Uh, my wife and I really enjoy playing together. So you're playing so the other players, you're playing as a team as compared to
playing against yourself against each other. Correct, right, So you try to define invaders and they're all us so and they have different spirits with different powers and so on, with different complexity. And it almost wanted to like it would be cool if you would play something like Gozillo or something like that, like wandering over the over the island and then simply trembling everything. And like a few months ago, actually you released an expansion and yeah, essentially Gozilla
and yeah it is a turtle, but it's like Cosilla. It really feels that way, like you are trembling over religious and destroy them because that's what Goodsay is doing. Yeah, I was like, you really really liked that Spirit Island. That's something. Yeah, I've seen some other games. There's another game I played and I forget what it's called, where it's like the island is sinking and you're trying to get off of it. It's another team game. I have a neighbor who plays a lot of these types of games,
so I have to ask them about this one. But yeah, Board Game Week. I'm not sure what the rating is, but there's a page there for sure. Excellent. All right, Michael, Well, thank you for coming on. It sounds like we do need to have you back to talk about more of the dev tools, considering, at least for myself, they're sort of an integral part of web development, I think, so love to all right, thank you, and we will talk to everybody next time on JavaScript Jabber Audios.