Το F12 του DevTools Showdown Edge εναντίον του Firefox εναντίον του Chrome

Τα εργαλεία για προγραμματιστές του Microsoft Edge, το νέο προεπιλεγμένο πρόγραμμα περιήγησης των Windows 10, έχει ένα μοντέρνο σχεδιασμό και μερικά νέα χαρακτηριστικά σε σύγκριση με τον προκάτοχό του, το F12 Dev Tools του Internet Explorer 11.

Το ερώτημα κατά πόσο τα εργαλεία dev της Microsoft Edge μετριούνται στους δημοφιλείς ανταγωνιστές τους - τα εργαλεία dev σε άλλα σύγχρονα προγράμματα περιήγησης, όπως το Mozilla Firefox και το Google Chrome, δημιουργούνται φυσικά στο μυαλό πολλών προγραμματιστών.

Σε αυτή την ανάρτηση, προσπαθούμε να απαντήσουμε σε αυτή την ερώτηση και να μάθουμε αν οι Edge's F12 Dev Tools αξίζουν πραγματικά να χρησιμοποιήσουν. Θα συγκρίνουμε τις δυνατότητές του με εκείνες των Εργαλείων προγραμματιστή του Firefox και των DevTools του Google Chrome.

Ανοίξτε τα εργαλεία Dev

Πατώντας το πλήκτρο F12 ανοίγουν τα εργαλεία προγραμματιστών και στις 3 περιπτώσεις: Εργαλεία προγραμματιστών σε Firefox, DevTools στο Chrome και F12 Dev Tools στο Microsoft Edge. Αυτή είναι η συντόμευση πληκτρολογίου όπου το επίσημο όνομα του F12 Dev Tools της Edge προέρχεται από.

Όταν ανοίγετε τα εργαλεία της Edge της Edge, μπορείτε να βιώσετε αμέσως μία από τις πιο γνωστές αδυναμίες της: αυτή τη στιγμή είναι είναι αδύνατο να συνδέσετε τα εργαλεία σε ένα υπάρχον παράθυρο. Παρόλο που μπορείτε να παρακολουθήσετε το τι συμβαίνει στην οθόνη στα Εργαλεία για προγραμματιστές του Firefox και στο Chrome DevTools, συνδέοντας το παράθυρο εργαλείων dev στο κάτω μέρος της οθόνης, δεν μπορείτε (αυτήν τη στιγμή) να κάνετε το ίδιο με το Edge.

Οι προγραμματιστές της Microsoft ισχυρίζονται ότι θα διορθώσουν αυτό το ζήτημα σε μελλοντική ενημέρωση.

Επιθεωρήστε το DOM

ο DOM Explorer εργαλείο (Συντόμευση: CTRL + 1) είναι η πρώτη καρτέλα του F12 Dev Tools της Microsoft Edge. Η διάταξη και ο συνολικός σχεδιασμός του είναι αρκετά παρόμοια με την Στοιχείο καρτέλα του Chrome και του Επιθεωρητής στην καρτέλα Firefox, ωστόσο οι δυνατότητες διαφέρουν.

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

Μπορείς πειραματιστείτε με τους κανόνες CSS διαγράφοντας τα τρέχοντα και προσθέτοντας νέα, και μπορείτε να δείτε το δικό σας συνοπτικές αλλαγές σε ξεχωριστή υποκατηγορία που ονομάζεται “Αλλαγές” (βρίσκεται στην αριστερή πλευρά). Αυτό το τελευταίο είναι ένα χαρακτηριστικό που δεν είναι ενσωματωμένο στο Developer του Firefox και στο Chrome DevTools. Μπορεί να δώσει μια γρήγορη ανασκόπηση στον χρήστη, γι 'αυτό είναι μια πολύ χρήσιμη επιλογή.

Υπάρχουν ορισμένα χαρακτηριστικά στα Εργαλεία για προγραμματιστές του Firefox, τα οποία ούτε το Edge ούτε το Google Chrome παρέχουν αυτή τη στιγμή, αλλά μπορούν να βοηθήσουν σημαντικά στη ζωή ενός σχεδιαστή: τα εργαλεία του Ανάλυση γραμματοσειράς και του κινούμενου animation.

Στο Edge υπάρχει a cool συλλέκτης χρωμάτων αν και αυτό μπορεί να αντισταθμίσει κάπως τον χρήστη για αυτό.

Αλληλεπίδραση με το JavaScript

ο Κονσόλα καρτέλα (Συντόμευση: CTRL + 2) στο Microsoft Edge σάς επιτρέπει να αλληλεπιδράσετε με το JavaScript του ιστότοπού σας, όπως και στα Firefox και στο Chrome Dev Tools. Και οι τρεις σας επιτρέπουν να παρακολουθείτε τα σφάλματα JavaScript σε πραγματικό χρόνο και μπορείτε επίσης να τα αναλύσετε εισάγοντας τα δικά σας δεδομένα.

Το εργαλείο κονσόλας του F12 Dev Tools της Edge έχει μια ωραία δυνατότητα αυτόματης συμπλήρωσης που σας βοηθά με τις εντολές, ωστόσο φαίνεται να είναι λιγότερο ενημερωμένοι σε σύγκριση με αυτήν των Εργαλεία Firefox και Chrome Dev.

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

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

Κατανοήστε τι κάνει ο κώδικας σας

ο Debugger εργαλείο (Συντόμευση: CTRL + 3) σάς βοηθά να καταλάβετε τι συμβαίνει στον κώδικα σας κατά την εύρεση πιθανών σφαλμάτων. Μπορείτε να ορίσετε ρολόγια και σημεία διακοπής και να δείτε τις στοίβες κλήσεων.

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

Το F12 Dev Tools του Edge σας αφήνει διακόψτε τον κωδικό σας στη μέση της εκτέλεσης, και να περάσει μέσα από αυτό γραμμή με γραμμή. Έχετε επίσης την επιλογή να να βελτιώσετε την αναγνωσιμότητα ενός αρχείου JavaScript που έχει δημιουργηθεί ή διαγραφεί, και μπορείς να διορθώσετε διαφορετικούς πόρους (JavaScript, επεκτάσεις κ.λπ.) μία προς μία.

Τα προγράμματα Firefox και Chrome DevTools παρέχουν όλες αυτές τις λειτουργίες, έτσι ώστε το Edge να μην προσφέρει μια εξαιρετική εμπειρία εντοπισμού σφαλμάτων, αλλά παρέχει στον χρήστη ένα αξιόπιστο και αξιόπιστο εργαλείο που ταιριάζει με τους ανταγωνιστές του.

Ρίξτε μια ματιά στην επικοινωνία περιήγησης-διακομιστή

ο Δίκτυο εργαλείο (Συντόμευση: CTRL + 4) έχει επανασχεδιαστεί πλήρως για το Microsoft Edge από τον Internet Explorer 11. Με τη βοήθεια αυτού του εύχρηστου εργαλείου μπορείτε ακολουθήστε την επικοινωνία μεταξύ του διακομιστή και του προγράμματος περιήγησης, και επιθεωρήστε τα μεμονωμένα αιτήματα.

Μπορείς φιλτράρετε τα αποτελέσματα ανά τύπο περιεχομένου όπως φύλλα στυλ, εικόνες, μέσα, γραμματοσειρές, XHR και πολλά άλλα. Μπορείτε επίσης να εντοπίστε το AJAX με τη βοήθεια του εργαλείου Δικτύου.

Η καρτέλα Edge's και Firefox του Network προσφέρει αρκετά παρόμοιες δυνατότητες και διεπαφή χρήστη. Και οι δύο έχουν ένα φιλικό προς το χρήστη παράθυρο πλευρικής μπάρας που σας επιτρέπει να ρίξετε μια ματιά στην κεφαλίδα HTTP της επιλεγμένης πηγής, το σώμα HTTP, τις παραμέτρους, τα σχετικά cookies και τα χρονοδιαγράμματα, item-by-item.

Η καρτέλα Δίκτυο Chrome DevTools δεν διαθέτει παράθυρο όπως αυτό, αλλά αν κάνετε κλικ στις αιτήσεις μία-μία μπορείτε να δείτε τις ίδιες πληροφορίες. Ωστόσο, είναι μια λιγότερο έξυπνη λύση.

Παρακολούθηση αργών σελίδων

ο Εκτέλεση (Συντόμευση: CTRL + 5) σας βοηθά να κατανοήσετε τους λόγους πίσω από μια αργή ιστοσελίδα. Με το εργαλείο απόδοσης η Microsoft έκανε ένα τεράστιο άλμα προς τα εμπρός, συνδυάζοντας το προηγούμενο UI Ανταπόκριση και Profiler εργαλεία για να δημιουργήσετε μια τελική προβολή όλων των σεναρίων και να προβάλετε την απόδοση.

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

Κατά τη διάρκεια της διαδικασίας δοκιμής διαπιστώσαμε ότι το εργαλείο απόδοσης στο Edge μας έδωσε περισσότερες πληροφορίες σχετικά με θέματα ταχύτητας από είτε το Developer του Firefox είτε το Chrome DevTools. Το περιβάλλον εργασίας χρήστη της καρτέλας Performance in Edge είναι αρκετά καλά σχεδιασμένο, βοηθώντας μας με πολλές οπτικές ενδείξεις και είναι σχετικά εύκολο στη χρήση. Αν θέλετε να μάθετε περισσότερα σχετικά με τον τρόπο χρήσης του, διαβάστε τα λεπτομερή Έγγραφα.

Διάγνωση προβλημάτων μνήμης

ο Μνήμη Το εργαλείο (Συντόμευση: CTRL + 6) σας δίνει τη δυνατότητα βρείτε διαρροές μνήμης που μπορεί επίσης να επιβραδύνει την ιστοσελίδα σας, επιπλέον μπορεί επηρεάζουν τη σταθερότητα του ιστοτόπου σας.

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

Επίσης, το Chrome DevTools διαθέτει ένα όμορφο προφίλ μνήμης στην καρτέλα Προφίλ, ενώ το Firefox Developer δεν παρέχει αυτήν την δυνατότητα από προεπιλογή, αλλά μπορείτε να κατεβάσετε και να εγκαταστήσετε πρόσθετα όπως αυτό, αν θέλετε. Ο προφίλ μνήμης του Chrome DevTools είναι αρκετά προηγμένος και προσφέρει περισσότερα χαρακτηριστικά από τα Edge, για παράδειγμα σας επιτρέπει καταγράψτε τις παραμέτρους αντικειμένων JavaScript σε βάθος χρόνου που μπορεί να σας βοηθήσει να απομονώσετε διαρροές μνήμης.

Δοκιμάστε το site σας σε διαφορετικά μεγέθη οθόνης

ο Αμιλλα εργαλείο (Συντόμευση: CTRL + 7) σάς δίνει τη δυνατότητα να δοκιμάσετε τον ιστότοπό σας υπό διαφορετικές συνθήκες. Μπορείτε να επιλέξετε ανάμεσα σε δύο προφίλ προγράμματος περιήγησης, το Desktop και τα Windows 10 Mobile, καθώς και από πολλούς διαφορετικούς πράκτορες χρηστών, συμπεριλαμβανομένων όλων των εκδόσεων του Internet Explorer στον υπολογιστή σας και του IE6, μαζί με πολλούς ανταγωνιστές του Edge, Chrome, Firefox, Safari κ.λπ..

Είναι ενδιαφέρον ότι έχετε την επιλογή να πάρετε ένα δείτε τη σελίδα σας ως Bing Bot. Μπορείτε επίσης να προσομοίωση ενός GPS, και να θέσει διαφορετικά ψηφίσματα και προσανατολισμούς.

Τα Εργαλεία για προγραμματιστές του Firefox δεν διαθέτουν εργαλείο εξομοίωσης συσκευών, αλλά το Chrome DevTools διαθέτει έναν τόσο εξελιγμένο εξομοιωτή, που η Edge δεν μπορεί να ανταγωνιστεί με αυτό.

Για παράδειγμα, η οθόνη εξομοίωσης του Chrome έχει ένα ακριβές πλέγμα όπου εισάγεται η εξομοιωμένη προβολή, και όχι μόνο μπορείτε να επιλέξετε από τα προφίλ του προγράμματος περιήγησης και τους πράκτορες χρήστη, αλλά και από πολλές συσκευές όπως το διαφορετικές εκδόσεις του iPhone ή του Samsung Galaxy και πολλών άλλων. Ο εξομοιωτής του Chrome DevTools διαθέτει επίσης ένα εύχρηστο εργαλείο Επιλογή μεγέθυνσης και μπορείτε να δοκιμάσετε το site σας σε διάφορα δίκτυα όπως 3G, 4G, DSL, WiFi, κλπ.

Περίληψη

Σε γενικές γραμμές, το F12 Dev Tools της Microsoft Edge φαίνεται να είναι εκπληκτικά καλό. Παρέχει χαρακτηριστικά αρκετά παρόμοια με τα δημοφιλή εργαλεία ανάπτυξης ιστοσελίδων άλλων σύγχρονων προγραμμάτων περιήγησης. Υπάρχουν δύο περιοχές όπου το F12 Dev Tools της Edge είναι αρκετά ισχυρό: το διεπαφή χρήστη αυτό είναι πραγματικά διαισθητικό, φιλικό προς το χρήστη και καλά σχεδιασμένο, και το διαγνωστικά εργαλεία απόδοσης.

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