VSCode で JS コードをデバッグするいくつかの方法に関する簡単な説明
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}"
}
]
}
注: "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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
vscode で Word ドキュメントを表示する方法 vscode で Word ドキュメントを表示する方法
May 09, 2024 am 09:37 AM
まず、コンピュータ上で vscode ソフトウェアを開き、図の①に示すように、左側の [拡張機能] アイコンをクリックし、図の②に示すように、拡張機能インターフェイスの検索ボックスに「officeviewer」と入力します。次に、図の③のように検索結果からインストールする「officeviewer」を選択し、最後に以下のようにdocxやpdfなどのファイルを開きます。
vscode でフローチャートを描く方法_visual_studio コードでフローチャートを描く方法
Apr 23, 2024 pm 02:13 PM
まず、コンピューターで Visual Studio コードを開き、左側にある 4 つの四角形のボタンをクリックし、検索ボックスに「draw.io」と入力してプラグインをクエリし、インストール後に新しい test.drawio ファイルを作成して [インストール] をクリックします。 test.drawioファイルを選択し、左側にある編集モードに入ります。 描画後、「ファイル」→「埋め込み」→「svg」をクリックし、「svgをコピー」を選択します。コピーした SVG コードを HTML コードに貼り付けます。HTML Web ページを開くと、Web ページ上の画像をクリックして、フローチャートを拡大または縮小できます。ここでは、右下隅の鉛筆パターンをクリックして Web ページにジャンプします。
カリフォルニア工科大学の中国人がAIを使って数学的証明を覆す！タオ・ゼシュアンの衝撃を5倍にスピードアップ、数学的ステップの80％が完全に自動化
Apr 23, 2024 pm 03:01 PM
テレンス・タオなど多くの数学者に賞賛されたこの正式な数学ツール、LeanCopilot が再び進化しました。ちょうど今、カリフォルニア工科大学のアニマ・アナンドクマール教授が、チームが LeanCopilot 論文の拡張版をリリースし、コードベースを更新したと発表しました。イメージペーパーのアドレス: https://arxiv.org/pdf/2404.12534.pdf 最新の実験では、この Copilot ツールが数学的証明ステップの 80% 以上を自動化できることが示されています。この記録は、以前のベースラインのイソップよりも 2.3 倍優れています。そして、以前と同様に、MIT ライセンスの下でオープンソースです。写真の彼は中国人の少年、ソン・ペイヤンです。
vscode でバックグラウンド更新を有効にする方法 vscode でバックグラウンド更新を有効にする方法
May 09, 2024 am 09:52 AM
1. まず、インターフェースを開いた後、左上隅のファイルメニューをクリックします。 2. 次に、設定列の設定ボタンをクリックします。 3. ジャンプした設定ページで、アップデートセクションを見つけます。最後に、マウスをクリックしてチェックして有効にし、Windows のバックグラウンドで新しい VSCode バージョンのボタンをダウンロードしてインストールし、プログラムを再起動します。
vscode ワークスペースにファイルを追加する方法 vscode ワークスペースにファイルを追加する方法
May 09, 2024 am 09:43 AM
1. まず、vscode ソフトウェアを開き、エクスプローラー アイコンをクリックして、ワークスペース ウィンドウを見つけます。 2. 次に、左上隅にあるファイル メニューをクリックし、フォルダーをワークスペースに追加オプションを見つけます。 3. 最後に、フォルダーの場所を見つけます。ローカルディスク、追加ボタンをクリックします
vscode で wsl 設定ファイルを無効にする方法 vscode で wsl 設定ファイルを無効にする方法
May 09, 2024 am 10:30 AM
1. まず、設定メニューで設定オプションを開きます。 2. 次に、よく使用されるページでターミナル列を見つけます。 3. 最後に、列の右側にある usewslprofiles ボタンのチェックを外します。
VScode でアニメーションのスムーズな挿入を設定する方法 アニメーションのスムーズな挿入を設定する VScode チュートリアル
May 09, 2024 am 09:49 AM
1. まず、インターフェースを開いた後、ワークスペースインターフェースをクリックします。 2. 次に、開いている編集パネルで、「ファイル」メニューをクリックします。 3. 次に、「環境設定」列の下にある「設定」ボタンをクリックします。 4. 最後に、マウスをクリックして CursorSmoothCaretAnimation を確認します。ボタンを押して保存するだけです
Vscode でワークスペースの信頼権限を開く方法 Vscode でワークスペースの信頼権限を開く方法
May 09, 2024 am 10:34 AM
1. まず、編集ウィンドウを開いた後、左下隅にある設定アイコンをクリックします。 2. 次に、表示されるサブメニューで [ワークスペース信頼の管理] ボタンをクリックします。 3. 次に、編集ウィンドウでページを見つけます。最後に、あなたのオフィスによると、必要に応じて関連する指示を確認してください
