Chrome DevTools Complete Course - Learn to debug your frontend code

This is a basic/intermediate course on Chrome DevTools which will help you become a better developer over time. If you liked the course, you can start browsing more courses or get a streamlined frontend web developer learning path on codedamn: bit.ly/fullstack-codedamn
Timestamps
00:00 Intro
01:20 Setup
02:43 Pre-reqs
03:36 Hello DevTools
06:05 Console 101
10:07 Trying Out Different Consoles
19:25 Sources Tab 101
23:23 Setting Up Debugger
30:26 One More Way
32:55 Event-Based Debugger
38:06 Stepping On Functions
42:44 Breakpoints
46:57 Debugger
48:25 Call Stack
52:00 Patch Code
58:05 Snippets
01:03:38 Networks Tab
01:04:18 Networks Tab 101
01:07:50 Exploring Networks Tab
01:14:17 Filters
01:18:41 Columns in Network Tab
01:20:50 Throttling Network
01:25:19 Copying Requests
01:27:48 Elements Tab
01:28:31 Elements 101
01:31:45 Inspecting Node
01:34:58 Operations With Elements
01:38:03 Special Variable
01:40:06 Styles Manipulation
01:45:17 Copying CSS/JS Path
01:47:37 Color Picker
01:51:56 Outro
Don't forget to subscribe and like the video if you enjoyed :)
Want to become a programmer? Learn and solve challenges on codedamn: codedamn.com
My Instagram: / mehulmpt
My Twitter: / mehulmpt
My LinkedIn: / mehulmpt

[@codedamn]

Learn Full Stack Development by building over 25 Projects: bit.ly/fullstack-codedamn

[@VenkatGudavalli]

This is such a Unique topic, Thank You Mehul !

[@sheikhakbar2067]

I appreciate the depth of knowledge you provide us with ... I learnt a lot from you.

[@unnikrishnanvannadil]

This is the best and latest for learning Dev Tools. Thanks :)

[@fardinkhan3103]

What a tutorial.. you deserve 10 million subscribers

[@sathishraj4173]

Great Content, Keep Rocking - Thanks a LOT

[@mohammedmudassir837]

Thank You for such an informative tutorial 🔥🔥

[@codedamn]

Glad it was helpful!

[@jestingigi4261]

aag laga de aag 🔥🔥, a fantanstic course thank you ❤❤🙏🙏

[@SimpleThingsOne]

Thanks a lot for this video, mehul. I am now your newest subscriber.

[@thenadastudio8295]

You are doing a great job mr mehul by providing us the kmowledge thanks a lot for that 💯💯💯

[@ellenkarnwie]

Thanks a lot for the education on cording and trading. It was informational and educative.

[@HaifengZhu-pn3uq]

explained very clearly, thanks!

[@manu-singh]

This is awesome bro, thanks

[@codedamn]

Thank you Manpreet! :)

[@rohansinha6765]

This is Gold!!

[@akashchauhan6784]

Really Appreciate Your work 😊

[@codedamn]

Thank you so much 😀

[@srishty5779]

Thanks a lot , very helpful.

[@akash-]

Awesome Course to learn DevTools!

[@iyousef46]

Great job. Thanks

[@codedamn]

Thanks :)

[@shaikmohammedirfan1915]

Thanks a lot for this video

[@vaibhavmatere18]

pretty helpful !

[@bipulsharma1357]

Thank you so much

[@codedamn]

Thank you Bipul!

[@safdarawn902]

Thanks a lot Bro

[@chigurupati_s]

Thank you bro, super

[@aj35lightning]

I've learned a lot more than I expected to when I first clicked this video. Actually a lot of things that will help me web scrape more effectively. Thanks for putting this all together. I gotta ask tho, what is the name of that new tab extension you have running @59:01. The life countdown. I really dig how clean and minimal it is

[@codedamn]

Glad it was helpful! The new tab extension is "mortality"

[@aj35lightning]

@@codedamn thanks a lot!

[@surendrareddyseelam9757]

THANKS MUCH BROTHER 🙏

[@codedamn]

Welcome!

[@abhichohan8837]

Thanks a ton :)

[@BibekGhoshh1]

learning it never late........learning in 2023

[@365Pancakes]

Around 53:00, how come updating the variable to 2000 (2 seconds) does not get reflected in the execution, but adding calls to functions does get updated on the fly?

[@amolpathakndb]

great job sir..nice n crisp explaination! just one request, your mouse pointer is too small and also darrk in color making it lost in the background... as a result, sometimes I am not able to pick where you clicked..

[@shreyasjejurkar1233]

Hi, Mehul. I really like your channel, and really appreciate the hard work you are putting in codedamn. Moreover, I am your recent subscriber. I recently watched your digital ocean video series, and really loved it. But am looking for video from your side where you create a *small* full-stack (it can be anything) app in Nextjs (front-end), NodeJs (expressjs backend), and then deploying it to digitalOcean droplet. I mean I wanted you to replicate the steps that you followed for codedamn deployment to this new small app so that everyone will get to know the real-world deployment once they get familiar with digitalOcean by your tutorial. Please make it. Looking forward to it.....

[@codedamn]

Thanks Shreyas. End-to-end deployment project videos are definitely something I wanted to do for a long time. I'll do it soon :)

[@shreyasjejurkar1233]

@@codedamn yeah thanks! Just replicate the codedamn deployment you did, but for sample MERN app, and that would be great! Thanks for response, I really appreciate your efforts! 🙌

[@honeykulkarni6490]

Can you please make a video on how to find the component file in dev tools

[@user-rd9su9vj9l]

Mehul great video. I have some questions: can I modify the code inside sources tab in browser dev tool at runtime and debug? How can I go back to previous line while debugging, for example my debugger has reached line 20 in file (Sources tab) and I want it to bring to line 18 and debug again, how can I do that?

[@julio5434]

💗💗💗

[@TheAudit]

Hey just finished watching Next.js playlist, is there more to that playlist? saw the roadmap chart as well, there you have mentioned that there will be next.js mastery and advance course, have you not released them yet? or are they available already?

[@codedamn]

Yes. I'll be producing more Next.js content from now. Expect to see some good courses before end of year.

[@TheAudit]

@@codedamn hands down best content on next.js on internet that I've come across with. Looking forward for more next.js videos.

[@TheLucidway]

Thanks for the video! I just had a quick question. Do you happen to know why the styles would look one way in the chrome mobile device emulator and look a different way on the actual device? Currently I have a project that looks fine on the emulator but has an overflow y of about 25% on the device.

[@codedamn]

Because chrome mobile emulator still uses chrome as the rendering engine. If your phone is using a different browser, they might have different layouts thanks to browser inconsistencies on the web

[@TheLucidway]

@@codedamn I see. Thank for for responding!

[@darkfoxwillie]

This also works for firefox right? Talking about the principles. Thanks for the content bro!

[@codedamn]

Some theory concepts like Network tab stats would be same. But most features are Chrome DevTools specific I guess. I never spent a lot of time with Firefox DevTools

[@ParthKawatra]

@@codedamn some people say FFX Dev tool is best for CSS grids and flexbox stuff.

[@codedamn]

I think firefox used to be great for grid, but chrome devtools also supports CSS grid debugging now

[@user-le6uq3kq4m]

How can I change the JavaScript code for something that happens onLoad of a particular component directly in the browser?

[@jimshtepa5423]

hello Mehul, just out of curiosity: do you have active software development job other than codedamn or codedamn and video tutorials is your main daytime job?

[@codedamn]

No, I did not take up job after completing the degree this month.

[@jimshtepa5423]

@@codedamn wow, you seem to be sooo experienced and command deep knowledge of webservice building and all these by the time you are getting your degree? I am 34 years old former finance specialist switching careers only a year ago. I feel I wasted around 15-20 years of my life on wrong industry=(

[@jimshtepa5423]

@@codedamn Anyways, congrats on your degree and thank you for posting great materials publicly

[@sethurk]

@@codedamn , what degree you had completed and from which university?

[@prisinha]

31:51 set a break point

[@prisinha]

16:16 console debug

[@prisinha]

12:51 console group

[@prisinha]

12:22 display as table in console

[@I4NI_]

iman is that you bro?

[@bhatnagarcapital]

14:58

[@johngibson1072]

5 minutes in and you've said nothing.

[@shoaibansari9323]

fei fe fe fe feefr

[@shankars101]

Thank you so much