Το νέο πρόγραμμα περιήγησης που βασίζεται στο Chromium της Microsoft είχε πρόσφατα τη δεύτερη δημόσια σταθερή κυκλοφορία του, αποκαλύπτοντας το Edge 80 με πλήρη υποστήριξη ARM64 καθώς και βελτιωμένα εργαλεία για να σας βοηθήσουν να δημιουργήσετε και να εργαστείτε με περιεχόμενο ιστού. Όπως παλαιότερες εκδόσεις του τώρα παλαιού τύπου Edge, το νέο πρόγραμμα περιήγησης της Microsoft διατηρεί τη γνωστή συντόμευση F12 για να ξεκινήσει τα εργαλεία προγραμματιστή της, είτε προσαρτημένα στο πρόγραμμα περιήγησης είτε σε ξεχωριστό παράθυρο.
Αξίζει να εξοικειωθείτε με τα νέα πράγματα, καθώς παρόλο που υπάρχουν ομοιότητες με το παλαιό Edge, τώρα εργάζεστε σε έναν κόσμο Chromium και υπάρχουν πολλά περισσότερα κοινά με το Chrome και άλλα προγράμματα περιήγησης που βασίζονται στο Chromium. Αυτό δεν είναι κακό. Είναι πιο εύκολο να μεταφέρετε δεξιότητες μεταξύ προγραμμάτων περιήγησης και αν χρησιμοποιείτε το Chrome ως πρόγραμμα περιήγησης ανάπτυξης, θα είναι εύκολο να ξεκινήσετε να εργάζεστε στο νέο Edge. Ωστόσο, η Microsoft έχει κάνει κάποιες αλλαγές από μόνη της και προσπαθεί να επεκτείνει την εμπειρία του προγραμματιστή Edge σε κώδικα Visual Studio, ώστε να μπορείτε να αναπτύξετε και να δοκιμάσετε εφαρμογές JavaScript σε ένα μόνο περιβάλλον.
Μια εμπειρία προγραμματιστή μεταξύ πλατφορμών
Με το νέο Edge διαθέσιμο στα Windows 7 και macOS, και με μια έκδοση Linux υπό ανάπτυξη, υπάρχει πρόσβαση στα ίδια εργαλεία ανάπτυξης σε διαφορετικές πλατφόρμες. Παίρνετε τους ίδιους επιθεωρητές, προγράμματα εντοπισμού σφαλμάτων και κονσόλες, οπότε είναι εύκολο να εκτελέσετε τις ίδιες δοκιμές όπου κι αν εργάζεστε και σε οποιοδήποτε λειτουργικό σύστημα χρησιμοποιείτε. Ένας προγραμματιστής εξοικειωμένος με το Edge στα Windows θα πρέπει να μπορεί να μεταβεί σε Mac για να δοκιμάσει κώδικα χωρίς να χρειάζεται να περιμένει έναν προγραμματιστή Mac για βοήθεια.
Όπως το Edge παλαιού τύπου, τα νέα εργαλεία ανάπτυξης Edge που βασίζονται στο Chromium σάς βοηθούν να εξετάσετε τον κώδικα HTML, CSS και JavaScript στον ιστότοπό σας, με ένα πρόγραμμα εντοπισμού σφαλμάτων JavaScript και μια κονσόλα για την προβολή εξόδου καταγραφής κονσόλας από την εκτέλεση JavaScript. Μπορείτε να χρησιμοποιήσετε τα εργαλεία για να ενεργοποιήσετε γρήγορα μια γραμμή εργαλείων του προγράμματος περιήγησης που προσθέτει τρόπους προβολής συσκευής, δίνοντάς σας τη δυνατότητα να δοκιμάσετε την απόκριση σχεδιασμού χωρίς να αφήσετε έναν υπολογιστή ανάπτυξης.
Χρήση των εργαλείων προγραμματιστή Edge
Τα εργαλεία προγραμματιστών του Edge βρίσκονται σε εννέα διαφορετικά παράθυρα, το καθένα σας δίνει διαφορετικές πληροφορίες για την εφαρμογή ιστού σας. Πιθανότατα να χρησιμοποιήσετε την πρώτη: την προβολή στοιχείων.
Αυτό αναλύει το HTML και το CSS σας, δείχνοντας ποια στοιχεία σε μια σελίδα δημιουργούνται από ποιες ενότητες κώδικα. Η επισήμανση ενός στοιχείου στο παράθυρο του προγράμματος περιήγησής σας επισημαίνει τον σχετικό κώδικα, βοηθώντας στην απομόνωση του HTML ή του CSS που θέλετε να εντοπίσετε σφάλματα. Ένα παράθυρο δείχνει HTML. το άλλο δείχνει το τρέχον CSS, με τα τρέχοντα εφαρμοσμένα στυλ και τους ακροατές συμβάντων που χρησιμοποιούνται. Μπορείτε να δείτε ποιοι κανόνες CSS χρησιμοποιούνται αυτήν τη στιγμή και ποιοι αγνοούνται.
Το παράθυρο Elements είναι επίσης διαθέσιμο ως επέκταση κώδικα Visual Studio, προσφέροντας έλεγχο διάταξης παράλληλα με την επεξεργασία HTML. Είναι ένας χρήσιμος τρόπος για να δείτε γρήγορα πώς οι αλλαγές στον κώδικά σας επηρεάζουν τις διατάξεις της σελίδας σας. Μπορείτε ακόμη και να επισυνάψετε κώδικα σε μια παρουσία προγράμματος περιήγησης, δίνοντάς σας άμεση πρόσβαση σε ανοιχτά έγγραφα HTML.
Προετοιμασία για PWA
Ένα από τα πιο χρήσιμα εργαλεία είναι ο πίνακας επιδόσεων. Από εδώ μπορείτε να καταγράψετε τις δραστηριότητες του προγράμματος περιήγησής σας. Μόλις ολοκληρωθεί μια δοκιμαστική ακολουθία, μπορείτε να χρησιμοποιήσετε το χρονοδιάγραμμα του εργαλείου για να προσδιορίσετε τους πόρους που χρησιμοποιεί η εφαρμογή σας. Χρησιμοποιείται καλύτερα σε συνδυασμό με τα εργαλεία δικτύου και μνήμης, ειδικά αν χρησιμοποιείτε πολλά JavaScript. Η κατανόηση της απόδοσης μιας εφαρμογής ιστού είναι ιδιαίτερα σημαντική αν σκοπεύετε να τη χρησιμοποιήσετε ως PWA (προοδευτική εφαρμογή ιστού) και εδώ ένας πίνακας εφαρμογών προσθέτει εργαλεία για την εξέταση βασικών στοιχείων ενός PWA, συμπεριλαμβανομένου του τοπικού χώρου αποθήκευσης και των εργαζομένων υπηρεσιών.
Με το Edge να διευκολύνει τον εντοπισμό και την εγκατάσταση PWA, αξίζει να εξερευνήσετε αυτά τα εργαλεία με περισσότερες λεπτομέρειες, ειδικά το παράθυρο εφαρμογών. Με μια εμφάνιση και αίσθηση που μοιάζει με ταμπλό, είναι ένας γρήγορος τρόπος για να δείτε σε βάθος τι συμβαίνει μέσα στις εφαρμογές σας και πώς θα λειτουργούν εκτός του προγράμματος περιήγησης. Μπορείτε να χρησιμοποιήσετε το εργαλείο εφαρμογής για να εξερευνήσετε πώς λειτουργούν οι ενσωματωμένες υπηρεσίες της Edge, όπως ο διαχειριστής πληρωμών.
Χρήση προσθηκών στο Edge DevTools
Ένα άλλο χαρακτηριστικό της μετάβασης σε μια εμπειρία προγραμματιστή που βασίζεται στο Chromium είναι η υποστήριξη για προσθήκες τρίτων. Ορισμένα είναι ήδη διαθέσιμα στο κατάστημα add-on του Edge (αν και προς το παρόν μόνο μέσω ιδιωτικών συνδέσμων σε βάθος στο κατάστημα). Για μια ευρύτερη επιλογή, εάν έχετε ενεργοποιήσει την υποστήριξη καταστήματος τρίτων στο Edge, έχετε πρόσβαση σε όλες τις επεκτάσεις στο Chrome Web Store. Υπάρχουν πολλά εδώ, συμπεριλαμβανομένων εργαλείων που προσθέτουν εστιασμένη υποστήριξη για συγκεκριμένα πλαίσια JavaScript ή βοηθούν στην αποσφαλμάτωση. Σε αυτά περιλαμβάνονται το React του Facebook, το gRPC ανοιχτού κώδικα, τα εργαλεία που βοηθούν στην εργασία με API GraphQL και η υποστήριξη για linters όπως το webhint.
Η προδιαγραφή προσθήκης προγραμματιστή του Chromium είναι δημόσια και όλοι μπορούν να δημιουργήσουν και να δημοσιεύσουν τα δικά τους εργαλεία προγραμματιστών, είτε εσωτερικά είτε για ολόκληρο τον κόσμο για χρήση. Καθώς οι προσθήκες του Edge μοιράζονται μια κοινή μορφή με άλλα προγράμματα περιήγησης Chromium, η ίδια προσθήκη μπορεί να παραδοθεί μέσω άλλων καταστημάτων προγράμματος περιήγησης, απλοποιώντας την ανάπτυξη εργαλείων.
Η προσθήκη μιας επέκτασης στα εργαλεία προγραμματιστή είναι σαν να προσθέσετε μια στο πρόγραμμα περιήγησης. Πλοηγηθείτε σε ένα κατάστημα, κάντε κλικ στο εργαλείο που θέλετε να προσθέσετε και αφήστε το να πραγματοποιήσει λήψη και εγκατάσταση. Θα εγκατασταθεί στο πρόγραμμα περιήγησης και ίσως θέλετε να αποκρύψετε το εικονίδιο επέκτασης στο μενού του προγράμματος περιήγησης πριν ανοίξετε τα εργαλεία προγραμματιστή για να δείτε μια νέα καρτέλα. Η εκτέλεση webhint σε έναν ιστότοπο εμφανίζει ένα σύνολο βασικών μετρήσεων, δίνοντάς σας συμβουλές για σημαντικές δυνατότητες όπως η προσβασιμότητα ή για υποστήριξη για λειτουργίες PWA.
Είναι καλό να βλέπετε την προσαρμογή τελικά μέρος των εργαλείων του Edge. Όλοι χρησιμοποιούμε διαφορετικές αλυσίδες εργαλείων και σας δίνουμε ό, τι χρειάζεστε για να υποστηρίξετε τις τεχνολογίες που χρησιμοποιείτε είναι μια πολύ φιλική προς τους προγραμματιστές προσέγγιση. Όταν η Microsoft ανακοίνωσε τη μετάβαση στο Chromium για το πρόγραμμα περιήγησής της, ανέφερε ότι ένας από τους λόγους ήταν να δώσει στους προγραμματιστές τις δυνατότητες που χρειάζονται για να δημιουργήσουν τις εφαρμογές που θέλουν. Αυτό θα σήμαινε μόνο τη βελτίωση της υποστήριξης του προγράμματος περιήγησης για HTML5, CSS και JavaScript, οπότε η πλήρης γκάμα εργαλείων προγραμματιστή Chromium στο Edge, σε όλα τα υποστηριζόμενα λειτουργικά συστήματα, είναι μια ευπρόσδεκτη κίνηση.
Οι αλλαγές της Microsoft στην εμπειρία προγραμματιστή του Chromium
Είναι σημαντικό να θυμάστε ότι η Microsoft εξακολουθεί να είναι σχετικά νεώτερος συνεργάτης της Google στην ανάπτυξη του Chromium. Ακόμα κι έτσι κατάφερε να πραγματοποιήσει σημαντικό αριθμό συνεισφορών από τότε που εντάχθηκε στο έργο, συμπεριλαμβανομένης της προσθήκης υποστήριξης για δυνατότητες προσβασιμότητας, ώστε τα εργαλεία προγραμματιστών να είναι διαθέσιμα στην ευρύτερη δυνατή κοινότητα. Με περίπου 170 αλλαγές που προσθέτουν υποστήριξη για εργαλεία, όπως προγράμματα ανάγνωσης οθόνης, υπάρχουν πολλά να σας αρέσουν εδώ, καθώς τα προσβάσιμα εργαλεία προγραμματιστών θα οδηγήσουν στην ανάπτυξη προσβάσιμων εφαρμογών και υπηρεσιών ιστού.
Άλλες νέες δυνατότητες κρύβονται επί του παρόντος πίσω από πειραματικές σημαίες στις ρυθμίσεις του Edge, συμπεριλαμβανομένης της υποστήριξης για πρόσθετες γλώσσες. Εάν ενεργοποιήσετε αυτήν τη δυνατότητα και χρησιμοποιείτε μία από τις 10 υποστηριζόμενες γλώσσες, η προσαρμογή των εργαλείων προγραμματιστή θα ταιριάζει με την τοπική προσαρμογή του προγράμματος περιήγησής σας.
