mobile-web-debuggingΤη στιγμή που αποφασίζεις να δοκιμάσεις σε μία φορητή συσκευή την ιστοσελίδα (ή web εφαρμογή) που τόσο καιρό φτιάχνεις με αγάπη και μεράκι, αντιλαμβάνεσαι πως ενώ ο browser είναι o ίδιος και όλοι δουλεύουν για να τον κάνουν όσο πιο συμβατό γίνεται με την αντίστοιχη desktop έκδοση, τα πράγματα δεν είναι τόσο απλά και ξεκάθαρα. Αν το layout σου στη μικρή οθόνη μοιάζει να έχει επιρροές από Picasso (ναι, το γνωστό ζωγράφο) τότε να κατηγορήσεις το μη προσαρμόσιμο σχεδιασμό σου (τους CSS κανόνες για μικρές οθόνες που δεν έβαλες, τα meta tags που ξέχασες, κλπ. κλπ.), και φυσικά το μη συνεργάσιμο browser. Αν το πρόβλημα όμως δεν είναι εμφανισιακό αλλά λειτουργικό, δηλαδή πατάς εκείνο το ωραίο καμπυλωτό κουμπί που έφτιαξες και δεν κάνει απολύτως τίποτα, τότε τα πράγματα είναι κάπως πιο δύσκολα γιατί μάλλον ο JavaScript κώδικας σου απέτυχε και άντε να βρεις τι πήγε στραβά.

Μην απογοητεύεσαι! Υπάρχουν εργαλεία εκεί έξω για να κάνουν τη ζωή σου πιο εύκολη…

Google Chrome

Ο Chrome του υπολογιστή σου σε συνεργασία με τον Chrome της φορητής σου συσκευής* έρχονται για να κάνουν την εμπειρία του mobile web development παρόμοια με αυτή του παραδοσιακού web development! Η διαδικασία είναι απλή και νομίζω πως το αποτέλεσμα θα σε ενθουσιάσει.
Βήμα 1ο: Συνδέετε τη συσκευή σας στον υπολογιστή μέσω USB
Βήμα 2ο: Ανοίγετε και στις δύο πλευρές το browser
Βήμα 3ο: Στον desktop browser πατάτε το κουμπί των επιλογών (πάνω δεξιά) και ύστερα Εργαλεία > Επιθεώρηση συσκευών

Στη συνέχεια θα εμφανιστεί μπροστά σας μια λίστα με όλα τα tabs που έχετε ανοιχτά στη φορητή συσκευή

Βήμα 4ο: Πατάτε “inspect” και τότε ξεδιπλώνεται μπροστά σας η μαγεία. Έχετε ένα παράθυρο το οποίο δείχνει ότι και ο browser της φορητής συσκευής μαζί όλα τα προγραμματιστικά εργαλεία του Chrome: Console, Elements inspector κλπ…

* χρειάζεται Chrome for Android 32 ή νεότερο για να λειτουργήσει

Περισσότερες πληροφορίες εδώ: https://developer.chrome.com/devtools/docs/remote-debugging
JSConsole
Μια άλλη λύση, πιο universal αλλά μόνο για JavaScript debugging είναι το JSConsole. Μια in-browser κονσόλα για remote debugging χωρίς καλώδια που είναι ανεξάρτητη από κάποιο συγκεκριμένο brand.
Βήμα 1ο: Επισκέπτεστε την ιστοσελίδα της εφαρμογής. http://jsconsole.com/
Βήμα 2ο: Γράφετε :listen στην κονσόλα της εφαρμογής και κρατάτε το κλειδί που θα σας επιστρέψει αυτή η εντολή.
Βήμα 3ο: Εισάγετε το ακόλουθο script στη σελίδα που σας ενδιαφέρει συμπληρώνοντας το κλειδί που μόλις παραλάβατε

<script src="http://jsconsole.com/remote.js?YOUR-KEY-HERE"></script>

Βήμα 4ο*: Γράφετε στην κονσόλα της εφαρμογής :listen YOUR-KEY-HERE και από εκεί και πέρα όλες οι κλήσεις που κάνετε στη συνάρτηση console.log μέσα από το script σας, θα εμφανίζουν το αποτέλεσμα τους στο JSConsole! * Το βήμα αυτό είναι απαραίτητο μόνο αν μετά την παραλαβή του κλειδιού κλεισετε το JSConsole.
Περισσότερες πληροφορίες εδώ: http://jsconsole.com/remote-debugging.html
Καλές δημιουργίες…
και να θυμάστε η CWA είναι πάντα εδώ για να σας βοηθήσει 🙂

Share This: