Το Google Chrome^{(Google Chrome)} έχει σχεδιαστεί όχι μόνο για τακτικούς χρήστες του διαδικτύου, αλλά και για προγραμματιστές ιστού, οι οποίοι συχνά δημιουργούν έναν ιστότοπο, σχεδιάζουν ιστολόγια κ.λπ. Η επιλογή Inspect Element ή Inspect του Google Chrome βοηθά τους χρήστες να βρουν ορισμένες πληροφορίες σχετικά με έναν ιστότοπο που δεν είναι ορατός . Ακολουθούν ορισμένες συμβουλές σχετικά με τη χρήση του Inspect Element του προγράμματος περιήγησης Google Chrome για υπολογιστή με Windows^{(Windows PC)} .

Επιθεωρήστε το στοιχείο του Google Chrome

1] Find hidden JavaScript/Media files

Πολλοί ιστότοποι εμφανίζουν αναδυόμενα παράθυρα εάν ο επισκέπτης παραμένει στην ιστοσελίδα για περισσότερα από 15 ή 20 δευτερόλεπτα. Ή, πολλές φορές μια εικόνα, μια διαφήμιση ή ένα εικονίδιο ανοίγει αφού κάνει κλικ κάπου τυχαία. Για να βρείτε αυτά τα κρυφά αρχεία σε μια ιστοσελίδα, μπορείτε να χρησιμοποιήσετε την καρτέλα Πηγές του ^(Sources)Inspect Element . Εμφανίζει μια λίστα με προβολή δέντρου στην αριστερή πλευρά που μπορείτε να εξερευνήσετε.

2] Get HEX/RGB color code in Chrome

Μερικές φορές μπορεί να μας αρέσει ένα χρώμα και να θέλουμε να μάθουμε τον χρωματικό του κώδικα. Μπορείτε εύκολα να βρείτε τον κωδικό χρώματος HEX ή RGB που χρησιμοποιείται σε μια συγκεκριμένη ιστοσελίδα, χρησιμοποιώντας την εγγενή επιλογή στο Google Chrome . Κάντε δεξί κλικ^{(Right-click)} στο χρώμα και κάντε κλικ στο Επιθεώρηση^(Inspect) . Τις περισσότερες φορές, θα λάβετε τον κωδικό χρώματος στη δεξιά πλευρά με άλλα CSS . Εάν δεν το βλέπετε, ίσως χρειαστεί να χρησιμοποιήσετε κάποιο δωρεάν λογισμικό επιλογής χρωμάτων.

ΣΥΜΒΟΥΛΗ^(TIP) : Ρίξτε μια ματιά και σε αυτά τα διαδικτυακά εργαλεία επιλογής χρώματος^{(Color Picker online tools)} .

3] Λάβετε συμβουλές βελτίωσης της απόδοσης της ιστοσελίδας^{(3] Get web page performance improvement tips)}

Σε όλους αρέσει να προσγειώνονται σε έναν ιστότοπο που ανοίγει γρήγορα. Εάν σχεδιάζετε τον ιστότοπό σας, θα πρέπει να το έχετε πάντα υπόψη σας. Υπάρχουν πολλά εργαλεία για τον έλεγχο και τη βελτιστοποίηση της ταχύτητας φόρτωσης της σελίδας. Ωστόσο, το Google Chrome^{(Google Chrome)} διαθέτει επίσης ένα ενσωματωμένο εργαλείο που επιτρέπει στους χρήστες να λαμβάνουν συμβουλές για τη βελτίωση της ταχύτητας φόρτωσης του ιστότοπου. Για να αποκτήσετε πρόσβαση σε αυτά τα εργαλεία, μεταβείτε στην καρτέλα " Έλεγχοι^(Audits) " και βεβαιωθείτε ότι είναι επιλεγμένα "Χρήση δικτύου"^{(Network Utilization)} , "Απόδοση ιστοσελίδας"^{(Web Page Performance)} και " Επανάληψη φόρτωσης σελίδας και έλεγχος κατά τη φόρτωση^{(Reload Page and Audit on Load)} ". Στη συνέχεια κάντε κλικ στο κουμπί Εκτέλεση^{(Run )} . Θα φορτώσει ξανά τη σελίδα και θα σας δείξει κάποιες πληροφορίες που μπορούν να χρησιμοποιηθούν για να γίνει η σελίδα πιο γρήγορη. Για παράδειγμα, μπορείτε να λάβετε όλους τους πόρους που δεν έχουν λήξη προσωρινής μνήμης, JavaScriptπου μπορούν να συνδυαστούν σε ένα αρχείο και ούτω καθεξής.

4] Ελέγξτε την απόκριση^{(4] Check responsiveness)}

Το να κάνετε μια ιστοσελίδα ανταποκρινόμενη είναι ζωτικής σημασίας στις μέρες μας. Υπάρχουν πολλά εργαλεία που μπορούν να ελέγξουν αν ο ιστότοπός σας αποκρίνεται πλήρως ή όχι. Ωστόσο, αυτό το εργαλείο του Google Chrome βοηθά τους χρήστες να γνωρίζουν εάν ο ιστότοπος αποκρίνεται ή όχι , καθώς και να ελέγξουν πώς θα φαίνεται σε μια συγκεκριμένη κινητή συσκευή. Ανοίξτε οποιονδήποτε ιστότοπο, λάβετε την καρτέλα Inspect Element , κάντε κλικ στο κουμπί για ^{(Inspect Element )}κινητά^{(mobile )} , ορίστε την ανάλυση ή επιλέξτε τη συσκευή που θέλετε για να δοκιμάσετε την ιστοσελίδα.

5] Επεξεργασία ζωντανού ιστότοπου^{(5] Edit live website)}

Ας υποθέσουμε ότι δημιουργείτε μια ιστοσελίδα, αλλά έχετε μπερδευτεί σχετικά με το συνδυασμό χρωμάτων ή το μέγεθος του μενού πλοήγησης ή το περιεχόμενο ή την αναλογία πλευρικής γραμμής. Μπορείτε να επεξεργαστείτε τον ζωντανό ιστότοπό σας χρησιμοποιώντας την επιλογή Inspect Element του Google Chrome . Αν και δεν μπορείτε να αποθηκεύσετε τις αλλαγές σε έναν ζωντανό ιστότοπο, μπορείτε να πραγματοποιήσετε όλη την επεξεργασία ώστε να μπορείτε να τον χρησιμοποιήσετε περαιτέρω. Για να το κάνετε αυτό, ανοίξτε το Inspect Element , επιλέξτε την ιδιότητα HTML από την αριστερή πλευρά και κάντε αλλαγές στυλ στη δεξιά πλευρά. Εάν κάνετε οποιαδήποτε αλλαγή στο CSS , μπορείτε να κάνετε κλικ στον σύνδεσμο του αρχείου, να αντιγράψετε ολόκληρο τον κώδικα και να τον επικολλήσετε στο αρχικό αρχείο.

Το Inspect Element^{(Inspect Element)} του Google Chrome είναι πραγματικός σύντροφος κάθε προγραμματιστή ιστού. Δεν έχει σημασία αν αναπτύσσετε έναν ιστότοπο μιας σελίδας ή έναν δυναμικό ιστότοπο, μπορείτε σίγουρα να χρησιμοποιήσετε αυτές τις συμβουλές.

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is deѕigned nоt just for regular internet users but also for web developers, who often create a wеbsite, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Το Google Chrome δεν ανταποκρίνεται, Επανεκκίνηση τώρα;

• Πώς να διορθώσετε τα σφάλματα λήψης αρχείων στο πρόγραμμα περιήγησης Google Chrome

• Πώς να αλλάξετε τις προεπιλεγμένες ρυθμίσεις εκτύπωσης στο Google Chrome

• Πώς να καταστρέψετε το προφίλ στο κλείσιμο του προγράμματος περιήγησης στο Google Chrome

• Το Anna Assistant είναι ένας τέλειος φωνητικός βοηθός για το Google Chrome

• Πώς να ενεργοποιήσετε ή να απενεργοποιήσετε τα κουμπιά κύλισης καρτελών στο Google Chrome

• Πώς να ενεργοποιήσετε και να χρησιμοποιήσετε τη Λίστα ανάγνωσης στο Google Chrome

• Το Great Suspender θα αναστείλει αυτόματα τις καρτέλες στο Google Chrome

• Πώς να αλλάξετε το προεπιλεγμένο μέγεθος γραμματοσειράς στο πρόγραμμα περιήγησης Google Chrome

• Διορθώστε το παράθυρο διαλόγου Θολό Άνοιγμα αρχείου στο Google Chrome και στον Microsoft Edge

• ERR_NAME_NOT_RESOLVED, Κωδικός σφάλματος 105 στο Google Chrome

• Πώς να ενεργοποιήσετε και να χρησιμοποιήσετε τη λειτουργία Commander στο Google Chrome

• Τρόπος εισαγωγής ή εξαγωγής σελιδοδεικτών του Google Chrome σε αρχείο HTML

• Πώς να εμποδίσετε τους χρήστες να εγκαταστήσουν επεκτάσεις στο Google Chrome

• Πώς να ενεργοποιήσετε αυτόματα τον ορθογραφικό έλεγχο στο Google Chrome

• Πώς να ενεργοποιήσετε ή να απενεργοποιήσετε το Scrollable Tabstrip στο Google Chrome

• Το προφίλ σας δεν μπόρεσε να ανοίξει σωστά στο Google Chrome

• Πώς να απενεργοποιήσετε ή να ενεργοποιήσετε τη σκοτεινή λειτουργία στο Google Chrome στα Windows 10

• Πώς να αφαιρέσετε το κουμπί Global Media Control από τη γραμμή εργαλείων του Google Chrome

• Σφάλμα με το ρολόι σας είναι μπροστά ή το ρολόι σας είναι πίσω στο Google Chrome