web-dev-qa-db-ja.com

Chromeのconsole.logでJavaScript関数にリンクされたハイパーリンクを作成する方法

クリックするとJavaScript関数をトリガーするリンクを含むエントリをコンソールに書き込もうとしています。

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>]");

これらの試みはすべて失敗します。

screenshot

"http：// ..."リンクのように印刷する方法はありますか？.

example

...のみ、テキストをjavascriptstatementまたはfunction代わりに？

これを行う理由は、画面上のどの項目が特定のログエントリに関連付けられているかをすばやく明らかにできるようにするためです（例：ログエントリがクリックした）。

javascriptgoogle-chromehyperlinkconsole.log
26
bigp

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);');
16
Marco Bonelli

OPがこれを尋ねてから4年になりますが、彼らは次のように指定された目標を達成できます。

副作用のある getter を作成します。 （副作用は、あなたのことを直接アニメーション化することです。）

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回押した！」と言うことができます）。

これを行うための恐ろしくハックな他の方法は、http://127.0.0.1:9999/myLocalWebserver/horribleWorkaround?{"metadata":"etc"}のようなURLを書くことです。 URLは、アプリをテストしているローカルWebサーバーによって解釈され、Webページのライブに伝播するプッシュメカニズム（またはポーリングメカニズムのキュー）を開始します。

...もちろん、カスタムパッチを使用して自分でChromiumをコンパイルする方がエレガントなはずです...

3番目の方法は、chrome-extension：//のURLが許可されているため、特定のクリックをJavaScriptに変換する拡張機能を記述することです。おそらくセキュリティへの影響があるかもしれません（安全のために、ホワイトリストに登録されたページ以外ではこれを実行させないでしょうが、それでも、その領域に完全に精通していないため、私が考えていないセキュリティへの影響があります）。

4
ninjagecko