在谷歌Chrome中调试时是否可以修改javascript变量值?

I'm debugging a javascript app (using Chrome dev tools), and I would like to change some variable values while stepping through the code.

我正在调试一个javascript应用程序(使用Chrome开发工具)，我想在执行代码时更改一些变量值。

Is that possible at all?

这可能吗?

I have tried and got something like:

我试过了，得到了如下的结果:

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

But I'm unable to find any documentation that states what can or can't be done...

但是我找不到任何文件来说明什么是可以做的，什么是不能做的……

10 个解决方案

#1

Why is this answer still getting upvotes?

Per Mikaël Mayer's answer, this is no longer a problem, and my answer is obsolete (go() now returns 30 after mucking with the console). This was fixed in July 2013, according to the bug report linked above in gabrielmaldi's comment. It alarms me that I'm still getting upvotes - makes me think the upvoter doesn't understand either the question or my answer.

根据Mikael Mayer的回答，这不再是一个问题，我的答案已经过时了(go()现在在删除控制台后返回30)。这是在2013年7月修正的，根据上面加布瑞尔马尔迪评论中链接的bug报告。这让我警觉到，我还在获得更多的选票——这让我觉得选民们既不理解我的问题，也不理解我的答案。

I'll leave my original answer here for historical reasons, but go upvote Mikaël's answer instead.

由于历史原因，我将把我最初的答案留在这里，但是请大家投票支持Mikael的答案。

---

The trick is that you can't change a local variable directly, but you can modify the properties of an object. You can also modify the value of a global variable:

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

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

console:

控制台:

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

Check the result of go() after setting the breakpoint and running those calls in the console, and you'll find that the result is 20, rather than 0 (but sadly, not 30).

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

#2

This is now possible in chrome 35 (today as of July 11, 2014). I don't know which version allowed it first though.

这在chrome 35中是可行的(今天是2014年7月11日)。我不知道是哪个版本允许的。

Just tested @gilly3 example on my machine and it works.

我刚刚在我的机器上测试了@gilly3的例子，它是有效的。

• Open the console, in Sources and the tab Snippets, add a new snippet, paste the following code into it:

  打开控制台，在源代码和选项卡片段中，添加一个新代码片段，将以下代码粘贴到其中:

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

  var g_n = 0;函数go() {var n = 0;var o = {n: 0};返回g_n + n + o.n;/ /这里断点}

• Right-click the snippet name, click 'Run' (this does not fire the function though)

  右键单击代码片段的名称，单击“Run”(这不会触发函数)

• Add the breakpoint at the return statement.
• 在return语句中添加断点。
• In the console below, type go()
• 在下面的控制台中，输入go()
• and change the variable values as demonstrated below
• 并更改如下所示的变量值

and the returned result g_n + n + o.n is 30.

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

#3

This is an acknowledged bug in the Chrome Dev Tools:

这是Chrome开发工具中公认的缺陷:

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

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

#4

Firebug seems to allow you to do that.

Firebug似乎允许你这么做。

#5

It looks like not.

它看起来像。

Put a breakpoint, when it stops switch to the console, try to set the variable. It does not error when you assign it a different value, but if you read it after the assignment, it's unmodified. :-/

设置一个断点，当它停止切换到控制台时，尝试设置变量。当你给它分配一个不同的值时，它不会出错，但是如果你在分配之后读它，它就不会被修改。:- /

#6

Actually there is a workaround. Copy the entire method, modify it's name, e.g. originalName() to originalName2() but modify the variable inside to take on whatever value you want, or pass it in as a parameter.

实际上有一个变通的办法。复制整个方法，修改它的名称，例如原始名称()到原始名称2()，但是修改内部的变量以获取您想要的任何值，或者将其作为参数传递。

Then if you call this method directly from the console, it will have the same functionality but you will be able to modify the variable values.

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

If the method is called automatically then instead type into the console

如果该方法被自动调用，那么应该输入控制台

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

#7

I'm able to modify a script variable value by assignment in the Console. Seems simplest.

我可以通过控制台中的赋值来修改脚本变量值。看起来简单。

#8

I don't know why chrome team don't allow this silly feature ... but the only way I could change variable values with success is to modify the script directly in the chrome editor under "Sources" Tab (this changes the behavior of your script until you refresh the page), but that changes will lost when refresh, so be carefull.

我不知道为什么chrome团队不允许这个愚蠢的功能。但是，唯一能够成功地更改变量值的方法是在“源代码”选项卡下直接修改chrome编辑器中的脚本(这将更改脚本的行为，直到您刷新页面)，但是当刷新时，这些更改将丢失，所以要小心。

#9

I was having the same issue, went to the 'About Google Chrome'->Help and it said I needed to restart my browser to get the latest updates.

我也有同样的问题，我去了谷歌Chrome——>帮助，它说我需要重新启动浏览器才能获得最新的更新。

I did this, and suddenly, I can now change local variables. Simply click the variable you want to edit in the Scope Variables window, and type in your new value.

我这样做了，突然，我可以改变局部变量了。只需单击要在Scope Variables窗口中编辑的变量，然后输入新值。

I did notice some oddities though, that I had to step over some unrelated var assignments before I could alter the text in the right hand window (Scope Variables).

我确实注意到了一些奇怪的地方，在我可以修改右边窗口中的文本(作用域变量)之前，我必须跳过一些不相关的var赋值。

#10

Yes! Finally! I just tried it with Chrome, Version 66.0.3359.170 (Official Build) (64-bit) on Mac.

是的!终于!我在Mac上试用了Chrome，版本是66.0.3359.170(官方版本)(64位)。

You can change the values in the scopes as in the first picture, or with the console as in the second picture.

您可以在第一张图片中更改作用域中的值，也可以在第二张图片中更改控制台的值。