Πώς να ενεργοποιήσετε την εφαρμογή Chrome DevTools για απομακρυσμένη αποσφαλμάτωση
Η εφαρμογή Chrome DevTools δημιουργήθηκε από τον Kenneth Auchenberg, σε μια προσπάθεια να βγάλει devtools από το πρόγραμμα περιήγησης - στην περίπτωση αυτή έξω από το πρόγραμμα περιήγησης Chrome. Αυτή η εφαρμογή είναι κατασκευασμένη με βάση το NW.js και μπορεί να εκτελεστεί σε Mac OS X καθώς και σε Linux και Windows.
Υπάρχουν πολλοί λόγοι που ώθησαν τον κατασκευαστή να δημιουργήσει αυτό αλλά το όραμά του συνίσταται στην παροχή στους προγραμματιστές της ευκολίας απομακρυσμένη αποσφαλμάτωση σε πολλαπλά προγράμματα περιήγησης, όλα από την ίδια ενοποιημένη πλατφόρμα (εφαρμογή). Η ιδέα θα πάρει κάποιο χρόνο για να πιάσει και να υλοποιηθεί λόγω ποικίλων λόγων (και αντίσταση, την οποία μπορείτε να διαβάσετε στο blog του).
Θα εξετάσουμε σύντομα την εφαρμογή Chrome DevTools και θα δούμε τι πρέπει να προσφέρει η Google στους προγραμματιστές.
Περισσότερα για το Hongkiat:
- Ξεκινώντας με τα Εργαλεία προγραμματιστών Chrome
- 5 (Περισσότερα) Χρήσιμες συμβουλές Chrome DevTools για προγραμματιστές
- Πώς να προσαρμόσετε το θέμα του Google Chrome DevTools
Εγκατάσταση
Κάντε λήψη του Chrome-Devtools.app.zip και εξαγάγετε το. Κάντε διπλό κλικ για εκτέλεση. Ξεκινήστε το Chrome Browser και ενεργοποιήστε την απομακρυσμένη αποσφαλμάτωση.
Για να το κάνετε αυτό στο Mac, ανοίξτε το τερματικό και εκτελέστε την παρακάτω εντολή:
sudo / Εφαρμογές / Google \ Chrome.app/Contents/MacOS/Google \ Chrome -remote-debugging-port = 9222
Εάν εκτελείτε παράθυρα, ανοίξτε τη γραμμή εντολών και χρησιμοποιήστε αυτήν την εντολή:
ξεκινήστε το αρχείο chrome.exe -remote-debugging-port = 9222
Πώς να χρησιμοποιήσετε
Όταν το Chrome σας είναι ήδη ανοιχτό, με τη δυνατότητα απομακρυσμένης αποσφαλμάτωσης ενεργοποιημένη, μπορείτε τώρα να περιηγηθείτε σε οποιονδήποτε ιστότοπο. Για παράδειγμα, ανοίξαμε το Hongkiat.com για αυτή την άσκηση. Στη συνέχεια, κατευθυνόμαστε στο παράθυρο εφαρμογής DevTools Chrome και ανανέωση αυτής της λίστας (το κουμπί βρίσκεται στην κάτω δεξιά πλευρά).
Τώρα θα εμφανιστεί ο σύνδεσμος Hongkiat.com (όπως φαίνεται παρακάτω).
Τώρα κάντε κλικ στο κουμπί "Μετάβαση". Θα μεταφερθείτε σε ένα νέο παράθυρο. Αυτό είναι. Έχετε ήδη ενεργοποιήσει την εφαρμογή Chrome DevTools. Αυτό που θα δείτε εδώ είναι το ίδιο όπως όταν κάνετε "επιθεώρηση στοιχείου" στο πρόγραμμα περιήγησης Chrome.
Και από εδώ, μπορείτε να χρησιμοποιήσετε την εφαρμογή Dev Devices (Chrome DevTools), ακριβώς όπως να χρησιμοποιήσετε εγγενώς το DevTools στο Chrome: μπορείτε να ελέγξετε το στοιχείο DOM, να εντοπίσετε λάθος JavaScript, να εργαστείτε με την Κονσόλα και πολλά άλλα.
Τι έπεται?
Αυτή η εφαρμογή εξακολουθεί να είναι πολύ πειραματική. Αλλά για τώρα, η ιδέα της λήψης του DevTool από το Chrome επιτρέπει στους προγραμματιστές να αντιμετωπίζουν την εφαρμογή ως λειτουργικό επεξεργαστή και να δουλεύουν με άλλα χρονικά διαστήματα, όπως το node.js και το iOS. Για περισσότερες δυνατότητες, μπορείτε να ελέγξετε το τρένο σκέψης του Auchenberg εδώ.
