JavaScriptのデバッグを行うための設定PHPStorm6にはサーバ機能が内蔵されており、それを利用したJavaScriptのデバッグを行うことができます。Apacheを利用したデバッグも可能のようですが、お手軽なデバッグ環境が最初から用意されているので使わない手はありません。PHPStormの設定デバッグ設定を作成します。Configurationsを表示する。デバッグ実行時に開かれるファイル。これがなくともindexファイルを読み込みます(存在すれば)。ファイルを指定しないとデバッグ動作が不安定になったので指定するとよいかもしれません。Browserデバッグに利用するWebブラウザを指定します。FirefoxとChromeが選択できます。アドオン・機能拡張をインストールする必要があります。files自動的にプロジェクトが追加されます。ポート番号の63342はSettingsにも編集する項目がなく、PHPStorm起動時に63342がlistenになりますので、おそらく固定だと思います。変更すると動作しません。ルート以外のファイルも問題ありません。open:にデバッグ実行時に開きたいファイルを指定します。これでPHPStormの設定が終わりました。Webブラウザにアドオン/機能拡張を追加するPHPStorm用のアドオン/機能拡張をFirefox、Chromeに追加します。Firefoxブラウザのアドオン検索をしても見つかりません。そこで、デバッグ設定のBrowserをFirefoxにしてデバッグを実行します。実行方法は、下の図のように作成したデバッグ設定を選択し、右側にあるデバッグアイコン(緑の虫)をクリックします。すると、Firefoxにアドオンがない場合、アドオンのインストールを促されるのでインストールします。extensionのインストール画面が表示されるので、指示に従いインストールします。アドオンを有効にするための再起動を促されるのでFirefoxを再起動します。これでアドオンがインストールされました。Supportを追加します。Chromeウェブストアを開きます。Supportが見つかるので、追加します。変数の中身を確認したい場所に、クリックでブレークポイントを作成します。一度クリックするとブレークポイントが消えます。open:で指定したファイルが読み込まれ、ブレークポイントで止まります。変数の中身を確認できます。Programで次のブレークポイントまで飛ばしてデバッグ作業を進めます。Firefoxは不安定、Chromeは安定?Firefoxはデバッグ設定を変更していないにもかかわらず、デバッグできたりできなかったりとかなり不安定です。したら、他のアドインが原因かもしれませんが、特定できませんでした。Chromeでは問題が起きません。Chromeをほとんど利用していないので、機能拡張が少ないのが理由かもしれませんが、安定しています。LiveEditがChromeのみ対応していることを考えると、FirefoxよりChromeに力を入れているのかもしれません。ファイルやフォルダのフルパスを取得するアース製薬の電池でノーマットはひどい新しいThinkPadトラックポイントキーボードはイマイチだと思うMacで使えるSQLiteクライアントスポンサーリンクMacのファイル更新監視ツールfswatchを使ってmarkdown等を自動コンパイル日本語(JIS)キーボードと英語(US)キーボード、どっちが好み?歯ブラシの世界Macで使えるスニペットツールMacでWebページを作成する。SandVox編MacでWebページを作成する。