Come posso eseguire il debug di CoffeeScript nella mia app Meteor utilizzando l'ID WebStorm

Question

Sono in grado di ottenere il debug di Meteor in WebStorm utilizzando JavaScript utilizzando le istruzioni in questa domanda (How can I debug my Meteor app using the WebStorm IDE?).

Tuttavia, non riesco a impostare i punti di interruzione nei file coffeescript.

È possibile farlo?

Answer 1

L'ho giocherellato per un po 'senza un grande successo. Da quello che potrei raccogliere, affinché WebStorm supporti i punti di rottura del coffeescript ha bisogno di generare i file js e la mappa transpiled ... che spezzerà la meteora, come fa la sua compilation di coffeescript.

Alla fine, il più vicino ho ottenuto è stato di:

1. Run meteoriti con le opzioni nodo del debugger:

   $ NODE_OPTIONS = "- debug = 47977" Meteor

2. Impostare una configurazione di debug remoto node.js in Webstorm, puntandola alla stessa porta (47977).

3. lancio una sessione di debug

4. impostare il mio punti di interruzione nei file js transpiled riportati nella scheda "script" del debugger. Confusamente, quando ho impostato i punti di interruzione su questi file, la mia versione di WebStorm (8.0.4) non mostrava la solita icona del cerchio rosso nella canaletta ... ma ha impostato il punto di interruzione e si è interrotta.

Quindi non ideale, ma ancora meglio di niente e più conveniente rispetto all'utilizzo di Node-Inspector!

Answer 2

Finalmente ho capito.

È stata aggiunta una cartella (nel mio esempio '.coffeejs') per memorizzare i file js e map transpiled, denominarli come si può, ma ricordarsi di avviare il nome della cartella con '.' per il bundler di Meteor per ignorare i file in esso contenuti.

quindi modificare il file watcherTasks.xml, che si trova nella cartella .idea della radice del progetto, e cambiare il valore 'argomenti' il seguente:

--output $ProjectFileDir$/.coffeejs/ --map --compile $FileName$ 

Godetevi Meteora con caffè! :)

Answer 3

@Sameer Shemma

Per il vostro trucco per lavoro fa una necessità:

• di aggiungere solo questo nuovo .coffeejs cartella e cambiare la singola linea che hai evidenziato nel file watcherTasks.xml o
• per sostituire il mio intero file watcherTasks.xml dal tuo?

Ho provato a prima possibilità e WebStorm non si fermerebbe ancora nella maggior parte dei punti di interruzione inseriti nei file .coffee.

Per il secondo non sapevo quale sarebbe stata la corrispondenza del valore del percorso "/usr/local/bin/coffee" dell'attributo name nel mio caso (Windows 7, Meteor 1.4.1.2, pacchetto CoffeeScript 1.11.1_1, WebStorm 2016.2.3), ma senza cambiarlo, WebStorm continua a non fermarsi nella maggior parte dei punti di interruzione per inserire i file .coffee.

Inoltre, il tuo trucco richiede l'installazione di un osservatore di file CoffeeScript e/o compilatore stand-alone al di fuori di quello presumibilmente incluso nel pacchetto atomosfera Meteor CoffeeScript 1.11.1_1 che sto utilizzando?

Ecco il mio file corrente watcherTasks.xml:

<?xml version="1.0" encoding="UTF-8"?> 
<project version="4"> 
    <component name="ProjectTasksOptions"> 
    <TaskOptions isEnabled="true"> 
     <option name="arguments" value="--output $ProjectFileDir$/.coffeejs/ --map --compile $FileName$" /> 
     <option name="checkSyntaxErrors" value="true" /> 
     <option name="description" value="Compiles .coffee files into .js files" /> 
     <option name="exitCodeBehavior" value="ERROR" /> 
     <option name="fileExtension" value="coffee" /> 
     <option name="immediateSync" value="true" /> 
     <option name="name" value="CoffeeScript" /> 
     <option name="output" value="$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map" /> 
     <option name="outputFilters"> 
     <array /> 
     </option> 
     <option name="outputFromStdout" value="false" /> 
     <option name="program" value="$ExecutableByFileExt$" /> 
     <option name="scopeName" value="Project Files" /> 
     <option name="trackOnlyRoot" value="true" /> 
     <option name="workingDir" value="$FileDir$" /> 
     <envs /> 
    </TaskOptions> 
    </component> 
</project>