デバッグするには
いつも読み込んでいるjavascripファイル「jquery.jqGrid.min.js」は、コメントやら不要なスペース、改行を全部削除して、できる限りファイルサイズを小さくしたファイルです。なので、別に暗号化されてるわけでは無いですが、このソースを追っていくのは不可能です。
そこで、jqGridの動作がどうなってるのか確認したり、alert 文を仕込んだりする際には、srcフォルダにあるjavascripファイルをロードすることになります。ただ、どうやってそのファイルをロードするのか、なのですが、どうやら前のバージョンまではそれ用のツールがあったらしいのですが、最新バージョン(3.5)ではなくなっておりました。残念。
でまぁ、どうやればいいか説明しようと思います。
フォルダ構成
例によって、c:\jqGrid 以下をサンプルに説明。
jqGrid をDLした時に、src フォルダがあるので、それをそのまま使用しますが、grid.loader.jsっていうファイル(後述)は新規作成する必要があります。
C:\jqGrid\
│
├─css
│ │ jquery-ui-1.7.2.custom.css
│ │
│ └─images
│ jquery-uiの画像ファイル
│ :
│ :
│
├─js
│ jquery-1.3.2.min.js
│ jquery.jqGrid.min.js
│ grid.loader.js <--------- ※※※
└─src
│ grid.base.js
│ grid.celledit.js
│ grid.common.js
│ grid.custom.js
│ grid.formedit.js
│ grid.import.js
│ grid.inlinedit.js
│ grid.postext.js
│ grid.setcolumns.js
│ grid.subgrid.js
│ grid.tbltogrid.js
│ grid.treegrid.js
│ jqDnR.js
│ jqModal.js
│ jquery.fmatter.js
│ jquery.searchFilter.js
│ JsonXml.js
│
├─css
│ jquery.searchFilter.css
│ ui.jqgrid.css
│
└─i18n
grid.locale-jp.js
grid.loader.js ファイルの中身
こんなカンジです。
// This file should be used if you want to debug
function jqGridInclude()
{
// modify by shima var pathtojsfiles = "js/"; // need to be ajusted
var pathtojsfiles = "src/"; // need to be ajusted
// set include to false if you do not want some modules to be included
var modules = [
// modify by shima { include: true, incfile:'i18n/grid.locale-en.js'}, // jqGrid translation
{ include: true, incfile:'i18n/grid.locale-jp.js'}, // jqGrid translation
{ include: true, incfile:'grid.base.js'}, // jqGrid base
{ include: true, incfile:'grid.common.js'}, // jqGrid common for editing
{ include: true, incfile:'grid.formedit.js'}, // jqGrid Form editing
{ include: true, incfile:'grid.inlinedit.js'}, // jqGrid inline editing
{ include: true, incfile:'grid.celledit.js'}, // jqGrid cell editing
{ include: true, incfile:'grid.subgrid.js'}, // jqGrid subgrid
{ include: true, incfile:'grid.treegrid.js'}, // jqGrid treegrid
{ include: true, incfile:'grid.custom.js'}, // jqGrid custom
{ include: true, incfile:'grid.postext.js'}, // jqGrid postext
{ include: true, incfile:'grid.tbltogrid.js'}, // jqGrid table to grid
{ include: true, incfile:'grid.setcolumns.js'}, // jqGrid setcolumns
{ include: true, incfile:'grid.import.js'}, // jqGrid import
{ include: true, incfile:'jquery.fmatter.js'}, // jqGrid formater
{ include: true, incfile:'JsonXml.js'}, // xmljson utils
{ include: true, incfile:'jquery.searchFilter.js'}, // search Plugin
{ include: true, incfile:'jqDnR.js'}, // drag & drop Plugin
{ include: true, incfile:'jqModal.js'}, // modal dialog Plugin
];
var filename;
for(var i=0;i<modules.length; i++)
{
if(modules[i].include === true) {
filename = pathtojsfiles+modules[i].incfile;
if(jQuery.browser.safari) {
jQuery.ajax({url:filename,dataType:'script', async:false, cache: true});
} else {
IncludeJavaScript(filename);
}
}
}
function IncludeJavaScript(jsFile)
{
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.charset = 'utf-8';
oScript.src = jsFile;
oHead.appendChild(oScript);
};
};
jqGridInclude();ま、特に説明は不要ですね。
実際に使用するには
今まで script タグで読みこんでたところを修正します。こんなカンジです。
<head> : : <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="src/css/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" media="screen" href="src/css/jquery.searchFilter.css" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/grid.loader.js"></script> : : </head>
補足事項として、
- jqgrid で使用する css も解読可能なファイルがありますので、そちらを使用します。jquery.searchFilter.css も。
- jquery 本体のソースも解読可能なファイルがありますので、そちらを使用します。
これで alert 文をそこら中に埋め込んで解析できるぜ！
