在Google Chrome浏览器中调试时是否可以更改javascript变量值？

81

我正在调试一个javascript应用程序（使用Chrome开发工具），并且希望在逐步执行代码时更改一些变量值。

那有可能吗？

我已经尝试过并得到类似的东西：

> modeline
1
> modeline=0
0             <<< seems to work but... 
> modeline
1             <<< ups!!

但是我找不到任何文档说明什么可以做或不能做...

javascript debugging google-chrome

— 塔塔
source

发布一些代码。哪里modeline来的？

— 埃米尔·伊万诺夫

4

@Emil：那重要吗？modeline是一个全局变量，我也尝试过使用window.modeline对其进行修改，结果相同。但是这个问题也与在函数内部声明的局部变量有关

— tato

4

我可以确认这种行为。在Chrome中修改JS对象上的属性似乎对解释器中对象的实际值没有任何影响。在Firefox中，相同的修改使js脚本的评估与您期望的不同。Chrome具备某种额外的安全性吗？有谁知道它是否可以在Chrome中关闭，因此您可以将其用于调试js？

— Nikolaj Hansen 2012年

1

为此提交了一个错误报告。

— GreenGiant 2012年

1

已在V8中实施：问题2399，现在需要更新Chromium的开发人员工具：问题124206

— gabrielmaldi

39

为什么这个答案仍然不赞成？

按照MikaëlMayer的回答，这不再是问题，而且我的回答已经过时了（go()现在30在调解控制台后返回）。根据上面gabrielmaldi的评论中链接的错误报告，此问题已在2013年7月修复。这使我感到震惊，我仍在投票-让我认为投票者既不理解问题也不知道我的答案。

我会离开这里我原来的答复由于历史的原因，但去给予好评麦克尔的答案，而不是。

诀窍是您不能直接更改局部变量，但可以修改对象的属性。您还可以修改全局变量的值：

var g_n = 0;
function go()
{
    var n = 0;
    var o = { n: 0 };
    return g_n + n + o.n;  // breakpoint here
}

安慰：

> g_n = 10
  10
> g_n
  10
> n = 10
  10
> n
  0
> o.n = 10
  10
> o.n
  10

检查go()设置断点并在控制台中运行这些调用之后的结果，您会发现结果为20，而不是0（但不幸的是，不是30）。

— 吉利3
source

— 2016年

@Offirmo-1已记录。错误是什么？您希望记录什么？

— gilly3 '16

在调试器打开的情况下，a将“作用域”面板中的值更改为任何值（例如42），然后恢复：记录1

— Offirmo

@Offirmo-不适合我：屏幕截图。但是，如果我将其包装在函数中，那么我会看到您所描述的内容。有趣。但是，然后，我可以通过直接在控制台中输入值来更改值（我个人觉得这比使用范围面板要容易）。屏幕快照，我想我从未尝试在范围面板中更改值。我总是只在控制台中执行更改值的表达式，无论如何，这似乎都能奏效。

— gilly3 '16

3

我之所以投票，是因为您的答案符合“一个好的答案”的所有条件，而您提到的另一个答案提供了更新，更好的信息，这些信息来自一个已接受的答案，从而立即获得了信誉。那谢谢啦。并享受投票！

— gfullam '16

67

现在可以在chrome 35中使用（今天（截至2014年7月11日））。我不知道哪个版本首先允许它。

刚刚在我的机器上测试了@ gilly3示例，它可以工作。

打开控制台，在Sources和选项卡中Snippets，添加一个新的代码段，将以下代码粘贴到其中：

var g_n = 0; function go() { var n = 0; var o = { n: 0 }; return g_n + n + o.n; // breakpoint here }
右键单击代码段名称，然后单击“运行”（尽管这不会触发该功能）
在return语句处添加断点。
在下面的控制台中，键入 go()
并如下所示更改变量值

允许本地修改的功能。

返回的结果g_n + n + o.n是30。

— 米凯尔·梅耶（MikaëlMayer）
source

1

在Brian的答案中提供的链接中跟踪了此错误的回归。

— 迈克

7

这是Chrome开发工具中公认的错误：

http://code.google.com/p/chromium/issues/detail?id=124206

— 布赖恩佩里斯
source

看起来是固定的，2013年3月21日。我不确定如何知道它将使用哪个版本的chrome。–

— David

@David他们在Blink中修复了它，我们可能需要等待一段时间才能获得使用Blink的Chrome版本

— Anshul 2013年

3

（再次）在Chrome版本49.0.2623.87中被破坏。登录到上面的链接，并在问题上加注星标，以提高重要性。

— 迈克

5

是! 最后！我刚刚在Mac上使用Chrome版本66.0.3359.170（正式版本）（64位）进行了尝试。

您可以像第一幅图中那样在范围中更改值，或者可以像第二幅画面那样使用控制台来更改值。

— 泰勒·科利尔（Tyler Collier）
source

这似乎也适用于复杂的情况（例如间隔和触发器）。

— Gerfried

4

看起来好像不是。

放置一个断点，当它停止切换到控制台时，尝试设置该变量。当您为其分配其他值时，它不会出错，但是如果您在分配后读取它，则它不会被修改。：-/

— 弗拉德·古迪加
source

好的，至少您看到的是我所看到的相同行为。但是...有可能吗？

— 塔塔

4

Firebug似乎允许您这样做。

— 波波
source

3

IE和Opera Dragonfly也是如此。

— Keith K

5

我真的很想念Opera Dragonfly -____-

— ThorSummoner 2015年

2

实际上，有一个解决方法。复制整个方法，将其名称修改，例如将originalName（）更改为originalName2（），但修改其中的变量以采用所需的任何值，或者将其作为参数传递。

然后，如果直接从控制台调用此方法，它将具有相同的功能，但可以修改变量值。

如果该方法被自动调用，则键入控制台

originalName = null;
function originalName(original params..)
{
    alert("modified internals");
    add whatever original code you want
}

— 姆杜贝兹
source

2

我可以通过在控制台中进行分配来修改脚本变量值。似乎最简单。

— 杰夫·洛里（Jeff Lowery）
source

1

我不知道为什么chrome小组不允许这种愚蠢的功能...但是我成功更改变量值的唯一方法是直接在chrome编辑器中的“源”标签下修改脚本（这会更改您的脚本，直到刷新页面为止），但刷新后这些更改将丢失，因此请务必小心。

— 列昂纳多
source

0

我遇到了同样的问题，转到“关于Google Chrome浏览器”->帮助，它说我需要重新启动浏览器以获取最新更新。

我这样做了，突然之间，我现在可以更改局部变量了。只需在“范围变量”窗口中单击要编辑的变量，然后输入新值。

但是，我确实注意到了一些奇怪之处，即在我可以更改右侧窗口中的文本（范围变量）之前，我不得不跳过一些不相关的var分配。

— 吉尔斯·米德尔顿
source

如果您已经使用本地存储来存储属性，则还可以转到资源-> LocalStorage并编辑直接保存在那里的属性。

— GilesDMiddleton

0

在每次代码块运行时修改值，而不必中断执行流程：

调试器中的“ Logpoints”功能旨在让您将任意值记录到控制台而不会中断。它在执行流程中评估代码，这意味着您实际上可以使用它来即时更改值而无需停止。

右键单击行号，然后选择“ Logpoint”，然后输入分配表达式。看起来像这样：

我发现它非常有用，它可以将值设置为其他情况下不易复制的状态，而不必使用调试行来重建我的项目。完成后，请记住删除断点！

— 马修·马里奇巴
source