Both firebug and the built in console in webkit browsers make it possible to set breakpoints in running Javascript code, so you can debug it as you would with any other language.
firebug和webkit浏览器中的内置控制台都可以在运行Javascript代码时设置断点，因此您可以像使用任何其他语言一样调试它。
What I'm wondering is if there is any way that I can instruct firebug or webkit that I'd like to set a breakpoint on line X in file Y at runtime, and to be able to examine variables in the specific scope that I have paused in.
我想知道的是，如果有任何方法可以指示firebug或webkit，我想在运行时在文件Y中的第X行设置断点，并且能够检查我在特定范围内的变量停顿了一下。
I need something that can work in both Chrome (or any other webkit browser) and Firefox. For the latter Firebug is an acceptable dependency. Supporting IE is not a requirement.
我需要能够在Chrome（或任何其他webkit浏览器）和Firefox中运行的东西。对于后者，Firebug是可接受的依赖。不要求支持IE。
I've been building an in-browser IDE ( quick video for the interested: http://www.youtube.com/watch?v=c5lGwqi8L_g ) and want to give it a bit more meat.
我一直在构建一个浏览器内的IDE（感兴趣的快速视频：http：//www.youtube.com/watch？v = c5lGwqi8L_g）并希望给它更多的肉。
One thing I did try was just adding debugger; as an extra line where users set them, but this isn't really an ideal solution.
我尝试过的一件事就是添加调试器;作为用户设置它们的额外线路，但这不是一个理想的解决方案。
3 个解决方案
#1
5
I'd say you can definitely do this for webkit browsers using the remote debugging protocol. This is based on a websocket connection and a json message protocol that goes back and forth.
我说你肯定可以使用远程调试协议为webkit浏览器做这件事。这是基于websocket连接和来回的json消息协议。
You can read the announcement and the whole protocol schema.
您可以阅读公告和整个协议架构。
Chrome also offers more information about this inside its remote developer-tools docs.
Chrome还在其远程开发人员工具文档中提供了有关此内容的更多信息。
For the debugger domain, for instance, you can see how you can use Debugger.setBreakpoint, Debugger.setBreakpointByUrl and Debugger.setBreakpointsActive to work with breakpoints.
例如，对于调试器域，您可以看到如何使用Debugger.setBreakpoint，Debugger.setBreakpointByUrl和Debugger.setBreakpointsActive来处理断点。
On the other hand, Mozilla also seems to be working on this as you can see in https://developer.mozilla.org/en-US/docs/Tools/Debugger-API and https://wiki.mozilla.org/Remote_Debugging_Protocol though I don't know the completion status of it.
另一方面，Mozilla似乎也正在研究这个问题，你可以在https://developer.mozilla.org/en-US/docs/Tools/Debugger-API和https://wiki.mozilla.org/看到。 Remote_Debugging_Protocol虽然我不知道它的完成状态。
In this case, you can work with breakpoints using the Debugger.Script APIs setBreakPoint, getBreakPoint, getBreakpoints, clearBreakpoints and clearAllBreakpoints
在这种情况下，您可以使用Debugger.Script API setBreakPoint，getBreakPoint，getBreakpoints，clearBreakpoints和clearAllBreakpoints来处理断点。
I hope this helps you move forward.
我希望这可以帮助你前进。
#2
1
There isn't such a thing, at least not using the public, scriptable side of JavaScript. It would be possible if you have a privileged browser extension that could do that for you. For example, Firebug has a debug method which you can call from its command line, but not from scripts inside a page.
没有这样的事情，至少不使用JavaScript的公共可脚本化方面。如果您拥有可以为您执行此操作的特权浏览器扩展，那么这是可能的。例如，Firebug有一个调试方法，您可以从其命令行调用，但不能从页面内的脚本调用。
So, you have two solutions:
那么，你有两个解决方案：
- Implement your own JavaScript interpreter, which you can control as you wish. Might be a bit too ambitious, though...
- 实现自己的JavaScript解释器，您可以根据需要进行控制。可能有点过于雄心勃勃，但......
- Rely on a browser extension that can set breakpoints anywhere in the code, expose some API to public code, and interact with it from your JavaScript. But that means that users will have to install some extra piece of software before they can use your "Web IDE".
- 依赖于可以在代码中的任何位置设置断点的浏览器扩展，将一些API公开给公共代码，并通过JavaScript与它进行交互。但这意味着用户必须先安装一些额外的软件才能使用“Web IDE”。
#3
0
Use _defineSetter__ to watch variables, and combine it with a call to debugger when an assignment happens.
使用_defineSetter__来监视变量，并在分配发生时将其与对调试器的调用相结合。
__defineSetter__("name", function() { debugger; });
or defineProperty:
或defineProperty：
function setter () { debugger; }
Object.defineProperty(Math, 'name', { set: setter });
References
参考
-
MDN：Object.defineProperty
-
A List Apart: Advanced Debugging With JavaScript
列表分开：使用JavaScript进行高级调试
-
JavaScript Getters and Setters
JavaScript Getters和Setters
#1
5
I'd say you can definitely do this for webkit browsers using the remote debugging protocol. This is based on a websocket connection and a json message protocol that goes back and forth.
我说你肯定可以使用远程调试协议为webkit浏览器做这件事。这是基于websocket连接和来回的json消息协议。
You can read the announcement and the whole protocol schema.
您可以阅读公告和整个协议架构。
Chrome also offers more information about this inside its remote developer-tools docs.
Chrome还在其远程开发人员工具文档中提供了有关此内容的更多信息。
For the debugger domain, for instance, you can see how you can use Debugger.setBreakpoint, Debugger.setBreakpointByUrl and Debugger.setBreakpointsActive to work with breakpoints.
例如，对于调试器域，您可以看到如何使用Debugger.setBreakpoint，Debugger.setBreakpointByUrl和Debugger.setBreakpointsActive来处理断点。
On the other hand, Mozilla also seems to be working on this as you can see in https://developer.mozilla.org/en-US/docs/Tools/Debugger-API and https://wiki.mozilla.org/Remote_Debugging_Protocol though I don't know the completion status of it.
另一方面，Mozilla似乎也正在研究这个问题，你可以在https://developer.mozilla.org/en-US/docs/Tools/Debugger-API和https://wiki.mozilla.org/看到。 Remote_Debugging_Protocol虽然我不知道它的完成状态。
In this case, you can work with breakpoints using the Debugger.Script APIs setBreakPoint, getBreakPoint, getBreakpoints, clearBreakpoints and clearAllBreakpoints
在这种情况下，您可以使用Debugger.Script API setBreakPoint，getBreakPoint，getBreakpoints，clearBreakpoints和clearAllBreakpoints来处理断点。
I hope this helps you move forward.
我希望这可以帮助你前进。
#2
1
There isn't such a thing, at least not using the public, scriptable side of JavaScript. It would be possible if you have a privileged browser extension that could do that for you. For example, Firebug has a debug method which you can call from its command line, but not from scripts inside a page.
没有这样的事情，至少不使用JavaScript的公共可脚本化方面。如果您拥有可以为您执行此操作的特权浏览器扩展，那么这是可能的。例如，Firebug有一个调试方法，您可以从其命令行调用，但不能从页面内的脚本调用。
So, you have two solutions:
那么，你有两个解决方案：
- Implement your own JavaScript interpreter, which you can control as you wish. Might be a bit too ambitious, though...
- 实现自己的JavaScript解释器，您可以根据需要进行控制。可能有点过于雄心勃勃，但......
- Rely on a browser extension that can set breakpoints anywhere in the code, expose some API to public code, and interact with it from your JavaScript. But that means that users will have to install some extra piece of software before they can use your "Web IDE".
- 依赖于可以在代码中的任何位置设置断点的浏览器扩展，将一些API公开给公共代码，并通过JavaScript与它进行交互。但这意味着用户必须先安装一些额外的软件才能使用“Web IDE”。
#3
0
Use _defineSetter__ to watch variables, and combine it with a call to debugger when an assignment happens.
使用_defineSetter__来监视变量，并在分配发生时将其与对调试器的调用相结合。
__defineSetter__("name", function() { debugger; });
or defineProperty:
或defineProperty：
function setter () { debugger; }
Object.defineProperty(Math, 'name', { set: setter });
References
参考
-
MDN：Object.defineProperty
-
A List Apart: Advanced Debugging With JavaScript
列表分开：使用JavaScript进行高级调试
-
JavaScript Getters and Setters
JavaScript Getters和Setters