IDEAでVUEプロジェクトをデバッグするための詳細な手順

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイントを設定する必要がありますが、Chrome のブレークポイント情報はユーザーフレンドリーではありません。偶然このアイデアにこの機能があることを発見しました。本当にすごいですね。長い間勉強して、やっと完成しました。ハハ、とても嬉しいです。詳細な手順は次のとおりです。

1. ブラウザプラグインをダウンロードする

Chrome アプリ ストアで「jetbrains ide support」プラグインを検索します。以下に示すように、FQ が必要になる場合があります (Baidu の使い方がわからない場合は、google host を使用してください)。これが私がインストールしたものです。ここで、ダウンロードしたプラグインを見つけてインストールしようとしましたが、接続が成功せず、常にエラーメッセージが表示されました。これについては後述します。だから怠けずに正直にダウンロードしてください。

ここに画像の説明を挿入

インストールが成功すると、このアイコンが右上隅に表示されます。

ここに画像の説明を挿入

ダウンロードしたプラグインはインストールしないでください。まず、インストール後には機能しなくなります。次に、Chrome は不明なソースからのプラグインを信頼しないため、再起動後にプラグインが自動的に無効になります。オンラインでインストールできない場合は、ダウンロードしたプラグインの拡張子をrarに変更し、フォルダに解凍し、ブラウザのプラグイン開発者モードを使用して、フォルダをプラグインとして読み込み、インストールするという方法もあります。

また、以下に示すように、プラグイン アイコンを右クリックして [オプション] を選択し、ポートを構成することもできます。これは、アイデアと一致している必要があります。

ここに画像の説明を挿入
ここに画像の説明を挿入

2. IDEAを構成する

アイデアの構成は以下のとおりです

ここに画像の説明を挿入
ここに画像の説明を挿入

これら 2 つの手順を構成した後、新しく作成した JavaScript デバッグを実行してデバッグを開始し、ブレークポイントにアクセスします。

ここに画像の説明を挿入

これで、IDEA で VUE フロントエンド プロジェクトをデバッグする方法に関するこの記事は終了です。IDEA で VUE プロジェクトをデバッグする方法の詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue プログラムをデバッグする方法
  • Vue-devtoolsのインストール方法
  • Vue3.xソースコードデバッグの実装方法
  • Idea または Webstorm を使用して Vue プロジェクトを実行する方法 (詳細な手順)
  • IDEAでVUEフロントエンドプロジェクトをデバッグし、JSをデバッグするには2つのステップだけが必要です

<<:  MySQL はどのようにしてマスターとスレーブの同期を実現するのでしょうか?

>>:  docker のインストールが完了し、bridge-nf-call-iptables が無効であると報告される問題を解決します

推薦する

実際のプロジェクトでElementUIを使用する手順の詳細な説明

目次1. テーブル自動ソート2. ページング機能3.el-checkbox-group 複数選択ボッ...

JDBC-idea で mysql をインポートして java jar パッケージに接続する (mac)

序文1. この記事ではMySQL 8.0バージョンを使用していますバージョン5.0と比較すると、パッ...

Linux のスケジュールされたタスクの crontab のインストールと使用の詳細な説明

crontabをインストールするyum install crontabs CentOS 7が付属して...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

MySQL 8.0.11 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...

RedHat 6.5/CentOS 6.5 に MySQL 5.7.20 をインストールするための詳細なチュートリアル

rpmインストールパッケージをダウンロードするMySQL公式サイト: https://dev.mys...

MySQL でグループ化した後、各グループの最大値を取得する詳細な例

MySQL でグループ化した後、各グループの最大値を取得する詳細な例1. テストデータベーステーブル...

Elementのメッセージポップアップウィンドウが繰り返しポップアップする問題の解決

目次1. 使用2. メッセージポップアップウィンドウが繰り返し表示される問題を解決する1. 使用Vu...

Ubuntu 18.04 MySQL 8.0 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0のインストールと設定方法を参考までに紹介します。具体的な内容は以下の...

MySQLテーブルのテーブル構造を素早く変更する方法

MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...

フロア効果を実現するためのJavaScript

この記事では、フロア効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...

フォーム要素の垂直方向の中央揃えに最適なソリューション

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

Ubuntu 14.04 に FTP サーバーをインストールするための実装手順

目次インストールソフトウェア管理匿名アクセスモード設定ファイルを変更するクライアントがサーバーにログ...

フレックスレイアウトではサブアイテムの高さを維持できる

Flex レイアウトを使用すると、水平に配置すると、すべての子項目の高さが同じになることがわかります...

Nginx レイヤー 4 負荷分散構成ガイド

1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...