jQuery MigrateがWebページに読み込まれているとブラウザのコンソールに「JQMIGRATE: Migrate is installed, version x.x.x」という文字が表示されます。
WordpressではjQueryと一緒にMigrateも読み込まれるため、ほとんどのサイトでブラウザの開発者ツールにこの表示が出ていると思います。
サイトのデバッグをする時に気になったのでこの内容についてまとめました。
エラーや警告ではないのでそのままでもサイトに問題はありません。
Wordpressのfunctions.phpにてこのメッセージを消す方法です。
この記事の目次
jQuery Migrateの出力メッセージ
ブラウザのコンソールに表示される警告やエラーが気になる方は多いと思います。
当サイトではChromeに限って全てのコンソールメッセージに対応してきました。
その過程で最初から最後まで残ったメッセージがあります。それが、
JQMIGRATE: Migrate is installed, version 3.3.2
です。
「JQMIGRATE:Migrateがインストールされています。バージョン 3.3.2」という内容ですが、エラーや警告ではないため放置していました。
ずっと消したいなぁーと思っていたので対処してみます。
jQuery Migrateとは?
Migrateという言葉を聞いたことが無い方のためにまずこちらから。
MigrateはjQuery本家が作成、配信しているjQuery用の下位互換用プラグインです。
jQueryと一緒に読み込むことで、新しいバージョンで廃止されたコードを使っている場合などにエラーが出ないように自動補完してくれる機能があります。
Migrate(マイグレイト)は日本語で移住するという意味があり、新しいバージョンのjQueryに移行する際に使用するためのプラグインであることを意味しています。
Wordpressに同梱されており、5.7時点ではMigrate3.3.2が自動読み込みされます。
関連記事
WordpressにおけるjQueryやMigrateの読み込みについて書いています。
【WordPress】jQueryのアップデート方法!読み込むjQueryをバージョンアップ(更新)してサイトを高速化。
ブラウザのコンソールに表示されるメッセージで「JQMIGRATE:」と付いているものはすべてこのjQuery Migrateが出力しているものです。
JQMIGRATE: Migrate is installedを消す
では本題です。
「JQMIGRATE: Migrate is installed, version 3.3.2」が出力されないようにします。
このメッセージは「jquery-migrate.min.js」から出力されます。
Wordpressの場合、以下にこのファイルがあります。
/wp-includes/js/jquery/jquery-migrate.min.js
圧縮された.minファイルは見にくいのでjquery-migrate.jsを覗いてみます。
68行目~71行目にコードがありました。
コメントに「consoleにメッセージを表示して、開発者が(Migrateが)アクティブであることを表示する」とあります。
migrateMute=trueでは消せない
調べてみるとMigrateの警告メッセージを非表示にするには、同プログラム内で下記を使用すれば良いとのこと。
jQuery.migrateMute = true;
で、試したのですが「JQMIGRATE: Migrate is installed, version ~」のメッセージはmigrateMuteオプションでは非表示にできないようです。
プログラムで出力するように直書きされているうえ、警告でもないので当然と言えば当然です。
window.console.logをnullにする
困った...と思って調べていると海外のサイトで同じような内容が議論がされており、コンソールに表示されるメッセージをnullにするコードが紹介されていました。
functions.phpに下記のコードを追記して保存すればメッセージが消えます。
function remove_jquery_migrate_notice() { $m= $GLOBALS['wp_scripts']->registered['jquery-migrate']; $m->extra['before'][]='temp_jm_logconsole = window.console.log; window.console.log=null;'; $m->extra['after'][]='window.console.log=temp_jm_logconsole;'; } add_action( 'init', 'remove_jquery_migrate_notice', 5 );
Wordpressのキューに追加されたjquery-migrateを指定してコンソールログにnullを与えるコードのようです。
恐らく他の警告などのログは表示されるはず…
これでChromeのコンソールタブが綺麗になりました!
JQMIGRATE~の警告を非表示にする
古いコードなどがある場合、Migrateが警告メッセージを出力します。
「JQMIGRATE:~」と出力されるメッセージや警告をfunctions.phpにて非表示にするコードも参考リンク先にありましたので、ついでにご紹介しておきます。
add_action( 'wp_enqueue_scripts', function() { wp_add_inline_script( 'jquery-migrate', 'jQuery.migrateMute = true;', 'before' ); } );
上記で警告メッセージを非表示にするオプションの「jQuery.migrateMute = true;」をjquery-migrateに追加することが出来ます。
※wp_add_inline_scriptはWordpress4.5以降に実装されています。
当サイトでは警告メッセージが表示されませんので、こちらは動作未確認です。
ご了承ください。
まとめ
jQuery Migrateがブラウザのコンソールに出力するメッセージ「JQMIGRATE: Migrate is installed, version x.x.x」を非表示にする方法でした。
完全に自己満足ですが、気になる方はお試しあれ!
最後にMigrate自体読み込まなければ良くない?
と思って試したのですが、これはこれでコンソールが凄いことになりましたw
Migrateは優秀なプラグインです。
Wordpressの場合、導入するプラグインによっても古いコードが使用されていることがあるためMigrateは読み込んでおいた方が良いと思います。