2017-01-19 11 views
0

通常、ウェブアプリケーションをデバッグするときは、要素のマウスにマウスを置いて右クリックし、「検査」を選択します。これの用語は何ですか?このテクノロジーの検索に使用できるキーワードとは何ですか?私は非常に有用で有用なので、私はこのデバッグ方法をマスターするためのチュートリアルをもっと読んでいきたいと思います。ウェブアプリケーションをデバッグするための用語

更新:実際には、要素のCSSクラスを知りたいので、この要素を表示または非表示にできます。

+0

あなたは開発者ツールを意味しますか?ソースを調べることは技術的にはデバッグではありません...実行を続行するためにコードを1行ずつ進め、次にバグのソースを見つける(そして修正する)ことはデバッグです。 – Li357

+0

実際には要素のCSSクラスを知りたいので、この要素を表示または非表示にすることができます。 –

答えて

0

デベロッパーコンソールでは、それなしで、最も重要なWeb開発におけるツールと で、任意のWeb開発者はほとんどについて想像することはできませんウェブページ 開発。開発に使用するIDEよりも重要です。クライアントのデバッグやUIのデバッグと呼ばれるブラウザ上の要素を検査

  1. 。これはデベロッパーコンソールで発生します。デベロッパーコンソールは、デフォルトですべてのブラウザーで使用されますマウスを右クリックして[検査を選択]または[F12]を押して、要素を検査できます。

  2. これは 上の画像でenter image description here

  3. 以下のように同じブラウザウィンドウの下部にコンソールを開き、選択した要素がBODYであり、タグのプロパティに合わせCSSはで表示されて見ることができます右側のスタイルタブの下にある同じコンソール。任意のCSSプロパティにマウスポインタを置くと、チェックボックスが表示され、選択した要素にプロパティを追加または削除できます。

  4. 同じ側に、CSSに適用できる複数のオプションがあります。例えば。 ホバーにいくつかのプロパティを適用する場合は、フィルタをクリックして要素の状態を選択します。

  5. このようにして、ページ上の要素を使用して再生し、探している要素のスタイルを完成させることができます。

  6. 開発者コンソールは、CSSとHTMLだけでなく、Javascriptのデバッグにも使用されます。実行時にJavaScriptをデバッグするために必要なすべてのコントロールを提供します。

[注意:デベロッパーコンソールの変更を実際のファイルに保存することはできません。それらをコピーしてソースファイルにコピーしてから、ページをリフレッシュして正常に動作することを確認する必要があります。]

+0

あなたの答えをありがとう。 「クライアントのデバッグまたはUIのデバッグと呼ばれる要素のブラウザの検査」に関するチュートリアルを私に送ることができますか?あなたがここで言及したことを知っているので、私はこれについてより高度なスキルを学びたいと思っています。 –

1

「要素を検査する」ときは、ブラウザの開発者ツールまたは「開発ツール」を使用しています。チュートリアルをお探しの場合は、 "chrome developer tools"や "firefox developer tool"(またはあなたが使用するブラウザ)を検索すると、たくさんのものが得られます。

+0

これも非常に役に立ちます。 –

0

クライアント側のデバッグについて知りたいと思われるようです。広く2種類

  1. ブラウザレベルのデバッグ

    のである:あなたは、Google Chromeの理解することがthisリンクを使用することができます。

  2. Javascriptのデバッグ:あなたはjavascriptのデバッグを知ってthisリンクを使用することができます。

関連する問題