I want to debug my Polymer application in WebStorm, but there are no Polymer-specific configuration options. The Node configuration run is equivalent polymer servein the cmd line, but Debug exits with code 0.
I know that I can use Chrome to set breakpoints and validate my code, but it would be nice to do this 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 item:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="quick-tour-app">
<template>
<style>
:host {
display: block;
}
</style>
<h1>[[prop1]]!</h1>
</template>
<script>
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);
</script>
</dom-module>
source
share