Εργαλεία προγραμματιστή του Chrome (Tutorial)

Γλώσσα: Γερμανικά

Αποτελεσματική χρήση των εργαλείων ανάπτυξης του Chrome (σεμινάριο)

Με τα Εργαλεία ανάπτυξης του Chrome, μπορείτε να αναλύετε και να επεξεργάζεστε τους ιστότοπούς σας, να εκτελείτε αναλύσεις επιδόσεων και να δοκιμάζετε τις σελίδες σας για διαφορετικές συσκευές και μεγέθη οθόνης. Γνωρίστε τις πιο σημαντικές λειτουργίες των DevTools σε αυτό το σεμινάριο. Πώς να εντοπίζετε σφάλματα σε HTML, CSS και JavaScript, να βρίσκετε τρόπους βελτιστοποίησης της απόδοσης και της χρήσης μνήμης και να βελτιώνετε τις διατάξεις των σελίδων σας - ο εκπαιδευτής Stephan Haewß θα σας δείξει πώς να προχωρήσετε χρησιμοποιώντας πρακτικά παραδείγματα!

Γνωρίστε τις πιο σημαντικές λειτουργίες των Εργαλείων ανάπτυξης του Chrome
Αποσφαλμάτωση και βελτιστοποίηση κώδικα HTML, CSS, JavaScript
Κατανόηση ακολουθιών κώδικα, εντοπισμός και διόρθωση σφαλμάτων
Προσαρμογή των κινούμενων σχεδίων CSS, του στυλ και των διατάξεων
Βελτίωση των επιδόσεων και της κατανάλωσης μνήμης των ιστότοπων
Για ιστοσελίδες χωρίς σφάλματα και γρήγορες με βελτιστοποιημένες διατάξεις - ένα εξάωρο μάθημα από τον εκπαιδευτή Stephan Haewß

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

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

λεπτομέρειες

Περιεχόμενα: 6 h Σεμινάριο βίντεο
Άδεια: ιδιωτική και εμπορική Δικαιώματα χρήσης

Κατηγορίες

Σχεδιασμός Ιστοσελίδων, CMS & Ανάπτυξη

Δημιουργήθηκε με αγάπη από:

Stephan Haewß

Εισαγωγή στο μάθημα Εργαλεία ανάπτυξης του Chrome

Δωρεάν

Εργαλεία ανάπτυξης του Chrome: 1.1 | Τι θα μάθετε σε αυτό το μάθημα;

Ακολουθεί μια επισκόπηση όλων των θεμάτων που καλύπτονται σε αυτό το μάθημα.

Στο κείμενο εκμάθησης

Δωρεάν

Εργαλεία ανάπτυξης του Chrome: 1.2 | Δημιουργία δοκιμαστικής εφαρμογής ιστού

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

Στο κείμενο εκμάθησης

Δωρεάν

Εργαλεία για προγραμματιστές Chrome: 1.3 | Πρώτη επισκόπηση των λειτουργιών

Εισαγωγή στους διάφορους πίνακες του DevTools και τις βασικές λειτουργίες τους.

Στο κείμενο εκμάθησης

Διαμόρφωση, διάταξη, εμφάνιση μέσω της καρτέλας Στοιχεία

Εργαλεία ανάπτυξης του Chrome: 2.1 | Επιθεώρηση της δομής DOM στην καρτέλα Στοιχεία

Λεπτομερής εξέταση της δομής HTML μιας ιστοσελίδας και πώς να επιλέγετε και να επεξεργάζεστε στοιχεία στην καρτέλα Στοιχεία.

Στο κείμενο εκμάθησης

Εργαλεία προγραμματιστή του Chrome: 2.2 | Αλλαγή στυλ

Ζωντανή επεξεργασία των στυλ CSS και διερεύνηση της επιρροής τους στην παρουσίαση του ιστότοπου.

Στο κείμενο εκμάθησης

Εργαλεία για προγραμματιστές του Chrome: 2.3 | Επεξεργασία HTML, DOM

Αλλαγή της δομής HTML και παρατήρηση των αποτελεσμάτων στο DOM.

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 2.4 | Προβολή για κινητά - Δοκιμή Responsive Design

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

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 2.5 | Πρακτική άσκηση: Επισκευή του πλευρικού μενού

Διόρθωση σφάλματος σε ένα πλευρικό μενού.

Στο κείμενο εκμάθησης

Εργαλεία για προγραμματιστές του Chrome: 2.6 | Πρακτική άσκηση: Επισκευή διάταξης/υπερχείλισης

Λύση για προβλήματα διάταξης και σφάλματα υπερχείλισης.

Στο κείμενο εκμάθησης

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

Εργαλεία για προγραμματιστές του Chrome: 3.1 | Εισαγωγή: Αποσφαλμάτωση σεναρίου και ορισμός του πρώτου σημείου διακοπής

Εισαγωγή στην αποσφαλμάτωση κώδικα JavaScript και τον καθορισμό σημείων διακοπής.

Στο κείμενο εκμάθησης

Εργαλεία Προγραμματιστή Chrome: 3.2 | Πρακτική άσκηση: Αποσφαλμάτωση μιας εφαρμογής TypeScript

Αποσφαλμάτωση κώδικα TypeScript με τα DevTools.

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 3.3 | Πρακτική άσκηση: Αποσφαλμάτωση - Εύρεση σφαλμάτων κατά τη διαγραφή από έναν πίνακα

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

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 3.4 | Πρακτική άσκηση: Αποσφαλμάτωση της εφαρμογής React

Ειδικές τεχνικές εντοπισμού σφαλμάτων για εφαρμογές React.

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 3.5 | Σημεία διακοπής υπό όρους

Ορισμός σημείων διακοπής που ενεργοποιούνται μόνο υπό ορισμένες συνθήκες.

Στο κείμενο εκμάθησης

Εργαλεία προγραμματιστή Chrome: 3.6 | Σημεία διακοπής DOM

Παρακολούθηση των αλλαγών σε ορισμένα στοιχεία DOM.

Στο κείμενο εκμάθησης

Εργαλεία προγραμματιστή του Chrome: 3.7 | Λήψη σημείων διακοπής

Διακοπή του κώδικα για αιτήσεις δικτύου.

Στο κείμενο εκμάθησης

Εργαλεία προγραμματιστή Chrome: 3.8 | Σημεία διακοπής εξαιρέσεων

Αυτόματη διακοπή όταν εμφανίζονται σφάλματα.

Στο κείμενο εκμάθησης

Εργαλεία για προγραμματιστές του Chrome: 3.9 | Επικαλύψεις και χώρος εργασίας

Προσαρμογή στυλ και σεναρίων χωρίς αλλαγές στον αρχικό κώδικα.

Στο κείμενο εκμάθησης

Εργαλεία για προγραμματιστές του Chrome: 3.10 | Αποσφαλμάτωση σε βήματα και σε συγκεκριμένα σημεία

Λεπτομερής έλεγχος της διαδικασίας εντοπισμού σφαλμάτων.

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 3.11 | Κονσόλα: Επισκόπηση, απλή εκτέλεση κώδικα και έξοδοι

Εισαγωγή στην κονσόλα και τις βασικές λειτουργίες της.

Στο κείμενο εκμάθησης

Εργαλεία Προγραμματιστή Chrome: 3.12 | Πρόσβαση σε στοιχεία DOM στην κονσόλα

Χειρισμός του DOM απευθείας μέσω της κονσόλας.

Στο κείμενο εκμάθησης

Εργαλεία προγραμματιστή του Chrome: 3.13 | Αποσπάσματα και χρονισμός στην κονσόλα

Επαναχρησιμοποιήσιμα αποσπάσματα κώδικα και μετρήσεις επιδόσεων.

Στο κείμενο εκμάθησης

Εργαλεία προγραμματιστή του Chrome: 3.14 | Ομαδοποίηση και διαμόρφωση εξόδων καταγραφής

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

Στο κείμενο εκμάθησης

Εργαλεία προγραμματιστή Chrome: 3.15 | Περισσότερες χρήσιμες μέθοδοι κονσόλας

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

Στο κείμενο εκμάθησης

Ανάλυση και βελτιστοποίηση δικτύου

Εργαλεία ανάπτυξης του Chrome: 4.1 | Δίκτυο: Επισκόπηση των λειτουργιών

Ανάλυση αιτημάτων και απαντήσεων δικτύου.

Στο κείμενο εκμάθησης

Εργαλεία για προγραμματιστές του Chrome: 4.2 | Δίκτυο: Περιορισμός, κεφαλίδες και προεπισκόπηση

Προσομοίωση αργών συνδέσεων δικτύου και ανάλυση επικεφαλίδων HTTP.

Στο κείμενο εκμάθησης

Βελτιστοποίηση επιδόσεων και μνήμης

Εργαλεία ανάπτυξης του Chrome: 5.1 | Profiler - Αξιολόγηση και βελτιστοποίηση της απόδοσης

Εντοπισμός σημείων συμφόρησης επιδόσεων σε κώδικα JavaScript.

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 5.2 | Βελτιστοποίηση της κατανάλωσης μνήμης με τον αναλυτή μνήμης

Ανάλυση της κατανάλωσης μνήμης και εντοπισμός διαρροών μνήμης.

Στο κείμενο εκμάθησης

Καρτέλα εφαρμογής και άλλα εργαλεία

Εργαλεία για προγραμματιστές του Chrome: 6.1 | Χρήσιμες βοήθειες και καρτέλα απόδοσης

Περαιτέρω εργαλεία για τη βελτιστοποίηση των επιδόσεων.

Στο κείμενο εκμάθησης

Εργαλεία προγραμματιστών Chrome: 6.2 | Αναθεώρηση και προσαρμογή κινούμενων σχεδίων

Εργαλεία για προγραμματιστές του Chrome: 6.2 | Προβολή και προσαρμογή κινούμενων σχεδίων

Λεπτομερής ανάλυση των κινούμενων σχεδίων και των μεταβάσεων CSS. Βελτιστοποίηση των επιδόσεων με την προσαρμογή των συναρτήσεων και των ιδιοτήτων χρονισμού.

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 6.3 | Εξερευνήστε πόρους εφαρμογών ιστού με την καρτέλα Εφαρμογή

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

Στο κείμενο εκμάθησης

Chrome Developer Tools: 6.4 | Χρήση της επέκτασης React Dev Tools

Εισαγωγή στο πρόσθετο πρόγραμμα περιήγησης React DevTools. Επιθεώρηση της δομής, των στηριγμάτων και της κατάστασης των στοιχείων React.

Στο κείμενο εκμάθησης

Ρυθμίσεις

Εργαλεία ανάπτυξης του Chrome: 7 | Οι πιο σημαντικές ρυθμίσεις των Εργαλείων ανάπτυξης του Chrome

Διαμόρφωση των DevTools για έναν πιο αποτελεσματικό τρόπο εργασίας. Προσαρμογή θεμάτων, συντομεύσεων πληκτρολογίου και άλλων ρυθμίσεων.

Στο κείμενο εκμάθησης

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

Εργαλεία για προγραμματιστές του Chrome: 8.1 | Τα εργαλεία DevTools του MS Edge

Μοιάζει πολύ με τα εργαλεία ανάπτυξης του Chrome, αλλά υπάρχουν διαφορές στη λεπτομέρεια.

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 8.2 | Τα εργαλεία ανάπτυξης του Firefox

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

Στο κείμενο εκμάθησης

Εργαλεία ανάπτυξης του Chrome: 8.3 | Τα εργαλεία ανάπτυξης του Safari

Υπάρχουν κάποιες σημαντικές διαφορές σε σχέση με το Chrome, αλλά η αρχή είναι η ίδια και εδώ.

Στο κείμενο εκμάθησης

Λεπτομέρειες περιεχομένου

Βελτιστοποιήστε τους ιστότοπούς σας με τα Εργαλεία ανάπτυξης του Chrome
Ένας ιστότοπος χωρίς σφάλματα που φορτώνει εξαιρετικά γρήγορα και δείχνει υπέροχος σε κάθε μέγεθος οθόνης! Για να το πετύχετε αυτό, πρέπει να αναλύσετε και να βελτιστοποιήσετε τον κώδικα των σελίδων σας. Τα Εργαλεία ανάπτυξης του Chrome είναι ιδανικά γι' αυτό. Μπορείτε να τα χρησιμοποιήσετε για να αποκαλύψετε σφάλματα στον κώδικα HTML, CSS και JavaScript που διαθέτετε. Μπορείτε επίσης να ρίξετε μια λεπτομερή ματιά στις επιδόσεις, τις ακολουθίες κώδικα και την κατανάλωση μνήμης. Χρησιμοποιήστε τα ευρήματα για να επεξεργαστείτε τις σελίδες σας με στοχευμένο τρόπο και τελικά να αυξήσετε την προβολή των σελίδων σας μέσω της αποσφαλμάτωσης και της βελτιστοποίησης.
Μάθετε πώς να χρησιμοποιείτε τα Εργαλεία ανάπτυξης του Chrome σε αυτό το εξάωρο σεμινάριο από τον προγραμματιστή λογισμικού και εκπαιδευτή Stephan Haewß. Ξεκινήστε με τα βασικά των Chrome DevTools και προχωρήστε μέχρι τις προηγμένες τεχνικές - για μια καθαρή, υψηλής απόδοσης εμφάνιση των σελίδων σας!

HTML, CSS, JavaScript - Αποσφαλμάτωση για καθαρές, γρήγορες ιστοσελίδες με βελτιστοποιημένες διατάξεις

Το μάθημα ξεκινά με μια εισαγωγή στα Εργαλεία Προγραμματιστή του Chrome , τα οποία είναι διαθέσιμα απευθείας στο πρόγραμμα περιήγησης. Θα μάθετε τι είναι τα DevTools και πώς να τα χρησιμοποιείτε. Στη συνέχεια θα εξετάσετε την καρτέλα Στοιχεία, την οποία μπορείτε να χρησιμοποιήσετε για να επιθεωρήσετε και να επεξεργαστείτε το στυλ, τη διάταξη και την εμφάνιση των σελίδων σας. Θα χρησιμοποιήσετε τις περιοχές Sources και Console για να πραγματοποιήσετε αποσφαλμάτωση σεναρίων. Θα μάθετε επίσης πώς να χρησιμοποιείτε τα Εργαλεία ανάπτυξης του Chrome για να πραγματοποιείτε ανάλυση δικτύου και να βελτιστοποιείτε τις επιδόσεις και τη μνήμη. Τέλος, θα αποκτήσετε μια επισκόπηση των DevTools άλλων προγραμμάτων περιήγησης. Συνολικά, το μάθημα είναι επομένως κατάλληλο για όλους τους προγραμματιστές ιστού που θέλουν να αποσφαλματώσουν και να βελτιστοποιήσουν ιστότοπους χρησιμοποιώντας τα DevTools του Chrome.

Αποτελεσματική χρήση του Chrome DevTools - τα περιεχόμενα του σεμιναρίου με μια ματιά

Εισαγωγή στα εργαλεία Chrome DevTools: Το μάθημα σας δείχνει πώς να ανοίγετε το DevTools, να περιηγείστε σε αυτό και να χρησιμοποιείτε αποτελεσματικά τις πιο σημαντικές λειτουργίες για την επεξεργασία και την αποσφαλμάτωση HTML, CSS και JavaScript.
Αποσφαλμάτωση HTML και CSS: Πώς να χρησιμοποιείτε το Chrome DevTools για να εξετάζετε το δέντρο DOM μιας ιστοσελίδας, να επεξεργάζεστε HTML και CSS απευθείας σε ζωντανή λειτουργία για να διορθώνετε άμεσα προβλήματα διάταξης και σφάλματα styling CSS - βέλτιστο για γρήγορες δοκιμές και προσαρμογή του σχεδιασμού πριν από τη μονιμοποίηση των αλλαγών.
Αποσφαλμάτωση JavaScript: Μάθετε πώς να φορτώνετε αρχεία JavaScript, να ορίζετε σημεία διακοπής και να εκτελείτε τον κώδικα βήμα προς βήμα. Οι μεταβλητές και τα αντικείμενα μπορούν να εξεταστούν σε πραγματικό χρόνο, ενώ το CallStack διευκολύνει την ανίχνευση κλήσεων συναρτήσεων - ιδανικό για ακριβή αποσφαλμάτωση.
Χρήση της κονσόλας: Η κονσόλα των εργαλείων ανάπτυξης του Chrome σάς επιτρέπει να ανοίγετε και να αναλύετε αρχεία καταγραφής, να εκτελείτε κώδικα JavaScript και να χειρίζεστε απευθείας στοιχεία ιστοσελίδας. Η στοχευμένη έξοδος αρχείων καταγραφής σάς επιτρέπει να αναλύετε διεξοδικά και να βελτιστοποιείτε τον κώδικα, γεγονός που διευκολύνει πολύ την αποσφαλμάτωση και τη βελτίωση των επιδόσεων.
Βελτιστοποίηση των επιδόσεων: Ελέγξτε τις αιτήσεις δικτύου και τους χρόνους φόρτωσης, παρακολουθήστε τη χρήση μνήμης και εντοπίστε διαρροές μνήμης. Η στοχευμένη βελτιστοποίηση των επιδόσεων JavaScript και οι λεπτομερείς αναλύσεις επιδόσεων της εφαρμογής μπορούν να βελτιώσουν αποτελεσματικά την ταχύτητα φόρτωσης και τη διαχείριση των πόρων.
Προηγμένες τεχνικές: Ο πίνακας εφαρμογώνChrome DevTools σας επιτρέπει να έχετε πρόσβαση σε αποθηκευτικούς χώρους ιστού, όπως LocalStorage, IndexedDB και Cache, καθώς και να διαχειρίζεστε εργαζόμενους υπηρεσιών και manifests. Μπορούν επίσης να ενσωματωθούν επεκτάσεις, όπως το React DevTools, για την καλύτερη αποσφαλμάτωση αντιδραστικών εφαρμογών. Οι προσαρμόσιμες ρυθμίσεις προσφέρουν επίσης τη βέλτιστη ρύθμιση των DevTools για τις ατομικές απαιτήσεις εργασίας.