Chrome Dev Tools Console Super Powers

[@haibaidzokwomandre1468]

Team The Odin Project here

[@FigueMonk]

Stay hard Odins

[@bmehder]

This is an invaluable series. Where was this 15 years ago? :-) A bonus tip I just discovered: You can switch the docking position of the dev tools with the keyboard shortcut Cmd + Shift + D on Mac or Ctl + Shift + D on Windows.

[@LearnedJohn]

THE Odin Project

[@PaulMcCannWebBuilder]

It sure sounded like your dog answered the 1 + 1 question correctly.

[@debeerpaul]

Awesome video. Love your dog in the back haha

[@RioTheHitman]

Great tips that table command looks very useful 👌🏾

[@alpoochin8]

At 7:12 of the video, you highlight error,warn,info then comment // out all 3 at once, How did you do that? Great video as whole too! Very informative!

[@devstefancho]

great explanation, easy to understand thanks

[@Gauss6174]

learned a lot, thank u. would love to learn more about the application tab in chrome devtools as well if u ever decide to do a more in depth video of what all the different options in that tab are for exactly like the application/storage/background services and the options in them like local and session storage, back/forward catche, and all the other ones that are important in ur experience. i'm sure a bunch of them are prob self-explanatory just from their name, but i've never messed with them before. either way, learned a lot, thanks

[@SteveGriffith-Prof3ssorSt3v3]

Application tab is coming soon

[@tomlaskar4226]

I have no internet on my PC. A lighting affected it. Only my phone I have. I am learning JS with Chrome console alone. This helps a lot.

[@SteveGriffith-Prof3ssorSt3v3]

@@tomlaskar4226 good luck

[@schweremberger]

Great video. It was quite helpful! Thanks, Steve.

[@mgcmsn]

The "Verbose" level is for 'console.debug()'

[@farhadcohan8867]

Steve this is awesome do you have any video about JS for beginners I love the way you explain I don’t get tired of of watching your video one question how do you get ride of undefined in console I know by holding shift key and return we won’t get is but it’s annoying thank you

[@SteveGriffith-Prof3ssorSt3v3]

Which "undefined" are you talking about? Do you mean undefined appearing below a line of code that you type in the console? The console will and should always display the value that is returned from each line of code. For many lines that you will type, the return value will be undefined.

[@uimonk]

please make more such useful content. respect from India

[@axel.g4638]

Hi! Great video and very informative! I just have one question. Does console.dir(data); actually convert the variable into the JSON equivalent or even a string at all? Doesn't it just display the JavaScript object itself in a structured and interactive format? Like, its still a JavaScript object , not a JSON string (property names must be in double quotes in JSON). I heard we use JSON.stringify to explicitly convert the object into a string for storage, transmission, or non-interactive display. Is that true? Thank you!

[@SteveGriffith-Prof3ssorSt3v3]

console.dir stands for display interactive. It is intended to display the variable as an interactive object so you can see the properties and prototype. For many objects, this won't make a difference with .log It does make a difference with HTML elements. Like the two versions below. ``` some content ``` vs ``` HTMLParagraphElement - id - title - etc ``` To convert to JSON and transmit, we can only use arrays, objects, string, number, boolean, and nulls. HTML elements have no equivalent in JSON. You could take an HTML string and save it as part of a JSON file, but not an HTML object.

[@AJSpeller]

lol Steve said "1+1" and the dogs barked 2 times

[@ChocolateTaiyaki]

The Odin Project recommended your video for our foundation Javascript course. Is it normal if I don't understand a single thing you're saying? :(

[@SteveGriffith-Prof3ssorSt3v3]

@ChocolateTaiyaki it depends. If you have been learning JS for a couple years and you don't understand then I might worry. If you are new to JS then you might be missing some of the context. Many of these videos are things that I make for my own students. I point them to the appropriate videos when I know it is the right time. When learning development tools, sometimes you just start by being aware that the tools exists. Then you will remember when you come across a situation that requires the tool.

[@246rs246]

very helpful like always

[@shahinza]

Thank you

[@the42project-c8h]

Good man

[@noonecares6816]

This maybe silly but how do you make a full page just the console it self.

[@SteveGriffith-Prof3ssorSt3v3]

when you open the tools, if you are on the elements panel there can be a bottom segment that has tabs including Console. However, Console has its own tab that can be opened. You can close the lower panel to just show the elements or the console. Additionally, if you click on the 3 dot menu in the top bar there are options for "Dock side" which includes opening the console as a separate window.

[@noonecares6816]

@@SteveGriffith-Prof3ssorSt3v3 Thanks