Chromeブラウザ開発ツール

開発者ツール
Chromeブラウザが持つ「開発者ツール」(Developer Tools)は、Web開発デバッグの利器です.開く方法は3つあります.
F 12またはControl+Shift+iを押します.
メニューから[ツール](Tools)/[開発者ツール](Developer Tools)を選択します.
ページ要素で右クリックメニューを開き、「Inspect Element」を選択します.
オンにすると、トップには次の8つのパネルカードがあります.
Elements:WebページをデバッグするためのHTMLソースとCSSコード.
Resources:コードファイル、フォントファイル、cssファイルなど、Webページにロードされたさまざまなリソースファイルと、ローカルキャッシュ、Cookie、Local Storageなど、ハードディスクに作成されたさまざまなコンテンツを表示します.
Network:WebページのHTTP通信状況を確認します.
Sources:JavaScriptコードをデバッグします.
Timeline:さまざまなWebページの動作が時間とともに変化する場合を表示します.
Profiles:CPUやコンテンツ消費など、Webページのパフォーマンスを確認します.
Audits:Webページの最適化のアドバイスを提供します.
Console:JavaScriptコマンドを実行します.
この8つのパネルはそれぞれ用途があり、以下ではコンソールパネルについて詳しく説明します.
コンソールオブジェクト
現在、各ブラウザのJavaScriptエンジンは、ブラウザのJavaScript制御ウィンドウを表すconsoleオブジェクトをオリジナルに提供しています.JavaScript言語の一部ではありませんが、事実上の基準となっています.Chromeブラウザのコンソールオブジェクトとは、開発者ツールのコンソールウィンドウのことです.
コンソールオブジェクトには主に2つの役割があります.
Webコードの実行時にエラーメッセージが表示されます.
Webコードとインタラクティブなコマンドラインインタフェースが用意されています.
コンソールオブジェクトのインタフェースには、開発者が呼び出すための多くの方法があります.
console.logメソッド
logメソッドはconsoleウィンドウに情報を表示するために使用されます.
パラメータが通常の文字列の場合、logメソッドは文字列の内容をconsoleウィンドウに表示します.

console.log("Hello World")
// Hello World

console.log("a","b","c")
// a b c

パラメータがフォーマット文字列(フォーマットプレースホルダを使用)の場合、logメソッドはプレースホルダを以降の内容に置き換え、consoleウィンドウに表示します.

console.log(" %s + %s = %s", 1, 1, 2)
// 1 + 1 = 2

上のコードの%sは文字列のプレースホルダを表し、他のプレースホルダは
%d,%i整数%f浮動小数点数%oオブジェクトのリンク%c CSS形式文字列logメソッドの2つのパラメータフォーマットは、組み合わせて使用できます.

console.log(" %s + %s ", 1, 1, "= 2")
// 1 + 1 = 2

その他の出力方法:debug,info,warn,error方法
logのほかに、consoleオブジェクトには4つの情報を出力する方法があります.
debug:logに等しい.
info:logに等しい.
warn:情報を出力するときは、一番前に黄色い三角を付けて警告します.
Error:情報を出力するとき、一番前に赤いフォークを付けて、エラーを表します.
この4つの方法の使い方はlogと全く同じです.

console.error("Error: %s (%i)", "Server is not responding",500)
// Error: Server is not responding (500)

console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
// Warning! Too few nodes (1)

console.assertメソッド
assertメソッドは、条件が真であるかどうかを検証するために使用されます.偽の場合は、事前に指定したエラーメッセージが表示されます.フォーマットは次のとおりです.

console.assert(    ，    )

使用方法は次のとおりです.

console.assert(list.childNodes.length < 500, "Node count is > 500");

timeとtimeEndメソッド
この2つの方法は計時に用いられ,1つの操作にかかる正確な時間を算出することができる.

console.time("Array initialize");

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};

console.timeEnd("Array initialize");

// Array initialize: 1914.481ms

timeメソッドはタイマ開始を表し、timeEndメソッドはタイマ終了を表す.パラメータはタイマーの名前です.timeEndメソッドを呼び出すと、consoleウィンドウに「タイマ名:所要時間」が表示されます.
グループ化方法:groupとgroupend
この2つの方法は、表示された情報をグループ化するために使用されます.大量の情報を出力する場合にのみ役立ち、マウスで折りたたみ/展開できる情報のセットに分けられます.

console.group("Authenticating user '%s'", user);
console.log("User authenticated");
console.groupEnd();

その他の方法
console.dir:オブジェクトの情報を出力し、1つのオブジェクトのすべてのプロパティを表示します.
console.clear:consoleウィンドウをクリアし、カーソルを最初の行に戻します.
console.trace:スタック内の現在実行されているコードの呼び出しパス.
モバイル開発
(本節はここに保留)
アナログ携帯ビューポート(viewport)
chromeブラウザの開発者ツールは、携帯電話の画面の表示効果をシミュレートするオプションを提供しています.
「設定」のOverridesパネルを開き、対応するUser AgentとDevice Metricsオプションを選択します.
User Agentは、現在のブラウザから携帯電話ブラウザのAgent文字列を発行し、Device Metricsは現在のブラウザのビューポートを携帯電話のビューポートサイズに変更します.この2つのオプションは独立して選択できますが、必ずしも同時に選択する必要はありません.
シミュレーションtouchイベント
PC側でJavaScriptのtouchイベントをシミュレートできます.
まず、chromeブラウザの開発者ツールを開き、「設定」のOverridesパネルを選択し、「Enable touch events」オプションにチェックを入れます.
すると、マウスがtouchstart、touchmove、touchendイベントをトリガーします.(この場合も、マウス自体のイベントは有効です.)
マルチタッチについては、この機能をサポートするデバイスがシミュレーションされる必要があります.具体的にはMulti-touch web developmentを参照してください.
アナログ緯度
chromeブラウザの開発者ツールでは、現在の緯度データをシミュレートすることもできます.「設定」の「Overrides」パネルを開き、「Override Geolocation」オプションを選択し、対応する経度と緯度のデータを入力します.
リモートエラー
(1) Chrome for Android
Androidデバイス上のChromeブラウザはUSBエラーをサポートしています.PC側はAndroid SDKとChromeブラウザをインストールし、usb線で携帯電話とPCを接続し、公式ドキュメントを参照する必要があります.
(2) Opera
Operaブラウザのエラー除去環境Dragonflyはリモートエラー除去(チュートリアル)をサポートします.
(3) Firefox for Android
公式文書を参照.
(4) Safari on iOS6
MacデスクトップPCのSafari 6ブラウザを使用して、リモートエラー(チュートリアル)を行うことができます.
Google Closure
(本節はここに保留)
Google Closureは、Googleが提供するJavaScriptソース処理ツールで、主に複数のJavaScriptスクリプトファイルを圧縮およびマージするために使用されます.
Google ClosureはJava言語を使用して開発されており、使用する前にJavaをインストールする必要があります.その後、公式サイトにダウンロードし、主にコンパイラ(compiler)を使用します.
まず、ヘルプを表示します.

java -jar /path/to/closure/compiler.jar --help

スクリプトコマンドの後ろにマージするスクリプトを直接付けると、マージが完了します.

java -jar /path/to/closure/compiler.jar *.js

--jsパラメータを使用すると、パラメータの前後順にファイルがマージされることを確認できます.

java -jar /path/to/closure/compiler.jar --js script1.js --js script2.js --js script3.js

ただし、このような実行結果は、マージされたファイルをすべて画面(標準出力)に出力するため、--js_を使用する必要があります.output_fileパラメータで、マージ後のファイル名を指定します.

java -jar /path/to/closure/compiler.jar --js script1.js --js script2.js --js script3.js --js_output_file scripts-compiled.js

Javascriptパフォーマンステスト
(本節はここに保留)
第一の方法
最も一般的なパフォーマンステストの方法は、同じ操作をn回繰り返し、各操作の平均時間を計算することです.

var totalTime,
    start = new Date,
    iterations = 6;

while (iterations--) {
  // Code snippet goes here
}

// totalTime → the number of milliseconds it took to execute
// the code snippet 6 times
totalTime = new Date - start;

上記のコードの問題は、コンピュータの性能が向上しつつあるため、6回だけ繰り返すと、0ミリ秒未満の結果、すなわち1ミリ秒未満でJavascriptエンジンが測定できない可能性が高いということです.
2つ目の方法
もう1つの考え方は、単位時間内に何回操作を完了したかをテストすることです.

var hz,
    period,
    startTime = new Date,
    runs = 0;

do {
  // Code snippet goes here
  runs++;
  totalTime = new Date - startTime;
} while (totalTime < 1000);

// convert ms to seconds
totalTime /= 1000;

// period → how long per operation
period = totalTime / runs;

// hz → the number of operations per second
hz = 1 / period;

// can be shortened to
// hz = (runs * 1000) / totalTime;

このアプローチの注意点は,テスト構造が外部環境の影響を大きく受け,正確な構造を得るために何度も繰り返さなければならないことである.