Τι είναι ένας περιηγητής;

Οι browsers (ή προγράμματα περιήγησης) είναι εφαρμογές μέσω των οποίων μπορούμε και περιηγούμαστε ανάμεσα σε ιστοσελίδες. Τα προγράμματα αυτά καταλαβαίνουν την html γλώσσα και την ερμηνεύουν σε τέτοια μορφή ώστε να μπορεί να απεικονιστεί στην οθόνη του υπολογιστή μας.

Προκειμένου να συνεχίσουμε τον συγκεκριμένο οδηγό για την html θα πρέπει να έχουμε εγκατεστημένο έναν περιηγητή στον υπολογιστή μας. Μερικοί από τους πιο διαδεδομένους περιηγητές είναι :

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

Τι είναι τα Dev Tools ;

Τα Dev(elopement) Tools (ή εργαλεία ανάπτυξης) είναι μια σειρά από εργαλεία που οι νεότερες εκδόσεις περιηγητών διαθέτουν προκειμένου να βοηθήσουν τους προγραμματιστές να αναγνωρίσουν σημεία του α εικονιζόμενου κώδικα μαρκάροντας με κάποιον τρόπο έτσι το αποτέλεσμα που παράγει ο κώδικας HTML. Παρακάτω θα επεξηγηθεί ο τρόπος με τον οποίο μπορούμε να ανοίξουμε τα dev tools σε κάθε έναν από τους παραπάνω περιηγητές.

Chrome

Στον google Chrome τα πράγματα είναι πολύ απλά, πηγαίνοντας σε μια ιστοσελίδα και πατώντας το πλήκτρο F12 ανοίγει άμεσα το dev tools του Chrome το οποίο μάλιστα αποτελεί Dev Tools με πολλές λεπτομέρειες και δυνατότητες το οποίο υποστηρίζεται σε μεγάλο βαθμό από την Google. Η αρχική οθόνη προβολής του dev tools περιλαμβάνει την προβολή της διάρθρωσης της ιστοσελίδας μας, όπου κάνοντας hover σε κάποιο html element αυτό τονίζεται live στην ιστοσελίδα μας την στιγμή εκείνη, στο δεξί μέρος μας δίνεται η δυνατότητα να δούμε το style το οποίο επηρεάζει ένα element.

FireFox

Παρόμοια με τον google chrome πατώντας το πλήκτρο F12 μας ανοίγει το αντίστοιχο dev Tools του firefox. Ελαφρώς διαφορετικός σε εμφάνιση αλλά με παρόμοιες δυνατότητες βλέπουμε την πρώτη οθόνη να περιλαμβάνει αριστερό και δεξί μέρος όπως ακριβώς και του google chrome όπου αριστερά βρίσκονται τα elements του document και δεξιά το style που έχει εφαρμοστεί σε κάθε element στο οποίο κάνουμε κλικ πάνω του.

Windows Internet Explorer

Όπως σε όλους τους προηγούμενος περιηγητές έτσι κι εδώ πιέζοντας το πλήκτρο F12 μας εμφανίζεται το σχετικό παράθυρο με παρόμοια διάρθρωση όπως και πριν (αριστερά document elements δεξιά styling) ωστόσο το hover σε ένα element δεν μας εμφανίζει live την τοποθεσία του αντικειμένου μέσα στην ιστοσελίδα. ΓΙ αυτόν καθώς και για άλλους λόγους ο internet explorer συνήθως δεν επιλέγεται για ανάπτυξη ιστοσελίδων.

Opera

Στην περίπτωση του opera το άνοιγμα των dev tools του δεν γίνεται με F12 αλλά με ctr+shift+c. Διαθέτει πανομοιότυπα dev tools με τον google chrome, επομένως δεν χρειάζονται να αναφερθούν πολλά επί του θέματος. Αριστερά document elements, δεξιά styling, το hover μας επιτρέπει να βλέπουμε την θέση αντικειμένων και επίσης μπορούμε live να επεξεργαστούμε το document που έχουμε εκείνη την στιγμή στην οθόνη μας.

Το ποιον θα επιλέξετε είναι στο χέρι σας. Συνήθως όλοι μας δίνουν αρκετές πληροφορίες (πλην του internet explorer), επομένως οπλιστείτε με έναν από τους παραπάνω browsers και ετοιμαστείτε για δράση!