linuxBean14.04(16)Bracketsのデバッグ機能を使う-p--q

前の関連記事：linuxBean14.04(15)Bracketsの右クリックメニューを整理する

Bracketsを起動するたびにBluePrint Betaのアウトラインウィンドウがでるので、それを出ないように設定したいと思います。どこを変更すればいいのか調べるためにBracketsのデバッグ機能を使います。

Theseusでコールされている関数を調べる

拡張機能のTheseus for Bracketsをインストールします。

調べたいJavaScriptファイルを開いて、デバッグ→Debug Brackets with Theseus、とすると行頭にコールされた回数が表示されます。

早速やってみると何も操作ができなくなってしまいました、、、

豆メニュー→システムツール→タスクマネージャ、でみてみるとCPU使用量が100%になっています。

一向に終わる気配がないので強制終了しました。

拡張機能を大量に入れているのが原因と踏んで拡張機能を最低限にすることにしました。

ヘルプ→拡張機能のフォルダーを開く。

userフォルダの中にTheseusと解析をする拡張機能のフォルダ、今回はblueprint.outlinerを残して他は違うフォルダ(disabledにしました）に退避させます。

デバッグ→拡張機能付きでリロード。

~/.config/Brackets/extensions/user/blueprint.outlinerフォルダを開いてmain.jsを開きます。

デバッグ→Debug Brackets with Theseus。

新しくBracketsのウィンドウが開きます。

今度はすぐに結果が出ました。

これはデバッガに呼ばれたウィンドウなので、Theseusの結果をみるには元のウィンドウを見ます。

1 callというところをクリックすると下部にLogがでます。

3行目のdefine()はBracketsの起動時に必ず呼び出されるものです。

手がかりがつかめないので次の関数に行きます。

39行目のsetActive()関数。

名前から推測するとこれがアウトラインウィンドウを表示している関数のようです。

この関数を起動時に呼ばれないようにすればよいわけです。

Theseusの結果をみるとflag=trueで呼び出されています。

Backtraceをクリックして呼び出し元を探します。

main.js336行目のappReady()メソッドから呼ばれています。

appReadyをクリックするとその行を表示してくれます。

 AppInit.appReady(function () {
  //extension rating tick
  tick();
        setInterval(tick, mins60);
  //create html
  $panel = WorkspaceManager.createBottomPanel('blueprint-bottomPanel', $("<div id='blueprint-bottomPanel' class='bottom-panel'></div>"), 200);
  initHtml();

  Outliner.init($outlineRoot);
  Minimap.init($minimapRoot);
  var openState = prefs.get('generel/openOnStart');
  if (openState !== 'false') {  
   setActive(true);
   switchView(openState);
  } else {
   switchView('right');
  }

確かに348行目で呼ばれていますね。

openState !== 'false'、がTrueのときにsetActive(true)が実行されるので、openState !== 'false'をFalse、つまりopenStateをfalseにすればよいわけです。

openStateは346行目で定義されています。

  var openState = prefs.get('generel/openOnStart');

prefsのget()メソッドで値を得ています。

Theseusでわかるのはここまでです。

これ以上遡るためにここにブレークポイントを設定することにします。

ブレークポイントはlinuxBean14.04(13)BracketsでJavaScriptにブレークポイントを張りたいでやったようにBracketsでは設定できないので開発者ツールで行います。

Theseusを実行したまま開発者ツールを使うと時間がかかるので、Theseusで開いたBracketsウィンドウを閉じます。

Bracketsの開発者ツールを表示させる

デバッグ→開発者ツールを表示。

Chromeで開発者ツールのタブが開きます。

まず編集結果がすぐに反映させるようにChromeの開発者ツールのタブのキャッシュを無効にします。

Chromeの右下のギアアイコンをクリックしてSettingsを開きます。

Disable cache(while DevTools is open)をチェック、Settingsを閉じます。

これで開発者ツールのタブのキャッシュが無効にできました。

VitualBoxのゲストOSのlinuxBeanで開発者ツールを使う方法

VirtualBoxのゲストOSのlinuxBeanの開発者ツールではマウスが反応しないところがあります。

例えばフォルダツリーはフォルダの前にある黒三角形をダブルクリックすると折りたたまれたフォルダの内容が展開されるのですが、展開したフォルダの内容を元に折りたたむことができませんでした。

また右の枠の大きさの変更ができません。

Watch式が長くなると肝心の値がみれなくなるのでかなり不便です。

これを解決するために、linuxBean14.04(2)linuxBean設定ウィザードでソフトウェアを追加するで設定した/usr/bin/google-chrome-stable --touch-devices=123で予め起動したChromeに開発者ツールのタブを開くようにします。

Bracketsのメニュー、ファイル→試験的ライブプレビューを有効にする。

これですでに起動しているChromeに開発者ツールのタブが開くようになります。

--touch-devices=123を有効にしたChromeを起動。

Bracketsで、デバッグ→開発者ツールを表示。

すでに起動しているChromeに開発者ツールのタブが追加されます。

これで右の枠の大きさの変更はできるようになりましたが、フォルダツリーの折りたたみはできるようになりませんでした。

右クリック→再読み込み、ですべて折りたたんだ状態には戻すことにはできます。

キャッシュも忘れずに無効にしておきます。

Bracketsの開発者ツールでブレークポイントを設定する

Sourcesをクリックして左の三角矢印ボタンをクリックします。

フォルダツリーが開くのでbuleprint.outlinerのmain.jsをダブルクリックします。

Theseusでみつけたmain.jsの346行目の行番号をダブルクリックしてブレークポイントを設定します。

Bracketsに戻って、デバッグ→拡張機能付きでリロード。

BracketsではPausede in debuggerとでて、ResumeボタンとStep overボタンが表示されます。

開発者ツールでは346行目がハイライトされています。

開発者ツールではResume、Step over、Step in、Step out、ブレークポイントの有効無効、の各ボタンがあります。

今回はpref.get()の元をたどりたいのでStep inボタンをクリックします。

するとpreferences.jsの121行目に飛びます。

フォルダツリーで確認するとこれも同じBluePrint Betaのファイルです。

 /*
  * @param {string} url relative 2 PREFS
  */
 exports.get = function (url) {
  var key = url.replace(/\//g, '');

  if (key in PREFS) {
   return PREFS[key];
  } else {
   console.error("key doesn't exist!");
  }
 };

124行目で値を返しています。

124行目までStep overボタンで移動して、開発者ツールのScope VariablesをみてみるとkeyがgenerelopenOnStartになっています。

さらにStep overボタンでmain.jsに戻ってきてScope Variablesをみます。

openStateにはrightが入っています。

openStateにこの時点でfalseが入っていれば起動時にアウトラインウィンドウが開かないので、PREFS[generelopenOnStart]='false'となるようにすればよいわけです。

とういうことでgenerelopenOnStartをキーとする値を設定しているところを探します。

main.jsはgenerelopenOnStartで検索してヒットするものはありません。

preferences.jsを検索すると3箇所あります。

  defaultPrefValues = {
   generelopenOnStart : 'right',
   generelautoChangeTab : 'outline',
   generellastTab : 'outline',
   outlinedefaultSorting : 'none',
   outlineunknownTypeChangeTab : true,
   outlinefontSize : '19',
   outlinejsexperimentalParser : false,
   minimapscrollSpeed : '50',
  },

11行目のrightをfalseに書き換えればよいとわかります。

ところがそうはなりませんでした。

拡張機能BluePrint Betaのアウトライン表示がデフォルトででないようにする

いろいろ調べてみるとpreferences.jsの91行目でlocalStorage.blueprintPrefsを読み込んでそれが優先されていました。

localStorage.blueprintPrefsに"right"がすでに入っています。

Bracketsを再起動すればlocalStorageがクリアされるのかと思いましたが変化しませんでした。

Web Storage－HTML5のAPI、および、関連仕様にはlocalStorageは永続的に有効と書いてあります。

OSを再起動してもだめです。defaultPrefValuesはいつ使われるのだろうか、、、

  var openState = prefs.get('generel/openOnStart');
  if (false) {  
   setActive(true);

もう~/.config/Brackets/extensions/user/blueprint.outliner/main.jsの347行目をfalseに固定してしまいました。

これでもう起動時にアウトラインウィンドウが表示されることはなくなりました。

いまのところはこれで支障はないようです。

開発者ツールではObjectの中身一覧を文字列にしてはみれず

開発者ツールでScope VariablesのPREFSオブジェクとの項目を文字列でみたいと思いました。

javascriptのデバッグでobjectの中身を文字列として展開する方法 | infoScoop開発者ブログやHow can I display a JavaScript object? - Stack Overflowに書いてある方法をやってみましたが、PyCharmでprint(オブジェクト）で得られるようなもの(LibreOffice(42)UNOオブジェクトの属性1:正規表現パターンを作成)は得られませんでした。

オブジェクトのプロパティを指定するとWatch式でそのプロパティの値のみ知ることができます。