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

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

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

1. Βρείτε και ανοίξτε οποιοδήποτε αρχείο

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

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

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

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

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

4. Επιλέγοντας Στοιχεία DOM στην καρτέλα Κονσόλα^(Console)

Το Dev Tools^{(Dev Tools)} σάς επιτρέπει επίσης να επιλέξετε στοιχεία στην κονσόλα.

• $() – Επιστρέφει^(Returns) την πρώτη εμφάνιση του αντίστοιχου επιλογέα CSS .
• $$() – Επιστρέφει τον πίνακα στοιχείων που ταιριάζουν με τον συγκεκριμένο επιλογέα CSS .

Για περισσότερες εντολές κονσόλας, μεταβείτε σε αυτήν την ανάρτηση.^{(this post.)}

5. Κάντε χρήση πολλαπλών καρέ

Μερικές φορές, θέλετε να ορίσετε τα πολλαπλά καρέ σε διαφορετικά σημεία και μπορείτε να το κάνετε αυτό εύκολα στα εργαλεία του Chrome Dev κρατώντας πατημένο το ^{(Chrome Dev)}πλήκτρο Ctrl^{(Ctrl )} και κάνοντας κλικ στο σημείο που θέλετε να τα τοποθετήσετε. Στη συνέχεια ξεκινήστε να γράφετε και θα δείτε ότι τοποθετείται σε διάφορα επιλεγμένα σημεία.

6. Διατήρηση αρχείου καταγραφής

Η διατήρηση^(Preserve) του αρχείου καταγραφής σάς βοηθά να διατηρήσετε το αρχείο καταγραφής ακόμη και να φορτωθεί η σελίδα. Επιλέξτε την επιλογή δίπλα στο Διατήρηση αρχείου καταγραφής^{(Preserve log )} στο αρχείο καταγραφής της Κονσόλας^(Console) και το αρχείο καταγραφής διατηρείται. Αυτό εμφανίζει το αρχείο καταγραφής πριν από την εκφόρτωση της σελίδας και είναι χρήσιμο για τη διερεύνηση των σφαλμάτων.

7. Χρησιμοποιήστε ενσωματωμένο βελτιωτικό κώδικα

Το Chrome Dev Tools^{(Chrome Dev Tools)} έχει το ενσωματωμένο βελτιωτικό κώδικα που ονομάζεται όμορφη εκτύπωση "{}"^{(pretty print “{}”)} . Το εργαλείο προγραμματιστή εμφανίζει τον ελαχιστοποιημένο κώδικα και δεν είναι τόσο εύκολο να διαβαστεί. Κάντε κλικ^(Click) στο κουμπί όμορφης εκτύπωσης που εμφανίζεται κάτω αριστερά στο ανοιχτό αρχείο προέλευσης, για να εμφανιστεί το αρχείο προέλευσης σε μορφή αναγνώσιμη από τον άνθρωπο.

8. Είναι ο ιστότοπός σας φιλικός προς κινητά; Ελέγξτε το εδώ

Το Chrome Dev Tools^{(Chrome Dev Tools)} μας επιτρέπει επίσης να ελέγχουμε εάν ένας ιστότοπος είναι φιλικός προς κινητά ή όχι. Μπορείτε να ελέγξετε πώς φαίνεται ο ιστότοπός σας σε διάφορες συσκευές. Μεταβείτε στα εργαλεία του Chrome Dev και στην καρτέλα ^{(Chrome Dev)}Εξομοίωση^{(Emulation )} , μπορείτε να αρχειοθετήσετε διάφορες συσκευές. Επιλέξτε τη συσκευή που θέλετε και δοκιμάστε την εμφάνιση του ιστότοπού σας σε αυτήν τη συσκευή.

Για περισσότερες πληροφορίες, ρίξτε μια ματιά στο παρακάτω βίντεο.

9. Προσομοίωση αισθητήρων και γεωγραφικής θέσης^{(Geographical Location)}

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

10. Επιλέξτε την επόμενη εμφάνιση της τρέχουσας λέξης

Εάν θέλετε να αντικαταστήσετε τη λέξη σε όλη της την εμφάνιση, επιλέξτε τη λέξη και πατήστε Ctrl + D για να επιλέξετε την επόμενη εμφάνιση της επιλεγμένης λέξης. Στη συνέχεια, μπορείτε να επεξεργαστείτε αυτήν τη λέξη σε όλες τις εμφανίσεις της σε μία λήψη.

11. Αλλαγή μορφής χρώματος

Απλώς χρησιμοποιήστε το Shift + Click στην προεπισκόπηση χρωμάτων για να αλλάξετε τις αλλαγές μεταξύ μορφοποίησης rgba, δεκαεξαδικού και hsl.

12. Προσθέστε^(Add) αλλαγές σε τοπικά αρχεία μέσω του χώρου εργασίας

Μπορούμε να επεξεργαστούμε αρχεία πηγής και να κάνουμε κάποιες αλλαγές σε CSS , JavaScript και άλλα αρχεία στα εργαλεία του Chrome Dev . Για να προσθέσετε αυτές τις αλλαγές στα τοπικά αρχεία, τότε δεν χρειάζεται να κάνετε αντιγραφή-επικόλληση των αλλαγών από τον χώρο εργασίας σε αρχεία στο δίσκο. Τα εργαλεία του Chrome Dev^{(Chrome Dev)} σάς επιτρέπουν να αντιστοιχίζετε αρχεία και να ενημερώνετε το τοπικό αρχείο με τις αλλαγές που έχετε κάνει στα εργαλεία προγραμματισμού. Για να το κάνετε αυτό, κάντε δεξί κλικ στο αρχείο προέλευσης στην αριστερή πλευρά στην καρτέλα Πηγές και επιλέξτε ^{(Sources )}Προσθήκη φακέλου στον χώρο εργασίας.^{(Add Folder to workspace.)}

Ελπίζω ότι αυτό βοηθά.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome iѕ one of the popular web browsers for web dеvelopment, due to its advanсed feаtures. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Οι καλύτερες συμβουλές και κόλπα του Google Chrome για χρήστες υπολογιστών Windows

• 3 Χρήσιμες συμβουλές και κόλπα για τη χρήση αυτοκόλλητων σημειώσεων

• Πώς να κατεβάσετε μια γραμματοσειρά από έναν ιστότοπο χρησιμοποιώντας τα Εργαλεία προγραμματιστή

• Κάντε επανεκκίνηση του Chrome, του Edge ή του Firefox χωρίς να χάσετε καρτέλες στα Windows 11/10

• Συμβουλές για τη χρήση του Inspect Element του προγράμματος περιήγησης Google Chrome

• Πώς να κάνετε το Chrome το προεπιλεγμένο πρόγραμμα περιήγησης στα Windows 10 (Firefox & Opera)

• Πώς να απαλλαγείτε από την Αναζήτηση Yahoo στο Chrome

• Πώς να αλλάξετε το όνομά σας στο Google Meet

• Διορθώστε το YouTube Autoplay που δεν λειτουργεί

• Συνδυάστε όλους τους λογαριασμούς email σας σε ένα Gmail Inbox

• Πώς να διορθώσετε το Απαγορευμένο σφάλμα 403 στο Google Chrome

• Διαγράψτε τα δεδομένα ιστότοπου για συγκεκριμένο ιστότοπο στο Chrome ή στο Edge χρησιμοποιώντας τα Εργαλεία προγραμματιστή

• Πώς να διορθώσετε τον κωδικό σφάλματος Netflix M7111-1101

• Μεταβείτε σε κατάσταση ανώνυμης περιήγησης με ένα πλήκτρο συντόμευσης σε Chrome, Edge, Firefox και Opera

• Πώς να κάνετε σίγαση μιας καρτέλας σε Chrome, Firefox, Microsoft Edge και Opera

• Πώς να καρφιτσώσετε έναν ιστότοπο στη γραμμή εργασιών ή στο μενού Έναρξη στα Windows 10

• Διόρθωση προβλήματος: Το Google Chrome χρησιμοποιεί πολύ επεξεργαστή (CPU) όταν επισκέπτομαι έναν ιστότοπο

• Πώς να αλλάξετε τη μηχανή αναζήτησης στο Chrome για Windows, macOS, Android και iOS -

• Πώς να στείλετε ένα κείμενο από τον υπολογιστή με τα μηνύματα Android

• Δημιουργήστε συντομεύσεις InPrivate ή ανώνυμης περιήγησης για Firefox, Chrome, Edge, Opera ή Internet Explorer