Я уже писал в блоге о проекте 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 для помощи.