投稿日:2018/03/13
サイトのブラウザで使われているサーバ内のjavascriptのファイルのデバッグが
ブラウザで行うことができます。
左に
察しがつくかもしれないですがサーバの中にあるプラグインのパスですので
plugins配下に使用されているプラグインのjs,htmlファイルを見ることができます。 biz-calendar配下のcalendar.js?ver=~ をクリックします。 右にcalendar.jsのファイル内容が表示されると思います。
これはブレイクポイントを貼る、という作業です。
ブレイクポイントは実行中のプログラムを停止させたい箇所に貼るものになります。 その状態で表示しているページをリロードしてみてください。
ページがリロード途中で止まり、さきほどブレイクポイントを貼った箇所で止まっていると
思います。
の
これは今dayという変数の値が4ということになります。 他の箇所もカーソルをあてると変数やオブジェクトの値がみることができると思います。 F8を押してください。
次のブレイクポイントまで実行を再開します。 またL181のところにとまりdayにカーソルをあてると5と表示されていると思います。
調べて自分のソースを追加してデバッグして間違えているところ直して…
という感じで行いました。
ブラウザで行うことができます。
wpのプラグインbizcalendar
(例)https://www.hirano-d.biz/clinicデベロッパーツール
choromeデベロッパーツールを開き(F12)、sourceタブを選択します。左に
> wp-content
> source
とあると思うので、wp-contentをクリックするとpluginsと表示されるので察しがつくかもしれないですがサーバの中にあるプラグインのパスですので
plugins配下に使用されているプラグインのjs,htmlファイルを見ることができます。 biz-calendar配下のcalendar.js?ver=~ をクリックします。 右にcalendar.jsのファイル内容が表示されると思います。
ブレイクポイント
L181の数字の箇所をクリックすると青くなります。if (this.setting.options[dayName[day]] == "on") {
の箇所。これはブレイクポイントを貼る、という作業です。
ブレイクポイントは実行中のプログラムを停止させたい箇所に貼るものになります。 その状態で表示しているページをリロードしてみてください。
ページがリロード途中で止まり、さきほどブレイクポイントを貼った箇所で止まっていると
思います。
変数の値を見る
if (this.setting.options[dayName[day]] == “on”) {の
day
にカーソルをあてると4と表示されると思います。これは今dayという変数の値が4ということになります。 他の箇所もカーソルをあてると変数やオブジェクトの値がみることができると思います。 F8を押してください。
次のブレイクポイントまで実行を再開します。 またL181のところにとまりdayにカーソルをあてると5と表示されていると思います。
調べたい箇所にブレイクポイントを貼る
ソースの流れやエラーを調べたいときにこの機能を使います。 以前隔週や午後休みを実行したいとき、元のソースの流れを調べて自分のソースを追加してデバッグして間違えているところ直して…
という感じで行いました。