Βελτιώσεις στα εργαλεία προγραμματισμού F12 στον Internet Explorer 11

Αλλαγές στο περιβάλλον εργασίας χρήστη F12

Νέα εικονίδια και ειδοποιήσειςΤα εικονίδια για τα εργαλεία μνήμης και προφίλ έχουν αλλάξει.

Υπάρχουν πλέον ενδείξεις στη γραμμή εικονιδίων για σφάλματα στην κονσόλα, αλλαγές στις ρυθμίσεις προσομοίωσης και για ενεργές περιόδους λειτουργίας προφίλ στα εργαλεία μνήμης, προφίλ και απόκρισης περιβάλλοντος εργασίας χρήστη. Η παρακάτω εικόνα εμφανίζει τα νέα εικονίδια με ειδοποιήσεις στα εικονίδια εργαλείου κονσόλας και μνήμης, υποδεικνύοντας ότι εμφανίζονται δύο σφάλματα κονσόλας και ότι αυτή τη στιγμή βρίσκεται σε εξέλιξη μια περίοδος λειτουργίας προφίλ μνήμης:

Περιήγηση με υπερσύνολο F6 μέσα σε εργαλείαΧρήση του πλήκτρου F6 είναι σαν να χρησιμοποιείτε το πλήκτρο Tab για να περιηγείστε σε ένα εργαλείο, αλλά "μετακινείται" σε ένα επιλεγμένο σύνολο από τα πιο συχνά χρησιμοποιούμενα στοιχεία σε ένα παράθυρο εργαλείων και όχι μέσα από κάθε επιλεγμένο στοιχείο. Αυτό είναι μέρος ενός συνολικά καθαρότερου συστήματος για τη χρήση του πληκτρολογίου για την περιήγηση εντός και μεταξύ εργαλείων.

Μετακίνηση μεταξύ των εργαλείων που χρησιμοποιήθηκαν πρόσφατα χρησιμοποιώντας το πληκτρολόγιοΜπορείτε να χρησιμοποιήσετε τον συνδυασμό πλήκτρων Ctrl + [ για να μετακινηθείτε προς τα πίσω στο ιστορικό περιήγησης εργαλείων και τον συνδυασμό πλήκτρων CTRL + ] για να μεταβείτε προς τα εμπρός, παρόμοια με τα βέλη πίσω και εμπρός κατά την περιήγηση.

Γρήγορη πρόσβαση στη λειτουργία εγγράφου Μια νέα αναπτυσσόμενη λίστα προστίθεται στο επάνω μέρος του περιβάλλοντος εργασίας που σας επιτρέπει να έχετε πρόσβαση στη λειτουργία εγγράφου από οποιοδήποτε εργαλείο, επομένως δεν χρειάζεται να αλλάξετε εργαλεία.

Αλλαγές κονσόλας

Console.timeStamp()Όταν καλείται από την κονσόλα ή εντός κώδικα, το Console.timeStamp() εξάγεται στην κονσόλα, ο αριθμός των χιλιοστών του δευτερολέπτου είναι ανοιχτός στην τρέχουσα καρτέλα του προγράμματος περιήγησης. Εάν καλείται κατά τη διάρκεια μιας περιόδου λειτουργίας προφίλ με το εργαλείο ανταπόκρισης του περιβάλλοντος εργασίας χρήστη, δημιουργεί ένα σημάδι χρήστη στη λωρίδα χρόνου της περιόδου λειτουργίας μαζί με μια χρονική σήμανση με βάση την ώρα από την έναρξη της περιόδου λειτουργίας.

Ο συνδυασμός πλήκτρων Ctrl + L διαγράφει την κονσόλα όλων των μηνυμάτων

Ακριβής αυτόματη καταχώρησηΗ αυτόματη καταχώρηση της κονσόλας δεν περιλαμβάνει πλέον ιδιότητες ευρετηρίου. Αυτό έχει ως αποτέλεσμα μια πιο καθαρή και ακριβέστερη επιλογή προτάσεων αυτόματης καταχώρησης.

$, $$, $x, $0-$5 και $_ έχουν προστεθεί στη λίστα αυτόματης καταχώρησης κονσόλας για λόγους ευκολίας και για να γίνει η συμπεριφορά της κονσόλας πιο συνεπής με άλλα προγράμματα περιήγησης.

Ένδειξη μη ενημερωμένου μηνύματοςΕάν έχετε επιλέξει να απενεργοποιήσετε την επιλογή Απαλοιφή κατά την περιήγηση, τα παλαιότερα μηνύματα κονσόλας έχουν τα εικονίδιά τους απενεργοποιημένα, ώστε να διακρίνονται τα μηνύματα για την ενεργή σελίδα και τα μηνύματα από προηγούμενες σελίδες στο ιστορικό σας.

Αλλαγές στην Εξερεύνηση DOM

Αλλαγή γραμμών στο τμήμα παραθύρου "Υπολογισμός"Οι γραμμές αλλαγής (διαφορετικά χρώματα για τις τροποποιημένες ιδιότητες, τις ιδιότητες προσθήκης και τις διαγραμμένες ιδιότητες) που οι χρήστες απολαμβάνουν το παράθυρο "Στυλ" εμφανίζονται τώρα στο παράθυρο "Στυλ υπολογισμού".

Αλλαγές στον εντοπισμό σφαλμάτων

Προσδιορισμός αντιστοιχίσεων προέλευσης Κάντε δεξιό κλικ στην καρτέλα ενός εγγράφου στο Πρόγραμμα εντοπισμού σφαλμάτων και μπορείτε να καθορίσετε ένα χάρτη προέλευσης. Αυτό καθιστά δυνατή τη χρήση χαρτών προέλευσης μαζί με τον απεσταλμένο κώδικα που έχει καταργήσει το σχόλιο του χάρτη προέλευσης.

Αυτόματη καταχώρηση στο WatchesNow, κατά την προσθήκη ενός ρολογιού, σας προτείνονται επιλογές αυτόματης καταχώρησης.

Έλεγχος επιστρεφόμενης τιμήςΌταν σπάτε μια συνάρτηση με επιστρεφόμενη τιμή, μπείτε στη συνάρτηση μέχρι να φτάσετε στο άγκιστρο κλεισίματος. Η τιμή επιστροφής θα εμφανιστεί στην ενότητα "Ντόπιοι" του παραθύρου "Ρολόγια". Επαναλάβετε το βήμα και η τιμή θα επιστραφεί στον κώδικα που τον απαιτούσε.

Για μια γρήγορη επίδειξη, δοκιμάστε αυτόν τον κωδικό στην κονσόλα:

function showval() { var x = 0; x++; debugger; return x; } showval(); 

Θα καλέσει τη συνάρτηση, θα διακόψει τον εντοπισμό σφαλμάτων και μπορείτε να μπείτε σε αυτήν για να δείτε την τιμή επιστροφής.

Πολλαπλή επιλογή για σημεία διακοπήςCtrl + κλικ, Shift + κλικ και Ctrl + A μπορεί να χρησιμοποιηθεί για την επιλογή πολλών σημείων διακοπής στο τμήμα παραθύρου Σημεία διακοπής.

Συνέχεια και παράβλεψη διαλείμματαPress F5 για να συνεχίσετε στο επόμενο διάλειμμα. Κρατήστε πατημένο το πλήκτρο F5 για να συνεχίσετε πέρα από πολλά διαλείμματα μέχρι να αφήσετε το πλήκτρο F5.

Σημεία διακοπής συμβάντος και σημεία ανίχνευσηςΑυτά λειτουργούν παρόμοια με τα σημεία διακοπής και τα ίχνη που υπάρχουν ήδη στα εργαλεία F12, αλλά αντί να ενεργοποιούνται κατά την εκτέλεση ενός συγκεκριμένου μπλοκ κώδικα, ενεργοποιούνται όταν ενεργοποιείται ένα συγκεκριμένο συμβάν. Κάθε ένα έχει ένα προαιρετικό φίλτρο υπό όρους για να σας βοηθήσει να περιορίσετε το εύρος τους στη συγκεκριμένη παρουσία ενός συμβάντος που θέλετε να ελέγξετε. Μπορούν να προστεθούν χρησιμοποιώντας τα εικονίδια Προσθήκη σημείου ανίχνευσης συμβάντος και Προσθήκη σημείου διακοπής συμβάντος που επισημαίνονται στην παρακάτω εικόνα:

Αλλαγές στο εργαλείο ανταπόκρισης περιβάλλοντος εργασίας χρήστη

Περίοδοι λειτουργίας επιδόσεων εισαγωγής/εξαγωγήςΔεν χρειάζεται να αναπαράγετε το δοκιμαστικό κείμενό σας κάθε φορά που θέλετε να αναλύσετε τα δεδομένα που παράγει ή να κάνετε κοινή χρήση αυτών των δεδομένων με έναν συνάδελφο. Τα εικονίδια εισαγωγής (φακέλου) και εξαγωγής (δίσκος) στη γραμμή εικονιδίων απόκρισης του περιβάλλοντος εργασίας χρήστη σάς επιτρέπουν να αποθηκεύετε τα στιγμιότυπα μνήμης σε ένα αρχείο που μπορεί να εισαχθεί αργότερα.

Προεπισκόπηση εικόναςΕάν έχετε δει μια αίτηση HTTP για μια εικόνα και αναρωτιέστε ποια εικόνα ήταν, η εικόνα τώρα εμφανίζεται σε προεπισκόπηση στις λεπτομέρειες του συμβάντος.

Φιλτράρισμα συμβάντωνΤο κουμπί Φιλτράρισμα συμβάντων είναι μικρό αλλά ισχυρό. Πίσω από αυτό το κουμπί είναι ένα μενού που σας επιτρέπει να φιλτράρετε συμβάντα με πολλούς τρόπους και κάθε τρόπος έχει σημαντική επίδραση:

• Φίλτρο ονόματος συμβάντος: Φιλτράρετε για οποιοδήποτε όνομα συμβάντος που περιέχει αντιστοιχία για το κείμενο του φίλτρου.

• Φίλτρο δραστηριότητας περιβάλλοντος εργασίας χρήστη: Χρησιμοποιώντας τα πλαίσια ελέγχου, μπορείτε να εξαιρέσετε μεγάλες κατηγορίες συμβάντων για να διευκολύνετε την εστίαση στην περιοχή που διερευνάτε. Για παράδειγμα, εάν σας ενδιαφέρει μόνο η δραστηριότητα δικτύου, μπορείτε να φιλτράρετε όλους τους θορύβους του περιβάλλοντος εργασίας χρήστη και της συλλογής απορριμάτων.

• Φίλτρο χρονικού ορίου: Αυτή η δυνατότητα φιλτράρει συμβάντα ανώτατου επιπέδου με διάρκεια μικρότερη από ένα χιλιοστό του δευτερολέπτου. Σε πολλά σενάρια, αυτό απλοποιεί δραματικά την προβολή καταρράκτη και σας βοηθά να εστιάζετε σε συμβάντα με μεγαλύτερη απήχηση.
  

Συμβάντα δέσμης ενεργειών HTML5Αν χρησιμοποιείτε ακροατές ερωτημάτων πολυμέσων ή MutationObservers, μπορείτε πλέον να προσδιορίσετε το αντίστοιχο κόστος τους όταν εκτελείτε μια συνεδρία προφίλ επιδόσεων.

Ομαδοποίηση πλαισίουΤο κουμπί μεταξύ της αναπτυσσόμενης λίστας Ταξινόμηση κατά και του μενού Συμβάντα φίλτρου εναλλάσσει την ομαδοποίηση πλαισίου. Αυτή η ομάδα ομαδοποιεί συμβάντα ανώτατου επιπέδου στην αντίστοιχη μονάδα εργασίας (ή "πλαίσιο") κατά τη διάρκεια χρονικών περιόδων κατά τις οποίες πραγματοποιούνταν κινήσεις ή οπτικές ενημερώσεις. Τα πλαίσια αντιμετωπίζονται όπως και τα άλλα συμβάντα, ώστε να μπορούν να ταξινομηθούν και να φιλτραριστούν και παρέχουν μια σύνοψη χρόνου χωρίς αποκλεισμούς.

Μετρήσεις χρήστηΕάν χρησιμοποιήσετε το API performance.mark() για να προσθέσετε τρίγωνα στη λωρίδα χρόνου για να υποδείξετε πού προέκυψαν συγκεκριμένα συμβάντα, το API performance.measure() επεκτείνει τη χρησιμότητα των σημαδιών επιδόσεων. Χρησιμοποιήστε performance.measure() για να δημιουργήσετε ένα συμβάν μέτρησης χρήστη που περιλαμβάνει το χρόνο μεταξύ δύο συμβάντων performance.mark(), στη συνέχεια, κάντε δεξί κλικ στο συμβάν και, στη συνέχεια, χρησιμοποιήστε την επιλογή Φιλτράρισμα σε συμβάν για να επιλέξετε μόνο τα συμβάντα μεταξύ των δύο σημαδιών.

Χρωματισμός για DOMΑυτή η δυνατότητα προσθέτει χρωματισμό σε στοιχεία DOM, λεκτικές σταθερές συμβολοσειρών και λεκτικές σταθερές αριθμών. Εκτός από την εμφάνιση και τη συμπεριφορά του περιεχομένου μέσα στα διάφορα εργαλεία F12, προσθέτει περισσότερο οπτικό ενδιαφέρον στο εργαλείο ανταπόκρισης του περιβάλλοντος εργασίας χρήστη.

Σύνοψη επιλογήςΌταν επιλέγετε ένα τμήμα της λωρίδας χρόνου, το παράθυρο λεπτομερειών συμβάντος θα εμφανίζει μια σύνοψη της επιλογής. Τοποθετήστε το δείκτη του ποντικιού επάνω από διαφορετικά τμήματα του κυκλικού γραφήματος για μια συμβουλή εργαλείου με την κατηγορία συμβάντος του τμήματος.

Υποστήριξη για console.timeStamp()Χρησιμοποιώντας τη μέθοδο console.timeStamp() στον κώδικά σας ή στην κονσόλα κατά τη διάρκεια μιας περιόδου λειτουργίας προφίλ δημιουργείται ένα σημάδι χρήστη στη λωρίδα χρόνου που έχει το χρόνο από την έναρξη της περιόδου λειτουργίας προφίλ.

Αλλαγές στο εργαλείο μνήμης

Dominator foldingDominator folding helps simplify the contents of a snapshot by removing objects from the top-level views that are logically components of another object (for example, a <BR> within a <DIV>, a Scope held on by a Function) and tend to be extra details that don't improve your insight into the data, αλλά μπορεί να χάσει το χρόνο σου. 

Για παράδειγμα, η παρακάτω εικόνα δείχνει τις προβολές πριν και μετά, που δείχνουν πώς η αναδίπλωση dominator βελτιώνει την "ιστορία" που λέει το εργαλείο. Η διπλωμένη προβολή εμφανίζει 30 HTML <στοιχεία> DIV, τα οποία αντιπροσωπεύουν 15,64 megabyte (MB) μνήμης και διατηρούνται σε κόμβους DOM που έχουν αποσπαστεί. Σε πολλές περιπτώσεις, δεν είναι σημαντικό να γνωρίζετε τη σύνθεση ενός αντικειμένου, τόσο πολύ όσο να γνωρίζετε απλώς ότι είναι πολύ μεγάλο ή ότι διαρρέει (ειδικά όταν χρησιμοποιείτε βιβλιοθήκες τρίτων).

Χρωματισμός dom, συμβολοσειρά & λεκτικές σταθερές αριθμώνΑυτή η δυνατότητα προσθέτει χρωματισμό σε στοιχεία DOM, λεκτικές σταθερές συμβολοσειρών και λεκτικές σταθερές αριθμών. Εκτός από το να κάνει το περιεχόμενο μέσα στα διάφορα εργαλεία F12 να έχει πιο παρόμοια εμφάνιση και συμπεριφορά, κάνει την ανάλυση μνήμης πιο οπτικά ενδιαφέρουσα.

Το φιλτράρισμα του κύκλου των ριζώνWant για να είναι σε θέση να διερευνήσει τη σύνθεση ενός αντικειμένου χωρίς να χαθεί εν αγνοία του σε μια κυκλική διαδρομή αναφοράς; Αυτή η δυνατότητα εντοπίζει θυγατρικές αναφορές που είναι κυκλικές και τις "περικόπτει", ώστε να μην συγχέεστε διασχίζοντας τις στο άπειρο. Επιπλέον, σχολιάζεται με αυτές τις αναφορές, ώστε να είναι σαφές όταν μια αναφορά έχει "περικοπεί".

Περίοδος λειτουργίας εισαγωγής/εξαγωγήςΔεν θα πρέπει να χρειάζεται να αναπαράγετε την περίπτωση δοκιμής κάθε φορά που θέλετε να αναλύσετε τα δεδομένα που παράγει ή να μοιραστείτε αυτά τα δεδομένα με έναν συνάδελφο. Τα εικονίδια εισαγωγής (φακέλου) και εξαγωγής (δίσκος) στη γραμμή εικονιδίων του εργαλείου μνήμης σάς επιτρέπουν να αποθηκεύετε τα στιγμιότυπα μνήμης σε ένα αρχείο που μπορεί να εισαχθεί αργότερα.

Αλλαγές στο εργαλείο προσομοίωσης

Ρυθμίσεις διατήρησης και επαναφοράΑ εικονίδιο ρυθμίσεων διατήρησης προσομοίωσης προστίθεται στο εργαλείο προσομοίωσης. Αυτό θα διατηρήσει τις τρέχουσες ρυθμίσεις προσομοίωσης μέχρι να απενεργοποιηθεί συγκεκριμένα. Αυτό σας επιτρέπει να εργαστείτε, να κλείσετε το πρόγραμμα περιήγησης και, στη συνέχεια, να επιστρέψετε με τις ρυθμίσεις προσομοίωσης ανέπαφες. Στα δεξιά αυτού του εικονιδίου βρίσκεται το εικονίδιο Επαναφορά ρυθμίσεων προσομοίωσης, το οποίο επαναφέρει γρήγορα το εργαλείο στις προεπιλεγμένες τιμές.