Как создать гиперссылки, связанные с функциями javascript в Chrome console.log?

Ответ 1

Консоль Google Chrome, как и многие другие консоли разработчика, автоматически анализирует любой URL-адрес на ссылку на эту точную страницу. Это единственный способ получить такие URL-адреса, и, к сожалению, невозможно зарегистрировать "настраиваемые URL-адреса" .

Это означает, что следующие журналы автоматически преобразуются в интерактивную ссылку:

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

но, наоборот, следующие не будут:

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

Ответ 2

Прошло четыре года с тех пор, как ОП задала этот вопрос, но они могут достичь поставленной цели следующим образом:

Создайте геттер, у которого есть побочный эффект. (Побочным эффектом может быть прямая анимация вашей вещи.)

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

В качестве альтернативы:

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

Как его использовать:

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

Недостатком является то, что вы можете вызвать геттер только один раз. Возможно, вы могли бы обойти это, удалив его и переопределив его внутри себя, с каждым вызовом. Вы можете сделать это менее хакерским, создав некоторую функцию определения геттера с Object.defineProperties, и некоторую оболочку, которая принимает обычную функцию и возвращает функцию, которая делает то, что она обычно делает, затем переопределяет геттер. Один раз щелкнуть по нему было достаточно хорошо, но если бы вы захотели, вы бы сделали это так:

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;
}

Важно установить свойство configurable, которое позволит вам переопределить его после его определения. Это работает:

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}

Вы можете изменить это для работы с классами. Вы даже можете добавить к этому скрытое состояние, добавив параметр по умолчанию в функцию addDebuggerButton (чтобы ваша кнопка могла сказать "вы нажали кнопку 3 раза!").

Другой ужасно хакерский способ сделать это - написать URL вроде http://127.0.0.1:9999/myLocalWebserver/horribleWorkaround?{"metadata":"etc"}. URL будет интерпретироваться вашим локальным веб-сервером, на котором вы тестируете свое приложение, и будет инициировать какой-то механизм push-уведомлений (или очередь в механизм опроса), который будет распространяться на живую веб-страницу.

... Конечно, было бы более элегантно скомпилировать Chromium самостоятельно с помощью специального патча...

Третий способ, поскольку разрешены chrome-extension://urls, - это, возможно, написать расширение, которое преобразует определенные клики в javascript. Возможно, это может иметь последствия для безопасности (чтобы быть в безопасности, вы не позволите этому запускаться, кроме как на страницах из белого списка, но даже в этом случае есть последствия для безопасности, о которых я не задумывался, поскольку я не совсем знаком с этой областью).

Ответ 3

Если это все еще подходит кому-то:

console.log('There is a good link: %o', 'http://stackoverflow.com');