如何配置WebStorm進行調試Polymer

我想要調試我的聚合物應用程序在WebStorm中，但沒有聚合物特定的配置選項。節點配置運行等同於cmd行中的polymer serve，但Debug以編碼0退出。如何配置WebStorm進行調試Polymer

我知道我可以使用Chrome設置斷點並檢查我的代碼，但在WebStorm中執行此操作會很好。

這裏的輸出，當我點擊「調試」：

/home/user/.node_modules_global/bin/polymer --debug-brk=38501 --expose_debug_as=v8debug serve 


    /\˜˜/ /\˜˜/\ 
    /__\/ /__\/__\ Polymer-CLI 
/\/ /\ /\ /\ 
/__\/ /__\/ \/__\ The multi-tool for Polymer projects 
\ /\ /\/ /\/
\/__\/__\/ /__\/ Usage: `polymer <command> [options ...]` 
    \ /\/ /\/
    \/__\/ /__\/ 


Available Commands 

    analyze Writes analysis metadata in JSON format to standard out  
    build  Builds an application-style project       
    help  Shows this help message, or help for a specific command  
    init  Initializes a Polymer project         
    install installs Bower dependencies, optionally installing "variants" 
    lint  Identifies potential errors in your code.      
    serve  Runs the polyserve development server       
    test  Runs web-component-tester          

Global Options 

    --env type      The environment to use to specialize certain 
            commands, like build       
    --entrypoint     The main HTML file that will be requested for 
            all routes.         
    --shell string     The app shell HTML import      
    --fragment string[]    HTML imports that are loaded on-demand.  
    --root string     The root directory of your project. Defaults 
            to the current working directory.    
    --sources string[]    Glob(s) that match your project source files. 
            Defaults to `src/**/*`.      
    --extra-dependencies string[] Glob(s) that match any additional    
            dependencies not caught by the analyzer to  
            include with your build.      
    -v, --verbose     turn on debugging output      
    -h, --help      print out helpful usage information   
    -q, --quiet      silence output         

Run `polymer help <command>` for help with a specific command. 


Process finished with exit code 0

我的HTML文件：

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> 

    <title>quick-tour</title> 
    <meta name="description" content="quick-tour description"> 

    <link rel="manifest" href="/manifest.json"> 


    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script> 

    <link rel="import" href="/src/quick-tour-app/quick-tour-app.html"> 
    </head> 
    <body> 
    <quick-tour-app></quick-tour-app> 
<img src="https://www.polymer-project.org/images/logos/p-logo-32.png"> 

    </body> 
</html>

我的自定義元素：

<link rel="import" href="../../bower_components/polymer/polymer-element.html"> 
<!--<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">--> 
<!--<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">--> 

<dom-module id="quick-tour-app"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <h1>[[prop1]]!</h1> 
    </template> 

    <script> 
    /** @polymerElement */ 
    class QuickTourApp extends Polymer.Element { 
     static get is() { return 'quick-tour-app'; } 
     static get properties() { 
     return { 
      prop1: { 
      type: String, 
      value: 'Hello' 
      } 
     }; 
     } 
    } 

    customElements.define(QuickTourApp.is, QuickTourApp); 
// window.customElements.define(QuickTourApp.is, QuickTourApp); 
    </script> 
</dom-module>

來源

2017-09-29 Aleksey Khivrenko

什麼是與起始聚合物的原因Node.js調試器？你打算調試Polymer cli嗎？或者，你只是想調試你的自定義組件？在後一種情況下，使用polymer serve在終端中啓動聚合物Web服務器，然後創建一個JavaScript Debug運行配置，指定您的組件URL（通常在瀏覽器中輸入的那個，如localhost:8080/components/my-el/），並點擊調試。

來源

2017-10-03 17:03:12 lena

如何配置WebStorm進行調試Polymer

回答

相關問題