最初は、実際には、これまでこのことを書くかどうかを考えていました。なぜなら、それは難しいことではないからですが、なぜ多くの人が尋ねているのか、コンソールの使用方法を尋ねていないのに、コンソールが何ができるかはわかりません。また、コンソールやその他のものがあることも知っていますが、アラートの出力情報の代わりにそのような長い文字列を使用する理由を知りません。彼らの目には、アラートで十分です。わかりました、私は少し不平を言ったことを認めますが、このシリーズでデバッグの基本的な知識を導入するだけであり、詳細なことはJSの知識と組み合わされているため、それは深すぎません。同じレベルのJSに到達していない場合、バグ、いくつかのプラグインなどのデバッグ方法を教えても、私が何をしているのかわかりません。私の目的は、コンソールを知らせ、デバッグを始めることです。あなたは自分で先の道を歩かなければなりません。
もちろん、フロートしたり、文句を言ったりしてください。 。
JSデバッグシリーズディレクトリ:
実際、Web開発の人々は、それがフロントエンドであろうとバックエンドであろうと、これを知っていますが、多くの人はHTMLの視聴とCSSの変更にのみ焦点を当てており、コンソールをまったく使用していません。
たぶん、いくつかの初心者は、このことがあることを知らないでしょう。 。
オンラインでこのことに関する多くの情報がありますが、デバッグについては話すのではなく、使用方法を紹介しています。 。
Chrome Firefox IE(8以降)または360クイックブラウザーSogouブラウザーなどでは、F12を押してコンソールを開きます。
私たちの記事では、それを説明する例としてChromeを使用していますが、それは私がChromeが好きだからではありません。 。誰もが自分の好みを持っています。 。
PS:過去のFF、それはすべてFirebugでしたが、今ではネイティブです。
次に、F12をクリックしてコンソールを開き、コンソールアイテムをクリックします。
私のアバターといくつかのテキストを見ることができますが、まだいくつかの行があります。当面は無視し、後で説明します。
実際、F12の場合、最も正確な名前は開発者ツールであり、コンソールはコンソールです。
PS:基本的なチュートリアルとして、コンソールとソースのデバッグのみを紹介します。自分で他の機能を理解してください。 。
クリアコンソールメニューを右クリックするか、clear()を入力し、Enterを押してコンソールコンテンツをクリアします。
Console.logを使用して情報を出力するための最初のステップを見てみましょう。
console.log( "hehe ..")とconsole.log( "hehe .."、 "haha ..")を入力し、Enterを押してコンソールの出力結果を確認します。
実際、それは情報を出力するだけで、非常に簡単です。アラートとdocument.write.writeの代わりにそれを使用して、あなたの仕事は非常に簡単になります。
たとえば、ループコードのデバッグですが、配列には数十または数百の要素があります。あなたが警告するなら、あなたは夢中になります。
document.writeも悪くはありませんが、オブジェクト出力の場合、[オブジェクトオブジェクト]のようなもののみを見ることができます。
これは、多くの新しい友達が遭遇する本当の問題です。
Alert document.writeの代わりにConsole.logを使用してオブジェクト情報を出力する場合、このオブジェクトをコンソールに展開して特定の情報を表示できます。
例えば:
var arr = [{name: "nima"、age:22}、{name: "nima"、age:20}];[オブジェクトオブジェクト]を表示せずにオブジェクト情報を直接表示できます。これにより、混乱します。
Console.logが爆発したと突然感じますか?
実際、これは彼の氷山の一角にすぎません。私はあなたに彼の利点のいくつかをあなたに示すために最善を尽くします。
今すぐ手順を続けてください。次に、直接arrを入力してからEnterを押します。
それはさらに抑制されていませんか?これで、オブジェクトを直接クリックして、この配列のオブジェクトを表示するために展開したり、ループ出力を保存したりできます。
これはコンソールの魅力であり、これは最も基本的な機能です。
まず、使用するコンソールオブジェクトの下にある方法を理解しましょう。
コンソールを入力し、Enterを押してオブジェクトを展開します。
暗い色と明るい色を見ることができます。暗い色は、直接呼び出すことができる方法です。明るい色はデフォルトの属性またはメソッドを表し、ディスプレイについて心配する必要はありません。チャンスがあれば、後で話します。
実際、唯一の一般的なものはlog dirです。他のものはめったに使用されず、高度なデバッグでのみ使用されます。
あなたの好みに応じて、グループやテーブルなどの補助プロパティが利用可能であるかどうか。私はそれをあまり使うのが好きではありません。
段階的に見てみましょう。とにかく、ログ監督から始めましょう。デバッグのほとんどはそれらに依存します。
PS:実際、私はあなたに公式のドキュメントを与えるべきでしたが、Googleは最近それを開くことができなかったので、Baiduの各方法の機能を確認できます。
私は中国語版を見つけました、それは悪くありません。最初に「コンソールオブジェクト」を読んでください。
クラス後のエクササイズをいくつか撮りましょう:(最初にBaiduを開き、次にコンソールを開きます)
1コンソールにID KW1を使用して要素情報を表示する
2次に、console.dirメソッドを使用してKW1要素の情報を表示します