I want to debug my Polymer app in WebStorm, but there is no Polymer specific configuration option. The Node configuration Run is equivalent to polymer serve in cmd line, but Debug exits with code 0.
I know I can use Chrome to set breakpoints and inspect my code, but it would be nice to do it in WebStorm.
Here's the output when I click "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
My html file:
<!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>
My custom element:
<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>