js デバッグ シリーズ最初の console_javascript スキルの紹介

最初に書きました: 実は、これは実際には難しいことではないので、以前から書こうかどうか考えていたのですが、なぜこれほど多くの人が尋ねるのは、コンソールの使用方法ではなく、その方法なのですか?それを制御するためにステーションは何ができるでしょうか? 彼らは console.log のようなものがあることも知っていますが、なぜ情報を出力するためにアラートの代わりにそのような長い文字列が使用されるのかは知りません。彼らの目には、警戒心があれば十分です。ちょっとした不満を述べたことは認めますが、このシリーズではデバッグの基本的な知識を紹介するだけであり、詳しくは JS の知識と組み合わせる必要があるため、あまり詳しくは説明しません。 js の特定のレベルに達したら、バグのデバッグやプラグインのクラックなどを教えますが、あなたは私が何をしているのかわかりません。私の目的は、コンソールについて説明し、デバッグを開始できるようにすることだけです。その後は、自分で道を歩む必要があります。

もちろん、英雄の皆さん、通り過ぎてください、あるいは文句を言うだけでも構いません。 。

js デバッグ シリーズ ディレクトリ:

実際、フロントエンドでもバックエンドでも Web 開発をしている人なら誰でも知っていることですが、HTML の表示と CSS の変更だけで、コンソールをまったく使用しない人も少なくありません。
もしかしたら、始めたばかりの人はこの存在を知らないかもしれません。 。
これに関する情報はオンラインにたくさんありますが、デバッグについては説明されておらず、基本的な使用方法が紹介されているだけです。 。

Chrome Firefox IE (バージョン 8 以降) であっても、360 Rapid Browser Sogou Browser などであっても、F12 を押すだけでコンソールが開きます。
私はクロムが好きなので、この記事では例としてクロムを使用します。 。大根とキャベツの好みは人それぞれです。 。
ps: ff 世界は以前は firebug によって支配されていましたが、今ではネイティブのものも非常に優れています。

ここで、F12 を押してコンソールを開き、「コンソール」項目をクリックします。

私のアバターと数行のテキストが表示されますが、以下に数行ありますが、ここでは無視し、後で説明します。
実際、この F12 の最も正確な名前は開発者ツールであり、コンソールはコンソールです。
PS: 基本的なチュートリアルとして、コンソールとソースのデバッグのみを紹介します。他の機能については自分で学ぶことができます。 。

「コンソールのクリア」メニューを右クリックするか、「clear()」と入力して Enter キーを押し、コンソールのコンテンツをクリアします。
最初のステップとして、console.log を使用して情報を出力しましょう。
console.log("hehe..") と console.log("hehe..", "haha..") をそれぞれ入力して Enter を押すと、コンソールに出力結果が表示されます。

実際には情報を出力するだけなので非常にシンプルで、これをデバッグ用のalertとdocument.writeの置き換えに使用すると、作業が非常に簡単になります。

たとえば、コードのループをデバッグしているときに、配列内に数十、場合によっては数百の要素がある場合、アラートをクリックすると気が狂ってしまいます。
document.write も不可能ではありませんが、オブジェクト出力の場合は [object Object] などしか表示されません。
これは多くの初心者が直面する本当の問題です。

alert document.write の代わりに console.log を使用してオブジェクト情報を出力する場合、コンソールでオブジェクトを展開して特定の情報を表示できます。
例:

var arr = [{name: "尼玛", age: 22}, {name: "尼美", age: 20}];
for (var i=0; i<arr.length; i++) {
	console.log(arr[i]);
}

[オブジェクト オブジェクト]を表示せずに、オブジェクトの情報を直接確認できるので混乱します。

突然 console.log がすごいと感じましたか?
実際、これは彼の氷山の一角にすぎません。私は彼の利点のいくつかを示すために最善を尽くします。
前の手順を続けて、「arr」と直接入力して Enter キーを押します。

さらに興味深いと思いませんか? これで、「オブジェクト」を直接クリックして、この配列内のオブジェクトを展開して表示できるようになり、ループ出力も省略されます。
これがコンソールの魅力であり、最も基本的な機能にすぎません。

まず、コンソール オブジェクトでどのようなメソッドを使用できるかを理解しましょう。
「console」と入力し、Enter キーを押してこのオブジェクトを展開します (
)
いくつかの暗い部分と明るい部分が表示されます。暗い部分は、デフォルトの属性またはメソッドを表します。これについては、後で説明します。機会。
実際、一般的に使用されるのは log dir だけです。その他はほとんど使用されず、高度なデバッグでのみ使用されます。
グループやテーブルなどの補助プロパティは、好みに応じて使用することも、使用しないこともできます。あまり使いたくないんです。

段階的に見てみましょう。とにかく、デバッグのほとんどはログ ディレクトリに依存します。
PS: 本当は公式ドキュメントをあげるべきなのですが、最近Googleでは開けなくなってしまったので、Baiduで各方法の機能を確認することができます。

中国語版を見つけました。これは非常に優れています。最初に「コンソール オブジェクト」を読んでください。

授業後に演習を行ってみましょう: (まず Baidu を開いてから、コンソールを開きます)
1 コンソールで ID kw1 の要素情報を表示します
2 次に、console.dir メソッドを使用して、kw1 要素

の情報を表示します。