「デバッグ」タグアーカイブ

Google Chrome(グーグルクロム)でJavaScriptのデバッグ方法


JavaScriptの開発・デバッグにはChromeが最適

JavaScriptのデバッグを行う場合、Eclipseやサクラエディタでコードを書いて、実際にコードを動かしてデバッグをする場合、Google Chromeが最適です。

IEにも標準で開発ツールがありますが、Chromeの方がサクサク動くので良いです。

あと、序に言うとGoogle Chromeを「クローム」と呼んでいる人がいますが間違いです。正確には「クロム」です

このページではGoogle Chromeを使ったJavaScriptのデバッグテクニックを纏めていきます。

デスマの続く開発現場には、人員不足の為に開発スキルの低い初心者が偽装派遣で送られて来る事があります。

そんな時にベテランPGがいちいちコーディング方法やデバッグ方法を教えると時間のロスです。

このページではChromeを使ったデバッグ方法を自分で言うのもあれですが、かなり細かく解説したつもりです。

開発経験の浅い新人君でも、余程バカで無い限りこのページを読んでもらえれば、簡単にJavaScriptの開発・デバッグが出来る様になると思います。

Google ChromeでJavaScriptをデバッグをする際のポイント

覚えておくべきポイントなどまとめていきます。

WEBページ上で

右クリック > 検証(I) 

を行います。

するとJavaScriptの開発用の画面が開きます。

開発画面が起動したら

①Sourcesタブをクリックします。

すると右側にWEBページで使用されているJavascriptのソースファイルがタブ表示されます。

デバッグを行いたいファイルタブをクリックします。

②ソース(プログラム)の行番号です。

ここをクリックする事でブレークポイントを設定する事が出来ます。

ブレークポイントを外す場合には、もう一度クリックします。

デバッグで使用頻度の高いポイント

以下で紹介して行くデバッグ方法は、全て重要なので覚えておきましょう。

ツールバー上のデバッグアイコンをクリックしてもデバッグできなくは無いですが、効率が悪過ぎます。

このマークをクリックすると、設定済のブレークポイントを一時的に無効にしたり、有効にしたり切り替える事が出来ます。

Deactivate breakpoints 

ショートカット:Control + F8

です。

ステップオーバーボタンです。

Step over next function call 

ショートカット:F10

このステップオーバーというのは、デバッグ中に現在のカーソールを1行ずつ次に進めて行くのに使います。

Visual Studioでのデバッグに慣れてい人には、要らない説明かもしれませんが、初心者用に細かく解説しています。

そしてこれがステップアウトボタンです。

Step out of current function 

ショートカット:Shift + F11

ステップアウトという機能は、ブレークポイントを複数貼ってある状態で、カーソース行を次の行まで進める場合に使用します。

このボタンを押すと、カレント行から次のブレークポイントを貼っている場所までプログラムを一気に走らせる事が出来ます。

リズームボタンと呼ぶことにします。

Resume script execution 

ショートカット:F8

次のデバッグポイントまで結構な行数があったりする場合、ステップイン(F11)を押してチマチマ移動させるよりも、このリズーム機能を使うと効率が良いです。

これはステップインボタンです。

Step into next function call

ショートカット:F11

この機能は、デバッグ中に他の関数(ファンクション)を呼び出している部分で実行すると、その関数の中にデバッグ中のカーソールが移動します。

掘り下げてデバッグを行う場合に使用します。

デバッグ中に変数の上にマウスカーソールを当てると、その変数に格納されている値が吹き出しで表示されます。

ここでは、

var selected_year で定義した値が “2017” と吹き出し表示されていますね。

また、その他にも変数の値を確認する方法があります。

定義済の変数をダブルクリックで選択 >  右クリック > Add selected text to watches

とするとWatchダイアログに変数名とその変数に格納されている値が表示されます。

デバッグを進めていく中で変数の値の変遷をモニタリングしたい場合には、こちらの方法がおすすめです。

この様にして1行ずつそのタイミングにおける変数の値を確認していきます。

また、Control + G ボタンを押すと

Go to line xxx.

という入力項目が起動します。

最初から「:」が頭についていますが、それに続けて数字を入力しEnterを押すとその行にカーソールが自動で移動します。

ここでは、 864と入力してEnterを押して864行目に移動しました。

行数のソースファイルをデバッグする際には大変約に立ちます。覚えておきましょう。

 

 

 


cakePHPの基本設定


cakePHPの特にバージョン2以降について、必ず設定が必要な項目等に絞ってメモ書きをしています。本サイトの記事をご覧になり試した結果引き起こされた不具合には一切責任は負いませんので、全てご自身の責任においてお試しください。ノウハウツリー管理人の完全なるメモサイトである事を十分ご理解ください。

 

apps/Config/routes.php

最初にサイトにアクセスが来た場合にどのコントローラ、ファンクションに誘導させるかの設定が出来ます。

29行目あたりに

Router::connect(‘/’, array(‘controller’ => ‘Takepons’, ‘action’ => ‘index’));

この様に記述すると http://test.com/ でアクセスされると最初に

apps/Controller/TakePonsControllerの中のindexファンクションが呼び出されるという設定になります。

 

apps/Config/database.php

 

アプリケーションが使用するデータベースの設定を行います。使用するレンタルサーバのDB設定に合わせましょう。

public $default = array(
‘datasource’ => ‘Database/Mysql’,
‘persistent’ => false,
‘host’ => ‘XXX’,
‘login’ => ‘XXX’,
‘password’ => ‘XXX’,
‘database’ => ‘test-db’,
‘prefix’ => ”,
‘encoding’ => ‘utf8’,
);

 

apps/Config/bootstrap.php

bootstrap.phpの28行目あたりに

Configure::load(“hogehoge”);

と記述すると、apps/Config/hogehoge.php の中で定義した定数を読み込む事が出来ます。

 

cakePHPのバージョンを確認する。

Configure::version();

 

デバッグ情報の出力の有無を設定する。

本番環境ではセキュリティ維持の為にもデバッグ情報は一切出さない様に 0 を設定しましょう。

Config/core.php

エラーメッセージを一切出さない。
Configure::write(‘debug’, 0);

エラーメッセージを表示するがSQL文は出力しない。
Configure::write(‘debug’, 1);

フルでデバッグメッセージを表示してSQL文も出力する。
Configure::write(‘debug’, 2);

利用中のcakeのバージョンを表示する。
echo Configure::version();

 

 


Google Crome を使ってJavaScriptをデバッグするには?


Google Cromeに標準で備わっているJavaScriptデバッガーを使う時の

効率的なショートかっととかのまとめです。

 

一応、Google Cromeの中にある以下のボタンを押す事によりステップオーバー等を行うことも可能ですが、ショートカットコマンドを使った方が効率が良いです。

crome_js

以下にも記していますが、F10のステップオーバーを行う場合には次のアーチ状のアイコンをクリックします。

ステップオーバーするには?

F10を押します。これはVisual Studioと同じデバッグコードです。

crome_f10

 

では、実際によく使うショートカットコマンドを紹介します。

 

ステップオーバーする

F10

ステップインする

F11

JavaScriptのデバッグ実行を有効・無効設定を行う

残念ながらこのショートカットコマンドは、Cromeに用意されていないので以下のアイコンを直接クリックして有効・無効を切り替えます。

crome_stop

 

 

実行中のスコープ内の全変数の値を確認する

Cromeのデバッガを起動すると Scope Variables という部分が表示されるのでそれをクリックします。すると現在デバッグ中のファンクションの中に含まれている全変数の値を確認する事が出来ます。いちいち変数名を選択してAdd Watchなどする必要が無く大変便利な機能です。

crome_scope