Статьи

Советы по использованию скобок и Тезей

Я уже писал в блоге о проекте Theseus , способе отладки клиентского и серверного JavaScript, но я так и не удосужился протестировать его. Сегодня в блоге Brackets обсуждалась последняя версия 0.4 и как она работает в Brackets. Я столкнулся с несколькими проблемами (часть моего недоразумения и часть простых проблем), поэтому я решил поделиться некоторыми советами и примерами того, как работает Тесей. Я благодарю Томаса Либера и Джоэла Брандта за помощь!

В двух словах, Тесей может помочь вам увидеть, какие методы вызываются, какие аргументы передаются им, и проверять трассировки стека для вашего кода. Это поддерживается для «обычного» кода на стороне клиента, Node.js на сервере и обоих вместе.

Давайте рассмотрим простой пример, приложение на стороне клиента. Если вы посмотрите видео в записи блога, на которую я ссылался выше, вы заметите, что рассказчик говорит, что он «включает Тесея», и все просто работает. Я не совсем понял это. Я установил расширение Theseus (помните, что вы можете сделать это очень легко с помощью диспетчера расширений Brackets), но единственное меню, которое я заметил, было Debug / Debug Brackets with Theseus. Меня не интересовали отладки скобок, просто мой обычный код.

Оказывается, это было в меню Файл и уже включено:

Итак, учитывая простую HTML-страницу (и да, Тесей будет работать с JavaScript, встроенным в HTML-страницу, что приятно!), Вы можете щелкнуть значок Live Development, и вам будет хорошо идти.

Рассмотрим следующий код. Это простой пример элемента управления HTML5 Datalist, привязанного к данным на стороне сервера ( запись в блоге ).

<!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>

Подключив Brackets к моему браузеру и немного набрав, я сразу вижу, как Тесей работает!

Но смотри … это сломано. Об этом сообщает документ. Сообщается о входных звонках. Но мои 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");
 });

А теперь проверь это …

Итак, моя следующая проблема заключалась в том, как использовать это с Node. Хотя это задокументировано на странице Theseus GitHub, если вы только что прочитали блог Bracket, вы можете пропустить это. Вам необходимо установить node-theseus через NPM, а затем запустить приложение в командной строке с помощью node-theseus. Затем вы можете столкнуться с этой ошибкой:

[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? Это не имело смысла для меня, так как Экспресс запустился, и мое приложение было доступно. Оказалось, что Тесей использовал порт 8888 в фоновом режиме, и этот порт использовался чем-то другим на моей машине. Убийство, которое исправило все.

На этом этапе вы все еще хотите подключить Brackets к Chrome — вы можете забыть об этом. И вы можете — я все еще копаюсь в этом — нужно переключить опцию «прокси» в меню «Файл скобок», как показано выше. Но это должно работать отлично. Одна вещь, которая сбила меня с толку на секунду, заключалась в следующем: у меня есть это в моем app.js:

app.get (‘/’, rout.index);
app.get (‘/ data’, rout.data);

Я заметил, что Тесей этого не заметил. Оказывается, это было замечено в файле rout.index.js, что имеет смысл. Вот где настоящий код. Вот снимок экрана из этого файла:

Вот и ты. В общем, чертовски увлекательно. Я определенно рекомендую проверить это, и если у вас возникли проблемы, как у меня, воспользуйтесь theusus Discuss Google Group для помощи.