Debugging & Troubleshooting in Web Development: Live Guide

Key Takeaways

[Music] hey everyone hello wonderful viewers yes live and in the future got confused then I noticed that in the past yeah I know people in the past haven't watched this well people in the future will abortion this that's what I mean yeah hopefully anyway wonderful to have you all here hey everyone for today's debugging live stream yes almost Friday yeah more or less so watch the stream today so tomorrow you'll fix all your bugs yeah wrap it up before the weekend yeah um if you don't know us yes we come from a site where you can learn to code that's right yes we have an array pun intended of different courses you can select from the topics here and uh our brand new topic artificial intelligence yes currently has two courses another one dropping possibly next week or the week after yeah very exciting indeed um anyone else hearing an echo have you got us open in more than one place this does happen sometimes let us know and if the rest of you can hear it then nope it says Chandra it's clear and audible okay so it could be that we're open some people watch us um so um today we are talking about debugging and troubleshooting and I've joined Bye Michael works at scrimber but is also a senior developer with many years experience debugging and troubleshooting no doubt more years of experience than hands than fingers on one hand yeah not bad can you give us a brief intro then as to what debugging and troubleshooting are and evolved what we will be talking about today basically sure uh usually debugging refers to uh trying to eliminate um incorrect a logic branches in your code so usually if your program does what it's not supposed to do or it does not what it is supposed to do um that's referred to it as a bug and basically uh the process of debugging is trying to find why exactly it happens and then trying to find a way how to remedied or eliminate it or uh both or neither I'm just saying well actually that's uh that's an intended usage and uh yeah it's not a feature it's a bug kind of uh attitude yep well sorry it's not about it's a feature is there a difference between that and troubleshooting then so troubleshooting uh if I'm troubleshooting just refers to as like the process of trying to use the error who reproduce the book uh so you'll just go in down the path trying to let user tells you XYZ doesn't work and uh you who's a little bit more familiar with the system you know you know that you know there are hundreds of ways why it can possibly not work so you're trying to replicate the process by how they found the same issue so troubleshooting could be solving a problem on the user's end which might be a bug but it also might be more of a ux issue where it's not really breaking anything but it's also not working in the way that the user ends up expecting yeah uh it could be because for example you have implemented a applicable feature but for example relies on cookies but your user has an ad block that blocks all those cookies and then they tell you this feature doesn't work so you telling the users that their ad blog is potentially blocking those functionality from working unintentionally is kind of troubleshooting so you're effectively trying to remember do that and say like maybe you should suspend Adblock on this website because we're relying on this functionality to work and so basically you have been troubleshooting the problem but that is not a bug in your system it could also be that the user ends up doing something that you didn't expect but if that's what they need to do then kind of makes sense to build that could be yeah uh again you know humans are very inventive and uh amazing as uh finding and using ways uh you know it's like that picture of somebody like inventing a class and then uh in that comic strip uh somebody like tries to drink out our glass from the bottom of it um yeah it could be that or it could be that the users just find uh much more interesting ways to use your product than you originally intend to so if that sometimes gonna happen as well yes and what you find intuitive being intuitive to the rest of the population exactly that's an update yeah it goes uh the same the I think there is a very good blog post uh called uh wrong assumptions made by programmers about names uh if you just Google it and then it will list like maybe possibly like hundreds of different uh versions of things that seem to be uh oh yeah it's called falsehoods programmers believe about names uh so we can probably share it on the screen here it is yeah and uh there is yeah there are a lot of different options uh so this is like usernames yeah usernames and stuff like that so for example you know when user when you come up with a form field for first name and last name yeah and people make assumptions uh you know maybe like oh uh there is no way that their first name will be they have two first mates or they have no last name that kind of stuff or like for example yeah number 16 people's names are not written in and they are they are that's not true yeah oh yeah this old one people's names fit within a defined amount of space so we're in the UK passport form my name almost doesn't fit my full name and it's not extraordinarily long there you go but I find myself getting nervous when I fill in the box so yeah wow and uh you know pretty much everything uh number 40 people have names yeah that's true some cultures don't have surnames um so there you go uh and it basically stems to pretty much everything you go so the process of trying to verify if your assumptions is kind of also a person or troubleshooting yeah absolutely um so thank you all for coming along to this we'll get on a bit more detail about debugging shortly if you have a debugging question please feel free to pop it into the chat that's why we do these things live yeah if not feel free to just say hello don't have to pop up in the chat um question here from Ankit will you guys also explain redox devtools and react Dev tools um probably not in this stream but maybe eventually we can have a look into it uh I think relax devtools is definitely a little bit more esoteric nowadays uh by reactive tools yeah pretty useful you might have a dream about that as well I don't think that this particular screen focuses like on devtools specifically but I think as a useful advice in general if you you know like where do you start debugging and most people you know when you learn how to code uh people have been teaching you that oh you can print whatever you have you can print it in the console and then see you know there's some something and then people just take that and they print a variable that they're not quite sure about or they print an object but they're not quite sure about and then they just kind of there's very rudimentary console login approach uh can get you very far and uh you can go really really far in your career with just console logging stuff in the console um yeah it's uh and quite often it's one of the most efficient or quickest way to do it um so yeah quite possible because there's a butt coming well the bat is coming um but I would say like for example if you have um like all products have logging uh as metrics in their system so you have a lot of different logs and usually people categorize them in different variations but for example if you have some bug in production it's not uncommon to switch on a different mode that will have more detailed logs and you're literally just reading pages and pages of console logs but they're just very structured they're very detailed uh so you know a much more advanced version of the same approach is a legitimate way of debugging or troubleshooting an issue uh but as I said you know when you're doing it in your development mode or when you are writing code on your local machine or something you can probably try to take advantage of more advanced tooling and whatever language you use or whatever framework you use it's always useful to research what is that tooling around the ecosystem that you have so if you're using redox yeah look into read those tools if you're using the react definitely install react Dev tools and have a look at uh you know how this is that vs code for debugging and uh stuff like that but we'll probably cover a couple of topics uh go further in as well so just to touch back on and kids question then so my understanding most people's understanding of devtools is you do the old f2f12 here are devtools is there some kind of separate react Dev tools how do you use them so uh you can install um you go to yeah the tools so there's a separate program extension not really yeah you can actually go there is also a page about reactive tools so it basically takes you through how to install it I'll just drop a link in the chat so it tells you how to install it for your browser but effectively it becomes like a separate uh in your server plugin in your plugin box well it's called toolbox extension sorry yeah so yeah it basically pops into their extension and when you land on the react website uh it will kind of flag with a reactor icon normally it's gray but when you land on the Rack website it will light up with blue and tell you oh this is a rare website you can actually go in and it's really uh almost the same as normal Dev tools but with a bit more reactive specific stuff so you can for example choose instead of uh I'm pretty sure that react s.dev it's written in react right but when you go in imagine if it's not oh yeah well that's the next next year so yeah and you can see that there is like a lot of divs and uh oh look at that support Ukraine yeah so there is already a lot of divs and stuff so that's already you can't see any components right uh but if you go using reactive tools you will be able to see components how it's compiled as in react okay in your code uh and yeah then you know you can install it open it in your uh in your terminal that kind of stuff so highly recommend just learning how to use tooling around what you're using so do all Frameworks have their own Dev tools then like you or uh I would imagine that most Frameworks have some kind of tooling you have the exact shape and form of it can vary uh but yeah most most places do yeah I've learned something already thank you for the interesting question there and Pete don't forget as well to draw up into the chat where you're tuning in from today always interesting to see we're in Wales if you're interested yes so um moving on common web development errors tell us about that I would say that the errors could go into a couple of like common mistakes that people make while coding and then call in for example security errors that people do uh security errors well that sounds serious yeah so with a common coding errors it's uh usually you know you're like for example you're trying to control Logan object and it gives you uh you know it gives you a boiling and then it says object object oh that one you know that's kind of a common uh when you're trying to debug something uh that's the most common error and then you have to basically have it to go into console log and Json stringify your object because then you learn that actually object is representing JavaScript you have to convert it into a string first to then console login or you learn about console.dir I don't know I'll call you console dear but I don't actually know if that's right or not uh but yeah and that will output uh the actual objects into your console uh oh really so if you say object objects and you do console there on it then you'll see what you will see the actual object well there you go uh yeah uh there is uh console methods and JavaScript um yeah because you know if you're using calls to log then you might as well supercharge your Contour Logs with something um yeah because people use console log for everything but there's a whole range of different things you can do let's take a look yeah can't sold up clear that's a good one because you know when you've console on 20 things and then it just becomes overwhelming yeah you can wipe it yeah console debug upwards message to the web console at the debatalog level uh but debug is like there are multiple log levels so it actually starts with Debo the log then one and then error and what's the what does that really mean in terms of being a developer and seeing them so if you're a developer you might want to um when you create how your program operates you can just like for example sprinkle console debugs all over everywhere and then you say console log for a bit more important things uh you give warnings for you know quite quite important things and errors for error situations so guys for example you can then set your log level and if you want then by default you will only see warnings and errors and then you can drop down a login level if you want to go deeper into what's happening in your program and then you can go even deeper if you just drop it down to debug it's a very common approach to production applications as well right so this is the kind of markers that you as a developer can use so you don't have to see absolutely everything in your console all the time if you don't want to exactly you said you can have these statements all over the place but they will not show on like you know you're filtering let's say if you say it only show me warnings and errors you will not see console logs or console debugs so how do you then filter in your console which ones you actually see uh I think you can basically said the log level but I don't remember how to do it exactly with console log how to set a large level so you should see uh there is info as well so yeah have a have a Google ad um yeah basically how to set login levels for uh log debug that kind of stuff and then take a little bit more about that interesting console info yeah and it's uh so debug info log um one error would you be fair most of the time when you are using it in your like react app or your JavaScript when you're just learning HTML CSS JavaScript labs you know it's people write console log for normal stuff in cultural errors so you get a pretty red letters does it is that very natively or yeah really yeah so uh if I go to so if you say uh handy yeah if you have written a lot of different ones you can then you know just differentiate them with color okay yeah good time cool um question here from Rob what vs code extensions would you recommend okay okay oh so uh I would say that depends on testing Frameworks you have and also for vs code I would just go straight to where this code how to use breakpoints and HTML CSS chaos wow Josh read our mind there not sure how or if this is related but what are break points exactly so um you know at console logs are all good but what you want to do is effectively then use your Editor to help you debug the stuff so you run the program and then when you run the program it's basically run the speed runs through everything and then it prints out your console logs and then you look into that console of trying to replicate the journey they the program took um because it might not be from the top of the script to the bottom you mean yeah it could be it could be from anyway it could be like you you make like an if statement and then it jumps into another function and into another file and it goes somewhere else so you don't you have to trace back where it goes especially if you're doing it in react I guess yeah but what you want to do is to be able to follow the program as it goes through its steps so you kind of take on the journey with it you know you run through the code at the same time rather than retracing what happened yeah so that's what breakpoints effectively allow you to do you write your program then you go into well like in vs code you will then place like a little red marker on on a side of the line uh let me in screen so you can actually just you know how to set up vs code or if you're using another text then just say how to use breakpoints with considering that most people use vs code again I would recommend doing that so you put your red blobs in so you put your uh yeah you put your red blob in uh I'll just reject the cooking anyway so you put your red blood in so by the line over there and then if you set up uh the whole debugger extension so depending on the language they use and depending on what you're trying to go for if that is all set up correctly you then launch your program it runs when it hits that line in code it stops for you and it will give you this like little menu where you can basically say uh pause the programs go to the next line or like jump into a function or restart the program again so if you have uh it should have this run in debug viewing vs code and then you'll basically just go through uh vs code settings and extensions so there is this quite a bit page for the settings that you have to install how to use it and stuff like that and I think also there is like vs code for web I know sorry that's another one so yeah just debugging and then a very interesting point would be on the left hand side so in your editor there is like gif so it goes for the program it will go through and then it will stop for you so in data inspection so on this left hand side in variables you will then have a look at something like different arguments that are currently in your code so you will be able to actually inspect all the variables that are currently in scope what they look like you know how they change and all of that will you won't actually have to console a lot of my stuff because you'll just be present in your editor right there pounding I know it's quite amazing and then you know if you you just follow the steps and you jump through the code and then you just use that Depot to go for it and I think that's what most people refer to as a debugger it's basically this like uh ability for you of your text editor to go through breakpoints kind of sounds like an sort of automatic console logger it is more yeah but the the general starting point for understanding yeah uh yeah and basically you can then easily replace those variables in in the scope you can for example in that window for your variables you can meditate them you can change them see what happens uh and stuff like that so definitely learn how to use breakpoints in your favorite text editor quick hello to everyone who's just joined us including all right yes thank you all for coming don't forget to let us know where you're tuning in from and um yeah any debugging and or troubleshooting questions go back to Rob's question then so we've had the break points yes any other extensions we need to know about what I would say then apart from I think this extension this debugging extension now comes defaulting with this code I know uh but I would then just say vs code for example you would just use react uh and then usually you should have a visual studio dog it will give you how to create for example in react itself uh debug and react there you go and then there will be a section that will explain to you how to set up breakpoint and how to configure the debugger see so you will have to have this kind of configuration where you will have to include a name but I think the more important part is like the URL that your react application is running on locally so then you can break point but don't forget that if you set the breakpoint and why not hit this breakpoint instantaneously when you're running your application because for example if it's deep into your components tree you will need to execute that functionality so the code flow gets to that breakpoint right right so if it's too deep you will you just need to keep in mind that maybe you haven't executed code so your breakpoint hasn't hit yet so you have to execute that flow so it hits and then there's the same approach you will basically see all of these different variables that you'll be able to inspect and update if you need it and do whatever you need to do to find out what's going on with your app and this config you showed us for snow where do you put that so so it goes into launch.json file and it's um I think it lives in uh vs code folder so but if I just go to the happiest code on you yes I open this code in the root of your project there will be well that's something else link this code she was coming on number but maybe we can show this up oh okay there we are there we are empty I think we need to oh look you have it on the right side yeah well uh that config uh it will have here they can't see it real move um present yeah um entire screen oh yeah cool so when you open the uh the file it will hear it will show all configurations for example and then you will be able to uh uh yeah like run and debug web app Chrome and then you should show you like settings and stuff how to add some of it but generally in the root of your folder there will be a DOT vs code folder and in there you can easily create launch.json not bad thank you I mean that took a while to show something very straightforward but we got there in the end anyway yes um moving on error reporting and log files um you put this one on the list Michael so I hope you can clarify right actually yes because I can't Okay cool so error reporting is usually um when your application goes to production you don't really have console logs in it so what you need to do well at least say that but well yeah you can sometimes forget console logs in your application and then they continue happening which yeah can happen but what you essentially need to do is occasionally you need some Tool uh and usually there are tools like for example Sentry and there are plenty more other useful ones that you can have um again we're not sponsored but if Century wants to sponsor us I wouldn't say no sponsorships that's not a really well addressed yeah but uh for example basically what this tool does is uh you you can set up any application that you want let's say react you just walk through how to set it all up um and essentially what happens is like if something goes on with your app you'll be able to go to their dashboard to have a look at some errors that happen so for example your react app has a server connection that when the user goes to it for some reason the link was broken and it reports a 404. so send free will collect that information and then it will notify you saying hi this user who will be obviously anonymized this stuff but it will say like a user tried to access this address and it gave him a 404 and then for example or this user gear tried to access this but for some reason the request returned 400. uh is this okay uh is this supposed to happen so you will instead of waiting for your users to email you and say hi this stuff doesn't work you will effectively be able to spot it much sooner saying like oh I just deployed this stuff and a lot of users get 404s so something must be up and you're basically try to fix it before anyone tries to the complaint which obviously is a way for you it is a win but I mean on the one hand it's kind of good if people complaining because you know something's wrong but most of the time people probably won't complain exactly if something doesn't work they just say uh you know your product is crap it doesn't work off I go somewhere else yeah which is far worse whereas using this would prevent that yeah and for example mitigate that what you can do as if you're thinking like as a learner realisticate why we don't wanna so you can probably try this on after like a free tier of uh well it doesn't really matter which tool Century or any other tool you can try to find error reporting tools and then for example try to integrate it with your portfolio and then see what happens you know if a potential employer lands on your portfolio uh and then you get an error saying like they try to see this but it didn't work uh and then you can maybe try to reach out to people and say hi uh you might have looked at uh looked up uh I'm sorry it didn't work at the time but now it works check it out again [Music] and uh you know obviously don't tell them that you're gonna wear a spine on them with Sentry and stuff but it's kind of expected if they're a front-end developer they would know that you probably have a reported tool and they're very familiar because it would be very similar in the actual job and considering that most Juniors don't know about these tools uh it was pretty impressive that you already know how this works and you even integrate it with your own stuff so because I think the thing is people imagine really started that to use something like this you have to have a big production app a pretty big budget but it sounds like you can add it to any site is that right uh I think so I will just have a look uh let's go to pricing pricing developer zero per month no sounds reasonable limited error performance but you don't really I was wondering you don't really need to do anything else so yeah just sign up and uh you know integrate your portfolio yeah if nothing else you'll get a feel for how to use it it's quite likely that the job that you get will have a tool which is similar or Century itself because it's kind of everywhere all over every podcast and stuff like that yeah that's true so that's error reporting yeah a lot of log files so log files basically uh kind of similar when you are what your application does it runs but for example console logs they usually right to the console uh but the console is fully user but you might want to have something for the developer so what most applications do is instead of writing to the console they're right to a file oh uh and they basically aggregate everything and it's usually a bit more structured so instead of like saying hello here or hello here one two three so you know exactly where he is encode it's a little bit more structured like for example a time stamp name a function there executes some kind of Stack Trace uh you know some more detailed logs uh maybe some information about function inputs uh where exactly you know which statement where abouts that something happened so you're trying to be a little bit more specific with those log lines and then though you get written into a log file that then you can hook up to something like Sentry or datadog or any other tool uh and then it basically just gets piped into that dashboard and then you'll see it from there or you can just you know just have it in the file copy paste it into your machine and have a look through it so when developers say uh we're launching something today and I have to watch the logs is that what they mean yeah oh I always wondered moving on backhand debugging so you're the backhand guy um talk to us about that so back in debugging is a little bit trickier because uh you um most of the time like you you can't really go to production application like run it because your customers use like so you don't want to affect the that type so you're basically trying to work with uh tools like Sentry data dog uh or back-end log dashboards uh and you will try to hook up things like for example how your app is performing how much memory it's using how much CPE is using um how much you know all the errors how many errors you have how many warnings you have uh so you'll have to create a lot of tooling around that and also create a lot of uh kind of in backhand there is much more it is well not console logs but the logs in general so for example instead Verizon console.log we arrived something like logger.info and it's basically hooked up to your file login which then goes to your login software uh and it could be that the dog or it could be like info log or you know hundreds of them and then yeah you look at dashboards you look at logs he tries to verify the issue but if it doesn't work anyone need to replicate it locally you run the server locally on your local machine and then debugging you know you're trying to go through the same breakpoints and replicate the issue there which brings me on to a topic which I've just thought of can't reproduce error so the scenario is a user reports that something not right is happening you go and test it out maybe you even follow the same steps that the user has done because they told you how they've done it or you've asked yeah and you're not finding the same problem how to approach that right so that is more of a troubleshooting uh you have a handful of ways to go about that um and basically can you not reproduce the error because the user has supplied you with not enough information or is the information enough but you just do the same steps very detailed steps but it just doesn't happen for you it gives you a different experience right so you have to verify which one is which a lot of these troubleshooting techniques they're very it's it's all about keeping uh pretty good discipline about how you understand what's true and what's not true and you try to keep your assumptions somewhat linear uh so they're not all scattered all over the place so you know don't try to verify two three things at the same time uh tried to kind of space out the problem and then try to find some middle that will tell you for example if I do this this will indicate these problems don't exist and these problems might exist and then basically use half and half and half these problems until you narrow down on yours and you'll try to verify one at a time right don't try to run three experiments in one go um so if the convert produces the error you know a user hasn't provided you enough information well try to ask for more information um if you can't ask for more information like for example I don't know um whoever reported to you you can't talk to customer or like a customer is unavailable um you know try to put yourself into their shoes and try to replicate from their standpoint um kind of you know maybe they tried to do it one-handed or maybe they try to do it maybe they try to use your app while they're distracted in the supermarket or something you know maybe you try to do the same stuff and it might replicate that way you know try to get into the environment that you usually is using it in uh if I can't write producer error happens because uh you have very detailed steps but it just doesn't happen to you it could be because it I mean to be fair 99 of the time that usually means that it's a concurrency issue which is uh like two things need to happen at the same time and because they happen at exactly the same time that's when the error happens so for example so why does that not happen to everyone there it can happen but it doesn't happen to everyone because these things happen just ever so slightly at a different time so for example you have a form submit button uh if one user clicks say it works if another user clicks it it works but when two users click in an exact same milliseconds or something it causes an error for both of the users all right um so it could be just a way to dry again uh yeah but also you need to try to verify how to prevent that error uh and in this case uh these errors are super hard to reproduce super hard to debug and try to find out what's wrong with them yeah yeah so usually in the back end way in the back end world people trying to reproduce these by simulating very high load which happens at the same time on the system to replicate this or they have like concurrency testing stuff like that so there is some tooling to replicate these issues so you can try to uh eliminate them as well so those tools available that um create the common type of scenarios that result in these errors yeah and they're quite tricky to get your head around and try to work with uh but I think it's kind of worth trying to use them at least all know that they exist what are these tools cool the name for your ecosystem and maybe there is something like that no Pat thank you now oops good day everyone hello Cat Avatar person hello can't post that in the background indeed oh my cat no less thank you all for coming along now the next one's interesting I wrote on the list Dave writing CSS and HTML and then I said can you actually talk about that Michael because Michael famously tries to avoid CSF he said no you can though and I said can I um come on one of the most um I think frustrating things about CSS and perhaps the reason why it's so divisive is that you don't yes because you don't get any feedback about why it doesn't work in the way that you expect it just does effectively what you tell it to do but not the way you want it which is quite infuriating how do you tackle that well it just so happened that this topic came up on um our Discord Channel recently which you can reach uh I think it's home.com it's called yes God yes you can join here I won't do it now because I'm already in oh thank you I'll drop this invite into the chat um yeah this topic came up on our weekly Town Hall which is a stage Channel where we chat to our users and Tom a teacher from scrimba came up with a brilliant suggestion of how to debug CSS which was putting all of the CSS into chat GPT and asking it um to remove duplicate or um not in use selectors and basically refactor it well ask it if it's um okay yeah if it's as efficient as it could be and did that work Tom says I've not tested it myself yet but I would be super scared to do that you know I take like CSS from the whole application paste it into GBC and then see it's like highlight the selectors which aren't needed and then it removes half of them yeah yeah um interesting I'm somewhat scared to do that because I don't know I'm just too paranoid because like would it like would you paste HTML as well yeah but like what if for example it removes CSS that it thinks it's not used but it's actually used by some very obscure page yeah but you're only copying it into chapter you're not actually removing it from your application yeah you run locally you click around the app if it works and probably it's fine right you can do it section by sections yeah oh because it won't remove just the rules right it removes some of the statements and stuff what do you mean or will it refactor your classes and everything else I think it could do I guess it depends what you tell it yeah fair enough yeah interesting I have to admit that is very unorthodox uh approach that I'm probably a bit too scared to use but I think you could also use it for the old notorious problem of when you put something into CSS then it just doesn't seem to do anything I'm thinking mainly about margins here you can ask it yeah I've got this why is it not moving my stuff yeah true I mean I'm an interesting Museum yes obviously as little things chat you Boutique use with caution do not enter proprietary code in that yeah don't just call your best stuff back from church well certainly not without any kind of backup or yeah without no this is going back to the question of will um chat GPT replace developers and in my view the answer is no because that's too scared to actually follow where it says yes chat GPT can code you also need to know what it's doing because otherwise you might end up end up unexpected results let's be honest when you copy paste your whole csas file to it you probably don't know what to do it yes but did you know what your whole CSS exactly [Music] and Rob border two yeah red is my favorite way of debugging yes that is a very good way to visualize each component in your CSS file uh I think there is like um I remember there was something like CSS uh back to cssd bar I think that was quite good article um I don't remember if this is the one but you know share it um yeah overflow of cultures from its parents all the time how annoying is inconsistencies I don't even know what they might be so maybe uh what it means is the browser puts in things like margins and padding so what you should do is at the top of uh CSS is it CSS reset yeah and you can there's various ones out there just Google CSS reset and copy those in unexpected inheritance Cascade yes multiple Styles override one another oh okay yep and resiliency failures including when child government have gained rapping divs and different elements are unexpectedly added okay interesting so debugging take toggle oh okay so you talk a lot for rules one at a time we can do that just by adding a typo into the rule so it doesn't pick it up right okay and toggle all rules of uh and bring them back one at a time oh right so I think yeah you can yeah I think so what do you mean so you go to uh your death tolls yeah and then there the computer layout or Styles and then you click the when you hover over these check boxes yes so you can basically uh toggle them off right and then you can bring them bring them back one by one foreign actually um you can also copy Styles so try to replicate the issue completely separately okay uh then there is changes tab oh word there's so much tool around CSS and I didn't know where's the changes tab do um it was only in Firefox I think oh is that computed yeah okay well maybe sometimes if it doesn't appear you need to add it from layout computers you can add it from I don't remember where now that's not terribly helpful properties accessibility then maybe it is I mean uh Chrome Edge use Kebab more minutes select more tools out who is here out there so and then it will appear here changes uh-huh okay here we go cool so it does exist uh debugging overflow bye debugging overflow okay so that's basically the star outline so very similar to what raw mentioned uh one pixel red and basically oh yeah right the outlines every single element in its own right um the Overflow yeah so overloading will probably fix the Overflow as well so you will actually see oh yeah so that sounds like what um Tim is talking about here the pesticide Chrome extension is what I use for CSS debugging it draws a blue box around everything that's what they did I'm very good very good good tip thank you for that okay yeah uh Jeff says I wish there was a way to display the full browser windows on the scramble IDE because it would allow us to include lessons on how to use devtools agree that would be a very nice feature for the future but you can use devtools in scrambler in case you yes you can come across it let's have a look at this from a past live stream um if you're ever in a scrim you can just open devtools and yeah I'm gonna let you do it for me make this a little bit yeah so the mini browser you can actually scale the main browser and yes this is uh actual scrim Dev tools but if you select uh the mini browser you then will be able to see devtools for the mini browser and ah sorry all right stop us there you go once again select the mini browser there it is and then you'll see body and then you should be able to just yeah yeah okay well normally you can just take our word for it moving on Church oh I know why that is me because we need to preview I know what it is yeah do you actually need to just uh Zoom it out and then there you go so you can actually inspect the whole app as you have it inside of the body yeah yeah hope it answered that Church apt is great for suggesting debunking steps when I presented a problem I just it's managed to remove myself from the stream I don't know for how long but anyway we're back now yeah so just to repeat yeah change everything uh for a bunch of ideas good good point I also developer what's your take on them and then question Michael J posters will AI take the coding jobs no can you expand um what makes you so sure well it's like uh you know will electric sort take away jobs from handyman you know or you know some kind of automated tools will they take away drops from Crafts People um unlikely but also again I just don't know where we're gonna go you know I'll honestly say I don't know I I think not uh maybe it will change the way the jobs are done but uh I am very doubtful that these drops will disappear and Enzo has an interesting question is typescript related to debugging I've only used JS until now uh typescript will well to be fair debugging typescript from JavaScript apps will be exactly the same um it's just a slightly different settings uh but apart from that it will be pretty much the same so typescript just to explain a bit it's oops I've looked at it for a while yeah it's JavaScript with types it's much stricter on the the usage of data types right yes it's more opinion agent people say which reduces bugs because you don't have people trying to add strings into a field that should only be a number yeah so on the uh when you're writing code you will get a warning for specific issues so for example like if you're trying to use string Methods on uh clearly something a number right so your function takes a number but you're trying to use something like a string method one um it'll say sorry you can't do that so it will give you a warning about things that you should or should not do beforehand and what happens if you try to do these things in JS it doesn't tell you what you're doing wrong wrong exactly because it doesn't actually know the type of that input variable so really you have a function with an argument which is a number and then you do something with that number but unfortunately you've got the it is a number you did something string related so you could cause the bug that's kind of why people want to use uh the types because typing helps you kind of like shrink possible error surface so you only work with more or less correct types so that kind of eliminates all the other problems fundamentally huge fundamentally yes by the implication practical implications there are a lot of it and type type theory in general is pretty powerful and what you can do with it and you know it's like a separate coding um have section I don't know how much you've used typescript but is there ever a way or a scenario where it becomes a blocker that it's so strict rather than being helpful um for most code bases no it's helpful for Library creators and stuff like that but when when you're raising your application you can probably um you can get away with a lot and there is like a joke that a lot of people just use any which basically you may say JavaScript again that's right there's an any type in typescripts yeah uh but generally you try to narrow down typescript also helps you out because you're trying to Define types uh of things that you're dealing with ahead of time so you kind of simplifies your imagination of what things should be before they come out all right says just started learning types between the last couple of weeks and I think it's definitely worthwhile yeah it will stop a lot of potential bugs for sure yeah however um it can become tricky especially when using it with react um maybe yeah maybe I just got used to it so much that I don't really know to say anymore but um yeah I think I think most of the errors are like you're trying to do something but it complains at you that you haven't selected a correct type or there is like a type mismatch um but it's only the issue that you have to solve once and then you just you get used to oh this should be this type so I should just use that um yeah prayers make an interface with any type and then link to that so it's hidden or so I hurt um yeah what does that mean uh basically the way you define sometimes types is through interface keyword and then when you're using it uh you can like link to I think what it means what what I like to try and say is that you're using any type and then you're replacing it gradually with the interface that you want it to be eventually so it's kind of like gradual uh replacement I think kind of I'm not sure I do see but okay let's move on adding a banner here rubber duck debugging right um you know those uh rubber ducks that uh are sold in like bathroom shops you know supposedly people swim with them but honestly where do people get rubber ducks well when we lifting rubber ducks but aside from that I've never seen them for sale yeah that's right but anyway assume you can get a hold of a rubber duck or use any other S I think it went somewhere that some programmer at some point you know was actually a swim with rubber ducks I only seen that in films and cartoons I've never actually uh but I have seen people with actual rubber ducks on their desks in the office uh but generally it just refers to you know talk through the problem with somebody else when you're trying to explain where you're trying to deal with and you're trying to kind of put it into something some kind of construction trying to explain it you have to simplify it or organize it in a way that is actually helpful to you personally to try to solve that problem yeah explaining the problem often at least you just realize oh actually I know what it is and then you just walk away and uh yeah you already know how to solve it which is why for example one of the issues is that you know you have a problem you type out the question on the Forum trying to find the answer and then halfway through type in that question you go oh Ashley I know what it is and then you go in and you solve it well there you go you've just done rubber. debugging yeah oh look well I have Zeke Stardust from that Brighton shop you're talking about all right Brighton rubber duck shop the duck house if you're in the Brighton area and you want to get involved in rubber duck debugging yeah some of them are quite rude so be careful clicking through that no look at that adorable um cool finally um have you shown an example of using death tools under IDE break points to debugger JS problem I was not able to find a good tutorial with real examples of the flow uh yeah so I think vs codes vs code documentation is usually I think documentation for your web editor or for your editor in general is usually where you need to go because they will help you out have start breakpoints so I would say that for react it's there but if it's for anything else you can probably try to try to find the the dogs there but everything should be there if it doesn't work then stack overflow if that doesn't work then just go to our Discord and you know let's have a chance and wait for it hey well thank you all for coming along and asking your oh wow it's really over yeah debugging and troubleshooting questions thank you to you Michael for joining and sharing your expertise pleasure yes don't forget to subscribe to our channel for future chats with Michael about all things tech tech career and some life coding sometimes we haven't done one of those lately we should do one thing yes any closing thoughts uh enjoy your weekend tomorrow yes thanks everyone see you next time foreign foreign