linuxBean14.04(13)BracketsでJavaScriptにブレークポイントを張りたい

前の関連記事：linuxBean14.04(12)Responsive Meta Tagを加えてレスポンシブWebデザイン

Brackets Blog - The Free, Open Source Code Editor for the Webを読んでいるとBrackets Debuggerというのでブレークポイントが張れると書いてありますが、拡張機能マネージャで検索してもそんな名前の拡張機能はでてきません。とりあえず拡張機能マネージャを使わずインストールしてみます。結論としては無理でした。

拡張機能Brackets Debuggerをインストール（結論:動かず)

（2015.5.8追記。拡張機能マネージャーのURLからインストール...でhttps://github.com/jdiehl/brackets-debuggerを入力してインストールすると互換性がないといわれてdisabledフォルダのbrackets-debuggerフォルダにインストールされることがわかりました。


拡張機能マネージャーの検索ででてこない拡張機能は以下のような直接フォルダを操作する方法よりこちらの方が互換性が判定できてよさそうですね。）

jdiehl/brackets-debuggerの右にあるDownload ZIPボタンをクリックしてダウンロードします。

brackets-debugger-master.zipをファイルマネージャで右クリック、ここでファイルを展開。

~/.config/Brackets/extensions/user/debuggerを作成してそこに展開したファイルの中身を移動させます。

Bracketsを起動して拡張機能マネージャを開きます。


ちゃんとBrackets Debuggerが拡張機能として登録されています。

サンプルページを実行してみる(Theseusの動きがよくわかった）

ファイル→フォルダーを開く。

~/.config/Brackets/extensions/user/debugger/example


index.htmlとmain.jsだけの簡単なサイトです。

ライブプレビューしてみます。


「Click me」というボタンしかない簡素なページです。


ボタンをクリックした回数が表示されます。

拡張機能のTheseusをインストールしている場合、main.jsをみるとそれぞれの要素が呼ばれた回数が表示されています。


行頭のcallsのところをクリックするとTheseusの結果が下に表示されます。


ボタンをクリックするたびに8行目の行頭のcallsの数が押した数だけ増えていきます。

これは別に拡張機能Brackets Debuggerとは関係なくTheseus for Bracketsの機能をみているだけです。

肝心のBrackets Debuggerはサンプルをライブプレビューをしたときにコンソールがでてくるはずなのですが、、、


コンソールはでてくるのですが、Failed to load resourceと言われて動きませんね。

Brackets DebuggerはBrackets v1.3ではもう動かないようです。

jdiehl/brackets-debuggerに書いてあるように~/.config/Brackets/extensions/disabledに拡張機能フォルダを入れて、ln -s ~/.config/Brackets/extensions/disabled/debugger ~/.config/Brackets/extensions/user/debugger としてシンボリックを張っておくと拡張機能マネージャで拡張機能を削除してもdisableフォルダに拡張機能のフォルダを残しておくことができます。

拡張機能Node.js Debuggerをインストール

参考にしたサイト

Brackets Blog - The Free, Open Source Code Editor for the Web
Bracketsにブレークポイントを張るのはうまくいきませんでした。

jdiehl/brackets-debugger
うまく動けばBracketsでブレークポイントを張れるはずでしたがうまくいきませんでした。

TheBenji/brackets-node-debugger · GitHub
node.jsでBrackets内でブレークポイントを張る拡張機能。

次の関連記事:linuxBean14.04(14)Bracketsのメニュー項目追加の仕組みをみる