web-dev-qa-db-ja.com

chrome開発者ツールでのプランカーのデバッグ

Plunkerでjavascriptファイルを作成し、それをデバッグしたいと思います。 「ソース」パネルを開くと、作成したjsファイルが表示されません。 Plunkerjsファイルがたくさん表示されます。アドバイスをお願いします。ありがとう

google-chrome-devtoolsplunker
20
Dmitry

作成したソースファイルにドリルダウンするには、主に2つのオプションがあります。

1。プレビューパネルのポップアップウィンドウモードを使用します

デフォルトでは、プレビューアはプランカーWebアプリ内の<iframe>内で実行されます。プレビューウィンドウの右上にある青い展開アイコンをクリックすると、プランカーに別のウィンドウにプレビューアを表示するように依頼できます。ポップアップウィンドウの開発ツールを開くと、yourソースファイルのみが表示されます。

2。プレビューを右クリックして要素の検査を押します

この方法で行うと、埋め込まれたライブプレビューを使用できるようになり、コードに関連付けられているDOMにドリルダウンするためのショートカットが提供されます。

21
filearts

別の方法は、これをjavascriptファイルに入れることです

デバッガ;

コンソールを開いたままにします。これにより、デバッガーはそこで停止するだけでなく、ファイルも開くようになります。

36
dwbartz

写真は千の言葉の価値があります... F12そしてソースを選択します。 plunkerPreviewTargetにはソースコードがあります

plunker debug chrome

5
tomcat

私が見つけたより簡単な方法は、単にあなたのplnkの一意のidを取得することです。

通常の '編集'モードのURLは次のようになります

http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview

これを追加するだけですid-P0fqZG6G6khKKrtfBkDPURLへ

http://run.plnkr.co/plunks/したがって

http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/

重要：末尾に必ず追加してください/

  • Open new URL in a new chrome window
  • Hit F12 in chrome, voila native angular JS debugging for your plnk

注：その後、plnkrで編集を続行し、デバッグ時にこのURLを保存して更新するだけで、アクティブなデバッグセッションを維持できます。

2
DanH

これは変更される可能性がありますが、現在Chrome 47.0.2526.111 m、Windows 10、64ビット）では、これがプランクソースファイルを見つける方法です。

  • オープン開発ツール（F12）
  • オープンソース
  • run.plnkr.coを探してください
  • これを展開して、不可解な名前の単一のディレクトリを表示します

中には、デバッグを開始できるようにファイルがあります

0
Nate