Εργαλεία ανάπτυξης για το Chrome Tutorials, Tips, Tricks

Το Google Chrome είναι ένα από τα δημοφιλέστερα προγράμματα περιήγησης ιστού για ανάπτυξη ιστού, λόγω των προηγμένων δυνατοτήτων του. Τα Εργαλεία προγραμματιστών Chrome μπορούν να είναι πολύ χρήσιμα κατά τη διαδικασία εντοπισμού σφαλμάτων. Οι περισσότεροι από εμάς γνωρίζουμε ήδη ότι μπορούμε να επεξεργαστούμε το live CSS χρησιμοποιώντας το Chrome Dev Tools, αλλά υπάρχουν περισσότερες συμβουλές που θα μοιραστούμε μαζί σας σήμερα.

Συμβουλές για τα εργαλεία ανάπτυξης Chrome

Υπάρχουν πολλά άγνωστα και κρυμμένα τεχνάσματα του Chrome Dev Εργαλεία και θα εξετάσουμε τα πιο χρήσιμα κόλπα μεταξύ τους. Για να ανοίξετε τα εργαλεία προγραμματιστή στο Chrome, πατήστε F12 στο πληκτρολόγιό σας και δοκιμάστε τα παρακάτω κόλπα.

1. Εύρεση και Άνοιγμα οποιουδήποτε αρχείου

Όταν κάνουμε web ανάπτυξη ασχολούμαστε με πολλά HTML, CSS, JS και άλλα αρχεία. Όταν θέλουμε να διορθώσουμε οτιδήποτε, ανοίγουμε τα εργαλεία του Chrome Dev. Μπορείτε να αναζητήσετε γρήγορα και να βρείτε το συγκεκριμένο αρχείο για να διευκολύνετε την εργασία σας. Απλά πατήστε Ctrl + P και αρχίστε να πληκτρολογείτε το όνομα του αρχείου. Αυτό σας βοηθά να βρείτε το συγκεκριμένο αρχείο από τη λίστα των αρχείων.

2. Αναζήτηση στο αρχείο προέλευσης

Στο προηγούμενο τέχνασμα, γνωρίσαμε πώς να αναζητήσουμε ένα συγκεκριμένο αρχείο. Μπορείτε ακόμη και να αναζητήσετε μια συγκεκριμένη συμβολοσειρά σε όλα τα φορτωμένα αρχεία. Πατήστε Ctrl + Shift + F για να αναζητήσετε μια συμβολοσειρά σε αρχεία. Υποστηρίζει επίσης κανονικές εκφράσεις.

3. Μεταβείτε στη συγκεκριμένη γραμμή

Μόλις ανοίξετε οποιοδήποτε αρχείο προέλευσης και θέλετε να μετακινηθείτε σε συγκεκριμένη γραμμή, πατήστε Ctrl + G και δώστε τον αριθμό γραμμής και πατήστε enter.

4. Επιλογή

$ () -

• Επιστρέφει την πρώτη εμφάνιση του αντίστοιχου επιλογέα CSS $$ () -
• Επιστρέφει τη συστοιχία στοιχείων που ταιριάζουν με τον συγκεκριμένο επιλογέα CSS Για περισσότερες εντολές κονσόλας, επικεφαλίστε σε αυτή τη θέση.

5. Χρησιμοποιήστε πολλαπλές χρήσεις

Ορισμένες φορές θέλετε να ορίσετε τις πολλαπλές χρήσεις σε διαφορετικά μέρη και μπορείτε να το κάνετε εύκολα στα εργαλεία του Chrome Dev κρατώντας το πλήκτρο

Ctrl και κάνοντας κλικ όπου θέλετε να τα τοποθετήσετε. Στη συνέχεια, αρχίστε να γράφετε και θα δείτε ότι τοποθετείται σε διάφορα επιλεγμένα σημεία. 6. Διατήρηση αρχείου καταγραφής

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

Διατήρηση αρχείου καταγραφής στο αρχείο καταγραφής Κονσόλας και το αρχείο καταγραφής διατηρείται. Αυτό δείχνει το ημερολόγιο πριν από τη σελίδα που έχει εκφορτωθεί και είναι χρήσιμο για να διερευνήσει τα σφάλματα. 7. Χρησιμοποιήστε τον ενσωματωμένο κωδικοποιητή

Το Chrome Dev Tools διαθέτει τον ενσωματωμένο αποκωδικοποιητή κώδικα που ονομάζεται

αρκετά ωραία εκτύπωση "{}". Το εργαλείο για προγραμματιστές εμφανίζει τον ελαχιστοποιημένο κώδικα και δεν είναι τόσο εύκολο να το διαβάσετε. Κάντε κλικ στο κουμπί ωραίας εκτύπωσης, το οποίο εμφανίζεται στο κάτω αριστερό μέρος του ανοιχτού αρχείου προέλευσης, για να εμφανιστεί το αρχείο προέλευσης με μορφή αναγνώσιμη από τον άνθρωπο. 8. Η ιστοσελίδα σας είναι φιλική προς το κινητό; Ελέγξτε το εδώ

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

Emulation , μπορείτε να καταθέσετε διάφορες συσκευές. Επιλέξτε τη συσκευή που θέλετε και δοκιμάστε τον τρόπο εμφάνισης του ιστότοπού σας σε αυτήν τη συσκευή. Για περισσότερες πληροφορίες, ρίξτε μια ματιά στο παρακάτω βίντεο.

9. Εξομοίωση αισθητήρων και γεωγραφικής θέσης

Μπορείτε ακόμη και να μιμηθείτε αισθητήρες όπως οθόνη αφής και επιταχυνσιόμετρα. Μπορείτε να μιμηθείτε τη γεωγραφική θέση. Για να το κάνετε αυτό, κατευθυνθείτε στο

Εξομοίωση -> Αισθητήρες. 10. Επιλέξτε την επόμενη εμφάνιση της τρέχουσας λέξης

Αν θέλετε να αντικαταστήσετε τη λέξη Σε όλες τις περιπτώσεις, επιλέξτε τη λέξη και πατήστε

Ctrl + D για να επιλέξετε την επόμενη εμφάνιση της επιλεγμένης λέξης. Το, μπορείτε να επεξεργαστείτε τη λέξη σε όλα τα συμβάντα σε μία λήψη. 11. Αλλάξτε τη μορφή χρώματος

Απλώς χρησιμοποιήστε το

Shift + Κάντε κλικ στο στην προεπισκόπηση χρωμάτων για να αλλάξετε τις αλλαγές μεταξύ της μορφοποίησης rgba, hexadecimal και hsl 12. Προσθέστε αλλαγές στα τοπικά αρχεία μέσω του χώρου εργασίας

Είμαστε σε θέση να επεξεργαστούμε τα αρχεία προέλευσης και να κάνουμε κάποιες αλλαγές σε CSS, Java Script και σε άλλα αρχεία στα εργαλεία του Chrome Dev. Για να προσθέσετε αυτές τις αλλαγές στα τοπικά αρχεία, τότε δεν χρειάζεται να αντιγράψετε την επικόλληση των αλλαγών από το χώρο εργασίας σε αρχεία στο δίσκο. Τα εργαλεία του Chrome Dev σας επιτρέπουν να αντιστοιχίζετε τα αρχεία και να ενημερώνετε το τοπικό αρχείο με τις αλλαγές που κάνατε στα εργαλεία dev. Για να γίνει αυτό, κάντε δεξί κλικ στο αρχείο προέλευσης στην αριστερή πλευρά της καρτέλας

Πηγές και επιλέξτε Προσθήκη φακέλου στο χώρο εργασίας. Για περισσότερες πληροφορίες σχετικά με τους χώρους εργασίας, μεταβείτε στο Chrome.com.