Debugger Javascript sous IOS (avec émulateur)

[frenchhorn]

Bonjour

je me confronte à un problème, je dois debugger mes scripts Javascript, prépondérants dans mon site car il s'agit de jeux en JS qui font toute la différence avec mes concurrents. Il s'agit d'un site à visé pédagogique, et les jeux apportent le côté ludique et c'est ce qui fait revenir mes internautes tout les jours. A priori tout fonctionne sur les navigateurs PC, chrome & Co (Brave, etc...) , IE, Opera, etc...

A priori il y aurait un bug sur IOS (Ipad) mais je n'ai pas vraiment les moyens de me payer un Ipad, et pas vraiment l'envie de souscrire à un émulateur en ligne qui ne me debuggera certainement rien du tout.

Il ne s'agit pas d'émuler l'apparence d'un Iphone/Ipad, ça c'est bon, mais plutôt d'avoir accès à la console de debuggage du navigateur d'IOS comme si j'étais sur un IOS, mais sans IOS...

Bref, je suis bien embêté et je n'ai absolument aucune idée de comment débugger du JS dans un navigateur IOS à partir d'un bon vieux windows. Éventuellement je pourrais monter une distrib linux si il y a moyen d'arriver à mon objectif, mais il n'est pas concevable d'acheter un terminal de la marque de la pomme (surtout qu'elle est à moitié croquée en plus...)

Auriez-vous une idée? sans que cela ne me coûte un bras? (surtout que j'en ai que deux, alors, je perdrais la moitié de mon capital brachial juste pour debugger du JS...)

merci de m'avoir lu !

 

[rick38]

Les sites de test de browsers ne sont pas des émulateurs mais des vrais accès à des machines réelles. browserstack.com, crossbrowsertesting.com...
Sinon monter une VM de MacOS et installer Safari, si le problème vient de Safari et non pas seulement de la version pour iOS ça peut permettre de débugger.

 

[spout]

Si le bug provoque une exception, tu peux aussi tenter avec Sentry pour remonter l'erreur et le stack trace.

 

[frenchhorn]

Merci pour vos réponses

Les sites de test de browsers ne sont pas des émulateurs mais des vrais accès à des machines réelles. browserstack.com, crossbrowsertesting.com...
Sinon monter une VM de MacOS et installer Safari, si le problème vient de Safari et non pas seulement de la version pour iOS ça peut permettre de débugger.

Ah ok, merci! effectivement cela peut être une solution

Si le bug provoque une exception, tu peux aussi tenter avec Sentry pour remonter l'erreur et le stack trace.

Le truc c'est que je n'ai pas mis des exception partout...oups..

par contre cela me fais penser qu'il est peut être possible de logguer sur le serveur les log d'erreur des navigateurs...faut que je creuse cette piste, mais cela ne m'a pas l'aire très simple

 

[spout]

par contre cela me fais penser qu'il est peut être possible de logguer sur le serveur les log d'erreur des navigateurs...faut que je creuse cette piste, mais cela ne m'a pas l'aire très simple

Sentry le fera pour toi

 

[colonies]

Sinon monter une VM de MacOS et installer Safari, si le problème vient de Safari et non pas seulement de la version pour iOS ça peut permettre de débugger.

Safari est installé d’office avec macOS. Par contre, on peut avoir envie d’installer XCode, qui permet d’installer des machines virtuelles ayant iOS (iPhone et iPad, en choisissant le modèle et la version d’iOS). On peut ensuite, après avoir passé Safari en mode développeur, afficher la console (et tout l’inspecteur web) d’une machine virtuelle (ou d’un vrai appareil iOS branché à l’ordi).

Ou sinon, utiliser window.onerror et envoyer l’erreur au serveur pour qu’il l’enregistre. C’est ce que font les outils type Sentry, dont parle spout.

 

[frenchhorn]

Sentry le fera pour toi

ah ok, merci, je n'avais pas compris.

Ou sinon, utiliser window.onerror et envoyer l’erreur au serveur pour qu’il l’enregistre. C’est ce que font les outils type Sentry, dont parle spout.

oui, merci, du coup c'est ce que viens de faire, je vais voir si je peut me passer de Sentry le temps de résoudre ce problème, merci du conseil du coup je viens d'ajouter ce petit script tout bête:

code JS

var LogClientsJsErrors = (function(){

    // variables privées
   
    var self       = {};

    // variables publique
    // (aucune)
   
    //_____________________________________
    // méthode initialize                  | publique
    //_____________________________________|
    self.initialize = function(div_id){
       
        window.onerror = function(errorMessage, errorUrl, errorLine) {

            jQuery.ajax({
                type: 'POST',
                url: 'UnePagePhpQuiVaBien.php',

                data: {
                    errorMessage: errorMessage,
                    errorUrl: errorUrl,
                    errorLine: errorLine,
                    userAgent : navigator.userAgent,
                    href : window.location.href
                }

                }
            });

            // Prevent firing of default error handler.
           // return true;
        }
    }

    return self;
})();

$filename = 'MonFichierLogQuiVaBien.log';
if(isset($_POST))
{
    if(isset($_POST['errorMessage']) && isset($_POST['errorUrl']) && isset($_POST['errorLine']) && isset($_POST['userAgent']) && isset($_POST['href']))
    {

        $pos = strpos($_POST['errorUrl'], 'adsbygoogle.js'); // error générée quand AdBlock

        $log_it = true;
       
        if ($pos > 0)
        {
            $log_it = false;
        }
        if ($_POST['errorUrl'] != '' && (int)$_POST['errorLine'] != 0) // si y a rien, autant ne rien dire...
        {
            $log_it = false;
        }
        if($log_it == true)
        {
            $data ='';
            $data .= 'time : ' . TimeToDate(time()) . "\r\n";
           
            $data .= 'errorMessage : ' . $_POST['errorMessage'] . "\r\n";
            $data .= 'errorUrl : ' . $_POST['errorUrl'] . "\r\n";
            $data .= 'errorLine : ' . $_POST['errorLine'] . "\r\n";
            $data .= 'userAgent : ' . $_POST['userAgent'] . "\r\n";
            $data .= 'href : ' . $_POST['href'] . "\r\n";
            $data .=  "\r\n";
            $data .= '=========================' . "\r\n";
            $data .=  "\r\n";
           
             file_put_contents ( $filename , $data , FILE_APPEND);
        }
    }
}

Ce n'est pas du grand art, mais si cela peut servir...

merci cher WRInautes!

 

[colonies]

Pas mal, mais perfectible. Évite d'utiliser jQuery : qu'est-ce qui se passe si le bug est dans jQuery ? S'il n'est pas chargé parce qu'il est en defer ou async et que l'erreur arrive avant qu'il soit disponible ?
De plus, tu peux avoit un nombre variable de paramètres : 3 c'est la base, mais tu peux en avoir 4 (la colonne, ce qui est super important si tu minifie tes scripts où tout est sur une ligne : sans la colonne, tu n'es pas franchement renseigné), et même un cinquième qui est la stack, donc la pile de ce qui provoque l'erreur (et qui peut être extrêmement utile).
Pour avoir un code ultra court, je passe par un source d'image... peu importe, ça appelle quand même le script PHP.
Le user-agent, je le récupère coté PHP : pas besoin de le mettre dans le src de la "fausse" image. Idem pour l'URL de la page.

Bref, voilà une alternative :

window.onerror = function(msg, url, line) {
    var t = new Image();
    var par = '{ICI, METTRE L'URL DU SCRIPT PHP QUI ENREGISTRE}?msg=' + encodeURIComponent(msg) + '&url=' + encodeURIComponent(url) + '&line=' + encodeURIComponent(line);
    if (arguments.length > 3)
        par += '&col=' + encodeURIComponent(arguments[3]);
    if (arguments.length > 4)
        par += '&stack=' + encodeURIComponent(JSON.stringify(arguments[4].stack));

    t.src = par;
    return true;
};

Sentry est sans doute très bien, mais ça c'est 100% gratuit, et il n'y a aucune donnée des visiteurs qui part vers un tiers. Attention toutefois : si tu as un bug dans une boucle infinie... tu as une infinité de requêtes. Mais ajouter une limite est très facile.
Par exemple en ajoutant :
var errors_limit = 100:
avant la définition de la fonction, et commencer la fonction par :
if (errors_limit-- <= 0) return true;

 

[frenchhorn]

Pas mal, mais perfectible.

Ah merci pour les conseils, effectivement c'est très nettement perfectible.

encore merci !

P.S. : oui, je n'étais pas très fan à l'idée d'utiliser Sentry pour les raisons que tu as évoquées même si je ne doute pas de son efficacité par rapport à mon script fait maison.