Οδηγός για τα εργαλεία Web της Google

Sep 13, 2025

πως να

Σελίδα 1 από 5:

Προβολή και αλλαγή HTML, CSS & AMP; Js

Προβολή και αλλαγή HTML, CSS & AMP; Js
Χρησιμοποιώντας το Debugger
Εργασία με τη λειτουργία συσκευής
Ξεκινήστε με το σχεδιασμό υλικού
Να αντιμετωπίσετε με προοδευτικές εφαρμογές ιστού

Το Big G, γνωστό Google, παρέχει στους προγραμματιστές μια πληθώρα εργαλείων που προορίζονται να κάνουν το Web Design Easy. Σε αυτό το άρθρο, περνάμε μερικά από τα καλύτερα εργαλεία της Google εκεί έξω και σας δείχνουμε πώς να τα χρησιμοποιήσετε στο σχεδιασμό ιστοσελίδων και την ανάπτυξη της ανάπτυξης.

Καλύπτουμε μια σειρά διαφορετικών Εργαλεία σχεδίασης ιστοσελίδων Εδώ, έτσι έχουμε χωρίσει το περιεχόμενο σε σελίδες για να διευκολύνει την πλοήγηση. Χρησιμοποιήστε το αναπτυσσόμενο μενού για να μεταβείτε στην ενότητα που σας ενδιαφέρει. Θέλετε να σχεδιάσετε μια τοποθεσία χρησιμοποιώντας έναν διαφορετικό πάροχο; Οι οδηγοί μας web hosting και την κορυφή οικοδόμος ιστότοπου έχετε καλύψει.

Εφόσον οι ιστότοποι δεν είναι κακοποιημένοι, το περιεχόμενό τους μπορεί να θεωρηθεί από οποιονδήποτε. Οι Devtools του Chrome κάνουν αυτό το απλό - σε αυτή τη σελίδα, σας δείχνουμε πώς να δείτε και να αλλάξετε το HTML, CSS και JavaScript. Επί σελίδα 2 , Πάρτουμε μια πιο προσεκτική ματιά στο πώς να χρησιμοποιήσετε το πρόγραμμα εντοπισμού σφαλμάτων της Google για να διορθώσετε τα σφάλματα κωδικοποίησης γρήγορα και εύκολα. Σελίδα 3 Βάζει το προβολέα στη λειτουργία συσκευής της Google, η οποία μπορείτε να χρησιμοποιήσετε για να ελέγξετε τις κινητές εκδόσεις των σελίδων σας μέσω της επιφάνειας εργασίας σας. Επί Σελίδα 4 Εισάγουμε τα βασικά στοιχεία που πρέπει να γνωρίζετε για να ξεκινήσετε την εφαρμογή των αρχών σχεδιασμού υλικών στα σχέδιά σας. Τελικά, Σελίδα 5 Εξετάζει προοδευτικές εφαρμογές ιστού, το τελευταίο μεγάλο πράγμα στη βιομηχανία σχεδιασμού ιστοσελίδων.

Προβολή και αλλαγή HTML, CSS & AMP; Js

Όσο ο κώδικας του ιστότοπου δεν έχει εξουδετερωθεί, μπορεί να προβληθεί από οποιονδήποτε χρησιμοποιεί τα εργαλεία προγραμματιστών του Chrome. Πρώτα απ 'όλα, ελέγξτε την έκδοση του Chrome - τα παρακάτω βήματα λειτουργούν στην έκδοση 70.0.3538.67 που εκτελείται σε ένα σταθμό εργασίας Ubuntu 64 bit. Στη συνέχεια, ανοίξτε το μενού Hamburger και κάντε κλικ στην επιλογή Περισσότερα Εργαλεία & GT; Εργαλεία προγραμματιστή.

Launch Google's Developer Tools — Ξεκινήστε τα εργαλεία προγραμματιστή και θα πρέπει να δείτε μια οθόνη παρόμοια με αυτή [Κάντε κλικ στο εικονίδιο στην επάνω δεξιά γωνία για μεγέθυνση]

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

Από προεπιλογή, τα εργαλεία προγραμματιστή ξεκινούν την καρτέλα Κονσόλα. Περιέχει την έξοδο που εκπέμπεται από τις επικλήσεις της λειτουργίας καταγραφής κονσόλας. Εμφανίζονται επίσης σφάλματα απόδοσης - αν βρείτε κόκκινες γραμμές, κάτι είναι άβολο στο σήμα ή τον κώδικα της σελίδας σας. Ένα κλικ στο μικρό 'URL' στη δεξιά πλευρά σας φέρνει στη γραμμή, η οποία προκάλεσε να εμφανιστεί το μήνυμα.

Επιθεωρήστε το σήμα

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

ο λόγος ύπαρξης της καρτέλας είναι η εμφάνιση της δομής CSS. Το Widgets 'συλλέγει' CSS από διάφορες πηγές, οι οποίες εμφανίζονται τακτοποιημένα και δίπλα στο άλλο. Στην περίπτωση του παραδείγματος που εμφανίζεται στο σχήμα, βλέπουμε ότι τα στυλ παρέχονται τόσο από την ετικέτα «Div» όσο και από την "κύρια" σήμανση της σελίδας.

Το Chrome σας επιτρέπει να επεξεργαστείτε τα περισσότερα χαρακτηριστικά στη μύγα. Κάντε διπλό κλικ σε οποιοδήποτε από τα μαύρα κείμενα για να μεταμορφώσετε την ετικέτα σε έναν επεξεργαστή και, στη συνέχεια, εισαγάγετε την πρόσφατα επιθυμητή τιμή και πατήστε το πλήκτρο RETURN. Ο refererer παίρνει αυτές τις αλλαγές και τους εφαρμόζει στο Dom on fly. Αυτό είναι ιδιαίτερα χρήσιμο όταν προσπαθείτε να βελτιστοποιήσετε τα χρώματα ή τα θέματα τοποθέτησης. Πρέπει να φορτώσετε ξανά μια σελίδα για την προεπισκόπηση των αλλαγών γίνεται κουραστικό.

Google's web tools — Ένα κίτρινο φόντο δείχνει ότι τα περιεχόμενα του παραθύρου υπόκεινται σε φιλτράρισμα [κάντε κλικ στο εικονίδιο στην επάνω δεξιά γωνία για μεγέθυνση]

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

Εκτελέστε μια λεπτομερή ανάλυση

Στα σύγχρονα προγράμματα περιήγησης στο Web, το DOM δεν περιορίζεται στα «στατικά θέματα παρουσίασης». Διευκολύνει επίσης τη ροή και την τοποθέτηση συμβάντων. Μεταβείτε στην υπολογιστική καρτέλα για να αποκαλύψετε μια λίστα με τις ιδιότητες "διαστάσεων". Αυτό είναι απίστευτα χρήσιμο όταν τακτοποιείτε widgets στην οθόνη με ακριβή τρόπο.

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

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

Επόμενη Σελίδα: Πώς να χρησιμοποιήσετε το Debugger του Google

Τρέχουσα σελίδα: Προβολή και αλλαγή HTML, CSS & AMP; Js

Επόμενη σελίδα Χρησιμοποιώντας το Debugger

Οδηγός για τα εργαλεία Web της Google

Προβολή και αλλαγή HTML, CSS & AMP; Js

Επιθεωρήστε το σήμα

Εκτελέστε μια λεπτομερή ανάλυση

πως να - Τα πιο δημοφιλή άρθρα

Πώς να Kitbash εν κινήσει με το Shapr3d

Πώς να δημιουργήσετε ένα ρομπότ χαρτιού

Δημιουργία και ζωντανή πολυγώνια SVG

Ξεκινήστε με το WebGL χρησιμοποιώντας τρεις.Js

Πώς να χρησιμοποιήσετε το Markdown στην ανάπτυξη ιστοσελίδων

Βάλτε ένα πορτρέτο σε έλαια

Δημιουργήστε ένα αυτοπροσωπογραφία με μόλις 4 χρώματα

Πώς να σχεδιάσετε ένα promo για ένα φανταστικό εμπορικό σήμα

Κατηγορίες