コンソールにメッセージを出力する
■コンソールとは？
ブラウザには、コンソールと呼ばれる、入出力ウィンドウが実装されています。
コンソールに文字列を出力して、動作確認やデバッグに活用することができます。
コンソールの使い方については、こちらで解説しています。
■コンソールオブジェクトを取得する
コンソールオブジェクトを取得するには、window.console プロパティを使用します。
Internet Explorer の場合、「開発者ツール」を起動しておく必要があります。
「開発者ツール」を起動していない場合、コンソールオブジェクトは取得できません。
コンソールオブジェクトを取得する
// コンソールオブジェクトを取得
var console_obj = window.console;
// 出力テスト
console.log(console_obj);
■コンソールのメソッド一覧（一部抜粋）
コンソールのメソッドの一覧です。
すべてのブラウザで利用できるとは限りません。
| メソッド名 | 説明 |
| log() | コンソールに「ログメッセージ」を出力します。 |
| info() | コンソールに「情報メッセージ」を出力します。 |
| warn() | コンソールに「警告メッセージ」を出力します。 |
| error() | コンソールに「エラーメッセージ」を出力します。 |
| dir() | コンソールに「オブジェクト」を出力します。プロパティ名と中身の値をまとめて確認できます。 |
| dirxml() | コンソールに「DOM オブジェクト」を出力します。DOM ツリーの構造をまとめて確認できます。 |
| count() | コンソールに「デバッグメッセージ」と、「累計実行回数」を出力します。 |
| assert() | 診断結果が偽の場合、コンソールに「エラーメッセージ」を出力します。 |
| trace() | コンソールに「現在の関数スタックの状態」を出力します。 |
| clear() | コンソール内をクリアします。 |
| メソッド名 | 説明 |
| time() | タイマー測定を開始します。 |
| timeEnd() | タイマー測定を終了します。 |
| profile() | プロファイルを開始します。 |
| profileEnd() | プロファイルを終了します。 |
| group() | グループ表示を開始します。（展開された状態） |
| groupCollapsed() | グループ表示を開始します。（折り畳まれた状態） |
| groupEnd() | グループ表示を終了します。 |
■コンソールにログメッセージを出力する
コンソールにログメッセージを出力するには、console.log() メソッドを使用します。
出力結果は、「ログ」に分類されます。
Internet Explorer 7 以前では、利用できません。
console.log( 出力 , ... ) :Void
| 第01引数 | * | コンソールに出力したいデータを指定。 |
| 可変引数(略可) | * | コンソールに出力したいデータを指定。 |
| 戻り値 | Void | なし |
■可変引数 (出力したいデータ)
可変引数を利用すると、複数のデータをまとめて出力することができます。
どのように出力されるかは、ブラウザにより異なります。
■使用例
コンソールにログメッセージを出力する
// 出力テスト
console.log("表示テスト");
複数のデータをまとめてログメッセージとして出力する
var variable_bool = false;
var variable_number = 123;
var variable_string = "あいうえお";
var variable_array = [0,1,2];
var variable_object = {a:0,b:1,c:2};
// 出力テスト
console.log(variable_bool , variable_number , variable_string , variable_array , variable_object);
■書式付き出力について
一部のブラウザでは、変換指定子に対応しています。
変換指定子を使ってログメッセージを出力する
// 文字列出力
var year = "千九百九十";
var month = "十一";
console.log("年:%s 月:%s" , year , month);
// 整数出力
var year = 2000;
var month = 3;
var day = 24;
console.log("日付:%d/%d/%d" , year , month , day);
// 実数出力
var pi = 3.141592653589793;
console.log("円周率:%f" , pi);
■コンソールに情報メッセージを出力する
コンソールに情報メッセージを出力するには、console.info() メソッドを使用します。
出力結果は、「情報」に分類されます。
Internet Explorer 7 以前では、利用できません。
console.info( 出力 , ... ) :Void
| 第01引数 | * | コンソールに出力したいデータを指定。 |
| 可変引数(略可) | * | コンソールに出力したいデータを指定。 |
| 戻り値 | Void | なし |
■可変引数 (出力したいデータ)
可変引数を利用すると、複数のデータをまとめて出力することができます。
どのように出力されるかは、ブラウザにより異なります。
■使用例
コンソールに情報メッセージを出力する
// 出力テスト
console.info("表示テスト");
複数のデータをまとめて情報メッセージとして出力する
var variable_bool = false;
var variable_number = 123;
var variable_string = "あいうえお";
var variable_array = [0,1,2];
var variable_object = {a:0,b:1,c:2};
// 出力テスト
console.info(variable_bool , variable_number , variable_string , variable_array , variable_object);
■コンソールに警告メッセージを出力する
コンソールに警告メッセージを出力するには、console.warn() メソッドを使用します。
出力結果は、「警告」に分類されます。
Internet Explorer 7 以前では、利用できません。
console.warn( 出力 , ... ) :Void
| 第01引数 | * | コンソールに出力したいデータを指定。 |
| 可変引数(略可) | * | コンソールに出力したいデータを指定。 |
| 戻り値 | Void | なし |
■可変引数 (出力したいデータ)
可変引数を利用すると、複数のデータをまとめて出力することができます。
どのように出力されるかは、ブラウザにより異なります。
■使用例
コンソールに警告メッセージを出力する
// 出力テスト
console.warn("表示テスト");
複数のデータをまとめて警告メッセージとして出力する
var variable_bool = false;
var variable_number = 123;
var variable_string = "あいうえお";
var variable_array = [0,1,2];
var variable_object = {a:0,b:1,c:2};
// 出力テスト
console.warn(variable_bool , variable_number , variable_string , variable_array , variable_object);
■コンソールにエラーメッセージを出力する
コンソールにエラーメッセージを出力するには、console.error() メソッドを使用します。
出力結果は、「エラー」に分類されます。
Internet Explorer 7 以前では、利用できません。
console.error( 出力 , ... ) :Void
| 第01引数 | * | コンソールに出力したいデータを指定。 |
| 可変引数(略可) | * | コンソールに出力したいデータを指定。 |
| 戻り値 | Void | なし |
■可変引数 (出力したいデータ)
可変引数を利用すると、複数のデータをまとめて出力することができます。
どのように出力されるかは、ブラウザにより異なります。
■使用例
コンソールにエラーメッセージを出力する
// 出力テスト
console.error("表示テスト");
複数のデータをまとめてエラーメッセージとして出力する
var variable_bool = false;
var variable_number = 123;
var variable_string = "あいうえお";
var variable_array = [0,1,2];
var variable_object = {a:0,b:1,c:2};
// 出力テスト
console.error(variable_bool , variable_number , variable_string , variable_array , variable_object);
■コンソールにオブジェクトを出力する
コンソールにオブジェクトを出力するには、console.dir() メソッドを使用します。
プロパティ名と、中身の値を、まとめて確認することができます。
Internet Explorer 8 以前では、利用できません。
console.dir( オブジェクト ) :Void
| 第01引数 | Object | 出力したいオブジェクトを指定。 |
| 戻り値 | Void | なし |
■使用例
コンソールにオブジェクトを出力する
// オブジェクトを作成
var obj = {
aaa:true,
bbb:123,
ccc:"abc"
};
// コンソールにオブジェクトを出力する
console.dir(obj);
■コンソールに DOM オブジェクトを出力する
コンソールに DOM オブジェクトを出力するには、console.dirxml() メソッドを使用します。
DOM ツリーの構造をまとめて確認することができます。
一部のブラウザでのみ動作します。
console.dirxml( DOM オブジェクト ) :Void
| 第01引数 | Node | 出力したい DOM オブジェクトを指定。 |
| 戻り値 | Void | なし |
■使用例
コンソールにオブジェクトを出力する
<html>
<body>
<div>
<span>あいうえお</span>
</div>
<script type="text/javascript">
<!--
// BODY エレメントを取得
var element = document.body;
// dirxml メソッドが利用可能
if(console.dirxml){
// コンソールに DOM オブジェクトを出力する
console.dirxml(element);
}
//-->
</script>
</body>
</html>
■コンソールにデバッグメッセージと、累計実行回数を出力する
コンソールにデバッグメッセージを出力するには、console.count() メソッドを使用します。
同時に、実行した累計回数も出力されます。
一部のブラウザでのみ動作します。
console.count( "出力" ) :Void
| 第01引数(略可) | String | コンソールに出力したいメッセージを指定。 |
| 戻り値 | Void | なし |
■使用例
関数の累計実行回数を出力する
// ------------------------------------------------------------
// 関数Ａを定義
// ------------------------------------------------------------
function FuncA(){
// count メソッドが利用可能
if(console.count){
// コンソールにデバッグメッセージと、実行累計回数を出力する
console.count("関数Ａを実行した！！");
}
}
// ------------------------------------------------------------
// 関数Ａを実行
// ------------------------------------------------------------
FuncA();
FuncA();
FuncA();
■診断結果が偽の場合、コンソールにエラーメッセージを出力する
診断して、コンソールにエラーメッセージを出力するには、console.assert() メソッドを使用します。
診断結果が偽の場合のみ、コンソールに出力されます。
Internet Explorer 7 以前では、利用できません。
console.assert( 診断？ , 出力 , ... ) :Void
| 第01引数 | Boolean | 比較したい任意の式などを指定。 |
| 可変引数(略可) | * | コンソールに出力したいデータを指定。 |
| 戻り値 | Void | なし |
■使用例
任意のエレメントが見つからない場合、コンソールにエラーメッセージを出力する
// id 属性が "aaa" であるエレメントを取得する
var element = document.getElementById("aaa");
// 診断結果が偽の場合、コンソールにエラーメッセージを出力する
console.assert(element , "致命的エラー！！エレメントが見つかりません！！");
■コンソールに現在の関数スタックの状態を出力する
コンソールに現在の関数スタックの状態を出力するには、console.trace() メソッドを使用します。
一部のブラウザでのみ動作します。
■使用例
コンソールに現在の関数スタックの状態を出力する
// ------------------------------------------------------------
// 関数Ａを定義
// ------------------------------------------------------------
function FuncA(){
// ------------------------------------------------------------
// 関数Ｂ定義
// ------------------------------------------------------------
function FuncB(){
// trace メソッドが利用可能
if(console.trace){
// コンソールに現在の関数スタックの状態を出力する
console.trace();
}
}
// ------------------------------------------------------------
// 関数Ｂを実行
// ------------------------------------------------------------
FuncB();
}
// ------------------------------------------------------------
// 関数Ａを実行
// ------------------------------------------------------------
FuncA();
■コンソール内をクリアする
コンソール内をクリアするには、console.clear() メソッドを使用します。
一部のブラウザでのみ動作します。
■使用例
コンソール内をクリアする
// 出力テスト
console.log("あいうえお");
console.log("かきくけこ");
console.log("さしすせそ");
// clear メソッドが利用可能
if(console.clear){
// コンソール内をクリア
console.clear();
}
■タイマー測定について
タイマー測定を開始するには、console.time() メソッドを使用します。
タイマー測定を終了するには、console.timeEnd() メソッドを使用します。
このメソッドを呼び出した時点で、コンソールに経過時間が出力されます。
引数に、ユニーク（唯一）な名称となる識別名を指定します。
複数のタイマー測定を、同時に実行する事もできます。
一部のブラウザでのみ動作します。
かわりに、高分解能タイマーを使って調べることもできます。
console.time( "識別名" ) :Void
| 第01引数 | String | ユニーク（唯一）な名称となる識別名を指定。 |
| 戻り値 | Void | なし |
console.timeEnd( "識別名" ) :Void
| 第01引数 | String | 終了したいタイマーテストの識別名を指定。 |
| 戻り値 | Void | なし |
■使用例
タイマー測定を行い、結果をコンソールに出力する
// time メソッドが利用可能
if(console.time){
// タイマー測定を開始する
console.time("測定テスト");
// --- 測定したい任意のスクリプトを実行する ---
var i;
var a = [];
for(i=0;i<1000000;i++){
a[i] = i;
}
// --- 測定したい任意のスクリプトを実行する ---
// タイマー測定を終了する
console.timeEnd("測定テスト");
}
■プロファイルについて
プロファイルを開始するには、console.profile() メソッドを使用します。
プロファイルを終了するには、console.profileEnd() メソッドを使用します。
このメソッドを呼び出した時点で、コンソールに結果が出力されます。
ブラウザによっては、複数のプロファイルを、同時に実行する事はできません。
一部のブラウザでのみ動作します。
console.profile( "識別名" ) :Void
| 第01引数 | String | 好きな識別名を指定。 |
| 戻り値 | Void | なし |
■使用例
プロファイルを開始し、エスケープキーが押されたら終了する
// profile メソッドが利用可能
if(console.profile){
// プロファイルを開始する
console.profile("Profile Test !!");
// ------------------------------------------------------------
// キーボードを押したときに実行されるイベント
// ------------------------------------------------------------
document.onkeydown = function (e){
if(!e) e = window.event; // レガシー
// エスケープキーが押された
if(e.keyCode == 27){
// プロファイルを終了する
console.profileEnd();
}
};
}
■グループ表示について
展開された状態で、グループ表示を開始するには、console.group() メソッドを使用します。
折り畳まれた状態で、グループ表示を開始するには、console.groupCollapsed() メソッドを使用します。
グループ表示を終了するには、console.groupEnd() メソッドを使用します。
グループ表示中に、別のグループ表示を開始すると、ネスト（入れ子）表示となります。
一部のブラウザでのみ動作します。
console.group( "識別名" ) :Void
| 第01引数 | String | 好きな識別名を指定。 |
| 戻り値 | Void | なし |
console.groupCollapsed( "識別名" ) :Void
| 第01引数 | String | 好きな識別名を指定。 |
| 戻り値 | Void | なし |
■使用例
グループ表示を使って、コンソールにメッセージを出力する
// group メソッドが利用可能
if(console.group){
// グループ表示を開始する（展開された状態）
console.group("グループ１");
console.log("出力テスト１");
console.log("出力テスト２");
console.log("出力テスト３");
// グループ表示を終了する
console.groupEnd();
}
ネスト（入れ子）構造となるグループ表示を使って、コンソールにメッセージを出力する
// group メソッドが利用可能
if(console.group){
console.log("出力テスト１");
// グループ表示を開始する（展開された状態）
console.group("グループ１");
console.log("出力テスト２");
// グループ表示を開始する（展開された状態）
console.group("グループ２");
console.log("出力テスト３");
console.log("出力テスト４");
// グループ表示を終了する
console.groupEnd();
console.log("出力テスト５");
// グループ表示を開始する（折り畳まれた状態）
console.groupCollapsed("グループ３");
console.log("出力テスト６");
console.log("出力テスト７");
// グループ表示を終了する
console.groupEnd();
console.log("出力テスト８");
// グループ表示を終了する
console.groupEnd();
console.log("出力テスト９");
}
各ブラウザのコンソールを起動する
■Internet Explorer 10 の場合
Internet Explorer 8 以降から、「開発者ツール」という機能が利用できます。
Internet Explorer にて、コンソールの API を使用する場合、「開発者ツール」を起動しておく必要があります。
■コンソールを起動する
メニューから、「F12 開発者ツール」を選択します。
「F12」キー を押しても起動します。
タブから、「コンソール」を選択します。
■Firefox 20 の場合
Firefox 4 以降から、「Web コンソール」という機能が利用できます。
■コンソールを起動する
メニューから、「Web 開発」→ 「Web コンソール」を選択します。
「Ctrl + Shift + K」キー を押しても起動します。
「Web 開発ツール」の、「Web コンソール」を選択します。
■表示するメッセージの種類を絞る
「ロギング」ボタンの、右端をクリックしてプルダウンメニューを表示します。
「エラー」「警告」「メッセージ」「ログ」をクリックすると、可視表示の有無を変更することができます。
■Opera(Presto 版) の場合
Opera 9.5 以降から、「Opera Dragonfly」という機能が利用できます。
■コンソールを起動する
メニューバーが表示されていない場合
メニューから「ページ」→「開発者用ツール」→「Opera Dragonfly」を選択します。
メニューバーが表示されている場合
メニューから「ツール」→「詳細ツール」→「Opera Dragonfly」を選択します。
「Ctrl + Shift + I」キー を押しても起動します。
「Opera Dragonfly」の、「コンソール」を選択します。
■Google Chrome 26 の場合
■コンソールを起動する
メニューから、「ツール」→ 「JavaScript コンソール」を選択します。
「Ctrl + Shift + J」キー を押しても起動します。
■表示するメッセージの種類を絞る
下部の、メニューに注目します。
「All」「Errors」「Warnings」「Logs」「Debug」をクリックすると、表示されるメッセージの種類を絞ることができます。
■Safari 5 の場合
■コンソールを起動する
メニューから、「開発」→ 「エラー コンソール」を選択します。
メニューに「開発」が表示されていない場合、「設定」の「詳細」から、「メニューバーに "開発" を表示」を有効にする必要があります。
「Ctrl + Alt + C」キー を押しても起動します。
■表示するメッセージの種類を絞る
「すべて」「エラー」「警告」「ログ」をクリックすると、表示されるメッセージの種類を絞ることができます。
データの型を調べる
■データの型を調べる
データの型を調べるには、typeof 演算子を使用します。
以下の文字列が得られます。
| 型 | 得られる文字列 |
| 未定義 (undefined) | "undefined" |
| ヌル値 (null) | "object" |
| 真偽値 (Boolean) | "boolean" |
| 数値 (Number) | "number" |
| 文字列 (String) | "string" |
| 関数 (Function) | "function" |
| シンボル (Symbol) | "symbol" |
| その他のオブジェクト | "object" |
■オブジェクトの種類の特定について
Boolean、Number、String、Function、Symbol 型は、判別が可能です。
Array、Object、RegExp などのオブジェクトは、すべて "object" 扱いとなり、判別出来ません。
オブジェクトの種類を特定するには、instanceof 演算子を使用するなどの方法があります。
■ヌル値 (null) について
null 値を調べると、"object" が得られます。
一応、ECMA-262 edition 5 の仕様書通りの動作となります。バグが一般化したようです。
"object" が得られたからといって、必ずしもオブジェクトであるとは限らないので注意してください。
null 値の判定をしたい場合、さらに、真偽判定の結果が偽であるか確認します。
他の ECMAScript 環境との互換性を考慮する場合は、注意してください。
例えば、ActionScript2.0 では、"null" が得られます。
■記述例
typeof の記述例
// ------------------------------------------------------------
// シンプルな構文
// ------------------------------------------------------------
var type = typeof 123;
var type = typeof "abc";
// ------------------------------------------------------------
// 関数のような構文
// ------------------------------------------------------------
var type = typeof(123);
var type = typeof("abc");
各データから得られる文字列を確認する
// ------------------------------------------------------------
// 未定義値
// ------------------------------------------------------------
var variable = undefined;
var type = typeof(variable);
console.log("未定義値:" + type); // "undefined"
// ------------------------------------------------------------
// ヌル値
// ------------------------------------------------------------
var variable = null;
var type = typeof(variable);
console.log("ヌル値:" + type); // "object"
// ------------------------------------------------------------
// 真偽値
// ------------------------------------------------------------
var variable = true;
var type = typeof(variable);
console.log("真偽値:" + type); // "boolean"
// ------------------------------------------------------------
// 数値
// ------------------------------------------------------------
var variable = 123;
var type = typeof(variable);
console.log("数値:" + type); // "number"
// ------------------------------------------------------------
// 文字列
// ------------------------------------------------------------
var variable = "abc";
var type = typeof(variable);
console.log("文字列:" + type); // "string"
// ------------------------------------------------------------
// 関数
// ------------------------------------------------------------
var variable = function (){};
var type = typeof(variable);
console.log("関数:" + type); // "function"
// ------------------------------------------------------------
// 配列
// ------------------------------------------------------------
var variable = new Array();
var type = typeof(variable);
console.log("Array:" + type); // "object"
// ------------------------------------------------------------
// オブジェクト
// ------------------------------------------------------------
var variable = new Object();
var type = typeof(variable);
console.log("Object:" + type); // "object"
// ------------------------------------------------------------
// 正規表現
// ------------------------------------------------------------
var variable = new RegExp("");
var type = typeof(variable);
console.log("RegExp:" + type); // "object"
■オブジェクトの種類を特定する（instanceof 演算子）
任意のオブジェクトが、指定したコンストラクタ関数を使ってインスタンス化されたものであるかを調べるには、instanceof 演算子を使用します。
指定したコンストラクタ関数で、実体化されていれば、true が得られます。
配列オブジェクトであるか調べる
// 配列を作成
var ary = new Array();
// 配列オブジェクトであるか調べる（Array コンストラクタを使って、実体化されたか調べる）
var result = ary instanceof Array;
// 出力テスト
console.log(result); // true
Object オブジェクトであるか調べる
// Object オブジェクトを作成
var obj = new Object();
// Object オブジェクトであるか調べる（Object コンストラクタを使って、実体化されたか調べる）
var result = obj instanceof Object;
// 出力テスト
console.log(result); // true
正規表現オブジェクトであるか調べる
// 正規表現オブジェクトを作成
var re = new RegExp();
// 正規表現オブジェクトであるか調べる（RegExp コンストラクタを使って、実体化されたか調べる）
var result = re instanceof RegExp;
// 出力テスト
console.log(result); // true
指定したコンストラクタ関数を使って実体化されたオブジェクトが、プロトタイプチェーン内に存在する場合も true が得られます。
プロトタイプチェーン状態にあるオブジェクトの instanceof 演算子の結果を調べる
// ------------------------------------------------------------
// プロトタイプチェーン状態にあるコンストラクタ関数を作成
// ------------------------------------------------------------
// コンストラクタ関数Ａ
function FuncA(){
}
// コンストラクタ関数Ｂ
function FuncB(){
}
// コンストラクタ関数Ｃ
function FuncC(){
}
// 関数Ｂのプロトタイプに、インスタンスＡをセット
FuncB.prototype = new FuncA();
// 関数Ｃのプロトタイプに、インスタンスＢをセット
FuncC.prototype = new FuncB();
// ------------------------------------------------------------
// 実体化テスト
// ------------------------------------------------------------
// インスタンスＡを作成（「Object」 → 「FuncA」）
var a = new FuncA();
// 出力テスト
console.log(a instanceof Object); // true
console.log(a instanceof FuncA); // true
console.log(a instanceof FuncB); // false
console.log(a instanceof FuncC); // false
// インスタンスＢを作成（「Object」 → 「FuncA」 → 「FuncB」）
var b = new FuncB();
// 出力テスト
console.log(b instanceof Object); // true
console.log(b instanceof FuncA); // true
console.log(b instanceof FuncB); // true
console.log(b instanceof FuncC); // false
// インスタンスＣを作成（「Object」 → 「FuncA」 → 「FuncB」 → 「FuncC」）
var c = new FuncC();
// 出力テスト
console.log(c instanceof Object); // true
console.log(c instanceof FuncA); // true
console.log(c instanceof FuncB); // true
console.log(c instanceof FuncC); // true
■オブジェクトの種類を特定する
まず、データ型がオブジェクトであるか調べます。
データの型を調べるには、typeof 演算子を使用します。
"object" 値が得られ、さらに真偽判定の結果が真であれば、オブジェクトの一種であることがわかります。
オブジェクトから、コンストラクタ関数を取得するには、constructor プロパティを使用します。
このプロパティの中身と、特定のコンストラクタ関数が一致するか比較します。
配列オブジェクトであるか調べる
// 配列オブジェクトを作成
var variable = new Array();
// オブジェクトの一種であるか調べる
if((variable) && (typeof(variable) == "object")){
// コンストラクタ関数と、Array が一致するか調べる
if(variable.constructor == Array){
console.log("配列オブジェクトである");
}
}
Object オブジェクトであるか調べる
// Object オブジェクトを作成
var variable = new Object();
// オブジェクトの一種であるか調べる
if((variable) && (typeof(variable) == "object")){
// コンストラクタ関数と、Object が一致するか調べる
if(variable.constructor == Object){
console.log("Object オブジェクトである");
}
}
正規表現オブジェクトであるか調べる
// 正規表現オブジェクトを作成
var variable = new RegExp("");
// オブジェクトの一種であるか調べる
if((variable) && (typeof(variable) == "object")){
// コンストラクタ関数と、RegExp が一致するか調べる
if(variable.constructor == RegExp){
console.log("正規表現オブジェクトである");
}
}
ブレークポイントを指定する
■ブレークポイントを指定する
ブレークポイントを指定するには、debugger ステートを使用します。
デバッガを起動していない場合、効果はありません。
デバッガを起動している場合、JavaScript の実行が一時停止します。
大抵の場合は、デバッガ付属のブレークポイント機能を使った方が便利でしょう。
debugger ステートを使って実行を一時停止する
var variable;
debugger;
variable = 123;
debugger;
variable = "abc";
debugger;
■ debugger ステートを使用すると便利な場合
動的に評価され実行されるソースコードの内部で利用すると便利です。
Eval sources と呼ばれます。
eval() 関数や、Function コンストラクタなどがあります。
また、イベント属性に記述するコード内でも利用できます。
eval() 内部で一時停止を発生させる
// ------------------------------------------------------------
// ソースコードのテキストを用意する
// ------------------------------------------------------------
var js_text = "" +
"var variable;\n" +
"debugger;\n" +
"variable = 123;\n" +
"debugger;\n";
// 出力テスト
console.log(js_text);
// ------------------------------------------------------------
// ソースコードを評価して実行する
// ------------------------------------------------------------
eval(js_text);
eval() を使って生成した関数内部で一時停止を発生させる
// ------------------------------------------------------------
// ソースコードのテキストを用意する
// ------------------------------------------------------------
var js_text = "[" +
function (){
var variable;
debugger;
variable = 123;
debugger;
}.toString() + "]";
// 出力テスト
console.log(js_text);
// ------------------------------------------------------------
// ソースコードを評価して配列を生成する
// ------------------------------------------------------------
var func_list = eval(js_text);
// ------------------------------------------------------------
// 関数を実行する
// ------------------------------------------------------------
var func_obj = func_list[0];
func_obj();
Function コンストラクタを使って生成した関数内部で一時停止を発生させる
// ------------------------------------------------------------
// 関数オブジェクトを生成する
// ------------------------------------------------------------
var func_obj = new Function (
" var variable;\n" +
" debugger;\n" +
" variable = 123;\n" +
" debugger;"
);
// 出力テスト
console.log(func_obj.toString());
// ------------------------------------------------------------
// 関数を実行する
// ------------------------------------------------------------
func_obj();
onclick イベント属性に記述したコード内部で一時停止を発生させる
<html>
<body>
<div onclick='debugger;' style="width:400px; height:300px; background:#ccf;" >
</div>
</body>
</html>