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

Δεν πρέπει να δοκιμάσετε έναν ιστότοπο χωρίς να δοκιμάσετε πρώτα το κιτ DevTools του Google Chrome . Η λειτουργία προγραμματιστή Chrome^(Chrome) σάς επιτρέπει να δοκιμάσετε και να δοκιμάσετε διεξοδικά έναν νέο ιστότοπο (ή έναν υπάρχοντα) για να βρείτε και να διορθώσετε σφάλματα. Μπορεί επίσης να σας δώσει πληροφορίες για τον τρόπο λειτουργίας άλλων τοποθεσιών, συμπεριλαμβανομένης της προβολής του πηγαίου κώδικα. 

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

Τι είναι η λειτουργία προγραμματιστή Chrome;^{(What Is Chrome Developer Mode?)}

Όταν αναφερόμαστε στη λειτουργία προγραμματιστή του Chrome , δεν μιλάμε για την ίδια λειτουργία προγραμματιστή^{(same developer mode)} που θα βλέπετε στα Chromebook^{(Chromebooks)} . Αυτό στο οποίο αναφερόμαστε είναι τα εκτεταμένα εργαλεία ανάπτυξης του Chrome (που ονομάζονται ^(Chrome)Google DevTools ) που είναι ενσωματωμένα στο ίδιο το πρόγραμμα περιήγησης.

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

Ωστόσο, το Google DevTools^{(Google DevTools)} προσφέρει περισσότερα από αυτό. Μπορείτε να χρησιμοποιήσετε τη λειτουργία προγραμματιστή Chrome για να αλλάξετε μια σελίδα μετά τη φόρτωσή της, να εκτελέσετε εντολές της κονσόλας του Google Chrome για να ελέγξετε και να χειριστείτε τη σελίδα, καθώς και να εκτελέσετε δοκιμές ταχύτητας και δικτύου για την παρακολούθηση της κυκλοφορίας ιστού.

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

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

Τρόπος πρόσβασης στο μενού Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

Υπάρχουν μερικοί τρόποι με τους οποίους μπορείτε να αποκτήσετε πρόσβαση στο μενού Εργαλεία προγραμματιστών του Google Chrome^{(Google Chrome DevTools)} , ανάλογα με το εργαλείο που θέλετε να χρησιμοποιήσετε.

Ο ευκολότερος τρόπος για να το κάνετε αυτό είναι από το μενού του Google Chrome . Για να το κάνετε αυτό, κάντε κλικ στο εικονίδιο μενού με τις τρεις κουκκίδες^{(three-dots menu icon)} επάνω δεξιά. Από το μενού που εμφανίζεται, κάντε κλικ στην επιλογή More Tools > Developer Tools .

Αυτό θα ανοίξει το κιτ DevTools σε ένα νέο μενού στη δεξιά πλευρά της ανοιχτής καρτέλας ή παραθύρου του Chrome .

Μπορείτε επίσης να το κάνετε αυτό χρησιμοποιώντας συντομεύσεις πληκτρολογίου. Από υπολογιστή με Windows ή Linux^{(Linux PC)} , ανοίξτε το πρόγραμμα περιήγησης Chrome και πατήστε το πλήκτρο F12 . Μπορείτε επίσης να πατήσετε τα Ctrl + Alt + J ή Ctrl + Alt + I σε μια ανοιχτή καρτέλα ή παράθυρο του Chrome .

Στο macOS, πατήστε F12 ή πατήστε τα πλήκτρα Option + Command + J ή Option + Command + I για να ανοίξετε το μενού του Chrome DevTools . Αυτό θα ανοίξει την κονσόλα Chrome , με επιλογές για μετάβαση σε άλλα εργαλεία του Chrome στο επάνω μέρος του μενού ^(Chrome)DevTools .

Εάν θέλετε, μπορείτε να προβάλετε τον πηγαίο κώδικα για έναν ιστότοπο (ανοίγοντας την καρτέλα Στοιχεία του μενού ^(Elements)DevTools στη διαδικασία) σε οποιαδήποτε ανοιχτή ιστοσελίδα κάνοντας δεξί κλικ και κάνοντας κλικ στην επιλογή Έλεγχος^{(Inspect )} .

Χρήση του Chrome DevTools^{(Using Chrome DevTools)}

Όπως αναφέραμε εν συντομία, μπορείτε να χρησιμοποιήσετε το κιτ Chrome DevTools για να δείτε τον πηγαίο κώδικα για έναν ιστότοπο στην καρτέλα Στοιχεία . ^(Elements)Θα σας επιτρέψει να αναλύσετε τον κώδικα πίσω από τη σελίδα που έχετε φορτώσει, καθώς και να προβάλετε μηνύματα σφάλματος (που υποδεικνύουν προβλήματα με τον τρόπο φόρτωσης του ιστότοπου) στην κονσόλα Chrome στην καρτέλα Κονσόλα .^(Console)

Μπορείτε επίσης να προβάλετε τις διαφορετικές πηγές περιεχομένου από έναν ιστότοπο στην καρτέλα Πηγές . ^(Sources)Για παράδειγμα, εάν ένας ιστότοπος χρησιμοποιεί ένα δίκτυο παράδοσης περιεχομένου (CDN)^{(using a content delivery network (CDN))} , τα μέσα από έναν ιστότοπο θα αναφέρονται ως διαφορετική πηγή εδώ.

Η λειτουργία προγραμματιστή Chrome^(Chrome) σάς επιτρέπει να κατεβάσετε αυτό το περιεχόμενο απευθείας ή να πραγματοποιήσετε πιο σύνθετη ανάλυση του περιεχομένου.

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

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

Μπορείτε να το αναλύσετε περαιτέρω στην καρτέλα Απόδοση^{(Performance )} , όπου μπορείτε να καταγράψετε τη χρήση του προγράμματος περιήγησης Chrome σε μεγαλύτερο βάθος, συμπεριλαμβανομένης της εγγραφής στιγμιότυπων οθόνης σε διαφορετικά σημεία. Αυτό θα καταγράψει πόσο χρόνο χρειάζεται για να φορτώσει τον ιστότοπό σας για περαιτέρω ανάλυση.

Το Google Chrome έχει τη φήμη ότι είναι σκληρό στη μνήμη του υπολογιστή σας^{(being hard on your PC memory)} , έτσι μπορείτε να δοκιμάσετε τη χρήση της μνήμης JavaScript του ιστότοπού σας στην καρτέλα Μνήμη . ^(Memory)Εδώ μπορούν να χρησιμοποιηθούν διαφορετικά προφίλ δοκιμών Chrome^{(Different Chrome)} , με περισσότερες πληροφορίες σχετικά με αυτήν τη δοκιμή στη σελίδα τεκμηρίωσης του Chrome DevTools^{(Chrome DevTools documentation page)} .

Για πιο εις βάθος ανάλυση του περιεχομένου του ιστότοπού σας, καθώς και για τυχόν αποθηκευτικό χώρο του προγράμματος περιήγησης που μπορεί να χρησιμοποιεί (για παράδειγμα, για την καταγραφή δεδομένων), μπορείτε να πραγματοποιήσετε αναζήτηση μέσω της καρτέλας Εφαρμογή . ^{(Application)}Μπορείτε να δείτε πληροφορίες για τα cookie ιστότοπου εδώ στην ενότητα Cookies ή να διαγράψετε τον χώρο αποθήκευσης που χρησιμοποιείται κάνοντας κλικ στην επιλογή Εκκαθάριση χώρου αποθήκευσης^{(Clear storage)} .

Εάν ανησυχείτε για την ασφάλεια του ιστότοπού σας, μπορείτε να ελέγξετε πόσο καλά αποδίδει στην καρτέλα Ασφάλεια . ^{(Security )}Αυτό θα σας δώσει μια γρήγορη επισκόπηση της ανάλυσης ασφαλείας του Chrome για μια σελίδα, συμπεριλαμβανομένου του εάν η σελίδα διαθέτει ή όχι ένα σωστό και αξιόπιστο πιστοποιητικό SSL .

Εάν θέλετε να δημιουργήσετε μια αναφορά για την απόδοση του ιστότοπού σας, συμπεριλαμβανομένου του εάν πληροί τυπικά πρότυπα χρήστη και εάν η απόδοση του ιστότοπου μπορεί να επηρεάσει τη βελτιστοποίηση μηχανών αναζήτησης, μπορείτε να κάνετε κλικ στην καρτέλα Lighthouse . Αυτό προσφέρει ρυθμίσεις που μπορείτε να ελέγξετε ή να αποεπιλέξετε για την αναφορά σας—κάντε κλικ στην επιλογή Δημιουργία αναφοράς^{(Generate report)} για να δημιουργήσετε την αναφορά για προβολή.

Αυτό μόλις και μετά βίας χαράζει την επιφάνεια των δυνατοτήτων που μπορεί να προσφέρει στους προγραμματιστές η λειτουργία προγραμματιστή Chrome . Εάν θέλετε να μάθετε περισσότερα, η τεκμηρίωση του Chrome DevTools^{(Chrome DevTools documentation)} θα σας βοηθήσει με τα εργαλεία και τις δυνατότητες που προσφέρονται, συμπεριλαμβανομένου του τρόπου δημιουργίας των δικών σας δοκιμών χρήστη με αυτό. 

Προηγμένα κόλπα του Google Chrome^{(Advanced Google Chrome Tricks)}

Οι περισσότεροι χρήστες του Chrome δεν θα γνωρίζουν ποτέ ότι το κιτ Google Chrome DevTools υπάρχει στο πρόγραμμα περιήγησής τους, αλλά για ισχυρούς χρήστες, παραμένει ένας εξαιρετικά χρήσιμος τρόπος δοκιμής και ανάλυσης ιστότοπων. Υπάρχουν επίσης διαθέσιμες επεκτάσεις Chrome τρίτων κατασκευαστών για προγραμματιστές ιστού που^{(Chrome extensions for web developers)} θα σας βοηθήσουν να δοκιμάσετε περαιτέρω τον ιστότοπό σας.

Εάν δημιουργείτε έναν βασικό ιστότοπο^{(building a basic website)} , η μετάβαση στη λειτουργία προγραμματιστή του Chrome θα μπορούσε να σας βοηθήσει να εντοπίσετε σφάλματα στον ιστότοπό σας που δεν είναι άμεσα ορατά. Μπορείτε να το κάνετε αυτό μόνο εάν το Chrome λειτουργεί σωστά, επομένως εάν αντιμετωπίζετε προβλήματα με σφάλματα του Chrome^{(struggling with Chrome crashes)} , ίσως χρειαστεί να επαναφέρετε ή να εγκαταστήσετε ξανά το πρόγραμμα περιήγησής σας πρώτα.

What Is Chrome Developer Mode & What Are Its Uses?

No website is built perfectly. Like all products madе by humans, code errors are part of the process. That’s why it’s important to thorоughly test any new website you build to make sure that it’s as free of errors as possible to give your userѕ the best poѕsible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Αυτόματη συμπλήρωση Google Chrome: Ένας πλήρης οδηγός

• Οι 10 καλύτερες επεκτάσεις απορρήτου για το Chrome (2022)

• Χρησιμοποιήστε αυτές τις 4 προσθήκες Chrome για να κρυπτογραφήσετε τα μηνύματά σας στο Gmail

• Ρυθμίσεις περιεχομένου Google Chrome: Πλήρης οδηγός

• Ποια είναι η καλύτερη υπηρεσία κλήσεων διάσκεψης – Οι καλύτερες εφαρμογές σε σύγκριση

• Το HDG εξηγεί : Τι είναι τα SQL, T-SQL, MSSQL, PL/SQL και MySQL;

• Αυτόματη μετακίνηση, διαγραφή ή αντιγραφή αρχείων στα Windows

• 5 καλύτερα εργαλεία σαρωτή IP για Windows, Mac, iOS και Android

• 5 φορητές εφαρμογές που θέλετε οπωσδήποτε να έχετε στο USB Stick σας

• Τα καλύτερα προγράμματα για την προσθήκη νέας λειτουργικότητας στα Windows 10

• Δύο εργαλεία μεταγραφής για τη μετατροπή ήχου σε κείμενο

• 7 καλύτερα εργαλεία αποκοπής για Chromebook

• Πώς να εξαλείψετε τις διπλότυπες ψηφιακές φωτογραφίες στον υπολογιστή σας με Windows

• 5 κόλπα στη γραμμή εντολών για να κάνετε το CMD πιο ενδιαφέρον

• Τα καλύτερα γραφικά στοιχεία καιρού για Windows 10/11

• Δοκιμές νεκρών εικονοστοιχείων για τη διόρθωση ενός κολλημένου εικονοστοιχείου στην οθόνη σας

• Καλύτεροι συντάκτες Markdown: Όλες οι πλατφόρμες και διαδικτυακά

• 4 υπέροχα εργαλεία για τη δημιουργία πακέτων Windows Installer

• 9 τρόποι εγγραφής παιχνιδιού στον υπολογιστή σας

• 7 τρόποι για να ανοίξετε ένα αρχείο MDB χωρίς Microsoft Access