JavaScript/Chrome - ウェブキットインスペクタからオブジェクトをコードとしてコピーする方法：その他の方法
2024-07-27
JavaScript/Chrome - ウェブキットインスペクタからオブジェクトをコードとしてコピーする方法
このチュートリアルでは、JavaScript/Chromeを使用して、Webkitインスペクタからオブジェクトをコードとしてコピーする方法について説明します。これは、開発者ツールを使用してデバッグや検証を行う際に役立つテクニックです。
手順
Webkitインスペクタを開く
- ChromeでWebページを開きます。
F12キーを押します。- または、右クリックしてコンテキストメニューから「要素の検証」を選択します。
オブジェクトを見つける
- デバッグしたいオブジェクトを特定します。
- オブジェクトは、要素パネルまたはコンソールパネルで見つけることができます。
オブジェクトをコピーする
- オブジェクトを右クリックします。
- コンテキストメニューから「コピー」を選択します。
- または、
Ctrl+C(Windows) またはCmd+C(Mac) を押します。
オブジェクトをコードとして貼り付ける
- テキストエディタを開きます。
- コピーしたオブジェクトを貼り付けます。
- オブジェクトは、JavaScriptコードとして表示されます。
例
次の例では、document.bodyオブジェクトをWebkitインスペクタからコピーする方法を示します。
F12キーを押してWebkitインスペクタを開きます。- 要素パネルに移動します。
document.body要素を見つけます。
次のコードが表示されます。
document.body
このコードは、document.bodyオブジェクトを参照します。
ヒント
- オブジェクトをコピーする前に、オブジェクトを展開してすべてのプロパティを表示できます。
- オブジェクトをコピーすると、プロパティ名と値がスペースで区切られた形式で表示されます。
- オブジェクトをコードとして貼り付けると、プロパティ名はインデントされます。
document.body
方法 1：コンソールパネルを使用する
- コンソールパネルに移動します。
- オブジェクトをコードとして表示したい変数をコンソールに入力します。
- Enterキーを押すと、オブジェクトがコードとして表示されます。
次の例では、document.bodyオブジェクトをコンソールパネルからコードとして表示する方法を示します。
console.log(document.body);
このコードを実行すると、次の出力がコンソールに表示されます。
<body>
</body>
方法 2：文字列化関数を使用する
- オブジェクトがコードとして表示されます。
次の例では、document.bodyオブジェクトを文字列化する方法を示します。
var str = JSON.stringify(document.body);
console.log(str);
{"nodeType":1,"tagName":"BODY","childNodes":[{"nodeType":3,"textContent":"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n
javascript google-chrome object
