Developer Tools και Inspect Μέσα Aπό το Browser

Ανάμεσα στα πολλά και δυνατά εργαλεία που έχουμε σήμερα στη διάθεσή μας, βρίσκονται και μερικές επιπλέον δυνατότητες των νέων browsers, του Google Chrome, Firefox ή πχ του Opera, δυνατότητες που αξίζει να ερευνήσουμε και να αξιοποιήσουμε.

Πέρα από τα τυπικά ενός καλού web browser, ο Chrome μας δίνει ένα πολύ δυνατό σετ δυνατοτήτων για αξιολόγηση, έλεγχο, και μετρήσεις σε οποιαδήποτε σελίδα ή site. Είναι το γνωστό inspect που βγαίνει μετά από δεξί κλικ στη σελίδα.

Η οθόνη πλέον χωρίζεται στα δύο, αριστερά έχουμε τη σελίδα και δεξιά τον κώδικά της, μαζί με ένα σετ επιπλέον δυνατοτήτων, κουμπιών και μενού (πάνω και κάτω αντίστοιχα για Firefox).

Προφανώς για να υπάρχει 100% εκμετάλλευση όλων των δυνατοτήτων απαιτείται άριστη γνώση html, css και web developing γενικότερα. Αλλά ακόμα και για τους υπόλοιπους αμύητους, υπάρχουν πολλά που μπορούμε να κάνουμε.

Ξεχωρίσαμε τα παρακάτω:

• Τη δυνατότητα να γίνει preview της σελίδας σε κινητή συσκευή, ενώ μάλιστα μπορούμε να καθορίσουμε ακριβώς ποια συσκευή. Μπορούμε λοιπόν να ελέγχουμε αν η σελίδα μας θα βγαίνει όπως πρέπει πχν σε Nexus 5, Galaxy S3 ή iPhone 6, να την έχουμε σε portrait ή landscape. Αξιολογούμε κατά πόσο είναι responsive το design της σελίδας.
• Τη δυνατότητα να δούμε όσο το δυνατόν πιο αναλυτικά όλα τα στοιχεία που περιέχονται στη σελίδα, να δούμε από ποια διαδρομή έρχονται, με ποια σειρά φορτώνονται και πόση μνήμη καταλαμβάνουν. Μπορούμε επίσης να ελέγχουμε την περιήγησή μας στο site και να έχουμε μετρήσεις με ακρίβεια millisecond για τους χρόνους φόρτωσης.
• Κάνοντας πχ reload τη σελίδα από το αντίστοιχο κουμπί, βλέπουμε πότε ακριβώς φορτώνεται τί, ποιό ακριβώς αντικείμενο ή διαδικασία μας καθυστερεί, καταλήγουμε σε κάποιες σωστές προτάσεις και παρατηρήσεις, και μάλιστα μετά από αξιολόγηση του ενός λεπτού. Αν πχ διαπιστώσουμε πως οι διαφημίσεις φορτώνονται γρηγορότερα από τα στοιχεία της σελίδας, ξέρουμε πού να αναζητήσουμε τη λύση του θέματος (στον αργό server του hosting).

Αφιερώστε λίγο χρόνο να παίξετε με τα μενού και τις δυνατότητες των developer tools του Chrome, εξερευνήστε τα links που ακολουθούν και δεν θα χάσετε!

Για γατάκια και λοιπούς αρχάριους, για γατόνια και έμπειρους, και για βετεράνους...