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 が無効であると報告される問題を解決します

推薦する

Linux インストール MySQL チュートリアル (バイナリ配布)

このチュートリアルでは、LinuxにMySQLをインストールする詳細な手順を参考までに紹介します。具...

HTML CSS JS はタブページのサンプルコードを実装します

コードをコピーコードは次のとおりです。 <html xmlns="">...

JavaScript スタイル オブジェクトと CurrentStyle オブジェクトのケース スタディ

1. スタイルオブジェクトスタイル オブジェクトは単一のスタイル宣言を表し、スタイルが適用されている...

初心者のための入門チュートリアル⑤:ウェブサイト登録はとても簡単、簡単な登録のヒント

スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...

mysql-5.7.21-winx64 無料インストール版のインストール - Windows チュートリアル詳細説明

1 ダウンロードアドレスは https://dev.mysql.com/downloads/mysq...

フレームセットを使用して複雑なページレイアウトを実装するためのテクニックの概要

コードをコピーコードは次のとおりです。 <html> <!--混合フレームレイアウ...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...

ES6実装クラスのプライベート変数の書き方をいくつか詳しく説明します

プライベート変数のクロージャ実装プライベート変数は共有されないnew キーワードにより、 perso...

Debian システムでの自動パッケージ更新の問題を解決する方法

いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...

mysql5.7.17 zip の解凍とインストールの詳細な手順

1. ダウンロードアドレスhttps://dev.mysql.com/downloads/mysql...

MySQLへの外部ネットワークアクセスを許可し、MySQLアカウントのパスワードを変更する方法

mysqlのrootアカウント、普段はlocalhostか127.0.0.1で接続しています。会社の...

React+Antdはテーブルの追加、削除、変更の例を実装します

目次テーブル/index.jsテーブル/モデル/index.jsテーブル/モデル/モジュール/bas...

Docker で TLS と CA 認証を有効にする方法

目次1. 証明書を生成する2. リモートを有効にする3. リモート接続3.1 Jenkins接続3....

マウスの尾行効果を実現する JavaScript

マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...

CSS3 で翻訳効果 (transfrom: translate) を実装する例

移動を実現するためにtranslateパラメータを使用しますtranslateX: X 軸に沿って移...