JavaScript, jqueryを使っています。どのようにしたらjquery メソッド連結途中の変数に console.log();によるデバッグを実行できますか？

Question

実現したいこと

JavaScript, jqueryを使っています。どのようにしたらjquery メソッド連結途中の変数に console.log();によるデバッグ効率よく行いたいです。

発生している問題・分からないこと

以下のコマンドを実行しようとしましたがエラーが出てうまくいきませんでしたしまいました。
どのようにしたらjquery メソッド連結途中の変数に
console.log();によるデバッグを実行できますか？

該当のソースコード

 if(e.keyCode === 13 && e.shiftKey === true){
    var $this = $(this);
    $this.hide().siblings('.js-todo_list-text').text($this.val()).show()
    .console.log("$this>>", $this);
    .console.log("$(this)>>", $(this));
    .closest('.js-todo_list-item')
    .attr('data-text', $this.val());
  }

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

一次変数に代入するやり方も試したが
コードが長くなって
ごちゃごちゃして読みづらい感じがしてしまうので
もっとスマートなやり方を知りたい。

補足

特になし

Answer 1

jQueryオブジェクトにメソッドを足すことができます。

jQuery.fn.extend({
  consoleLog: function(...args) {
    console.log(...args);
    return this;
  }
});

// $('...').consoleLog('foo').attr(...) のように利用できる

Answer 2

シンプルに

var $this = $(this);
$this.each(console.log);

とか

var $this = $(this);
$this.each((index,element) => console.log('info: %o %o', index, element));

でいいのではないでしょうか？（※だたし、要素数が多い場合は見づらくなるので注意が必要

Answer 3

HTML要素のノードリストや属性の変化に対してはMutationObserver、プロパティの変化にはgetter/setterでデバッグするとよいでしょう