javascriptConsoleとはWindowインタフェースのプロパティですが、このインタフェースは特別に省略することが許されているのでwindow.console.log("hoge");orconsole.log("hoge")と、どっちの書き方でもブラウザでは出力することができます。これらのテクニックはブラウザのConsoleに限らず使えるテクニックなので、ぜひご覧ください。Consoleに出力させるためのテクニックコマンドラインAPIを使うコマンドラインAPIを使うことによって、面倒な作業を大幅に改善することができます。直前に評価された式の値を返す直前の結果を使いたいときに使用します。指定されたCSSセレクタを含む最初のDOM要素よく使うdocument.querySelector()のエイリアスです。最初のマッチした要素が返されます。以下のように取得をすることができます。$('img');もちろん、要素の属性は、取得したオブジェクトのプロパティも参照することができます。指定されたCSSセレクタを含むDOM要素マッチするすべての要素を取得でき、配列で返ってきます。コンソールの履歴をクリアコンソールをクリアします。オブジェクトをクリップボードにコピークリップボードにコピーできます。指定された関数が呼び出されるとSourcesパネル上でデバッガーでデバッグする関数が呼び出されるとSourceパネルで、該当関数が表示されてデバックをすることができます。以下のような関数を定義したとしましょう。}そして、この関数divideを監視します。debug(divide);そして実際に呼び出して見ると、出力を確認することがでkみあす。divide(2.,3);すると以下のようになります。Sourceパネルの使い方までは本記事では解説しないので他をご覧ください。指定されたオブジェクトのプロパティをオブジェクトスタイルのリストで表示するdir(document.body);差異を確認するために以下のように実行してみます。指定されたオブジェクトのXML表現をElementsタブのように出力するdirの結果よりXMLのように出力したものです。ツリー構造が非常に分かりやすいです。指定されたオブジェクトをElementsパネルで選択された状態で開く例えば以下のようなスクリプトを実行すると以下のようになります。inspect(document.body);以下のような画面が開きます。オブジェクトのイベントリスターを取得する試しに何かimg要素を取得してみます。Listnerを追加します。getEventListener(image);{}何もありませんでした。Listnerを追加します。me:)"});oそして再度、実行してみましょう。getEventListener(image);するて出力は以下のようになります。Listenerが参照できていることが分かります。指定されたオブジェクトに属しているプロパティの値とKeyを取得これはObjectの値を、またはKeyをみたい時に有効です。関数を監視する関数が呼び出されたら、呼ばれた関数と引数を出力します。以下のように関数を定義します。b}そして、この関数sumを監視します。monitor(sum);実際に呼び出して見ると以下のように出力されます。events])特定のオブジェクトのイベントを監視することができます。特定のイベントも監視することができて、デバッグなどには便利だと思います。全イベントを監視するには以下のようにします。monitorEvents(window);例えばwindowのリサイズを監視してみようと思います。"resize");もちろん、複数のイベントも監視できます。プロファイリングセッションを開始し、終わります。結果はProfileパネルに出力をします。これは、Consoleに直接関係ないので省略します。colums])オブジェクトのプロパティをテーブル形式で出力することができます。"male"};table(data);console.logに以外にも有用なテクニック実際、先ほどのtableなどにconsole.をつければ使うことができますが、一応解説します。コンソールに出力もっともよく使われて、初心者の方は例えば以下のようにして結果を確認しているのではないでしょうか。1;console.log(hoge);便利です。文字列などももちろん出力することができます。複数のオブジェクトをまとめて出力する以下のように出力をします。CSSスタイルを適用して出力をする以下のように%cを使って出力をすることができます。コンソールにエラーを出力エラーを出力することができます。赤いので目立つでしょう。「情報」と「データ」は大きく違います。情報は0と1の羅列それ自体でありますが、データとは意味を含めた概念です。ここでinfoとしているのは、フローである値がエラーかも、正常なのかも、もしくは別の特徴量を持つなど、何もわからない状態で、ただ出力したいときに、このconsole.infoを使うことができます。何かしら注意に値する出力を出します。呼び出された回数を出力するカウントアップで呼び出された回数を出力してくれます。console.count("hoge");またカウントをリセットしたいときはcountResetメソッドをつかうと初期化をすることができます。メソッドのスタックトレースがわかるメソッドの呼び出し元などを知りたいときはあるでしょう。オブジェクトのプロパティをリストで出力する例えば以下のように出力します。DOM要素を出力する先ほどのconsole.dirをXMLのように出力した場合です。オブジェクトをテーブルとして出力する今回はテーブルの出力します。ハリーポッターの作品中には『幻の動物とその生息地』のよ...2018-12-23Concourseで継続的デリバリー。本記事ではRustのcrateとmoduleを解説していきます。»プロフィール学生エンジニア。忘れてしまうので備忘録です。flaskでServerlessにホストするTelepresence概論スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。