Chrome デベロッパー ツールに関する 6 つのヒント_html/css_WEB-ITnose

以下は、特別に招待された Umar Hansa によって書かれた記事です。ウマルさんにはニュース グループがあり、私は彼のファンです。彼は私たちのリクエストに快く応じて、ニュース グループの形でこの記事を書いてくれました。彼に自己紹介をしてもらいます。

こんにちは、私はウマルです。私は Web 開発関連のヒントを Twitter (@umaar) で共有するのが好きです。また、Dev Tips を通じて開発のヒントを GIF の形式で共有することも好きです。 Dev Tips は開発者向けのニュース グループです。現時点では、主に Chrome デベロッパー ツール関連のものです。始める前に、私が愛する組織に貢献する機会を与えてくれた CSS-Tricks に感謝したいと思います。

この記事では、Chrome 開発ツールに関する 6 つの一般的なヒントについて説明します。すでにその一部を見たことがある人もいるかもしれませんが、すでに知っている場合は、この記事がデバッグの過程で過去を振り返り、新しいことを学ぶのに役立つことを願っています。

CSS セレクターを使用して DOM 検索を実行します

ビデオ: https://cdn.css-tricks.com/wp-content/uploads/2015/08/search-by-selector.mp4

これを簡単に見つける方法は次のとおりです。 DOM ノードのための便利なトリックが必要です。 [要素] パネルで Cmd + F (Windows では Ctrl + F) を押して検索ボックスを開きます。次のツールを使用して検索できます:

CSS セレクター: これはクールであり、このヒントの内容です。たとえば、a[href=''] を使用して、空の href 値を持つすべてのアンカー要素 (a タグ) を検索したり、リアルタイムで更新された検索結果を利用して DOM ノードを走査したりできます。

文字列: たとえば、段落要素内のテキスト。

XPath: おそらく最も人気のあるものではありませんが、世の中に存在することを知っておく価値はあります。

メディア クエリ インスペクター

ビデオ: https://cdn.css-tricks.com/wp-content/uploads/2015/08/media-query-inspector.mp4

デバイス モードを設定していると仮定します) ある程度の理解がある。

スタイルではメディア クエリを登録できます。デバイス モードの場合、そのようなメディア クエリはメディア クエリ インスペクターに表示されます。色付きのメディア クエリ バーの幅はビュー ルーラーに合わせて調整されます。

メディア クエリ バーのチェックマークをクリックしてメディア クエリをトリガーできます。これにより、ビュー サイズが設定されます。

チェックマークの上にマウスを置くと、正確なルールが記載されたツールヒントが表示されます。

メディア クエリ バーのチェックマークを右クリックし、[ソース コードの表示] を選択できます。これにより、ソース コード内のメディア クエリが定義されているポイントに移動します。

ビデオ: https://cdn.css-tricks.com/wp-content/uploads/2015/08/media-query-inspector-reveal.mp4

応答をコピー

ビデオ: https://cdn. css-tricks.com/wp-content/uploads/2015/08/copy-response.mp4

[ネットワーク] パネルでリソースを右クリックし、[応答のコピー] を選択してリソースのコンテンツをクリップボードにコピーできます。さらに、リソース パネルに直接移動して、リソースをエディタにドラッグすることもできます。これにより、ファイルの内容がエディターに埋め込まれます。

cURL としてコピー

ビデオ: https://cdn.css-tricks.com/wp-content/uploads/2015/08/copy-as-curl.mp4

ネットワークパネルで右クリックできますリソースをクリックし、「cURL としてコピー」を選択します。開発者ツールは、元の要求ヘッダーを含むターミナル フレンドリーなコマンドをクリップボードに配置します。こうすることで、作成したリクエストが元のリクエストに可能な限り近いものであることを確認できます。

インライン JS 値

ビデオ: https://cdn.css-tricks.com/wp-content/uploads/2015/08/inline-js-values.mp4

最近、開発者ツールの JavaScript でのデバッグにより、多くの改善。ブレークポイントで一時停止し、変数の現在の状態に関する視覚的なフィードバックを受け取ることができるようになりました。コードの隣に埋め込まれたこれらの値は、近くの関数のパラメーターを表示します。

この機能のオン/オフのスイッチは、[設定] > [一般] > [ソース] > [デバッグ中に変数値をインラインで表示] にあります。

Web スライドショー (こっそり覗いてみましょう!)

最後に、近々登場するかもしれない、とても素敵だと思う機能を紹介したいと思います。実際、この機能は非常に優れているため、注意する必要があります。

これは実験的な開発者ツールの機能です。実験的な機能は壊れたり、変更されたり、消えたりする可能性がありますので、ご留意ください。

ビデオ: https://cdn.css-tricks.com/wp-content/uploads/2015/08/network-filmstrip.mp4

以前に WebPageTest を使用したことがある場合は、このスライドショー機能に見覚えがあるかもしれません。ページがレンダリングされているときに画面が表示されますが、重要なのは、ユーザーが何を目にする可能性があるかを理解していることです。

CSS-Tricks ログで次のことがわかりました:

テキストなしで最初にページがレンダリングされたのは、フォントの準備ができていないことが原因でした。

広告/スポンサーシップなどの二次コンテンツは、メイン コンテンツが読み込まれた後に読み込まれます。

時間データが表示されるため、特定の表示がレンダリングされた時間と一致し、メインのコンテンツを 1 秒以内に確認できます。

この機能はデフォルトでは利用できませんが、簡単に検索すると、DevTools で非表示の実験を有効にする方法が表示されます。ただし、上記の警告を忘れないでください。

数日前、グループの誰かが、質問を投稿して回答できる QQ というアプリを勧めているのを見ました。一般的に、この種のソフトウェアはお金と赤を提供します。開始したらすぐに封筒を送ります。兄弟、私は以前に Uber を使用した経験があります。何度か試してみたところ、登録済みの紅包と、これまでに50元以上引き出した紅包のお金はスワイプできるはずです。もっと。 ps、ただし技術的な質問をするようにしてください。そうしないと簡単にブロックされます。
上手な人は自分で試してみてください。方法がわからない場合は、インターネットのエリート、テクニカル ディレクター、アーキテクト、プロジェクト マネージャーが集まる QQ グループ 290551701 に問い合わせてください。オープンソース テクノロジーの研究は、IT 業界で働くことに興味のある業界関係者、専門家、初心者を歓迎します。