Δεν υπάρχουν πολλά που δεν μπορείτε να κάνετε με τις τεχνολογίες ιστού στις μέρες μας. Η πλατφόρμα ιστού έχει εξελιχθεί τόσο πολύ που σήμερα είναι δυνατά διάφορα πράγματα όπως η δημιουργία κινούμενων εικόνων, η αναπαραγωγή ή η εγγραφή πολυμέσων, η πρόσβαση σε αρχεία ή η αποθήκευση, η παρακολούθηση αιτημάτων δικτύου και η πρόσβαση στην προσωρινή μνήμη, η δημιουργία σύνθετων διατάξεων CSS ή η σύνταξη εγγενούς κώδικα.
Με τόσα πολλά να μάθουν και να χρησιμοποιήσουν, οι προγραμματιστές ιστού χρειάζονται μια πλήρη σειρά εργαλείων στα οποία μπορούν να βασιστούν.
Ευτυχώς, ο Microsoft Edge διαθέτει εργαλεία ανάπτυξης που επιτρέπουν στους προγραμματιστές ιστού να μπορούν να παραγωγικό με τις δυνατότητες ιστού και τα API. Ανεξάρτητα από το τι κάνετε, πιθανότατα υπάρχει ένα ειδικό εργαλείο που μπορεί να σας βοηθήσει.
Η άλλη πλευρά, ωστόσο, είναι ότι τα DevTools τείνουν να είναι αρκετά περίπλοκα. Περιέχουν πάνω από 30 διαφορετικά εργαλεία και η διεπαφή χρήστη έχει αυξηθεί με την πάροδο του χρόνου για να τα χωρέσει. Επιπλέον, νέες δυνατότητες προστίθενται συνεχώς ως απάντηση στα σχόλια που λαμβάνουμε από τους χρήστες.
Σε αυτήν την ανάρτηση, θα σας παρουσιάσουμε νέες δυνατότητες στα Εργαλεία προγραμματισμού του Microsoft Edge που βοηθούν στη δημιουργία των εργαλείων. πιο προσιτό και εξατομικευμένο, ώστε να μπορείτε να αρχίσετε να αντιμετωπίζετε την πρόκληση να έχετε τόσα πολλά διαφορετικά εργαλεία στη διάθεσή σας. Μπορείτε επίσης να μάθετε περισσότερα σχετικά με αυτές τις λειτουργίες στο παρακάτω βίντεο.
Τα Εργαλεία προγραμματιστών εξελίσσονται γρήγορα στα προγράμματα περιήγησης – σε μείνετε ενημερωμένοι με τα πιο πρόσφατα άλλα προγράμματα περιήγησης, ρίξτε μια ματιά στο το άρθρο μου στο Smashing Magazine καλύπτοντας νέες δυνατότητες του DevTools στον Microsoft Edge, στο Google Chrome, στο Mozilla Firefox και στο Safari.
Άνοιγμα, κλείσιμο και μετακίνηση εργαλείων
Ενώ τα DevTools διαθέτουν περίπου 30 ξεχωριστά εργαλεία, είναι απίθανο αυτό να συμβεί. θα χρειαστείτε πρόσβαση σε περισσότερες από μια χούφτα από αυτά ταυτόχρονα—πόσο μάλλον 30. Επομένως, είναι πολύ σημαντικό να έχετε έναν τρόπο να ανοίγετε εύκολα εργαλεία όταν τα χρειάζεστε και να τα κλείνετε όταν δεν το χρειάζεστε.
Ταυτόχρονα, μπορεί να υπάρχουν εργαλεία που δεν έχετε χρησιμοποιήσει ποτέ πριν και τα οποία θα μπορούσαν να είναι πολύ εύχρηστα. Εάν αυτά είναι κλειστά από προεπιλογή, μπορεί να μην τα ανακαλύψετε ποτέ.
Προσθέσαμε τρεις μικρές, αλλά πολύ ισχυρές λειτουργίες DevTools για να το αντιμετωπίσουμε.
Εργαλεία κλεισίματος
Οι καρτέλες στο Microsoft Edge DevTools διαθέτουν πλέον ένα κουμπί κλεισίματος που μπορεί να χρησιμοποιηθεί για να κρύψετε αυτά που δεν χρειάζεστε πια. Επομένως, μπορείτε να διατηρήσετε μια καθαρή και απλή διεπαφή χρήστη και να έχετε άμεσα διαθέσιμα μόνο τα εργαλεία που χρειάζεστε αυτήν τη στιγμή.
Λάβετε υπόψη ότι μερικά εργαλεία δεν διαθέτουν κουμπί κλεισίματος: Στοιχεία, Κονσόλα και Πηγές. Αυτά τα εργαλεία χρησιμοποιούνται πολύ περισσότερο από όλα τα άλλα. Οι προγραμματιστές ιστού τα χρειάζονται ανά πάσα στιγμή και το κλείσιμό τους δεν έχει νόημα.
Εργαλεία ανοίγματος
Τώρα υπάρχει ένα κουμπί + (συν) στο τέλος της γραμμής καρτελών για να ανοίξετε οποιοδήποτε εργαλείο δεν είναι ήδη ανοιχτό.
Προηγουμένως, για να ανακαλύψετε όλο το διαθέσιμο εργαλείο, έπρεπε να μεταβείτε στο κύριο μενού (…) και στη συνέχεια να επιλέξετε Περισσότερα εργαλεία ή να ξέρετε πώς να χρησιμοποιείτε το μενού εντολών για γρήγορη πρόσβαση στα εργαλεία. Το κουμπί + κάνει την ανακάλυψη και την πρόσβαση σε άλλα εργαλεία πολύ πιο εύκολη.
Μπορεί να υπάρχουν δύο γραμμές καρτελών στο DevTools: μία στο επάνω μέρος, η οποία είναι πάντα ορατή και είναι εκεί που συνήθως βρίσκονται οι πίνακες Στοιχεία και Πηγές, και μία στο κάτω μέρος, το Συρτάρι, το οποίο μπορεί να αλλάξει πατώντας Esc στο πληκτρολόγιό σας. Η Κονσόλα μένει συνήθως στο συρτάρι. Και οι δύο αυτές γραμμές καρτελών έχουν το κουμπί +, ώστε να μπορείτε να ανοίξετε νέα εργαλεία σε οποιαδήποτε από αυτές τις 2 τοποθεσίες.
Εργαλεία μετακίνησης
Το να έχετε ανοιχτό το συρτάρι μπορεί να είναι πολύ χρήσιμο κατά τον εντοπισμό σφαλμάτων σε κάτι που απαιτεί περισσότερα από ένα εργαλεία ταυτόχρονα.
>
Για παράδειγμα, μπορεί να θέλετε να ανοίξετε ταυτόχρονα και τους πίνακες Πηγών και Δικτύου για να βεβαιωθείτε ότι αποστέλλονται τα σωστά αιτήματα HTTP κατά το βήμα εντοπισμού σφαλμάτων κάποιου κώδικα JavaScript. Εναλλακτικά, μπορεί να θέλετε να ανοίξετε δίπλα-δίπλα και τους πίνακες Elements και 3D View για να διορθώσετε ένα πρόβλημα με τον δείκτη z με ένα στοιχείο.
Με το Microsoft Edge DevTools, μπορείτε πλέον να μετακινείτε εργαλεία μεταξύ της κύριας περιοχής και του συρταριού ανοίγοντας το μενού με τα συμφραζόμενα (δεξί κλικ) στο καρτέλα που θέλετε να μετακινήσετε και επιλέγοντας Μετακίνηση προς τα κάτω ή Μετακίνηση στην κορυφή.
Λάβετε υπόψη ότι εάν επιλέξετε το κουμπί + στο συρτάρι και επιλέξετε ένα εργαλείο από τη λίστα που είναι ήδη ανοιχτό στην κύρια περιοχή, τότε αυτό το εργαλείο θα μετακινηθεί στο συρτάρι. Αυτός είναι ένας άλλος καλός τρόπος μετακίνησης εργαλείων.
Μάθετε για τα εργαλεία, μέσα από τα εργαλεία
Το κουμπί + είναι εξαιρετικό για να ανακαλύψετε εύκολα νέα εργαλεία που ίσως δεν είχατε χρησιμοποιήσει πριν. Αλλά μερικές φορές, η διεπαφή χρήστη ενός εργαλείου μπορεί να είναι συντριπτική με την πρώτη ματιά. Βοηθά να έχετε κάποια τεκμηρίωση διαθέσιμη. Η τεκμηρίωση του Microsoft Edge DevTools μπορεί να σας βοηθήσει εκεί, αλλά συχνά δεν είναι στη διάθεσή σας όταν είστε στη μέση της εργασίας.
Πρόσφατα, προσθέσαμε μια δυνατότητα για να κάνουμε ακόμα πιο εύκολη την εκμάθηση με βάση τα συμφραζόμενα σχετικά με ένα νέο εργαλείο: Συμβουλές εργαλείων DevTools. Οι συμβουλές εργαλείων DevTools είναι μια επικάλυψη που καλύπτει τα εργαλεία και παρέχει τεκμηρίωση σχετικά με τα συμφραζόμενα, με συνδέσμους για να μάθετε περισσότερα.
Μπορείτε να ενεργοποιήσετε τις συμβουλές εργαλείων DevTools με 3 διαφορετικούς τρόπους:
Μεταβείτε στο κουμπί Προσαρμογή και έλεγχος DevTools (…) > Βοήθεια > Εναλλαγή των συμβουλών εργαλείων DevTools. Μπορείτε επίσης να χρησιμοποιήσετε τη συντόμευση πληκτρολογίου Ctrl+Shift+H (Cmd+Shift+H σε Mac). Ή χρησιμοποιήστε το μενού εντολών και πληκτρολογήστε”tooltips”.
Μόλις ενεργοποιηθεί, απλώς μετακινήστε το ποντίκι σας πάνω από τις επισημασμένες περιοχές για να εμφανίσετε μια επεξήγηση εργαλείου πληροφοριών σχετικά με αυτήν τη συγκεκριμένη περιοχή των εργαλείων (μπορείτε επίσης να χρησιμοποιήσετε το πλήκτρο Tab για να περιηγηθείτε στις συμβουλές εργαλείων). Ορισμένες από τις συμβουλές εργαλείων περιέχουν ακόμη και συνδέσμους προς στον ιστότοπο τεκμηρίωσης για να μάθετε περισσότερα.
Λάβετε υπόψη ότι μπορείτε επίσης να μεταβείτε σε άλλους πίνακες όσο είναι ενεργές οι συμβουλές εργαλείων DevTools. Με αυτόν τον τρόπο, μπορείτε να πλοηγηθείτε στα Εργαλεία προγραμματιστών και να συνεχίσετε να μαθαίνετε νέα πράγματα χωρίς να χρειάζεται να περιστρέψετε το να απενεργοποιείται και να ενεργοποιείται ξανά κάθε φορά.
Αλλαγή γλώσσας
Γνωρίζουμε ότι οι προγραμματιστές μπορούν να είναι πιο παραγωγικοί όταν τα εργαλεία τους ταιριάζουν με τη γλώσσα τους προτίμησης. Επιπλέον, άλλα προϊόντα προγραμματιστών της Microsoft, συμπεριλαμβανομένου του VS Code, μπορούν να χρησιμοποιηθούν σε άλλες γλώσσες. Αυτός είναι ο λόγος που διαθέσαμε τα DevTools σε 11 διαφορετικές γλώσσες.
Από προεπιλογή, το DevTools ταιριάζει με τη γλώσσα που επιλέγετε για τη διεπαφή χρήστη του προγράμματος περιήγησης, αλλά μπορείτε να το ορίσετε ανεξάρτητα σε οποιαδήποτε από αυτές τις άλλες γλώσσες.
<πίνακας> Αγγλικά Γερμανικά – Γερμανικά Κινέζικα (Απλοποιημένα) – 中文(简体)（简体） Κινέζικα (Παραδοσιακά) – 中文(繁體)（繁體） Γαλλικά – Γαλλικά Ισπανικά – Ισπανικά Πορτογαλικά – Ισπανικά Πορτογαλικά – Πορτογαλικά Κορεάτικα – Πορτογαλικά Ρωσικά – Pусский
Για να αλλάξετε τη γλώσσα, μεταβείτε στις Ρυθμίσεις DevTools (χρησιμοποιώντας τη συντόμευση F1 ή κάνοντας κλικ στο εικονίδιο με το γρανάζι στη γραμμή εργαλείων) και επιλέξτε από τη Γλώσσα αναπτυσσόμενη λίστα.
Μετά την επαναφόρτωση του DevTools, η διεπαφή χρήστη του θα εμφανιστεί στη γλώσσα της επιλογής σας, καθιστώντας το πιο εύκολο στη χρήση των εργαλείων. Εδώ είναι πώς φαίνεται στα γαλλικά:
Αυτό λειτουργεί εξαιρετικά και με τη λειτουργία DevTools Tooltips, καθώς η τεκμηρίωση με βάση τα συμφραζόμενα μεταφράζεται επίσης, όπως φαίνεται στα ρωσικά παρακάτω.
Από το ανακοινώσαμε την πειραματική κυκλοφορία της τοπικής λειτουργίας DevTools το 2020, συνεχίσαμε τη συνεργασία με τις ομάδες Lighthouse και Chrome στην Google μέσω του έργου Chromium και η δυνατότητα δεν είναι πλέον διαθέσιμη μόνο σε όλοι οι χρήστες του Microsoft Edge, β επίσης σε οποιονδήποτε χρησιμοποιεί DevTools σε πρόγραμμα περιήγησης που βασίζεται σε Chromium.
Προσαρμογή του χρωματικού σας θέματος
Εάν χρησιμοποιείτε τον κώδικα του Visual Studio (ή άλλα προγράμματα επεξεργασίας κειμένου και IDE για αυτό το θέμα), μπορείτε να το προσαρμόσετε. πιθανότατα έχει προσαρμόσει το χρωματικό του θέμα σε κάτι οπτικά ευχάριστο και άνετο στην εργασία για μεγάλες χρονικές περιόδους.
Μέχρι τώρα, το έγχρωμο θέμα DevTools μπορούσε να προσαρμόζεται μόνο επιλέγοντας μεταξύ των σκούρων ή των ανοιχτόχρωμων θεμάτων του. Ωστόσο, τώρα, υπάρχουν 9 νέα χρωματικά θέματα για να διαλέξετε. Αυτά είναι τα ίδια με τα προεγκατεστημένα του Visual Studio Code και επομένως θα πρέπει να είναι γνωστά.
Ακολουθεί ολόκληρη η λίστα των θεμάτων στο Microsoft Edge DevTools τώρα:
Υπάρχοντα θέματα: Light+ Dark+ Chromium Light Chromium Dark Νέα θέματα: Quiet Light Solarized Light Solarized Dark Abyss Kimbie Dark Monokai Monokai Dimmed Red Tomorrow Night Blue
Για να επιλέξετε ένα νέο θέμα, μπορείτε να μεταβείτε στις Ρυθμίσεις (το εικονίδιο με το γρανάζι στη γραμμή εργαλείων ) και χρησιμοποιήστε το αναπτυσσόμενο μενού Θέμα . Μπορείτε επίσης να χρησιμοποιήσετε το μενού εντολών και να πληκτρολογήσετε”θέμα”για να δείτε ολόκληρη τη λίστα με τα διαθέσιμα έγχρωμα θέματα.
Λάβετε υπόψη ότι εάν χρησιμοποιείτε το Microsoft Edge Tools for VS Code, μπορεί να έχετε δει ότι το DevTools δεν εμφανίζεται πάντα με το ίδιο χρώμα με το ίδιο το περιβάλλον χρήστη του VS Code.
Τώρα, χάρη στη νέα έκδοση. έγχρωμα θέματα στο DevTools, αυτό δεν θα συμβαίνει πλέον. Από το Microsoft Edge 95, η διεπαφή χρήστη του DevTools, που είναι ενσωματωμένη στο VS Code θα ταιριάζει με το επιλεγμένο θέμα χρώματος.
Εάν δεν γνωρίζετε για αυτήν την επέκταση, μάθετε περισσότερα για αυτό εδώ.
Σχόλια
Τα σχόλια των χρηστών είναι ο τρόπος με τον οποίο καθορίζουμε τις προτεραιότητες για το εργασίες που συμβαίνουν στο Microsoft Edge DevTools. Εάν έχετε οποιεσδήποτε ερωτήσεις ή σχόλια σχετικά με αυτές τις λειτουργίες ή άλλες, στείλτε μας μερικές λέξεις και στιγμιότυπα οθόνης χρησιμοποιώντας το το κουμπί σχολίων στο DevTools.
Μπορείτε επίσης να κάνετε ερωτήσεις στην ομάδα μας στο Twitter αναφέροντας το @EdgeDevTools λογαριασμός.
– Patrick Brosset, Senior Program Manager, Microsoft Edge