Javascript / Chrome-如何从Webkit检查器复制对象作为代码


491

我在我的JavaScript中执行console.log语句,以记录一个JavaScript对象。我想知道是否有一种方法,一旦完成,就将该对象复制为javascript代码。我想做的是将使用ajax创建的对象转换为将xml feed解析为静态javascript对象,以便文件可以在本地运行,而无需服务器。我在chrome inspector窗口中包含了该对象的屏幕快照,以便您可以看到我正在尝试执行的操作。在此处输入图片说明


1
尝试使用Firefox和选项.toSource()。更容易
chepe263

Answers:


1245
  1. 右键点击Chrome控制台中的对象,然后Store as Global Variable从上下文菜单中选择。它将返回类似temp1变量名的内容。

  2. Chrome也有一种copy()方法,因此copy(temp1)在控制台中应将该对象复制到剪贴板。

在Chrome DevTools中复制Javascript对象

关于递归对象的注意事项:如果尝试复制递归对象,则将获得[object Object]。出路是copy(JSON.stringify(temp1)),该对象将作为有效JSON完全复制到剪贴板,因此您可以使用多种资源之一随意设置其格式。


3
在chrome版本49.0.2623.87(64位)中返回undefined?为什么>?
Pardeep Jain

10
@PardeepJain-这是copy()方法所期望的,因为没有任何返回值。数据应该在剪贴板中。
卡尔,

35
这只是给[object Object]我。
Ullallulloo

1
@Ullallulloo尝试使用JSON.stringify这样注销:stackoverflow.com/a/4293047/622287
kevnk

3
仅当您有浅层JS对象时,它才有效;如果您有递归深层对象,则将获得[对象对象]-这是预期的
Marwen Trabelsi,

62

尝试JSON.stringify()。复制结果字符串。不适用于包含循环引用的对象。


7
除非您修改记录它的代码,否则我看不到它将如何工作。
iConnor

16
我知道了TypeError: Converting circular structure to JSON
Tony Brasunas

40

您可以使用copy(JSON.stringify(Object_Name));将对象复制到剪贴板。在控制台中。

例如:-在控制台中复制并粘贴以下代码,然后按Enter。现在,尝试将其粘贴(对于Windows则为CTRL + V,对于Mac为CMD + V),将其粘贴到其他位置,您将得到 {“ name”:“ Daniel”,“ age”:25}

var profile = {
    name: "Daniel",
    age: 25
};

copy(JSON.stringify(profile));

14
不适用于DOM节点,窗口或其他任何圆形的对象
Carles Alcolea

到目前为止,对于大型但简单的对象而言,最简单的解决方案。
Hersheezy

最简单的解决方案
Anandhukrishna VR,

26

现在,您可以在Chrome中通过右键单击对象并选择“存储为全局变量”来完成此操作:http : //www.youtube.com/watch?v=qALFiTlVWdg

在此处输入图片说明


2
从39.0.2171.95版开始,使用Chrome检查Android设备时,“存储为全局变量”选项不可用。
Walter Roman

1
@David Calhoun,我对您的回答投了赞成票。看来您的答案发布于2014年6月12日,而接受的答案是2014年8月5日,很大程度上符合了您的答案。我不得不承认,他提到temp1,而您的答案仅在您的视频中显示,所以也许这就是为什么其他答案被接受的原因。最好的祝愿。
PatS

13

请按照以下步骤操作:

  1. 从代码中使用console.log输出对象,如下所示:console.log(myObject)
  2. 右键单击对象,然后单击“存储为全局对象”。Chrome会在此时显示变量名称。假设它被称为“ temp1”。
  3. 在控制台中,键入:JSON.stringify(temp1)
  4. 此时,您将看到整个JSON对象为可复制/粘贴的字符串。
  5. 您可以使用http://www.jsoneditoronline.org/之类的在线工具来美化您的字符串。

如果对象很大,则使用JSON.stringify(temp1)的步骤可能会影响长时间的执行。
海洛因

@JoeTidee我遇到了同样的问题,但是我设置了一条debugger语句,然后直接在断点处从控制台检索了我的var。
托尼·布拉索纳斯


0

使用“作为全局变量存储”是可行的,但是它只能获取对象的最终实例,而不是记录对象的时间(因为您可能想在对象发生更改时将其进行比较)。为了使对象在被修改的确切时间,我使用此...

function logObject(object) {
    console.info(JSON.stringify(object).replace(/,/g, ",\n"));
}

这样称呼...

logObject(puzzle);

如果您的数据碰巧包含逗号,则可能要删除.replace(/./ g,“,\ n”)正则表达式。


0

所以,。我有这个问题。除了我有[对象]

我确信您可以通过递归来做到这一点,但这对我有用:

这是我在控制台中所做的:

var object_that_is_not_shallow = $("all_obects_with_this_class_name");
var str = '';
object_that_is_not_shallow.map(function(_,e){
    str += $(e).html();
});
copy(str);

然后粘贴到您的编辑器中。


0

这应该通过省略递归WindowNode对象来帮助深化对象。

function stringifyObject(e) {
  const obj = {};
  for (let k in e) {
    obj[k] = e[k];
  }

  return JSON.stringify(obj, (k, v) => {
    if (v instanceof Node) return 'Node';
    if (v instanceof Window) return 'Window';
    return v;
  }, ' ');
}


0

将此添加到控制台并执行

copy(JSON.stringify(foo));

这会将您的JSON复制到剪贴板

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.