JavaScript - 開発ツールのトリックを知っておくべき

皆さん、こんにちは。Wes Bos の JavaScript30 の作業にまたまたようこそ!今日の挑戦は決して挑戦ではありませんでした。 今日は、いくつか (おそらく...14) の異なる開発ツールのトリックを見ていきました。 彼のアレイ カーディオとは異なり、これでは私たちは実際に何もする必要はなく、ただ彼がコンソールを操作するさまざまな方法を示してくれたのをただ見守るだけでした。 数週間前に彼が前のビデオで console.table() を使用しているのを見たとき、私はほとんど正気を失いそうになったので、これを見て実際に興奮しました。 コンソールを操作するにはさまざまな方法があることがなぜ私には理解できなかったのかわかりませんが、その時は本当にびっくりしました。

さまざまなコンソール コマンドを使用する前に、Wes が最初に示したのは、さまざまなアクション (サブツリーの変更、属性の変更、ノードの削除) で JavaScript 関数を分解し、その変更に影響を与えるコード行を表示する方法でした。ページ。 これは、Web サイトのさまざまな側面を分析して、双方向性のために JavaScript がどのように使用されているかを正確に確認するための非常に優れた方法のように思えます。 特定の変更をどのようにコーディングしたかを確認し、変更が発生する前に一時停止することができます。 まあ...少なくともそれが私にとっての教訓でした。

    // Regular
    console.log('hello')

    // Interpolated
    console.log('hello I am a %s string', 'poopy')

    // Styled
    console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

    // warning!
    console.warn('OH NOOOOOO')

    // Error :|
    console.error('Shit!')

    // Info
    console.info('Crocodiles eat 3-4 people per year')

次のパートでは、コンソールで使用できるさまざまなアクションとコマンドについて説明しました。 これらのいずれかをいつ使用する必要があるかは完全にはわかりません...しかし、それが面白くないという意味ではありません。 例: コンソール自体内でテキストのスタイルを設定できるとは知りませんでした...少し不必要ですが、見た目はクールだと思います。警告/エラー/情報メッセージの呼び出しも同様です。 そうですね、やってみるとかなり面白いですね。 しかし、なぜそんなことをするのか、私にはその理由がわかりません (おそらくコンソールでテキストベースのゲームを作ることは別として)。

次に、console.assert() を使用してドキュメントの一部に特定のクラスが含まれているかどうかをテストする方法を説明しました。 これは、ドキュメント内で何かが true か false かをテストするためにも使用できます。 間違っている場合は、独自のエラー メッセージが表示される可能性があります。 次に、クリーンアップに役立つ console.clear() を使用してコンソールをクリアする方法を簡単に説明しました。 また、ドキュメント全体に複数の異なるコンソール コマンドがあり、それを最後にクリーンアップしたい場合にも便利です。 これにより、全体を調べて、その時点までのすべてのコンソール コマンドを削除またはコメントアウトする必要がなくなる可能性があります。

    // Testing
    const p = document.querySelector('p');

    console.assert (p.classList.contains('ouch'), 'That is Wrong!')

    // clearing
    // console.clear()

    // Viewing DOM Elements
    console.log(p)
    console.dir(p)

    // Grouping together
    dogs.forEach(dog => {
      console.groupCollapsed(`${dog.name}`)
      console.log(`This is ${dog.name}`);
      console.log(`${dog.name} is ${dog.age} years old`)
      console.log(`${dog.name} is ${dog.age *7} dog years old`)
      console.groupEnd(`${dog.name}`)
    })

    // counting
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Craig')
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Billy')
    console.count('Craig')

    // timing
    console.time('fetching data');
    fetch('https://api.github.com')
      .then(data => data.json())
      .then(data => {
        console.timeEnd('fetching data');
        console.log(data)
      })

次に、特定の dom 要素を表示できる console.dir() についても説明しました。 私には認識していない部分や理解していない部分がたくさんありますが、時間が経つとそれも分かると思います。 console.group() コマンドは、現時点ではもっと活用できると思います。 情報をオブジェクトまたは配列で保存できるという事実だけで、その情報は非常に役立ちそうです。 場合によっては、配列または配列内のオブジェクトの生のコードが膨大になる場合がありますが、これにより情報が自動的に整理されます。 実際かなりクールです。

レッスンの最後の 2 つの部分は console.count() と console.time() を使用したもので、これも私には必要ないと思われる特定の使用例のようです。 カウント機能は、特定の単語/フレーズが何回参照されたかを確認できる、ちょっと便利な機能です。 これがコンソール内のみで参照されているのか、ドキュメント全体に対して参照されているのかは完全には明らかではありませんが、コンソール内だけで参照されているようです。 console.time() は時代遅れのようです。 私がこのように言ったのは、別のソースからデータを取得する速度を確認するさまざまな方法があるからです。 特定の Web サイトから別の要素を読み込む場合でも、Web サイト自体にアクセスする場合でもです。 読み込み速度を確認する方法はたくさんありますが、それをコンソールでも実行できるのは理にかなっていると思います。

これで今日のレッスンは大体カバーできると思います。 あまり面白い内容ではありませんでしたが、有益な内容でした。 今後、これらのコマンドのいくつかを使用するかもしれませんが、現時点では、コンソールの他の使用方法を見ることができてうれしいです。なぜなら、彼があまりにも何気なく console.table() を使用しているのを初めて見たときから興味があったので、今でもそれについて考えています。 。 さて...今日はここまでです！ すぐにもう一度戻ってご覧ください: JavaScript 30 - 10 Shift キーを押しながら複数のチェックボックスをオンにしてください!

以上がJavaScript - 開発ツールのトリックを知っておくべきの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。