DevTools Waterfall Deep Dive - Diagnose Your Backend and Improve the Frontend User Experience

[@Fabreg01]

24:16 I think are two different connection Id 4422, 4442. Superb content as always!!

[@hnasr]

Lol nice catch I am getting old 😅

[@Fabreg01]

@@hnasr 😅

[@laurosf]

@@hnasr if it helps, I didn't notice. Even after I read this comment I had to look twice lol

[@vinisaveg]

A terrific "must watch video" for any back-end or front-end engineers out there! Awesome DevTooling series btw. Keep it up!! :)

[@shitshow_1]

I appreciate your energy throughout the video.

[@javedutube10]

Whatever topic i think i need to understand more, here comes same video. Love you. Thanks.

[@ca7986]

♥️ you are absolutely amazing! The content you display, the way you explain and teach. MashaaAllah ❤️

[@hnasr]

Thank you so much 😊

[@ismail-talb]

really beautiful tutorial...there was a missing piece in my head now I've found it . Thank you

[@RobHulsebos]

It's easy to follow this lecture and with humor. Thanks Hussein :-)

[@nathansherrard4111]

Awesome vid as always! I noticed in your multiple TCP socket example for badssl (around @18:30 ), there were no orange/purple bars for the secondary connections (until you moused over), which I thought was odd. But when I try it on mine now, I see them, so perhaps was a Chrome UI bug that has since been fixed.

[@hnasr]

probably I had opened them in another session in preparation of this video and they got "cached" .. Chrome seems to cache those connection even if I close the browser. I have to make sure to restart the machine and do a clean recording next time. Good catch

[@climax031]

can u explain in simple term plz i did not got your concept of Q?

[@blingsingh1057]

Awesome content! Hats off to you for the effort being put here. One suggestion: Please zoom in for the mobile viewers. Font is bit smaller to read.

[@ADEL16111]

I can't thank you enough for your content, allah yakramek

[@EightSong]

This was great even for me as SEO specialist

[@HarshKapadia]

Amazing video! Thank you! This series is really good!

[@rschmidtzalles]

Your content is just amazing. Thanks for sharing your knowledge.

[@hnasr]

Thank you Libert!! 😍 glad it helps

[@kirillzlobin7135]

Amazing content

[@johnm8358]

great content, i learned lots ! thank you

[@kushalkamra3803]

Thank you 🙏

[@karthiknayaka8611]

Nice

[@aqumus]

Wow what a amazing content, lot of learning for me from this video, definitely going through other videos. Thanks for creating such content and sharing it👌🙂

[@jinendrakhabiya2646]

This is awesome!

Great content!

[@KDOERAK]

very well done - thx!

[@hangtran4863]

thank you a lot for the quality content

[@peteradam4740]

Great content, thanks

[@nathansherrard4111]

It's interesting to observe all the time and effort Google and others put into the HTTP/2 and TLS 1.3 protocols, specifically around reducing the # of round-trips, while their pages have multiple redirects and contents served across a ton of different domains (despite using H2). While I applaud the protocol optimization efforts, it does end up feeling like in trying to increase your car's MPG (fuel efficiency) you got ideal pressure in your tires, turned down the A/C, removed your cargo rack... but are driving an SUV in stop-and-go traffic. On a related note, if website still have their content spread all around via domain sharding from the 1.1 days, won't that actually make things worse if they switch to H2? Are they waiting for a critical mass of new connections to use/support it before adjusting their content serving strategy, or is it just overlooked/forgotten and thus they'll never really reap the benefits of H2 they imagined?

[@hnasr]

I always think about that and my guess are new engineers take over and the knowledge is "lost" and people forget why they were doing things the way they were.

[@mrcrazyenough007]

Superb content! MashaAllah

[@ca7986]

Make more on devtools!

[@Jack-uc5ly]

Love your videos, quick question: You said 'h2' requests are not cheap on the CPU, how do you know this? Are there any popular resources you can share on this subject please? Thanks in advance and keep up the awesome content!

[@hnasr]

Hey Jack, if you know how H2 works you will understand why it takes more CPU/memory compared to H1. You can watch my http/2 video on the topic I have a whole playlist discussing this My main resources are the RFC HTTP/2 kzbin.info/aero/PLQnljOFTspQWbBegaU790WhH7gNKcMAl-

[@Jack-uc5ly]

@@hnasr so sorry I missed this reply, and here I am again trying to find something else. I'm working on a nodejs backend service at work, which sends a lot of HTTP requests to get the information it needs to respond to the client. I'm trying to debug the slow performance, had some major breakthroughs but, one tool which would be really helpful, is to have this network request waterfall chart but for the backend service itself. Just to get a visual representation instead of sifting through logs and building up a picture myself. Any ideas of such tools? Can't seem to find any so might just make my own

[@tanyashreeatul9591]

Another amazing and very insightful video Hussein ! Thanks! 🙂 Just wanted to ask one thing.. as you described the mechanism of how resources are fetched to browsers.. you told that they were getting downloaded. Where is this downloading actually happening? Does it get downloaded in the browser.. some cache ? It would be great if you could elaborate a bit on that ?

[@gerooq]

Chrome and other browser software, when installed, dedicate a folder on your system to things like cookies and cache. That is likely where it gets stored. Something like C:/Program Files/Google/Chrome/cache/cache327.txt or C:/Users/Documents/Google/cache/cache82394.txt. Just pulled these examples from my head but its the same idea I guess.

[@hemasaitej563]

How can we get these values in python programming ?

[@abdulmoizsheikh8031]

24:06 I think thats a different connection no? o.O

[@abdulmoizsheikh8031]

oops just saw another comment addressing the same

[@NizadSajeedAranghmedia]

Which is the best caching for build a caching server ?

[@rubendariofrancodiaz6944]

That depends on your needs... Does it have to be asynchronous? What data structures do you want it to support? What caching strategy are you willing to use? Do you want to have replicas/clusters?

[@NizadSajeedAranghmedia]

@@rubendariofrancodiaz6944 Our Use is to Cache the iptv middleware server.

[@helios6193]

woah... explained very well... i fell like i've gained a superpower now

[@asimabusallam3147]

thanks

[@mangeshgupta5677]

Heyy show it😂 thank you 😊

[@redditrecap7]

Make a similar series on frontend ???? Or any similar channels like yours for frontend?

[@vybhaveswaraiah7114]

Can anyone please tell me how exactly we can identify which calls are parallel by using chrome dev tools ???

[@rajashekhar433]

Thanks for the video and 1. Can we get TCP connection info in req object 2. Any Roadmap for learning Nodejs and AWS

[@rishiprotimbose6167]

I wonder why you don't use COMMAND + ALT + I to access Dev tools... 🤔

[@hnasr]

I didn't know that shortcut thanks for sharing!!

[@rishiprotimbose6167]

@@hnasr Thanks to you for such detailed explanations ☺️

[@techwithimad4672]

07:20 actually it tooks less time (81 ms) instead of 95ms 🤣

[@hnasr]

Yeah the first call was stalled for some reason when i opened a new tab we didn’t get any stalling

[@syrix5914]

Show it.

[@racionator2668]

I wonna be that kid FIRST Yes i will go out now

[@ינוןאלבז-כ1ז]

Probably it's too late but hi show it