使用括号和忒修斯的提示


我以前在博客上写过Theseus项目,这是一种调试客户端和服务器端JavaScript的方法,但我从未真正测试过它。今天,括号博客discussed最新的0.4版本及其在括号中的工作方式。我遇到了一些问题(一部分是我的误解,一部分是简单的问题),所以我想分享一些关于忒修斯如何工作的技巧和例子。我感谢托马斯·利伯和乔尔·勃兰特的帮助!

简而言之,忒修斯可以帮助你看到什么方法被调用,什么参数被传递给他们,并检查你的代码堆栈跟踪。“常规”客户端代码、服务器上的Node.js以及两者都支持这一点。

让我们考虑一个简单的例子,客户端应用程序。如果你看了我上面链接的博客条目上的视频,你会注意到解说员说他“启用了忒修斯”,事情就这么办了。我不太明白。我已经安装了忒修斯扩展(记得你可以通过使用括号扩展管理器很容易做到),但我唯一注意到的菜单是用忒修斯调试/调试括号。我对调试括号不感兴趣,只对我的常规代码感兴趣。

原来它在“文件”菜单下,并且已经启用:

所以,给定一个简单的网页(是的,忒修斯将使用嵌入在网页中的JavaScript,这很好!),您可以单击实时发展图标,然后就可以开始了。

考虑以下代码。这是绑定到服务器端数据的HTML5 Datalist控件的一个简单示例(blog post)。

<!doctype html>
<html>
<head>
<title>Example 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  if(document.createElement("datalist").options) {

		$("#search").on("input", function(e) {
			var val = $(this).val();
			if(val === "") return;
			//You could use this to limit results
			//if(val.length < 3) return;
			console.log(val);

			$.get("artservice.cfc?method=getart&returnformat=json", {term:val}, function(res) {
                console.log('got stuff');
                alert('hi');
				var dataList = $("#searchresults");
				dataList.empty();
				if(res.DATA.length) {
					for(var i=0, len=res.DATA.length; i<len; i++) {
						var opt = $("<option></option>").attr("value", res.DATA[i][0]);
						dataList.append(opt);
					}

				}
			},"json");
        
        });

	}

})
</script>	
</head>

<body>

<p>
	<input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off">
	<datalist id="searchresults"></datalist>
</p>

</body>
</html>

在将支架连接到我的浏览器并输入一点后,我可以立即看到忒修斯在工作!

但是看...它坏了。它报告文件。准备。它报告输入调用。但是我的Ajax调用没有成功。WTF。愚蠢的开源软件。

我突然想到...等待...这个Ajax事件触发正确吗?原来我的后端应用服务器已经死了。注意到我的jQuery代码没有错误处理程序吗?是的,那是个测试。如果你注意到了,你就通过了。我重写了我的代码:

$.get("artservice.cfc?method=getart&returnformat=json", {term:val}, function(res) {
    console.log('got stuff');
    var dataList = $("#searchresults");
    dataList.empty();
    if(res.DATA.length) {
         for(var i=0, len=res.DATA.length; i<len; i++) {
              var opt = $("<option></option>").attr("value", res.DATA[i][0]);
              dataList.append(opt);
         }

    }
},"json").done(function() {
   console.log("done");
}).fail(function(e) {
   console.log("freaking fail");
 });

现在检查一下...

所以,我的下一个问题是如何在节点上使用它。虽然记录在忒修斯网站的网页上,但如果你只是阅读托槽的博客,你可能会错过这个。您需要通过NPM安装node-忒修斯,然后使用node-忒修斯在命令行上运行您的应用程序。然后,您可能会遇到这个错误:

[node-theseus] caught uncaught exception
Error: listen EADDRINUSE
    at errnoException (net.js:901:11)
    at Server._listen2 (net.js:1039:14)
    at listen (net.js:1061:10)
    at Server.listen (net.js:1127:5)
    at Object.exports.listen (/usr/local/lib/node_modules/node-theseus/node_modules/websocket.io/lib/websocket.io.js:62:10)
    at Object.exports.listen (/usr/local/lib/node_modules/node-theseus/node-theseus.js:88:14)
    at Object. (/usr/local/lib/node_modules/node-theseus/bin/node-theseus:92:14)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
[node-theseus] caught process.exit(), not exiting
Express server listening on port 3000

注意到EADDRINUSE错误了吗?这对我来说没有意义,因为Express确实启动了,而且我的应用程序是可用的。原来忒修斯在后台使用的是端口8888,而那个端口正被我机器上的其他东西使用。杀死那些修复了一切的人。

在这一点上,你仍然想连接支架到铬-你可能会忘记这一点。你可能——我还在深入研究这个——需要切换如上所示的括号文件菜单下的“代理”选项。但是它应该很有效。有一件事让我困惑了一秒钟,那就是:我的应用程序里有这个。

app.get('/',routes . index);
app.get('/data ',routes . data);

我注意到忒修斯没有注意到这一点。原来它在routes.index.js中注明了,这有点道理。这就是真正的代码所在。以下是该文件的屏幕截图:

给你。总之,非常迷人。我绝对推荐你去看看,如果你像我一样有困难,就用Theseus Discuss谷歌集团寻求帮助。