If you're seeing this message, it means we're having trouble loading external resources on our website.

Se sei dietro un filtro web, assicurati che i domini *. kastatic.org e *. kasandbox.org siano sbloccati.

Contenuto principale
Ora corrente:0:00Durata totale:2:55

Fare il debug delle pagine web con la console del browser

Trascrizione del video

one of the most useful skills that you can have as a web developer is the ability to debug your webpages using the tools available to you like the browser developer tools every browser these days comes with developer tools so you should theoretically learn how to use all of them but it's also good to know which browser has the most powerful tools and start your debugging in that browser right now that's chrome at least to me but that could change in the future okay so let's open the developer tools in chrome and there's a few different ways that you can do that I like to find out what the keyboard shortcut is for my browser and OS and use that because that's the fastest so on Mac its command option I tada there's our dev tools another way to do it is to do right click inspect element and that'll open up the dev tools and it will open up to the HTML console so you then have to click around to what you want but it's a pretty quick way as well and finally there's the long way which is to go to your menu go to more tools go to developer tools and that'll open it as well but that's a surefire way but it is long so I really recommend finding out that keyboard shortcut and just doing it over and over and over till you remember it okay so keyboard shortcut open great so there there are a lot of tools down here but there's one that we're about to use so that is what I'm going to show it's the JavaScript console this console shows all the warnings and errors related to HTTP requests CSS files and JavaScript plus it shows anything that we log out so demonstrate I will use console.log to show a message now notice that is showing lots of syntax errors like console is not defined that's because I'm typing slowly and I'm in this real-time environment that's constantly evaluating the new code so it's showing me all the errors along the way that's something to keep in mind when you're using the console with your webpages here on Khan Academy you can ignore all these all these messages here until you're done typing see what the actual error is or hopefully the we know error presto the console said hello to me how very sweet of it all right so there's a ton more that you can do in your browser dev tools and you should definitely explore them more but this should be enough to help you in simple debugging as you go through this course