Debugging JavaScript Cool trics and tips

[@Morfij]

console.trace(); shows call stack. useful with nested functions

[@nicolashervy7544]

Console.assert can be handy if you only want to print to log when something gone wrong. Thanks for many good videos👌

[@kushp6486]

Waiting for the next video. Had no idea console.time exists before

[@nekoill]

Found this one in my suggestions, subscribed immediately. Great tips!

[@SKU009]

Today I learned about console.time and console.table. Thanks Techsith

[@Techsithtube]

I am glad you learnt something new. Keep learning!

[@tomgabauer9878]

Thanks for another great vid! As a new learner, these really help me. Cheers.

[@jared4941]

Just wanted to say thank for all your videos. I'm currently in school for coding and your videos have been such a great help.

[@sudhakarlahane7229]

Thank you again! Every time I get & learn something new from your videos! Lovejoy video 👌

[@brak51]

I am learning Javascript for work, since I inherited a job that is all about JS security, troubleshooting, so this video was very helpful. Please make more like it. Thanks

[@Techsithtube]

Yes, debugging is an art. especially inside the inspector. I will create some advance topics on debugging for sure. Thanks for watching!

[@abhinandsagar3736]

This video has a Separate Fan Base ;) I'll be expecting to see the sequel of this.

[@PrabhakarBangalore]

You can little cover the watch section where you can add variables to see it's value change separately inside source tab.

[@Techsithtube]

Good point . thanks for sharing.

[@phplaw]

Just clicked on the Ad to support you, very good video

[@Techsithtube]

Thanks sunny . I appreciate your support!

[@spd1270]

Thanks @techsith for helping us to get better in our job!

[@Techsithtube]

Glad to have helped. Keep on learning!

[@jonydude]

This was my first exposure to your work. I remember thinking, "These tips are either going to be so obvious, I already know them, or so advanced they're not applicable to any of my current projects." I want you to know, this prediction was wrong about every single tip you presented. None of them I knew, and none of them are useless to me.

[@Techsithtube]

What was the biggest surprise? Just curious.

[@jonydude]

techsith I don’t think things I don’t know can be ranked by size, as I didn’t know any of them, but the most influential is to stop debugging with alerts. I don’t just debug with alerts, I build with alerts. I test every if statement with an alert before filling it.

[@viraldimention]

Awesome tutorial, Loved it. A little request here to make part 2 with, I mean more cool stuff, like conditional breakpoints, call satck, watch, scope, performance tab, memory tab etc. Thanks

[@Techsithtube]

That is the plan . Will try to release it next week .

[@phanCAbe]

Wow. Outstanding content, that may have been the most professionally useful thing I've seen all year...

[@buncha1499]

Thanks again TechSith! Great stuff!

[@piotrkniaz4695]

great video! Debugger is something that can replace every .log i can't imagine my work without debugger notably when we want to refactor very big application it can save a lot of our time. So I am waiting for debbuger video and maybe i will know a litle bit more :)

[@MegaLearningStuff]

you mean debugger; or something else ?

[@piotrkniaz4695]

regarding to your question , i mean debugger;

[@Pareshbpatel]

Great Intro to Debugging in JS. Thanks. {2021-08-04}

[@PrashadDey]

Hello! Could you make a playlist for "You Don't Know JS" - 6 books series by Kyle Simpson, describing some of the important concepts of js? It will be very beneficial to you and your viewers as well?

[@3jyothi]

Cool tricks ☺ waiting for its sequel.

[@Techsithtube]

Coming soon!

[@masibhai339]

Waiting for next videos doing great job.really appreciate that

[@balanepalaiyathane9714]

Really Good tutorial you are taking of care all people especially who wants to start career... This is called real help for the community...

[@rajashekhar433]

javascript profiler? Performance?

[@abhishek_k7]

Loved this video. If possible, can you make videos on each Chrome Dev Tools tabs? I just know the basics of Networking, Audits and Sources tabs. Would like to learn more about all the available tools in depth.

[@shoaibah]

Array.from() will also create a copy. Curious to know the difference between Array.from and JSON.parse(JSON.stringify)

[@DontStopMoveOn]

Also [...array]

[@MrPDTaylor]

Is there a similar function that creates a table from an object that is useful in the actual body of code?

[@roshnikutty4252]

Great video! Looking forward to its sequel!

[@alena422]

love your videos, thank you very much! :)

[@ayk2412]

Excellent stuff as always!

[@kathirvelponnusamy]

Wow.. awesome ☺️ .. one tiny suggestion.. just modify the 'trics' to 'tricks' in title if possible.. I was trying to search 'tricks and tips' but I didn't get this video listed in search results...

[@utpalkant6354]

You don't know but you helped us a lot. Gratitudes for you 🙏

[@Techsithtube]

Utpal, keep on learning! Thanks for the comment.

[@ivanskubko9177]

Instead of console.log(JSON.parse(JSON.stringify(x))) you could do much more readable syntax console.log([...x]) for arrays

[@bobmarleyy1976]

Yes but last one is a shallow copy. Nested array will keep their reference too in that case, so with parse and stringify you're sure to clone deep objects

[@hamsteroncoffee]

Great tutorial! I did not know the "pretty print" at the end of this. Pretty cool stuff. Thank you for sharing. Also, if you haven`t done this already: could you please make a video about debugging Node/ API calls? This has been killing me recently :( Many thanks in advance!

[@jonnyzheng419]

I would suggest this code for log debug: let a = 1; let b = 2 console.log({a, b}); // This code would show the variable name and there value.

[@evan5854]

Make these vids longer bro, good stuff

[@bhushi5764]

Very useful information you shared. Thanks!!!

[@WasimKhan-0801]

Nice trick and Trip sir it will really help in development. Sir is there any replacement of moment.js who works really good in any time zone because moment giving wrong results of display date in some time zone eg. Check with Sydney or apia time zone

[@dearvivekkumar]

I havev seen peoples debugging badly writtenjQuery code and they have hard time finding the handler function for any element. Using the event inside of right section of the source tab is very helpful as chrome debuggers stops automatically at the handler function and we can blackscript library code. I will try to post the screenshot when I will be on my PC Second is the DOM breakpoint to know which code in the source is modifying the attributes or subtree Conditional breakpoint for debugging code inside of loop or frequently called function Watching variable is another one

[@MegaLearningStuff]

please do :)

[@adityaghosalkar431]

the most irritating problem while debugging javascript in chrome is you constantly land in some javascript library which you are using while debugging your own code do you have any tricks to solve that

[@MegaLearningStuff]

yes, blackbox it, just right click it is there, next time it will skip over :)

[@Techsithtube]

put a debugger in your code and it will always stop into your code and then if its a loop . just click continues and it will stop at the next debugger . So you don't have to do next next next each time and go through some other lib.

[@npaul1440]

Your tutorials are really awesome

[@janaks7016]

Very useful videos, thank you bro

[@malvikatiwari3857]

Hello, I have a question regarding JavaScript, Can you help with that? Actually I need to know the inbuilt libraries of javascript to fetch data from a third party API.

[@malvikatiwari3857]

@techsith can you name all the inbuilt libraries for this purpose?

[@rahulvanave]

Call stack in chrome Explain this to others It's really useful in execution

[@Techsithtube]

Yes , that would be a good topic to cover. Thanks for the suggestion.

[@rohitkudalkar92]

Above trick was really helpful. Sir can you please make a separate video only on debugging. How to improve debugging react Application in VScode or in chrome. thanks

[@Techsithtube]

Rohit, I do have a plan for such series. I will plan for it. Thanks for the suggestion.

[@rohitkudalkar92]

@@Techsithtube, curious to learn new debugging skills from you, sir. Thanks

[@dubeykivines9202]

Nice Information shared thanks

[@alokranjan476]

Nice one😊👍 Please make video for other tabs also.

[@Carl-yu6uw]

Great stuff! Thank you.

[@dillikathirvel8628]

Super techsith. For console.table

[@VijayaKumar-qy6oj]

Seems your tips may useful for beginner's (below 1 year experience). People updating more we think.

[@lahotiashish]

Here is the written version of this video:- codingnconcepts.com/javascript/debugging-tricks-javascript/

[@vikashire5292]

Yes. Thanks for these tricks. Please make a video on developer tools in chrome.

[@Techsithtube]

Yes that would be an interesting video. Thanks for the suggestion.

[@vikashire5292]

@@Techsithtube we will wait for that.

[@brunofunnie]

Nice stuff, but it's really basic, it was already on my mindset of debug tools. It would be great if you dive into Memory Leaking detection, that's a very interesting subject for a video. How to identify, how to identify in a big project, using comparison snapshots checking for delta values... nice video thou

[@phemant24]

Very informative, thank you

[@karthikpa]

Very useful tricks.

[@Techsithtube]

Thanks for watching Karthikeyan.

[@hiteshchoudhary3412]

Please do more videos like this

[@welterdavin5486]

spot on

[@johnywalkie]

console.log("%c I am red", "color: red");

[@Techsithtube]

That is also a cool trick Thanks for sharing!

[@brianserious]

@@Techsithtube sounds like you might get a http 418 from that :)

[@rajesharya3645]

Awesome..............

[@hamidrezakazemi7746]

console.time & table is awesome. for nodeJS debugging --> chrome://inspect section and run node file with --inspect

[@sudarsanapilli8371]

Hi techsit, after creating an array in console. let a= [1,2,3]; console.log(a); --> my console showing "undefined " output:-- >>undefined --> how to see the output . any suggestions are highly appriciated

[@Techsithtube]

in the console you simply type a , dont use console.log(a)

[@davvar100]

instead of let a = 'a' , b = 'b' console.log( 'a :', a ,'b :',b ) you can do console.log( { a, b } ) and get { a: {}, b:{} }

[@damilolaolowookere7658]

Man you're awesome!!

[@Techsithtube]

Thanks for an awesome comment. :) Keep learning!

[@doaahashim7320]

Like like like it helped me a lot thank you

[@himanshushekhar3694]

really cool video

[@PrashadDey]

Worthful video.

[@j.almadhaji]

new useful tricks for me thank you sir

[@welterdavin5486]

good for you

[@sunilkumar-zf4dx]

Wow very useful stuff..

[@kirankumar-zf9yd]

Good 1, can you please come up with event looping in your next video...??

[@Techsithtube]

You mean Concurrency model and Event Loop?

[@sushantkunkekar2155]

@@Techsithtube how to debug loop and funtions exclusively

[@kirankumar-zf9yd]

Yeah, It would be great to hear from you because most of the people will learn how js engine reads sync and async events...

[@Techsithtube]

Got it. I will add that to the sequal to this video . Thanks for the suggestion

[@mtmecax]

helpful video

[@rounakjain5774]

Instead of console.log('aaaa', 'x: ', x, 'y: ',y), use console.log({x, y})

[@AshwaniSharma-vg5xm]

Nice

[@RanjeetKumar-gg7ie]

awesome :)

[@sandeepsandy214]

Thank you guruji

[@Techsithtube]

Thank you Sandeep for watching!

[@sandeepsandy214]

I am a huge fan for u

[@Oswee]

Tnx for console.time() ! :)

[@Techsithtube]

Yes Console.time is pretty cool

[@DamianNAudio]

I wouldn't ask for help translating your videos, programming is all about English. And math.

[@andriiauziak1178]

nice comment))

[@Techsithtube]

Thanks for the nice comment brother.

[@andriiauziak1178]

​@@Techsithtube Thanks for what you are doing, Sir. By the way, is it possible to know, how much people from different countries watching your youtube channel

[@believeme6310]

Hii sir

[@believeme6310]

And also I am first viewer

[@weichengye3736]

console.log({a});

[@believeme6310]

This is my first comment

[@kuba5764]

asd

[@juleswinnfield9931]

console.debug();

[@farshidbahmanian]

Not really useful stuff, but thanks

[@MrityunjayKumar-v3e]

dur boor

[@handsome_man69]

when is chrome dev tools going to improve with debugging closures? I always get no reference error, or undefined error when looking at variables. Granted this also happens when I debug in webstorm.

[@Techsithtube]

I think the chrome dev tool is pretty advanced. undefined is because it's probably out of scope.