Σε αυτό το οδηγό θα μάθεις πως να χρησιμοποιήσεις τα Chrome Developer Tools για να προσαρμόσεις στυλ και scripts χωρίς να κάνεις αλλαγές στον πρωτότυπο κώδικα. Θα δεις πως μπορείς να κάνεις εκτενείς δοκιμές και προσαρμογές στην ιστοσελίδα σου χρησιμοποιώντας τα Overrides και το Workspace του Chrome, χωρίς να αγγίξεις τον πρωτότυπο αρχείο του διακομιστή.
Σημαντικά Αποτελέσματα
- Με τα Overrides μπορείς να αντικαταστήσεις τοπικά αρχεία προκειμένου να πραγματοποιήσεις δοκιμές και προσαρμογές.
- Το Workspace σου επιτρέπει να συνδέσεις τον τοπικό φάκελο ανάπτυξής σου με τα Chrome Developer Tools για να κάνεις τροποποιήσεις απευθείας.
- Αυτές οι δύο λειτουργίες είναι εξαιρετικά χρήσιμες για να εντοπίζεις προβλήματα στο περιβάλλον παραγωγής χωρίς να επηρεάζεις τον πρωτότυπο κώδικα του διακομιστή.
Οδηγίες Βήμα-προς-Βήμα
Για να χρησιμοποιήσεις αποτελεσματικά τα Developer Tools του Chrome, ακολούθησε αυτά τα βήματα:
1. Χρήση των Overrides
Αρχικά, θέλουμε να χρησιμοποιήσουμε τη λειτουργία Overrides του Chrome. Επίλεξε ένα αρχείο JavaScript, όπως το main.js, που φορτώνεται από τον διακομιστή.
Κάνε δεξί κλικ στο αρχείο και επίλεξε "Αντικατάσταση Περιεχομένου" από το πλαίσιο περιέχοντος.
Εμφανίζεται ένα παράθυρο διαλόγου στο οποίο μπορείς να επιλέξεις την τοπική τοποθεσία του αρχείου. Βεβαιώσου ότι έχεις ήδη δημιουργήσει έναν φάκελο για να τοποθετήσεις τα αρχεία αντικατάστασης.
Επέλεξε τον επιθυμητό φάκελο και κάνε κλικ στο "Επιλογή Φακέλου". Με αυτόν τον τρόπο, θα δημιουργηθεί η σύνδεση μεταξύ του πρωτότυπου αρχείου και του τοπικού σου αρχείου.
Στη συνέχεια, θα πρέπει να δώσεις στον περιηγητή πρόσβαση σε αυτόν τον φάκελο. Κάνε ξανά κλικ στο μενού Overrides και βεβαιώσου ότι η άδεια πρόσβασης στον στόχο φάκελο είναι ενεργοποιημένη.
2. Δημιουργία Τοπικού Αρχείου
Τώρα μπορείς να δημιουργήσεις ένα νέο αρχείο στον φάκελο Overrides. Άνοιξε το αρχείο και γράψε για παράδειγμα ένα απλό script alert().
Μπορείς να προσαρμόσεις το περιεχόμενο όπως σε βολεύει. Αποθήκευσε το αρχείο και ανανέωσε τη σελίδα για να δεις ότι τώρα εμφανίζεται το παράθυρο Alert αντί του αρχείου που φορτώνοταν αρχικά από τον διακομιστή.
3. Έλεγχος της Δικτυακής Δραστηριότητας
Για να βεβαιωθείς ότι το αρχείο δεν φορτώνεται πλέον από τον διακομιστή, ανοίξε την καρτέλα Δίκτυο στα Developer Tools. Θα πρέπει να βλέπεις ότι το αρχείο main.js πλέον δεν φορτώνεται από τον διακομιστή, αλλά αντίθετα οι τοπικά αντικατασταθέντες περιεχόμενοι.
Αν θέλεις να προσθέτεις άλλα Overrides ή να διαγράφεις υπάρχοντα, πήγαινε στην περιοχή Overrides όπου θα έχεις μια επισκόπηση για όλα τα ενεργοποιημένα Overrides.
4. Εργασία με το Workspace
Στη συνέχεια, θέλουμε να δημιουργήσουμε το Workspace. Μπορείς να συνδέσεις τον τοπικό φάκελο ανάπτυξής σου με τα Developer Tools. Πήγαινε στις ρυθμίσεις των Developer Tools και αναζήτησε την επιλογή "Workspace".
Επέλεξε τον φάκελο όπου βρίσκονται τα project σου. Ο Chrome χρειάζεται την άδεια να έχει πρόσβαση σε αυτόν τον φάκελο, οπότε βεβαιώσου ότι έχεις δώσει τις ανάλογες άδειες.
5. Τροποποίηση του Κώδικα
Τώρα μπορείς να εργαστείς απευθείας στον Workspace. Για παράδειγμα, ανοίξτε το αρχείο main.js σας, εφαρμόστε αλλαγές και αποθηκεύστε το αρχείο. Ο κώδικας θα φορτωθεί αυτόματα ξανά από τον διακομιστή, και θα μπορείτε να δείτε αμέσως πώς οι προσαρμογές επηρεάζουν την ιστοσελίδα σας.
6. Debugging στο Workspace
Ένα πρακτικό πλεονέκτημα του Workspace είναι η δυνατότητα ορισμού σημείων διακοπής για να αποσφαλματώσετε αποτελεσματικά τον κώδικά σας. Ορίστε σημεία διακοπής στις γραμμές του κώδικά σας και ανανεώστε τη σελίδα για να διακόψετε την εκτέλεση και να ελέγξετε την τρέχουσα κατάσταση των μεταβλητών.
7. Πλεονεκτήματα και μειονεκτήματα
Παρόλο που ο Workspace είναι χρήσιμος, πολλοί προγραμματιστές συνιστούν να κάνετε αλλαγές απευθείας σε έναν επεξεργαστή κώδικα όπως το Visual Studio Code και να αποθηκεύετε τα αρχεία εκεί. Αυτό εξασφαλίζει ότι μπορείτε να δείτε καλύτερα ποια έκδοση αρχείων χρησιμοποιείται. Κατά τη χρήση του Workspace, μπορεί να γίνει μπερδεμένο, ειδικά εάν ο σύνδεσμος με τα πρωτότυπα αρχεία δεν είναι ξεκάθαρος.
Παρόλα αυτά, αν επεξεργάζεστε απλά αρχεία CSS ή μη μεταγλωττισμένο κώδικα, ο Workspace μπορεί να είναι μια καλή επιλογή.
Σύνοψη
Σε αυτό το εγχειρίδιο έχετε μάθει πώς να χρησιμοποιείτε τα Overrides και το Workspace στα Chrome Developer Tools για να προσαρμόζετε στυλ και σενάρια χωρίς να αγγίζετε τον πρωτότυπο αρχείο του διακομιστή. Με τα Overrides μπορείτε να κάνετε γρήγορα αλλαγές, ενώ ο Workspace σας επιτρέπει να εργάζεστε απευθείας με το φάκελο ανάπτυξής σας.
Συχνές Ερωτήσεις
Μπορώ να χρησιμοποιήσω Αντικαταστάσεις και για αρχεία CSS;Ναι, μπορείτε να χρησιμοποιήσετε Αντικαταστάσεις και για αρχεία CSS. Απλώς επιλέξτε το επιθυμητό αρχείο CSS και ενεργοποιήστε την Αντικατάσταση.
Πώς απενεργοποιώ τις Αντικαταστάσεις;Μπορείτε να απενεργοποιήσετε τις Αντικαταστάσεις πηγαίνοντας στις Εργαλειοθήκες Προγραμματιστή και εκεί να τις απενεργοποιήσετε ή να τις διαγράψετε.
Υπάρχουν περιορισμοί στο Workspace;Ναι, μερικές φορές μπορεί να είναι προβληματικό να ταυτοποιήσετε τον σωστό Workspace, ειδικά σε μεταγλωττισμένο κώδικα.
Γιατί θα έπρεπε να χρησιμοποιώ Αντικαταστάσεις αντί για το Workspace;Οι Αντικαταστάσεις προσφέρουν μια πιο σαφή τρόπο να κάνετε αλλαγές, χωρίς να μπερδεύεστε με διάφορες εκδόσεις των αρχείων. Συνήθως είναι πιο εύκολο να τις χειριστείτε, αν δεν θέλετε να αλλάξετε απευθείας τα πρωτότυπα αρχεία.
