Chrome Devツールには存在しますが、ソースを表示しない要素 - これはどのように可能ですか？要素は、開発ツールに表示が、ソースの表示に表示されない：（OpenCartで構築された）のウェブサイト上でいくつかの設計上の問題のトラブルシューティングをしようとすると

Question

、とは私が前に見たことがない問題に遭遇しました。

これはどのように可能ですか？実際の要素をどのように見つけることができますか？

状況は、「カートに追加」ボタンを「表示」に変更するために元のテンプレート（category.twig）を修正しなければならず、デフォルトのカテゴリビューで機能しますが、フィルタが選択されていれば元のビューに戻りますが、それは同じファイルです（同じファイルを実際に見ていることを確認するために、コード自体にパスを追加しました。スクリーンショットのコードビュー部分で見ることができます）。

はそうそう...これは「カートに入れる」ここで、追跡しようとするから来て、そしてなぜそれがソースの表示に現れていないとして、強大な混乱しています。そして、いいえ、 "view_button" DIVをターゲットとするJavaScriptはなく、 "カートに追加"に変換するJavaScriptはありません - 私は "view_button" DIVを作成しました。それはカスタムです。

アドバイスはありますか？

Answer 1

Javascriptが（そしてしばしばん）ドキュメント内の新しい要素を作成することができ、それはJavaScriptを実行しないbecasuse、そのwon'tは、コードビューに表示されます。私は、ページ全体をダウンロードし、jsファイル内のボタンカートのテキストやドキュメント全体を検索するようアドバイスします。

Answer 2

文書のソースは、静的要素を定義していませんが、JavaScriptが動的に要素を作成します。これは非常に一般的です。開発者ツールはメモリに存在するドキュメント（現在の状態）を表示します。これはJSが発生したものを含みますが、view ... sourceは最初にロードされた静的ファイルの実際のソースコードを示します。

Answer 3

ソースコードプログラマが書いたものです。または、ブラウザの「ソースの表示」の場合には、それがサーバは手で書かれていたり、compilationまたはバンドルの様々な形式を使用して生成することのできる、と答え少なくともものです。ここでの一般的な例は、テンプレートからレンダリングされたページです（例：Handlebarsを使用）。

ライブコード、または少なくともライブマークアップは、ブラウザのコンソールでElementsペインで見ているものです。あなたは目の前でリアルタイムにレンダリングされたDOMを見ています。プログラム（つまり、ページとそのサブリソース）が実行され、有効になるのを見ている。これはおそらくJavaScriptのために変異しています。

example.comのような非常に単純なページの場合、runtimeで何も変更されていないため、ソースコードとライブコードの違いは気づかない場合があります。しかし、より複雑で現実のウェブサイトの場合、DOMをクリックするとページが閲覧されている間にDOMが変更されることが多く、クリック数や入力などに対応できます。これらの変更は非常に強力で有用です。しかし、あなたが発見したように、彼らはソースコードとライブコードを発散させます。これはプログラマーの生活をより困難にする一方で、ユーザーの生活を楽にします。