Εργαλεία προγραμματιστικής ανάπτυξης Edge σε σύγκριση με τα εργαλεία προγραμματιστικής ανάπτυξης Chrome

Σε αυτό το οδηγό μπορείς να μάθεις τα Microsoft Edge Developer Tools, τα οποία σε πολλά σημεία είναι παρόμοια με τα Google Chrome Developer Tools. Θα ανακαλύψεις πώς να ανοίξεις και να χρησιμοποιήσεις αποτελεσματικά τα εργαλεία, καθώς και τις διαφορές μεταξύ των δύο εργαλείων ανάπτυξης προγραμμάτων περιήγησης.

Κύρια συμπεράσματα

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

Οδηγίες Βήμα προς Βήμα

Για να ανοίξεις τα Edge-DevTools, έχεις διαθέσιμες διάφορες επιλογές. Μια επιλογή είναι το πάτημα του F12. Εάν χρησιμοποιείτε Mac, μπορείτε να χρησιμοποιήσετε τον συνδυασμό πλήκτρων Command + Option + I. Οι χρήστες Windows μπορούν εναλλακτικά να χρησιμοποιήσουν επίσης τον συνδυασμό Control + Shift + I. Εάν θέλετε να ανοίξετε τα DevTools μέσω του μενού περιβάλλοντος, κάνε δεξί κλικ στην κεφαλίδα της ιστοσελίδας και επίλεξε "Εξέταση".

Η διεπαφή των Edge-DevTools θα σου φανεί αμέσως οικεία εάν έχεις ήδη εργαστεί με τα Chrome-DevTools. Τα καρτέλες είναι εκεί, οι εικονίδια φαίνονται κάπως διαφορετικά, και τα επιπλέον εργαλεία τα βρίσκεις μέσω ενός συμβόλου "Πλήθους" στην επάνω γραμμή. Στο Chrome, αυτά τα επιπλέον εργαλεία είναι προσβάσιμα μέσω του κύριου μενού.

Εάν θέλεις να προσθέσεις ένα νέο καρτελάκι στα Edge-DevTools, απλώς κάνε κλικ στο σύμβολο Πλήθους. Μπορείς να προσθέσεις, για παράδειγμα, το εργαλείο Κινούμενης Εικόνας. Αυτό θα εμφανιστεί στην κορυφή της γραμμής καρτελών, παρόμοια με τα Chrome DevTools.

Υπάρχει επίσης ένα καρτελάκι "Καλώς ήρθατε", παρόμοιο με τη σελίδα "Νέα Χαρακτηριστικά" στο Chrome. Μπορείς να δεις εδώ μια επισκόπηση των λειτουργιών των DevTools. Σου προτείνω να το ρίξεις μια ματιά, ώστε να ανακαλύψεις πιθανώς χρήσιμες συμβουλές και κόλπα που δεν έχουμε αναφέρει ακόμη στο μάθημά μας.

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

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

Μία από τις λίγες διαφορές είναι το επιπλέον εικονίδιο για το Azure DevOps στα εργαλεία Edge, το οποίο δεν υπάρχει στο Chrome. Αυτό είναι ειδικά χρήσιμο για τους προγραμματιστές που εργάζονται στο περιβάλλον Azure.

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

Ωστόσο, οι ενημερώσεις χαρακτηριστικών μπορεί να διαφέρουν ελαφρώς. Εάν το Chrome προσθέσει ένα νέο χαρακτηριστικό, ενδέχεται να μην είναι διαθέσιμο στο Edge λίγο αργότερα ή αντιστρόφως. Γι' αυτό συνιστάται να ελέγχεις τακτικά ποια νέα χαρακτηριστικά προστίθενται στα διαφορετικά εργαλεία.

Αυτά ήταν κυρίως όσα πρέπει να γνωρίζεις για τα Edge-DevTools. Εάν είσαι ήδη εξοικειωμένος με τα Chrome Developer Tools, θα μπορείς εύκολα να πλοηγηθείς στα Edge Dev Tools.

Σύνοψη

Σε αυτό το οδηγό έχεις μάθει τις ομοιότητες και τις διαφορές μεταξύ των Google Chrome και Microsoft Edge Developer Tools. Τώρα γνωρίζεις πώς να ανοίξεις τα εργαλεία και ποιες λειτουργίες έχεις στη διάθεσή σου για να εργαστείς αποτελεσματικά στα web projects σου.