javascript - Chrome 開発ツール:と?

Question

これらのドロップダウンは何をしますか? さまざまなコンテキストでコンソール コマンドを実行していると思いますが、クリックすると奇妙で無意味な選択肢が表示されます。

Answer 1

Gmail を例に取り、最初のドロップダウンを見てみましょう。

フレーム一覧

ここに表示されるのは、現在のページに埋め込まれているすべてのフレームです。これらの各フレームはサンドボックス化されています。サンドボックス化されているということは、あるサンドボックスから他のサンドボックスへのアクセスがないことを意味します。1 つのフレーム内で実行されるスクリプトは、他のフレームの DOM または JS 変数にアクセスできません。これはセキュリティ上の理由によるものです。iframe 内のスクリプトが埋め込まれたページにアクセスできないようにする必要があります (これにより、たとえばブログに埋め込まれた広告が、入力内容や Cookie に保存されている内容を読み取れるようになります)。 ）。

コンテキストのリスト

2 番目のドロップダウンには、選択したフレームのコンテキストのリストがあります。たとえば、Gmail のコンテキストのリストは次のとおり<top frame>です。

これらは、選択したフレームに Chrome 拡張機能によって挿入されたスクリプトごとに作成されたサンドボックスです (これらのスクリプトは「コンテンツ スクリプト」と呼ばれます)。ただし、これらは前述のフレーム サンドボックスとは異なります。Chrome 拡張機能によって挿入されたスクリプトは、挿入されたページの DOM に無制限にアクセスできますが、分離された世界と呼ばれる別の JS 実行コンテキストで動作します (「ページによって作成された JavaScript 変数または関数」にはアクセスできません)。この場合、セキュリティよりも、異なる拡張機能のスクリプトが互いに干渉しないようにすることが重要です。

分離された世界により、各コンテンツ スクリプトは、ページや他のコンテンツ スクリプトとの競合を心配することなく、JavaScript 環境に変更を加えることができます。たとえば、コンテンツ スクリプトに JQuery v1 を含め、ページに JQuery v2 を含めることができ、それらが互いに競合することはありません。

ところで、URL の後の部分はchrome://拡張機能 ID を表し、それを使用して、コードを挿入した拡張機能の名前を特定できます (chrome://extensions/ ページの「開発者モード」を確認してください)。

なぜそれが必要なのですか？

• console.*iframe によって生成されたエラーやメッセージを確認したい場合があります。
• console.*Chrome 拡張機能をデバッグしているときに、挿入したスクリプトによって生成されたエラーやメッセージを確認したい場合があります。
• デフォルトとは異なるコンテキストでコンソールからコードを実行したい場合があります。