1

我了解将源映射与 JavaScript 一起使用的概念，以便通过缩小脚本等更轻松地进行调试。我不明白的是源级调试如何像 Visual Studio 中的 TypeScript 那样工作（http://blogs.msdn.xml）。 com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx）。

例如，如果我创建自己的语言来编译/翻译为 JavaScript，我如何与浏览器交互以提供这种源代码级调试？有这方面的标准协议吗？Visual Studio 是如何做到的？

更新

为了进一步澄清，假设我发明了一种名为 Caffeinated Beverage Script 的语言，它可以编译为 JavaScript。我为我的语言构建了一个 IDE，我希望能够在我的 IDE 中设置断点、单步执行代码、检查变量等，同时 JavaScript 在浏览器中运行。如何让我的 IDE 与此级别的浏览器进行通信？

4

2 回答 2

1

诚然，这是一个糟糕的答案，但我认为它总比没有好。如果我站在你的立场上，我会这样做：

现在显然可以使用某种插件从浏览器到 IDE 进行通信，但我不喜欢这样至少有两个原因：我不喜欢使用强类型语言进行编码，而且我生成的任何代码都是本质上是特定于浏览器的。虽然它不是最轻量级的解决方案，但阻塞模式下的 XHR 可以完成工作。

IDE 将托管一个发送CORS 标头的 http 服务器。编译后的源代码将包含如下内容：

var ___, __INTERRUPT_SIGNAL = {};

(function() {
  var oXhr = new XMLHttpRequest();

  oXhr.open('POST', 'http://localhost/debugging_port', false); // Force XHR to work synchronously

  ___ = function(nLineNumber) {
    var sState = 'line_number='+nLineNumber;

    for(var nOffset = 0; nOffset < arguments.length; nOffset++) sState += '&i=' + escape(arguments[nOffset]);

    oXhr.send(sState);

    if(oXhr.status !== 200) return ___.apply(this, arguments); 
    var sCommand = oXhr.responseText;

    if(sCommand === 'step_into') {
      return;  
    }else if(sCommand === 'step_out') {
      throw __INTERRUPT_SIGNAL;
    }else{
      return ___.apply(this, arguments);
    }   
  };
})();

现在，当 Caffeinated Beverage Script 编译器编译源代码时，它应该在源代码的每个换行处调用_函数。例如，

int nCheese = 0;
char cLetter = 'Q';
customClass productZeroQ = nCheese * cLetter;

可能会编译成类似的东西

var $0xA1, $0xA2, $0xA3;
___(9, $0xA1, $0xA2, $0xA3);
$0xA1 = 0;
___(10, $0xA1, $0xA2, $0xA3);
$0xA2 = 'Q';
___(11, $0xA1, $0xA2, $0xA3);
try {
  $0xA3 = $0x34.$0x21($0xA1, $0xA2);
}catch(oSignal){
  if(oSignal !== ___INTERRUPT_SIGNAL) throw oSignal;
}

XHR 将在 IDE 决定是 step_out 还是 step_forward 时阻止执行。这可以扩展到包括堆栈跟踪，但我不想写小说。

我知道这很丑陋，但我希望这会有所帮助！

于 2013-07-26T00:58:59.453 回答
1

你可以考虑 WebKit 的远程调试 API：

https://developers.google.com/chrome-developer-tools/docs/protocol/1.0/index

我相信这就是 Sublime Web Inspector 使用的。

https://github.com/sokolovstas/SublimeWebInspector

于 2013-07-26T08:35:47.723 回答