JavaScriptライブラリのバージョンをブラウザのConsoleで確認する方法

ライブラリのバージョンをConsoleで確認

JavaScriptライブラリのバージョンをブラウザのConsoleで確認するには以下のスクリプトを実行する。

var r = {};
function D(v) { this['version'] = v; }
try { r["jQuery"] = new D(jQuery.fn.jquery); } catch(e) {}
try { r["jQuery UI"] = new D(jQuery.ui.version); } catch(e) {}
try { r["Vue"] = new D(Vue.version); } catch(e) {}
try { r["React"] = JSON.stringify(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).match(/"version"\:"([\d\.]+)"/)[1]; } catch(e) {}
try { r["Angular"] = new D($('[ng-version]').getAttribute('ng-version')) } catch(e) {}
try { r["AngularJS"] = new D(angular.version.full) } catch(e) {}
try { r["Babel"] = new D(Babel.version) } catch(e) {}
try { r["lodash"] = new D(_.VERSION) } catch(e) {}
try { r["Moment.js"] = new D(moment.version) } catch(e) {}
try { r["Backbone.js"] = new D(Backbone.VERSION) } catch(e) {}
try { r["Riot.js"] = new D(riot.version) } catch(e) {}
try { r["Knockout.js"] = new D(ko.version) } catch(e) {}
try { r["D3.js"] = new D(d3.version) } catch(e) {}
try { r["Polymer"] = new D(Polymer.version) } catch(e) {}
console.table(r);

実行するとこのようにJavaScriptライブラリのバージョンがブラウザのConsoleに表示されて確認できる。

lodashとUnderscore.jsはバージョン取得が両方_.VERSIONのため、Underscore.jsでもlodashのバージョンとして表示される点に注意。そもそもUnderscore.jsは使わないほうが良い。

ファイルからバージョンを確認する

JavaScriptライブラリにはファイル内にバージョンがコメントで記載されているのでConsoleから確認できないものに関しては直接ファイルを開いて確認する。

JavaScriptライブラリのバージョンを個別にConsoleで確認する方法は以下の通り。

jQuery バージョン確認方法

jQuery.fn.jquery

jQuery UI バージョン確認方法

jQuery.ui.version

Vue バージョン確認方法

Vue.version

React バージョン確認方法

JSON.stringify(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).match(/"version"\:"([\d\.]+)"/)[1]

Angular バージョン確認方法

$('[ng-version]').getAttribute('ng-version')

AngularJS バージョン確認方法

angular.version.full

Babel バージョン確認方法

Babel.version

lodash(Underscore.js) バージョン確認方法

_.VERSION

Moment.js バージョン確認方法

moment.version

Backbone.js バージョン確認方法

Backbone.VERSION

Riot.js バージョン確認方法

riot.version

Knockout.js バージョン確認方法

ko.version

D3.js バージョン確認方法

d3.version

Polymer バージョン確認方法

Polymer.version