如何配置 WebStorm 以调试 Polymer答案

【问题标题】：How to configure WebStorm to debug Polymer如何配置 WebStorm 以调试 Polymer
【发布时间】：2017-09-29 01:15:14
【问题描述】：

我想在 WebStorm 中调试我的 Polymer 应用程序，但没有 Polymer 特定的配置选项。 Node 配置 Run 相当于 cmd 行中的polymer serve，但 Debug 退出代码为 0。

我知道我可以使用 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>

【问题讨论】：

标签： polymer webstorm

【解决方案1】：

使用 Node.js 调试器启动 Polymer 的原因是什么？你要调试 Polymer cli 吗？或者，您只是想调试您的自定义组件？在后一种情况下，使用polymer serve 在终端中启动聚合物网络服务器，然后创建JavaScript Debug 运行配置，在此处指定您的组件 URL（通常在浏览器中输入的 URL，例如 localhost:8080/components/my-el/）并点击调试。

【讨论】：