1. ✅ Apprenez une METHODE qui marche pour votre SEO ! Formation à distance avec Olivier Duffez et Fabien Facériès + aide pour prise en charge du financement
    Rejeter la notice

Debugger Javascript sous IOS (avec émulateur)

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par frenchhorn, 27 Mai 2020.

  1. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 131
    J'aime reçus:
    3
    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 !
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 517
    J'aime reçus:
    202
    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.
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 056
    J'aime reçus:
    294
    Si le bug provoque une exception, tu peux aussi tenter avec Sentry pour remonter l'erreur et le stack trace.
     
  4. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 131
    J'aime reçus:
    3
    Merci pour vos réponses

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

    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
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 056
    J'aime reçus:
    294
    Sentry le fera pour toi
     
  6. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    557
    J'aime reçus:
    68
    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.
     
  7. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 131
    J'aime reçus:
    3
    ah ok, merci, je n'avais pas compris.

    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
    HTML:
    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;
    })();

    PHP:
    $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!
     
  8. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    557
    J'aime reçus:
    68
    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 :
    Code:
    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;
     
  9. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 131
    J'aime reçus:
    3
    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.
     
Chargement...
Similar Threads - Debugger Javascript IOS Forum Date
Débugger Facebook et DNS Facebook 2 Juin 2014
Outils pour debugger un fichier css ? Développement d'un site Web ou d'une appli mobile 29 Mars 2012
Editer document Word avec Javascript Développement d'un site Web ou d'une appli mobile 10 Septembre 2020
Quelle extension Chrome pour expander les liens Javascript Développement d'un site Web ou d'une appli mobile 30 Août 2020
Javascript et duplication de Hn Problèmes de référencement spécifiques à vos sites 21 Août 2020
Quels Outils Javascript pour générer des documents Demandes d'avis et de conseils sur vos sites 21 Juillet 2020
HTML fait par Javascript <=>gérer les Events ? Développement d'un site Web ou d'une appli mobile 5 Juillet 2020
Compresseur Javascript récent? Développement d'un site Web ou d'une appli mobile 7 Juin 2020
Styliser popup alert javascript Développement d'un site Web ou d'une appli mobile 16 Mars 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019