Κάθε σύγχρονο πρόγραμμα περιήγησης ιστού περιλαμβάνει μια ισχυρή σουίτα εργαλείων προγραμματιστών. Αυτά τα εργαλεία κάνουν μια σειρά από πράγματα, από την επιθεώρηση HTML, CSS και JavaScript που έχουν φορτωθεί αυτήν τη στιγμή έως την εμφάνιση των στοιχείων που έχει ζητήσει η σελίδα και πόσο χρόνο χρειάστηκε να φορτωθούν. Αυτό το άρθρο εξηγεί πώς να χρησιμοποιήσετε τις βασικές λειτουργίες των εργαλείων προγραμματισμού του προγράμματος περιήγησής σας.

Σημείωση: Προτού εκτελέσετε τα παρακάτω παραδείγματα, ανοίξτε την τοποθεσία παραδειγμάτων για αρχάριους που δημιουργήσαμε κατά τη σειρά άρθρων Ξεκινώντας με το Web. Θα πρέπει να την ανοίξετε καθώς ακολουθείτε τα παρακάτω βήματα.

Πώς να ανοίξετε τα εργαλεία ανάπτυξης στο πρόγραμμα περιήγησής σας

Τα εργαλεία ανάπτυξης βρίσκονται μέσα στο πρόγραμμα περιήγησής σας σε ένα υποπαράθυρο που μοιάζει περίπου με αυτό, ανάλογα με το πρόγραμμα περιήγησης που χρησιμοποιείτε:

Πώς το σηκώνεις; τρεις τρόποι:

Ο επιθεωρητής: εξερευνητής DOM και επεξεργαστής CSS

Τα εργαλεία προγραμματιστή συνήθως ανοίγουν από προεπιλογή στον επιθεωρητή, κάτι που μοιάζει με το παρακάτω στιγμιότυπο οθόνης. Αυτό το εργαλείο δείχνει πώς φαίνεται το HTML στη σελίδα σας κατά το χρόνο εκτέλεσης, καθώς και τι CSS εφαρμόζεται σε κάθε στοιχείο της σελίδας. Σας επιτρέπει επίσης να τροποποιείτε άμεσα το HTML και το CSS και να βλέπετε τα αποτελέσματα των αλλαγών σας να αντικατοπτρίζονται ζωντανά στη θύρα προβολής του προγράμματος περιήγησης.

Αν εσύ όχιδείτε τον επιθεωρητή

• Πατήστε/κάντε κλικ στο Επιθεωρητήςαυτί.
• Στον Internet Explorer, πατήστε/κάντε κλικ DOM Explorer,ή πατήστε Ctrl + 1 .
• Στο Microsoft Edge ή στο Opera, πατήστε/κάντε κλικ στο Elements.
• Στο Safari, τα στοιχεία ελέγχου δεν παρουσιάζονται τόσο καθαρά, αλλά θα πρέπει να δείτε το HTML εάν δεν έχετε επιλέξει κάτι άλλο για να εμφανίζεται στο παράθυρο. στυλκουμπί για να δείτε το CSS.

Εξερευνώντας τον επιθεωρητή DOM

Για αρχή, κάντε δεξί κλικ (Ctrl-κλικ) σε ένα στοιχείο HTML στον επιθεωρητή DOM και δείτε το μενού περιβάλλοντος. Οι διαθέσιμες επιλογές μενού διαφέρουν μεταξύ των προγραμμάτων περιήγησης, αλλά οι σημαντικές είναι κυρίως οι ίδιες:

• Διαγραφή κόμβου(ωρες ωρες Διαγραφή στοιχείου). Διαγράφει το τρέχον στοιχείο.
• Επεξεργασία ως HTML(ωρες ωρες Προσθήκη χαρακτηριστικού/Επεξεργασία κειμένου). Σας επιτρέπει να αλλάξετε το HTML και να δείτε τα αποτελέσματα αμέσως. Πολύ χρήσιμο για εντοπισμό σφαλμάτων και δοκιμές.
• :hover/:active/:focus. Αναγκάζει να ενεργοποιηθούν οι καταστάσεις στοιχείων, ώστε να μπορείτε να δείτε πώς θα μοιάζει το στυλ τους.
• Αντιγραφή/Αντιγραφή ως HTML. Αντιγράψτε το τρέχον επιλεγμένο HTML.
• Ορισμένα προγράμματα περιήγησης έχουν επίσης Αντιγραφή διαδρομής CSSκαι Αντιγράψτε το XPathδιαθέσιμο, για να σας επιτρέψει να αντιγράψετε τον επιλογέα CSS ή την έκφραση XPath που θα επέλεγε το τρέχον στοιχείο HTML.

Δοκιμάστε να επεξεργαστείτε μέρος του DOM σας τώρα. Κάντε διπλό κλικ σε ένα στοιχείο ή κάντε δεξί κλικ σε αυτό και επιλέξτε Επεξεργασία ως HTMLαπό το μενού περιβάλλοντος. Μπορείτε να κάνετε όποιες αλλαγές θέλετε, αλλά δεν μπορείτε να αποθηκεύσετε τις αλλαγές σας.

Εξερεύνηση του επεξεργαστή CSS

Από προεπιλογή, το πρόγραμμα επεξεργασίας CSS εμφανίζει τους κανόνες CSS που εφαρμόζονται στο τρέχον επιλεγμένο στοιχείο:

Αυτά τα χαρακτηριστικά είναι ιδιαίτερα χρήσιμα:

• Οι κανόνες που εφαρμόζονται στο τρέχον στοιχείο εμφανίζονται με τη σειρά από το περισσότερο προς το λιγότερο συγκεκριμένο.
• Κάντε κλικ στα πλαίσια ελέγχου δίπλα σε κάθε δήλωση για να δείτε τι θα συνέβαινε αν καταργούσατε τη δήλωση.
• Κάντε κλικ στο μικρό βέλος δίπλα σε κάθε ιδιότητα στενογραφίας για να εμφανίσετε τα μακροχρόνια ισοδύναμα της ιδιοκτησίας.
• Κάντε κλικ σε ένα όνομα ή μια τιμή ιδιότητας για να εμφανιστεί ένα πλαίσιο κειμένου, όπου μπορείτε να πληκτρολογήσετε μια νέα τιμή για να λάβετε μια ζωντανή προεπισκόπηση μιας αλλαγής στυλ.
• Δίπλα σε κάθε κανόνα βρίσκεται το όνομα αρχείου και ο αριθμός γραμμής στον οποίο ορίζεται ο κανόνας. Κάνοντας κλικ σε αυτόν τον κανόνα, τα εργαλεία προγραμματισμού μεταπηδούν για να τον εμφανίσουν στη δική τους προβολή, όπου μπορεί γενικά να επεξεργαστεί και να αποθηκευτεί.
• Μπορείτε επίσης να κάνετε κλικ στο σγουρό άγκιστρο κλεισίματος οποιουδήποτε κανόνα για να εμφανιστεί ένα πλαίσιο κειμένου σε μια νέα γραμμή, όπου μπορείτε να γράψετε μια εντελώς νέα δήλωση για τη σελίδα σας.

Θα παρατηρήσετε μια σειρά από καρτέλες με δυνατότητα κλικ στο επάνω μέρος του CSS Viewer:

• Υπολογισμένη: Εμφανίζει τα υπολογισμένα στυλ για το τρέχον επιλεγμένο στοιχείο (τις τελικές, κανονικοποιημένες τιμές που εφαρμόζει το πρόγραμμα περιήγησης).
• διάταξη: Στον Firefox, αυτή η περιοχή περιλαμβάνει δύο ενότητες:
  • μοντέλο κουτιού: αντιπροσωπεύει οπτικά το μοντέλο πλαισίου του τρέχοντος στοιχείου, ώστε να μπορείτε να δείτε με μια ματιά τι γέμιση, περίγραμμα και περιθώριο εφαρμόζεται σε αυτό και πόσο μεγάλο είναι το περιεχόμενό του.
  • Πλέγμα: Εάν η σελίδα που επιθεωρείτε χρησιμοποιεί CSS Grid, αυτή η ενότητα σάς επιτρέπει να προβάλετε τις λεπτομέρειες του πλέγματος.
• Γραμματοσειρές: Στον Firefox, το ΓραμματοσειρέςΗ καρτέλα δείχνει τις γραμματοσειρές που εφαρμόζονται στο τρέχον στοιχείο.

Μάθετε περισσότερα

Μάθετε περισσότερα για το Inspector σε διαφορετικά προγράμματα περιήγησης:

• Επιθεωρητής Chrome DOM

Το πρόγραμμα εντοπισμού σφαλμάτων JavaScript

Το πρόγραμμα εντοπισμού σφαλμάτων JavaScript σάς επιτρέπει να παρακολουθείτε την τιμή των μεταβλητών και να ορίζετε σημεία διακοπής, θέσεις στον κώδικά σας που θέλετε να θέσετε σε παύση την εκτέλεση και να εντοπίσετε τα προβλήματα που εμποδίζουν τη σωστή εκτέλεση του κώδικά σας.

Για να μεταβείτε στο πρόγραμμα εντοπισμού σφαλμάτων:

Firefox: Επιλέξτε ➤ προγραμματιστής Ιστού ➤ Εντοπιστής σφαλμάτωνή πατήστε Ctrl + Shift + S για να ανοίξετε το JavaScript Debugger. Εάν τα εργαλεία εμφανίζονται ήδη, κάντε κλικ στο Εντοπιστής σφαλμάτωναυτί.

Χρώμιο: Ανοίξτε τα Εργαλεία προγραμματιστή και, στη συνέχεια, επιλέξτε το Πηγέςαυτί. (Η Όπερα λειτουργεί με τον ίδιο τρόπο.)

Edge και Internet Explorer 11: Πατήστε F12 και, στη συνέχεια, Ctrl + 3 , ή εάν τα εργαλεία εμφανίζονται ήδη, κάντε κλικ στην καρτέλα Εντοπισμός σφαλμάτων.

σαφάρι: Ανοίξτε τα Εργαλεία προγραμματιστή και, στη συνέχεια, επιλέξτε την καρτέλα Εντοπισμός σφαλμάτων.

Εξερεύνηση του προγράμματος εντοπισμού σφαλμάτων

Υπάρχουν τρία παράθυρα στο JavaScript Debugger στον Firefox.

λίστα αρχείων

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

πηγαίος κώδικας

Ορίστε σημεία διακοπής στα οποία θέλετε να διακόψετε την εκτέλεση. Στην παρακάτω εικόνα, η επισήμανση στον αριθμό 18 δείχνει ότι η γραμμή έχει ένα σύνολο σημείων διακοπής.

Παρακολουθήστε εκφράσεις και σημεία διακοπής

Το δεξί παράθυρο εμφανίζει μια λίστα με τις εκφράσεις ρολογιού που έχετε προσθέσει και τα σημεία διακοπής που έχετε ορίσει.

Στην εικόνα, η πρώτη ενότητα, ρολόι εκφράσεις, δείχνει ότι έχει προστεθεί η μεταβλητή listItems. Μπορείτε να επεκτείνετε τη λίστα για να προβάλετε τις τιμές στον πίνακα.

την επόμενη ενότητα, ορια ΑΝΤΟΧΗΣ, παραθέτει τα σημεία διακοπής που έχουν οριστεί στη σελίδα. Στο example.js, έχει οριστεί ένα σημείο διακοπής στη δήλωση listItems.push(inputNewItem.value);

Οι δύο τελευταίες ενότητες εμφανίζονται μόνο όταν εκτελείται ο κώδικας.

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

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

Μάθετε περισσότερα

Μάθετε περισσότερα για το πρόγραμμα εντοπισμού σφαλμάτων JavaScript σε διαφορετικά προγράμματα περιήγησης:

Η κονσόλα JavaScript

Η κονσόλα JavaScript είναι ένα απίστευτα χρήσιμο εργαλείο για τον εντοπισμό σφαλμάτων JavaScript που δεν λειτουργεί όπως αναμένεται. Σας επιτρέπει να εκτελείτε γραμμές JavaScript στη σελίδα που έχει φορτωθεί αυτήν τη στιγμή στο πρόγραμμα περιήγησης και αναφέρει τα σφάλματα που παρουσιάζονται καθώς το πρόγραμμα περιήγησης προσπαθεί να εκτελέσει τον κώδικά σας. Για πρόσβαση στην κονσόλα σε οποιοδήποτε πρόγραμμα περιήγησης:

Εάν τα εργαλεία προγραμματιστή είναι ήδη ανοιχτά, κάντε κλικ ή πατήστε την καρτέλα Κονσόλα.

Εάν όχι, ο Firefox σάς επιτρέπει να ανοίξετε την κονσόλα απευθείας χρησιμοποιώντας Ctrl + Shift + K ή χρησιμοποιώντας την εντολή μενού: Μενού ➤ Προγραμματιστής Ιστού➤ Κονσόλα Ιστού,ή Εργαλεία ➤ Web Developer ➤ Web Console.Σε άλλο πρόγραμμα περιήγησης, ανοίξτε τα εργαλεία προγραμματιστή και, στη συνέχεια, κάντε κλικ στην καρτέλα Κονσόλα.

Αυτό θα σας δώσει ένα παράθυρο όπως το παρακάτω:

Για να δείτε τι συμβαίνει, δοκιμάστε να εισαγάγετε τα ακόλουθα αποσπάσματα κώδικα στην κονσόλα ένα προς ένα (και μετά πατήστε Enter):

1. alert ("γεια!");
2. document.querySelector("html").style.backgroundColor = "μωβ";
3. var myImage = document.createElement("img"); myImage.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(myImage);

Τώρα δοκιμάστε να εισαγάγετε τις ακόλουθες εσφαλμένες εκδόσεις του κώδικα και δείτε τι λαμβάνετε.

1. alert ("γεια!");
2. document.cheeseSelector("html").style.backgroundColor = "μωβ";
3. var myImage = document.createElement("img"); myBanana.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(myImage);

Θα αρχίσετε να βλέπετε το είδος των σφαλμάτων που επιστρέφει το πρόγραμμα περιήγησης. Συχνά αυτά τα σφάλματα είναι αρκετά κρυπτικά, αλλά θα πρέπει να είναι πολύ απλό να καταλάβετε αυτά τα προβλήματα!

Μάθετε περισσότερα

Μάθετε περισσότερα για την κονσόλα JavaScript σε διαφορετικά προγράμματα περιήγησης:

• Κονσόλα JavaScript Chrome (ο επιθεωρητής της Opera λειτουργεί το ίδιο με αυτό)

Οι προγραμματιστές προσπαθούν συνεχώς να κάνουν τη ζωή τους πιο εύκολη ή να επεκτείνουν τις δικές τους δυνατότητες. Έχουμε ετοιμάσει 11 εργαλεία που θα το παρέχουν.

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

Themify.me Ultra

Από την πρώτη μέρα δημιουργίας, οι προγραμματιστές πόρων Διαδικτύου και οι σχεδιαστές ιστοσελίδων αναζητούν συνεχώς τρόπους για να απλοποιήσουν και να επιταχύνουν τη διαδικασία δημιουργίας ενός νέου πόρου. Σήμερα, πολλά εργαλεία μπορούν να απλοποιήσουν την ανάπτυξη ιστοσελίδων, αλλά Themify Ultraείναι το πιο προηγμένο μεταξύ όλων των αναλόγων. Με αυτό το εργαλείο, η εκκίνηση ενός νέου πόρου έχει γίνει όσο το δυνατόν πιο απλή, ποτέ δεν ήταν τόσο απλή. Στην πραγματικότητα, αυτό είναι το πιο δυναμικό από τα υπάρχοντα θέματα στο WP.

Το θέμα περιέχει περισσότερες από 60 εγκατεστημένες μορφές, έχουν λύσεις για τις πιο συνηθισμένες ερωτήσεις. Με ένα δυναμικό θέμα, είναι εύκολο να δημιουργήσετε έναν ιστότοπο μιας σελίδας, καθώς και έναν εταιρικό πόρο ή ένα ηλεκτρονικό κατάστημα. Όλα τα θέματα φορτώνονται με σχεδόν 1 κλικ.

Themify Ultra- αυτό είναι ένα εργαλείο επί πληρωμή, αλλά έχει έκδοση επίδειξηςσε όλες τις μορφές, αυτό σας επιτρέπει να βεβαιωθείτε για την υψηλή ποιότητα, την απόδοση και τη σταθερότητα του σχεδιασμού. Ορισμένες από τις παρουσιαζόμενες μορφές παρέχονται εντελώς δωρεάν. Οι δημιουργοί εγγυώνται ότι μετά την πληρωμή, ο πελάτης θα λάβει ακριβώς το προϊόν που δοκίμασε στην έκδοση επίδειξης. Σε περίπτωση αγοράς συνδρομής, ο πελάτης λαμβάνει επιπλέον 1 έτος τεχνικής υποστήριξης και τακτικές ενημερώσεις, προσθέτοντας καινοτομίες.

Σχεδιαστικές βόμβες

ΜΕ Σχεδιαστικές βόμβεςΧωρίς ταίρι στον τομέα των σεμιναρίων, αυτός ο ιστότοπος διαθέτει την πιο ολοκληρωμένη βάση δεδομένων με υλικά για εκμάθηση χρήσης του WordPress. Είναι δύσκολο να φανταστεί κανείς την αφθονία των διαφόρων χρήσιμων λύσεων σε ένα γενικά αναγνωρισμένο φόρουμ όπου συγκεντρώνονται προγραμματιστές και σχεδιαστές από όλο τον κόσμο. Πολλές ενδιαφέρουσες λύσεις θα βοηθήσουν στην επέκταση των δυνατοτήτων του δημιουργημένου πόρου.

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

Οι συγγραφείς έχουν δώσει μεγάλη προσοχή στη δημιουργία και την κάλυψη όλων των περιοχών που είναι απαραίτητες για την ανάπτυξη ενός επιτυχημένου πόρου στο WordPress. Μόλις παρουσιαστούν δυσκολίες με τη ρύθμιση ενός προφίλ, τη λειτουργία συστήματος κ.λπ., θα πρέπει να μεταβείτε αμέσως σε αυτό το φόρουμ και να βρείτε οδηγίες ή μια συζήτηση για το πρόβλημα.

IMCreator

Ένας ενεργά αναπτυσσόμενος πόρος που ισχυρίζεται ότι είναι ο ηγέτης στην προσέλκυση χρηστών. IMCreatopείναι μια ισχυρή πλατφόρμα για τη γρήγορη και χωρίς προβλήματα δημιουργία ιστοσελίδων μεγάλης ποικιλίας θεμάτων και σκοπών. Ήδη σήμερα το κοινό του έργου ξεπερνά 11 εκατομμύρια άνθρωποικαι ο αριθμός των συνδρομητών αυξάνεται όλο και πιο γρήγορα.

Η ιδέα των προγραμματιστών είναι να δημιουργήσουν μια πλατφόρμα που θα μπορεί να εκτελεί τους περισσότερους χειρισμούς με τον ιστότοπο χωρίς δεξιότητες προγραμματισμού και χωρίς να αγγίζει τον κώδικα. Ακόμη και ένα άτομο χωρίς γνώσεις στον τομέα της ανάπτυξης είναι σε θέση να δημιουργήσει τον επιθυμητό ιστότοπο. Ο χρήστης πρέπει να επιλέξει ένα πρότυπο και η πλατφόρμα θα επεξεργαστεί τα πάντα και θα το κάνει φιλικό προς την Google.

Η ευκολία χρήσης δεν είναι δωρεάν, εφαρμόζεται η αγορά συνδρομής PRO για 350 $ ετησίως, αλλά δεν υπάρχει όριο στον αριθμό των πόρων που δημιουργούνται. Οι πελάτες λαμβάνουν έναν μοναδικό ιστότοπο με μια ετικέτα, τον δικό τους τομέα και χώρο φιλοξενίας με έναν πόρο που έχει ληφθεί και εγκατασταθεί.

wpDataTables.com

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

Ένα σημαντικό πλεονέκτημα του προϊόντος είναι ότι μπορείτε να αλληλεπιδράσετε με το πρόσθετο σε πραγματικό χρόνο. Μετά από οποιεσδήποτε ρυθμίσεις, οι αλλαγές θα εμφανιστούν στο διάγραμμα. Ήδη σήμερα το plug-in χρησιμοποιείται από περισσότερες από 9 χιλιάδες εταιρείες στον κόσμο

Codester.com

Codesterείναι μια αγορά Διαδικτύου όπου πωλούνται και αγοράζονται εύκολα όλα τα είδη εργαλείων προγραμματιστών Ιστού.

Τι μπορείτε να αγοράσετε εδώ:

• Σενάρια PHP που δεν είναι δημόσια διαθέσιμα.
• κωδικός παραγγελίας;
• Πρότυπα δημοφιλών εφαρμογών.
• μοναδικά θέματα?
• πρόσθετα για CMS κ.λπ.

Το κατάστημα δεν περιορίζεται στη συνεργασία με οποιοδήποτε CMS, μπορείτε να αγοράσετε και να πουλήσετε ένα προϊόν για οποιαδήποτε πλατφόρμα. Η υπηρεσία είναι χρήσιμη για προγραμματιστές που δεν μπορούν να ολοκληρώσουν τη δουλειά τους, δεν θέλουν να χάνουν χρόνο ή απλώς να κερδίσουν χρήματα από τη μεταφόρτωση της εργασίας.

Το πλεονέκτημα ενός τέτοιου καταστήματος είναι η δυνατότητα σύγκρισης των τιμών και της ποιότητας των αγαθών, η απόφαση για τη λειτουργικότητα και μόνο τότε η αγορά της πιο κερδοφόρας λύσης για το τρέχον έργο. Σε σύγκριση με άλλες αγορές, οι σχετικά χαμηλές τιμές του Codester σπάνια κοστίζουν περισσότερα από 15 $ ανά λήψη για φρέσκα προϊόντα.

Bugherd

Οι προγραμματιστές αναζητούν εδώ και καιρό έναν απλό και αποτελεσματικό τρόπο εντοπισμού σφαλμάτων σε έναν ιστότοπο στο στάδιο ανάπτυξης ενός έργου. Δεν έχουν όλες οι εταιρείες την οικονομική δυνατότητα να προσλάβουν έναν ελεγκτή, επομένως το BugHerd είναι το κατάλληλο εργαλείο για τη δοκιμή πόρων. Η ουσία του έργου έγκειται στην υλοποίηση και ανάλυση δεδομένων ανατροφοδότησηαπό τον χρήστη.

Εάν ο επισκέπτης έχει οποιοδήποτε είδος αποτυχίας, αποστέλλεται αμέσως μια αναφορά σφάλματος και παρουσιάζονται λεπτομερείς πληροφορίες για το πρόβλημα στον προγραμματιστή. Με τη βοήθεια του εργαλείου, είναι δυνατό να μετατραπούν οι συνηθισμένες κριτικές σε αναφορές σταθερότητας συστήματος υψηλής ποιότητας και να παρέχετε στον προγραμματιστή τις απαραίτητες πληροφορίες για την επίλυση του προβλήματος.

Λειτουργεί με βάση μια υπηρεσία cloud που βοηθά στο συγχρονισμό της εργασίας της ομάδας, ανεξάρτητα από την τρέχουσα τοποθεσία. Υπάρχουν λειτουργίες για ανάθεση εργασιών, ρύθμιση επιπέδου πρόσβασης, προτεραιότητα, κοινή χρήση σχολίων, επικοινωνία, φιλτράρισμα, ταξινόμηση κατά τύπο προβλήματος κ.λπ.

Αρχικά προσφέρεται δοκιμαστική έκδοση, το οποίο σας επιτρέπει να αξιολογήσετε την ικανότητα και τη λειτουργικότητα της υπηρεσίας και στο μέλλον θα πρέπει να πληρώνετε μηνιαία $29 .

EverSign

Οι ελεύθεροι επαγγελματίες στοχεύουν στη συνεργασία με οποιαδήποτε αγορά υπάρχει ζήτηση και υψηλή αγοραστική δύναμη. Συνήθως πρόκειται για πελάτες από την Ευρώπη και τις ΗΠΑ, αλλά μαζί τους υπάρχει πρόβλημα νομικής καταχώρησης της συναλλαγής. Συχνά η διαδικασία είναι χρονοβόρα, αγχωτική και δυσκίνητη λόγω του όγκου των λεπτομερειών και γίνεται ακόμη πιο περίπλοκη όταν είναι απαραίτητο να υπογραφεί μια έντυπη έκδοση της σύμβασης. Υπηρεσία EverSignβοηθά στην αποφυγή αυτών των δυσκολιών.

Το εργαλείο είναι χρήσιμο καθώς σας επιτρέπει να δημιουργείτε, να εγκρίνετε και να υπογράφετε μια μεγάλη ποικιλία εγγράφων με απολύτως νόμιμη χρήση Ηλεκτρονική Υπογραφή. Σήμερα, η υπηρεσία αναγνωρίζεται ως ο πιο αξιόπιστος πόρος στον τομέα της σύναψης συμβάσεων με νομική ισχύ. Μπορεί να χρησιμοποιηθεί τόσο από ιδιώτες πελάτες όσο και από μικρές ή μεγάλες εταιρείες, το έργο είναι καθολικό.

Ο καλύτερος τρόπος για να ξεκινήσετε είναι με το δωρεάν πρόγραμμα, το οποίο παρέχει έγκριση για έως και 5 έγγραφα το μήνα. Εάν το όριο εξαντληθεί γρήγορα και απαιτούνται περισσότερες δυνατότητες, αγοράζεται μια βασική συνδρομή $99 με απεριόριστες υπογραφές, τρία πρότυπα για να διαλέξετε και υποστήριξη 24/7.

ActiTIME

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

ActiTIMEβοηθά στη συλλογή αναλυτικών δεδομένων που παρουσιάζονται με τη μορφή αναφορών που υποδεικνύουν τον χρόνο που αφιερώνεται σε μεμονωμένες εργασίες. Είναι δυνατή η παρουσίαση της αναφοράς με τη μορφή γραφήματος ή διαγράμματος. Η υπηρεσία δεν μπορεί μόνο να λάβει υπόψη τον χρόνο εργασίας, αλλά και εξαλείφει την ανάγκη για επιπλέον χρόνο που δαπανάται για τον οικονομικό έλεγχο. Βοηθά στην έκδοση τιμολογίων, πληρωμή μισθοί, συντάσσουν τιμολόγια, προγραμματίζουν διακοπές κ.λπ.

CSS Design House

Ο πόρος δεν είναι απλώς μια άλλη συλλογή από οπτικά ελκυστικούς ιστότοπους. Το CSS Design House είναι ο καλύτερος διαδικτυακός συνεργάτης που σας βοηθά να επιλέξετε προϊόντα από κορυφαίες εταιρείες σχεδιασμού. Οι πιο σύγχρονες, ποιοτικές και επαγγελματικές ιδέες σχεδίασης από διάφορες περιοχές του διαδικτύου δημοσιεύονται εδώ.

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

LuckyOrange

Ένα είδος υπηρεσίας ντετέκτιβ που έχει σχεδιαστεί για να παρακολουθεί τη συμπεριφορά των χρηστών στον πόρο. Για να λειτουργήσει το εργαλείο, δεν απαιτείται εγγραφή χρήστη, λειτουργεί ακόμη και με επισκέπτες που μόλις έφτασαν και έφυγαν γρήγορα από τον ιστότοπο. LuckyOrangeβοηθά να κατανοήσουμε τι ακριβώς έκανε ο χρήστης κατά τη διάρκεια της συνεδρίας του.

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

Μέσω του αναλυτικού μπλοκ, είναι εύκολο να μάθετε για τον αριθμό των χρηστών, τον τρόπο με τον οποίο έφτασαν στον πόρο, το ιστορικό σερφάρισμα στον ιστότοπο, τη συμπεριφορά, την αποτελεσματικότητα συγκεκριμένων φράσεις κλειδιά, γλώσσα επικοινωνίας, χώρα διαμονής κ.λπ. Το βασικό πλεονέκτημα του εργαλείου είναι οι χάρτες θερμότητας υψηλής ακρίβειας, με τη βοήθειά τους είναι ευκολότερο να κατανοήσετε το περιεχόμενο με τις περισσότερες προβολές.

πωλητής

Πρόκειται για ένα ευέλικτο σύστημα CRM που απευθύνεται σε μικρές επιχειρήσεις. Η ιδέα των πόρων εξασφαλίζει ελάχιστη πολυπλοκότητα και ευκολία στη χρήση του εργαλείου. Οι νεοφυείς επιχειρήσεις και οι ομάδες έργων μέσω της Salesmate συνάπτουν συμβάσεις με πελάτες πιο γρήγορα. Ήδη σήμερα ο αριθμός των χρηστών έχει ξεπεράσει τις 1200 εταιρείες από διάφορες χώρες. Η τιμή των υπηρεσιών είναι δημοκρατική - $15 Μηνιαίο. Με το εργαλείο, είναι δυνατός ο αυτοματισμός των διαδικασιών εισαγωγής δεδομένων και η παρακολούθηση της απόδοσης των πωλήσεων.

Για να παρέχετε ανάπτυξη ιστού υψηλής ποιότητας, μπορείτε να χρησιμοποιήσετε μια ποικιλία εργαλείων. Σήμερα, ορισμένοι από τους πλοιάρχους εξακολουθούν να χρησιμοποιούν το πιο συνηθισμένο σημειωματάριο, αλλά αυτό δεν είναι πλέον πολύ βολικό, καθώς η εργασία γίνεται πολύ αργή εξαιτίας αυτού. Στις σύγχρονες συνθήκες, είναι απαραίτητο να αναπτυχθούν ιστοσελίδες όσο το δυνατόν γρηγορότερα, να το κάνουμε αποτελεσματικά και το συντομότερο δυνατό.

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

Φωτιά

Αυτή η εφαρμογή είναι μια προσθήκη που αναπτύχθηκε από τους δημιουργούς του προγράμματος περιήγησης Firefox και χρησιμοποιείται τακτικά από πολλούς προγραμματιστές. Έχει εξαιρετική λειτουργικότητα. Λόγω αυτής της εφαρμογής, μπορείτε να ρυθμίσετε, να επεξεργαστείτε, να παρακολουθήσετε ιστότοπους που έχουν αναπτυχθεί με βάση HTML, JavaScript, CSS και άλλες πλατφόρμες, και αυτό μπορεί να γίνει απευθείας στο ίδιο το πρόγραμμα περιήγησης. Είναι τέλειο όχι μόνο για τη δημιουργία ιστοσελίδων, αλλά και για το σχεδιασμό τους.

Αναζήτηση χαρακτήρων οντοτήτων HTML

Παρέχει πλήρη έλεγχο όλων των χαρακτήρων που βρίσκονται σε μια συγκεκριμένη ιστοσελίδα. Λόγω αυτού του εργαλείου, μπορείτε να ελέγξετε αμέσως περίπου 250 γραμμές γραπτού κώδικα. Αυτή η εφαρμογή μπορεί επίσης να χρησιμοποιηθεί στην πλατφόρμα Macintosh, καθιστώντας την ακόμα πιο βολική.

Adobe Edge Inspect

Αυτή η πλατφόρμα είναι αρκετά νέα, μπορεί να χρησιμοποιηθεί για την ανάπτυξη διαδραστικών πόρων Διαδικτύου, ειδικά με βάση εφαρμογές flash. Λόγω αυτού του προϊόντος, μπορείτε να αναπτύξετε πόρους τόσο για υπολογιστές όσο και για κινητές συσκευές. Με αυτό, μπορείτε να δημιουργήσετε έναν όχι πολύ ογκώδες πόρο, ο οποίος ακόμη και σε κινητό τηλέφωνοθα φορτώσει μέσα σε λίγα δευτερόλεπτα. Αυτή η πλατφόρμα παρέχει τη χρήση πόρων από CSS και HTML.

Δωρεάν πρόθεμα

Δεν έχει τη δική του λειτουργικότητα, αλλά λόγω αυτής της εφαρμογής, μπορείτε να χρησιμοποιήσετε την ανάπτυξη στο Βασισμένο σε CSSχωρίς χρήση προθεμάτων. Σε γενικές γραμμές, αυτό το προϊόν λειτουργεί σχεδόν ανεπαίσθητα για τον ίδιο τον προγραμματιστή, προσθέτοντας όλα τα απαραίτητα προθέματα κατά τη σύνταξη κώδικα σε αυτόματη λειτουργία.

Cloud9 IDE

Αυτό το εργαλείο έχει μια πολύ ευρεία λειτουργικότητα, η οποία σας επιτρέπει να κάνετε πολύ βολικό να εργάζεστε σε μεγάλα έργα. Λόγω αυτού, πολλοί πλοίαρχοι μπορούν να εργαστούν σε αυτά ταυτόχρονα, γεγονός που μπορεί να κάνει ορισμένες αλλαγές σε πραγματικό χρόνο. Σε μεγάλο βαθμό λόγω αυτού, αυτή η εφαρμογή είναι η πιο δημοφιλής σήμερα. Έχει ένα πρόγραμμα επεξεργασίας που σας επιτρέπει να εργαστείτε διάφορες πλατφόρμες. Εάν είναι επιθυμητό, ​​η δομή του ιστότοπου μπορεί να προβληθεί με τη μορφή δέντρου. Διαθέτει επίσης ενσωματωμένο πρόγραμμα-πελάτη FTP, λόγω του οποίου ανταλλάσσονται δεδομένα μέσω υπολογιστών που βρίσκονται σε διάφορα μέρη του κόσμου.

PixelDropr

Αυτή η εφαρμογή δημιουργήθηκε από ειδικούς της Adobe, δεν είναι τόσο απαιτητική σε πόρους υπολογιστή όσο το Photoshop, ωστόσο, όσον αφορά τη λειτουργικότητα, το πρόγραμμα δεν διαφέρει πάρα πολύ από αυτό. γραφικός επεξεργαστής. Με αυτό, μπορείτε να δημιουργήσετε ορισμένα γραφικά στοιχεία πόρων Διαδικτύου:

• εικονογραφήσεις?
• Εικονίδια?
• Κουμπιά.

Θεμέλιο 3

Χρησιμοποιώντας αυτό το πρόγραμμα, μπορείτε κυριολεκτικά να δημιουργήσετε κωδικούς μέσα σε λίγα δευτερόλεπτα που επιτρέπουν στα προσαρμοστικά έργα να λειτουργούν αξιόπιστα και σταθερά. Λόγω αυτής της εφαρμογής, είναι δυνατό να δημιουργήσετε γρήγορα μια διάταξη σχεδιασμένη να λειτουργεί με στυλ, να την κάνει πολύ ευέλικτη και πολύ βολική. Παίζει όμορφα με SASS και CSS.

Fontello

Ένα από τα λίγα προγράμματα, και πολλοί ειδικοί λένε ότι είναι το μοναδικό στο είδος του, που σας επιτρέπει να δημιουργείτε εικονίδια. Αρκεί ο προγραμματιστής να επιλέξει τα απαιτούμενα εικονίδια, μετά τα οποία η εφαρμογή θα τα μεταγλωττίσει με μια ειδική γραμματοσειρά. Λόγω αυτού, μπορείτε να κάνετε αλλαγές στους κωδικούς χαρακτήρων, τα στυλ και τα ονόματά τους.

Cloud Comp

Αν και αυτό το εργαλείο δεν είναι ρωσικό, είναι πολύ σαφές και εύκολο στη χρήση. Λόγω αυτού, μπορείτε να μοιραστείτε τον πηγαίο κώδικα του πόρου, να κάνετε εφαρμογές διαθέσιμες σε άλλους χρήστες. Αυτό το πρόγραμμα αναπτύχθηκε ειδικά για να μπορούν οι σχεδιαστές να ανταλλάσσουν εμπειρίες μεταξύ τους, να παρέχουν στους πελάτες δικαιώματα πρόσβασης κ.λπ.

Πλάνα προγράμματος περιήγησης

Δημιουργήθηκε ειδικά για τη δημιουργία στιγμιότυπων οθόνης του ιστότοπου σε διάφορα προγράμματα περιήγησης που χρησιμοποιούν οι χρήστες για να σερφάρουν στο Διαδίκτυο. Δημιουργεί εικόνες σε πραγματικό χρόνο, οι αναλύσεις τους είναι δύο κύριων τύπων - 800x600 και 1024x768. Για τη σωστή χρήση του προγράμματος, αρκεί να εισαγάγετε τη διεύθυνση του εικονικού πόρου στην κατάλληλη γραμμή, μετά την οποία το πρόγραμμα θα εμφανίσει όλες τις εικόνες που τραβήχτηκαν. Λόγω αυτής της εφαρμογής, θα είναι δυνατό να καθοριστεί πολύ γρήγορα πώς ακριβώς λειτουργεί ο πόρος σε διάφορα προγράμματα περιήγησης, να κάνετε τις κατάλληλες αλλαγές στον πηγαίο κώδικα για τη σωστή εμφάνισή του.

Βελτιώστε την απόδοση, τον κώδικα και άλλα στοιχεία του ιστότοπού σας με αυτά τα εύχρηστα εργαλεία.

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

Γι' αυτό είναι πάντα ωραίο να βρίσκετε εργαλεία που θα σας βοηθήσουν να κάνετε τη δουλειά σας πιο γρήγορα και πιο παραγωγικά. Σε αυτό το άρθρο, έχουμε συλλέξει μερικά από τα πιο χρήσιμα εργαλεία.

Ορισμένα τα έχετε ήδη ακούσει, άλλα τα χρησιμοποιείτε ήδη, αλλά ελπίζουμε ότι υπάρχουν τουλάχιστον ένα ή δύο εργαλεία εδώ που μπορούν να μειώσουν τον φόρτο εργασίας σας και να κάνουν τη μέρα σας πιο ευχάριστη…

01.Firebug

Το πρόσθετο Firebug για τον Firefox είναι ένα απαραίτητο εργαλείο για προγραμματιστές.

Το εκπληκτικά χρήσιμο πρόσθετο Firebug από τους προγραμματιστές του Firefox σάς επιτρέπει να εντοπίζετε γρήγορα σφάλματα, να επεξεργάζεστε και να παρακολουθείτε HTML, JavaScript και CSS, όλα απευθείας στο πρόγραμμα περιήγησής σας.

Ένα από τα καλύτερα εργαλεία για προγραμματιστές ιστού και απαραίτητο για όποιον εργάζεται στον σχεδιασμό ιστοσελίδων.

02. Αναζήτηση χαρακτήρων οντοτήτων HTML

Η Αναζήτηση χαρακτήρων οντοτήτων HTML θα σας βοηθήσει να ελέγξετε όλους τους χαρακτήρες στη σελίδα σας.

Όταν χρησιμοποιείτε HTML, είναι πολύ σημαντικό να διασφαλίζετε ότι όλοι οι χαρακτήρες στη σελίδα σας είναι επικυρωμένοι. Ωστόσο, συχνά πρέπει να σαρωθούν περισσότερες από 250 γραμμές χαρακτήρων για να ελεγχθεί ολόκληρος ο κώδικας.

Το εργαλείο είναι επίσης διαθέσιμο ως γραφικό στοιχείο στο Mac Dashboard.

03. Adobe Edge Inspect

Το Adobe Edge Inspect είναι μια σύγχρονη εναλλακτική λύση Flash για προγραμματιστές εφαρμογών για κινητά.

Αυτή η σχετικά νέα πλατφόρμα της Adobe παρέχει στους προγραμματιστές έναν ισχυρό τρόπο δημιουργίας διαδραστικών ιστοσελίδων στην εποχή μετά το flash.

Με αυτό το εργαλείο, μπορείτε να δημιουργήσετε εφαρμογές και περιεχόμενο για κινητές συσκευές που αποκρίνονται και έχουν σχεδιαστεί για σύγχρονα προγράμματα περιήγησης για κινητά και υπολογιστές. Χρησιμοποιώντας CSS και HTML.

04.-χωρίς πρόθεμα

Χωρίς πρόθεμα θα σας βοηθήσει να ξεφύγετε από την κόλαση του προθέματος CSS.

Αυτό το υπέροχο εργαλείο από τη Leah Verou σάς επιτρέπει να χρησιμοποιείτε ιδιότητες CSS χωρίς προθέματα. Βασικά, λειτουργεί στα παρασκήνια, προσθέτοντας μόνο το τρέχον πρόθεμα του προγράμματος περιήγησης σε οποιονδήποτε κώδικα CSS όταν είναι απαραίτητο.

05. Cloud9 IDE

Το Cloud9 IDE επιτρέπει στους προγραμματιστές σε όλο τον κόσμο να εργάζονται στον ίδιο κώδικα μαζί και να επικοινωνούν.

Το Cloud9 IDE είναι ένα εργαλείο που στοχεύει να βοηθήσει τους προγραμματιστές να συνεργάζονται ενώ εργάζονται σε έργα κωδικοποίησης μεγάλης κλίμακας.

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

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

06.PixelDropr

Το PixelDropr είναι ένα εργαλείο που έχει σχεδιαστεί για τη γρήγορη δημιουργία γραφικών στοιχείων ιστότοπου.

Αυτό το εξαιρετικό πρόσθετο Photoshop καθιστά εύκολη τη δημιουργία διαφόρων εικόνων, κουμπιών και εικονιδίων. Όλα αυτά τα στοιχεία μπορούν στη συνέχεια να μεταφερθούν σε ένα αρχείο PSD.

07.Θεμέλιο3

Όπως λένε οι δημιουργοί του από το ZURB, είναι «τρελά γρήγορος» στην κωδικοποίηση για προσαρμοστικά έργα.

Δημιουργήθηκε από προγραμματιστές για προγραμματιστές στο ZURB. Αυτό το εργαλείο λειτουργεί σαν ένα προσχέδιο για τα ανταποκρινόμενα έργα σχεδιασμού σας.

Η πιο πρόσφατη έκδοση του Foundation3 έχει τη δυνατότητα να δημιουργεί εύκολα μια διάταξη βάσει πλέγματος, γεγονός που κάνει την εργασία με στυλ ακόμα πιο βολική και ευέλικτη. Το εργαλείο λειτουργεί τόσο με SASS όσο και με CSS.

08. Φοντέλλο

Το Fontello προσφέρει έναν εύκολο τρόπο δημιουργίας εικονιδίων σε μορφή γραμματοσειράς web.

Αυτή η γεννήτρια εικονιδίων είναι πραγματικά μοναδική. Επιλέξτε τα εικονίδια που χρειάζεστε και το Fontello θα τα μεταγλωττίσει σε μια εξειδικευμένη γραμματοσειρά web. Μπορείτε επίσης να επεξεργαστείτε και να προσαρμόσετε κωδικούς χαρακτήρων και ονόματα.

09. Cloud Comp

Μοιραστείτε το περιεχόμενο και τις εφαρμογές του ιστότοπού σας με το κοινό με ένα απλό εργαλείο Cloud Comp.

Αυτό το σαφές και εύχρηστο εργαλείο θα σας βοηθήσει να μοιραστείτε το περιεχόμενο του ιστότοπού σας και της εφαρμογής σας με άλλους.

Το Cloud Comp δημιουργήθηκε ειδικά για να δώσει στους σχεδιαστές και τους προγραμματιστές τη δυνατότητα να παραχωρούν δικαιώματα πρόσβασης στους πελάτες τους μέσω του κελύφους διαφόρων συσκευών.

10. ΜΠΛΟΚ

11 Basecamp

Το Basecamp είναι το εργαλείο διαχείρισης έργων που επιλέγουν πολλοί προγραμματιστές ιστού.

Αναπτύχθηκε από την 37signals, το Basecamp είναι ένα δημοφιλές διαδικτυακό εργαλείο που διευκολύνει τη διαχείριση έργων και το συντονισμό των μελών της ομάδας.

Το Basecamp εκτελείται σε μια υπηρεσία cloud, οι βασικές αρχές της οποίας είναι γνωστές στους περισσότερους ανθρώπους που εργάζονται στον σχεδιασμό και την ανάπτυξη ιστοσελίδων.

12. Πλάνα προγράμματος περιήγησης

Το Browser Shots δημιουργεί στιγμιότυπα οθόνης των τοποθεσιών σας σε διαφορετικά προγράμματα περιήγησης.

Το Browser Shots δημιουργεί στιγμιότυπα οθόνης 800 x 600 και 1024 x 768 του τρόπου με τον οποίο εμφανίζεται ο ιστότοπός σας στα έξι πιο δημοφιλή προγράμματα περιήγησης ιστού.

Απλώς εισαγάγετε μια διεύθυνση ιστότοπου και το Browser Shots θα το ανοίξει από πολλούς υπολογιστές και στη συνέχεια θα πραγματοποιήσει λήψη στιγμιότυπων οθόνης του ιστότοπου για εσάς.

13. FavIcon Generator

Γεννήτρια εικονιδίων αγαπημένων.

Favicon(" αγαπημένα εικονίδιο”) είναι μια μικρή εικόνα 16 επί 16 εικονοστοιχείων που εμφανίζεται στη γραμμή καρτελών ή στους σελιδοδείκτες του προγράμματος περιήγησης όταν ανοίγει ο ιστότοπός σας.

Αυτό το εργαλείο διευκολύνει τη δημιουργία ενός favicon για τον ιστότοπό σας.

14.Γραμμή εργαλείων για προγραμματιστές ιστού

Η επέκταση Web Developer προσθέτει μια εύχρηστη γραμμή εργαλείων στο πρόγραμμα περιήγησης.

Σχεδιασμένο για τον Firefox, αυτό το πρόσθετο παρέχει μια σειρά από χρήσιμα εργαλεία που χρησιμοποιούν οι προγραμματιστές ιστού καθημερινά. Αυτό είναι ιδιαίτερα χρήσιμο εάν πρέπει να ελέγξετε πληροφορίες από τις κεφαλίδες HTTP ή να επιθεωρήσετε το XHTML.

15. Κρούση φορτίου

Το Load Impact προσομοιώνει μια κατάσταση μεγάλου φόρτου στον ιστότοπό σας για να δοκιμάσει την απόδοσή του.

Ένας επιτυχημένος ιστότοπος είναι αυτός που φορτώνει γρήγορα. Το Load Impact είναι μια υπηρεσία που βασίζεται σε σύννεφο για προσομοίωση δοκιμαστικού φορτίου και βελτιστοποίηση ιστότοπου που δημιουργεί φόρτο στον ιστότοπο σαν να είχε μεγάλες ποσότητες επισκεψιμότητας.

Με άλλα λόγια, το Load Impact σάς επιτρέπει να δοκιμάσετε πώς ο ιστότοπος, η εφαρμογή ιστού, η εφαρμογή για κινητά ή το API σας θα χειρίζονται έως και 1,2 εκατομμύρια ταυτόχρονα χρήστες.

16. Γεννήτρια Lorem Ipsum

Το Lorem Ipsum Generator κάνει ακριβώς αυτό που υποδηλώνει το όνομα.

Εάν δεν σας αρέσει το BLOKK (βλ. σημείο 10), αλλά εξακολουθείτε να χρειάζεται να γεμίσετε τη διάταξη με κάποιο κείμενο (Lorem Ipsum), μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο, το οποίο, χρησιμοποιώντας έναν σύνδεσμο προς έναν ιστότοπο, θα προσθέσει πληροφορίες σχετικά με αυτό στο κείμενο.

Περιλαμβάνει επίσης τη δημιουργία τυχαίου κειμένου Lorem Ipsum.

17. Υπηρεσία επικύρωσης σήμανσης W3c

Η υπηρεσία επικύρωσης σήμανσης W3c επικυρώνει τα έγγραφά σας σύμφωνα με τις προδιαγραφές.

Η επικύρωση των εγγράφων Ιστού είναι ένα σημαντικό βήμα ανάπτυξης που μπορεί να βελτιώσει σημαντικά την ποιότητά τους.

Αυτή η δωρεάν υπηρεσία από το W3C σάς βοηθά να ελέγχετε τη σήμανση διαφόρων εγγράφων Ιστού σε HTML, SMIL, XHTML και MathML και σε άλλες γλώσσες.

Από τον συγγραφέα:Στο δρόμο σας για να γίνετε κύριος CSS, πρέπει να γνωρίζετε πώς να διορθώνετε και να βελτιστοποιείτε το CSS. Πώς διαγιγνώσκετε και διορθώνετε προβλήματα απόδοσης; Πώς διασφαλίζετε ότι το CSS δεν προκαλεί προβλήματα απόδοσης στους τελικούς χρήστες; Και πώς διασφαλίζετε την ποιότητα του κώδικα;

Η γνώση των εργαλείων που θα χρησιμοποιήσετε θα σας βοηθήσει να διασφαλίσετε ότι το μπροστινό μέρος λειτουργεί βέλτιστα. Σε αυτό το άρθρο, θα εξετάσουμε τα εργαλεία προγραμματιστών που βασίζονται σε πρόγραμμα περιήγησης για Chrome, Safari, Firefox και Microsoft Edge.

Εργαλεία προγραμματιστών που βασίζονται σε πρόγραμμα περιήγησης

Τα περισσότερα προγράμματα περιήγησης επιτραπέζιου υπολογιστή περιλαμβάνουν μια δυνατότητα επιθεώρησης στοιχείων που μπορείτε να χρησιμοποιήσετε για τον εντοπισμό σφαλμάτων του CSS σας. Μπορείτε να ενεργοποιήσετε αυτήν την επιλογή κάνοντας δεξί κλικ και επιλέγοντας «Προβολή αντικειμένου». Οι χρήστες Mac μπορούν επίσης να επιθεωρήσουν ένα στοιχείο κάνοντας κλικ σε αυτό κρατώντας πατημένο το πλήκτρο Ctrl. Η παρακάτω εικόνα δείχνει τι μπορεί να δείτε στην Έκδοση προγραμματιστή του Firefox.

Εργαλεία προγραμματιστή του Firefox Developer Edition

JavaScript. Γρήγορη εκκίνηση

Στο Firefox, το Chrome και το Safari, μπορείτε επίσης να πατήσετε Ctrl + Shift + I (Windows/Linux) ή Cmd + Option + I (macOS) για να ανοίξετε τη γραμμή εργαλείων προγραμματιστή. Το παρακάτω σχήμα δείχνει τα εργαλεία προγραμματιστών του Chrome.

Chrome Developer Tools

Στον Microsoft Edge, μπορείτε να ανοίξετε τα εργαλεία προγραμματιστή πατώντας το F12 όπως φαίνεται παρακάτω.

Εργαλεία προγραμματιστή Microsoft Edge

Μπορείτε επίσης να ανοίξετε τα εργαλεία προγραμματιστή κάθε προγράμματος περιήγησης χρησιμοποιώντας το μενού της εφαρμογής:

Microsoft Edge: Εργαλεία > Εργαλεία προγραμματιστή

Firefox: Εργαλεία > Προγραμματιστής Ιστού

Chrome: Προβολή > Προγραμματιστές

Safari: Ανάπτυξη > Εμφάνιση Web Inspector

Στο Safari, ίσως χρειαστεί να ενεργοποιήσετε πρώτα το μενού Ανάπτυξη μεταβαίνοντας στο Safari > Προτιμήσεις > Για προχωρημένους και επιλέγοντας το πλαίσιο ελέγχου "Εμφάνιση μενού" στη γραμμή μενού. Παρακάτω είναι η προβολή για τα Εργαλεία προγραμματιστών Safari.

Safari 11 Developer Tools

Αφού ανοίξετε τη διεπαφή εργαλείων προγραμματιστή, ίσως χρειαστεί να επιλέξετε τον πίνακα που θέλετε:

Microsoft Edge: DOM Explorer

Firefox: Επιθεωρητής

Chrome: Στοιχεία

Σαφάρι: Στοιχεία

Θα ξέρετε ότι έχετε ανοίξει το σωστό πλαίσιο όταν δείτε το HTML στη μία πλευρά του πίνακα και τους κανόνες CSS στην άλλη.

Σημείωση. Η σήμανση που θα δείτε στο παράθυρο HTML είναι μια αναπαράσταση του DOM. Δημιουργείται όταν το πρόγραμμα περιήγησης ολοκληρώσει την ανάλυση του εγγράφου και μπορεί να διαφέρει από την αρχική σήμανση. Χρησιμοποιώντας το "View Source Stake" μπορείτε να δείτε την αρχική σήμανση, αλλά έχετε υπόψη ότι για εφαρμογές JavaScript, αυτή η σήμανση πηγής μπορεί να μην υπάρχει.

Χρήση του πίνακα στυλ

Μερικές φορές ένα στοιχείο δεν φαίνεται όπως αναμενόταν. Η τυπογραφική αλλαγή μπορεί να μην έχει εφαρμοστεί ή η εσοχή γύρω από την παράγραφο μπορεί να ήταν μικρότερη από ό,τι θέλατε. Μπορείτε να προσδιορίσετε ποιοι κανόνες επηρεάζουν ένα στοιχείο χρησιμοποιώντας το παράθυρο Styles του Web Inspector.

Ο πίνακας Styles είναι οργανωμένος αρκετά σταθερά σε διαφορετικά προγράμματα περιήγησης. Τα τυπικά στυλ παρατίθενται πρώτα, εάν υπάρχουν. Αυτά είναι στυλ που ορίζονται χρησιμοποιώντας το χαρακτηριστικό στυλ HTML, είτε από συγγραφέα CSS είτε μέσω προγραμματισμού μέσω σεναρίων.

Οι κανόνες στυλ συγγραφέα προηγούνται των στυλ πρακτόρων χρήστη. Τα στυλ παράγοντα χρήστη είναι τα προεπιλεγμένα στυλ του προγράμματος περιήγησης. Επηρεάζουν επίσης την εμφάνιση και την αίσθηση του ιστότοπού σας. (Στον Firefox, ίσως χρειαστεί να επιλέξετε την επιλογή "Εμφάνιση επιλογών προγράμματος περιήγησης" για να προβάλετε στυλ πρακτόρων χρήστη. Αυτή η επιλογή βρίσκεται στον πίνακα "Επιλογές γραμμής εργαλείων".)

Οι ιδιότητες και οι τιμές ομαδοποιούνται ανά επιλογέα. Κάθε ιδιοκτησία έχει ένα πλαίσιο ελέγχου δίπλα της που σας επιτρέπει να ενεργοποιήσετε ή να απενεργοποιήσετε συγκεκριμένους κανόνες. Κάνοντας κλικ σε μια ιδιότητα ή τιμή, μπορείτε να την αλλάξετε για να αποφύγετε την ανάγκη επεξεργασίας, αποθήκευσης και επαναφόρτωσης κώδικα.

Καθορισμός Cascade και Κληρονομικών Θεμάτων

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

Προσδιορισμός ζευγών περιουσίας και αξίας που έχουν αντικατασταθεί από άλλη δήλωση

JavaScript. Γρήγορη εκκίνηση

Μάθετε τα βασικά της JavaScript με ένα πρακτικό παράδειγμα κατασκευής μιας διαδικτυακής εφαρμογής

Στην παραπάνω εικόνα, το χρώμα φόντου, τα περιγράμματα και το μέγεθος γραμματοσειράς του μπλοκ εμφανίζονται ως διαγράμματα. Αυτές οι δηλώσεις έχουν παρακαμφθεί από αυτές στο μπλοκ .close, το οποίο έχει προτεραιότητα στο CSS μας.

Ορισμός μη έγκυρων ιδιοτήτων και τιμών

Μπορείτε επίσης να χρησιμοποιήσετε το στοιχείο επιθεώρησης για να εντοπίσετε μη έγκυρες ή μη υποστηριζόμενες ιδιότητες και τιμές ιδιοτήτων. Στα προγράμματα περιήγησης Chromium, οι μη έγκυροι κανόνες CSS εμφανίζονται με μια διαγραφή και ένα εικονίδιο προειδοποίησης δίπλα τους:

Προσδιορισμός μη έγκυρης τιμής ιδιότητας CSS με το Chrome

Ο Firefox διαγράφει επίσης μη έγκυρες ή μη υποστηριζόμενες ιδιότητες και τιμές. Το Firefox Developer Edition χρησιμοποιεί επίσης ένα εικονίδιο προειδοποίησης, όπως φαίνεται παρακάτω. Ο τυπικός Firefox εμφανίζει παρόμοια σφάλματα, αλλά δεν περιλαμβάνει ένα εικονίδιο προειδοποίησης.

Πώς ο Firefox Developer Edition εμφανίζει μη έγκυρες ιδιότητες και τιμές

Στο παρακάτω στιγμιότυπο οθόνης, στο Safari, οι μη υποστηριζόμενοι κανόνες διαγράφονται με μια κόκκινη γραμμή και επισημαίνονται με κίτρινο φόντο και ένα εικονίδιο προειδοποίησης.

Μη έγκυρη τιμή ιδιότητας CSS στο Safari

Αντίθετα, ο Microsoft Edge χρησιμοποιεί μια κυματιστή υπογράμμιση για να υποδείξει μη υποστηριζόμενες ιδιότητες ή τιμές.

Μη επικυρωμένη τιμή ιδιότητας CSS στον Microsoft Edge

Όσον αφορά τον βασικό εντοπισμό σφαλμάτων και τις διενέξεις κληρονομικότητας, όποιο πρόγραμμα περιήγησης κι αν επιλέξετε δεν έχει σημασία. Ωστόσο, σας συνιστώ να τα διαβάσετε όλα για εκείνες τις σπάνιες περιπτώσεις που πρέπει να διαγνώσετε ένα πρόβλημα που αφορά το πρόγραμμα περιήγησης.

Εντοπισμός σφαλμάτων αποκριτικών διατάξεων

Είναι καλύτερο να κάνετε δοκιμή στη συσκευή. Ωστόσο, κατά τη διάρκεια της ανάπτυξης, είναι χρήσιμο να προσομοιώνετε φορητές συσκευές χρησιμοποιώντας ένα πρόγραμμα περιήγησης επιτραπέζιου υπολογιστή. Όλα τα μεγάλα προγράμματα περιήγησης για επιτραπέζιους υπολογιστές περιλαμβάνουν προσαρμοστική λειτουργία εντοπισμού σφαλμάτων.

Χρώμιο

Το Chrome στα εργαλεία προγραμματιστή προσφέρει μια λειτουργία γραμμής εργαλείων συσκευής. Για να το χρησιμοποιήσετε, κάντε κλικ στο εικονίδιο της συσκευής (φωτογραφία παρακάτω) στην επάνω αριστερή γωνία δίπλα στο εικονίδιο "Επιλογή στοιχείου".

Εικονίδιο λειτουργίας σχεδίασης με απόκριση Chrome

Η λειτουργία συσκευής σάς επιτρέπει να προσομοιώνετε διάφορα είδη συσκευών Android και iOS, συμπεριλαμβανομένων παλαιότερων συσκευών όπως το iPhone 5 και το Galaxy S5. Η λειτουργία συσκευής περιλαμβάνει επίσης μια λειτουργία στραγγαλισμού δικτύου κατά προσέγγιση διαφορετικές ταχύτητεςσυνδέσεις και τη δυνατότητα προσομοίωσης λειτουργίας εκτός σύνδεσης.

Firefox

Στον Firefox, μια παρόμοια λειτουργία ονομάζεται Responsive Design Mode. Το εικονίδιο του θυμίζει πρώιμα iPod. Θα το βρείτε στη δεξιά πλευρά της οθόνης στη γραμμή εργαλείων προγραμματιστή όπως φαίνεται παρακάτω.

Εικονίδιο λειτουργίας σχεδίασης απόκρισης Firefox

Στην προσαρμοστική λειτουργία, μπορείτε να κάνετε εναλλαγή μεταξύ κατακόρυφου και προσανατολισμούς τοπίου, προσομοίωση συμβάντων αφής και λήψη στιγμιότυπων οθόνης. Όπως ο Chrome, ο Firefox επιτρέπει επίσης στους προγραμματιστές να προσομοιώνουν αργές συνδέσεις μέσω throttling.

Microsoft Edge

Ο Microsoft Edge σάς επιτρέπει να προσομοιώνετε φορητές συσκευές στα Windows, όπως μια καρτέλα Surface, χρησιμοποιώντας την καρτέλα Emulation. Επιλέξτε Windows Phone από το μενού Προφίλ προγράμματος περιήγησης όπως φαίνεται παρακάτω.

SitePoint.com χρησιμοποιώντας τη λειτουργία εξομοίωσης συσκευής Microsoft Edge

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

σαφάρι

Η αποκριτική λειτουργία σχεδίασης του Safari βρίσκεται στα εργαλεία προγραμματιστών. Είναι παρόμοια με τη λειτουργία εξομοίωσης Firefox, αλλά προσθέτει τη δυνατότητα εξομοίωσης συσκευών iOS όπως φαίνεται παρακάτω.

SitePoint.com όταν προβάλλεται χρησιμοποιώντας τη λειτουργία Responsive Design Mode του Safari

Για να εισέλθετε στη λειτουργία Safari Responsive Design, επιλέξτε Develop > Enter Responsive Design Mode ή Cmd + Ctrl + R.