Demystifying the Browser Networking Tab in Developer Tools With Examples
ฝัง
- เผยแพร่เมื่อ 9 พ.ย. 2020
- In this video I go through the Network Tab in Chrome and explain all the fields with example. I would first go through example.org and explain all the fields HTTP Method, Protocol, Scheme, Connection ID, remote address and more. We will then go to nginx.org and go through each request and explain all the properties.
🎙️Listen to the Backend Engineering Podcast
husseinnasser.com/podcast
🏭 Backend Engineering Videos
• Backend Engineering (B...
💾 Database Engineering Videos
• Database Engineering
🏰 Load Balancing and Proxies Videos
• Proxies
🏛️ Software Archtiecture Videos
• Software Architecture
📩 Messaging Systems
• Message Queues & PubSu...
Become a Member
/ @hnasr
Support me on PayPal
bit.ly/33ENps4
Stay Awesome,
Hussein - วิทยาศาสตร์และเทคโนโลยี
![[4K] BABYMONSTER(베이비몬스터) “FOREVER” Band LIVE Concert “영원히” 베몬만을 사랑하게 되…💗 [it’s KPOP LIVE 잇츠라이브]](http://i.ytimg.com/vi/TQfC0xdpiw4/mqdefault.jpg)
Got answer from Google, connection id 0 means devtools could not figure out the id .. they will fix that to null so to avoid the confusion
twitter.com/JecelynYeen/status/1326467885070393344?s=20
You're AMAZING!! :O
PLEASE PLEASE PLEASE Make a 'Chrome Developer Tools' playlist series. And have one video per tab, some vids might be short some long! But that's ok!
From someone semi-technical - thank you for the clarifying content. Love referring back to your videos when I don't quite grock the concept in the wild
value packed content as always 💪
your channel is a resource. repository of knowledge 🙏
You are a gem in this community. Thanks for sharing... Love your channel... 👍👍👍
This channel is GOLD. Gold. Gold. Gold.
Fantastic video. Going straight to your "How TH-cam Efficiently Streams Videos Through HTTP" video now. Love your content.
enjoy! thanks for watching
Wow it's gonna be useful. Thank you so much 😁
It was a great video, you got network tab, really demystified for me! Thanks!
ِ
شكراً يا بن ناصر
Amazing bro, Thank you for valuable content
So detailed videos. Thank you for your job. You are amazing
Thank you sir, as always.
Thank you brother. Take love
Fantastic, thanks so much, I real eye opener on who is on the network
You taught Chrome dev tools better than Google dudes on YT. Amazzzing!!
Thank you Hussein
amazing vid, really beneficial 👏
thaks man, i learned a lot from u, did a great job of teaching
Thanks Hussein.
Demystify , great word
thanks hussein
this is amazing......
Again a very informative vid - these 20 minutes watching were well spent - thank you Hussein!
How are you able to quickly zoom in on specific elements of your screen while recording?
@hnasr what does Remote Address for a resource mean ? Does it mean that the Resource is hosted on that particular remote address ?
Amazing!
Out of topic question: How do you take backup of files in the server and database everyday? And where do you store them? Do you store them places like local computer or git ?
I love u already 😆
yes thank you sir
I like the insights you give, Hussein! I would like to ask, according to your experience, do you recommend that a REST API returns the total list of items in the responses of create/update/delete requests or just the created/updated entity?
I've seen apps, that send the GET all Items request to the API after successful create/update/delete requests in order to show on the UI the updated list of data. But this approach increases the number of sent API requests.
I also don't like that the UI updates the list of data by itself after create/update/delete, because this requires a lot of parsing and looping & with logic on the client side, we risk having/showing a state of data on the UI that is different from the real state of data in the DB/backend.
I appreciate your feedback!
Thank you for this!! There aren't many good resources on Chrome Dev Tools out there
I love you !
How can you find at what time the request got initiated by end user
Getting 404 of my style.css in status section of network tab. Kindly guide me through this error...😢
Hussein how can I tell if it is a word press site or standard html I want to build a html website instead of a word press site
What does the request mean? I understand that you should have less request as possible. Is it the amount of request that the server has request in order to load your website? Thanks.
GOLD
Great video, but redirections are mainly for Google Analytics, I think this is due to Google Analytics SDK does these internally and developer has no control over it, might google can optimize these once http3 is widely used, they might be checking browser support for different things this is why so many redirections from HTTP/1.1 to direct HTTP3.
Thanks for the video and Google Analytics for tracking use behavior right?
Can you please provide road map for nodejs
one way to understand the backend
Please do a video on the waterfall as well
I am running 3 gpt-4, they constantly use the 700 tb
That is meant for one.
They become more stupid, Please i need advice on how to pitch 1 G4 and repair the scriptprocessernode (URL)
The account is way too full
Help please.
Can't find a reliable place to confirm this, but the connection id for google and facebook request might be 0 because they are using QUIC which is built over UDP so there is no possibility of a TCP connection id
Got answer from Google, connection id 0 means devtools could not figure out the id .. they will fix that to null so to avoid the confusion
twitter.com/JecelynYeen/status/1326467885070393344?s=20
I think the connection 0 means when the server know the upcoming request will be redirected anyway, it might be closing the connection immediately with ID 0.
0 only coming when there is a redirection either 302 or 307
The quick protocol http29 or httpQ3 are also using connection ID 0
00:02 Demystifying the dev tools network tab
02:12 Understanding the HTTP 1.1 protocol and its implications for TCP connections.
04:17 Exploring different types of requests and their responses
06:30 Understanding TCP connections and request handling in the browser networking tab.
08:39 Demystifying TCP connections and HTTP 3 redirection
10:58 Explanation of browser networking with examples
13:08 Avoid unnecessary redirection for better performance.
15:20 HTTP/2 allows multiple requests to be sent simultaneously.
17:18 Facebook is using the latest version of quick, H329, and HTTP 3.
19:14 Understanding how the client and server communicate with different protocols
How can we hide the response?
ي هندسه ازاي اغير ملف من ملفات النتورك دي عايز العب ف ملف معين و اغير البيانات ال فيه ازاي ؟؟؟
Hi Hussein,
Thanks a lot for your videos! Your Udemy course is great too!
Sorry for the noob question! But why do we see so many files requested when we open the website in the Network tab?
it varies from website to website as well! Does the backend engineer have to worry about sending those files seperately?
Short answer: no.
Neither the backend nor the frontend have to worry about those files in almost all cases. Frameworks like React /(Next)/ Vue, etc. automatically do this. If you try to open those files it will look gibberish cause it's the output of build tools minification (lookup JS esbuild, webpack, bundling, transpilation ... all are relevant)
Can i suggest if you can make another few videos like this BUT for dev tools on other browsers. All other popular browsers other than chrome
The only thing i didn't understood is how you manage time to this stuff :). Love from india.
I wake up at 5am every day and finish working by 5pm, plenty of the time 😊
@@hnasr I'll try to do same, thanks.
Is there a way to find the total page load time?
performance??
Hello
14:30 😂😂😂
Bradman speaking ohh used recorder test voice
Timestamps?
d
diuimib vidieioi
Why didn't you just look at the actual website ?!?
Because he is explaining the network tab for this particular website.