VSCode で JS コードをデバッグするにはどうすればよいですか?次の記事では、VSCode で JS コードをデバッグするいくつかの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
関連する推奨事項: 「vscode チュートリアル 」
VS Code で js をデバッグする 2 つの方法を紹介します:
Quokka.js プラグイン
ライブ サーバーを備えた Chrome 用デバッガー
#Quokka.js プラグイン
プラグインのアドレス: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
拡張機能ストアで検索してインストールします:
VS コードでショートカット キー ctrl Shift P を使用してパネルを表示し、## と入力します。 #quo:
Debugger for Chrome は Live Server とペアになっています
Debugger for Chrome プラグインのアドレス: https ://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chromeLive Server プラグインのアドレス: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 最初にこれら 2 つのプラグインをダウンロードしてインストールしてください。この方法には Google Chrome のインストールが必要です。 次のようなフロントエンド プロジェクトがあるとします。
Go Live という小さなボタンがあります:
http://127.0.0.1:5500/
http://127.0.0.1:5500/ を通じて先ほどの Web ページを開くことができます。
5500 は後で使用するため、覚えておいてください。 Live Server またはこのポート番号を占有する他のプログラムを開くと、ポート番号は自動的に 1 になります。
名前が示すように、ライブサーバーはリアルタイムで更新されます。プロジェクト ファイルまたはコードを変更すると、Live Server はすぐに更新され、ページが自動的に更新されます。エディターに戻ります。 順番にクリック: 実行アイコン -> launch.json ファイルの作成:
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "chrome 调试",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}VS コードは、プロジェクトが存在するディレクトリに関連する設定を保存します:
注: "url" フィールドのポート番号 5500 は、Live Server によって提供されるポート番号に対応する必要があります。
你会看到打上的断点成功拦截执行：
细心的你可能会发现，当点击一次 Go Live 按钮时会打开一个浏览器窗口，再点击一次调试按钮时（快捷键 F5），会打开第二个用于调试的窗口。这可能是没有必要的，我们只需要一个窗口就行了。
下面我们来编辑配置，使这个过程只需打开一次浏览器窗口。
点击 “chrome 调试” 旁边的齿轮：
在打开的编辑框依次点击：
得到如下配置并保存：
在扩展商店搜索 Live Server 并打开它的扩展设置：
需要修改的配置有两个：
1、Chrome Debugging Attachment
点击进入，将 "liveServer.settings.ChromeDebuggingAttachment": false 改为 true。
"liveServer.settings.ChromeDebuggingAttachment": true
2、Custom Browser
点击此选项中的下拉框，我们选择 chrome：
修改完成！
接下来我们重启 Live Srever 服务：
回到 VS Code，按下 F5 键，启动调试：
之后本项目的每次调试你只需要点击 Go Live 按钮并回到 VS Code 按下 F5 键就行了。
当然，chrome 调试 选项可能还是生效的，当你关掉 Live Server 打开的浏览器窗口时，可以尝试使用这个选项再次打开。
如果遇到端口号被占用的情况，可以点击调试旁边的齿轮来修改。
祝：
永无 BUG！
使用到的代码：
<!-- ./index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="time">请点击下方按钮以获取当前时间</div>
<button id="getTime">获取时间</button>
<script ></script>
</body>
</html>// ./js/index.js
let getTimeBtn = document.getElementById("getTime");
getTimeBtn.onclick = function (e) {
let time = document.getElementById("time");
let now = new Date().toLocaleString();
time.innerHTML = now;
}// ./.vscode/launch.json
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "chrome 调试",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}更多编程相关知识，请访问：编程课程！！
以上がVSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Visual Studioの使用：プラットフォーム全体のソフトウェアの開発Apr 17, 2025 am 12:13 AMVisualStudioを使用したクロスプラットフォーム開発は実現可能であり、.NetcoreやXamarinなどのフレームワークをサポートすることにより、開発者は一度にコードを作成して複数のオペレーティングシステムで実行できます。 1）.Netcoreプロジェクトを作成し、クロスプラットフォーム機能を使用します。2）モバイルアプリケーション開発にXamarinを使用します。
vscodeを使用してJSONをフォーマットする方法Apr 16, 2025 am 07:54 AMVSコードでJSONをフォーマットする方法は次のとおりです。1。ショートカットキーを使用します（Windows/Linux：Ctrl Shift I; MacOS：CMD Shift I）; 2。メニュー（ "edit"＆gt; "format document"）; 3。JSONフォーマッタ拡張機能（プレシエなど）をインストールします。 4。手動でフォーマットします（ブロックをインデント/抽出するためにショートカットキーを使用するか、ブレースとセミコロンを追加します）。 5。外部ツール（JsonlintやJson Formatterなど）を使用します。
vscodeをコンパイルする方法Apr 16, 2025 am 07:51 AMVSCODEのコンパイルコードは5つのステップに分割されます。C拡張子をインストールします。プロジェクトフォルダーに「main.cpp」ファイルを作成します。コンパイラ（MINGWなど）を構成します。ショートカットキー（「Ctrl Shift B」）または「ビルド」ボタンでコードをコンパイルします。コンパイルされたプログラムをショートカットキー（「F5」）または「実行」ボタンで実行します。
VSCODEをインストールする方法Apr 16, 2025 am 07:48 AMVisual Studioコードをインストールするには、次の手順に従ってください。公式Webサイトhttps://code.visualstudio.com/;オペレーティングシステムに従ってインストーラーをダウンロードします。インストーラーを実行します。ライセンス契約を受け入れ、インストールパスを選択します。インストールが完了した後、VSCODEは自動的に開始されます。
VSCODEでフォントを拡大する方法Apr 16, 2025 am 07:45 AMVisual Studioコードでフォントを拡大する方法は次のとおりです。設定パネル（CTRL、またはCMD）を開きます。 「フォントサイズ」を検索して調整します。適切なサイズの「フォントファミリ」を選択します。適切なサイズを提供するテーマをインストールまたは選択します。キーボードショートカット（CTRLまたはCMD）を使用して、フォントを拡大します。
VSCODEを使用してリモートサーバーに接続する方法Apr 16, 2025 am 07:42 AMVSCODEを介してリモートサーバーに接続する方法は？リモート-SSH拡張構成SSH VSCODEで接続を作成する接続情報の入力情報：ホスト、ユーザー名、ポート、SSHキーリモートエクスプローラーの保存された接続をダブルクリックします
VSCODEでVUEを実行する方法Apr 16, 2025 am 07:39 AMVSCODEでVUEプロジェクトを実行するには、次の手順が必要です。1。Vue CLIをインストールします。 2。VUEプロジェクトを作成します。 3.プロジェクトディレクトリに切り替えます。 4.プロジェクトの依存関係をインストールします。 5.開発サーバーを実行します。 6.ブラウザを開いてhttp：// localhost：8080にアクセスします。
2つのファイルをVSCodeと比較する方法Apr 16, 2025 am 07:36 AMVSCODEでファイルを比較する方法：1。2つのファイルを開きます。2。違いの表示（表示メニューを表示）、3。違いを表示（緑色、削除、紫色の変更）、4。矢印キーを使用してナビゲートします。その他の機能には、変更のマージ、変更のコピー、詳細の表示、違いの編集が含まれます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
Dreamweaver Mac版
ビジュアル Web 開発ツール
