Το Network Monitor καταγράφει και εμφανίζει κάθε network αίτημα που κάνει η τρέχουσα σελίδα — κλήσεις XHR/Fetch API, φορτώσεις scripts, λήψεις stylesheets, λήψεις εικόνων, αρχεία γραμματοσειρών και περισσότερα. Δείτε URLs, HTTP μεθόδους, κωδικούς κατάστασης, μεγέθη αποκρίσεων και χρόνους — όλα σε ζωντανά ενημερούμενο floating panel χωρίς άνοιγμα DevTools.
Η καρτέλα Network του Chrome DevTools είναι ισχυρή αλλά βαριά — καταλαμβάνει σημαντικό χώρο οθόνης, επαναφέρεται κατά την πλοήγηση και απαιτεί εναλλαγή μακριά από το περιεχόμενο σελίδας. Το Network Monitor παρέχει τα ουσιώδη χαρακτηριστικά παρακολούθησης δικτύου σε ελαφρύ floating panel πάνω από τη σελίδα. Υποκλέπτει αιτήματα XHR και Fetch και παρακολουθεί φόρτωση πόρων μέσω του Performance API, εμφανίζοντας κάθε network αίτημα καθώς συμβαίνει. Κάθε αίτημα εμφανίζει URL, HTTP μέθοδο (GET, POST, PUT, DELETE), κωδικό κατάστασης (χρωματικά κωδικοποιημένο: πράσινο για 2xx, κίτρινο για 3xx, κόκκινο για 4xx/5xx), μέγεθος απόκρισης σε bytes και διάρκεια σε milliseconds. Κάντε κλικ σε οποιοδήποτε αίτημα για επέκταση λεπτομερειών: request headers, response headers, request payload (για POST/PUT), προεπισκόπηση response body και ανάλυση χρόνων. Φιλτράρετε κατά τύπο (XHR/Fetch, JS, CSS, Εικόνες, Γραμματοσειρές).
Κάθε network αίτημα εμφανίζεται στο panel καθώς συμβαίνει — φορτώσεις σελίδας, κλήσεις API, lazy-loaded πόροι και background fetches. Η ροή ενημερώνεται σε πραγματικό χρόνο χωρίς χειροκίνητη ανανέωση.
Κάντε κλικ σε οποιοδήποτε αίτημα για πλήρεις λεπτομέρειες: URL αιτήματος, μέθοδο, headers, payload (για POST/PUT), response headers, προεπισκόπηση response body (JSON αυτόματα μορφοποιημένο), κωδικό κατάστασης, μέγεθος και ανάλυση χρόνων.
Φιλτράρετε αιτήματα κατά τύπο: XHR/Fetch (κλήσεις API), JS (scripts), CSS (stylesheets), IMG (εικόνες), Font (web fonts) ή Όλα. Απομονώστε API traffic από φόρτωση πόρων για εστίαση σε αυτό που έχει σημασία.
Οι κωδικοί κατάστασης έχουν χρωματική κωδικοποίηση για άμεση αναγνώριση: πράσινο για 2xx (επιτυχία), κίτρινο για 3xx (ανακατευθύνσεις), κόκκινο για 4xx (σφάλματα client) και 5xx (σφάλματα server). Τα αποτυχημένα αιτήματα είναι αμέσως ορατά.
Κάθε αίτημα εμφανίζει το μέγεθος απόκρισης (σε KB) και τη συνολική διάρκεια (σε milliseconds). Εντοπίστε αργές κλήσεις API, υπερμεγέθεις πόρους και περιττά αιτήματα που επηρεάζουν την απόδοση σελίδας.
Μια γραμμή σύνοψης εμφανίζει συνολικό αριθμό αιτημάτων και συνδυασμένο μέγεθος για όλα τα καταγεγραμμένα αιτήματα. Φιλτράρετε τη σύνοψη για προβολή συνόλων ανά τύπο — πόσο bandwidth δαπανάται σε scripts έναντι εικόνων έναντι κλήσεων API.
Παρακολουθήστε αιτήματα XHR/Fetch για να επαληθεύσετε ότι το frontend σας καλεί τα σωστά API endpoints με τις σωστές παραμέτρους. Κάντε κλικ για επιθεώρηση request payloads και response bodies — εντοπίστε αμέσως αναντίστοιχες μορφές δεδομένων.
Οι κόκκινες καταχωρήσεις 404 και 500 επισημαίνουν αμέσως σπασμένους πόρους ή αποτυχημένες κλήσεις API. Δείτε ποια URLs αποτυγχάνουν, πότε αποτυγχάνουν και ποια απόκριση σφάλματος επιστρέφει ο server.
Ταξινομήστε κατά διάρκεια για εύρεση των πιο αργών αιτημάτων. Ταξινομήστε κατά μέγεθος για εύρεση των μεγαλύτερων πόρων. Τα σύνολα σύνοψης δείχνουν την πλήρη εικόνα bandwidth — κάνει η σελίδα πάρα πολλά αιτήματα ή κατεβάζει πάρα πολλά δεδομένα;
Δείτε ποια network αιτήματα κάνει η σελίδα στο παρασκήνιο — analytics pings, heartbeat calls, polling αιτήματα, lazy-loaded πόροι. Κατανοήστε την πλήρη network δραστηριότητα πέρα από αυτή που είναι ορατή στον χρήστη.
Φιλτράρετε αιτήματα και ελέγξτε ποια domains επικοινωνούνται. Αναγνωρίστε scripts τρίτων που κάνουν απροσδόκητες network κλήσεις — tracking pixels, συλλογή δεδομένων ή εξωτερικές κλήσεις API που δεν γνωρίζατε.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Network Monitor. Ανοίγει panel και αρχίζει αμέσως την καταγραφή network αιτημάτων.
Χρησιμοποιήστε τη σελίδα κανονικά. Κάθε network αίτημα εμφανίζεται στη ροή καθώς γίνεται — κλήσεις API, φορτώσεις πόρων και background fetches καταγράφονται όλα.
Κάντε κλικ στα φίλτρα τύπου (XHR, JS, CSS, IMG, Font) για στένωση της προβολής. Εμφανίστε μόνο κλήσεις API για debug λήψης δεδομένων ή μόνο εικόνες για έλεγχο φόρτωσης assets.
Κάντε κλικ σε οποιαδήποτε γραμμή αιτήματος για επέκταση λεπτομερειών: URL, headers, payload, response body, κωδικός κατάστασης, μέγεθος και χρόνοι.
Οι κόκκινοι κωδικοί κατάστασης (404, 500) υποδεικνύουν αποτυχημένα αιτήματα. Αργές διάρκειες επισημαίνουν bottlenecks απόδοσης. Μεγάλα μεγέθη υποδηλώνουν πόρους που χρειάζονται βελτιστοποίηση.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
