Как отлаживать приложение Meteor с помощью WebStorm IDE?

17

Может ли кто-нибудь предоставить короткий список шагов по подключению приложения Meteor к отладчику WebStorm, пожалуйста?

    
задан net.user 07.02.2013 в 13:26
источник
  • Чтобы отладить приложение meteor в среде IDE, вы можете выполнить следующие действия: youtrack.jetbrains.com/issue/WEB-6264#comment=27-445048 –  LazyOne 14.02.2013 в 10:43
  • Большое спасибо! Это работает очень хорошо! :) –  net.user 14.02.2013 в 13:40
  • WebStorm имеет поддержку Meteor в течение нескольких месяцев. @BenjaminRH, не могли бы вы удалить старый комментарий? Благодаря! –  Dan Dascalescu 17.01.2015 в 23:24

6 ответов

22

WebStorm - единственная среда IDE с встроенной поддержкой отладки кода сервера Meteor - отметьте это видео . Даже в Windows отладка очень проста:

WebStorm 9 +

Перейдите в Run - & gt; Debug - & gt; Измените настройки ..., щелкните знак плюса, нажмите «Метеор». Вы можете добавить переменную окружения, такую ​​как ROOT_URL, если вам нужно.

WebStorm старше 9

Этот ответ сохраняется только в исторических целях. Вам следует обновить WebStorm.

В старых WebStorms вам приходилось создавать конфигурацию отладки Node.js.

  • на сервере, экспортируйте переменную среды NODE_OPTIONS=--debug=47977 . Например,

    NODE_OPTIONS=--debug=47977 meteor  # Linux/Mac
    set NODE_OPTIONS=--debug=47977 & meteor'  # Windows
    
  • создать конфигурацию запуска / отладки WebStorm / PhpStorm с помощью порта выше (47977) и хоста сервера. Оставьте 127.0.0.1, если вы отлаживаете локально.

  • в WebStorm, Run - & gt; Debug & lt; myapp & gt ;, или нажмите Shift + F9. Убедитесь, что вы видите «Подключено к & lt; ваш хост & gt;» на панели «Отладка»

Теперь вы можете установить точки останова, получить доступ к локальным переменным и т. д.

Для отладки клиента просто используйте отладчик Chrome или Firebug.

Устранение неполадок

  • Process disconnected unexpectedly - это происходит, когда метеорит перезапускается автоматически из-за отсутствия конкретной поддержки для Метеор. Just Run - & gt; Debug & lt; myapp & gt ;, или снова нажмите Shift + F9.

  • вы не можете подключиться к серверу - убедитесь, что правила брандмауэра разрешают входящие подключения к любому порту, который вы выбрали для отладчика Node.js (47977 здесь).

ответ дан Dan Dascalescu 05.02.2014 в 08:36
источник
  • Это потрясающе. Большое спасибо Дэн! –  JohnAllen 05.02.2014 в 08:48
  • Еще одно замечание о том, что опция Share в конфигурации запуска также важна. Я пропустил это. –  orlade 16.02.2014 в 02:39
  • @ Pie21: вы знаете, что делает этот вариант? У него нет всплывающей подсказки, и если я правильно помню, это не повлияло на мою настройку. –  Dan Dascalescu 17.02.2014 в 11:16
  • @DanDascalescu: Честно говоря, даже с флажком он все еще не поймал точки останова для меня, но он, по крайней мере, сказал «подключен». Я не проводил тщательного тестирования и, возможно, просто перезапустил отладчик, который исправил соединение, но я предполагаю, что это означает, что вы можете иметь несколько отладчиков в одном и том же порту или что-то в этом роде. Я не тот человек, которого нужно спросить; мой комментарий был, возможно, немного ложной уверенностью :). –  orlade 18.02.2014 в 00:16
  • Не работает для меня, даже с помощью флажка share. Я получаю «Не могу подключиться» в переменных. Я дистанционно подключился к серверу Meteor 0.8.0.1 и полностью отключил брандмауэр. –  foobarbecue 28.04.2014 в 01:25
10

Другие ответы теперь устарели. Не добавляйте конфигурацию отладки Node.js, как описано выше, или беспокоитесь о spyjs.

Если вы используете Webstorm 9.0, это так же просто, как выполнить Run - & gt; Debug - & gt; Измените настройки ..., щелкните по плюсу, нажмите «Метеор».

WebStorm также может попросить вас установить надстройку браузера, но это просто для отладки на стороне клиента; просто добавьте точку останова в код на стороне сервера, и вы увидите, что она работает из коробки.

JetBrains обновили видео, которое было связано с в ответе Дана Даскалеску выше, и он показывает вам процесс, который я только что описал.     

ответ дан foobarbecue 25.01.2015 в 07:30
источник
4

Для приложений, использующих webpack:webpack , использование профиля отладки Meteor WebStorm не работает.

Моя настройка использует webpack:webpack v1.0.12, Meteor v1.3.0 и WebStorm 2016.1, но, скорее всего, будет работать с более поздними версиями (обратите внимание, что исправление только для этой проблемы было выпущено в версии 1.0.12, поэтому более ранние версии, вероятно, не работать с этой процедурой).

Вот что я сделал, чтобы заставить его работать:

  1. Создайте файл webpack.json в корне проекта.

    Он должен включать конфигурацию devtool , которая генерирует исходные карты, которые помогают отлаживать. Остальные могут быть изменены в соответствии с вашей конкретной настройкой.

    {
      "root": "src",
      "devServer": {
        "host": "localhost"
      },
      "devtool": "source-map"
    }
    
  2. Создайте настройку отладки:

    Node.js Удаленная отладка, порт 5858 (порт настраивается).

  3. Выполнить meteor debug

    Вы можете указать порт, используя --debug-port <port number> .

    Подробнее см. в meteor help debug .

  4. Подключите WebStorm к отладчику

    • запустите отладчик click "debug" «> </a>
</Li>
<li> сообщение о состоянии должно указывать, что оно подключено. Скрипты должны быть доступны на вкладке  <code>Scripts</code>  .
<a href="https://i.stack.imgur.com/euE9X.png"> <img src="https://i.stack.imgur.com/euE9X.png"> </a>
</Li>
<li> сервер должен работать в консоли
<a href="https://i.stack.imgur.com/QJ08R.png"> <img src="https://i.stack.imgur.com/QJ08R.png"> </a>
</Li>
</UL>
</Li>
<li> <p> Поразите свои точки останова и радуйтесь. </p> </li>
</ol>
</DIV>                                    </div>
                                    <div class="action-time">
                                        ответ дан
                                                                                    <a href="https://stackoverflow.com/users/268093/masteram" rel="noopener" target="_blank">
                                                                                    MasterAM                                                                                    </a>
                                                                                <span title="36333472" class="relativetime"> 31.03.2016 в 14:26</span>
                                    </div>
                                    <a class="a-link" href="https://stackoverflow.com/questions/14751080/how-can-i-debug-my-meteor-app-using-the-webstorm-ide/36333472#36333472" target="_blank" rel="noopener">источник</a>
                                    <div class="clearfix"></div>
                                    <div class="comments">
            <ul class="comments-list">
                            <li id="comment-63874812" class="comment js-comment " data-comment-id="63874812">
                    <div class="comment-text js-comment-text-and-form">
                        <div class="comment-body">
                            <span class="comment-copy">Теперь, если бы был только способ отладки «теста метеоров» ...</span>
                            – 
                            <span href="#" title="" class="comment-user">FGM</span>
                            <span class="comment-date" dir="ltr">
                                <span title="06.07.2016 в 16:24" class="relativetime-clean">06.07.2016 в 16:24</span>
                            </span>
                        </div>
                    </div>
                </li>
                    </ul>
        
</div>                                </div>
                            </div>
                        </div>
                                                                                <div class="answer" id="26244256" itemscope="" itemtype="http://schema.org/Answer">
                            <div class="left-row">
                                <div class="votes">
                                    <i class="fa fa-caret-up vote"></i>
                                    <div class="vote-count" itemprop="upvoteCount">3</div>
                                    <i class="fa fa-caret-down vote"></i>
                                </div>
                            </div>
                            <div class="answer-row">
                                <div class="answer-text">
                                    <div class="description" itemprop="text">
                                        <div class="post-text" itemprop="text">
<p> WebStorm 9 будет поддерживать Meteor. Пока WS 9 еще не выпущен (по состоянию на 7 октября 2014 года), существует <a href="http://confluence.jetbrains.com/display/WI/WebStorm+9+EAP"> программа раннего доступа для WS 9 </a>. </P>

<p> Прочитайте блог JetBrains WebStorm, в котором <a href="http://blog.jetbrains.com/webstorm/2014/09/meteor-support-in-webstorm-9/"> описывает некоторые функции поддержки Meteor </a> и включает краткое видео. </p>

<p> Я новичок в Meteor, WebStorm (и JavaScript, если на то пошло), и использовал сборку WS 9 EAP 138.2406 в течение нескольких недель. Я могу запустить свой проект из среды IDE, установить точки останова, пройти код, проверить значения, перейти к определениям и завершить выпуск. Это очень полезно. </P>
    </DIV>                                    </div>
                                    <div class="action-time">
                                        ответ дан
                                                                                    <a href="https://stackoverflow.com/users/570573/mark-d" rel="noopener" target="_blank">
                                                                                    Mark D                                                                                    </a>
                                                                                <span title="26244256" class="relativetime"> 07.10.2014 в 22:01</span>
                                    </div>
                                    <a class="a-link" href="https://stackoverflow.com/questions/14751080/how-can-i-debug-my-meteor-app-using-the-webstorm-ide/26244256#26244256" target="_blank" rel="noopener">источник</a>
                                    <div class="clearfix"></div>
                                    <div class="comments">
    
</div>                                </div>
                            </div>
                        </div>
                                                                                <div class="answer" id="26921470" itemscope="" itemtype="http://schema.org/Answer">
                            <div class="left-row">
                                <div class="votes">
                                    <i class="fa fa-caret-up vote"></i>
                                    <div class="vote-count" itemprop="upvoteCount">0</div>
                                    <i class="fa fa-caret-down vote"></i>
                                </div>
                            </div>
                            <div class="answer-row">
                                <div class="answer-text">
                                    <div class="description" itemprop="text">
                                        <div class="post-text" itemprop="text">
<p> Вы можете попробовать плагин spyjs для Webstorm: <a href="http://blog.jetbrains.com/webstorm/2014/04/spy-js-webstorm-secret-service/"> Ссылка </a> </р>
    </DIV>                                    </div>
                                    <div class="action-time">
                                        ответ дан
                                                                                    <a href="https://stackoverflow.com/users/3022883/m%c3%a1rio" rel="noopener" target="_blank">
                                                                                    Mário                                                                                    </a>
                                                                                <span title="26921470" class="relativetime"> 14.11.2014 в 02:22</span>
                                    </div>
                                    <a class="a-link" href="https://stackoverflow.com/questions/14751080/how-can-i-debug-my-meteor-app-using-the-webstorm-ide/26921470#26921470" target="_blank" rel="noopener">источник</a>
                                    <div class="clearfix"></div>
                                    <div class="comments">
            <ul class="comments-list">
                            <li id="comment-50903728" class="comment js-comment " data-comment-id="50903728">
                    <div class="comment-text js-comment-text-and-form">
                        <div class="comment-body">
                            <span class="comment-copy">SpyJS, в то время как полезный тоже, делает что-то еще.</span>
                            – 
                            <span href="#" title="" class="comment-user">Dan Dascalescu</span>
                            <span class="comment-date" dir="ltr">
                                <span title="17.07.2015 в 07:36" class="relativetime-clean">17.07.2015 в 07:36</span>
                            </span>
                        </div>
                    </div>
                </li>
                    </ul>
        
</div>                                </div>
                            </div>
                        </div>
                                                                                <div class="answer" id="35315016" itemscope="" itemtype="http://schema.org/Answer">
                            <div class="left-row">
                                <div class="votes">
                                    <i class="fa fa-caret-up vote"></i>
                                    <div class="vote-count" itemprop="upvoteCount">0</div>
                                    <i class="fa fa-caret-down vote"></i>
                                </div>
                            </div>
                            <div class="answer-row">
                                <div class="answer-text">
                                    <div class="description" itemprop="text">
                                        <div class="post-text" itemprop="text">
<p> Существует ошибка <a href="https://youtrack.jetbrains.com/issue/WEB-19334"> </a> со старыми версиями Webstorm для отладки серверной части Meteor 1.2.x. Последняя версия Webstorm (11.0.3), выпущенная 24 декабря 2015 года, исправила ее. Примечания к выпуску можно найти здесь: <a href="https://confluence.jetbrains.com/display/WI/WebStorm+143.1559.5+Release+Notes"> Ссылка </a> </p>

<p> Теперь я могу отлаживать без проблем из Webstorm:) </p>
    </DIV>                                    </div>
                                    <div class="action-time">
                                        ответ дан
                                                                                    <a href="https://stackoverflow.com/users/4435444/francois-allard" rel="noopener" target="_blank">
                                                                                    Francois Allard                                                                                    </a>
                                                                                <span title="35315016" class="relativetime"> 10.02.2016 в 13:15</span>
                                    </div>
                                    <a class="a-link" href="https://stackoverflow.com/questions/14751080/how-can-i-debug-my-meteor-app-using-the-webstorm-ide/35315016#35315016" target="_blank" rel="noopener">источник</a>
                                    <div class="clearfix"></div>
                                    <div class="comments">
    
</div>                                </div>
                            </div>
                        </div>
                                                            <div class="answer-pager">
                            </div>
        </div>


        <div class="row">
							<p><a href="/questions/790/laravel-fluent-queries-how-do-i-perform-a-select-as-using-fluent">Laravel Fluent Queries - Как выполнить «SELECT AS» с использованием Fluent?</a></p>
										<p><a href="/questions/792/how-to-change-tkinter-button-state-from-disabled-to-normal">Как изменить состояние кнопки Tkinter с отключенного на нормальное?</a></p>
					</div>

           
    </div>
</div>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <div class="pull-left">
            <div class="license">
                user contributions licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="nofollow license">cc by-sa 3.0</a> with attribution required. <a href="//www.dmca.com/Protection/Status.aspx?id=2c2a994e-6618-4b80-b7b6-d9b9fc61e85a" title="DMCA.com Protection Status" class="dmca-badge"> <img src="//images.dmca.com/Badges/dmca-badge-w100-5x1-08.png?ID=2c2a994e-6618-4b80-b7b6-d9b9fc61e85a" alt="DMCA.com Protection Status"></a> <script src="//images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script>
            </div>
        </div>

        <div class="pull-right logo">
            <a href="#">
                <!-- <img src="/img/logo-dark.svg"> -->
                <div class="name">ask<span class="cl-orange">dev</span></div>
            </a>
        </div>

   
            <script language="javascript" type="text/javascript"><!--
            Cd=document;Cr="&"+Math.random();Cp="&s=1";
            Cd.cookie="b=b";if(Cd.cookie)Cp+="&c=1";
            Cp+="&t="+(new Date()).getTimezoneOffset();
            if(self!=top)Cp+="&f=1";
            //--></script>
            <script language="javascript1.1" type="text/javascript"><!--
            if(navigator.javaEnabled())Cp+="&j=1";
            //--></script>
            <script language="javascript1.2" type="text/javascript"><!--
            if(typeof(screen)!=