Changing local scope variables in debuggers

Question

I've been stepping through some JavaScript code (in this case, Prototype's AJAX library) to catch a glimpse of the responseText. I've read that in Firebug and IE Developer Tools you can modify variables within whatever your local scope is at the breakpoint.

I see that I can do this, by way of double-clicking a variable in the locals pane or via context menu. I've seen it work, but not all of the time, and not when I need it most: right as the responseText comes in and I want to edit it.

To illustrate this:

I want to change the highlighted property's value.

But the changes aren't reflected. In fact, no property changes are reflected in the entire transport object.

Why am I even trying to do this? Well, there's a snippet of JavaScript in that responseText which gets executed by Prototype's evalScripts() method, and there's possibly a syntax error in it. This is causing Magento to get a "white screen of death" on a category edit form. I found my syntax error in the JavaScript, and fixed it in the development environment. But I also wanted to double-check this fix in my staging environment (on which I do not have write access). So my thinking is to intercept the responseText on a staging environment client-side page request, change it to fix the JS errors, and let it pass through to prove my bug fix.

I can just wait until this code is pushed and tested on staging, but my real point of asking this question is to figure out why I can modify some local scope vars and not others.

I hope I've asked this clearly. Any help would be appreciated. Thanks!

UPDATE (Chrome): I thought it worthwhile to mention that Chrome has been late to support this functionality at all, but recent (Mar 21) developments are under way, according to this article:

https://code.google.com/p/v8/issues/detail?id=212

The poster of this issue, though, explains some of the underlying components of a debugging engine that I wasn't aware of. Very insightful. Doesn't answer my question, but still pertains to the topic.

Answer 1

The responseText property is read-only! You'll find that neither debuggers nor any JS statement or expression can modify the property. You'll need to assign it to another local variable or property before you can change it. I rigged up a demonstration for you. You're seeing read-only nature of certain properties of certain builtin objects, of which XMLHttpRequest is one. This is not an issue with debugging or inspecting environments, but a feature of the language environment itself.

Note that while builtin browser objects can be read-only, it's harder to set your own objects to be read-only. The Object.freeze method exists in ES5, but is not supported across all browsers (and carries a performance penalty in V8 as of this writing).