web-dev-qa-db-fra.com

Comment créer des hyperliens liés à des fonctions javascript dans le console.log de Chrome?

J'essaie d'écrire des entrées dans la console qui contiendraient des liens pour déclencher des fonctions javascript en cliquant dessus:

console.log("javascript:alert('Hello World');");
console.log("<a href=\"javascript:alert('Hello World');\"/>test</a>");
console.log("[DisplayObject 'Hello World' <a href=\"javascript:alert('Hello World');\">reveal</a>]");

Toutes ces tentatives échouent.

screenshot

Existe-t-il un moyen de l'imprimer de manière similaire à un lien "http: // ...", comme ça ...

example

... uniquement, avoir le texte lié à une fonction javascript ou au lieu?

La raison pour laquelle je fais cela est de pouvoir révéler rapidement quels éléments à l'écran sont liés à une entrée de journal spécifique ( exemple: Faire une mise à l'échelle de Sprite CreateJS lorsque l'entrée de journal est cliqué sur ).

javascriptgoogle-chromehyperlinkconsole.log
26
bigp

La console Google Chrome, comme de nombreuses autres consoles d'outils de développement de navigateur, analyse automatiquement toute URL dans un lien vers cette page exacte. C'est le seul moyen d'obtenir de telles URL et, malheureusement, - vous ne pouvez pas réellement enregistrer les "URL personnalisées".

Cela signifie que les journaux suivants seront automatiquement transformés en un lien cliquable:

console.log('http://example.com');
console.log('www.example.com');
console.log('ftp://mysite.com');
console.log('chrome://history')
console.log('chrome-extension://abcdefg...');

mais, au contraire, les suivants ne le feront pas:

console.log('example.com');
console.log('<a href="http://www.example.com">Link</a>');
console.log('javascript:doSomething(someValue);');
16
Marco Bonelli

Cela fait quatre ans que OP a posé cette question, mais ils peuvent atteindre leur objectif déclaré comme suit:

Créez un getter qui a un effet secondaire. (L'effet secondaire peut être d'animer directement votre truc.)

class YourThing {        
    get __doAnythingYouWant() {
        // ...like console.log('my thing:', this);
    }
}

Alternativement:

var yourObject = {
    get __doAnythingYouWant() {
        // ...like an animation in DOM... this.myDomElement.style...
    }
};

Comment l'utiliser:

console.log(yourObject);
> {
      get __doAnythingYouWant: (...)  <-- click here!
  }
> "you clicked the dots!"

L'inconvénient est que vous ne pouvez invoquer le getter qu'une seule fois. Vous pouvez peut-être contourner cela en le supprimant et en le redéfinissant de lui-même, à chaque invocation. Vous pouvez rendre cela moins piraté en créant une sorte de fonction définissant le getter avec Object.defineProperties, et un wrapper qui prend une fonction régulière et renvoie une fonction qui fait ce qu'il fait normalement, puis redéfinit le getter. Cliquer dessus une fois était assez bon pour moi, mais si vous le vouliez, vous le feriez comme ceci:

function addDebuggerButton(obj, f) {
    var buttonName = `__${f.name}`;
    Object.defineProperty(obj, buttonName, {
        get: function() {
            f.apply(this, arguments);
            delete this[buttonName];
            addDebuggerButton(obj, f);
        },
        configurable: true
    });

    return obj;
}

Il est important de définir la propriété configurable, qui vous permet simplement de la redéfinir après l'avoir définie. Ça marche:

addDebuggerButton({a:1,b:2}, function myButton() {
    this.c = Math.random();
    console.log('you pressed the button!', this);
});
> {a: 1, b: 2}
      a: 1
      b: 2
      __myButton: (...)       <-- click here!
      get __myButton: ƒ ()
      __proto__: Object
> you pressed the button! {a: 1, b: 2, c: 0.27574428165568676}
                              a: 1
                              b: 2
                              c: 0.27574428165568676
                              __myButton: (...)      <-- click here again
                              get __myButton: ƒ ()
                              __proto__: Object
> you pressed the button! {a: 1, b: 2, c: 0.43171172657344337}

Vous pouvez le modifier selon vos besoins pour travailler avec des classes. Vous pouvez même ajouter un état caché à cela en ajoutant un paramètre par défaut à la fonction addDebuggerButton (afin que votre bouton puisse dire "vous avez appuyé sur le bouton 3 fois!").

L'autre façon horriblement hackée de le faire est d'écrire une URL comme http://127.0.0.1:9999/myLocalWebserver/horribleWorkaround?{"metadata":"etc"}. L'URL serait interprétée par votre serveur Web local dont vous testez votre application et lancerait une sorte de mécanisme Push (ou file d'attente sur un mécanisme d'interrogation), qui se propagerait à la page Web en direct.

... Bien sûr, il serait probablement plus élégant de compiler Chromium vous-même avec un patch personnalisé ...

La troisième façon, puisque les extensions chrome-extension: // sont autorisées, est peut-être d'écrire une extension qui convertit certains clics en javascript. Il peut y avoir des implications de sécurité (pour être sûr, vous ne laisseriez pas cela fonctionner sauf sur les pages en liste blanche, mais même alors, il n'y a pas d'implications de sécurité auxquelles je n'ai pas pensé car je ne connais pas très bien ce domaine).

4
ninjagecko