Ιχνηλάτηση browser: από το HTTP request στο εμφανιζόμενο UI

Μοντέλο και όρια συμπερασμάτων

Η εικόνα μιας σελίδας προκύπτει από HTML, CSS, JavaScript και δικτυακές αποκρίσεις. Ξεκίνα από συγκεκριμένη ενέργεια που αναπαράγεται: άνοιγμα σελίδας, πάτημα κουμπιού ή μία κύλιση. Στο DevTools ξεχώρισε χαμένο resource (Network), JavaScript exception (Console) και σφάλμα layout/stacking (Elements/Computed).

Αυτοτελές δοκιμαστικό δείγμα

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<button id="counter">Count: 0</button>
<script>
const button = document.querySelector("#counter");
let count = 0;
button.addEventListener("click", () => {
  button.textContent = "Count: " + (++count);
});
</script>
</html>

Βήματα έρευνας και ελέγχου

Σέρβιρε το τοπικό HTML από localhost αντί να υποθέτεις ίδια συμπεριφορά στο file://. Στο Network ενεργοποίησε Preserve log και έλεγξε status, initiator, Content-Type και timing. Στο Elements δες το πραγματικό DOM, event target, computed overflow και pointer-events. Ξεχώρισε σφάλματα extensions από σφάλματα εφαρμογής. Έλεγξε desktop και mobile viewport.

Πρακτικό εργαστήριο

Πρόσθεσε ανύπαρκτο script URL και εντόπισε το 404 στο Network. Έπειτα χάλασε το click handler με άγνωστη μεταβλητή και παρατήρησε το Console, ενώ το HTML φορτώνει. Πρόσθεσε scrollable container και έλεγξε ότι τα pointer events δεν εμποδίζουν κύλιση εκτός του διαδραστικού στοιχείου.

Ελεγχόμενο πείραμα με scrolling και gestures

Βάλε έναν 3D viewer μέσα σε συγκεκριμένο container και απλό κείμενο από κάτω. Πρόσθεσε pointer listeners μόνο στο container, όχι στο document. Δοκίμασε scroll με το δάχτυλο έξω από τον viewer: η σελίδα πρέπει να μετακινείται. Μέσα στον viewer, το drag πρέπει να περιστρέφει το μοντέλο χωρίς να κλέβει όλες τις κινήσεις της σελίδας. Στο DevTools ξεχώρισε αποτυχία φόρτωσης από το Network panel και εξαίρεση handler από την Console· μπορεί να συμβαίνουν και τα δύο αλλά είναι διαφορετικές αιτίες. Έλεγξε επίσης αν υπάρχει χειρισμός με πληκτρολόγιο, όχι μόνο με ποντίκι ή αφή.