4
私はをデバッグ WebStormのPolymerアプリケーションをデバッグしますが、Polymer固有の構成オプションはありません。ノード構成の実行はcmd行のpolymer serveと同等ですが、デバッグはコード0で終了します。WebStormを構成してポリマーをデバッグする方法
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>