一个chrome extension,可以分析页面中的AMD module之间的依赖关系,也能找出当前页面中的amd相关错误。
由于可能添加新功能,所以推荐通过github,从源码安装。
$ git clone https://github.com/ecomfe/amd-analyzer.git
打开chrome的插件页面:chrome://extensions
点击加载正在开发的应用程序
选择Step 1
中clone到的目录
访问一个开发中或线上的url, 如果当前页面中含有amd环境,将会出现下图所示的icon
点击icon将会进入amd-analyzer分析页面。页面分为两个部分,左边的分析区和右边 的log区
下图为分析区的初始状态, 红色按钮中的模块为inline script中的入口模块, 绿色按钮为在某文件中的入口模块, 蓝色按钮为require.config信息
下图为log区的初始状态,log区的日志支持filter过滤
点击每个按钮,能分别看到分析的结果,如果在分析中有错误,会显示在右边。
下图为点击config获取的当前页面的require.config信息
下图是点击某个入口模块的依赖分析图(默认是不分析状态,需要点击入口模块,相当于指定入口)
可以根据右边的log区的日志,进行分析,定位问题。
// a是装载时依赖,b是运行时依赖
define( [ 'a', 'b' ], function ( a ) {} );
// a是装载时依赖,b是运行时依赖
define( function ( require ) {
var a = require( 'a' );
return function () {
var b = require( 'b' );
};
} );
入口模块指的是页面中以async方式调用的require。
require( [ 'main' ], function ( main ) {
main.init();
});