JavaScriptのコンソールとは何ですか

コンソールは最新のブラウザに組み込まれたデバッガであり、熟練した Web 開発者は、メッセージを出力したり、コード内の問題をデバッグしたりするために console.log() をよく使用します。コンソールは主に、Web ページの読み込みプロセス中に生成されるさまざまな情報を表示するために使用されます。インターフェースをテストするときに、バグの問題が発生した場合、通常はこの列に表示され、デバッグ ログ情報や異常エラー情報を確認してから、フロントエンドを開発する エンジニアは、特定の問題に基づいてデバッグし、問題を解決します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

コンソールは、最新のブラウザーに組み込まれているデバッガーです。熟練した Web 開発者は、console.log() を頻繁に使用してメッセージを出力し、コード内の問題をデバッグします。実はこのツールには便利な機能やテクニックがたくさんあり、上手に活用することでWeb開発やWebサイトの最適化の効率を大幅に向上させることができます。

Web コンソールには、次の Web ブラウザのいずれかを実行しているリモート コンピュータ システムから簡単にアクセスできます:

• Google Chrome

• Firefox

• Safari

• Microsoft Internet Explorer バージョン 11

• ## 。 。 。

開発者ツールのコンソールは、主に Web ページの読み込みプロセス中に生成されるさまざまな情報を表示するために使用されます。

WebページのJSコード内でconsole.log()関数を使用すると、関数が出力したログ情報がコンソールに表示されます。ログ情報は通常、開発およびデバッグ中に有効になり、正式にリリースされると、この機能は通常削除されます。

インターフェイスのテスト時にバグの問題が発生した場合、通常はこの列に表示されます。デバッグログ情報や異常エラー情報を確認し、フロントエンド開発エンジニアが具体的な問題に応じてデバッグ、問題解決を行います。

ブラウザを開き、F12 を押して開発者モードを開き、コンソール タブをクリックして、コマンドを入力します (補完はサポートされています):

console.log(console)

上のスクリーンショットに示されているように、コンソール オブジェクトには、最も一般的に使用される console.log() 関数の代わりに、使用できる多数のメソッドが用意されています。

コンソールの使用

1. 情報表示コマンド

コンソールに組み込まれていますobject には、情報を表示するための 5 つのメソッドが用意されています。最も単純な方法は console.log() で、alert() や document.write() の代わりに使用できます。たとえば、Web スクリプトで console.log("Hello World") を使用すると、ロード時にコンソールに次のコンテンツが自動的に表示されます。情報の性質上、 。コンソール オブジェクトには、一般情報 console.info()、デバッグ情報 console.debug()、警告プロンプト console.warn()、およびエラー プロンプト console.error() の 4 つの表示メソッドを持つこともできます。たとえば、次の 4 行を Web スクリプトに挿入します:

console.info("This is Info"); console.debug("This is Debug"); console.warn("This is Warn" ); console.error("This is Error"); ロードすると、コンソールに次の内容が表示されます:

ご覧のとおり、前面にさまざまなアイコンがあります。さまざまな性質の情報が含まれており、各情報の後ろにはハイパーリンクがあり、クリックすると Web ページのソース コードの対応する行にジャンプします。

2. プレースホルダー

コンソール オブジェクトの 5 つのメソッドはすべて、printf スタイルのプレースホルダーを使用できます。ただし、プレースホルダーの種類は比較的少なく、文字 (%s)、整数 (%d または %i)、浮動小数点数 (%f)、オブジェクト (%o) の 4 種類のみがサポートされています。例:

console.log("%d年%d月%d日",2012,12,21);console.log("圆周率是%f",3.1415926);

%o プレースホルダーを使用して、オブジェクトの内部状態を表示できます。たとえば、次のようなオブジェクトがあります:

var car = {};car.name = "宝马";car.color = "白色";然后，对它使用占位符%o：
console.log("%o",car);

3. グループ表示

情報が多すぎると、 console.group() と console.groupEnd() のメソッドを使用して、グループで表示されます。

console.group("The first Info"); 
console.log("The first Info first Line"); 
console.log("The first Info second Line"); 
console.groupEnd(); 
console.group("The second Info"); 
console.log("The second Info first Line"); 
console.log("The second Info second Line"); 
console.groupEnd();

グループ タイトルをクリックすると、グループ情報が折りたたまれたり展開されたりします。

4. console.dir()

console.dir() は、オブジェクトのすべてのプロパティとメソッドを表示できます。たとえば、セクション 2

の car オブジェクトに drive() メソッドを追加します。

car.drive = function(){ alert("The car is working.") };然后，显示该对象内容：
console.dir(car);

五、consol.dirxml()

consol.dirxml() 用来显示网页的某个节点（node）所包含的html/xml代码。比如，先获取一个表格节点，然后显示该节点包含的代码：

<table id="table" border="0">

	<tbody></tbody>
	<tr>
		<td>A</td>
		<td>B</td>
		<td>C</td>
	</tr>
</table>
<script>
	var table = document.getElementById("table");
	console.dirxml(table);
</script>

六、console.assert()

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应的信息，并且抛出一个异常。比如，下面两个判断的结果都为否：

var result = 0;
console.assert(result);
var year = 2017;
console.assert(year == 2016);

七、console.trace()

console.trace() 用来追踪函数的调用轨迹。比如，有一个加法函数：

function add(a,b){ return a+b;} 如果想知道这个函数是如何被调用的，在其中加入console.trace() 方法就可以了。

function add(a,b){ console.trace(); return a+b;}假定这个函数的调用如下：

var x = add3(1,1);
function add3(a,b){ return add2(a,b); }
function add2(a,b){ return add1(a,b); }
function add1(a,b){ return add(a,b); }

运行后，会显示add()的调用轨迹，从上到下依次为add()、add1()、add2()、add3()。

八、计时功能

console.time() 和 console.timeEnd()，用来显示代码的运行时间。

console.time("Timer1");
for(var i=0;i<1000;i++){
 for(var j=0;j<1000;j++){}
}
console.timeEnd("Timer1");

九、性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用方法是 console.profile()。

假定有一个函数Foo()，里面调用了另外两个函数funcA()和funcB()，其中funcA()调用10次，funcB()调用1次，

function Foo(){ 
for(var i=0;i<10;i++){ funcA(1000); } 
funcB(1000); 
} 
function funcA(count){
 for(var i=0;i<count;i++){} 
} 
function funcB(count){
 for(var i=0;i<count;i++){} 
}

然后，就可以分析Foo()的运行性能了。

【相关推荐：javascript视频教程、编程视频】

以上がJavaScriptのコンソールとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。