Question

我想在WebStorm中调试我的Polymer应用程序，但没有Polymer特定配置选项。节点配置运行等效于cmd行中的polymer serve，但Debug退出时代码为0。

我知道我可以使用Chrome设置断点并检查我的代码，但在WebStorm中这样做会很好。

点击“Debug”时的输出：

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

Answer 1

使用Node.js调试器启动Polymer的原因是什么？你打算调试Polymer cli吗？或者，您只是想调试自定义组件？在后一种情况下，使用polymer serve在终端中启动聚合物Web服务器，然后创建JavaScript Debug运行配置，在那里指定您的组件URL（通常在浏览器中输入的那个，如{{1} }并点击调试。

如何配置WebStorm以调试Polymer

1 个答案: